/* ==========================================================================
   Hamper House — "Modern Heritage" minimalist luxury for corporate & occasion
   gifting.

   Ported from the Stitch "Hamper House" design (docs/templates/pending/
   stitch_79_hamper_house_e_commerce_design/…/hamper_house/DESIGN.md): a warm
   "Linen" canvas that makes overhead hamper photography the primary visual
   driver, "Rich Plum" for typography / calls to action / active states,
   "Brushed Gold" reserved for decorative keylines and the ribbon accents that
   tie a gift together, Playfair Display editorial headlines over Inter body /
   UI / "Rs." pricing, a consistent 6px radius, and tonal layering (linen
   canvas -> white cards) with a plum-tinted "Whisper Shadow" instead of grey.

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

     (a) style the NEW `hp-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the linen palette, dressing the announce bar and
         footer in plum, squaring the promo tiles to the export's aspect,
         re-inking the category tiles and pricing, and adding the gold hairlines
         the design uses to separate sections.

   Everything is scoped under `body.hp-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
   plum surface follows.

   CONTRAST (sRGB relative-luminance arithmetic, checked at authoring time):
     - primary Rich Plum #57324b is DARK — 9.83:1 on the linen canvas and
       10.69:1 under white text — safe as body/heading TEXT, as an icon, and as
       a fill carrying white text. It is deliberately the primary (never the
       gold) so none of the ~12 inherited base rules that pair --bs-primary with
       a hardcoded #fff (.mr-badge, .mr-cta, .mr-page.is-active, .mr-acct-avatar,
       Bootstrap's own .btn-primary on the shared review form, …) can wash out.
     - accent Brushed Gold #c3a15c is LIGHT — only 2.25:1 on linen, which FAILS
       WCAG for ANY text or icon role on the canvas. Per DESIGN.md it is
       therefore reserved for DECORATIVE keylines, borders, rules and ribbon
       accents. Every gold TEXT / icon role (eyebrows, prices, trust + corporate
       icons, the saved-wishlist heart, "View All Hampers") routes to
       --hp-gold-ink #765a1c — the design system's own "secondary" token, 5.94:1
       on linen and 6.46:1 under white. Mirrors gilt-glass's --gg-gold-ink.
     - --hp-muted #4e4449 (the design's on-surface-variant) is 9.6:1 on linen.
     - --hp-soft is DESIGN.md's "Muted Plum" deepened from #8c737e (3.97:1 —
       fails AA) to #7a626c (5.09:1) so small captions, breadcrumbs and
       struck-through compare prices stay readable.
     - On the plum footer/announce band gold clears 4.75:1, so gold links and
       hovers are used there with the raw accent.
   ========================================================================== */

body.hp-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --hp-plum: var(--bs-primary, #57324b);
    --hp-plum-rgb: var(--bs-primary-rgb, 87, 50, 75);
    --hp-gold: var(--ll-accent, #c3a15c);
    /* AA-safe TEXT/icon variant of the gold — see the CONTRAST note above. */
    --hp-gold-ink: #765a1c;
    /* …and the mirror-image variant for gold TEXT sitting ON the plum footer
       band, where the raw accent only reaches 4.37:1 (this one clears 5.88:1). */
    --hp-gold-light: #d9bd80;
    --hp-radius: var(--bs-border-radius, 0.375rem);
    --hp-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --hp-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* 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 readable ink — NOT a bare
       `body.hp-theme a { color }` rule, which would out-specify the base
       .mr-btn--primary { color:#fff } and blank out the hero CTA's label. */
    --bs-link-color-rgb: 30, 26, 28;

    /* Linen palette. DESIGN.md's PROSE names Linen #F8F5EF the foundational
       canvas and White the card surface; the rendered homepage confirms it
       (sampled #F8F5EF), so the Material-generated pinkish `surface` YAML token
       is ignored. */
    --hp-linen: #f8f5ef;        /* page canvas (Surface Level 0)              */
    --hp-linen-bright: #fdfbf6; /* sticky header                              */
    --hp-white: #ffffff;        /* cards, trust strip, journal band (Level 1) */
    --hp-linen-deep: #f1ebe0;   /* the corporate-orders band                  */
    --hp-fill: #e9e1d3;         /* wells / placeholders                       */
    --hp-ink: #1e1a1c;          /* on-surface                                 */
    --hp-muted: #4e4449;        /* on-surface-variant — body copy             */
    --hp-soft: #7a626c;         /* deepened Muted Plum — see CONTRAST         */

    /* Depth — DESIGN.md "Whisper Shadow": a plum-tinted diffusion, never grey. */
    --hp-shadow: 0 4px 20px rgba(var(--hp-plum-rgb), 0.06);

    /* Re-point the inherited base neutrals at the linen palette so every
       inherited mr-* surface (bands, borders, fills, muted text, shop/PDP/cart/
       checkout/account/blog) warms with the theme. Borders read a brushed-gold
       hairline via color-mix (DESIGN.md keylines), with a literal fallback for
       browsers without color-mix. */
    --mr-ink: var(--hp-ink);
    --mr-muted: var(--hp-muted);
    --mr-soft: var(--hp-soft);
    --mr-surface: var(--hp-linen);
    --mr-band: var(--hp-linen);
    --mr-band-alt: var(--hp-white);
    --mr-fill: var(--hp-fill);
    --mr-border: #ece2cf;
    --mr-border: color-mix(in srgb, var(--hp-gold) 30%, var(--hp-linen));
    --mr-border-strong: #ddc999;
    --mr-border-strong: color-mix(in srgb, var(--hp-gold) 55%, var(--hp-linen));
    --mr-radius: var(--hp-radius);
    --mr-gold: var(--hp-gold-ink);
    --mr-shadow: var(--hp-shadow);

    background-color: var(--hp-linen);
    color: var(--hp-muted);
    font-family: var(--hp-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md "Standard Corners": a single 6px radius on
   buttons, inputs, cards and image containers; pill shapes are avoided. Never a
   padding shorthand on .form-select (it would collapse Bootstrap's reserved
   2.25rem caret gutter — restored explicitly below).
   -------------------------------------------------------------------------- */
body.hp-theme .form-control,
body.hp-theme .form-select,
body.hp-theme .dropdown-menu,
body.hp-theme .offcanvas,
body.hp-theme .mr-promo,
body.hp-theme .mr-promo__img,
body.hp-theme .mr-tile,
body.hp-theme .hp-hero__media {
    border-radius: var(--hp-radius);
}

/* --------------------------------------------------------------------------
   Typography — the export sets every heading in Rich Plum (text-primary), not
   the neutral ink, with Inter carrying body copy and pricing. Eyebrows and
   section labels are tracked uppercase Inter in the readable gold ink.
   -------------------------------------------------------------------------- */
body.hp-theme h1, body.hp-theme h2, body.hp-theme h3,
body.hp-theme h4, body.hp-theme h5, body.hp-theme h6 {
    font-family: var(--hp-font-head);
    color: var(--hp-plum);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.hp-theme .mr-display {
    font-weight: 700;
    letter-spacing: -0.02em;
}

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

/* The short brushed-gold bar the export sets under left-aligned section
   headings ("Most Sent", "New This Season") — DESIGN.md's ribbon keyline. */
body.hp-theme .hp-rule {
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.6rem;
    background: var(--hp-gold);
}

/* DESIGN.md "Ribbon Accent": a thin vertical gold line hanging from the top of
   a section to draw the eye to a curated label. */
body.hp-theme .hp-ribbon {
    display: block;
    width: 1px;
    height: 60px;
    margin: 0 auto 1.5rem;
    background: var(--hp-gold);
}

/* The base new-arrivals heading is hardcoded `text-center`; the export sets it
   left with the gold rule, matching "Most Sent". This is the ONLY
   `.mr-display.text-center` in the whole base view set. */
body.hp-theme .mr-display.text-center {
    text-align: left !important;
    position: relative;
    padding-bottom: 0.9rem;
}

body.hp-theme .mr-display.text-center::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: var(--hp-gold);
}

/* --------------------------------------------------------------------------
   Buttons — DESIGN.md "Components": primary is solid Rich Plum with white text;
   secondary is transparent with a 1px Brushed Gold keyline and Plum text; both
   use label-caps typography and the 6px radius. Pill shapes are avoided.
   -------------------------------------------------------------------------- */
body.hp-theme .mr-btn {
    border-radius: var(--hp-radius);
    font-family: var(--hp-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease, transform 0.1s ease;
}

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

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

/* The gold-keyline secondary (hero "Corporate Enquiries"). */
body.hp-theme .hp-btn-keyline {
    border: 1px solid var(--hp-gold);
    background: transparent;
    color: var(--hp-plum);
}

body.hp-theme .hp-btn-keyline:hover {
    background: color-mix(in srgb, var(--hp-gold) 10%, transparent);
    border-color: var(--hp-gold);
    color: var(--hp-plum);
}

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

/* Keep the inherited outline/light buttons inside the plum story. */
body.hp-theme .mr-btn--outline { color: var(--hp-plum); border-color: var(--hp-plum); }
body.hp-theme .mr-btn--outline:hover { background-color: var(--hp-plum); border-color: var(--hp-plum); color: #fff; }
/* The base --light hover reaches for the raw accent (white-on-gold ~2.4:1 —
   fails); deepen into the plum instead. */
body.hp-theme .mr-btn--light:hover { background-color: var(--hp-plum); color: #fff; }

/* The tracked keyline "View All Hampers" link. The export inks it gold; the raw
   gold fails on linen, so it uses the readable gold ink with a gold rule. */
body.hp-theme .hp-view-link {
    color: var(--hp-gold-ink);
    text-decoration: none;
    font-family: var(--hp-font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--hp-gold);
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.hp-theme .hp-view-link:hover { color: var(--hp-plum); border-color: var(--hp-plum); }

/* The base underline-link hover reaches for the raw accent — route to plum. */
body.hp-theme .mr-ulink:hover { color: var(--hp-plum); border-color: var(--hp-plum); }

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md "Input Fields": enclosed, 6px radius, light gold stroke;
   focus changes the border to Rich Plum. Never a padding shorthand on
   .form-select; the caret gutter is restored explicitly.
   -------------------------------------------------------------------------- */
body.hp-theme .form-control,
body.hp-theme .form-select {
    background-color: var(--hp-white);
    border-color: var(--mr-border-strong);
    color: var(--hp-ink);
}

body.hp-theme .form-select {
    padding-inline-end: 2.25rem;
}

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

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

/* Restyling the border colour above would otherwise swallow Bootstrap's
   validation state — re-assert it. */
body.hp-theme .form-control.is-invalid,
body.hp-theme .form-select.is-invalid,
body.hp-theme .was-validated .form-control:invalid,
body.hp-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.hp-theme .form-control.is-invalid:focus,
body.hp-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.18);
}

/* --------------------------------------------------------------------------
   Announcement + header — the plum whisper band ("CORPORATE ORDERS FROM 10
   HAMPERS · CASH ON DELIVERY NATIONWIDE"), then the linen-bright sticky header
   under a gold hairline: Playfair wordmark, quiet tracked Inter nav.
   -------------------------------------------------------------------------- */
body.hp-theme .mr-announce {
    background-color: var(--hp-plum);
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: 0.18em;
    font-size: 0.66rem;
    text-transform: uppercase;
}

body.hp-theme .mr-announce a { color: #fff; }

body.hp-theme .mr-header {
    background-color: var(--hp-linen-bright);
    border-bottom-color: var(--mr-border);
    box-shadow: var(--hp-shadow);
}

body.hp-theme .mr-logo {
    font-family: var(--hp-font-head);
    font-weight: 700;
    color: var(--hp-plum);
    letter-spacing: -0.02em;
}

body.hp-theme .mr-nav-link {
    font-family: var(--hp-font-body);
    color: var(--hp-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

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

body.hp-theme .mr-search input {
    background: var(--hp-white);
    border-color: var(--mr-border);
}

body.hp-theme .mr-search input:focus {
    background: var(--hp-white);
    border-color: var(--hp-plum);
    box-shadow: none;
}

body.hp-theme .mr-icon-btn { color: var(--hp-plum); }
body.hp-theme .mr-icon-btn:hover { color: var(--hp-gold-ink); }

body.hp-theme .mr-nav .dropdown-menu {
    border-color: var(--mr-border);
    box-shadow: var(--hp-shadow);
}

body.hp-theme .dropdown-item:active,
body.hp-theme .dropdown-item.active {
    background-color: var(--hp-plum);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Hero (hp-hero) — the split statement: the overhead hamper photograph in a 4:5
   gold-keyline frame on the LEFT, copy on the linen canvas to the RIGHT. The
   plum wash over the photo is the export's own `bg-plum/5` tint (kept faint —
   this hero's headline sits BESIDE the photo, never over it, so no scrim is
   load-bearing here). Stacks photo-over-copy on mobile.
   -------------------------------------------------------------------------- */
body.hp-theme .hp-hero {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

body.hp-theme .hp-hero__shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

body.hp-theme .hp-hero__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--hp-fill);
    border: 1px solid var(--hp-gold);
}

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

body.hp-theme .hp-hero__wash {
    position: absolute;
    inset: 0;
    background: rgba(var(--hp-plum-rgb), 0.05);
}

body.hp-theme .hp-hero:hover .hp-hero__img { transform: scale(1.04); }

body.hp-theme .hp-hero__title {
    color: var(--hp-plum);
    font-family: var(--hp-font-head);
    font-size: clamp(2.25rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

body.hp-theme .hp-hero__lead {
    color: var(--hp-muted);
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 44ch;
    margin-bottom: 2.25rem;
}

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

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export's white band of four centered
   gold-icon columns, each a single tiny tracked uppercase label. The raw gold
   fails even the lenient 3:1 icon threshold on white, so icons ink with
   --hp-gold-ink (6.46:1). The demo puts each item's copy in the title; the
   base's supporting <span> collapses when its text is blank.
   -------------------------------------------------------------------------- */
body.hp-theme .mr-band--alt.border-bottom {
    border-top: 1px solid var(--mr-border);
    border-bottom-color: var(--mr-border) !important;
}

body.hp-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
}

body.hp-theme .mr-trust svg {
    color: var(--hp-gold-ink);
    width: 26px;
    height: 26px;
    stroke-width: 1.5;
}

body.hp-theme .mr-trust strong {
    font-family: var(--hp-font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

body.hp-theme .mr-trust span { color: var(--hp-soft); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo) — the export shows three SQUARE photographic
   tiles with a bottom-left Playfair caption over a soft dark scrim, each inside
   a brushed-gold keyline. The demo leaves the caption link label blank (the
   export shows none), but the hover state is still routed off the raw accent —
   and the base's `.mr-promo:hover .mr-promo__cta` descendant selector is
   (0,0,3,0), so the override has to match the same shape to win.
   -------------------------------------------------------------------------- */
body.hp-theme .mr-promo {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--hp-gold);
    background: var(--hp-fill);
}

body.hp-theme .mr-promo__title {
    font-family: var(--hp-font-head);
    font-weight: 700;
    color: #fff;
}

body.hp-theme .mr-promo__cta { letter-spacing: 0.16em; }

body.hp-theme .mr-promo:hover .mr-promo__cta {
    color: var(--hp-gold);
    border-color: var(--hp-gold);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white media wells (DESIGN.md "Surface
   Level 1: White cards for product tiles"), Inter product names in plum, and
   the export's gold price line routed to the readable gold ink.
   -------------------------------------------------------------------------- */
body.hp-theme .mr-card__media {
    background-color: var(--hp-white);
    border: 1px solid var(--mr-border);
    box-shadow: var(--hp-shadow);
}

body.hp-theme .mr-card__title,
body.hp-theme .mr-card__title a {
    font-family: var(--hp-font-body);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--hp-plum);
}

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

body.hp-theme .mr-card__eyebrow { color: var(--hp-soft); }

body.hp-theme .mr-card__price {
    font-family: var(--hp-font-body);
    color: var(--hp-gold-ink);
    font-weight: 600;
    letter-spacing: 0.05em;
}

body.hp-theme .mr-card__price del { color: var(--hp-soft); }

/* Sale/demo chip — the base blade emits `.mr-card__badge` but the base CSS only
   styles the legacy `.mr-card__sale` class, leaving the badge UNPOSITIONED on
   every mr-family theme. Style it here as DESIGN.md's "Chips/Tags": small,
   rectangular (2px radius), faint gold ground with plum text — plum on the
   #eddfc1 chip measures 8.0:1. The inline-styled demo chip keeps its own grey. */
body.hp-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: #eddfc1;
    background-color: color-mix(in srgb, var(--hp-gold) 40%, #fff);
    color: var(--hp-plum);
    font-family: var(--hp-font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.55rem;
    border-radius: 2px;
}

/* The saved-wishlist heart's active state — the base default is the raw accent
   (light gold on the near-white overlay circle, ~2.4:1). Ink it with the
   readable gold (6.46:1). Both round overlay controls' default AND hover states
   already read --bs-primary / --mr-ink on --mr-surface from the base, which are
   the dark plum and the linen here — 9.8:1 and 12.9:1, both safe. */
body.hp-theme .mr-card__wish.is-active { color: var(--hp-gold-ink); }

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat) — the export renders four flat colour
   blocks with a centered tracked uppercase label and an inset white keyline
   (it had no category imagery). The base renders a representative product photo
   per category, which is strictly better for a real store, so this keeps the
   photo and lays the export's chrome over it: a plum scrim (white caps clear
   AA over it), the inset keyline, and the export's 192px block height.
   -------------------------------------------------------------------------- */
body.hp-theme .mr-tile--cat {
    height: 200px;
    border: 1px solid var(--hp-gold);
}

body.hp-theme .mr-tile--cat .mr-tile__scrim {
    background: rgba(var(--hp-plum-rgb), 0.62);
}

body.hp-theme .mr-tile--cat::after {
    content: "";
    position: absolute;
    inset: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    z-index: 3;
    pointer-events: none;
}

body.hp-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--hp-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    padding-inline: 1rem;
}

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

/* --------------------------------------------------------------------------
   Corporate orders (hp-corporate) — the hp-only "The Corporate Standard" band:
   a deeper linen surface carrying the hanging gold ribbon accent, a tracked
   Playfair heading, and three white gold-keyline cards with gold line-icons.
   -------------------------------------------------------------------------- */
body.hp-theme .hp-corporate {
    background: var(--hp-linen-deep);
    border-block: 1px solid var(--mr-border);
}

body.hp-theme .hp-corporate__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

body.hp-theme .hp-corporate__heading {
    font-family: var(--hp-font-head);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hp-plum);
    margin-bottom: 1rem;
}

body.hp-theme .hp-corporate__body {
    color: var(--hp-muted);
    max-width: 46ch;
    margin-inline: auto;
}

body.hp-theme .hp-cocard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--hp-white);
    border: 1px solid var(--mr-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    padding: clamp(2rem, 4vw, 2.75rem);
}

body.hp-theme .hp-cocard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-gold-ink);
    margin-bottom: 1.5rem;
}

body.hp-theme .hp-cocard__icon svg { width: 34px; height: 34px; }

body.hp-theme .hp-cocard__title {
    font-family: var(--hp-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hp-plum);
    margin-bottom: 0.9rem;
}

body.hp-theme .hp-cocard__text { color: var(--hp-muted); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Featured / new-arrivals bands — the export keeps both product rows on the
   plain linen canvas (the base puts featured on a band).
   -------------------------------------------------------------------------- */
body.hp-theme .hp-featured { background: var(--hp-linen); }

body.hp-theme .hp-section-title { font-size: clamp(1.6rem, 3vw, 2rem); }

/* --------------------------------------------------------------------------
   Journal (hp-journal) — a white band, gold "The Art of Gifting" eyebrow over a
   centered Playfair heading, then 16:10 gold-keyline covers with italic
   Playfair titles (hover to gold ink) and a two-line excerpt.
   -------------------------------------------------------------------------- */
body.hp-theme .hp-journal { background: var(--hp-white); border-block: 1px solid var(--mr-border); }

body.hp-theme .hp-journal__heading { font-size: clamp(2rem, 4vw, 2.75rem); }

body.hp-theme .hp-article__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--hp-gold);
    border-radius: var(--hp-radius);
    background: var(--hp-fill);
}

body.hp-theme .hp-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

body.hp-theme .hp-article:hover .hp-article__media img { transform: scale(1.05); }

body.hp-theme .hp-article__label { font-size: 0.64rem; letter-spacing: 0.18em; }

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

body.hp-theme .hp-article__title a {
    color: var(--hp-plum);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.hp-theme .hp-article__title a:hover { color: var(--hp-gold-ink); }

body.hp-theme .hp-article__excerpt { color: var(--hp-muted); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Newsletter (hp-desk) — "The Gifting Desk": a centered block on the linen
   canvas with an italic Playfair heading and the design's "stationery" form —
   the email field carries a brushed-gold bottom rule only (focus deepens it to
   plum) beside a solid plum Subscribe button.
   -------------------------------------------------------------------------- */
body.hp-theme .hp-desk__inner { max-width: 40rem; }

body.hp-theme .hp-desk__title {
    font-family: var(--hp-font-head);
    font-style: italic;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--hp-plum);
}

body.hp-theme .hp-desk__body { color: var(--hp-muted); max-width: 44ch; }

body.hp-theme .hp-desk__form {
    display: flex;
    gap: 1rem;
    max-width: 34rem;
}

body.hp-theme .hp-desk__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hp-gold);
    border-radius: 0;
    padding: 0.75rem 0.5rem;
    font-size: 0.95rem;
    color: var(--hp-ink);
}

body.hp-theme .hp-desk__input:focus {
    outline: none;
    border-bottom-color: var(--hp-plum);
}

body.hp-theme .hp-desk__input::placeholder { color: var(--hp-soft); }

body.hp-theme .hp-desk__btn {
    border: 0;
    border-radius: var(--hp-radius);
    background: var(--hp-plum);
    color: #fff;
    padding: 0.8rem 2.5rem;
    font-family: var(--hp-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.25s ease;
}

body.hp-theme .hp-desk__btn:hover { filter: brightness(1.25); }

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

/* --------------------------------------------------------------------------
   Footer — the export's deep plum band with gold column headings. The RAW gold
   only reaches 4.37:1 on plum, so every gold TEXT role here uses the lighter
   --hp-gold-light (5.88:1); the raw accent stays on fills and rings, where the
   3:1 UI threshold applies. The inherited footer newsletter button is
   .mr-btn--primary — a plum fill on a plum band would be an invisible block, so
   it inverts to a gold fill carrying near-black plum text (6.94:1).
   -------------------------------------------------------------------------- */
body.hp-theme .mr-footer {
    background-color: var(--hp-plum);
    border-top: 0;
    color: rgba(255, 255, 255, 0.74);
}

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

body.hp-theme .mr-footer h4 {
    font-family: var(--hp-font-body);
    color: var(--hp-gold-light);
    letter-spacing: 0.16em;
}

body.hp-theme .mr-footer a { color: rgba(255, 255, 255, 0.74); }
body.hp-theme .mr-footer a:hover { color: var(--hp-gold-light); }

body.hp-theme .mr-footer .mr-muted,
body.hp-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.6) !important; }

body.hp-theme .mr-footer .mr-btn--primary {
    background-color: var(--hp-gold);
    border-color: var(--hp-gold);
    color: #2b1524;
}

body.hp-theme .mr-footer .mr-btn--primary:hover { filter: brightness(1.08); color: #2b1524; }

body.hp-theme .mr-footer .form-control {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

body.hp-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.55); }

body.hp-theme .mr-footer .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--hp-gold-light);
    box-shadow: none;
}

body.hp-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
}

body.hp-theme .mr-social:hover {
    background-color: var(--hp-gold);
    border-color: var(--hp-gold);
    color: #2b1524;
}

body.hp-theme .mr-footer .mr-divider { border-color: rgba(255, 255, 255, 0.16); opacity: 1; }

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

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

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

    body.hp-theme .hp-hero:hover .hp-hero__img,
    body.hp-theme .hp-article:hover .hp-article__media img { transform: none; }

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero stacks photo-over-copy,
   the section headings shrink, the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.hp-theme .hp-hero__shell { grid-template-columns: 1fr; gap: 2rem; }
    body.hp-theme .hp-hero__media { aspect-ratio: 4 / 3; }
    body.hp-theme .hp-hero__title { font-size: 2rem; }
    body.hp-theme .hp-hero__lead { margin-bottom: 1.75rem; }
    body.hp-theme .mr-tile--cat { height: 150px; }
}

@media (max-width: 575.98px) {
    body.hp-theme .hp-desk__form { flex-direction: column; gap: 1.25rem; }
    body.hp-theme .hp-desk__btn { width: 100%; }
    body.hp-theme .mr-trust strong { font-size: 0.62rem; letter-spacing: 0.1em; }
}