/* ==========================================================================
   Hunza Harvest — sun-dried mountain abundance for dates, dry fruits & nuts.

   Ported from the Stitch "Hunza Harvest" design (docs/templates/pending/
   stitch_76_hunza_harvest_e_commerce_homepage/…/hunza_harvest/DESIGN.md; the
   homepage code.html is authoritative where the two disagree): a Harvest
   Cream canvas, Deep Walnut structure and calls to action, a sparing Apricot
   highlight for eyebrows / prices / badges, Lora headlines (the allowlist
   stand-in for the design's Literata) over Inter body and prices, a
   "softly geometric" 8px radius on every interactive element, and TONAL
   LAYERING instead of heavy shadows — white panels lifted off the cream
   canvas by a hairline and a very soft walnut-tinted shadow.

   This theme OWNS the hero / promo (bento) / featured / valley-sourcing /
   new-arrivals / journal / newsletter home sections (hh-* markup) and
   INHERITS Modern Retail's header, footer, trust strip, categories, product
   card and every functional page. This stylesheet therefore has two jobs:

     (a) style the NEW `hh-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the harvest-cream palette, dressing the
         announcement bar / footer / provenance band in walnut, and inking
         every accent TEXT role in the text-safe apricot.

   Everything is scoped under `body.hh-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --bs-border-radius) with theme.json-default fallbacks, so
   the customizer + live preview keep working: change the primary colour and
   every walnut surface follows.

   CONTRAST (measured with App\Support\Theming\ContrastChecker):
     - primary Deep Walnut #5c4028 is DARK — 8.63:1 on the harvest cream,
       9.46:1 on white, and white-on-walnut is 9.46:1. It is safe in EVERY
       role: body-adjacent text, icon, border, and as a fill carrying white
       text. No light-primary guard block is needed here (see
       references/gotchas.md, "A LIGHT primary_color breaks ~12 inherited
       base rules").
     - accent Apricot #d98e4a is LIGHT — 2.42:1 on cream, 2.65:1 on white,
       and white-on-apricot is only 2.65:1. It FAILS WCAG AA text (4.5:1) AND
       the lenient 3:1 non-text threshold on this cream canvas, so the raw
       accent is used ONLY for large decorative roles on the DARK walnut band
       (the valley-sourcing pin measures 3.57:1 there, clearing the 3:1
       non-text minimum) and for hairlines. Every apricot TEXT / icon / badge
       role uses the darker sibling --hh-apricot-ink (#8c4f0e — the design
       system's own "secondary" token, not an invented value): 5.91:1 on
       cream, 6.48:1 on white, 5.29:1 on the container-high fill, 6.48:1 as
       the wishlist active heart on the white overlay circle. Mirrors the
       karak-bazaar / inkwell "-ink" pattern.
       Note this also covers the SALE badge and the header cart-count badge,
       which the base paints as white-on-accent (2.65:1) — both are re-inked
       to white-on-apricot-ink (6.48:1).
     - --mr-soft (small captions / eyebrows / breadcrumbs — see app.css)
       cannot reuse the design's own "outline" token (#81756c): that measures
       only 4.08:1 on cream, under the 4.5:1 normal-text minimum. --hh-soft
       (#6d6058) is a deliberately darkened value in the same warm-brown
       family — 5.53:1 on cream, 6.06:1 on white, 4.95:1 on the deepest band.
     - Walnut band (valley-sourcing + footer): the heading uses the design's
       own on-primary-container #d4ac8e (4.55:1 — clears AA normal text) and
       body copy uses rgba(255,255,255,.82) ≈ 5.93:1.
   ========================================================================== */

body.hh-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --hh-walnut: var(--bs-primary, #5c4028);
    --hh-walnut-rgb: var(--bs-primary-rgb, 92, 64, 40);
    /* Bootstrap 5.3 paints bare <a> as rgba(var(--bs-link-color-rgb),…);
       theme-vars sets --bs-link-color but never the -rgb triplet, so without
       this a plain content link (CMS/blog body, quick-view "Category") falls
       back to factory blue. Point it at the walnut. NEVER replace this with a
       bare `body.hh-theme a { color: … }` catch-all — that beats the base
       `.mr-btn--primary { color:#fff }` and blanks the hero button's label. */
    --bs-link-color-rgb: var(--hh-walnut-rgb);
    --hh-apricot: var(--ll-accent, #d98e4a);
    /* AA-safe TEXT / icon / badge variant of the accent — see CONTRAST above.
       Only large decorative roles on the DARK walnut band keep --hh-apricot. */
    --hh-apricot-ink: #8c4f0e;
    --hh-radius: var(--bs-border-radius, 0.5rem);
    --hh-font-head: var(--ll-font-headings, "Lora"), Georgia, "Times New Roman", serif;
    --hh-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Harvest-cream palette (DESIGN.md prose + the export's rendered body) */
    --hh-cream: #f9f4ea;        /* page canvas + header (Harvest Cream)      */
    --hh-cream-soft: #fdfaf3;   /* bestsellers band (surface-container-low)  */
    --hh-cream-deep: #efe7dd;   /* newsletter band (container-highest)       */
    --hh-fill: #e9e1d5;         /* media wells (surface-container-high)      */
    --hh-white: #ffffff;        /* cards + panels (surface-container-lowest) */
    --hh-ink: #1e1b19;          /* on-surface                                */
    --hh-muted: #4f453d;        /* on-surface-variant                        */
    --hh-soft: #6d6058;         /* darkened "outline" — see CONTRAST note    */

    /* Depth via TONAL LAYERING (DESIGN.md "Elevation & Depth"): a very soft,
       low-opacity walnut tint rather than a hard drop shadow. */
    --hh-shadow: 0 16px 34px -14px rgba(var(--hh-walnut-rgb), 0.16);

    /* Re-point the inherited base neutrals at the harvest-cream palette so
       every inherited mr-* surface (bands, borders, fills, muted text) warms.
       --mr-surface stays WHITE on purpose: DESIGN.md puts cards and panels on
       "Pure White (#FFFFFF)" over the cream canvas, and the base points
       .mr-header / .form-control / .mr-panel at this token, so keeping it
       white gives every inherited checkout/account panel the right lift. The
       body background is set to the cream below instead. --mr-band-alt is
       white too — it is what the base trust strip sits on, and the export's
       trust strip is a white band between two hairlines. */
    --mr-ink: var(--hh-ink);
    --mr-muted: var(--hh-muted);
    --mr-soft: var(--hh-soft);
    --mr-surface: var(--hh-white);
    --mr-band: var(--hh-cream-soft);
    --mr-band-alt: var(--hh-white);
    --mr-fill: var(--hh-fill);
    --mr-border: #e5ded0;
    --mr-border-strong: #d3c4b9;
    --mr-radius: var(--hh-radius);
    --mr-gold: var(--hh-apricot-ink);
    --mr-shadow: var(--hh-shadow);

    background-color: var(--hh-cream);
    color: var(--hh-ink);
    font-family: var(--hh-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — "Softly Geometric": one 8px radius on buttons, cards,
   inputs and imagery. Never a `padding` SHORTHAND on .form-select (it eats
   Bootstrap's reserved 2.25rem caret gutter — the base app.css already
   restores it with padding-inline-end, untouched here).
   -------------------------------------------------------------------------- */
body.hh-theme .form-control,
body.hh-theme .form-select,
body.hh-theme .dropdown-menu,
body.hh-theme .offcanvas,
body.hh-theme .hh-hero__media,
body.hh-theme .hh-bento__tile {
    border-radius: var(--hh-radius);
}

/* --------------------------------------------------------------------------
   Typography — Lora authority at 600 (the design's headline-md / headline-sm
   are Literata 500-600), apricot-ink tracked eyebrows, Inter everywhere else.
   -------------------------------------------------------------------------- */
body.hh-theme h1, body.hh-theme h2, body.hh-theme h3,
body.hh-theme h4, body.hh-theme h5, body.hh-theme h6 {
    font-family: var(--hh-font-head);
    color: var(--hh-walnut);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.hh-theme .mr-display { font-weight: 600; letter-spacing: -0.02em; }
body.hh-theme .hh-heading { line-height: 1.3; }

body.hh-theme .mr-eyebrow,
body.hh-theme .hh-eyebrow {
    font-family: var(--hh-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hh-apricot-ink);
}

/* --------------------------------------------------------------------------
   Buttons — solid Deep Walnut primary with white text (9.46:1); a
   transparent secondary behind a 1px walnut border, exactly as DESIGN.md
   "Components" specifies. Generous 16px/32px padding on the hero pair.
   -------------------------------------------------------------------------- */
body.hh-theme .mr-btn {
    border-radius: var(--hh-radius);
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
}

body.hh-theme .mr-btn--primary {
    background-color: var(--hh-walnut);
    border-color: var(--hh-walnut);
    color: #fff;
}

body.hh-theme .mr-btn--primary:hover {
    filter: brightness(1.15);
    color: #fff;
}

body.hh-theme .hh-btn-outline {
    border: 1px solid var(--hh-walnut);
    color: var(--hh-walnut);
    background: transparent;
}

body.hh-theme .hh-btn-outline:hover {
    background: var(--hh-cream-deep);
    border-color: var(--hh-walnut);
    color: var(--hh-walnut);
}

body.hh-theme .hh-btn-hero { padding: 1rem 2rem; }

/* The quiet "View All Products" / "Read Story" link. */
body.hh-theme .hh-view-link {
    color: var(--hh-apricot-ink);
    text-decoration: none;
    font-family: var(--hh-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid currentColor;
    transition: color 0.2s ease;
}

body.hh-theme .hh-view-link:hover { color: var(--hh-walnut); }

/* Inputs — white fields on a warm 1px hairline; focus shifts the border to
   Deep Walnut (DESIGN.md "Input Fields"). The base's focus ring hard-codes a
   blue rgba, so it is re-tinted here. */
body.hh-theme .form-control,
body.hh-theme .form-select {
    background-color: var(--hh-white);
    border-color: var(--mr-border);
    color: var(--hh-ink);
}

body.hh-theme .form-control:focus,
body.hh-theme .form-select:focus {
    border-color: var(--hh-walnut);
    box-shadow: 0 0 0 3px rgba(var(--hh-walnut-rgb), 0.16);
}

/* Restyling the border-colour above out-specifies Bootstrap's own
   `.form-control.is-invalid` (0,2,0 vs our 0,2,1), so re-assert the error
   state or every failed field silently loses its red outline. */
body.hh-theme .form-control.is-invalid,
body.hh-theme .form-select.is-invalid,
body.hh-theme .was-validated .form-control:invalid,
body.hh-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.hh-theme .form-control.is-invalid:focus,
body.hh-theme .form-select.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* --------------------------------------------------------------------------
   Announcement + header — a walnut whisper band, then the sticky harvest-cream
   header under a warm hairline: italic Lora wordmark (the export sets the
   brand in italic serif), quiet Inter nav.
   -------------------------------------------------------------------------- */
body.hh-theme .mr-announce {
    background-color: var(--hh-walnut);
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.16em;
    font-size: 0.68rem;
}

body.hh-theme .mr-header {
    background-color: var(--hh-cream);
    border-bottom-color: var(--mr-border);
}

body.hh-theme .mr-logo {
    font-family: var(--hh-font-head);
    font-style: italic;
    font-weight: 600;
    color: var(--hh-walnut);
}

body.hh-theme .mr-nav-link {
    font-family: var(--hh-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--hh-muted);
}

body.hh-theme .mr-nav-link:hover { color: var(--hh-apricot-ink); }

body.hh-theme .mr-nav-link.is-active {
    color: var(--hh-apricot-ink);
    border-bottom-color: var(--hh-apricot-ink);
}

body.hh-theme .mr-search input {
    background: var(--hh-cream-soft);
    border-color: var(--mr-border);
}

body.hh-theme .mr-search input:focus {
    background: var(--hh-white);
    border-color: var(--hh-walnut);
    box-shadow: 0 0 0 3px rgba(var(--hh-walnut-rgb), 0.14);
}

body.hh-theme .mr-icon-btn { color: var(--hh-walnut); }
body.hh-theme .mr-icon-btn:hover { color: var(--hh-apricot-ink); }

/* Header cart/wishlist counters — the base paints the wishlist one with the
   raw accent under white text (2.65:1). Ink both. */
body.hh-theme .mr-badge { background-color: var(--hh-walnut); }
body.hh-theme .mr-badge--wish { background-color: var(--hh-apricot-ink); }

/* --------------------------------------------------------------------------
   Hero (hh-hero) — the split valley shot: photograph edge-to-edge on the
   left, copy on the harvest-cream panel to the right. Stacks image-over-copy
   on mobile (per the export's mobile frame).
   -------------------------------------------------------------------------- */
body.hh-theme .hh-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(520px, 62vw, 720px);
}

body.hh-theme .hh-hero__media {
    position: relative;
    overflow: hidden;
    background: var(--hh-fill);
    border-radius: 0;
}

body.hh-theme .hh-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

body.hh-theme .hh-hero:hover .hh-hero__img { transform: scale(1.05); }

body.hh-theme .hh-hero__panel {
    display: flex;
    align-items: center;
    background: var(--hh-cream);
    padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}

body.hh-theme .hh-hero__title {
    font-size: clamp(2.25rem, 4.6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    max-width: 16ch;
}

body.hh-theme .hh-hero__lead {
    color: var(--hh-muted);
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 42ch;
    margin-bottom: 2.25rem;
}

body.hh-theme .hh-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export's white band between two
   hairlines, four centred icon-over-label columns. The raw accent fails even
   the lenient 3:1 icon threshold on white (2.65:1), so icons ink with
   --hh-apricot-ink (6.48:1).
   -------------------------------------------------------------------------- */
/* The base trust section is the only `.mr-band--alt.border-bottom` in the
   whole theme set, so this safely gives it the export's second hairline
   (the design draws the strip with a border on BOTH edges). */
body.hh-theme .mr-band--alt.border-bottom {
    border-top: 1px solid var(--mr-border);
    border-bottom-color: var(--mr-border) !important;
}

body.hh-theme .mr-trust {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
}

body.hh-theme .mr-trust svg { color: var(--hh-apricot-ink); }

body.hh-theme .mr-trust strong {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hh-walnut);
}

body.hh-theme .mr-trust span { color: var(--hh-soft); }

/* --------------------------------------------------------------------------
   Promo bento (hh-bento) — the export's asymmetric 12-column band: a wide
   feature tile (8 cols) beside a narrower companion (4 cols), both scrimmed
   photography with a bottom-left caption.
   -------------------------------------------------------------------------- */
body.hh-theme .hh-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    min-height: 460px;
}

body.hh-theme .hh-bento__tile {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background: var(--hh-fill);
    min-height: 320px;
}

body.hh-theme .hh-bento__tile--lead { grid-column: span 8; }
body.hh-theme .hh-bento__tile--side { grid-column: span 4; }
/* A merchant who keeps only one tile gets a full-width feature rather than an
   8-column tile with 4 columns of dead space beside it. */
body.hh-theme .hh-bento__tile:only-child { grid-column: span 12; }

body.hh-theme .hh-bento__img,
body.hh-theme .hh-bento__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

body.hh-theme .hh-bento__placeholder {
    background: linear-gradient(135deg, var(--hh-fill), var(--hh-cream-deep));
}

body.hh-theme .hh-bento__tile:hover .hh-bento__img { transform: scale(1.05); }

body.hh-theme .hh-bento__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(24, 15, 8, 0.12) 0%, rgba(24, 15, 8, 0.58) 100%);
}

body.hh-theme .hh-bento__cap {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    color: #fff;
}

body.hh-theme .hh-bento__title {
    font-family: var(--hh-font-head);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

body.hh-theme .hh-bento__tile--lead .hh-bento__title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
body.hh-theme .hh-bento__tile--side .hh-bento__title { font-size: clamp(1.25rem, 2vw, 1.5rem); }

/* The lead tile's glass pill; the side tile's quiet underline. */
body.hh-theme .hh-bento__pill {
    display: inline-block;
    padding: 0.55rem 1.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
    transition: background-color 0.25s ease;
}

body.hh-theme .hh-bento__tile:hover .hh-bento__pill { background: rgba(255, 255, 255, 0.32); }

body.hh-theme .hh-bento__link {
    display: inline-block;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Bestsellers band (hh-featured) + Fresh This Season (hh-fresh) — a calm
   container-low band, then the plain cream canvas with a heading-plus-hairline
   rule that runs to the shell edge.
   -------------------------------------------------------------------------- */
body.hh-theme .hh-featured { background: var(--hh-cream-soft); }

body.hh-theme .hh-fresh__head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

body.hh-theme .hh-fresh__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--mr-border-strong);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — DESIGN.md: "White background, 8px
   radius, no heavy shadows … the price is always displayed in Apricot".
   Because this child gives the card a background, it MUST inset its own text
   (see references/gotchas.md — the base card is borderless, so its title and
   price sit flush by design and would otherwise collide with the new edge).
   The price uses the text-safe apricot ink, not the raw accent.
   -------------------------------------------------------------------------- */
body.hh-theme .mr-card {
    background: var(--hh-white);
    border: 1px solid var(--mr-border);
    border-radius: var(--hh-radius);
    padding: 1rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

body.hh-theme .mr-card:hover {
    box-shadow: var(--hh-shadow);
    border-color: var(--mr-border-strong);
}

body.hh-theme .mr-card__media {
    aspect-ratio: 1 / 1;
    background-color: var(--hh-fill);
    border-radius: calc(var(--hh-radius) * 0.75);
    margin-bottom: 1rem;
}

body.hh-theme .mr-card__title,
body.hh-theme .mr-card__title a {
    font-family: var(--hh-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hh-walnut);
}

body.hh-theme .mr-card__title a:hover { color: var(--hh-apricot-ink); }

body.hh-theme .mr-card__eyebrow {
    font-family: var(--hh-font-body);
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--hh-muted);
}

body.hh-theme .mr-card__price {
    font-family: var(--hh-font-body);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hh-apricot-ink);
}

body.hh-theme .mr-card__price del {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--hh-soft);
}

/* Sale / demo chip — the base BLADE emits `.mr-card__badge`, but the base CSS
   only styles the legacy `.mr-card__sale` class, so the chip ships unpositioned
   on every mr-family theme unless the child styles it (same fix arthaus and
   aurume carry). The export pins a small uppercase apricot chip top-RIGHT, but
   that corner already holds the inherited wishlist heart, so it sits top-LEFT
   here — the base convention. White on the raw apricot is 2.65:1, so the chip
   fills with the apricot ink (6.48:1) and keeps the design's warm-orange read.
   The demo chip keeps its own inline grey. */
body.hh-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--hh-apricot-ink);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 0.25rem;
}

/* The wishlist heart's "saved" state — the base default is the raw accent
   (2.65:1 on the white overlay circle). Ink it (6.48:1). The heart's and the
   eye's default/hover states already read --bs-primary / --mr-ink + a white
   --mr-surface from the base fix, which is safe here because primary is the
   dark walnut (9.46:1 both states). */
body.hh-theme .mr-card__wish.is-active { color: var(--hh-apricot-ink); }

/* --------------------------------------------------------------------------
   Valley sourcing (hh-valley) — the deep-walnut "Three Valleys, One Standard"
   band: centred heading over a short rule, then three pin-led columns.
   -------------------------------------------------------------------------- */
body.hh-theme .hh-valley {
    background: var(--hh-walnut);
    padding: clamp(4rem, 9vw, 6rem) 0;
}

body.hh-theme .hh-valley__heading {
    color: #d4ac8e;
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
    margin-bottom: 0;
}

body.hh-theme .hh-valley__rule {
    display: block;
    width: 96px;
    height: 1px;
    margin: 1.5rem auto clamp(2.5rem, 5vw, 4rem);
    background: rgba(212, 172, 142, 0.35);
}

body.hh-theme .hh-valley__col { text-align: center; }

body.hh-theme .hh-valley__pin {
    display: inline-flex;
    color: var(--hh-apricot);
    margin-bottom: 1rem;
}

body.hh-theme .hh-valley__pin svg { width: 32px; height: 32px; }

body.hh-theme .hh-valley__title {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

body.hh-theme .hh-valley__text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 32ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat) — the export's short 160px band of
   four scrimmed texture tiles with a centred ITALIC serif label (not the
   base's tracked uppercase caps). The base keeps its real-category +
   representative-photo behaviour, which scales to any merchant's catalogue.
   -------------------------------------------------------------------------- */
body.hh-theme .mr-tile--cat { height: 190px; }

body.hh-theme .mr-tile--cat .mr-tile__scrim { background: rgba(35, 23, 13, 0.48); }

body.hh-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--hh-font-head);
    font-style: italic;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

body.hh-theme .mr-tile__placeholder {
    background: linear-gradient(135deg, var(--hh-fill), var(--hh-cream-deep));
}

/* --------------------------------------------------------------------------
   Journal (hh-journal) — left heading plus one supporting line, 16:9 covers,
   an apricot-tinted category chip and Lora article titles.
   -------------------------------------------------------------------------- */
body.hh-theme .hh-journal__sub {
    color: var(--hh-muted);
    font-size: 1rem;
    margin-top: 0.5rem;
}

body.hh-theme .hh-journal__media { aspect-ratio: 16 / 9; }

body.hh-theme .hh-journal__chip {
    display: inline-block;
    background: rgba(var(--hh-walnut-rgb), 0.07);
    color: var(--hh-apricot-ink);
    font-family: var(--hh-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.75rem;
    border-radius: 0.25rem;
}

body.hh-theme .mr-article__title a { color: var(--hh-walnut); }
body.hh-theme .mr-article__title a:hover { color: var(--hh-apricot-ink); }

/* --------------------------------------------------------------------------
   Newsletter (hh-cta) — "The Harvest Letter": a full-width centred band on
   the container-highest surface between two hairlines, with a white field
   beside the solid walnut Subscribe button.
   -------------------------------------------------------------------------- */
body.hh-theme .hh-cta {
    background: var(--hh-cream-deep);
    border-block: 1px solid var(--mr-border);
    padding: clamp(4rem, 9vw, 6rem) 0;
}

body.hh-theme .hh-cta__inner { max-width: 640px; }

body.hh-theme .hh-cta__body {
    color: var(--hh-muted);
    font-size: 1.08rem;
    max-width: 48ch;
}

body.hh-theme .hh-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 480px;
}

body.hh-theme .hh-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--hh-white);
    border: 1px solid var(--mr-border-strong);
    border-radius: var(--hh-radius);
    padding: 0.95rem 1.25rem;
    font-size: 0.95rem;
    color: var(--hh-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.hh-theme .hh-cta__form input::placeholder { color: var(--hh-soft); }

body.hh-theme .hh-cta__form input:focus {
    outline: none;
    border-color: var(--hh-walnut);
    box-shadow: 0 0 0 3px rgba(var(--hh-walnut-rgb), 0.16);
}

body.hh-theme .hh-cta__btn {
    border: 0;
    background: var(--hh-walnut);
    color: #fff;
    border-radius: var(--hh-radius);
    padding: 0.95rem 2.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: filter 0.2s ease;
}

body.hh-theme .hh-cta__btn:hover { filter: brightness(1.15); }

body.hh-theme .hh-cta__note { color: var(--hh-soft); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the walnut footer (the export's footer sits on
   the same primary-container walnut as the provenance band).
   -------------------------------------------------------------------------- */
body.hh-theme .mr-footer {
    background-color: var(--hh-walnut);
    border-top: 0;
    color: rgba(255, 255, 255, 0.75);
}

body.hh-theme .mr-footer h4 {
    color: #d4ac8e;
    font-family: var(--hh-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.hh-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--hh-font-head);
    font-style: italic;
}

body.hh-theme .mr-footer a { color: rgba(255, 255, 255, 0.78); }
/* On the walnut fill --hh-apricot-ink (#8c4f0e) is tuned for a LIGHT backdrop
   and would sink into this dark one, so brighten to white on hover instead —
   the same pattern karak-bazaar / inkwell use for a dark footer. */
body.hh-theme .mr-footer a:hover { color: #fff; }

body.hh-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

body.hh-theme .mr-social:hover {
    background-color: var(--hh-apricot);
    border-color: var(--hh-apricot);
    color: #2c1603;
}

body.hh-theme .mr-ulink { color: var(--hh-apricot-ink); }
body.hh-theme .mr-ulink:hover { color: var(--hh-walnut); border-color: var(--hh-walnut); }

body.hh-theme .mr-divider { border-color: var(--mr-border); opacity: 1; }

body.hh-theme .mr-brandstrip span {
    font-family: var(--hh-font-head);
    color: var(--hh-soft);
}

/* --------------------------------------------------------------------------
   Accent-as-text guards on the INHERITED functional pages. The base app.css
   reaches for `var(--ll-accent)` in a dozen hover / active / focus roles that
   were written for a saturated orange on white; the raw apricot measures only
   2.42:1 on the cream canvas, so each of these is re-inked. (The home-page
   roles — eyebrow, nav, trust, card title/price/heart, article title, footer
   link — are handled in their own sections above; these are the ones that only
   surface on shop / PDP / cart / checkout / account / blog.)
   -------------------------------------------------------------------------- */
body.hh-theme .mr-crumbs a:hover,
body.hh-theme .mr-cart-row__title a:hover {
    color: var(--hh-apricot-ink);
}

body.hh-theme .mr-tabs .nav-link.active {
    color: var(--hh-walnut);
    border-bottom-color: var(--hh-apricot-ink);
}

/* The base's white "light" button flips to an accent fill under WHITE text
   (2.65:1) on hover. It only appears on dark bands, so flip to the walnut
   fill instead — 9.46:1 and on-palette. */
body.hh-theme .mr-btn--light {
    background-color: #fff;
    color: var(--hh-walnut);
}

body.hh-theme .mr-btn--light:hover {
    background-color: var(--hh-walnut);
    color: #fff;
}

/* Focus ring — the base draws it in the raw accent, which is 2.42:1 against
   the cream canvas and fails the 3:1 WCAG 2.4.11 minimum for a focus
   indicator. Walnut measures 8.63:1. */
body.hh-theme a:focus-visible,
body.hh-theme button:focus-visible,
body.hh-theme input:focus-visible {
    outline: 2px solid var(--hh-walnut);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion — the hero zoom, tile lifts and card scales are decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.hh-theme .mr-btn,
    body.hh-theme .mr-card,
    body.hh-theme .hh-hero__img,
    body.hh-theme .hh-bento__img,
    body.hh-theme .hh-bento__pill,
    body.hh-theme .hh-cta__btn,
    body.hh-theme .mr-card__media img,
    body.hh-theme .mr-tile__img,
    body.hh-theme .mr-tile__media img {
        transition: none;
    }

    body.hh-theme .hh-hero:hover .hh-hero__img,
    body.hh-theme .hh-bento__tile:hover .hh-bento__img {
        transform: none;
    }

    /* Also neutralise the inherited hover-scale transforms (the base's
       reduced-motion block only kills their transition). */
    body.hh-theme .mr-card:hover .mr-card__media img,
    body.hh-theme .mr-tile:hover .mr-tile__img,
    body.hh-theme .mr-tile--cat:hover .mr-tile__media img {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero stacks photo-over-copy,
   the bento tiles stack full width, the valley columns stack, the newsletter
   form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.hh-theme .hh-hero { grid-template-columns: 1fr; min-height: 0; }
    body.hh-theme .hh-hero__media { min-height: 320px; }
    body.hh-theme .hh-hero__panel { padding: 2.5rem 1.25rem 3rem; }
    body.hh-theme .hh-hero__title { max-width: none; }

    body.hh-theme .hh-bento { min-height: 0; gap: 1rem; }
    body.hh-theme .hh-bento__tile--lead,
    body.hh-theme .hh-bento__tile--side { grid-column: span 12; min-height: 280px; }

    body.hh-theme .hh-bento__cap { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }

    body.hh-theme .mr-tile--cat { height: 150px; }
}

@media (max-width: 575.98px) {
    body.hh-theme .hh-cta__form { flex-direction: column; }
    body.hh-theme .hh-cta__btn { width: 100%; }
    body.hh-theme .hh-fresh__head { gap: 1rem; }
}