/* =====================================================================
   JJ Textile — Homepage Redesign (July 2026)
   New palette + typography variables, plus styles for the six new
   sections (value props, image collage, bestsellers, Meet the Designer,
   testimonials, newsletter) and light restyling of the hero + blog
   carousel to match. Loads after jjt-hero-slider.css, jjt-home-sections.css
   and jjt-blog-carousel.css, so rules here safely override them.

   Fonts and colours below are a reasonable placeholder match for the new
   design — swap the CSS variables once the client confirms exact brand
   colours/fonts, no need to hunt through every section's CSS.
   ===================================================================== */

:root {
    --jjt-cream: #f8f4ec;
    --jjt-ink: #2b2a25;
    --jjt-muted: #6b6558;
    --jjt-forest: #2f3a2c;
    --jjt-heading-font: 'Fraunces', Georgia, 'Times New Roman', serif;
    --jjt-heading-weight: 600;
    --jjt-body-font: inherit; /* falls back to the theme's normal body font unless a font is chosen in Appearance → Homepage Sections */
    --jjt-body-weight: 400;
}

/* Bestsellers, Testimonials and the Blog section are plain white;
   Value Props is also white (set separately, further down). Collage has
   no visible background of its own (tiles fill it edge to edge); About
   is a full-bleed photo now, so a background colour here is moot. */
.home .jjt-bestsellers,
.home .jjt-testimonials,
.home .jjt-blog-carousel {
    background: #fff;
}

/* Everything else in these sections inherits the chosen body font from
   here; heading selectors below are more specific and override it with
   the chosen heading font instead. */
.home .jjt-valueprops,
.home .jjt-collage,
.home .jjt-bestsellers,
.home .jjt-about,
.home .jjt-testimonials,
.home .jjt-newsletter,
.home .jjt-blog-carousel {
    font-family: var(--jjt-body-font);
    font-weight: var(--jjt-body-weight);
    /* Some curated fonts (Quando, Georgia, "Default") only ship a single
       real weight — without this, some browsers silently ignore a
       heavier "thickness" choice for those fonts instead of fake-bolding
       it, which reads as if the setting didn't save. */
    font-synthesis: weight;
}

.home .jjt-valueprops h1,
.home .jjt-valueprops h2,
.home .jjt-collage h1,
.home .jjt-collage h2,
.home .jjt-bestsellers h2,
.home .jjt-about h2,
.home .jjt-testimonials h2,
.home .jjt-newsletter h2,
.home .jjt-blog-carousel__heading {
    font-family: var(--jjt-heading-font);
    font-weight: var(--jjt-heading-weight);
    color: var(--jjt-ink);
    font-synthesis: weight;
}

/* =====================================================================
   ALL homepage CTA buttons — semi-transparent white with larger, black
   text, per the latest client mockup (replaces the previous solid-gold
   treatment everywhere: hero, About/Newsletter/Feature Banner CTAs). A
   light blur keeps the text readable over busy photos without needing a
   fully-opaque background. The Bestsellers "Add to Basket" buttons share
   this same size/weight/border/hover "feel" but get their own dedicated
   rule further down instead of being included here, since they use the
   Blog section's cream tone rather than white — see
   ".jjt-bestsellers__addtocart .button" below.
   ===================================================================== */
.home .jjt-hero__cta,
.home .jjt-cta-btn {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #111 !important;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
}
.home .jjt-hero__cta:hover,
.home .jjt-cta-btn:hover {
    background: #fff;
    color: #111 !important;
}

/* ---- Shared CTA button variants ---- */
.jjt-cta-btn--outline {
    background: transparent;
    border: 1px solid var(--jjt-ink);
    color: var(--jjt-ink);
}
.jjt-cta-btn--outline:hover {
    background: var(--jjt-ink);
    color: #fff;
}
.jjt-cta-btn--solid {
    background: var(--jjt-ink);
}
.jjt-cta-btn--solid:hover {
    color: #fff;
}

/* =====================================================================
   Hero — range everything (headline, subtext, button) to the right, to
   match the latest client mockup. Structure/markup is unchanged.
   ===================================================================== */
.home .jjt-hero__content {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    /* This content block is bottom-anchored (justify-content: flex-end)
       inside the full-height hero, so padding-bottom is the space RESERVED
       below it — increasing it pushes the text/button UP, decreasing it
       drops them lower. The previous edit reduced this (6rem -> 3.5rem),
       which actually lowered the button rather than raising it as
       intended — this corrects that by increasing it well past the
       original value. */
    padding-bottom: 9rem;
    /* The base .jjt-hero__content is centred with max-width:1200px, which
       on wide screens leaves a big gap between the right-aligned text and
       the actual browser edge. Widening this out and trimming the right
       padding pulls the whole block noticeably closer to the edge. */
    max-width: none;
    padding-right: 3%;
}
.home .jjt-hero__headline {
    font-family: var(--jjt-heading-font);
    font-weight: var(--jjt-heading-weight);
    font-synthesis: weight;
    max-width: 34ch;
    margin-left: auto;
}
.home .jjt-hero__subtext {
    max-width: 34ch;
    margin-left: auto;
}
.home .jjt-hero__cta {
    align-self: flex-end;
}

@media (max-width: 767px) {
    .home .jjt-hero__content { padding-bottom: 6.5rem; }
}

/* =====================================================================
   Value Props strip — text on the left, coloured circle icons on the
   right. Background is plain white (not the shared cream tone used by
   the sections below it).
   ===================================================================== */
.home .jjt-valueprops {
    background: #fff;
}

.jjt-valueprops {
    padding: 3.5rem 0;
}

.jjt-valueprops__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.5rem 3rem;
}

.jjt-valueprops__heading {
    flex: 1 1 320px;
    text-align: center;
    font-family: var(--jjt-heading-font);
    /* This is a <p>, not an h1/h2, so it's outside the shared heading
       selector list a few rules up — it needs its own weight/synthesis
       declared here or it silently stays at the browser default (400)
       no matter what "Titles thickness" is set to in the admin. */
    font-weight: var(--jjt-heading-weight);
    font-synthesis: weight;
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    line-height: 1.4;
    margin: 0;
    color: var(--jjt-ink);
}
.jjt-valueprops__heading span {
    display: block;
    font-size: 0.75em;
    color: var(--jjt-muted);
}

.jjt-valueprops__row {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    /* flex: 0 0 auto (not 1 1 420px) on purpose — this row should only take
       the width its 4 circles actually need, so all the leftover space
       goes to .jjt-valueprops__heading next to it. That's what lets the
       heading's own text-align: center land it centred in the space
       between the left edge and this icon row, instead of centred across
       a somewhat-arbitrary 50/50 flex split. */
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 1.75rem 2.25rem;
}

.jjt-valueprops__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 150px;
}

/* Icons are only rendered as an <a> (vs. a plain <div>) when a Link is set
   for that item in the admin — see jjt_value_props_render(). Undo the
   browser's default link underline/blue so a linked icon looks identical
   to an unlinked one at rest, with a subtle hover cue (label darkens, icon
   circle lifts slightly) as the only sign it's clickable. */
a.jjt-valueprops__item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.jjt-valueprops__item:hover .jjt-valueprops__label {
    color: var(--jjt-ink);
}
a.jjt-valueprops__item:hover .jjt-valueprops__circle {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Coloured circle — background colour is set per-icon from Appearance →
   Homepage Sections (colour picker), so the same icon graphic can be
   reused on differently-coloured circles. */
.jjt-valueprops__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    margin-bottom: 0.85rem;
}

.jjt-valueprops__circle img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.jjt-valueprops__label {
    font-size: 0.85rem;
    color: var(--jjt-muted);
    line-height: 1.4;
}

@media (max-width: 767px) {
    .jjt-valueprops__inner { justify-content: center; text-align: center; }
    .jjt-valueprops__heading { text-align: center; flex-basis: 100%; }
    .jjt-valueprops__row { justify-content: center; flex-basis: 100%; }
}

/* =====================================================================
   Image Collage — full browser width, broken down to match the client's
   reference layout exactly:
     - "Blankets & Throws" — large tile, top-left, 2/3 width, ~64% height
     - "Smaller Blankets" + "Accessories" — bottom-left, split in half
     - "Apparel" — top-right, 1/3 width, ~32% height
     - "Cushions" — bottom-right, remaining ~68% height
   Three row bands (32 / 32 / 36) is what makes this work with a single
   grid: the left tile spans bands 1+2 (64%) while the right column
   splits at a different point (band 1 alone = 32%, bands 2+3 = 68%).
   ===================================================================== */
.jjt-collage {
    padding: 0;
}

/* Row split now 59.2/32/36 (was 54.4/32/36 — client asked for the apparel
   tile "slightly deeper" again after the 70%-deeper pass), with the
   overall grid height scaled up by the same 1.272x, making the top-right
   ("apparel") tile 85% deeper than its ORIGINAL size. Since "main" spans
   rows 1+2 and "apparel" is row 1 alone, growing just row 1 while scaling
   the total height keeps every OTHER tile's actual pixel height unchanged
   (main grows along with apparel since they share row 1 — unavoidable,
   they're the same row — but smaller/accessories/cushions, which only
   touch rows 2 and 3, come out exactly as tall as before). Worked out as:
   original row1 share = 32%; 32% * 1.85 = 59.2%; new total row shares =
   59.2+32+36 = 127.2, i.e. 1.272x the original 100 — so the container's
   own height clamp() is scaled by that same 1.272x below. */
.jjt-collage__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 59.2fr 32fr 36fr;
    gap: 6px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(585px, 61vw, 967px);
}

.jjt-collage__tile--main        { grid-row: 1 / 3; grid-column: 1 / 3; }
.jjt-collage__tile--smaller     { grid-row: 3 / 4; grid-column: 1 / 2; }
.jjt-collage__tile--accessories { grid-row: 3 / 4; grid-column: 2 / 3; }
.jjt-collage__tile--apparel     { grid-row: 1 / 2; grid-column: 3 / 4; }
.jjt-collage__tile--cushions    { grid-row: 2 / 4; grid-column: 3 / 4; }

.jjt-collage__tile {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background: #e9e3d6;
}

.jjt-collage__tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--jjt-collage-zoom, 1));
    transition: transform 0.4s ease;
}

.jjt-collage__tile:hover img {
    transform: scale(calc(var(--jjt-collage-zoom, 1) * 1.04));
}

.jjt-collage__tile-text {
    position: absolute;
    right: 1.25rem;
    bottom: 1.1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

/* Font/thickness are overridable per-section from Appearance -> Homepage
   Sections -> Image Collage -> Heading Text Style. The var(..., fallback)
   form means: if that admin option is left on "Site default" (no CSS
   variable gets output by functions.php in that case), this renders
   exactly as it always did — inherit (the ancestor's body font) and a
   hardcoded weight of 500 — so nothing changes for sites that never touch
   the new control. */
.jjt-collage__tile-label {
    color: #fff;
    font-family: var(--jjt-collage-heading-font, inherit);
    font-weight: var(--jjt-collage-heading-weight, 500);
    font-synthesis: weight;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.jjt-collage__tile-subtext {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
    font-size: 1rem;
    margin-top: 0.3rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767px) {
    .jjt-collage__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 260px 170px 170px;
        height: auto;
    }
    .jjt-collage__tile--main        { grid-row: 1 / 2; grid-column: 1 / 3; }
    .jjt-collage__tile--smaller     { grid-row: 2 / 3; grid-column: 1 / 2; }
    .jjt-collage__tile--accessories { grid-row: 2 / 3; grid-column: 2 / 3; }
    .jjt-collage__tile--apparel     { grid-row: 3 / 4; grid-column: 1 / 2; }
    .jjt-collage__tile--cushions    { grid-row: 3 / 4; grid-column: 2 / 3; }
}

/* =====================================================================
   Bestsellers
   ===================================================================== */
.jjt-bestsellers {
    padding: 4rem 0;
    text-align: center;
}

.jjt-bestsellers__heading {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin: 0 0 0.75rem;
}

.jjt-bestsellers__subheading {
    max-width: 60ch;
    margin: 0 auto 2.5rem;
    color: var(--jjt-muted);
    line-height: 1.6;
}

.jjt-bestsellers__empty {
    color: var(--jjt-muted);
}

.jjt-bestsellers__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem;
    text-align: center;
    align-items: stretch; /* every item fills the row's full height, so the "margin-top: auto" below lines every button up on the same baseline regardless of how many lines a name/price wraps to */
}

.jjt-bestsellers__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jjt-bestsellers__image {
    display: block;
    width: 100%;
    margin-bottom: 0.85rem;
    background: #fff;
}
.jjt-bestsellers__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.jjt-bestsellers__name {
    color: var(--jjt-ink);
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 0.25rem;
}
.jjt-bestsellers__name:hover { color: var(--jjt-hero-accent, #c9a15a); }

.jjt-bestsellers__price {
    color: var(--jjt-muted);
    margin-bottom: 0.9rem;
}

/* Pins the button to the bottom of the item regardless of name/price
   height above it, so every button in the row lines up. */
.jjt-bestsellers__addtocart {
    margin-top: auto;
    padding-top: 0.25rem;
}

/* WooCommerce's add-to-cart shortcodes wrap the button in markup that
   varies by shortcode/version — [add_to_cart] uses
   <div class="woocommerce simple"><form class="cart">...</form></div>,
   while [add_to_cart_inline] (what's actually used here) wraps it in
   <p class="product woocommerce add_to_cart_inline">, which ships its own
   4px solid grey border from WooCommerce's core CSS (this is the "grey
   box" around each button). Cover every wrapper tag WooCommerce might use
   so none of them can bring in a border/background/spacing of their own —
   only our own button styling below should show. */
.jjt-bestsellers__addtocart div,
.jjt-bestsellers__addtocart form.cart,
.jjt-bestsellers__addtocart p,
.jjt-bestsellers__addtocart p.product {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.jjt-bestsellers__addtocart .button,
.jjt-bestsellers__addtocart .added_to_cart {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.6rem 1.5rem;
    color: #fff;
    background: var(--jjt-hero-accent, #c9a15a);
    border: none;
    border-radius: 6px;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.jjt-bestsellers__addtocart .button:focus,
.jjt-bestsellers__addtocart .added_to_cart:focus {
    outline: none;
    box-shadow: none;
}
.jjt-bestsellers__addtocart .button:hover,
.jjt-bestsellers__addtocart .added_to_cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* Give the "Add to Basket" buttons the same size/weight/no-border "feel"
   as the other homepage CTA buttons (hero, About, Feature Banner — see
   ".home .jjt-cta-btn" above), but with the Blog section's cream tone
   instead of white, per client request. Kept as its own rule (rather than
   folded back into the shared ".home .jjt-cta-btn" block) purely so the
   background colour can differ; a higher-specificity selector here
   (extra ".jjt-bestsellers" ancestor) is enough to win over the plain
   gold base rule above without needing !important. */
.home .jjt-bestsellers .jjt-bestsellers__addtocart .button,
.home .jjt-bestsellers .jjt-bestsellers__addtocart .added_to_cart {
    background: var(--jjt-cream, #f8f4ec);
    color: #111;
    font-size: 1.05rem;
    font-weight: 700;
}
.home .jjt-bestsellers .jjt-bestsellers__addtocart .button:hover,
.home .jjt-bestsellers .jjt-bestsellers__addtocart .added_to_cart:hover {
    background: #fff;
    color: #111;
}

@media (max-width: 991px) {
    .jjt-bestsellers__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .jjt-bestsellers__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Meet the Designer / About — full-width background photo, text on the
   left and the CTA on the right, both overlaid on the image (same
   visual language as the Newsletter band below it).
   ===================================================================== */
.jjt-about {
    position: relative;
    min-height: 56vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.jjt-about__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jjt-about__overlay {
    /* Darkening removed per client request — .jjt-about__text now carries
       its own text-shadow (below) to stay legible over the photo instead. */
    display: none;
}

.jjt-about__content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 3rem 6%;
}

.jjt-about__text {
    max-width: 560px;
    color: #fff;
}

.jjt-about__text h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 1.25rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.jjt-about__text p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0 0 1.25rem;
    max-width: 52ch;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.jjt-about__cta {
    flex-shrink: 0;
    /* Bottom-right of the section, per the latest mockup, rather than
       vertically centred with the text block next to it. */
    align-self: flex-end;
}

@media (max-width: 767px) {
    .jjt-about { min-height: 64vh; }
    .jjt-about__content { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   Testimonials
   ===================================================================== */
.jjt-testimonials {
    padding: 4.5rem 0;
    text-align: center;
}

.jjt-testimonials__kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--jjt-muted);
    margin: 0 0 0.5rem;
}

.jjt-testimonials__heading {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin: 0 0 0.75rem;
}

.jjt-testimonials__rating {
    color: var(--jjt-muted);
    margin: 0 0 2.5rem;
}
.jjt-testimonials__rating-stars {
    color: var(--jjt-hero-accent, #c9a15a);
    margin-right: 0.4rem;
}

/* One-line horizontal carousel — same scroll-snap technique as the blog
   carousel, so it works with mouse drag, trackpad, touch, and the
   prev/next arrow buttons. */
.jjt-testimonials__viewport {
    position: relative;
}

.jjt-testimonials__track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    text-align: left;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.jjt-testimonials__card {
    flex: 0 0 calc((100% - (1.5rem * 3)) / 4);
    scroll-snap-align: start;
    background: #fff;
    padding: 1.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05); /* section background is now white too, so a shadow (not just a border) keeps each card visually distinct */
}

.jjt-testimonials__arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e2e2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.jjt-testimonials__arrow--prev { left: -22px; }
.jjt-testimonials__arrow--next { right: -22px; }

.jjt-testimonials__stars {
    color: var(--jjt-hero-accent, #c9a15a);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.jjt-testimonials__quote {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--jjt-ink);
    margin: 0 0 1rem;
}

.jjt-testimonials__name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--jjt-muted);
    margin: 0;
}

.jjt-testimonials__actions {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .jjt-testimonials__card { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 600px) {
    .jjt-testimonials__card { flex: 0 0 85%; }
    .jjt-testimonials__arrow { display: none; }
}

/* =====================================================================
   Newsletter band ("Herd it Here First")
   ===================================================================== */
.jjt-newsletter {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: center;
    background: var(--jjt-forest);
    overflow: hidden;
}

.jjt-newsletter__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.jjt-newsletter__overlay {
    /* Darkening removed per client request — .jjt-newsletter__content now
       carries its own text-shadow (below) to stay legible over the photo. */
    display: none;
}

.jjt-newsletter__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 3rem 6%;
    color: #fff;
}

.jjt-newsletter__content h2 {
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    color: #fff;
    margin: 0 0 1rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.jjt-newsletter__content p {
    line-height: 1.6;
    margin: 0 0 1.75rem;
    opacity: 0.92;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* =====================================================================
   Blog Carousel — light restyle to match the new palette/typography
   (markup unchanged, still pulls latest posts automatically).
   ===================================================================== */
.home .jjt-blog-carousel {
    background: var(--jjt-cream);
}
.home .jjt-blog-carousel__card .jjt-blog-carousel__date {
    color: var(--jjt-hero-accent, #c9a15a);
}
.home .jjt-blog-carousel__card h4 {
    font-family: var(--jjt-heading-font);
    font-weight: var(--jjt-heading-weight);
    font-synthesis: weight;
    color: var(--jjt-ink);
}