/* ==========================================================================
   aura-home — "Quiet Future-Minimalism" smart-home brand layer over
   modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_43_aura_home_e_commerce_experience — the
   "Quiet Future Minimalist" DESIGN.md is the design-system source). The
   design system: an architectural grey-white canvas (#f5f6f7) that acts as a
   gallery backdrop for product photography, Aura Indigo used sparingly for
   primary actions / active states / connectivity glow, Midnight (#181b21) as
   the structural anchor (announcement bar, setup band, ink), pure-white cards
   raised on very soft diffused shadows rather than borders (Level 1
   0 4px 20px @ 4%, Level 2 0 12px 40px @ 8%), a consistently soft-geometric
   12px (0.75rem) radius on every interactive + container element, and Albert
   Sans 600 headlines over Inter body / technical / price type.

   This stylesheet has two jobs:
     (a) style aura-home's OWN sections (ah-* — the overlaid hero with its
         glass scene chip, the featured/arrivals header rows, the midnight
         setup-guide band, the icon category wells, the journal strip and the
         centered newsletter band);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the Quiet-Future palette and softening cards,
         buttons and forms to the 12px shape language. That single token block
         is the only reason shop / PDP / cart / checkout / account / blog
         follow the palette without one page override.

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

   Contrast decisions (measured against the actual backgrounds used):
     - primary_color #4f5ded is the export's RENDERED hero CTA fill
       (`bg-primary-container`, hover `bg-primary`). White on it = 4.84:1,
       which clears AA for normal text, so the button label is safe and no
       darker sibling is needed for FILLS.
     - accent_color #3341d4 is the export's `text-primary` — the colour every
       highlight TEXT role actually uses (prices, journal category labels,
       active nav, see-all links, trust icons). 7.38:1 on white and 6.35:1 on
       the #edeeef newsletter band, so it is safe as small text where the
       lighter primary would be marginal. Weak-as-text roles are routed here,
       fills stay on primary.
     - Midnight #181b21 bands carry white headings (17.25:1) and a literal
       #b9bbc0 support ink (8.98:1) rather than rgba() white, so the value is
       measurable.
     - The shared struck-through compare price defaults to #9aa0a6 (2.64:1);
       it is re-pointed here to the export's secondary #5c5e65 (6.47:1).
   ========================================================================== */

body.ah-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ah-primary: var(--bs-primary, #4f5ded);
    --ah-primary-rgb: var(--bs-primary-rgb, 79, 93, 237);
    --ah-accent: var(--ll-accent, #3341d4);
    --ah-radius: var(--ll-btn-radius, 0.75rem);
    --ah-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --ah-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Derived indigo tints (track the customizer tokens) */
    --ah-primary-deep: #3341d4; /* fallback for no color-mix */
    --ah-primary-deep: color-mix(in srgb, var(--ah-primary) 78%, #000a4a); /* button hover */
    --ah-glow: rgba(var(--ah-primary-rgb), 0.12); /* DESIGN.md ambient LED glow */

    /* Quiet Future palette. Canvas / surfaces / ink are LITERALS by design
       (CLAUDE.md: never bind structural ink to a customizer token — there is
       no "ink" or "canvas" slot in the 5-token contract). */
    --ah-midnight: #181b21;    /* DESIGN.md Midnight — announce bar, setup band */
    --ah-canvas: #f5f6f7;      /* DESIGN.md Level 0 background */
    --ah-white: #ffffff;       /* DESIGN.md Level 1 — cards, header, panels */
    --ah-band: #f3f4f5;        /* surface-container-low — quiet bands, fields */
    --ah-tint: #edeeef;        /* surface-container — newsletter band, wells */
    --ah-tint-high: #e7e8e9;   /* surface-container-high — hover fills */
    --ah-footer: #e1e3e4;      /* surface-container-highest — footer */
    --ah-ink: #191c1d;         /* on-surface — primary text */
    --ah-muted: #454655;       /* on-surface-variant — secondary text */
    --ah-soft: #5c5e65;        /* secondary — tertiary text, placeholders */
    --ah-line: #e3e5e6;        /* hairline dividers */
    --ah-line-strong: #c6c5d7; /* outline-variant — field rules, keylines */

    /* Shape + depth — DESIGN.md "Soft-Geometric" 12px system, tonal layering
       through ambient shadows instead of harsh borders. */
    --ah-card-radius: 0.75rem;
    --ah-well-radius: 1rem;
    --ah-shadow-sm: 0 1px 6px rgba(25, 28, 29, 0.04);
    --ah-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    --ah-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);

    /* Re-point the inherited base neutrals at the Quiet-Future palette so
       every inherited mr-* surface (bands, borders, fills, muted text,
       radii, shadows) follows — this is what restyles the 20+ inherited
       pages. All 12 base tokens are covered. */
    --mr-ink: var(--ah-ink);
    --mr-muted: var(--ah-muted);
    --mr-soft: var(--ah-soft);
    --mr-surface: var(--ah-white);
    --mr-band: var(--ah-band);
    --mr-band-alt: var(--ah-tint);
    --mr-fill: var(--ah-tint-high);
    --mr-border: var(--ah-line);
    --mr-border-strong: var(--ah-line-strong);
    --mr-radius: var(--ah-card-radius);
    --mr-gold: #d99a1f;
    --mr-shadow: var(--ah-shadow);

    /* Stop bare prose links rendering Bootstrap-blue WITHOUT a bare-`a`
       catch-all — that would out-specify .mr-btn--primary's white label and
       repaint the hero CTA's text (see the theme-factory gotchas). Bootstrap
       5.3 resolves the hover through the *-rgb custom property, so both are
       set. */
    --bs-link-color-rgb: var(--bs-warning-rgb, 51, 65, 212); /* theme-vars emits the ACCENT triplet here */
    --bs-link-hover-color-rgb: var(--bs-warning-rgb, 51, 65, 212);

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

/* --------------------------------------------------------------------------
   Typography — geometric Albert Sans 600 headlines (DESIGN.md display-lg
   48px / headline-lg 32px / headline-md 24px, negative tracking), Inter for
   everything functional. DESIGN.md: uppercase is reserved for small labels
   and overlines only, never body copy.
   -------------------------------------------------------------------------- */
/* Type only — `.mr-headline` is deliberately kept OUT of the colour rule
   below. It sits on a <span> inside the promo tile caption, where the base
   paints it white over a dark scrim with only `.mr-promo__title` (0,1,0); a
   `body.ah-theme .mr-headline` colour (0,2,0) would out-specify that and turn
   the tile title into dark ink on a dark photo (an invisible label). */
body.ah-theme h1,
body.ah-theme h2,
body.ah-theme h3,
body.ah-theme h4,
body.ah-theme h5,
body.ah-theme h6,
body.ah-theme .mr-display,
body.ah-theme .mr-headline {
    font-family: var(--ah-font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.ah-theme h1,
body.ah-theme h2,
body.ah-theme h3,
body.ah-theme h4,
body.ah-theme h5,
body.ah-theme h6,
body.ah-theme .mr-display {
    color: var(--ah-ink);
}

/* headline-lg 32px — the standard section heading. */
body.ah-theme .mr-display {
    font-size: clamp(1.6rem, 2.7vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* Eyebrows / journal category labels — the export's indigo `text-primary`
   overlines. Routed to the accent (7.38:1 on white) rather than the lighter
   primary fill colour. */
body.ah-theme .mr-eyebrow {
    font-family: var(--ah-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ah-accent);
}

/* Quiet indigo see-all / read-more link ("View All"). */
body.ah-theme .ah-link {
    font-family: var(--ah-font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ah-accent);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

body.ah-theme .ah-link:hover {
    color: var(--ah-primary-deep);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Buttons — DESIGN.md 12px corners; the export's rendered hero CTA is a solid
   Aura Indigo fill that deepens on hover, with an ambient Level-1 shadow.
   -------------------------------------------------------------------------- */
body.ah-theme .mr-btn {
    font-family: var(--ah-font-body);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none; /* DESIGN.md: "quiet" hierarchy, no shouty buttons */
    border-radius: var(--ah-radius);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.ah-theme .mr-btn--primary {
    background-color: var(--ah-primary);
    color: #fff;
    box-shadow: var(--ah-shadow);
}

body.ah-theme .mr-btn--primary:hover,
body.ah-theme .mr-btn--primary:focus {
    background-color: var(--ah-primary-deep);
    color: #fff;
    filter: none; /* the base brightens; the export deepens instead */
    box-shadow: var(--ah-shadow-lg);
}

/* Re-assert the primary label: any anchor-colour rule that lands later in the
   cascade must never repaint it (the invisible-CTA defect). */
body.ah-theme a.mr-btn--primary,
body.ah-theme a.mr-btn--primary:hover {
    color: #fff;
}

body.ah-theme .mr-btn--outline {
    border-color: var(--ah-line-strong);
    color: var(--ah-ink);
}

body.ah-theme .mr-btn--outline:hover {
    background-color: var(--ah-primary);
    border-color: var(--ah-primary);
    color: #fff;
}

body.ah-theme .mr-btn--light {
    background-color: #fff;
    color: var(--ah-accent);
}

body.ah-theme .mr-btn--light:hover {
    background-color: var(--ah-tint);
    color: var(--ah-primary-deep);
}

/* Hero secondary — the export's frosted-glass pane: translucent white fill,
   hairline white border, backdrop blur, brightening on hover. */
body.ah-theme .ah-btn-frosted {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body.ah-theme .ah-btn-frosted:hover,
body.ah-theme .ah-btn-frosted:focus {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Form controls — DESIGN.md input fields: a soft grey-white fill with NO
   surrounding border, only a bottom rule that glows Aura Indigo on focus
   (the export's `bg-surface-container-low border-b-2 rounded-t-lg`).
   -------------------------------------------------------------------------- */
body.ah-theme .form-control,
body.ah-theme .form-select {
    background-color: var(--ah-band);
    border: 0;
    border-bottom: 2px solid var(--ah-line-strong);
    border-radius: var(--ah-radius) var(--ah-radius) 0 0;
    color: var(--ah-ink);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* NEVER a `padding` shorthand here — Bootstrap draws the caret as a
   background-image and reserves the right gutter for it; the base's shared
   shorthand already eats it, so give selects the gutter back. */
body.ah-theme .form-select {
    padding-inline-end: 2.25rem;
}

body.ah-theme .form-control::placeholder {
    color: var(--ah-soft);
}

body.ah-theme .form-control:focus,
body.ah-theme .form-select:focus {
    background-color: var(--ah-white);
    border-bottom-color: var(--ah-primary);
    box-shadow: 0 4px 12px -6px rgba(var(--ah-primary-rgb), 0.45);
}

body.ah-theme .form-check-input:checked {
    background-color: var(--ah-primary);
    border-color: var(--ah-primary);
}

/* --------------------------------------------------------------------------
   Announcement band + sticky header — a Midnight anchor bar over a frosted
   glass header (DESIGN.md: backdrop blur 12px over the background colour).
   -------------------------------------------------------------------------- */
body.ah-theme .mr-announce {
    background-color: var(--ah-midnight);
    color: #fff;
    font-family: var(--ah-font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    padding-block: 0.7rem;
}

body.ah-theme .mr-header {
    background-color: rgba(245, 246, 247, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ah-line);
}

/* The export's wordmark is ink (not primary), Albert Sans bold, tight. */
body.ah-theme .mr-logo {
    font-family: var(--ah-font-head);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    letter-spacing: -0.02em;
    color: var(--ah-ink);
}

/* DESIGN.md navigation: Inter 14px medium, subtle indigo underline when
   active. (The base already inks the active state with --ll-accent, which is
   this theme's indigo — restated here for the weight + size.) */
body.ah-theme .mr-nav-link {
    font-family: var(--ah-font-body);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ah-muted);
}

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

body.ah-theme .mr-nav-link.is-active {
    color: var(--ah-accent);
    font-weight: 500;
    border-bottom-color: var(--ah-accent);
}

body.ah-theme .mr-icon-btn {
    color: var(--ah-ink);
    border-radius: 9999px;
}

body.ah-theme .mr-icon-btn:hover {
    background-color: var(--ah-tint);
    color: var(--ah-accent);
}

body.ah-theme .mr-badge {
    background-color: var(--ah-primary);
}

body.ah-theme .mr-badge--wish {
    background-color: var(--ah-accent);
}

/* DESIGN.md: the header search may take the softer fully-rounded variant. */
body.ah-theme .mr-search input {
    background: var(--ah-white);
    border: 1px solid var(--ah-line);
    border-radius: 9999px;
    padding-inline: 1.1rem 2.5rem;
    color: var(--ah-ink);
}

body.ah-theme .mr-search input:focus {
    background: var(--ah-white);
    border-color: var(--ah-primary);
    box-shadow: 0 0 0 3px var(--ah-glow); /* the base hard-codes a stray cyan */
}

body.ah-theme .mr-search--wide input {
    border-radius: var(--ah-radius);
}

body.ah-theme .mr-search button:hover {
    color: var(--ah-accent);
}

body.ah-theme .offcanvas {
    background-color: var(--ah-white);
}

/* --------------------------------------------------------------------------
   Hero — a full-bleed lifestyle frame with the copy overlaid left. The scrim
   follows the export's left-to-right dark gradient, but keeps a firm floor
   under the copy column so a bright merchant upload still composites to
   readable white type (never `background: none` here).
   -------------------------------------------------------------------------- */
body.ah-theme .ah-hero {
    min-height: clamp(560px, 84vh, 870px); /* export: h-[870px] */
    background-color: var(--ah-midnight);
}

body.ah-theme .ah-hero__overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 48%, rgba(0, 0, 0, 0.06) 100%);
}

body.ah-theme .ah-hero__copy {
    max-width: 40rem;
}

/* The "SCENE: MOVIE NIGHT" glass chip. The export inks an indigo label on a
   translucent indigo pill, which measures poorly over photography — the pill
   here keeps the glassmorphism but darkens the fill and lifts the label to
   the DESIGN.md primary-fixed lavender (#e0e0ff), which reads clearly on any
   frame under the scrim. */
body.ah-theme .ah-hero__chip {
    display: inline-block;
    font-family: var(--ah-font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e0e0ff;
    background: rgba(24, 27, 33, 0.45);
    border: 1px solid rgba(224, 224, 255, 0.34);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
}

/* display-lg 48px, scaling to the export's md:text-[64px]. */
body.ah-theme .ah-hero .ah-hero__copy h1 {
    color: #fff;
    font-family: var(--ah-font-head);
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

body.ah-theme .ah-hero__lead {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 30rem;
    margin-bottom: 2rem;
}

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

/* --------------------------------------------------------------------------
   Trust strip — a pure-white band above the canvas with thin-stroke indigo
   icons and one medium-weight label per item (the export shows a single label
   per item, so the base partial's supporting <span> stays empty).
   -------------------------------------------------------------------------- */
body.ah-theme .mr-band--alt.border-bottom {
    background-color: var(--ah-white);
    border-bottom-color: var(--ah-line) !important;
}

body.ah-theme .mr-trust svg {
    color: var(--ah-accent);
}

body.ah-theme .mr-trust strong {
    font-family: var(--ah-font-body);
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none; /* DESIGN.md: no all-caps body copy */
    color: var(--ah-ink);
}

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

/* --------------------------------------------------------------------------
   Promo tiles — 4:5 lifestyle tiles, 12px corners, bottom-up scrim, and a
   caption stack of a headline plus a small uppercase strapline (the base's
   keyline-link slot, restyled to a plain overline). The strapline stays WHITE
   in both states: the base recolours it to --ll-accent on hover via
   `.mr-promo:hover .mr-promo__cta` (0,0,3,0), so that DESCENDANT selector has
   to be overridden too or the label would go indigo on a dark scrim.
   -------------------------------------------------------------------------- */
body.ah-theme .mr-promo {
    border-radius: var(--ah-card-radius);
    box-shadow: var(--ah-shadow);
    background: var(--ah-tint);
}

body.ah-theme .mr-promo:hover {
    box-shadow: var(--ah-shadow-lg);
}

body.ah-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.62) 100%);
}

/* Styled stand-in when a tile's image file is missing (the override partial
   gates on is_file) — a tonal wash instead of a broken-image icon. */
body.ah-theme .ah-promo__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(135deg, var(--ah-tint) 0%, var(--ah-line-strong) 100%);
}

body.ah-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.7) 100%);
}

body.ah-theme .mr-promo__cap {
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
}

/* White is re-asserted explicitly (0,3,0) so no later heading/type rule can
   ever repaint the tile title over its dark scrim. */
body.ah-theme .mr-promo .mr-promo__title {
    font-family: var(--ah-font-head);
    font-weight: 600;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    color: #fff;
    margin-bottom: 0.25rem;
}

body.ah-theme .mr-promo__cta,
body.ah-theme .mr-promo:hover .mr-promo__cta {
    display: block;
    font-family: var(--ah-font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — DESIGN.md Level 1: pure-white 12px cards on a
   very soft diffused shadow that deepens and gains an Aura Indigo outer glow
   on hover, "as if the device powers on". The card gains a background, so its
   own text must be inset (the base card is borderless and sits flush).
   -------------------------------------------------------------------------- */
body.ah-theme .mr-card {
    background: var(--ah-white);
    border-radius: var(--ah-card-radius);
    padding: 0.6rem 0.6rem 1.15rem;
    box-shadow: var(--ah-shadow);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

body.ah-theme .mr-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ah-shadow-lg), 0 0 15px rgba(var(--ah-primary-rgb), 0.14);
}

/* Belt-and-braces inset for the direct text children (the export pads the
   caption block by 16px inside the card). */
body.ah-theme .mr-card > p,
body.ah-theme .mr-card > h3 {
    padding-inline: 0.4rem;
}

body.ah-theme .mr-card__media {
    aspect-ratio: 1; /* export product cards are square, not 3:4 */
    border-radius: calc(var(--ah-card-radius) - 0.15rem);
    background: var(--ah-band);
    margin-bottom: 0.9rem;
}

body.ah-theme .mr-card__eyebrow {
    font-family: var(--ah-font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ah-soft);
}

body.ah-theme .mr-card__title {
    font-family: var(--ah-font-body); /* export: body-md 600, not a headline */
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
}

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

/* DESIGN.md price-lg: Inter 600, 20px, +0.02em, and the export renders every
   price in indigo — including sale prices, whose signal is carried by the
   badge + the struck-through compare price. */
body.ah-theme .mr-card__price,
body.ah-theme .ll-price,
body.ah-theme .ll-price--sale {
    font-family: var(--ah-font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ah-accent);
}

/* Size is set on the CARD's wrapper only — `.ll-price` is also the PDP price
   span inside an `.h4`, and a fixed size here would shrink it. */
body.ah-theme .mr-card__price {
    font-size: 1.05rem;
}

body.ah-theme .ll-price-compare,
body.ah-theme .mr-card__price del {
    color: var(--ah-soft); /* base default #9aa0a6 is only 2.64:1 */
}

/* Sale badge — the export's small indigo uppercase pill. */
body.ah-theme .mr-card__badge {
    background: var(--ah-primary);
    color: #fff;
    font-family: var(--ah-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 9999px;
}

/* Slide-up Add to Cart — indigo fill, matching the media's clipped corners. */
body.ah-theme .mr-card__quick {
    background-color: var(--ah-primary);
    font-family: var(--ah-font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
}

body.ah-theme .mr-card__quick:hover {
    background-color: var(--ah-primary-deep);
    color: #fff;
}

/* The TWO round overlay controls (wishlist heart + quick-view eye) are styled
   TOGETHER, both states measured: indigo accent on a frosted white circle =
   7.38:1, and the hover inverts to white on indigo = 7.38:1. Both clear the
   3:1 WCAG minimum for UI components comfortably. */
body.ah-theme .mr-card__wish,
body.ah-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.88);
    color: var(--ah-accent);
    box-shadow: var(--ah-shadow-sm);
    border-radius: 9999px;
}

body.ah-theme .mr-card__wish:hover,
body.ah-theme .mr-card__quickview:hover {
    background-color: var(--ah-accent);
    color: #fff;
}

body.ah-theme .mr-card__wish.is-active {
    background-color: var(--ah-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   aura-home's own home sections
   -------------------------------------------------------------------------- */

/* Setup guide — the export's full-width Midnight band: centered Albert Sans
   heading, then a row of steps, each a soft translucent circle holding a
   line icon above the step title and one support line. White heading =
   17.25:1; the #b9bbc0 support ink = 8.98:1. */
body.ah-theme .ah-setup {
    background: var(--ah-midnight);
    color: #fff;
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

body.ah-theme .ah-setup__title {
    color: #fff;
    margin-bottom: 0.75rem;
}

body.ah-theme .ah-setup__lead {
    color: #b9bbc0;
    max-width: 34rem;
    font-size: 1.05rem;
    margin-bottom: 0;
}

body.ah-theme .ah-setup__steps {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

body.ah-theme .ah-setup__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.ah-theme .ah-setup__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    margin-bottom: 1.5rem;
}

body.ah-theme .ah-setup__badge svg {
    width: 30px;
    height: 30px;
}

body.ah-theme .ah-setup__step-title {
    font-family: var(--ah-font-head);
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

body.ah-theme .ah-setup__step-text {
    color: #b9bbc0;
    font-size: 1rem;
}

/* Shop by Category — soft grey wells with a large indigo line icon above the
   category name INSIDE the well; the well deepens toward the DESIGN.md
   primary-fixed lavender on hover. Bootstrap row-cols drives the columns, so
   any category count fills the row cleanly. */
body.ah-theme .ah-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 160px; /* export: h-40 */
    background: var(--ah-tint);
    border-radius: var(--ah-card-radius);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

body.ah-theme .ah-cat:hover {
    background: #e0e0ff; /* DESIGN.md primary-fixed */
}

body.ah-theme .ah-cat__icon {
    width: 36px;
    height: 36px;
    color: var(--ah-accent);
    transition: transform 0.3s ease;
}

body.ah-theme .ah-cat:hover .ah-cat__icon {
    transform: scale(1.1);
}

body.ah-theme .ah-cat__name {
    font-family: var(--ah-font-body);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--ah-ink);
    text-align: center;
    padding-inline: 0.75rem;
}

/* Journal — 16:9 rounded covers on an ambient shadow, indigo overline, the
   story title inking indigo on hover. */
/* The base cover is 16:10 and already owns display/overflow/img sizing; only
   the export's 16:9 crop and the ambient shadow differ. */
body.ah-theme .ah-article__media {
    aspect-ratio: 16 / 9;
    box-shadow: var(--ah-shadow);
}

body.ah-theme .mr-article__title {
    font-family: var(--ah-font-head);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
}

body.ah-theme .mr-article__title a:hover {
    color: var(--ah-accent);
}

/* Newsletter ("The Connected Home") — a soft grey-tinted band, centered
   display heading, and a white bottom-ruled field beside a solid indigo
   Subscribe button. */
body.ah-theme .ah-cta {
    background: var(--ah-tint);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

body.ah-theme .ah-cta__title {
    font-size: clamp(2rem, 3.8vw, 3rem); /* export uses display-lg here */
    line-height: 1.15;
    letter-spacing: -0.02em;
}

body.ah-theme .ah-cta__body {
    color: var(--ah-soft); /* #5c5e65 on the #edeeef band = 5.57:1 */
    font-size: 1.1rem;
    max-width: 34rem;
}

body.ah-theme .ah-cta__form {
    display: flex;
    gap: 0.5rem;
    max-width: 28rem;
}

body.ah-theme .ah-cta__form input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--ah-white);
    border: 0;
    border-bottom: 1px solid var(--ah-midnight);
    border-radius: var(--ah-radius) var(--ah-radius) 0 0;
    color: var(--ah-ink);
    padding: 0.8rem 1.1rem;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

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

body.ah-theme .ah-cta__form input:focus {
    outline: none;
    border-bottom-color: var(--ah-primary);
    box-shadow: 0 4px 12px -6px rgba(var(--ah-primary-rgb), 0.45);
}

body.ah-theme .ah-cta__btn {
    background: var(--ah-primary);
    color: #fff;
    border: 0;
    border-radius: var(--ah-radius);
    padding: 0.8rem 2rem;
    font-family: var(--ah-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--ah-shadow);
}

body.ah-theme .ah-cta__btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

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

/* --------------------------------------------------------------------------
   Inherited component finishing — every surface the base points at
   --ll-accent or a legacy radius, brought onto the Quiet-Future palette. This
   is what carries the restyle across shop / PDP / cart / checkout / account /
   blog without a page override.
   -------------------------------------------------------------------------- */
body.ah-theme .mr-ulink:hover,
body.ah-theme .mr-crumbs a:hover,
body.ah-theme .mr-cart-row__title a:hover,
body.ah-theme .mr-footer a:hover {
    color: var(--ah-accent);
    border-color: var(--ah-accent);
}

body.ah-theme .mr-footer {
    background: var(--ah-footer);
    border-top: 1px solid var(--ah-line-strong);
}

body.ah-theme .mr-footer h4 {
    font-family: var(--ah-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ah-ink);
}

body.ah-theme .mr-footer__brand {
    font-family: var(--ah-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.ah-theme .mr-footer a {
    color: var(--ah-muted);
}

body.ah-theme .mr-social {
    background: var(--ah-white);
    border-color: var(--ah-line-strong);
    color: var(--ah-ink);
}

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

/* Rails, pagination, tabs, filters, gallery thumbs, steps, avatars — all of
   which the base fills or inks with the primary/accent. */
body.ah-theme .mr-rail-btn {
    border-radius: 9999px;
    border-color: var(--ah-line-strong);
    color: var(--ah-ink);
}

body.ah-theme .mr-rail-btn:hover {
    background: var(--ah-primary);
    border-color: var(--ah-primary);
    color: #fff;
}

body.ah-theme .mr-page {
    border-radius: var(--ah-radius);
}

body.ah-theme .mr-page:hover {
    color: var(--ah-accent);
    border-color: var(--ah-accent);
}

body.ah-theme .mr-page.is-active {
    background-color: var(--ah-primary);
    border-color: var(--ah-primary);
    color: #fff;
}

body.ah-theme .mr-tabs .nav-link.active {
    color: var(--ah-accent);
    border-bottom-color: var(--ah-accent);
}

body.ah-theme .mr-filter__link.is-active {
    color: var(--ah-accent);
}

body.ah-theme .mr-gallery__thumb.is-active {
    border-color: var(--ah-accent);
}

body.ah-theme .mr-step.is-done .mr-step__dot,
body.ah-theme .mr-step.is-current .mr-step__dot,
body.ah-theme .mr-acct-avatar,
body.ah-theme .mr-acct-link.is-active {
    background-color: var(--ah-primary);
    color: #fff;
}

body.ah-theme .mr-panel,
body.ah-theme .mr-tile,
body.ah-theme .mr-article__media,
body.ah-theme .mr-gallery__main {
    border-radius: var(--ah-card-radius);
}

body.ah-theme .mr-tile--cat .mr-tile__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
}

/* Bootstrap surfaces the base does not own. */
body.ah-theme {
    --bs-body-bg: #f5f6f7;
    --bs-border-radius: var(--ah-radius);
    --bs-secondary-bg: #edeeef;
}

body.ah-theme .card {
    border-color: var(--ah-line);
    border-radius: var(--ah-card-radius);
}

body.ah-theme .alert {
    border-radius: var(--ah-radius);
}

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ah-theme .mr-card,
    body.ah-theme .mr-promo,
    body.ah-theme .mr-tile,
    body.ah-theme .mr-btn,
    body.ah-theme .ah-cat,
    body.ah-theme .ah-cat__icon,
    body.ah-theme .ah-link,
    body.ah-theme .ah-cta__btn,
    body.ah-theme .mr-reveal {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body.ah-theme .mr-reveal {
        opacity: 1 !important;
    }

    body.ah-theme .mr-card:hover .mr-card__media img,
    body.ah-theme .mr-tile:hover .mr-tile__img,
    body.ah-theme .mr-tile--cat .mr-tile__media img,
    body.ah-theme .mr-promo:hover .mr-promo__img,
    body.ah-theme .mr-article__media:hover img,
    body.ah-theme .ah-cat:hover .ah-cat__icon {
        transform: none !important;
    }
}

/* Mobile (from the export's mobile frames: a shorter hero, tighter display
   sizes, 20px side margins, shallower category wells, a stacked newsletter
   form). The base grids already collapse to 2 columns. */
@media (max-width: 991.98px) {
    body.ah-theme .ah-hero {
        min-height: 500px;
    }

    body.ah-theme .ah-hero__overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
    }

    body.ah-theme .ah-hero .ah-hero__copy h1 {
        font-size: 2rem; /* DESIGN.md headline-lg-mobile 28px + hero scale */
    }

    body.ah-theme .ah-hero__lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    body.ah-theme .ah-setup__step-title {
        font-size: 1.25rem;
    }

    body.ah-theme .ah-cat {
        height: 130px;
    }

    body.ah-theme .ah-cat__icon {
        width: 30px;
        height: 30px;
    }

    body.ah-theme .ah-cta__form {
        flex-direction: column;
    }

    body.ah-theme .ah-cta__form input,
    body.ah-theme .ah-cta__btn {
        width: 100%;
    }
}