/* ==========================================================================
   Haven & Oak — warm Scandinavian minimalism for furniture & home living.

   Ported from the Stitch "Haven & Oak" design (the Warm Scandinavian
   Minimalism design system lives at docs/templates/Haven_oak_e_commerce_store/
   haven_oak/DESIGN.md): a sun-bleached bone canvas, warm-charcoal ink and
   actions, a sparing muted-ochre accent, Lora serif headings (the allowlist
   stand-in for the design's Literata) over Inter body, a gentle 8px radius
   everywhere, and STRICTLY flat depth — 1px stone hairlines and tonal
   layering instead of shadows.

   This theme OWNS the promo-tiles / featured / material-story / new-arrivals
   / newsletter home sections (ho-* markup) and INHERITS Modern Retail's
   header, footer, hero, trust, brands, journal and every functional page.
   This stylesheet therefore has two jobs:

     (a) style the NEW `ho-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the bone/stone palette, flattening every
         shadow, drawing the hairline structure, and dressing the hero copy
         as the signature bone card panel.

   Everything is scoped under `body.ho-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 charcoal surface follows.
   ========================================================================== */

body.ho-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ho-charcoal: var(--bs-primary, #2b2b28);
    --ho-charcoal-rgb: var(--bs-primary-rgb, 43, 43, 40);
    --ho-ochre: var(--ll-accent, #825509);
    --ho-radius: var(--bs-border-radius, 0.5rem);
    --ho-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
    --ho-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Bone / stone palette (DESIGN.md) */
    --ho-surface: #fef9ee;       /* page canvas (background)            */
    --ho-bone: #f2efe9;          /* the hero card / parchment panel     */
    --ho-white: #ffffff;         /* interactive cards + inputs          */
    --ho-stone: #ddd8ce;         /* hairline borders + the stone bands  */
    --ho-band: #f8f3e9;          /* quiet architectural bands (footer)  */
    --ho-fill: #ede8dd;          /* placeholder / media-well fill       */
    --ho-ink: #1d1c15;           /* on-surface                          */
    --ho-muted: #474741;         /* on-surface-variant                  */
    --ho-soft: #777770;          /* outline (soft text)                 */
    --ho-border-strong: #c8c7bf; /* outline-variant                     */

    /* Re-point the inherited base neutrals at the bone/stone palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       follows. Depth stays flat: hairlines + tonal shifts, zero shadows. */
    --mr-ink: var(--ho-ink);
    --mr-muted: var(--ho-muted);
    --mr-soft: var(--ho-soft);
    --mr-surface: var(--ho-surface);
    --mr-band: var(--ho-band);
    --mr-band-alt: var(--ho-band);
    --mr-fill: var(--ho-fill);
    --mr-border: var(--ho-stone);
    --mr-border-strong: var(--ho-border-strong);
    --mr-radius: 0.5rem;
    --mr-gold: var(--ho-ochre);
    --mr-shadow: none;

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

/* --------------------------------------------------------------------------
   Shape & depth discipline — the "Gentle Geometric" 8px radius everywhere,
   and NO shadows anywhere: depth is hairline outlines + tonal layers only.
   -------------------------------------------------------------------------- */
body.ho-theme .mr-card__media,
body.ho-theme .mr-promo,
body.ho-theme .mr-promo__img,
body.ho-theme .mr-article__media img,
body.ho-theme .form-control,
body.ho-theme .form-select,
body.ho-theme .dropdown-menu {
    border-radius: var(--mr-radius);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Typography — Lora medium serif authority, quiet muted eyebrows (the ochre
   is reserved for hovers/active states, per the design system).
   -------------------------------------------------------------------------- */
body.ho-theme h1, body.ho-theme h2, body.ho-theme h3,
body.ho-theme h4, body.ho-theme h5, body.ho-theme h6,
body.ho-theme .mr-display {
    font-family: var(--ho-font-head);
    color: var(--ho-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Section headings sit at the design's headline-md scale — calmer than the
   base's editorial display size. */
body.ho-theme .mr-display {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

body.ho-theme .mr-eyebrow {
    font-family: var(--ho-font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ho-muted);
}

/* --------------------------------------------------------------------------
   Buttons — solid warm-charcoal primary; stone-hairline secondary with ink
   text. Hover shifts tone (never lifts, never rounds further).
   -------------------------------------------------------------------------- */
body.ho-theme .mr-btn {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

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

body.ho-theme .mr-btn--primary:hover { filter: none; opacity: 0.9; color: #fff; }

body.ho-theme .mr-btn--outline,
body.ho-theme .ho-btn-outline {
    border: 1px solid var(--ho-border-strong);
    color: var(--ho-ink);
    background: var(--ho-white);
}

body.ho-theme .mr-btn--outline:hover,
body.ho-theme .ho-btn-outline:hover {
    background: var(--ho-stone);
    border-color: var(--ho-border-strong);
    color: var(--ho-ink);
}

/* Keyline link — the design's quiet "View all" / "Our Philosophy" label
   with a 1px ink underline that warms to ochre on hover. */
body.ho-theme .ho-keyline-link {
    display: inline-block;
    font-family: var(--ho-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ho-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ho-ink);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.ho-theme .ho-keyline-link:hover { color: var(--ho-ochre); border-color: var(--ho-ochre); }

/* Inputs — white fields, stone hairlines, small uppercase labels come from
   the base; focus warms the hairline instead of glowing. */
body.ho-theme .form-control,
body.ho-theme .form-select {
    background-color: var(--ho-white);
    border-color: var(--ho-border-strong);
}

body.ho-theme .form-control:focus,
body.ho-theme .form-select:focus {
    border-color: var(--ho-ochre);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Announcement + header — charcoal whisper band, then the bone header with
   a stone hairline, serif wordmark and label-style nav.
   -------------------------------------------------------------------------- */
body.ho-theme .mr-announce {
    background-color: var(--ho-charcoal);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.18em;
    font-size: 0.68rem;
}

body.ho-theme .mr-header {
    background-color: var(--ho-surface);
    border-bottom: 1px solid var(--ho-stone);
}

body.ho-theme .mr-logo {
    font-family: var(--ho-font-head);
    font-weight: 600;
    font-size: clamp(1.4rem, 2vw, 1.65rem);
    letter-spacing: -0.01em;
    color: var(--ho-ink);
}

body.ho-theme .mr-nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--ho-muted);
}

body.ho-theme .mr-nav-link:hover { color: var(--ho-ochre); }

body.ho-theme .mr-nav-link.is-active {
    color: var(--ho-ink);
    font-weight: 700;
    border-bottom-color: var(--ho-ochre);
}

body.ho-theme .mr-search input {
    background: var(--ho-band);
    border-color: var(--ho-stone);
    border-radius: var(--ho-radius);
}

body.ho-theme .mr-search input:focus {
    background: var(--ho-white);
    border-color: var(--ho-ochre);
    box-shadow: 0 0 0 3px rgba(var(--ho-charcoal-rgb), 0.08);
}

body.ho-theme .mr-icon-btn { color: var(--ho-ink); }
body.ho-theme .mr-icon-btn:hover { color: var(--ho-ochre); }
body.ho-theme .mr-badge { background-color: var(--ho-charcoal); }

/* --------------------------------------------------------------------------
   Inherited hero — the template's sun-drenched room with the copy sitting
   inside a padded BONE card panel (hairline-framed, flat) instead of white
   text over a dark scrim. The overlay all but disappears.
   -------------------------------------------------------------------------- */
body.ho-theme .mr-hero { background-color: var(--ho-fill); }

body.ho-theme .mr-hero__overlay { background: rgba(29, 28, 21, 0.06); }

body.ho-theme .mr-hero__copy {
    background: var(--ho-bone);
    border: 1px solid var(--ho-stone);
    border-radius: var(--mr-radius);
    padding: clamp(2.25rem, 5vw, 4rem);
    max-width: 560px;
}

body.ho-theme .mr-hero .mr-hero__copy .mr-eyebrow { color: var(--ho-muted); letter-spacing: 0.2em; }

body.ho-theme .mr-hero .mr-hero__copy h1 {
    color: var(--ho-ink);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

/* The inherited hero partial paints the subtitle white inline (styled for a
   dark scrim) — the bone card needs ink, so this one override is forced. */
body.ho-theme .mr-hero__copy p { color: var(--ho-muted) !important; }

/* Secondary hero action — the template's understated "Explore all" ink
   underline link, not a bordered on-dark button. */
body.ho-theme .mr-hero .mr-btn--on-dark {
    border: 0;
    border-bottom: 1px solid var(--ho-ink);
    border-radius: 0;
    padding: 0 0 0.35rem;
    color: var(--ho-ink);
    letter-spacing: 0.08em;
}

body.ho-theme .mr-hero .mr-btn--on-dark:hover {
    background: transparent;
    color: var(--ho-ochre);
    border-color: var(--ho-ochre);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — square white media tile behind a stone
   hairline, uppercase category eyebrow, serif title, medium-weight price.
   Hover shifts the hairline, never lifts.
   -------------------------------------------------------------------------- */
body.ho-theme .mr-card { background: transparent; }

body.ho-theme .mr-card__media {
    aspect-ratio: 1 / 1;
    background-color: var(--ho-white);
    border: 1px solid var(--ho-stone);
    transition: border-color 0.25s ease;
}

body.ho-theme .mr-card:hover .mr-card__media { border-color: var(--ho-border-strong); }

body.ho-theme .mr-card__eyebrow {
    color: var(--ho-soft);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.66rem;
}

body.ho-theme .mr-card__title,
body.ho-theme .mr-card__title a {
    font-family: var(--ho-font-head);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--ho-ink);
}

body.ho-theme .mr-card__title a:hover { color: var(--ho-ochre); }

body.ho-theme .mr-card__price { color: var(--ho-ink); font-weight: 500; }

body.ho-theme .mr-card__badge {
    background: var(--ho-ochre);
    color: #fff;
    border-radius: calc(var(--mr-radius) / 2);
    letter-spacing: 0.08em;
}

body.ho-theme .mr-card__wish {
    background: rgba(255, 255, 255, 0.85);
    color: var(--ho-ink);
}

body.ho-theme .mr-card__quick {
    background-color: var(--ho-charcoal);
    letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   Category tiles (ho-tile) — four square hairline-framed tiles with the
   serif "title →" caption bottom-left over the gentlest of scrims. A tile
   without an image renders the bone/stone placeholder block.
   -------------------------------------------------------------------------- */
body.ho-theme .ho-tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--ho-stone);
    border-radius: var(--mr-radius);
    background: var(--ho-fill);
    text-decoration: none;
}

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

body.ho-theme .ho-tile:hover .ho-tile__img { transform: scale(1.05); }

body.ho-theme .ho-tile__img--placeholder {
    background: linear-gradient(150deg, var(--ho-band), var(--ho-fill) 55%, var(--ho-stone));
}

body.ho-theme .ho-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 28, 21, 0.02) 55%, rgba(29, 28, 21, 0.4) 100%);
}

body.ho-theme .ho-tile__cap {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.25rem;
    z-index: 2;
    display: grid;
    gap: 0.35rem;
    justify-items: start;
}

body.ho-theme .ho-tile__title {
    font-family: var(--ho-font-head);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: #fff;
}

body.ho-theme .ho-tile__arrow { font-family: var(--ho-font-body); font-size: 0.9em; }

body.ho-theme .ho-tile__cta {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Material story (ho-story) — the "Designed by Nature" split band: campaign
   image left (3/5), stone panel right (2/5) carrying the serif heading, the
   italic philosophy quote and the keyline link.
   -------------------------------------------------------------------------- */
body.ho-theme .ho-story { display: flex; min-height: 500px; }

body.ho-theme .ho-story__media {
    flex: 3 1 0%;
    position: relative;
    background: linear-gradient(135deg, var(--ho-fill), var(--ho-stone));
}

body.ho-theme .ho-story__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.ho-theme .ho-story__panel {
    flex: 2 1 0%;
    display: flex;
    align-items: center;
    background: var(--ho-stone);
    padding: clamp(3rem, 6vw, 6rem);
}

body.ho-theme .ho-story__body { max-width: 30rem; }

body.ho-theme .ho-story__heading {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    margin-bottom: 1.5rem;
}

body.ho-theme .ho-story__quote {
    margin: 0 0 2rem;
    font-family: var(--ho-font-head);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--ho-muted);
}

/* --------------------------------------------------------------------------
   Newsletter (ho-cta) — the centered "Join our community" band on the stone
   surface: serif heading, calm body, white input beside the solid charcoal
   Subscribe button, small italic note.
   -------------------------------------------------------------------------- */
body.ho-theme .ho-cta {
    background: var(--ho-stone);
    padding: clamp(4rem, 8vw, 6rem) 0;
}

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

body.ho-theme .ho-cta__body {
    color: var(--ho-muted);
    max-width: 56ch;
    line-height: 1.7;
}

body.ho-theme .ho-cta__form {
    display: flex;
    gap: 0.75rem;
    max-width: 560px;
}

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

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

body.ho-theme .ho-cta__form input:focus {
    outline: none;
    border-color: var(--ho-ochre);
}

body.ho-theme .ho-cta__btn {
    border: 0;
    background: var(--ho-charcoal);
    color: #fff;
    border-radius: var(--ho-radius);
    padding: 0.95rem 2.25rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

body.ho-theme .ho-cta__btn:hover { opacity: 0.9; }

body.ho-theme .ho-cta__note {
    color: var(--ho-soft);
    font-size: 0.75rem;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Inherited chrome — trust strip, journal, brands and footer settle onto the
   bone system (most of the work is done by the --mr-* re-point above; these
   are the finishing touches).
   -------------------------------------------------------------------------- */
body.ho-theme .mr-trust svg { color: var(--ho-muted); }

body.ho-theme .mr-article__media img { border: 1px solid var(--ho-stone); }

body.ho-theme .mr-footer {
    background-color: var(--ho-band);
    border-top: 1px solid var(--ho-stone);
}

body.ho-theme .mr-footer__brand { font-family: var(--ho-font-head); font-weight: 600; color: var(--ho-ink); }

body.ho-theme .mr-social {
    border-color: var(--ho-border-strong);
    background: var(--ho-surface);
    color: var(--ho-ink);
}

body.ho-theme .mr-social:hover {
    background-color: var(--ho-charcoal);
    border-color: var(--ho-charcoal);
    color: #fff;
}

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

body.ho-theme .mr-ulink { color: var(--ho-ink); }
body.ho-theme .mr-ulink:hover { color: var(--ho-ochre); border-color: var(--ho-ochre); }

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

/* Respect reduced-motion — the tile zooms and tonal transitions here are
   decorative. */
@media (prefers-reduced-motion: reduce) {
    body.ho-theme .mr-btn,
    body.ho-theme .ho-cta__btn,
    body.ho-theme .ho-keyline-link,
    body.ho-theme .ho-tile__img,
    body.ho-theme .mr-card__media {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): 20px margins, the story band
   stacks image-over-panel, the hero card tightens, the newsletter form
   stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.ho-theme .ho-story { flex-direction: column; }
    body.ho-theme .ho-story__media { flex: none; min-height: 320px; }
    body.ho-theme .ho-story__panel { flex: none; padding: clamp(2.5rem, 8vw, 4rem) 1.5rem; }
    body.ho-theme .mr-hero__copy { padding: 2rem 1.5rem; }
}

@media (max-width: 575.98px) {
    body.ho-theme .ho-cta__form { flex-direction: column; }
    body.ho-theme .ho-cta__btn { width: 100%; }
    body.ho-theme .ho-tile__cap { left: 1rem; right: 1rem; bottom: 0.9rem; }
}