/* ==========================================================================
   Paizar — Heritage Modernism for women's footwear.

   Ported from the Stitch "Heritage Modernism" design (design system at
   docs/templates/pending/stitch_63_paizar_e_commerce_homepage/…/
   heritage_modernism/DESIGN.md; the homepage code.html's RENDERED values are
   authoritative wherever the two disagree): a warm blush canvas that replaces
   pure white, deep-berry ink and actions, a "soft gold" zari accent held back
   for keylines and small labels, Playfair Display editorial headlines over
   Inter body copy / UI labels / prices, and a structured-yet-soft 8px radius.

   This theme OWNS the hero / featured / categories / journal / newsletter
   home sections (pz-* markup) + the child-only "craft-story" band, and
   INHERITS Modern Retail's header, footer, trust strip, promo tiles,
   new-arrivals grid, brands strip, product card and every functional page.
   This stylesheet therefore has three jobs:

     (a) style the NEW `pz-*` markup into the Stitch design;
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the blush palette, which carries the restyle
         into shop / PDP / cart / checkout / account / blog for free; and
     (c) carve out the template's two BERRY surfaces (the announcement bar +
         footer at #7a2436, and the deeper "Curated Collections" band) inside
         an otherwise light theme — the inverse of a dark-canvas theme, so
         only those components get literal light-on-dark overrides while the
         shared tokens stay light-canvas-safe.

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

   -------------------------------------------------------------------------
   CONTRAST (measured with App\Support\Theming\ContrastChecker via a
   scratchpad script against the FIXED tokens — primary #7a2436 /
   accent #c9a35c / blush canvas #f9f1ee — never simplify these back to raw
   --ll-accent):

     - Deep Berry (primary) is DARK, so it is safe as text AND as a
       white-text fill everywhere the base already uses it: 8.83:1 on blush,
       9.84:1 on white, 8.01:1 on the warm band-alt, 9.84:1 white-on-berry
       and 13.73:1 white-on-berry-deep. Verified and therefore NOT
       overridden: .mr-btn--primary / --outline, .mr-badge, .mr-filter__link,
       .mr-page.is-active, .mr-step__dot, .mr-acct-avatar, .mr-rail-btn:hover,
       .mr-gallery__thumb.is-active, .mr-card__wish/.mr-card__quickview rest
       ink, Bootstrap .btn-primary (the shared PDP "Submit review" button) and
       .btn-link. There is NO light-primary trap on this theme.
       --bs-link-color-rgb IS set below: theme-vars.blade.php never emits it,
       so bare anchors (CMS pages, blog-post body, quick-view "Category"
       link) would otherwise hover toward Bootstrap's factory blue. A bare
       `body.pz-theme a { color: … }` catch-all is deliberately NOT used — it
       would out-specify `.mr-btn--primary { color:#fff }` and blank the hero
       CTA's label.
     - Soft Gold (accent) FAILS as text: 2.12:1 on blush, 2.37:1 on white,
       1.92:1 on the warm band-alt, 2.37:1 white-on-gold — all below even the
       3:1 non-text floor. The export itself ships gold eyebrows and a
       white-on-gold "Sale" pill at those ratios, so a darker sibling carries
       every FOREGROUND role: --pz-gold-ink (color-mix 62% gold / 38% black =
       #7d6539) measures 4.97:1 on blush, 5.54:1 on white, 4.76:1 on the band,
       4.51:1 on band-alt and 5.54:1 white-on-fill. It inks .mr-eyebrow,
       .mr-ulink:hover, .mr-icon-btn:hover, .mr-btn--light:hover (a fill),
       .mr-card__wish.is-active, .mr-card__title/.mr-article__title/
       .mr-crumbs/.mr-cart-row__title a:hover, .mr-tabs .nav-link.active's
       underline, .mr-trust svg, --mr-gold (star ratings), the focus ring,
       .pz-keyline-link:hover and .pz-btn--gold.
       RAW --pz-gold stays for purely decorative, non-informational chrome:
       hairline keylines on tiles/cards/inputs, the craft-story corner
       brackets and bullet dots, the collections ring — and as TEXT only on
       the deep-berry band, where it measures 5.80:1.
     - The two berry surfaces are a THIRD canvas. Body ink (1.74:1) and
       gold-ink (1.78:1) are both effectively invisible there and are NEVER
       used on them. Announcement text uses --pz-on-berry-warm (#ffd9dc,
       7.60:1 — the export's own rose-tinted on-primary-container); footer
       headings/brand/social use --pz-on-berry (#f8efea, 8.68:1); footer body
       and links use --pz-on-berry-muted (rgba(248,239,234,.78), which
       composites to #dcc2c2 = 5.88:1); link hover + social hover fill use
       --pz-gold-fixed (#ffdea6, 7.62:1 on berry, and berry-on-gold-fixed is
       7.62:1 the other way for the filled state). The deeper collections
       band (#5c0c21) gives white 13.73:1 and raw gold 5.80:1.
     - --mr-soft is deliberately DARKENED away from the export's `outline`
       #887274 (4.00:1 on blush — short of AA for the small breadcrumb /
       card-eyebrow / field-label text it carries) to #6f5a5c (5.72:1). The
       raw #887274 survives as --mr-border-strong, a border role only.
     - Hairline gold keylines (--pz-keyline, gold at 28-30% over blush) are
       intentionally subtle per DESIGN.md ("1px keylines in Soft Gold at
       30-50% opacity") — decorative definition, never text and never a
       state's sole indicator.
   ------------------------------------------------------------------------- */

body.pz-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --pz-berry: var(--bs-primary, #7a2436);
    --pz-berry-rgb: var(--bs-primary-rgb, 122, 36, 54);
    --pz-gold: var(--ll-accent, #c9a35c);
    --pz-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, "Times New Roman", serif;
    --pz-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Text-safe darker sibling of the gold accent — see the CONTRAST note.
       Recomputed from whatever accent the merchant picks so it never goes
       stale, with a static fallback for browsers without color-mix. */
    --pz-gold-ink: #7d6539;
    --pz-gold-ink: color-mix(in srgb, var(--ll-accent, #c9a35c) 62%, #000 38%);

    /* The deeper berry the export uses for the "Curated Collections" band
       (#5c0c21) — derived from the customizer primary so it tracks a
       merchant's brand colour instead of freezing the demo's. */
    --pz-berry-deep: #5c0c21;
    --pz-berry-deep: color-mix(in srgb, var(--bs-primary, #7a2436) 78%, #000 22%);

    /* Heritage Modernism palette (DESIGN.md YAML + the rendered code.html —
       the canvas is the export's own `body { background-color: #F9F1EE }`
       blush, which the prose calls out as the replacement for pure white). */
    --pz-blush: #f9f1ee;
    --pz-surface: #fff8f5;
    --pz-white: #ffffff;
    --pz-band-low: #fbf2ed;
    --pz-band: #f5ece7;
    --pz-band-alt: #efe6e2;
    --pz-fill: #e9e1dc;
    --pz-border: #dbc0c2;
    --pz-border-strong: #887274;
    --pz-ink: #1e1b18;
    --pz-muted: #554244;
    --pz-soft: #6f5a5c;
    --pz-keyline: rgba(201, 163, 92, 0.3);
    --pz-keyline-soft: rgba(201, 163, 92, 0.2);

    /* Light-on-berry roles for the announcement bar + footer + collections
       band — the only three light-on-dark surfaces in this light theme. */
    --pz-on-berry: #f8efea;
    --pz-on-berry-muted: rgba(248, 239, 234, 0.78);
    --pz-on-berry-warm: #ffd9dc;
    --pz-on-berry-border: rgba(248, 239, 234, 0.16);
    --pz-gold-fixed: #ffdea6;

    /* Re-point the inherited base neutrals at the blush palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radii)
       follows across shop / PDP / cart / checkout / account / blog. */
    --mr-ink: var(--pz-ink);
    --mr-muted: var(--pz-muted);
    --mr-soft: var(--pz-soft);
    --mr-surface: var(--pz-surface);
    --mr-band: var(--pz-band);
    --mr-band-alt: var(--pz-band-alt);
    --mr-fill: var(--pz-fill);
    --mr-border: var(--pz-border);
    --mr-border-strong: var(--pz-border-strong);
    --mr-radius: 0.5rem;
    --mr-gold: var(--pz-gold-ink);
    --mr-shadow: 0 10px 24px -8px rgba(var(--pz-berry-rgb), 0.14);

    /* Bootstrap's own warm-neutral surfaces (NOT covered by the --mr-*
       re-point): .bg-light backs the shared review card and the category
       facet headings, and the cool factory grey clashes with the blush. */
    --bs-body-bg: var(--pz-blush);
    --bs-secondary-bg: var(--pz-band);
    --bs-link-color-rgb: var(--pz-berry-rgb);

    background-color: var(--pz-blush);
    color: var(--pz-ink);
    font-family: var(--pz-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — "Structured yet Soft": an 8px radius on cards, buttons,
   inputs and image containers (the customizer button_radius default IS
   0.5rem, so .mr-btn already inherits it via --bs-border-radius; this block
   extends the same radius to the surfaces the base leaves square) plus the
   DESIGN.md "tonal layering + soft keylines" instead of heavy shadows.
   -------------------------------------------------------------------------- */
body.pz-theme .mr-card__media,
body.pz-theme .mr-article__media,
body.pz-theme .mr-article__media img,
body.pz-theme .mr-tile,
body.pz-theme .mr-promo,
body.pz-theme .form-control,
body.pz-theme .form-select,
body.pz-theme .dropdown-menu,
body.pz-theme .offcanvas {
    border-radius: var(--mr-radius);
}

/* --------------------------------------------------------------------------
   Typography — Playfair Display editorial headlines (700 display / 600
   section), Inter body + tracked gold-ink label-caps eyebrows.
   -------------------------------------------------------------------------- */
body.pz-theme h1, body.pz-theme h2, body.pz-theme h3,
body.pz-theme h4, body.pz-theme h5, body.pz-theme h6,
body.pz-theme .mr-display,
body.pz-theme .mr-headline {
    font-family: var(--pz-font-head);
    color: var(--pz-berry);
    letter-spacing: -0.02em;
}

body.pz-theme .mr-display {
    font-weight: 700;
    line-height: 1.12;
}

body.pz-theme .mr-headline,
body.pz-theme .pz-section-title {
    font-weight: 600;
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    line-height: 1.25;
}

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

/* Prices carry the export's `price-display` role: Inter 600 with a touch of
   tracking, inked berry so they read as the page's most confident number. */
body.pz-theme .mr-card__price {
    font-family: var(--pz-font-body);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--pz-berry);
}

/* --------------------------------------------------------------------------
   Buttons — .mr-btn already inherits the 8px radius via --bs-border-radius;
   berry primary (hover deepens toward the collections berry rather than the
   base's brightness filter, matching the export's `hover:bg-primary`), plus
   the gold-keyline secondary and the tracked keyline link.
   -------------------------------------------------------------------------- */
/* NOTE: no `padding` here on purpose. `body.pz-theme .mr-btn` (0,2,1) would
   out-specify the base's `.mr-btn--hero` (0,1,0) and silently shrink every
   large CTA back to the default size. The base's 0.95rem/2rem is already
   within a hair of the export's py-4 px-8. */
body.pz-theme .mr-btn {
    font-weight: 600;
    letter-spacing: 0.12em;
}

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

body.pz-theme .mr-btn--primary:hover {
    filter: none;
    background-color: var(--pz-berry-deep);
    border-color: var(--pz-berry-deep);
    color: #fff;
}

/* Secondary hero/section button — the export's "1px Soft Gold border,
   Soft Gold text". Raw gold as a label measures 2.12:1 on blush, so both the
   label and the keyline use --pz-gold-ink (4.97:1) and the hover wash keeps
   the export's `hover:bg-soft-gold/5`. */
body.pz-theme .pz-btn--gold {
    border: 1px solid var(--pz-gold-ink);
    color: var(--pz-gold-ink);
    background-color: transparent;
}

body.pz-theme .pz-btn--gold:hover {
    background-color: rgba(201, 163, 92, 0.1);
    color: var(--pz-gold-ink);
}

/* `.mr-btn--light` fills white and the base hovers it to the raw accent with
   white text (2.37:1). Gold-ink keeps the gold identity at 5.54:1. */
body.pz-theme .mr-btn--light:hover {
    background-color: var(--pz-gold-ink);
    color: #fff;
}

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

body.pz-theme .pz-keyline-link {
    display: inline-block;
    font-family: var(--pz-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pz-berry);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--pz-berry-rgb), 0.3);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.pz-theme .pz-keyline-link:hover {
    color: var(--pz-gold-ink);
    border-color: var(--pz-gold-ink);
}

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md: 8px radius, blush field with a Soft Gold border, and a
   deep-berry border on focus. NOTE the base sets a padding SHORTHAND on
   `.form-control, .form-select` and then hands selects their 2.25rem caret
   gutter back; nothing here touches padding, so that stays intact.
   -------------------------------------------------------------------------- */
body.pz-theme .form-control,
body.pz-theme .form-select {
    border-color: var(--pz-keyline);
    background-color: var(--pz-surface);
    color: var(--pz-ink);
}

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

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

/* The border override above out-specifies Bootstrap's own
   `.form-control.is-invalid` (0,0,2,0), which would silently swallow the red
   validation state on every checkout / address / auth form. Re-assert it. */
body.pz-theme .form-control.is-invalid,
body.pz-theme .form-select.is-invalid,
body.pz-theme .was-validated .form-control:invalid,
body.pz-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

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

/* Focus ring — the base uses the raw accent (2.12:1 on blush, below the 3:1
   floor for a focus indicator). Gold-ink clears it at 4.97:1. */
body.pz-theme a:focus-visible,
body.pz-theme button:focus-visible,
body.pz-theme input:focus-visible {
    outline-color: var(--pz-gold-ink);
}

/* --------------------------------------------------------------------------
   Announcement bar + header — the announcement is the export's berry
   `primary-container` band with rose-tinted label-caps text (NOT the base's
   auto-darkened accent, which would render as a muddy olive here). The header
   stays light/inherited: logo-left single row already matches the export.
   -------------------------------------------------------------------------- */
body.pz-theme .mr-announce {
    background-color: var(--pz-berry);
    color: var(--pz-on-berry-warm);
    letter-spacing: 0.2em;
}

body.pz-theme .mr-announce a {
    color: var(--pz-on-berry-warm);
}

body.pz-theme .mr-header {
    border-bottom-color: var(--pz-keyline);
}

body.pz-theme .mr-logo {
    font-family: var(--pz-font-head);
    font-weight: 700;
    color: var(--pz-berry);
}

/* The export's nav is tracked 12px label-caps: berry with a berry underline
   for the current section, warm-grey otherwise. The base inks the active
   state with the raw accent (2.12:1) — berry is both faithful and safe. */
body.pz-theme .mr-nav-link {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pz-muted);
}

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

body.pz-theme .mr-nav-link.is-active {
    color: var(--pz-berry);
    border-bottom-color: var(--pz-berry);
}

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

/* Wishlist count pill — the base fills it with the raw accent under white
   text (2.37:1). Berry is the same pair the cart pill already uses. */
body.pz-theme .mr-badge--wish {
    background-color: var(--pz-berry);
}

/* --------------------------------------------------------------------------
   Hero (pz-hero) — the export's two-panel split: photograph left, blush copy
   panel right. Stacks to photo-over-copy on narrow viewports.
   -------------------------------------------------------------------------- */
body.pz-theme .pz-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: var(--pz-band-low);
    overflow: hidden;
}

body.pz-theme .pz-hero__media {
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 42vw, 560px);
    background-color: var(--pz-fill);
}

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

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

body.pz-theme .pz-hero__panel {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    background-color: var(--pz-band-low);
    padding: clamp(2.5rem, 6vw, 5rem);
}

body.pz-theme .pz-hero__copy {
    max-width: 30rem;
}

body.pz-theme .pz-hero__eyebrow {
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
}

body.pz-theme .pz-hero__title {
    font-family: var(--pz-font-head);
    font-weight: 700;
    font-size: clamp(2.1rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--pz-berry);
    margin-bottom: 1.5rem;
}

body.pz-theme .pz-hero__lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--pz-muted);
    max-width: 30rem;
    margin-bottom: 2.5rem;
}

body.pz-theme .pz-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited, data-driven) — the export centres each item as a
   gold glyph stacked over a tracked berry label on a near-white band.
   `.mr-band--alt.border-bottom` is the trust strip's OWN combination in the
   base (its other `.mr-band--alt` consumers never pair it with
   `.border-bottom`), so this can't leak onto an unrelated card grid.
   -------------------------------------------------------------------------- */
body.pz-theme .mr-band--alt.border-bottom {
    background-color: #fcf8f6;
    border-bottom-color: var(--pz-keyline) !important;
}

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

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

body.pz-theme .mr-trust strong {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--pz-berry);
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited .mr-promo) — the export's 3:4 photo tiles gain a
   soft-gold hairline and keep their white caption + white underline in both
   states. The base hovers the caption link to the raw accent, which sits on
   an arbitrary merchant photo under a 60% scrim — an unknowable pair — so
   white is re-asserted. NOTE the base rule is the DESCENDANT selector
   `.mr-promo:hover .mr-promo__cta` (0,0,3,0); overriding only `.mr-promo__cta`
   would lose the cascade.
   -------------------------------------------------------------------------- */
body.pz-theme .mr-promo {
    aspect-ratio: 3 / 4;
    border: 1px solid var(--pz-keyline);
}

body.pz-theme .mr-promo__title {
    font-family: var(--pz-font-head);
    font-weight: 600;
}

body.pz-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: #fff;
}

/* --------------------------------------------------------------------------
   Product card (inherited) — the export frames the PHOTO in a white 4:5 box
   with a soft-gold hairline and leaves the name + price flush below it on the
   blush canvas ("Product Cards: no background, use the 1px Soft Gold keyline
   for definition"). Bordering the MEDIA rather than the card is what keeps
   the base's flush text correct — a border on `.mr-card` itself would need
   the text inset.
   -------------------------------------------------------------------------- */
body.pz-theme .mr-card__media {
    aspect-ratio: 4 / 5;
    background-color: var(--pz-white);
    border: 1px solid var(--pz-keyline-soft);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.pz-theme .mr-card:hover .mr-card__media {
    border-color: var(--pz-keyline);
    box-shadow: var(--mr-shadow);
}

/* NOTE on the sale badge: the export draws a gold "Sale" chip whose own
   `bg-soft-gold text-white` measures 2.37:1. The platform's equivalent is
   `.mr-card__badge` (the −N% discount pill), which is deliberately the SHARED
   red `#d6293e` so it matches `.ll-price--sale` from the shared price
   component on every theme. It is left alone rather than re-tinted gold —
   a per-theme sale colour would desynchronise the badge from the struck
   price beside it. */

/* The two round overlay controls are SIBLINGS with different names, and their
   rest ink (--bs-primary on a near-white circle) is berry at 9.84:1, hover
   (--mr-surface / --mr-ink) at 16.32:1 — both already safe, so only the
   wishlist ACTIVE state (raw accent, 2.37:1) needs re-inking. */
body.pz-theme .mr-card__wish.is-active {
    color: var(--pz-gold-ink);
}

body.pz-theme .mr-card__title {
    font-family: var(--pz-font-body);
    font-weight: 400;
    color: var(--pz-ink);
}

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

/* --------------------------------------------------------------------------
   "Walking Out Fast" (pz-featured) + inherited New Arrivals grid — plain
   grids on the warm container band; all chrome comes from the shared
   heading / card / keyline-link treatment above.
   -------------------------------------------------------------------------- */
body.pz-theme .pz-featured {
    border-block: 1px solid var(--pz-keyline);
}

/* --------------------------------------------------------------------------
   Craft story band (pz-craft, child-only) — a square workshop photograph
   framed by two soft-gold corner keylines, beside the eyebrow / display
   headline / story / gold-dotted credential list. The export gives this band
   (and the journal below) extra breathing room — `py-32` vs the `py-24` the
   inherited `.mr-section` clamp produces.
   -------------------------------------------------------------------------- */
body.pz-theme .pz-craft,
body.pz-theme .pz-journal {
    padding-block: clamp(3.5rem, 9vw, 8rem);
}

body.pz-theme .pz-craft__copy {
    max-width: 34rem;
}

body.pz-theme .pz-craft__frame {
    position: relative;
    padding: 1.5rem;
}

body.pz-theme .pz-craft__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--mr-radius);
    box-shadow: 0 24px 48px -20px rgba(var(--pz-berry-rgb), 0.35);
}

body.pz-theme .pz-craft__img--placeholder {
    background: linear-gradient(135deg, var(--pz-band), var(--pz-fill));
}

body.pz-theme .pz-craft__corner {
    position: absolute;
    width: clamp(4rem, 8vw, 8rem);
    height: clamp(4rem, 8vw, 8rem);
    pointer-events: none;
}

body.pz-theme .pz-craft__corner--tl {
    top: 0;
    left: 0;
    border-top: 2px solid var(--pz-gold);
    border-left: 2px solid var(--pz-gold);
}

body.pz-theme .pz-craft__corner--br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--pz-gold);
    border-right: 2px solid var(--pz-gold);
}

body.pz-theme .pz-craft__eyebrow {
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
}

body.pz-theme .pz-craft__title {
    font-family: var(--pz-font-head);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--pz-berry);
    margin-bottom: 1.5rem;
}

body.pz-theme .pz-craft__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--pz-muted);
    margin-bottom: 2.25rem;
}

body.pz-theme .pz-craft__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

body.pz-theme .pz-craft__point {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--pz-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pz-berry);
}

body.pz-theme .pz-craft__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--pz-gold);
}

/* --------------------------------------------------------------------------
   Curated Collections (pz-collections) — the export's full-width deep-berry
   band with circular photo tiles inside a soft-gold ring. This is a
   light-on-dark surface inside a light theme, so every role in it is set
   explicitly (see the CONTRAST note).
   -------------------------------------------------------------------------- */
body.pz-theme .pz-collections {
    background-color: var(--pz-berry-deep);
    color: #fff;
    padding-block: clamp(4rem, 8vw, 6rem);
    overflow: hidden;
}

body.pz-theme .pz-collections__title {
    font-family: var(--pz-font-head);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.pz-theme .pz-collection {
    display: block;
    text-decoration: none;
    color: #fff;
}

body.pz-theme .pz-collection__ring {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    border: 2px solid rgba(201, 163, 92, 0.35);
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    transition: border-color 0.5s ease;
}

body.pz-theme .pz-collection:hover .pz-collection__ring {
    border-color: var(--pz-gold);
}

body.pz-theme .pz-collection__media {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.06);
}

body.pz-theme .pz-collection__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

body.pz-theme .pz-collection:hover .pz-collection__media img {
    transform: scale(1.08);
}

body.pz-theme .pz-collection__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

body.pz-theme .pz-collection__label {
    display: block;
    font-family: var(--pz-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    transition: color 0.3s ease;
}

/* Raw gold measures 5.80:1 on this band — the one surface where it is
   text-safe. */
body.pz-theme .pz-collection:hover .pz-collection__label {
    color: var(--pz-gold);
}

/* --------------------------------------------------------------------------
   Journal (pz-journal) — left-aligned heading block, 16:9 covers, gold-ink
   category labels and serif titles that warm to gold on hover.
   -------------------------------------------------------------------------- */
body.pz-theme .pz-article__media {
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
}

body.pz-theme .pz-article__title {
    font-family: var(--pz-font-head);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    line-height: 1.3;
    color: var(--pz-berry);
}

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

body.pz-theme .mr-crumbs a:hover,
body.pz-theme .mr-cart-row__title a:hover {
    color: var(--pz-gold-ink);
}

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

/* --------------------------------------------------------------------------
   Newsletter (pz-newsletter) — the export keeps this band on a warm tonal
   surface between two hairline rules (NOT the base's dark .mr-cta panel):
   copy left, inline field + berry Subscribe button right.
   -------------------------------------------------------------------------- */
body.pz-theme .pz-newsletter {
    background-color: var(--pz-band-alt);
    border-block: 1px solid var(--pz-keyline);
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

body.pz-theme .pz-newsletter__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

body.pz-theme .pz-newsletter__copy {
    flex: 1 1 22rem;
    max-width: 30rem;
}

body.pz-theme .pz-newsletter__title {
    font-family: var(--pz-font-head);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--pz-berry);
    margin-bottom: 1rem;
}

body.pz-theme .pz-newsletter__body {
    color: var(--pz-muted);
}

body.pz-theme .pz-newsletter__note {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pz-soft);
}

body.pz-theme .pz-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 0 1 auto;
}

body.pz-theme .pz-newsletter__form input {
    flex: 1 1 18rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--pz-keyline);
    border-radius: var(--mr-radius);
    background-color: var(--pz-surface);
    color: var(--pz-ink);
    font-family: var(--pz-font-body);
    font-size: 0.95rem;
}

body.pz-theme .pz-newsletter__form input::placeholder {
    color: var(--pz-soft);
}

body.pz-theme .pz-newsletter__form input:focus {
    outline: none;
    border-color: var(--pz-berry);
}

body.pz-theme .pz-newsletter__btn {
    padding: 1rem 2.5rem;
    border: 0;
    border-radius: var(--mr-radius);
    background-color: var(--pz-berry);
    color: #fff;
    font-family: var(--pz-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body.pz-theme .pz-newsletter__btn:hover {
    background-color: var(--pz-berry-deep);
}

/* --------------------------------------------------------------------------
   Footer (inherited .mr-footer) — the export's SECOND berry surface. The base
   assumes a LIGHT footer (--mr-band-alt background, --mr-ink brand,
   --mr-muted links, --ll-accent hover), so every one of those needs a
   literal light-on-berry override here — see the CONTRAST note.
   -------------------------------------------------------------------------- */
body.pz-theme .mr-footer {
    background-color: var(--pz-berry);
    border-top: 0;
    color: var(--pz-on-berry-muted);
}

body.pz-theme .mr-footer h4 {
    font-family: var(--pz-font-body);
    color: var(--pz-on-berry);
}

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

body.pz-theme .mr-footer a:hover {
    color: var(--pz-gold-fixed);
}

body.pz-theme .mr-footer__brand {
    font-family: var(--pz-font-head);
    color: var(--pz-on-berry);
}

body.pz-theme .mr-footer .mr-muted,
body.pz-theme .mr-footer .mr-soft {
    color: var(--pz-on-berry-muted);
}

body.pz-theme .mr-footer .mr-divider {
    background-color: var(--pz-on-berry-border);
}

body.pz-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--pz-on-berry-border);
    color: var(--pz-on-berry);
}

body.pz-theme .mr-footer .form-control::placeholder {
    color: var(--pz-on-berry-muted);
}

/* A berry-filled button on the berry footer would be invisible; the warm
   gold-fixed fill under berry ink measures 7.62:1. */
body.pz-theme .mr-footer .mr-btn--primary {
    background-color: var(--pz-gold-fixed);
    border-color: var(--pz-gold-fixed);
    color: var(--pz-berry);
}

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

body.pz-theme .mr-social {
    border-color: var(--pz-on-berry-border);
    color: var(--pz-on-berry);
    background-color: transparent;
}

body.pz-theme .mr-social:hover {
    background-color: var(--pz-gold-fixed);
    border-color: var(--pz-gold-fixed);
    color: var(--pz-berry);
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — kill every decorative hover transform/transition
   this stylesheet adds (the base's own .mr-reveal block already covers its
   own animations).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.pz-theme .pz-hero__img,
    body.pz-theme .pz-collection__ring,
    body.pz-theme .pz-collection__media img,
    body.pz-theme .pz-collection__label,
    body.pz-theme .mr-card__media {
        transition: none;
    }

    /* Neutralise the inherited hover-scale transforms too (the base's
       reduced-motion block only kills their transition). */
    body.pz-theme .pz-hero:hover .pz-hero__img,
    body.pz-theme .pz-collection:hover .pz-collection__media img,
    body.pz-theme .mr-card:hover .mr-card__media img,
    body.pz-theme .mr-tile:hover .mr-tile__img,
    body.pz-theme .mr-promo:hover .mr-promo__img {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the split hero stacks to
   photo-over-copy, the craft frame loses its outer padding so the corner
   keylines stay on-canvas, and the newsletter band goes single column with a
   full-width field.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.pz-theme .pz-hero__media,
    body.pz-theme .pz-hero__panel {
        flex: 1 1 100%;
    }

    body.pz-theme .pz-hero__media {
        min-height: clamp(260px, 60vw, 420px);
    }

    body.pz-theme .pz-craft__frame {
        padding: 1rem;
    }

    body.pz-theme .pz-newsletter__inner {
        flex-direction: column;
        align-items: stretch;
    }

    body.pz-theme .pz-newsletter__form {
        width: 100%;
    }

    body.pz-theme .pz-newsletter__form input {
        flex: 1 1 100%;
    }

    body.pz-theme .pz-newsletter__btn {
        width: 100%;
    }
}