/* Registered colour properties for the hero emblem (animatable stops). */
@property --em-c1 { syntax: '<color>'; initial-value: #cfa13f; inherits: false; }
@property --em-c2 { syntax: '<color>'; initial-value: #239062; inherits: false; }
@property --em-c3 { syntax: '<color>'; initial-value: #19647e; inherits: false; }
@property --em-c4 { syntax: '<color>'; initial-value: #2b2233; inherits: false; }
@property --em-c5 { syntax: '<color>'; initial-value: #a86a1c; inherits: false; }

/* Luxury Theme Overrides */

/* --- Vergari Icons (first-party inline SVG sprite) ------
   Icons render as <svg class="vi"><use href="#vi-name"></use></svg>. Sized in em
   so every existing font-size utility (text-lg, text-2xl) and colour rule
   (.flag, .type-kid__edit, currentColor) keeps working exactly as it did with
   the old icon font. Stroke/fill are baked per-symbol (stroke=currentColor,
   fill=none), so colour inherits from the surrounding text. */
.vi,
.brand-ic {
    /* Larger than the text em: the drawn glyphs sit inside a 2px viewBox
       margin, so they need a bump to read at a confident weight. The size is
       admin-controlled (Manage → Settings → Appearance → Icon size), stamped
       as --vi-size on :root in base.html; 1.45 is the fallback/default. */
    width: var(--vi-size, 1.45em);
    height: var(--vi-size, 1.45em);
    display: inline-block;
    vertical-align: -0.22em;       /* baseline-align with adjacent text */
    flex: none;
}

/* --- Base & Typography --- */
:root {
    /* Dropdown chevron for styled <select> (appearance:none). Muted-ink
       on light grounds; a light stroke under html.theme-dark. */
    --select-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7268' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
    /* Neutral — warm green-gray, matching the ivory/olive theme */
    /* Warning — amber, kept distinct from the gold brand */
    /* Danger — red (600 is the existing payments-suspend red) */

    /* Text swallow mask boundaries (swallow earlier) */
    --swallow-top-transparent: 12%;
    --swallow-top-opaque: 25%;
    --swallow-bottom-opaque: 75%;
    --swallow-bottom-transparent: 88%;
    /* Phones: the desktop ramps left only ~50% of a 844px screen fully
       readable — sentences dissolved while still well inside the viewport
       (mobile audit). Keep a hint of the effect, hug the edges. */

    /* Background blur mask boundaries (narrow see-through gap at top/bottom) */
    --blur-top-transparent: 2%;
    --blur-top-opaque: 15%;
    --blur-bottom-opaque: 85%;
    --blur-bottom-transparent: 98%;

    /* Center blur vignette rectangle insets */
    --center-blur-inset-y: 6%;
    --center-blur-inset-x: 6%;
}

/* --- Theme Variables --- */
html.theme-light {
    --theme-bg: #fffdf5; /* Very light ivory */
    --theme-text-primary: #121613;
    --theme-text-secondary: #414a44;
    /* Darkened from #707872 to clear WCAG AA (4.5:1) as normal-size hint text
       on both the ivory bg and the translucent sunken card surface. */
    --theme-text-muted: #686e69;
    --theme-surface: #ffffff;
    --theme-surface-hover: rgba(18, 22, 19, 0.05);
    --theme-surface-sunken: rgba(18, 22, 19, 0.03);
    /* The opaque twin of --theme-surface-sunken, over --theme-bg. A translucent
       surface painted on top of itself doubles its own tint: that is what turned the
       filter header into a grey band. Anything that sits *inside* a sunken surface —
       a sticky header, a bottom sheet — must use this, never the translucent token. */
    --theme-surface-sunken-solid: color-mix(in srgb, #121613 3%, var(--theme-bg));
    /* A panel raised *on* a sunken surface. Translucent, so it takes its hue from
       whatever it lies on instead of punching an opaque white hole in it. */
    --theme-surface-raised: rgba(255, 253, 245, 0.55);
    /* A warm wash laid over photographs so a shot with a cold white studio background
       still belongs to this page. Tune the percentage; it is the only knob. */
    --media-wash: color-mix(in srgb, var(--brand-gold) 6%, transparent);
    /* Count chips sit on a raised panel, which already sits on a sunken tray. Two
       translucent layers deep, --theme-surface-sunken all but disappears; this is the
       one token every small chip uses so they read alike wherever they land. */
    --theme-chip-bg: rgba(18, 22, 19, 0.07);
    --theme-border-subtle: rgba(18, 22, 19, 0.06);
    --header-bg-solid: rgba(255, 253, 245, 0.85);
    --header-bg-transparent: rgba(18, 22, 19, 0.12);
    --header-color-transparent: #fbfbfa;
    --brand-olive: #2c3e2d;
    --brand-gold: #916826; /* Accessible dark bronze/gold for light mode */
    /* Sale red — the one non-brand accent, reserved for the offer tag so a
       discount reads instantly against the gold/olive palette. */
    --sale-red: #bf3428;
    --brand-dark: #121613;
    --brand-light: #faf9f6;
    --scroll-bg-blur: blur(20px);
}

html.theme-dark {
    --select-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa295' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
    --theme-bg: #121913;
    --theme-text-primary: #faf9f6;
    --theme-text-secondary: #cbd5ce;
    --theme-text-muted: #8b9d92;
    --theme-surface: #1a231b;
    --theme-surface-hover: rgba(255, 255, 255, 0.08);
    --theme-surface-sunken: rgba(255, 255, 255, 0.04);
    /* Dark inverts the direction: a raised panel is lighter than its tray, not darker,
       so this is white-on-dark rather than the ivory used in the light theme. */
    --theme-surface-sunken-solid: color-mix(in srgb, #ffffff 4%, var(--theme-bg));
    --theme-surface-raised: rgba(255, 255, 255, 0.05);
    --media-wash: color-mix(in srgb, var(--brand-gold) 8%, transparent);
    --theme-chip-bg: rgba(255, 255, 255, 0.10);
    --theme-border-subtle: rgba(255, 255, 255, 0.08);
    --header-bg-solid: rgba(18, 25, 19, 0.85);
    --header-bg-transparent: rgba(18, 25, 19, 0.35);
    --header-color-transparent: #faf9f6;
    --brand-olive: #cbd5ce; /* Lighter olive/sage tone for borders/accents in dark mode */
    --brand-gold: #cfa13f; /* Cesare Vergari Gold */
    /* Lifted on the dark ground so the tag keeps the same punch. */
    --sale-red: #e05a4d;
    --brand-dark: #faf9f6;
    --brand-light: #121913;
    --scroll-bg-blur: blur(16px);
}

/* --- Brina (frost) tokens ---------------------------------------------------
   One glass material, three intensities. Every frost surface (section copy
   frost, the cookie plate, future panels) picks a step instead of inventing
   its own blur/tint pair. Tints route through --theme-bg via color-mix, so
   both themes resolve automatically (the tokens live on :root = <html>, the
   same element that carries the theme class, so the substitution follows the
   theme switch). Frost is always edgeless: the radial mask is the only edge
   treatment — never a border, radius or box-shadow on a frost layer (a mask
   clips the element's entire paint, so a shadow would ghost through the fade
   as a hard rectangle). */
:root {
    --frost-whisper-blur: 5px;
    --frost-breath-blur: 9px;
    --frost-plate-blur: 14px;
    --frost-whisper-tint: color-mix(in srgb, var(--theme-bg) 34%, transparent);
    --frost-breath-tint: color-mix(in srgb, var(--theme-bg) 52%, transparent);
    --frost-plate-tint: color-mix(in srgb, var(--theme-bg) 84%, transparent);
    --frost-mask: radial-gradient(ellipse 50% 50% at 50% 50%,
        #000 40%, rgba(0, 0, 0, 0.85) 62%, transparent 96%);
}
/* Phones: trade blur for tint (cheaper compositing, same perceived density) —
   the readability veil's own mobile stance. */
@media (max-width: 768px) {
    :root {
        --frost-whisper-blur: 4px;
        --frost-breath-blur: 6px;
        --frost-plate-blur: 10px;
        --frost-whisper-tint: color-mix(in srgb, var(--theme-bg) 40%, transparent);
        --frost-breath-tint: color-mix(in srgb, var(--theme-bg) 58%, transparent);
        --frost-plate-tint: color-mix(in srgb, var(--theme-bg) 88%, transparent);
    }
}
/* Reduced transparency: every step collapses to a near-opaque tint in one
   place. Surfaces must STILL pair this with their own `backdrop-filter: none`
   fallback — blur(0px) would keep the backdrop pipeline engaged. */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --frost-whisper-tint: color-mix(in srgb, var(--theme-bg) 88%, transparent);
        --frost-breath-tint: color-mix(in srgb, var(--theme-bg) 92%, transparent);
        --frost-plate-tint: color-mix(in srgb, var(--theme-bg) 96%, transparent);
    }
}

/* --- Admin text shadow (style drawer, "Text readability") -------------------
   Non-inherited property, so the hook targets the text elements under a
   section root. :where() keeps specificity at the bare attribute level and
   this rule sits BEFORE every bespoke text-shadow in the file, so the tuned
   classic/heritage shadows keep winning; the admin shadow lands where no
   bespoke one exists (the redesign layouts, classic body copy). Unset, the
   fallback is none — exactly today's rendering. */
[data-pv-sec] :where(h1, h2, h3, p, li, blockquote) {
    text-shadow: var(--pv-text-shadow, none);
}

/* --- Button scale -----------------------------------------------------------
   One responsive size ramp for every pill/CTA/submit on the site. The page
   CTAs, the form submits (booking, checkout, auth) and the small chrome
   buttons each picked their own font/padding (0.72–0.95rem scattered), so
   buttons read as different systems page to page and dropped under a
   comfortable size on phones. clamp() scales the type and padding with the
   viewport; --btn-min-h keeps every button a full ~44px tap target at EVERY
   width (it previously applied only under 640px). Three steps only:
   sm (fine-print contexts: cookie OK, cart peek), base (everything),
   lg (hero CTAs and primary form submits). */
:root {
    --btn-font-sm: clamp(0.8rem, 0.74rem + 0.25vw, 0.875rem);
    --btn-font: clamp(0.875rem, 0.81rem + 0.3vw, 0.975rem);
    --btn-font-lg: clamp(0.95rem, 0.86rem + 0.45vw, 1.1rem);
    --btn-pad-y: clamp(0.6rem, 0.5rem + 0.4vw, 0.75rem);
    --btn-pad-x: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);
    --btn-pad-y-lg: clamp(0.85rem, 0.7rem + 0.5vw, 1rem);
    --btn-pad-x-lg: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
    --btn-min-h: 2.75rem;
}

/* --- Sideways drag guard ----------------------------------------------------
   Phones let a stray horizontal swipe drag the page sideways, and on Chrome
   Android a horizontal overscroll is the back/forward navigation gesture — so a
   thumb that wanders off-axis while scrolling either shifts the layout or
   leaves the page entirely. Both were live here: the document resolved to
   `overscroll-behavior-x: auto`, i.e. fully unguarded.

   Measured first: there is NO content overflow to blame. scrollWidth equals the
   viewport on every public page at 375/390/844/1024/1440, at every scroll depth
   and with the nav drawer open — so this is the browser's own gesture, not a
   too-wide element, and the fix belongs on the gesture.

   `overflow-x: clip` is the belt-and-braces half, and it must be `clip`, not
   `hidden`: hidden forces the other axis to compute to `auto`, which makes
   <html> a scroll container and kills every `position: sticky` on the site
   (verified — it breaks the shop's sticky filter rail). `clip` leaves
   overflow-y `visible`, so sticky survives. Nothing else changes: page height,
   body width and node count are identical with and without this rule.

   Genuine horizontal scrollers (.pdp__thumbs, .manage-subnav, .sec-table-wrap)
   are unaffected — they still scroll; this only stops the overscroll CHAINING
   past their ends to the document. */
html {
    overscroll-behavior-x: none;
    overflow-x: clip;
}

body {
    background-color: var(--theme-bg);
    color: var(--theme-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-longform);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--theme-text-primary);
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

h1 {
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--theme-text-secondary);
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Header / Navigation --- */
.luxury-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--header-bg-solid);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-primary);
    padding: 1rem 0;
    transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-header h2 {
    font-size: 1.5rem;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.luxury-nav {
    gap: clamp(1.1rem, 1.8vw, 2rem);
    align-items: center;
}

/* Only force flex at the lg breakpoint so Tailwind's `.hidden` reliably
   wins below it (both selectors have equal specificity, so without this
   media query the desktop nav could leak onto mobile). The burger now runs
   up to 1024px — between 768 and 1024 the full item set (nav + cart + admin
   pills + language + toggles) no longer fits on one line. */
@media (min-width: 1024px) {
    .luxury-nav {
        display: flex;
    }
}

/* Hamburger: a clean, borderless icon button that tracks the header's own colour
   (currentColor) in both the transparent-over-hero and solid states, so the three
   bars always match the nav links. */
.mobile-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0;
    background: none; border: none; cursor: pointer;
    color: inherit; opacity: 0.9;
    -webkit-appearance: none; appearance: none;
    transition: opacity 0.3s ease;
}
.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible { opacity: 1; }
.mobile-menu-btn i { font-size: 1.4rem; line-height: 1; color: inherit; }
/* The adjacent mobile toggles are icon buttons — strip their box so the
   whole control cluster reads as plain header icons in the same colour. */
#theme-toggle-mobile::part(base),
#motion-toggle-mobile::part(base) {
    background: transparent; border: none; box-shadow: none; color: inherit;
}

.luxury-nav a,
.luxury-nav .nav-dd__toggle,
.luxury-nav .nav-static {
    color: inherit; /* Inherit navigation link color from header state */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: opacity 0.3s ease, color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.8;
}
/* Static heading (no link): a group label that opens its dropdown but doesn't
   navigate. Reset the <button> so it reads exactly like a nav link. */
.luxury-nav .nav-dd__toggle {
    display: inline-flex; align-items: center;
    background: none; border: 0; padding: 0; margin: 0;
    font-family: inherit; line-height: inherit; cursor: pointer;
}
.luxury-nav a:hover,
.luxury-nav .nav-dd__toggle:hover {
    opacity: 1;
}
/* A static heading with no children is a plain, non-interactive label. */
.luxury-nav .nav-static { cursor: default; }

/* ── Nav dropdown (admin-managed sub-items, Manage → Pages) ──
   Same interaction model as the cart hover-preview: opens on hover and on
   :focus-within (keyboard accessible with no JS); a small script syncs
   aria-expanded and gives touch devices a tap-to-open first tap. */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd__caret { font-size: 0.65rem; margin-left: 0.35rem; opacity: 0.7; }
.nav-dd__menu {
    position: absolute; top: calc(100% + 0.9rem); left: 50%; z-index: 120;
    transform: translate(-50%, 6px);
    min-width: 12rem; margin: 0; padding: 0.4rem 0; list-style: none;
    background: var(--theme-surface, #fff); color: var(--theme-text-primary, #1c1c1c);
    border: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.22));
    border-radius: 0.9rem; box-shadow: 0 18px 48px rgba(0,0,0,0.22);
    opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}
/* Hover bridge so the pointer can travel from the link down to the menu. */
.nav-dd__menu::before { content: ""; position: absolute; top: -0.9rem; left: 0; right: 0; height: 0.9rem; }
.nav-dd.is-open .nav-dd__menu,
.nav-dd:focus-within .nav-dd__menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .nav-dd:hover .nav-dd__menu {
        opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto;
    }
}
/* Menu links get surface colours (the nav's inherit would vanish on the panel). */
.luxury-nav .nav-dd__menu a {
    display: block; padding: 0.55rem 1.1rem;
    color: var(--theme-text-primary, #1c1c1c); opacity: 0.85;
    font-size: 0.85rem; white-space: nowrap;
}
.luxury-nav .nav-dd__menu a:hover { opacity: 1; background: var(--theme-surface-hover, rgba(128,128,128,0.08)); }
/* A static sub-item: a non-clickable label within the dropdown. */
.luxury-nav .nav-dd__menu .nav-dd__heading {
    display: block; padding: 0.55rem 1.1rem;
    color: var(--theme-text-muted, #686e69); opacity: 0.8;
    font-size: 0.85rem; white-space: nowrap; cursor: default;
}

/* --- Hero Section --- */
.luxury-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 0 1rem;
    background-color: #121913; /* Fallback luxury dark olive green */
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55)), url('../images/hero.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* Parallax effect */
}

@media (max-width: 768px) {
    .luxury-hero {
        background-attachment: scroll;
    }
}

.luxury-hero h1 {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.luxury-hero p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* --- Buttons --- */
.luxury-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.luxury-btn:hover {
    background-color: #ffffff;
    color: #111111;
}

.luxury-btn-dark {
    border-color: #2c3e2d;
    color: #2c3e2d;
}

.luxury-btn-dark:hover {
    background-color: #2c3e2d;
    color: #ffffff;
}

/* --- Sections --- */
section {
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-section {
    padding: 6rem 1rem;
    text-align: center;
}

.luxury-section h2 {
    color: var(--theme-text-primary);
}

.luxury-section p {
    margin: 0 auto;
}

/* --- Footer --- */
.luxury-footer {
    background-color: transparent !important;
    border: none !important;
    color: var(--theme-text-secondary);
    padding: 4rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.luxury-scroll-viewport .luxury-footer {
    padding-bottom: 30vh !important;
}

/* --- Scroll-Scrubbed Video & Animations --- */
.scroll-fade {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delayed animations for nested items */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* Text gradients and luxury accents */
.text-gold-gradient {
    background: linear-gradient(135deg, #f3e5ab 0%, #d4af37 50%, #aa7c11 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom styling for translucent header */
.luxury-header.transparent {
    background: var(--header-bg-transparent) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom-color: transparent !important;
    padding: 1.5rem 0;
    color: var(--header-color-transparent) !important;
}

/* --- Glassmorphic Overlays & Cards --- */
.glass-dark {
    background: rgba(24, 34, 27, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #faf9f6;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-dark h1, .glass-dark h2, .glass-dark h3, .glass-dark h4, .glass-dark p {
    color: #faf9f6;
}

.glass-light {
    background: rgba(250, 249, 246, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(24, 34, 27, 0.08);
    color: #18221b;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.glass-light h1, .glass-light h2, .glass-light h3, .glass-light h4 {
    color: #18221b;
}
.glass-light p {
    color: #334139;
}

/* Elegant Hover Effects */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.glass-dark.hover-lift:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* Drawer Overrides */
/* The mobile nav drawer is a native <dialog class="drawer"> (ui.css). Dividers
   inside it would stack their margins on the nav's flex gap — zero them so the
   gap alone controls the (compact) rhythm. */
dialog.mobile-nav-drawer hr.divider {
    margin: 0;
}

/* Fit-to-viewport density.
   The rows are fixed-rem (Tailwind text-xl / gap-3 / p-4 in base.html), so the
   menu's height ignored the viewport entirely: on a short screen — landscape
   phones, small handsets, or simply a browser with its toolbar expanded — the
   list ran past the bottom edge and forced a scroll for the sake of a few dozen
   pixels. Tying the vertical rhythm to dvh lets the menu tighten up to fit
   first and scroll only when it genuinely cannot.
   Every clamp's UPPER bound is the current value, so a tall phone renders
   pixel-identically to before; only short viewports compress. dvh (not vh) so
   the measure follows the mobile toolbar collapsing, matching dialog.drawer. */
dialog.mobile-nav-drawer nav {
    gap: clamp(0.2rem, 1.45dvh, 0.75rem);
    padding: clamp(0.45rem, 1.95dvh, 1rem);
    /* ui.css opens the drawer as a flex column; the default flex-shrink let the
       nav box compress below its own rows, which then spilled outside it
       (visible overflow) instead of scrolling the dialog. */
    flex-shrink: 0;
}
/* Primary uppercase rows + the language switcher, which reads as one of them. */
dialog.mobile-nav-drawer nav > a,
dialog.mobile-nav-drawer nav > span,
dialog.mobile-nav-drawer .lang-switcher button {
    font-size: clamp(0.95rem, 2.4dvh, 1.25rem);
    line-height: 1.3;
}
/* Compressing the rhythm must never compress the tap target away. The 2.75rem
   rule below (§ Mobile touch targets) is keyed to max-width:640px, so it misses
   landscape phones entirely — keep the full 2.75rem wherever there's room and
   degrade only to the 24px WCAG 2.5.8 floor on genuinely short viewports. */
dialog.mobile-nav-drawer nav > a {
    display: inline-flex;
    align-items: center;
    min-height: clamp(1.5rem, 7dvh, 2.75rem);
}
/* Nested (second-level) rows stay a step down from their parent. */
dialog.mobile-nav-drawer nav > a[class*="pl-"],
dialog.mobile-nav-drawer nav > span[class*="pl-"] {
    font-size: clamp(0.8rem, 1.95dvh, 1rem);
}
/* The cart / account / logout icon row. */
dialog.mobile-nav-drawer nav > div a {
    font-size: clamp(1.15rem, 2.9dvh, 1.5rem);
    line-height: 1.2;
}
dialog.mobile-nav-drawer .drawer__head {
    padding-top: clamp(0.35rem, 1.9dvh, 1rem);
    padding-bottom: clamp(0.1rem, 0.4dvh, 0.25rem);
}
/* Landscape phones: the staff menu is the longest variant and still spilled by
   a few pixels once tap targets were held at their 24px floor. Reclaim it from
   the fixed Tailwind mt-1 spacers and the head, which are pure breathing room. */
@media (max-height: 460px) {
    dialog.mobile-nav-drawer nav > div {
        margin-top: 0;
    }
    dialog.mobile-nav-drawer .drawer__head {
        padding-top: 0.3rem;
        padding-bottom: 0;
    }
    dialog.mobile-nav-drawer .drawer__title {
        font-size: 0.72rem;
    }
    dialog.mobile-nav-drawer .lang-switcher {
        margin-top: -0.15rem;
    }
}

/* --- Seamless Viewport Overlays --- */
.section-overlay-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* --- Background Video Theme Adaptability & Blur --- */
.fixed-bg-container {
    background-color: var(--theme-bg);
    transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#scroll-video {
    transition: opacity 1.2s ease, mix-blend-mode 0.5s ease, filter 0.5s ease;
}

html.theme-light #scroll-video {
    mix-blend-mode: normal;
    opacity: 0.18;
    filter: blur(0.5px) brightness(1.15) contrast(0.95);
}

html.theme-dark #scroll-video {
    mix-blend-mode: normal;
    opacity: 0.38;
    filter: blur(0.5px) brightness(0.9) contrast(1.05);
}

/* --- Readability veil: frosted band at the viewport's vertical centre ---------
   A soft, edgeless frosted-glass band locked to the middle of the screen. It
   blurs and gently darkens ONLY the video behind it (it sits at z-10, below the
   page content at z-20), so whatever text is centred in the viewport lifts off
   the footage while the photographs above stay perfectly crisp. The radial mask
   fades the band to nothing on every side; it spans ~38vh so it reads as
   atmosphere rather than a defined panel. */
.cv-readability-veil {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1080px, 92vw);
    height: var(--pv-band-height, 38vh);
    z-index: 10;
    pointer-events: none;
    background: rgba(16, 26, 20, var(--pv-band-alpha, 0.17));
    backdrop-filter: blur(var(--pv-band-blur, 7px)) saturate(1.05);
    -webkit-backdrop-filter: blur(var(--pv-band-blur, 7px)) saturate(1.05);
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.9) 38%, transparent 80%);
            mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.9) 38%, transparent 80%);
}

/* Phones: a little shorter and a lighter blur to stay smooth, slightly stronger
   tint to compensate for the reduced blur. */
@media (max-width: 768px) {
    .cv-readability-veil {
        width: 94vw;
        height: var(--pv-band-height, 34vh);
        background: rgba(16, 26, 20, var(--pv-band-alpha, 0.19));
        backdrop-filter: blur(var(--pv-band-blur, 6px)) saturate(1.05);
        -webkit-backdrop-filter: blur(var(--pv-band-blur, 6px)) saturate(1.05);
    }
}

/* Light theme runs dark text over a bright, misty background, so flip the tint
   to a pale frost — it lifts the type instead of fighting it. (Higher specificity
   than the mobile rule, so it wins there too; the mobile blur still applies.) */
html.theme-light .cv-readability-veil {
    background: rgba(247, 249, 245, var(--pv-band-alpha, 0.34));
}

/* Reduced-transparency users: drop the blur but keep a faint static tint so the
   legibility gain survives. */
@media (prefers-reduced-transparency: reduce) {
    .cv-readability-veil {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(16, 26, 20, 0.24);
    }
}

/* Admin-uploaded per-section photo shown as a faded background (Admin
   Settings › Home page, media mode "Photo as faded background"). Sits behind
   the section content, washed and soft-masked so text stays legible. */
.sec-fade-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sec-fade-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22;
    -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 30%, transparent 100%);
            mask-image: radial-gradient(120% 120% at 50% 45%, #000 30%, transparent 100%); }

/* Card & Metrics Component Themes */
.metric-card {
    background-color: var(--theme-surface-sunken);
    border: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

.contact-form-container {
    background-color: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0;
    padding: 2rem;
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Contact form fields: borderless, just a hairline that turns gold on
   hover/focus — the luxury look the old shadow-DOM overrides produced. */
.contact-form-container .field input,
.contact-form-container .field textarea {
    border: none;
    border-bottom: 1px solid var(--theme-border-subtle);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form-container .field input:hover,
.contact-form-container .field textarea:hover {
    border-bottom-color: var(--brand-gold);
}
.contact-form-container .field input:focus,
.contact-form-container .field textarea:focus {
    outline: none;
    border-bottom-color: var(--brand-gold);
    box-shadow: 0 1px 0 0 var(--brand-gold);
}

.product-image-wrapper {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
    border-radius: 1rem;
    transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

.product-divider {
    border-top: 1px solid var(--theme-border-subtle);
    transition: border-color 0.5s ease;
}

/* --- Viewport Scroll Swallowing Layout & Style 11 Reveal Underline --- */
.luxury-scroll-background {
    position: fixed;
    top: 70px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15; /* Behind scroll viewport (z-index 20) */
    pointer-events: none;
    transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
    
    /* Elegant fading masks at top and bottom boundaries for the blur background *only* */
    mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        transparent var(--blur-top-transparent), 
        black var(--blur-top-opaque), 
        black var(--blur-bottom-opaque), 
        transparent var(--blur-bottom-transparent), 
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        transparent var(--blur-top-transparent), 
        black var(--blur-top-opaque), 
        black var(--blur-bottom-opaque), 
        transparent var(--blur-bottom-transparent), 
        transparent 100%
    );
}

/* Pseudo-element for center-focused backdrop blur rectangle */
.luxury-scroll-background::before {
    content: '';
    position: absolute;
    top: var(--center-blur-inset-y, 6%);
    bottom: var(--center-blur-inset-y, 6%);
    left: var(--center-blur-inset-x, 6%);
    right: var(--center-blur-inset-x, 6%);
    border-radius: 0;
    pointer-events: none;
    transition: backdrop-filter 0.5s ease;
    
    /* Backdrop filter for center blur */
    backdrop-filter: var(--scroll-bg-blur, blur(16px));
    -webkit-backdrop-filter: var(--scroll-bg-blur, blur(16px));
    
    /* Mask to make the blur fade out softly at the edges — no border-radius clipping */
    /* By using ellipse 48% 48% and transparent at 95%, we ensure it becomes fully transparent */
    /* slightly before the physical edge (50% from center), removing any distinct boundary line. */
    mask-image: radial-gradient(ellipse 48% 48% at 50% 50%, black 20%, rgba(0, 0, 0, 0.8) 45%, rgba(0, 0, 0, 0.3) 75%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 48% 48% at 50% 50%, black 20%, rgba(0, 0, 0, 0.8) 45%, rgba(0, 0, 0, 0.3) 75%, transparent 95%);
}

.luxury-scroll-viewport {
    position: fixed;
    top: 70px; /* Aligned exactly under the solid header */
    bottom: 0; /* Cover to the bottom of the viewport */
    left: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    z-index: 20;
    
    /* Viewport container is transparent since background is now on .luxury-scroll-background */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    
    /* Elegant fading masks at top and bottom boundaries to "swallow" content earlier */
    mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        transparent var(--swallow-top-transparent), 
        black var(--swallow-top-opaque), 
        black var(--swallow-bottom-opaque), 
        transparent var(--swallow-bottom-transparent), 
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        transparent var(--swallow-top-transparent), 
        black var(--swallow-top-opaque), 
        black var(--swallow-bottom-opaque), 
        transparent var(--swallow-bottom-transparent),
        transparent 100%
    );
}

/* The fixed scroll layers are pinned to the desktop header height (70px); the
   mobile header (44px hamburger + padding) is taller, so nudge them down on
   phones or the home content tucks under the header. */
@media (max-width: 768px) {
    .luxury-scroll-background,
    .luxury-scroll-viewport { top: 76px; }
}

/* Hide the static base template footer on pages using the custom scroll viewport to prevent duplicate/hidden footers */
body:has(.luxury-scroll-viewport) > .luxury-footer {
    display: none;
}

/* Light Theme Viewport Backdrop */
html.theme-light .luxury-scroll-background {
    background: radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 253, 245, 0.78) 0%, rgba(250, 246, 235, 0.65) 100%);
}

/* Dark Theme Viewport Backdrop */
html.theme-dark .luxury-scroll-background {
    background: radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(20, 29, 23, 0.65) 0%, rgba(24, 34, 27, 0.45) 100%);
}

/* Custom scrollbar styling for a premium feel */
.luxury-scroll-viewport::-webkit-scrollbar {
    width: 6px;
}
.luxury-scroll-viewport::-webkit-scrollbar-track {
    background: transparent;
}
.luxury-scroll-viewport::-webkit-scrollbar-thumb {
    background: rgba(207, 161, 63, 0.3); /* gold translucent */
    border-radius: 3px;
}
.luxury-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(207, 161, 63, 0.6);
}

/* Style 11: Underline reveal line */
.s11-line {
    width: 0;
    height: 2px;
    background: var(--brand-gold);
    margin: 2rem auto 0 auto;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Reveals on hover (desktop) or when scrolled into view (.is-revealed, all
   devices) so touch users see the accent too. */
section:hover .s11-line,
.s11-line.is-revealed {
    width: 120px;
}

/* --- Floating & Hover Effects for Images --- */
@keyframes float-y {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}
.luxury-float {
    animation: float-y 6s ease-in-out infinite;
}
.luxury-float-delayed {
    animation: float-y 6s ease-in-out infinite;
    animation-delay: 3s;
}

/* Disable all bobbing/floating animations if background motion is turned off */
html.motion-disabled .luxury-float,
html.motion-disabled .luxury-float-delayed {
    animation: none !important;
}

/* Frosted/borderless wraps with gold accents and hover transformations */
.luxury-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-sunken);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.luxury-image-wrapper:hover {
    transform: translateY(-4px) scale(1.015);
    border-color: var(--brand-gold);
    box-shadow: 0 20px 40px rgba(207, 161, 63, 0.12);
}
.luxury-image-wrapper img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.luxury-image-wrapper:hover img {
    transform: scale(1.04);
}

/* --- Brand Signature Responsiveness & Contrast --- */
.brand-signature {
    transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-signature:hover {
    transform: scale(1.03);
}

/* Light Theme brand signature styling (make white signature dark charcoal) */
html.theme-light .brand-signature {
    filter: invert(1) brightness(0.12) !important;
}

/* Dark Theme Header Signature styling */
html.theme-dark .brand-signature {
    filter: brightness(1.15) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* Hero brand lockup: the Cesare Vergari signature + wordmark with the
   Flower-of-Life beneath. An alpha silhouette used as a CSS mask on this div;
   the strokes are painted by an oversized gradient layer (::before) that
   animates TWO ways at once, chosen by the client from the emblem lab:
     - a diagonal GPU transform sweep (waves of colour crossing the strokes);
     - @property-interpolated stop colours (gold literally becomes emerald,
       sea blue, olive-purple, amber — in place).
   The two rhythms (6 s sweep, 10 s colour cycle) drift in and out of phase,
   so the motion never visibly repeats. Deliberately NOT animated via
   background-position — that property provably fails to repaint on some
   real-world setups (the client's) while transforms and registered custom
   properties animate everywhere. The image URL arrives per-element as
   --emblem-src (dev = /static, prod = bucket). */
.hero-emblem {
    position: relative;
    overflow: hidden;
    width: min(var(--pv-emblem-size, 26rem), 84vw);
    aspect-ratio: 1858 / 1262;
    margin-inline: auto;
    -webkit-mask: var(--emblem-src) center / contain no-repeat;
            mask: var(--emblem-src) center / contain no-repeat;
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    background-color: var(--pv-emblem-color, #2c3e2d);  /* strokes are never blank if the layer fails */
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.28))
            drop-shadow(0 0 14px rgba(207, 161, 63, var(--pv-emblem-glow, 0)))
            drop-shadow(0 0 34px rgba(207, 161, 63, calc(var(--pv-emblem-glow, 0) * .5)));
}
.hero-emblem::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 300%; height: 300%;
    background:
        linear-gradient(118deg,
            transparent 42%, rgba(255, 246, 220, var(--pv-emblem-glint, 0)) 50%,
            transparent 58%),
        linear-gradient(118deg,
        var(--em-c1) 0%, var(--em-c2) 20%, var(--em-c3) 40%,
        var(--em-c4) 60%, var(--em-c5) 80%, var(--em-c1) 100%);
    animation: hero-emblem-sweep var(--pv-emblem-sweep, 6s) linear infinite,
               hero-emblem-hues var(--pv-emblem-hues, 10s) linear infinite;
    will-change: transform;
}
/* Admin toggle (Manage → Settings → Appearance): colour morph OFF renders the
   lockup as a solid mark in the brand gold — the exact tone (and theme
   adaptation) of the hero accent "Natura in ogni goccia" (.hl-accent), which
   is var(--brand-gold): a deep bronze-gold on the light theme, the brighter
   Cesare Vergari gold on dark. */
.hero-emblem--static::before {
    /* Solid brand mark — but the admin's light streak still travels: when
       the glint token is set, the emitted --pv-emblem-glint-anim replays the
       sweep translation over a solid-gold base + the streak layer. Unset,
       anim none + streak alpha 0 = today's motionless solid gold. */
    pointer-events: none;
    animation: var(--pv-emblem-glint-anim, none);
    background:
        linear-gradient(118deg,
            transparent 42%, rgba(255, 246, 220, var(--pv-emblem-glint, 0)) 50%,
            transparent 58%),
        linear-gradient(118deg, var(--pv-emblem-color, var(--brand-gold)) 0%,
            var(--pv-emblem-color, var(--brand-gold)) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .hero-emblem--static::before { animation: none; }
}
html.motion-disabled .hero-emblem--static::before { animation: none; }

@keyframes hero-emblem-sweep {
    0%   { transform: translate(0%, 0%); }
    50%  { transform: translate(-66.6%, -66.6%); }
    100% { transform: translate(0%, 0%); }
}
/* The five stop colours walk one step around the palette ring per stage, so
   every stroke's colour is always in transit toward the next tone. */
@keyframes hero-emblem-hues {
    0%, 100% { --em-c1:#cfa13f; --em-c2:#239062; --em-c3:#19647e; --em-c4:#2b2233; --em-c5:#a86a1c; }
    20%      { --em-c1:#239062; --em-c2:#19647e; --em-c3:#2b2233; --em-c4:#a86a1c; --em-c5:#cfa13f; }
    40%      { --em-c1:#19647e; --em-c2:#2b2233; --em-c3:#a86a1c; --em-c4:#cfa13f; --em-c5:#239062; }
    60%      { --em-c1:#2b2233; --em-c2:#a86a1c; --em-c3:#cfa13f; --em-c4:#239062; --em-c5:#19647e; }
    80%      { --em-c1:#a86a1c; --em-c2:#cfa13f; --em-c3:#239062; --em-c4:#19647e; --em-c5:#2b2233; }
}
html.theme-dark .hero-emblem {
    filter: drop-shadow(0 0 1px rgba(245, 243, 238, 0.35))
            drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 14px rgba(207, 161, 63, var(--pv-emblem-glow, 0)))
            drop-shadow(0 0 34px rgba(207, 161, 63, calc(var(--pv-emblem-glow, 0) * .5)));
}
/* No-mask fallback (very old browsers): show the lockup image as-is. */
@supports not ((-webkit-mask-image: url("x")) or (mask-image: url("x"))) {
    .hero-emblem { -webkit-mask: none; mask: none; background: var(--emblem-src) center / contain no-repeat; }
    .hero-emblem::before { display: none; }
}

/* Scroll-flow emblem (home only): the hero lockup detaches on scroll and
   floats at a fixed docking line, landing as the crest above each section's
   heading. Slots reserve the landing space; they render only when the script
   arms the effect (html.emblem-flow), so no-JS and reduced-motion get the
   normal page. The traveler is a clone of .hero-emblem (same living gradient),
   fixed to the real viewport, above the scroller's top fade but under the
   header. Its position is driven from live rects every frame, so it adapts to
   whatever sections/content the admin configures. */
/* Invisible landing targets in each section's free half (opposite the text).
   Absolute → zero layout impact; hidden on phones (the emblem stays in the
   hero there — the JS detects the zero rects and stands down). */
.emblem-slot {
    display: none;
    position: absolute;
    top: 11%;
    width: min(16rem, 30vw);
    aspect-ratio: 1858 / 1262;
    visibility: hidden;
    pointer-events: none;
}
.emblem-slot--l { left: 25%; transform: translateX(-50%); }
.emblem-slot--r { left: 75%; transform: translateX(-50%); }
/* Dense sections have no free upper half — their whitespace is lower-left:
   the oil section's right column holds the tasting notes, and the contact
   section's right column is the booking form. */
#allocations .emblem-slot { left: 25%; top: 54%; }
#contact .emblem-slot { left: 25%; top: 76%; }
@media (min-width: 768px) {
    .emblem-slot { display: block; }
}
.hero-emblem--traveler {
    position: fixed;
    top: 0; left: 0;
    margin: 0;
    z-index: 25;                 /* above content (z-20), below the header (1000) */
    pointer-events: none;
    transform-origin: top left;
    will-change: transform;
    visibility: hidden;
}

/* --- Brand Logo Styling & Transitions --- */
.brand-logo-container {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-logo-container:hover {
    transform: scale(1.05);
}
.brand-logo {
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Default Logo Visibility (Light Logo on by default, Dark Logo hidden) */
.logo-light {
    opacity: 1;
}
.logo-dark {
    opacity: 0;
}

/* Light Theme Header NOT transparent (solid scrolled view): show dark logo, hide light logo */
html.theme-light .luxury-header:not(.transparent) .logo-light {
    opacity: 0;
}
html.theme-light .luxury-header:not(.transparent) .logo-dark {
    opacity: 1;
}

/* Dark Theme Header (whether transparent or not): always show light logo */
html.theme-dark .logo-light {
    opacity: 1;
}
html.theme-dark .logo-dark {
    opacity: 0;
}

/* Light Theme Header transparent (top of page overlaying dark video): show light logo */
html.theme-light .luxury-header.transparent .logo-light {
    opacity: 1;
}
html.theme-light .luxury-header.transparent .logo-dark {
    opacity: 0;
}

/* Footer Logo theme switching */
html.theme-light .luxury-footer .logo-light {
    opacity: 0;
}
html.theme-light .luxury-footer .logo-dark {
    opacity: 1;
}
html.theme-dark .luxury-footer .logo-light {
    opacity: 1;
}
html.theme-dark .luxury-footer .logo-dark {
    opacity: 0;
}

/* --- Overlay Accent Text Contrast Correction (Light/Dark Mode) --- */
html.theme-light .section-overlay-container h1,
html.theme-light .section-overlay-container h2,
html.theme-light .section-overlay-container h3 {
    color: var(--theme-text-primary) !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8), 0 2px 12px rgba(255, 255, 255, 0.4);
}

html.theme-light .section-overlay-container p {
    color: var(--theme-text-secondary) !important;
    text-shadow: 0 1px 5px rgba(255, 255, 255, 0.8);
}

html.theme-light .section-overlay-container .text-brand-gold {
    color: var(--brand-gold) !important;
    text-shadow: 0 1px 5px rgba(255, 255, 255, 0.8);
}

html.theme-dark .section-overlay-container h1,
html.theme-dark .section-overlay-container h2,
html.theme-dark .section-overlay-container h3 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

html.theme-dark .section-overlay-container p {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

html.theme-dark .section-overlay-container .text-brand-gold {
    color: var(--brand-gold) !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* --- Focus Visible Accessibility Styles --- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ==========================================================================
   AGRICOLA VERGARI NEO-LEAF LUXURY DESIGN SYSTEM
   Default and unified layout structure based on organic leaf crops,
   gradient-faded borders, and center-only zoom reveals.
   ========================================================================== */

/* --- 1. Clean Styling Overrides --- */
/* Global card/form faded border box rules deleted in favor of direct border-l-faded styling */

/* --- 2. Vertical/Lateral Left Faded Borders for Text Items --- */
.border-l-faded {
    position: relative;
    border: none !important;
}

.border-l-faded::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, var(--brand-gold) 20%, var(--brand-gold) 80%, transparent 100%) !important;
    pointer-events: none;
}

/* --- 3. Leaf Image Crop Profiles --- */
#story .luxury-image-wrapper {
    border-radius: 0% 100% 0% 100% / 0% 100% 0% 100% !important; /* Leaf pointing top-right/bottom-left */
}

#land .luxury-image-wrapper,
#tasting .luxury-image-wrapper {
    border-radius: 100% 0% 100% 0% / 100% 0% 100% 0% !important; /* Leaf pointing top-left/bottom-right */
}

.luxury-image-wrapper {
    position: relative !important;
    overflow: hidden !important;
    animation: none !important; /* Disable floating motion to prevent translation conflicts */
    border: 2px solid transparent !important;
    background: linear-gradient(var(--theme-bg), var(--theme-bg)) padding-box, 
                linear-gradient(135deg, var(--brand-gold) 0%, rgba(207, 161, 63, 0.25) 60%, transparent 100%) border-box !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
    transition: border-radius 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- 4. Stacking Primary & Secondary Images --- */
.primary-image {
    opacity: 1 !important;
    z-index: 2 !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.secondary-image {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transform: scale(1.1) !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- 5. Reveal & Zoom Mechanics (No back-overlap/underlap) ---
   Desktop triggers on :hover; touch triggers on `.is-active`, which the scroll
   engine toggles when the section is centred in the viewport — so the leaf
   morph and the second photograph are experienced on mobile too. */
/* Story (image on right): morph leaf stretch left */
#story .luxury-image-wrapper:hover,
#story .grid.is-active .luxury-image-wrapper {
    border-radius: 20% 100% 20% 80% / 20% 80% 20% 100% !important;
    transform: scale(1.08) rotate(1deg) !important;
    background: linear-gradient(var(--theme-bg), var(--theme-bg)) padding-box,
                linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold) 100%) border-box !important;
    box-shadow: 0 25px 55px rgba(207, 161, 63, 0.35), 0 0 30px rgba(207, 161, 63, 0.25) !important;
}

/* Land & Tasting (image on left): morph leaf stretch right */
#land .luxury-image-wrapper:hover,
#tasting .luxury-image-wrapper:hover,
#land .grid.is-active .luxury-image-wrapper,
#tasting .grid.is-active .luxury-image-wrapper {
    border-radius: 100% 20% 80% 20% / 80% 20% 100% 20% !important;
    transform: scale(1.08) rotate(-1deg) !important;
    background: linear-gradient(var(--theme-bg), var(--theme-bg)) padding-box,
                linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold) 100%) border-box !important;
    box-shadow: 0 25px 55px rgba(207, 161, 63, 0.35), 0 0 30px rgba(207, 161, 63, 0.25) !important;
}

/* Swap images on hover (desktop) / when centred in view (touch) */
.luxury-image-wrapper:hover .primary-image,
.grid.is-active .primary-image {
    opacity: 0 !important;
    transform: scale(0.95) !important;
}

.luxury-image-wrapper:hover .secondary-image,
.grid.is-active .secondary-image {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

/* --- 5b. Mobile "split & merge" reveal (touch only; pieces built by JS) ---
   The single leaf photo splits into the site leaf shape (photo 1) and a tilted
   olive shape (photo 2). When centred in view they part vertically and enlarge
   slightly; on leaving the viewport they shrink and merge back into one leaf. */
.has-split-pieces {
    overflow: visible !important; border: 0 !important; background: none !important;
    box-shadow: none !important; border-radius: 0 !important;
}
.has-split-pieces .primary-image, .has-split-pieces .secondary-image { display: none !important; }
.split-piece {
    position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; overflow: hidden;
    border: 2px solid var(--brand-gold); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
    transform: translate(-50%, -50%) scale(1);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}
.split-piece__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-leaf { z-index: 2; }
.split-olive { z-index: 1; width: 72%; opacity: 0; }
/* Section-specific leaf / olive crops (each the mirror of the other) */
#story .split-leaf  { border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%; }
#story .split-olive { border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%; }
#land .split-leaf, #tasting .split-leaf   { border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%; }
#land .split-olive, #tasting .split-olive { border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%; }
/* In view: part vertically + enlarge; olive tilts in. Out of view: merge back. */
.luxury-image-wrapper.is-split .split-leaf  { transform: translate(-50%, -66%) scale(1.06); }
.luxury-image-wrapper.is-split .split-olive { transform: translate(-50%, -16%) rotate(-16deg) scale(1.06); opacity: 1; }
html.motion-disabled .split-piece { transition: none !important; }

/* --- 6. Mobile Responsiveness --- */
@media (max-width: 767px) {
    .luxury-image-wrapper {
        max-width: 100% !important;
        margin-top: 2rem !important;
    }
}

/* --- 7. Scroll-Driven Animations (Modern Web API & Polyfill Fallback) --- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes scroll-scale-up {
      from { transform: scale(0.85); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .scroll-animate-scale {
      /* Enlarge automatically and cleanly when entering viewport */
      animation: scroll-scale-up auto linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
  }
}

/* --- 8. Authentication & Social Buttons --- */
.social-btn {
    position: relative;
    overflow: hidden;
}

.btn-google {
    background-color: var(--theme-bg);
    color: var(--theme-text-primary);
}

.btn-apple {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}
html.theme-dark .btn-apple {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.btn-facebook {
    background-color: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
}

html.theme-dark .btn-facebook {
    background-color: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
}

/* =====================================================================
   Shop Administration — custom themed product management
   (staff-only screens under /shop/manage/)
   ===================================================================== */

.manage-shell {
    /* Wide but bounded: staff screens are grids, tables and editors — they
       earn the room (was 1120px, which left the pages editor in a narrow
       column on any modern display). */
    max-width: 1480px;
    margin: 0 auto;
    padding: 8rem 1.5rem 5rem;
    color: var(--theme-text-primary);
}
@media (max-width: 1023px) {
    .manage-shell {
        padding: 6.25rem 1.25rem 4rem;
    }
}
@media (max-width: 767px) {
    .manage-shell {
        padding: 5.25rem 0.85rem 3.5rem;
    }
}

/* --- Mobile Admin Top Bar (shown on narrower screens < 1024px) --- */
.manage-mobile-bar {
    display: none;
}
@media (max-width: 1023px) {
    .manage-mobile-bar {
        position: sticky;
        top: calc(4.25rem + 0.85rem);
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.55rem 0.85rem;
        margin-bottom: 1.25rem;
        background: color-mix(in srgb, var(--theme-surface-sunken) 94%, var(--theme-bg));
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border: 1px solid var(--theme-border-subtle);
        border-radius: 14px;
        box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.06);
        transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
}
@media (max-width: 640px) {
    .manage-mobile-bar {
        top: calc(4.25rem + 0.75rem);
        padding: 0.45rem 0.75rem;
        border-radius: 12px;
    }
}
.manage-drawer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    min-height: 2.2rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border-subtle);
    background: var(--theme-bg);
    color: var(--theme-text-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.manage-drawer-btn:hover {
    border-color: var(--brand-gold);
    color: var(--brand-gold);
}
.manage-drawer-btn i, .manage-drawer-btn svg {
    font-size: 0.95rem;
}
.manage-mobile-bar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.manage-mobile-bar__section {
    font-family: var(--font-longform);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.manage-mobile-bar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.manage-mode-pill--compact {
    padding: 0.2rem 0.55rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
}

/* --- Left Drawer Navigation Modal (<dialog.drawer.drawer--left.manage-drawer>) --- */
dialog.manage-drawer:not([open]) {
    display: none !important;
}
dialog.manage-drawer {
    width: min(320px, 86vw);
    padding: 0;
    background: var(--theme-bg);
    color: var(--theme-text-primary);
}
dialog.manage-drawer[open] {
    display: flex !important;
    flex-direction: column !important;
}
.manage-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-sunken);
}
.manage-drawer__eyebrow {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--brand-gold);
    margin: 0 0 0.2rem;
}
.manage-drawer__title {
    font-family: var(--font-longform);
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    margin: 0;
}
.manage-drawer__mode-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-sunken);
}
.manage-drawer__mode-toggle {
    background: var(--theme-bg);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--brand-gold);
    transition: all 0.2s ease;
}
.manage-drawer__mode-toggle:hover {
    border-color: var(--brand-gold);
    background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
}
.manage-drawer__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 0.85rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    -webkit-overflow-scrolling: touch;
}
.manage-drawer__group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.manage-drawer__group-title {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--theme-text-muted);
    font-weight: 600;
    padding: 0.25rem 0.65rem 0.15rem;
}
.manage-drawer__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    min-height: 2.6rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--theme-text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.18s ease;
    border-left: 3px solid transparent;
}
.manage-drawer__link:hover {
    background: var(--theme-surface-sunken);
    color: var(--theme-text-primary);
}
.manage-drawer__link.is-active {
    background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
    color: var(--theme-text-primary);
    font-weight: 650;
    border-left-color: var(--brand-gold);
}
.manage-drawer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    font-size: 0.95rem;
    color: var(--theme-text-muted);
    flex-shrink: 0;
}
.manage-drawer__link.is-active .manage-drawer__icon {
    color: var(--brand-gold);
}
.manage-drawer__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.manage-drawer__link .manage-subnav__badge {
    margin-left: auto;
}
.manage-drawer__foot {
    margin-top: auto;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-sunken);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.manage-drawer__foot-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}
.manage-drawer__foot-link:hover {
    color: var(--brand-gold);
}
.manage-drawer__foot-link--muted {
    color: var(--theme-text-muted);
    font-size: 0.78rem;
}

/* --- Header + sub-nav --- */
.manage-head { margin-bottom: 2rem; }
.manage-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.manage-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--theme-text-muted);
    margin: 0;
}
.manage-title {
    font-family: var(--font-longform);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: 0.01em;
    margin: 0.35rem 0 0;
}
.manage-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border-subtle);
}
.manage-mode-pill.is-test {
    color: var(--brand-gold);
    border-color: color-mix(in srgb, var(--brand-gold) 45%, transparent);
    background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
}
.manage-mode-pill.is-live { color: var(--theme-text-secondary); }

.manage-subnav {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.manage-subnav::-webkit-scrollbar { display: none; }
.manage-subnav a { white-space: nowrap; flex: 0 0 auto; }
.manage-subnav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.25rem;
    margin-bottom: -1px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--theme-text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.manage-subnav a:hover { color: var(--theme-text-primary); }
.manage-subnav a.is-active {
    color: var(--theme-text-primary);
    border-bottom-color: var(--brand-gold);
}
.manage-subnav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #b02018;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}
/* Always in the DOM so ajax.js can flip counts in place; hidden when zero. */
.manage-subnav__badge.is-empty { display: none; }

@media (max-width: 1023px) {
    .manage-subnav { display: none !important; }
    .manage-head__row { display: none !important; }
    .manage-head { margin-bottom: 1.25rem; }
    .manage-title { font-size: clamp(1.4rem, 4.5vw, 1.85rem); margin: 0; }
}

@media (min-width: 1024px) {
    .manage-mobile-bar { display: none !important; }
    .manage-subnav { display: flex !important; }
}

.manage-callout, .manage-messages { margin-bottom: 1.5rem; }
.manage-messages > .callout { margin-bottom: 0.5rem; }

/* --- Dashboard stats --- */
.manage-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    background: var(--theme-surface-sunken);
}
.stat-card__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--theme-text-muted);
}
.stat-card__value {
    font-family: var(--font-longform);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
}
.stat-card__meta { font-size: 0.78rem; color: var(--theme-text-secondary); }
.stat-card__meta i { color: var(--brand-gold); margin-right: 0.3rem; }

@media (max-width: 767px) {
    .manage-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        margin-bottom: 1.25rem;
    }
    .stat-card {
        padding: 0.9rem 1rem;
        border-radius: 12px;
        gap: 0.2rem;
    }
    .stat-card__value {
        font-size: 1.75rem;
    }
    .stat-card__label {
        font-size: 0.65rem;
    }
    .stat-card__meta {
        font-size: 0.72rem;
    }
}
@media (max-width: 380px) {
    .manage-stats {
        grid-template-columns: 1fr;
    }
}

.manage-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }
@media (max-width: 767px) {
    .manage-actions { margin-bottom: 1.5rem; gap: 0.5rem; }
}

/* --- Overview priority hub --- */
.priority-clear {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1.6rem 1.8rem; margin-bottom: 1.5rem;
    border: 1px solid color-mix(in srgb, #2f7d4f 40%, var(--theme-border-subtle));
    border-radius: 14px; background: var(--theme-surface-sunken);
}
.priority-clear__mark { font-size: 1.9rem; color: #2f7d4f; line-height: 1; }
.priority-clear h2 { font-family: var(--font-longform); font-weight: 300;
    font-size: 1.3rem; margin: 0 0 0.2rem; }
.priority-clear p { margin: 0; color: var(--theme-text-secondary); font-size: 0.9rem; }

.priority-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem; margin-bottom: 2rem; align-items: start;
}
.priority-card {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 1.4rem 1.5rem; border: 1px solid var(--theme-border-subtle);
    border-left: 3px solid var(--theme-border-subtle);
    border-radius: 14px; background: var(--theme-surface-sunken);
}
.priority-card--warn   { border-left-color: var(--brand-gold); }
.priority-card--danger { border-left-color: #b3261e; }
.priority-card--info   { border-left-color: color-mix(in srgb, var(--brand-gold) 45%, transparent); }
.priority-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.priority-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 999px; font-size: 1rem;
    background: color-mix(in srgb, var(--brand-gold) 14%, transparent); color: var(--brand-gold);
}
.priority-card--danger .priority-card__icon {
    background: color-mix(in srgb, #b3261e 14%, transparent); color: #b3261e;
}
.priority-card__count {
    font-family: var(--font-longform); font-weight: 300;
    font-size: 2.2rem; line-height: 1;
}
.priority-card__title {
    font-family: var(--font-longform); font-weight: 400;
    font-size: 1.08rem; margin: 0;
}
.priority-card__detail { margin: 0; font-size: 0.85rem; color: var(--theme-text-secondary); }
.priority-card__detail--alert { color: #b3261e; font-weight: 500; }
.priority-card__detail--alert i { margin-right: 0.3rem; }

.priority-list { list-style: none; margin: 0.2rem 0 0; padding: 0;
    display: flex; flex-direction: column; }
.priority-list li { border-top: 1px solid var(--theme-border-subtle); }
.priority-list li:first-child { border-top: none; }
.priority-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.5rem 0; text-decoration: none; color: inherit; min-height: 2.4rem;
}
.priority-list a:hover .priority-list__main { color: var(--brand-gold); }
.priority-list__main { font-size: 0.86rem; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
.priority-list__tag {
    flex: 0 0 auto; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.16rem 0.5rem; border-radius: 999px; color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-subtle);
}
.priority-list__tag--risk { color: #b3261e; border-color: color-mix(in srgb, #b3261e 40%, transparent); }

.priority-facts { list-style: none; margin: 0.2rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.4rem; }
.priority-facts li { font-size: 0.86rem; color: var(--theme-text-secondary); }
.priority-facts li i { color: var(--brand-gold); margin-right: 0.4rem; }
.priority-facts a { color: inherit; font-weight: 500; text-decoration: none; }
.priority-facts a:hover { color: var(--brand-gold); }
.priority-ver { font-size: 0.78rem; color: var(--theme-text-muted); margin: 0 0.5rem 0 0.4rem;
    font-variant-numeric: tabular-nums; }

.priority-card__cta {
    margin-top: auto; padding-top: 0.5rem; align-self: flex-start;
    font-size: 0.82rem; font-weight: 600; color: var(--brand-gold); text-decoration: none;
}
.priority-card__cta i { margin-left: 0.3rem; transition: transform 0.3s ease; }
.priority-card__cta:hover i { transform: translateX(3px); }

@media (max-width: 767px) {
    .priority-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }
    .priority-card {
        padding: 1rem 1.1rem;
        border-radius: 12px;
        gap: 0.4rem;
    }
    .priority-card__count {
        font-size: 1.75rem;
    }
    .priority-card__title {
        font-size: 1rem;
    }
    .priority-clear {
        padding: 1.1rem 1.2rem;
        border-radius: 12px;
        gap: 0.75rem;
    }
    .priority-clear h2 {
        font-size: 1.15rem;
    }
}

/* --- Manage lists: pagination + bulk selection --- */
.manage-pager {
    display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    flex-wrap: wrap; margin-top: 1.4rem;
}
/* The copy above a long table: same controls, tighter, and separated from the
   table head rather than from whatever preceded it. */
.manage-pager--top {
    margin-top: 0.35rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--theme-border-subtle);
}
.manage-pager__info { font-size: 0.82rem; color: var(--theme-text-muted);
    font-variant-numeric: tabular-nums; }
.manage-pager__size {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.8rem; color: var(--theme-text-muted);
}
.pager-size {
    font: inherit; font-size: 0.82rem; padding: 0.3rem 0.55rem; cursor: pointer;
    border-radius: 8px; border: 1px solid var(--theme-border-subtle);
    background: var(--theme-bg); color: var(--theme-text-primary);
}
.pager-size:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 1px; }

/* Custom-drawn so they stand out from the surface in both themes — the native
   control's unchecked state melts into the palette. `.av-check` is the shared
   app-wide checkbox (dialogs, consent boxes); the bulk-* classes reuse it. */
/* .av-check / .bulk-check / .bulk-check-all get their box from the canonical
   native-control rule at the end of this file — every checkbox and radio in the
   project shares one definition, so they cannot drift apart. Only the
   indeterminate state (the "some selected" dash) is specific to bulk-check-all. */
.bulk-check-all:indeterminate {
    background: var(--brand-gold); border-color: var(--brand-gold);
}
.bulk-check-all:indeterminate::after {
    content: ""; width: 0.62rem; border-top: 2.5px solid #2c3024;
}
.bulk-cell { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; }
.bulk-select-all {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
    font-size: 0.82rem; color: var(--theme-text-secondary); margin-bottom: 0.9rem;
    min-height: 2rem;
}
/* Order rows now navigate via data-href (the row is no longer one big <a>). */
.order-row[data-href] { cursor: pointer; }

.bulk-bar {
    position: sticky; bottom: 1rem; z-index: 5;
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    margin-top: 1.1rem; padding: 0.65rem 1rem;
    border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
    border-radius: 12px; background: var(--theme-bg);
    box-shadow: 0 14px 40px rgba(18, 22, 19, 0.18);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font-size: 0.85rem; color: var(--theme-text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulk-bar__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bulk-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
    padding: 0.45rem 0.85rem; min-height: 2.25rem; border-radius: 999px;
    border: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-sunken); color: var(--theme-text-primary);
    transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.bulk-btn:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.bulk-btn i { font-size: 0.85em; }
.bulk-btn--danger:hover {
    border-color: #b3261e; color: #b3261e;
    background: color-mix(in srgb, #b3261e 8%, transparent);
}
@media (max-width: 640px) {
    .bulk-check, .bulk-check-all { width: 1.5rem; height: 1.5rem; }
    .bulk-btn { min-height: 2.75rem; }
    .bulk-bar { bottom: 0.5rem; }
}

/* --- Panels / recent list --- */
.manage-panel {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    overflow: hidden;
}
.manage-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--theme-border-subtle);
}
.manage-panel__head h2 {
    font-family: var(--font-longform);
    font-weight: 300;
    font-size: 1.1rem;
    margin: 0;
}
.manage-link {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-gold);
    text-decoration: none;
}
.manage-link:hover { opacity: 0.8; }

.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.4rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--theme-border-subtle);
    transition: background 0.2s ease;
}
.recent-list li:last-child .recent-row { border-bottom: none; }
.recent-row:hover { background: var(--theme-surface-sunken); }
.recent-thumb {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-muted);
    overflow: hidden;
}
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.recent-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-sub { font-size: 0.78rem; color: var(--theme-text-muted); }
.recent-price { font-variant-numeric: tabular-nums; }

.recent-status {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.recent-status.is-on {
    color: #2f7d4f;
    background: color-mix(in srgb, #2f7d4f 12%, transparent);
}
.recent-status.is-off {
    color: var(--theme-text-muted);
    background: var(--theme-surface-sunken);
}

/* --- Empty states --- */
.manage-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--theme-text-muted);
}
.manage-empty > i { font-size: 2.4rem; color: var(--brand-gold); opacity: 0.7; }
.manage-empty p { margin: 0; }

/* --- Product list table --- */
.manage-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.manage-search { flex: 1 1 260px; max-width: 360px; }

.product-table {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    overflow: hidden;
}
.product-table__head,
.product-table__row {
    display: grid;
    /* Product (+type) · Details · Price · Unit prices · Stock · Status · Actions
       (actions widened for the ▲/▼ order arrows + the feature star) */
    grid-template-columns: 2.3fr 1.4fr 0.8fr 1.1fr 0.8fr 0.9fr 1.5fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
}
/* When stock tracking is off the Stock column is dropped (7 columns). */
.product-table--no-stock .product-table__head,
.product-table--no-stock .product-table__row {
    grid-template-columns: 2.4fr 1.6fr 0.8fr 1.2fr 1fr 0.9fr;
}
.product-table__head {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--theme-text-muted);
    background: var(--theme-surface-sunken);
    border-bottom: 1px solid var(--theme-border-subtle);
}
.product-table__row { border-bottom: 1px solid var(--theme-border-subtle); font-size: 0.9rem; }
.product-table__row:last-child { border-bottom: none; }
.product-table__row:hover { background: var(--theme-surface-sunken); }
.product-table .ta-right { text-align: right; justify-self: end; font-variant-numeric: tabular-nums; }
.product-table .ta-center { text-align: center; justify-self: center; }
.cell-product { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.cell-actions { display: inline-flex; gap: 0.1rem; justify-content: flex-end; align-items: center; }
/* ▲/▼ storefront-order arrows + the feature star in Manage → Products. */
.order-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; padding: 0;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
    color: var(--theme-text-muted); font-size: 0.82rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.order-btn:hover { color: var(--theme-text-primary); background: var(--theme-surface-sunken); }
/* Active toggle = a filled brand chip, so a live function reads *boldly* at a
   glance (the sprite glyphs carry their stroke-weight on the <symbol> and can't
   be re-weighted from here, so the weight comes from the fill). The glyph takes
   the page-background colour, which auto-contrasts on the brand fill in both the
   light and dark themes. Higher specificity than `.order-btn:hover`, so the fill
   holds on hover; brightness gives the hover cue. */
.order-btn.is-on {
    color: var(--theme-bg);
    background: var(--brand-gold);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--brand-gold) 40%, transparent);
}
.order-btn--promo.is-on {
    background: var(--brand-olive);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--brand-olive) 40%, transparent);
}
.order-btn.is-on:hover { filter: brightness(1.06); }
/* List → sale price, in the admin products table (matches the discounted rails). */
.price-was { text-decoration: line-through; color: var(--theme-text-muted); font-size: 0.86em; opacity: 0.85; }
.price-now { color: var(--brand-gold); font-weight: 600; }
.action-danger { color: #b3261e; }
.action-danger:hover { color: #8c1d18; }

/* --- Admin settings --- */
/* Settings rows are label + control pairs — 1080px keeps them scannable
   without the old 760px squint. Editors that lay out their own grids
   (the pages editor) take the full shell via --wide. */
.settings-form { max-width: 1080px; }
.settings-form--wide { max-width: none; }
.settings-intro { color: var(--theme-text-secondary); margin-bottom: 1.5rem; font-size: 0.95rem; }
.settings-card {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    overflow: hidden;
}
.settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
}
.settings-row__title { font-size: 1.05rem; font-weight: 650; margin: 0 0 0.4rem; }
.settings-row__desc { color: var(--theme-text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.settings-row__hint {
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    margin: 0.6rem 0 0;
    display: flex; align-items: flex-start; gap: 0.4rem;
}
.settings-row__switch { flex-shrink: 0; margin-top: 0.2rem; }
.settings-actions { margin-top: 1.5rem; }

/* ==========================================================================
   MANAGE → SETTINGS
   Uses the Security tab's language (.sec-workspace / .sec-card / .sec-toggle,
   defined further down). Only what Settings adds lives here: the tab strip, the
   collapsible card, its footer, and the sub-section rhythm inside a card.
   ========================================================================== */

.settings-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--theme-border-subtle);
    margin: 1.5rem 0 1.75rem;
    padding-bottom: 0.15rem;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
    flex: 0 0 auto;
    appearance: none; background: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 0.95rem; margin-bottom: -1px;
    font: inherit; font-size: 0.85rem;
    color: var(--theme-text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.settings-tab:hover { color: var(--theme-text-primary); }
.settings-tab.is-active {
    color: var(--theme-text-primary);
    border-bottom-color: var(--brand-gold);
    font-weight: 600;
}
.settings-tab:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: -2px;
    border-radius: 8px 8px 0 0;
}

/* --- the card ---------------------------------------------------------- */
/* Only geometry is overridden here. The SURFACE is whatever .sec-card already
   is (--theme-surface-sunken), because Settings and Security must look like the
   same console — an earlier pass gave Settings its own lighter card and the
   two tabs stopped matching. overflow:hidden lets the footer band run to both
   edges and still be clipped by the 16px radius. */
.settings-form .sec-card {
    padding: 0;
    overflow: hidden;
}

.sec-card__header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
}
.sec-card__header::-webkit-details-marker { display: none; }
.sec-card__header:hover { background: var(--theme-surface-hover); }
.sec-card__header:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: -2px;
}
.sec-card__header-icon {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-subtle);
    color: var(--brand-gold);
    font-size: 1.1rem;
}
.sec-card__header-text { flex: 1 1 auto; min-width: 0; }
.settings-form .sec-card__title {
    display: block;
    font-family: var(--font-longform, serif);
    font-size: 1.2rem; font-weight: 500;
    color: var(--theme-text-primary);
    line-height: 1.3;
}
.settings-form .sec-card__desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.84rem; line-height: 1.45;
    color: var(--theme-text-secondary);
}
.sec-card__chev {
    flex-shrink: 0;
    color: var(--theme-text-muted);
    transition: transform 0.2s ease;
}
.sec-card__disc[open] .sec-card__chev { transform: rotate(180deg); }

.sec-card__body { padding: 0 1.5rem 1.35rem; }

/* Footer: a tinted band across the full card, so the Save is unmistakably part
   of the card above it and never reads as belonging to the next section. */
/* The band is separated by its rule, not by a second surface colour — the card
   is already --theme-surface-sunken and repeating it said nothing, while a
   different colour drifted from the palette. */
.sec-card__foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-raised);
}
.sec-card.is-saved { animation: sec-card-saved 1.4s ease-out; }
@keyframes sec-card-saved {
    0%, 15% { border-color: var(--brand-gold); }
    100% { border-color: var(--theme-border-subtle); }
}

/* --- inside a card ------------------------------------------------------ */
/* Sections within a card are separated rather than touching. */
.sec-subsection + .sec-subsection,
.sec-subsection + .sec-toggle-grid,
.sec-toggle-grid + .sec-subsection {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--theme-border-subtle);
}
.sec-subsection__title {
    margin: 0 0 0.4rem;
    font-size: 0.92rem; font-weight: 650;
    color: var(--theme-text-primary);
    display: flex; align-items: center; gap: 0.4rem;
}

/* A settings row inside a card ALWAYS stacks: label and copy above, control
   below, both full width. As a flex row the control sat on the right and
   squeezed the description into a narrow strip — which is what "narrow-column
   text" was, on every card holding a picker. */
.sec-card .settings-row {
    display: block;
    padding: 0;
}
.sec-card .settings-row__text { max-width: 68ch; }
.sec-card .settings-row__switch {
    margin-top: 0.85rem;
    min-width: 0 !important;
    width: 100%;
}
.sec-card .settings-row__desc { font-size: 0.88rem; line-height: 1.6; }

/* Pickers fill the row and lay their options out across the width available
   rather than in one tall column. */
.media-load-pick,
.mobile-layout-pick,
.theme-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.6rem;
    width: 100%;
}
.media-load-pick .theme-pick__opt,
.mobile-layout-pick .theme-pick__opt,
.theme-pick .theme-pick__opt {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px;
    background: var(--theme-surface-sunken);
    cursor: pointer;
}
.settings-pick__desc {
    font-size: 0.8rem; line-height: 1.5;
    color: var(--theme-text-muted);
    margin-top: 0.15rem;
}

/* Free-text areas were unstyled browser default next to styled inputs. */
.sec-card textarea,
.sec-card input[type="text"],
.sec-card input[type="email"],
.sec-card input[type="url"],
.sec-card input[type="number"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px;
    background: var(--theme-surface-sunken);
    color: var(--theme-text-primary);
    font: inherit; font-size: 0.9rem;
    line-height: 1.5;
}
.sec-card textarea { min-height: 5.5rem; resize: vertical; }
.sec-card textarea:focus-visible,
.sec-card input:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 1px;
}

.sec-card--danger { border-color: color-mix(in srgb, #b3261e 45%, var(--theme-border-subtle)); }
.sec-card--danger .sec-card__header-icon { color: #b3261e; }
.set-title--danger { color: #b3261e; }

.sec-toggle__hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.76rem; line-height: 1.5;
    color: var(--theme-text-muted);
}
.sec-toggle__hint code { word-break: break-all; font-size: 0.95em; }

/* --- Manage Shared Tables & Cards (Pages, Nav, Settings) ---------------- */
.pages-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.settings-card--padded { padding:1.5rem 1.6rem; }
.terms-history__wrap { overflow-x:auto; }
.terms-history { width:100%; border-collapse:collapse; font-size:.82rem; }
.terms-history th { text-align:left; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--theme-text-muted); padding:.45rem .7rem; border-bottom:1px solid var(--theme-border-subtle); }
.terms-history td { padding:.55rem .7rem; border-bottom:1px solid var(--theme-border-subtle);
  color:var(--theme-text-primary); white-space:nowrap; }
.terms-badge { display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.14rem .45rem; border-radius:5px;
  background:var(--theme-surface-sunken); border:1px solid var(--theme-border-subtle);
  color:var(--theme-text-muted); }
.terms-badge--live { color:#1a1408; background:color-mix(in srgb, var(--brand-gold) 88%, white 12%);
  border-color:transparent; }

/* --- FAQ editor (Discoverability) --------------------------------------- */
/* Rows of question + answer in both languages. Each row is a bordered block so
   a long list stays scannable, and the two languages sit side by side on a
   wide screen and stack on a phone. */
.faq-edit { list-style: none; margin: 0; padding: 0; display: flex;
            flex-direction: column; gap: 1rem; }
.faq-edit__row {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 12px;
    padding: 1rem;
    background: var(--theme-surface-raised);
}
.faq-edit__row--new { border-style: dashed; }
.faq-edit__newhead {
    margin: 0 0 0.75rem;
    font-size: 0.82rem; font-weight: 650; letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
}
.faq-edit__head {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.faq-edit__ord { display: flex; align-items: center; gap: 0.45rem; }
.faq-edit__ord input { width: 5rem; }
.faq-edit__pub { margin-inline-end: auto; }
.faq-edit__del { color: #b3261e; }
.faq-edit__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.6rem 0.85rem;
}
.faq-edit__pair + .faq-edit__pair { margin-top: 0.6rem; }
.faq-edit__f { display: flex; flex-direction: column; gap: 0.3rem; }
.faq-edit__lbl {
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
}
.faq-edit__note {
    margin: 0.7rem 0 0;
    font-size: 0.78rem; color: var(--theme-text-muted);
}

@media (max-width: 767px) {
    .settings-tab { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
    .sec-card__header { padding: 1rem 1.1rem; }
    .sec-card__body { padding: 0 1.1rem 1.1rem; }
    .sec-card__foot { padding: 0.8rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sec-card.is-saved { animation: none; }
    .sec-card__chev { transition: none; }
}

@media (max-width: 767px) {
    .settings-tab { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
    .sec-card__foot { margin: 1.1rem -1.15rem -1.15rem; padding: 0.8rem 1.15rem; }
    /* Rows that are still the old label+control pair must stack, or the
       description is squeezed beside the switch. Inline min-widths in the
       markup fight this, so they are overridden here. */
    .sec-card .settings-row { flex-direction: column; gap: 0.9rem; align-items: stretch; }
    .sec-card .settings-row__switch { margin-top: 0; align-self: flex-start; }
    .sec-card .settings-row__switch[style] { min-width: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sec-card.is-saved { animation: none; }
}

@media (max-width: 767px) {
    /* The row inside a card must stack, or the description is squeezed into a
       ~40% column beside the switch. Inline min-widths in the markup fight
       this, so they are overridden here rather than in thirty attributes. */
    .set-card .settings-row { flex-direction: column; gap: 0.9rem; align-items: stretch; }
    .settings-row__switch { margin-top: 0; align-self: flex-start; }
    .set-card .settings-row__switch[style] { min-width: 0 !important; }
    .set-card { padding: 1.15rem; }
    .set-card__foot { margin: 1.1rem -1.15rem -1.15rem; padding: 0.8rem 1.15rem; }
    .settings-tab { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .set-card.is-saved { animation: none; }
}
@media (max-width: 640px) {
    .settings-row { flex-direction: column; gap: 1rem; }
}

/* --- Forms --- */
.manage-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--theme-text-muted);
    margin-bottom: 1.5rem;
}
.manage-back:hover { color: var(--theme-text-primary); }

.product-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}
.product-form__main { display: flex; flex-direction: column; gap: 2rem; }

.form-section {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    padding: 1.5rem;
}
.form-section__title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--theme-text-muted);
    margin: 0 0 1.25rem;
}
.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }
.field-row {
    display: grid;
    /* min(150px, 100%) — a bare 150px floor can't shrink below its track on a
       narrow phone and pushes the form off-screen; this lets the last column
       collapse to the container instead. */
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 1rem;
}
.field--switch { margin-top: 0.5rem; }
.field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.field-optional {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border-subtle);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}
.field-hint { font-size: 0.75rem; color: var(--theme-text-muted); margin: 0.4rem 0 0; }
.field-error { font-size: 0.78rem; color: #b3261e; margin: 0.4rem 0 0; }

.image-field { display: flex; gap: 1rem; align-items: center; }
.image-field__preview {
    width: 72px; height: 72px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-muted);
    font-size: 1.4rem;
    overflow: hidden;
}
.image-field__preview img { width: 100%; height: 100%; object-fit: cover; }
.image-field__input { flex: 1; }
.image-field__input input[type="file"] { font-size: 0.85rem; color: var(--theme-text-secondary); max-width: 100%; }

.product-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* --- Live summary aside --- */
.product-form__aside { position: sticky; top: 7rem; }
.summary-card {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    padding: 1.5rem;
    background: var(--theme-surface-sunken);
}
.summary-card__eyebrow {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brand-gold);
    margin: 0 0 0.5rem;
}
.summary-card__caption {
    font-family: var(--font-longform);
    font-size: 1.15rem;
    font-weight: 300;
    margin: 0 0 0.5rem;
    min-height: 1.6em;
}
.summary-card__list { margin: 1rem 0 0; padding: 0; }
.summary-card__list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--theme-border-subtle);
}
.summary-card__list > div:last-child { border-bottom: none; }
.summary-card__list dt { font-size: 0.82rem; color: var(--theme-text-secondary); margin: 0; }
.summary-card__list dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.summary-card__note {
    font-size: 0.74rem;
    color: var(--theme-text-muted);
    margin: 1rem 0 0;
    line-height: 1.5;
}
.summary-card__note i { color: var(--brand-gold); margin-right: 0.3rem; }

/* --- Delete confirmation --- */
.confirm-card {
    max-width: 480px;
    margin: 1rem auto 0;
    text-align: center;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 16px;
    padding: 2.5rem 2rem;
}
.confirm-card__icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.25rem;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #b3261e;
    background: color-mix(in srgb, #b3261e 10%, transparent);
}
.confirm-card h2 {
    font-family: var(--font-longform);
    font-weight: 300;
    margin: 0 0 0.5rem;
}
.confirm-card__sub { color: var(--theme-text-secondary); margin: 0 0 1rem; }
.confirm-card__warn { font-size: 0.85rem; color: var(--theme-text-muted); margin: 0 0 1.75rem; }
.confirm-card__actions { display: flex; gap: 0.75rem; justify-content: center; }

/* --- Responsive Product Table (< 860px) --- */
@media (max-width: 860px) {
    .product-form__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .product-form__aside { position: static; }
    .product-table__head { display: none !important; }
    .product-table {
        border: none;
        background: transparent;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }
    .product-table__row {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        padding: 1rem 1.15rem;
        background: var(--theme-surface-sunken);
        border: 1px solid var(--theme-border-subtle);
        border-radius: 14px;
        box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
        font-size: 0.88rem;
    }
    .product-table__row:hover {
        background: var(--theme-surface-raised, var(--theme-surface-sunken));
    }
    
    /* Top: Product info with room for the absolute status badge */
    .product-table__row .cell-product {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
        box-sizing: border-box;
        padding-right: 6.5rem; /* leaves space for top-right status pill */
    }
    .product-table__row .cell-product .bulk-check {
        margin: 0;
        flex-shrink: 0;
    }
    .product-table__row .cell-product .recent-thumb {
        flex-shrink: 0;
        width: 2.4rem;
        height: 2.4rem;
    }
    .product-table__row .cell-product .recent-main {
        flex: 1;
        min-width: 0;
    }
    .product-table__row .cell-product .recent-title {
        font-size: 0.98rem;
        font-weight: 600;
        color: var(--theme-text-primary);
        line-height: 1.35;
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    .product-table__row .cell-product .recent-sub {
        font-size: 0.76rem;
        color: var(--theme-text-muted);
        display: block;
        margin-top: 0.15rem;
    }
    
    /* Status pill pinned to top right of the card */
    .product-table__row .cell-status {
        position: absolute;
        top: 1rem;
        right: 1.15rem;
        z-index: 2;
        margin: 0;
        text-align: right;
    }
    
    /* Caption details (full width) */
    .product-table__row .cell-caption {
        width: 100%;
        font-size: 0.84rem;
        color: var(--theme-text-secondary);
        line-height: 1.45;
        word-break: break-word;
        white-space: normal;
        padding: 0.15rem 0 0;
    }
    
    /* Price & Unit prices */
    .product-table__row .cell-price {
        width: 100%;
        text-align: left;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--theme-text-primary);
        margin-top: 0.15rem;
    }
    .product-table__row .cell-unit-prices {
        width: 100%;
        font-size: 0.8rem;
        color: var(--theme-text-muted);
        text-align: left;
        margin-top: -0.25rem;
    }
    .product-table__row .cell-stock {
        align-self: flex-start;
        margin-top: 0.1rem;
    }
    
    /* Action toolbar - full width touch-friendly button row */
    .product-table__row .cell-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        width: 100%;
        box-sizing: border-box;
        padding-top: 0.7rem;
        margin-top: 0.35rem;
        border-top: 1px solid var(--theme-border-subtle);
    }
    .product-table__row .cell-actions .order-btn,
    .product-table__row .cell-actions .btn {
        flex: 1 1 0;
        height: 2.35rem;
        min-width: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--theme-surface);
        border: 1px solid var(--theme-border-subtle);
        color: var(--theme-text-muted);
        font-size: 0.88rem;
        text-decoration: none;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }
    .product-table__row .cell-actions .order-btn:hover,
    .product-table__row .cell-actions .btn:hover {
        color: var(--theme-text-primary);
        border-color: color-mix(in srgb, var(--brand-gold) 60%, var(--theme-border-subtle));
        background: var(--theme-surface-sunken);
    }
    .product-table__row .cell-actions .order-btn.is-on {
        background: var(--brand-gold);
        color: #121913;
        border-color: var(--brand-gold);
    }
    .product-table__row .cell-actions .action-danger:hover {
        color: #b02018;
        border-color: color-mix(in srgb, #b02018 60%, transparent);
        background: color-mix(in srgb, #b02018 10%, transparent);
    }
}
@media (max-width: 640px) {
    .form-section { padding: 1rem 1.1rem; border-radius: 12px; }
    .product-table__row { padding: 0.9rem 1rem; }
    .product-table__row .cell-status { top: 0.9rem; right: 1rem; }
    .product-table__row .cell-product { padding-right: 6.2rem; }
    .product-table__row .cell-actions .order-btn,
    .product-table__row .cell-actions .btn { height: 2.35rem; font-size: 0.88rem; }
}

/* =====================================================================
   Order management (admin preview)
   ===================================================================== */

.inline-form { display: inline-block; margin-left: 0.5rem; }
.muted { color: var(--theme-text-muted); }
.soon {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
    opacity: 0.7; margin-left: 0.35rem;
}
.tag {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0.15rem 0.45rem; border-radius: 999px;
    border: 1px solid var(--theme-border-subtle); color: var(--theme-text-muted);
}
.tag--ghost { background: var(--theme-surface-sunken); }
.tag--gold {
    color: var(--brand-gold);
    border-color: color-mix(in srgb, var(--brand-gold) 45%, transparent);
    background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
}

/* --- Filters --- */
.order-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.order-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.85rem; border-radius: 999px;
    border: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-secondary); text-decoration: none;
    font-size: 0.82rem; transition: all 0.2s ease;
}
.order-chip span {
    font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--theme-text-primary);
}
.order-chip:hover { border-color: var(--brand-gold); }
.order-chip.is-active {
    border-color: var(--brand-gold);
    background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

/* --- Order table (extends .product-table) --- */
.order-table .product-table__head,
.order-table .product-table__row {
    grid-template-columns: 1fr 1.6fr 1fr 1.3fr 0.9fr 1fr 0.5fr;
}
.order-row { text-decoration: none; color: inherit; }
/* Stack the order number and its type tags (Tasting / Guest) so a long tag
   label ("Degustazione") never squeezes the number into an ellipsis. */
.order-cell-id { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.order-cell-id .tag { max-width: 100%; }
.order-muted { color: var(--theme-text-muted); font-size: 0.85rem; }
.order-flags { display: inline-flex; gap: 0.5rem; justify-content: center; font-size: 0.95rem; }
.flag { color: var(--theme-text-muted); }
.flag--review { color: #b5862a; }
.flag--edd { color: #b3261e; }
.flag--warn { color: #c2410c; }

/* --- Detail header --- */
.order-head {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem;
}
.order-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.order-head__title h2 {
    font-family: var(--font-longform); font-weight: 300;
    font-size: 1.8rem; margin: 0;
}
.order-head__meta { color: var(--theme-text-muted); font-size: 0.85rem; margin: 0.4rem 0 0; }
.order-head__total { text-align: right; }
.order-head__total-label {
    display: block; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--theme-text-muted);
}
.order-head__total-value {
    font-family: var(--font-longform); font-weight: 300;
    font-size: 1.8rem; font-variant-numeric: tabular-nums;
}

/* --- Detail layout --- */
.order-grid {
    display: grid; grid-template-columns: minmax(0,1fr) 320px;
    gap: 1.5rem; align-items: start;
}
.order-main, .order-aside { display: flex; flex-direction: column; gap: 1.5rem; }

.order-panel {
    border: 1px solid var(--theme-border-subtle); border-radius: 14px; padding: 1.3rem 1.4rem;
}
.order-panel--accent {
    border-color: color-mix(in srgb, var(--brand-gold) 45%, transparent);
    background: color-mix(in srgb, var(--brand-gold) 7%, transparent);
}
.order-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem;
}
.order-panel__head h3 {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--theme-text-muted); margin: 0; font-family: var(--font-body); font-weight: 600;
}
.order-panel__head h3 i { color: var(--brand-gold); margin-right: 0.4rem; }
.order-panel__body { margin: 0; color: var(--theme-text-secondary); font-size: 0.9rem; }
.order-panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.order-panel__actions form { display: inline; }

.link-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--brand-gold); font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.08em;
}
.link-btn:hover { opacity: 0.8; }

/* --- Timeline --- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.timeline__step { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.timeline__step:not(:last-child)::after {
    content: ""; width: 1.1rem; height: 1px; background: var(--theme-border-subtle); margin: 0 0.25rem;
}
.timeline__dot {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.7rem; border: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-muted); background: var(--theme-surface-sunken);
}
.timeline__label { font-size: 0.78rem; color: var(--theme-text-muted); }
.timeline__step.is-done .timeline__dot { color: #2f7d4f; border-color: color-mix(in srgb,#2f7d4f 40%,transparent); }
.timeline__step.is-current .timeline__dot {
    color: #fff; background: var(--brand-gold); border-color: var(--brand-gold);
}
.timeline__step.is-current .timeline__label { color: var(--theme-text-primary); font-weight: 600; }
.timeline__note { font-size: 0.8rem; color: var(--theme-text-muted); margin: 0.85rem 0 0; }

/* --- Lines / totals --- */
.order-lines { display: flex; flex-direction: column; }
.order-line {
    position: relative;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.7rem 0; border-bottom: 1px solid var(--theme-border-subtle);
}
.order-line:last-child { border-bottom: none; }
.order-line__main { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
/* margin-left:auto pins every amount to the same right edge — product lines,
   custom (adjustment) lines and the totals summary all align. */
.order-line__total { font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }

/* --- Order VAT selector pills & badges --- */
.item-vat-form { margin-top: 0.25rem; display: inline-flex; align-items: center; }
.order-vat-pills {
    display: inline-flex; align-items: center; gap: 0.2rem;
    background: var(--theme-surface-sunken);
    padding: 0.15rem 0.35rem; border-radius: 9999px;
    border: 1px solid var(--theme-border-subtle);
    width: fit-content;
}
.order-vat-label {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--theme-text-muted);
    margin: 0 0.2rem 0 0.1rem;
}
.order-vat-pill {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    padding: 0.12rem 0.5rem; font-size: 0.75rem; font-weight: 500;
    font-variant-numeric: tabular-nums; border-radius: 9999px; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    color: var(--theme-text-secondary); user-select: none;
}
.order-vat-pill input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.order-vat-pill:hover {
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.05));
    color: var(--theme-text-primary);
}
.order-vat-pill--active {
    background: var(--theme-surface-raised, #ffffff);
    color: var(--theme-brand-accent, #9a7330);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border-subtle);
}
.order-vat-badge {
    display: inline-block; margin-top: 0.25rem; padding: 0.12rem 0.45rem;
    font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums;
    border-radius: 9999px; background: var(--theme-surface-sunken);
    color: var(--theme-text-muted); border: 1px solid var(--theme-border-subtle);
    width: fit-content;
}

.order-totals { margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--theme-border-subtle); }
.order-totals--compact { border: none; padding: 0; margin: 0.5rem 0; }
.order-totals > div {
    display: flex; align-items: baseline; justify-content: space-between; padding: 0.3rem 0;
}
.order-totals dt { margin: 0; color: var(--theme-text-secondary); font-size: 0.9rem; }
.order-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.order-totals__grand dt, .order-totals__grand dd {
    font-weight: 600; color: var(--theme-text-primary); font-size: 1.05rem;
    padding-top: 0.4rem;
}

/* --- Tracking --- */
.track-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.track-code {
    font-family: var(--font-code); font-size: 0.92rem;
    background: var(--theme-surface-sunken); padding: 0.3rem 0.6rem; border-radius: 8px;
}

/* --- KYC --- */
.kyc { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.kyc > div { display: flex; flex-direction: column; gap: 0.1rem; }
.kyc dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-text-muted); margin: 0; }
.kyc dd { margin: 0; font-size: 0.92rem; word-break: break-word; }
.kyc-address {
    font-style: normal;
    line-height: 1.45;
    margin: 0;
    color: inherit;
    word-break: break-word;
}

/* --- Activity --- */
.activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.activity li { display: flex; gap: 0.75rem; align-items: flex-start; }
.activity__icon {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    background: var(--theme-surface-sunken); border: 1px solid var(--theme-border-subtle);
    color: var(--brand-gold); font-size: 0.72rem;
}
.activity__body { display: flex; flex-direction: column; }
.activity__label { font-size: 0.88rem; }
.activity__when { font-size: 0.72rem; color: var(--theme-text-muted); }

.order-aside__actions { display: flex; flex-direction: column; gap: 0.6rem; }

/* --- Dialog forms --- */
.dialog-form { display: flex; flex-direction: column; gap: 1rem; }
.dialog-hint { font-size: 0.85rem; color: var(--theme-text-muted); margin: 0; }
.dialog-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; line-height: 1.4; cursor: pointer; }
.dialog-check input { margin-top: 0.15rem; }
.dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* --- Customer quote page --- */
.quote-page { max-width: 620px; margin: 0 auto; padding: 8rem 1.5rem 4rem; }
.quote-card { border: 1px solid var(--theme-border-subtle); border-radius: 16px; padding: 2.2rem; }
.quote-eyebrow {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--brand-gold); margin: 0 0 0.4rem;
}
.quote-title { font-family: var(--font-longform); font-weight: 300; margin: 0; }
.quote-sub { color: var(--theme-text-muted); font-size: 0.9rem; margin: 0.35rem 0 1.5rem; }
.quote-lines { border-top: 1px solid var(--theme-border-subtle); }
.quote-note { font-size: 0.85rem; color: var(--theme-text-secondary); margin: 1.25rem 0; line-height: 1.55; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
.quote-actions form { display: inline; }

/* Payment options (card / bank transfer / decline) — a ranked, single-column
   stack: every button is the SAME full width and the SAME height (all btn-lg),
   so the set reads as symmetric and consistent; the hierarchy comes from fill,
   not size (solid card > outline bank transfer > ghost decline). Shared by the
   quote page, the public order-status page and the account order page. */
.pay-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.pay-options > form { margin: 0; }
.pay-options > form > .btn,
.pay-options > details > summary {
    width: 100%; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; text-align: center;
}
.pay-options > details { margin: 0; }
.pay-options > details > summary { cursor: pointer; list-style: none; }
.pay-options > details > summary::-webkit-details-marker { display: none; }
.pay-options > details[open] > summary { margin-bottom: 0.6rem; }
.pay-options__bank-body {
    text-align: left; padding: 1rem 1.25rem;
    border: 1px solid var(--tone-warning-border, rgba(207, 161, 63, 0.5));
    border-radius: 0.5rem;
}
.pay-options__bank-body form { margin: 0.25rem 0 0; }
.pay-options__bank-body .btn { width: 100%; box-sizing: border-box; }

/* --- Responsive --- */
@media (max-width: 860px) {
    .order-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .order-table .product-table__head { display: none; }
    .order-table .product-table__row {
        grid-template-columns: 1fr auto; gap: 0.4rem 0.75rem; padding: 0.85rem 1rem;
    }
    .order-table .order-cell-id { grid-column: 1; }
    .order-table .recent-main { grid-column: 1 / -1; }
    .order-table .ta-right, .order-table .ta-center { justify-self: start; text-align: left; }
}
@media (max-width: 640px) {
    .order-panel { padding: 1rem 1.1rem; border-radius: 12px; }
    .order-table .product-table__row { padding: 0.75rem 0.85rem; }
    .order-head__title h2 { font-size: 1.45rem; }
    .order-head__total-value { font-size: 1.45rem; }
}

/* KYC field tags (residence = KYC only; ship-to = routes the flow) */
.kyc-tag {
    font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.05rem 0.35rem; border-radius: 999px; margin-left: 0.35rem;
    border: 1px solid var(--theme-border-subtle); color: var(--theme-text-muted);
    vertical-align: middle;
}
.kyc-tag--route {
    color: var(--brand-gold);
    border-color: color-mix(in srgb, var(--brand-gold) 45%, transparent);
}

/* Stock badges (product manager list) */
.stock-badge {
    display: inline-block; font-size: 0.72rem; font-variant-numeric: tabular-nums;
    padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.stock-badge--in {
    color: var(--theme-text-secondary); background: var(--theme-surface-sunken);
}
.stock-badge--low {
    color: #b5862a; background: color-mix(in srgb, #b5862a 12%, transparent);
    border-color: color-mix(in srgb, #b5862a 35%, transparent);
}
.stock-badge--out {
    color: #b3261e; background: color-mix(in srgb, #b3261e 12%, transparent);
    border-color: color-mix(in srgb, #b3261e 35%, transparent);
}

/* Storefront stock badge (product grid / detail) — see shop/_stock_badge.html */
.shop-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.32rem 0.72rem; border-radius: 999px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* Fixed (theme-independent) text colours so contrast holds in light AND dark. */
.shop-badge--out { color: #fff; background: rgba(176, 32, 24, 0.96); }
.shop-badge--low { color: #2a2008; background: rgba(214, 167, 64, 0.98); }

/* Custom line items (order workspace) */
.order-line--adj { color: var(--theme-text-secondary); }
/* Float the remove button into the panel's right padding so the amount stays
   aligned with the other line totals instead of being pushed left. */
.adj-del { position: absolute; right: -1.1rem; top: 50%; transform: translateY(-50%); margin: 0; line-height: 1; }
.adj-del .link-btn { color: var(--theme-text-muted); }
.adj-row {
    display: grid; grid-template-columns: 1fr 0.5fr; gap: 0.6rem; margin-bottom: 0.6rem;
}
#adj-add { margin-top: 0.2rem; }

/* =====================================================================
   STOREFRONT — product grid, cards, product detail (PDP), cart
   Elegant, minimal, responsive. Animations stay subtle and respect
   prefers-reduced-motion via the existing `html.motion-disabled` switch.
   ===================================================================== */

/* --- Layout shells (detail + cart pages) --- */
.shop-page { padding: 7.5rem 1.5rem 6rem; min-height: 70vh; position: relative; }
.shop-wrap { max-width: 72rem; margin: 0 auto; position: relative; z-index: 1; }
.shop-wrap--narrow { max-width: 56rem; }
.shop-breadcrumb { margin-bottom: 2rem; }
.shop-breadcrumb a {
    color: var(--theme-text-secondary); text-decoration: none; font-size: 0.85rem;
    letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.5rem;
    transition: color 0.3s ease;
}
.shop-breadcrumb a:hover { color: var(--brand-gold); }

/* --- Product grid --- */
.shop-grid { display: grid; gap: 2rem; }
.shop-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .shop-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shop-grid--3 { grid-template-columns: 1fr; } }

/* --- Featured products (starred in Manage → Products) ----------------------
   In the catalogue grid the starred card takes a full row, laid out as a wide
   banner (photo beside the copy) with a gold treatment. On phones the grid is
   one column anyway, so the highlight — gold border + star — does the work. */
.shop-card__star {
    position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
    display: inline-grid; place-items: center;
    width: 1.8rem; height: 1.8rem; border-radius: 999px;
    background: var(--brand-gold); color: #2c3024; font-size: 0.72rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
#catalog-grid .shop-card.is-featured {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--brand-gold) 55%, transparent);
    box-shadow: 0 10px 34px color-mix(in srgb, var(--brand-gold) 16%, transparent);
}
@media (min-width: 601px) {
    #catalog-grid .shop-card.is-featured { flex-direction: row; align-items: stretch; }
    #catalog-grid .shop-card.is-featured .shop-card__media {
        flex: 0 0 44%; width: 44%; aspect-ratio: auto; min-height: 18rem;
    }
    #catalog-grid .shop-card.is-featured .shop-card__body {
        flex: 1 1 auto; justify-content: center;
    }
}

/* --- La vetrina: promoted products as invitation tickets ------------------
   feature_level PROMO items (the tasting, the label studio…) sit at the top
   of the shop as wide tickets, replacing the old one-line <details> rail:
   the product's own photo (or the olive sprig, when none is uploaded) in
   the stub window, a perforated gold edge with punched notches — an
   admission ticket, which is what a bookable experience IS — and the whole
   ticket is ONE link to its destination (no expand step between the visitor
   and the service). Hover (fine pointers): the ticket lifts, the photo
   breathes, the perforation brightens, the eyebrow tracking opens, the
   arrow slides; all of it parks for reduced-motion and the motion switch. */
.vetrina { display: grid; gap: 1.1rem; margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(34rem, 100%), 1fr)); }
.vetrina__ticket { position: relative; display: grid;
    grid-template-columns: clamp(6.5rem, 18vw, 11rem) auto 1fr;
    align-items: stretch; text-decoration: none; overflow: hidden;
    border-radius: 16px;
    background: color-mix(in srgb, var(--brand-gold) 6%, var(--theme-surface-sunken-solid));
    border: 1px solid color-mix(in srgb, var(--brand-gold) 32%, transparent);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease,
                border-color 0.4s ease;
}
/* Light theme: the gold-tinted plate pulled the small gold eyebrow/CTA (and
   the muted blurb) under WCAG AA — on plain ivory they clear ~4.9:1. Dark
   keeps the tinted plate: its light gold sits at ~7:1 there. */
html.theme-light .vetrina__ticket { background: var(--theme-bg); }
.vetrina__window { position: relative; overflow: hidden; min-height: 7.5rem;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brand-olive) 10%, transparent);
}
.vetrina__window img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: scale 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.vetrina__sprig { width: 72%; max-width: 7rem; color: var(--brand-olive); opacity: 0.5; }
.vetrina__sprig svg { display: block; width: 100%; height: auto; }
.vetrina__sprig .cv-branch__olives { fill: var(--brand-gold); }
/* The perforation: a dotted gold rule with punched notches top and bottom —
   the notch circles are filled with the page background, so the ticket edge
   reads as die-cut in both themes. Deliberate trade: the ticket's hairline
   border still runs across each notch mouth (an embossed-dimple read) — a
   true cut needs a mask on the ticket, and a mask clips the hover glow along
   with everything else painted outside it (masks clip box-shadows). */
.vetrina__stub { position: relative; width: 0;
    border-left: 2px dotted color-mix(in srgb, var(--brand-gold) 45%, transparent);
    transition: border-color 0.4s ease;
}
.vetrina__stub::before, .vetrina__stub::after { content: "";
    position: absolute; left: -8px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--theme-bg);
    border: 1px solid color-mix(in srgb, var(--brand-gold) 32%, transparent);
}
.vetrina__stub::before { top: -8px; }
.vetrina__stub::after { bottom: -8px; }
.vetrina__body { display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1.1rem 1.3rem 1.15rem; min-width: 0; }
.vetrina__eyebrow { font-family: var(--font-code, monospace);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--brand-gold);
    transition: letter-spacing 0.5s ease; }
.vetrina__title { font-family: var(--font-longform, serif);
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.3;
    color: var(--theme-text-primary); }
.vetrina__blurb { font-size: 0.88rem; color: var(--theme-text-muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
.vetrina__cta { margin-top: auto; padding-top: 0.5rem; display: inline-flex;
    align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-gold); }
.vetrina__arrow { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (pointer: fine) {
    .vetrina__ticket:hover { transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--brand-gold) 65%, transparent);
        box-shadow: 0 16px 40px color-mix(in srgb, var(--brand-gold) 16%, transparent); }
    .vetrina__ticket:hover .vetrina__window img { scale: 1.08; }
    .vetrina__ticket:hover .vetrina__stub { border-color: var(--brand-gold); }
    .vetrina__ticket:hover .vetrina__eyebrow { letter-spacing: 0.3em; }
    .vetrina__ticket:hover .vetrina__arrow { transform: translateX(6px); }
}
.vetrina__ticket:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .vetrina__ticket, .vetrina__window img, .vetrina__arrow, .vetrina__eyebrow,
    .vetrina__stub { transition: none; }
    .vetrina__ticket:hover { transform: none; }
    .vetrina__ticket:hover .vetrina__window img { scale: 1; }
    .vetrina__ticket:hover .vetrina__eyebrow { letter-spacing: 0.22em; }
}
/* The site's own motion switch parks the SAME set the media query does —
   it's independent of the OS preference, so it needs its own mirror. */
html.motion-disabled .vetrina__ticket, html.motion-disabled .vetrina__window img,
html.motion-disabled .vetrina__arrow, html.motion-disabled .vetrina__eyebrow,
html.motion-disabled .vetrina__stub { transition: none; }
html.motion-disabled .vetrina__ticket:hover { transform: none; }
html.motion-disabled .vetrina__ticket:hover .vetrina__window img { scale: 1; }
html.motion-disabled .vetrina__ticket:hover .vetrina__eyebrow { letter-spacing: 0.22em; }
@media (max-width: 560px) {
    .vetrina__ticket { grid-template-columns: clamp(5.5rem, 26vw, 7rem) auto 1fr; }
    .vetrina__body { padding: 0.85rem 1rem 0.9rem; }
}

/* Tasting / label-service cards: a link-out, no price line — keep the CTA
   anchored to the bottom like the add-to-cart button it stands in for. */
#catalog-grid .shop-card.is-experience .shop-card__foot--experience {
    display: flex; margin-top: auto; padding-top: 0.4rem;
}

/* Gentle stagger for cards as they reveal */
.shop-grid .shop-card:nth-child(2) { transition-delay: 0.08s; }
.shop-grid .shop-card:nth-child(3) { transition-delay: 0.16s; }
.shop-grid .shop-card:nth-child(4) { transition-delay: 0.08s; }
.shop-grid .shop-card:nth-child(5) { transition-delay: 0.16s; }
.shop-grid .shop-card:nth-child(6) { transition-delay: 0.24s; }

.shop-empty {
    text-align: center; padding: 4rem 1rem; color: var(--theme-text-muted);
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
/* Direct child only: the decorative icon. Avoids leaking size/colour onto
   icons inside nested buttons (e.g. the gold "Back home" arrow). */
.shop-empty > i { font-size: 2.5rem; color: var(--brand-gold); opacity: 0.7; }

/* --- Product card --- */
.shop-card {
    display: flex; flex-direction: column;
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 1.25rem; overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.5s cubic-bezier(0.16,1,0.3,1),
                border-color 0.5s ease, opacity 1.4s cubic-bezier(0.16,1,0.3,1);
}
.shop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0,0,0,0.14);
    border-color: color-mix(in srgb, var(--brand-gold) 35%, transparent);
}
.shop-card__media {
    position: relative; display: block; aspect-ratio: 4 / 5;
    /* No colour of its own. An opaque --theme-bg well is *lighter* than the card it sits
       in, so every photo used to sit in a white rectangle. Transparent means the well is
       the card, exactly, and can never drift from it. */
    overflow: hidden; background: transparent;
}

/* One warm wash over photographs, so a shot taken on cold studio white still belongs to
   this page. Cut-outs and the branded placeholder are excluded: they already float on a
   gold radial glow, and washing them too would stack the same tint twice — precisely the
   bug that turned the filter header into a grey band. */
.shop-card__media:not(:has(.is-cutout)):not(:has(.product-img-ph))::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: var(--media-wash);
    pointer-events: none;
}
.shop-card__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
}
.shop-card:hover .shop-card__img { transform: scale(1.06); }
.shop-card.is-sold-out .shop-card__img { filter: grayscale(0.55) brightness(0.82); }
.shop-card__type { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; }
.shop-card__stock { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; }
.shop-card__veil {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff; background: rgba(18,22,19,0.28);
    backdrop-filter: blur(1px); z-index: 1;
}
.shop-card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.3rem 1.4rem 1.4rem; flex: 1; }
.shop-card__titlelink { text-decoration: none; color: inherit; }
.shop-card__title {
    font-family: Aleo, serif; font-size: 1.2rem; font-weight: 500; line-height: 1.25;
    transition: color 0.3s ease;
}
.shop-card__titlelink:hover .shop-card__title { color: var(--brand-gold); }
.shop-card__caption {
    color: var(--theme-text-muted); font-size: 0.78rem; letter-spacing: 0.03em;
    margin-top: -0.25rem;
}
.shop-card__foot {
    margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--theme-border-subtle);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem;
}

/* --- Price block --- */
.shop-price { display: flex; flex-direction: column; gap: 0.1rem; }
.shop-price__amount {
    font-family: "Geist Mono", monospace; font-weight: 700; font-size: 1.15rem;
    color: var(--brand-gold); line-height: 1;
}
.shop-price__per { font-size: 0.66rem; color: var(--theme-text-muted); letter-spacing: 0.02em; }
.shop-price__vat { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--theme-text-muted); opacity: 0.75; margin-top: 0.15rem; }

/* --- Offer: sale price + seal + note (storefront) ---------------------------
   A live offer struck the list price and stamped a gold "coin" on the card. */
.shop-price__row { display: inline-flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.shop-price__was {
    font-family: "Geist Mono", monospace; font-size: 0.82rem;
    text-decoration: line-through; color: var(--theme-text-muted); opacity: 0.8;
}
.shop-price__amount--sale { color: var(--brand-gold); }

/* The offer tag — a red stripe pinned into the top-right corner, flush to the
   card edge (the media clips it, so it follows the card's own rounding). A gold
   badge on a gold-accented card never read as "sale"; red is deliberately the
   one non-brand colour on the storefront, because a discount has to land at a
   glance. Shared by the card and the product page; each sets only its position. */
.offer-tag {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.55rem 0.95rem;
    background: var(--sale-red);
    color: #fff;
    font-weight: 700; font-size: 1.05rem; line-height: 1; letter-spacing: 0.03em;
    border-bottom-left-radius: 1rem;
    box-shadow: -3px 5px 14px rgba(0, 0, 0, 0.26);
}
.shop-card__tag { position: absolute; top: 0; right: 0; z-index: 3; }
.pdp__tag { position: absolute; top: 0; right: 0; z-index: 3;
    font-size: 1.35rem; padding: 0.7rem 1.25rem; border-bottom-left-radius: 1.25rem; }
/* Healthy stock renders no pill, so usually nothing to move; when a low-stock /
   sold pill does show, drop it clear of the tag. */
.shop-card.is-offer .shop-card__stock { top: 3.5rem; }

/* The admin's offer note, sitting over the product in the card body. */
.shop-card__offer {
    display: flex; align-items: center; gap: 0.42rem; margin: 0.1rem 0 0.05rem;
    padding: 0.4rem 0.6rem; border-radius: 8px;
    background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, transparent);
    color: var(--theme-text-secondary);
    font-size: 0.76rem; line-height: 1.35;
}
.shop-card__offer-ic { color: var(--brand-gold); flex: 0 0 auto; }
.pdp__vat { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--theme-text-muted); opacity: 0.8; margin-top: 0.25rem; }

/* --- Type pills ---
   Frosted, site-coloured panel (theme-bg at high opacity) so the label stays
   legible in BOTH themes and over any product photo; the category is conveyed
   by a small coloured dot rather than tinted text. */
.shop-pill {
    display: inline-flex; align-items: center; gap: 0.42rem;
    font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
    padding: 0.34rem 0.66rem 0.34rem 0.58rem; border-radius: 999px;
    color: var(--theme-text-primary);
    background: color-mix(in srgb, var(--theme-bg) 84%, transparent);
    border: 1px solid var(--theme-border-subtle);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); white-space: nowrap;
}
.shop-pill__dot {
    width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: 0 0 auto;
    background: var(--brand-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-gold) 22%, transparent);
}
.shop-pill--mono .shop-pill__dot { background: #5b8c4e; box-shadow: 0 0 0 2px color-mix(in srgb, #5b8c4e 22%, transparent); }
.shop-pill--novello .shop-pill__dot { background: #cf8a2c; box-shadow: 0 0 0 2px color-mix(in srgb, #cf8a2c 22%, transparent); }
.shop-pill--riserva .shop-pill__dot { background: #a9762f; box-shadow: 0 0 0 2px color-mix(in srgb, #a9762f 22%, transparent); }
.shop-pill--gift .shop-pill__dot { background: var(--theme-text-muted); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-text-muted) 22%, transparent); }

/* --- Feature chips --- */
.shop-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.shop-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.68rem; color: var(--theme-text-secondary); letter-spacing: 0.02em;
    padding: 0.28rem 0.55rem; border-radius: 0.6rem;
    background: var(--theme-surface-sunken); border: 1px solid var(--theme-border-subtle);
}
.shop-chip i { color: var(--brand-gold); font-size: 0.72rem; }

/* --- Buttons --- */
.shop-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: 0.45rem; font-size: var(--btn-font); font-weight: 600; letter-spacing: 0.02em;
    padding: var(--btn-pad-y) var(--btn-pad-x); min-height: var(--btn-min-h);
    border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; overflow: hidden; white-space: nowrap;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease,
                background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.shop-btn--block { width: 100%; }
.shop-btn--gold {
    /* Frosted gold glass — translucent gold over a blur of the content behind. */
    background: color-mix(in srgb, var(--brand-gold) 76%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
    color: var(--brand-light);
    border-color: color-mix(in srgb, var(--brand-gold) 45%, transparent);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-gold) 24%, transparent);
}
html.theme-light .shop-btn--gold { color: #fff; }
.shop-btn--gold:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--brand-gold) 90%, transparent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-gold) 38%, transparent);
}
.shop-btn--ghost {
    background: transparent; color: var(--theme-text-muted);
    border-color: var(--theme-border-subtle); cursor: default; font-size: var(--btn-font-sm);
}
/* Gold outline — frosted-glass secondary CTA (lighter gold tint, same blur) */
.shop-btn--gold-outline {
    background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
    color: var(--brand-gold);
    border-color: color-mix(in srgb, var(--brand-gold) 55%, transparent); box-shadow: none;
}
.shop-btn--gold-outline:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--brand-gold) 22%, transparent);
    border-color: var(--brand-gold);
}
/* Large CTA (hero / page calls-to-action) */
.shop-btn--lg { padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg); font-size: var(--btn-font-lg); letter-spacing: 0.04em; }
.shop-btn[disabled] { opacity: 0.65; cursor: not-allowed; }

/* Add-to-cart label morph */
.shop-btn__label, .shop-btn__done {
    display: inline-flex; align-items: center; gap: 0.45rem;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}
.shop-btn__done { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(110%); }
.shop-btn.is-added .shop-btn__label { opacity: 0; transform: translateY(-110%); }
.shop-btn.is-added .shop-btn__done { opacity: 1; transform: translateY(0); }
.shop-btn.is-added { background: var(--brand-olive); box-shadow: none; }

/* --- Cart bubble in navbar --- */
/* ── Ken Burns: a slow slide + zoom drift over set/uploaded home photos ──────
   Animates the independent `scale`/`translate` properties, NOT `transform`:
   several layouts counter-skew/rotate the img with a static transform
   (staircase, leaf, marquee compensation transforms in home_layouts.css), and
   an animation on `transform` would replace that compensation for its whole
   28s run, shearing the photo with the frame. The independent properties
   compose multiplicatively with the static transform instead. */
@keyframes kenburns {
    0%   { scale: 1.06; translate: 0 0; }
    50%  { scale: var(--pv-kb-zoom, 1.14); translate: -1.5% -1%; }
    100% { scale: 1.06; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
    html:not(.motion-disabled) .kenburns {
        animation: kenburns var(--pv-kb-dur, 28s) ease-in-out infinite;
        will-change: scale, translate;
    }
}

.cart-link { position: relative; display: inline-flex; }

/* ── Cart hover-preview (desktop peek; on touch the link just opens the cart) ── */
.cart-hover { position: relative; display: inline-flex; }
.cart-preview {
    position: absolute; top: calc(100% + 0.9rem); right: 0; z-index: 120;
    width: 340px; max-width: 92vw;
    background: var(--theme-surface, #fff); color: var(--theme-text-primary, #1c1c1c);
    border: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.22));
    border-radius: 0.9rem; box-shadow: 0 18px 48px rgba(0,0,0,0.22);
    padding: 0.85rem; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}
/* A small hover bridge so moving the pointer from the icon to the panel doesn't close it. */
.cart-preview::before { content: ""; position: absolute; top: -0.9rem; left: 0; right: 0; height: 0.9rem; }
/* Only enable the peek on true hover devices — phones/tablets tap straight to the cart. */
@media (hover: hover) and (pointer: fine) {
    .cart-hover:hover .cart-preview,
    .cart-hover:focus-within .cart-preview {
        opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    }
}
.cart-preview__items { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.cart-preview__row { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0.2rem; }
.cart-preview__row + .cart-preview__row { border-top: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.15)); }
.cart-preview__media { width: 2.6rem; height: 2.6rem; border-radius: 0.5rem; overflow: hidden; background: rgba(128,128,128,0.08); display: block; }
.cart-preview__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-preview__info { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cart-preview__title { font-size: 0.82rem; font-weight: 500; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-preview__meta { font-size: 0.72rem; opacity: 0.7; }
.cart-preview__line { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.cart-preview__foot { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.22)); }
.cart-preview__subtotal { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; }
.cart-preview__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* Desktop hover-peek: a dense popover, so the sm step and slim padding —
   min-height still applies from .shop-btn for a comfortable click target. */
.cart-preview__btn { justify-content: center; padding: 0.5rem 0.6rem; font-size: var(--btn-font-sm); }
/* In-peek editing: the cart-page stepper/remove controls, shrunk to fit the panel.
   Scoped under .cart-preview so these sizes also beat the ≤640px touch-target rules. */
.cart-preview__controls { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; }
.cart-preview .qty--mini { padding: 0.1rem; gap: 0.05rem; }
.cart-preview .qty--mini .qty__btn { width: 1.5rem; height: 1.5rem; font-size: 0.62rem; }
.cart-preview .qty--mini .qty__input { width: 1.6rem; font-size: 0.78rem; }
.cart-preview__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.cart-preview .cart-remove { width: 1.6rem; height: 1.6rem; font-size: 0.72rem; }
.cart-preview__empty { text-align: center; padding: 1.2rem 0.6rem; }
.cart-preview__empty i { font-size: 1.5rem; opacity: 0.5; }
.cart-preview__empty p { margin: 0.5rem 0 0.8rem; font-size: 0.85rem; opacity: 0.75; }
.cart-bubble {
    position: absolute; top: -0.5rem; right: -0.6rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 700; line-height: 1; font-family: "Geist Mono", monospace;
    color: var(--brand-light); background: var(--brand-gold);
    border-radius: 999px; transition: transform 0.3s ease, opacity 0.3s ease;
}
html.theme-light .cart-bubble { color: #fff; }
.cart-bubble.is-empty { opacity: 0; transform: scale(0); }
.cart-bubble.bump { animation: cart-bump 0.45s cubic-bezier(0.16,1,0.3,1); }
@keyframes cart-bump {
    0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); }
}

/* --- Toasts --- */
.shop-toast-region {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 2000;
    display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none;
}
.shop-toast {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.8rem 1.1rem; border-radius: 0.85rem; font-size: 0.85rem; line-height: 1.4;
    max-width: min(28rem, calc(100vw - 3rem));
    color: var(--theme-text-primary); background: var(--theme-bg);
    border: 1px solid var(--theme-border-subtle);
    box-shadow: 0 14px 40px rgba(0,0,0,0.22);
    transform: translateY(14px); opacity: 0; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
    pointer-events: auto;
}
.shop-toast.is-in { transform: translateY(0); opacity: 1; }
.shop-toast svg, .shop-toast i { flex: none; }
.shop-toast--ok i, .shop-toast--ok svg { color: var(--brand-gold); }
.shop-toast--warn i, .shop-toast--warn svg { color: #c98a1e; }
.shop-toast a {
    color: var(--brand-gold);
    text-decoration: underline;
    font-weight: 500;
}
.shop-toast a:hover {
    color: var(--theme-text-primary);
}
.shop-toast__close {
    background: transparent;
    border: none;
    color: var(--theme-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem 0 0.5rem;
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.shop-toast__close:hover {
    color: var(--theme-text-primary);
}
@media (max-width: 600px) { .shop-toast-region { left: 1rem; right: 1rem; bottom: 1rem; } }

/* --- Quantity stepper --- */
.qty {
    display: inline-flex; align-items: center; gap: 0.2rem;
    border: 1px solid var(--theme-border-subtle); border-radius: 999px;
    padding: 0.2rem; background: var(--theme-surface-sunken);
}
.qty__btn {
    width: 2rem; height: 2rem; border: none; background: transparent; cursor: pointer;
    color: var(--theme-text-secondary); border-radius: 999px; font-size: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.qty__btn:hover { background: color-mix(in srgb, var(--brand-gold) 18%, transparent); color: var(--brand-gold); }
.qty__input {
    width: 2.2rem; text-align: center; border: none; background: transparent;
    color: var(--theme-text-primary); font-family: "Geist Mono", monospace; font-size: 0.9rem;
    -moz-appearance: textfield;
}
.qty__input:focus { outline: none; }

/* --- Mobile touch targets: bring interactive controls up to ~44px --- */
@media (max-width: 640px) {
    .qty__btn { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
    .qty__input { width: 2.6rem; }
    .cart-remove { width: 2.75rem; height: 2.75rem; }
    /* .shop-btn min-height now comes from --btn-min-h at every width. */
    .shop-filter { padding: 0.7rem 1.15rem; font-size: 0.78rem; }
    /* The header theme/motion toggles are icon-only buttons — give the
       whole button a 44px hit box even though the icon stays small. */
    #theme-toggle-mobile::part(base),
    #motion-toggle-mobile::part(base) {
        min-width: 2.75rem; min-height: 2.75rem;
        display: inline-flex; align-items: center; justify-content: center;
    }
    /* Drawer nav links: comfortable, evenly-tappable rows. */
    .mobile-nav-drawer a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}

/* =====================  Product detail (PDP)  ===================== */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; gap: 2rem; } }

.pdp__stage {
    position: relative; border-radius: 1.5rem; overflow: hidden;
    background: var(--theme-surface-sunken); border: 1px solid var(--theme-border-subtle);
    aspect-ratio: 4 / 5;
}
.pdp__main { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.pdp__main.is-swapping { opacity: 0; }
.pdp__type { position: absolute; top: 1rem; left: 1rem; }
.pdp__veil {
    position: absolute; bottom: 1rem; left: 1rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: #fff; background: rgba(179,38,30,0.92); padding: 0.4rem 0.8rem; border-radius: 999px;
}
.pdp__thumbs { display: flex; gap: 0.7rem; margin-top: 0.9rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    padding-bottom: 0.2rem; scrollbar-width: none; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb { scroll-snap-align: start; }
.pdp__thumb {
    width: 4.5rem; height: 4.5rem; padding: 0; border-radius: 0.8rem; overflow: hidden;
    border: 1px solid var(--theme-border-subtle); cursor: pointer; background: var(--theme-surface-sunken);
    transition: border-color 0.3s ease, transform 0.3s ease; flex: 0 0 auto;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumb:hover { transform: translateY(-2px); }
.pdp__thumb.is-active { border-color: var(--brand-gold); box-shadow: 0 0 0 1px var(--brand-gold) inset; }

.pdp__info { display: flex; flex-direction: column; gap: 1.1rem; }
.pdp__eyebrow {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.25em;
    color: var(--brand-gold); font-family: "Geist Mono", monospace; font-weight: 700;
}
.pdp__title { font-family: Aleo, serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; line-height: 1.1; }
.pdp__sub { color: var(--theme-text-secondary); font-size: 0.95rem; margin-top: -0.6rem; }
/* The derived product prose. Sits between the caption and the buy controls,
   so it reads as description rather than fine print: body colour, normal
   measure, and a max-width so a long line does not run the width of the
   column on desktop. */
.pdp__prose { color: var(--theme-text-primary); font-size: 1rem; line-height: 1.6; max-width: 52ch; margin-top: 0.9rem; }

/* Contact-page FAQ. Plain <details> rows: the answer sits in the DOM whether
   or not it is open, so collapsing costs a crawler nothing. */
.contact-faq { margin-top: 3rem; }
.contact-faq__list { margin-top: 1rem; border-top: 1px solid var(--theme-border-subtle); }
.contact-faq__item { border-bottom: 1px solid var(--theme-border-subtle); }
.contact-faq__q { cursor: pointer; padding: 0.95rem 0; font-weight: 500; list-style: none; }
.contact-faq__q::-webkit-details-marker { display: none; }
.contact-faq__q::after { content: "+"; float: inline-end; opacity: 0.6; font-weight: 400; }
.contact-faq__item[open] .contact-faq__q::after { content: "\2212"; }
.contact-faq__a { padding: 0 0 1.1rem; margin: 0; max-width: 68ch; color: var(--theme-text-secondary); line-height: 1.65; }
.pdp__pricing { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.pdp__price { font-family: "Geist Mono", monospace; font-weight: 700; font-size: 1.8rem; color: var(--brand-gold); }
.pdp__priceper { font-size: 0.8rem; color: var(--theme-text-muted); }
/* Offer: struck list price + sale price + a small "you save" tag. */
.pdp__price-row { display: inline-flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.pdp__price-was {
    font-family: "Geist Mono", monospace; font-weight: 600; font-size: 1.15rem;
    text-decoration: line-through; color: var(--theme-text-muted); opacity: 0.8;
}
.pdp__save {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem; border-radius: 999px; align-self: center;
    background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
    color: var(--brand-gold);
}
/* The offer spelled out over the product. */
.pdp__offer {
    margin: 1.1rem 0 0; padding: 0.85rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-gold) 26%, transparent);
}
.pdp__offer-head {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 700; color: var(--brand-gold); letter-spacing: 0.01em;
}
.pdp__offer-ic { color: var(--brand-gold); }
.pdp__offer-msg { margin: 0.4rem 0 0; color: var(--theme-text-secondary); line-height: 1.45; }
.pdp__offer-dates {
    margin: 0.35rem 0 0; font-size: 0.76rem; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--theme-text-muted);
}
.pdp__stockline .pdp__instock {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.78rem; color: var(--brand-olive); letter-spacing: 0.04em;
}
.pdp__chips { margin: 0.2rem 0; }
.pdp__buy { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.3rem; }
.pdp__buy .shop-btn--block { flex: 1; min-width: 12rem; }
.pdp__meta {
    margin-top: 0.8rem; border-top: 1px solid var(--theme-border-subtle); padding-top: 1.1rem;
    display: flex; flex-direction: column; gap: 0.7rem;
}
.pdp__metarow { display: flex; justify-content: space-between; gap: 1.5rem; font-size: 0.82rem; }
.pdp__metarow span { color: var(--theme-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.pdp__metarow strong { color: var(--theme-text-secondary); font-weight: 500; text-align: right; }

.pdp__related { margin-top: 5rem; }
.pdp__related-title { font-family: Aleo, serif; font-size: 1.6rem; margin-bottom: 1.8rem; text-align: center; }

/* =====================  Cart  ===================== */
.cart-head { margin-bottom: 2rem; }
.cart-flash {
    background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, transparent);
    color: var(--theme-text-primary); padding: 0.8rem 1.1rem; border-radius: 0.75rem;
    font-size: 0.85rem; margin-bottom: 1.5rem;
}
.cart-empty {
    text-align: center; padding: 4rem 1rem; display: flex; flex-direction: column;
    align-items: center; gap: 1.2rem; color: var(--theme-text-muted);
}
/* Direct child only — see .shop-empty note: keep the big basket styling off
   the arrow icon inside the nested "Browse the shop" button. */
.cart-empty > i { font-size: 3rem; color: var(--brand-gold); opacity: 0.7; }
.cart { display: grid; grid-template-columns: 1fr 20rem; gap: 2.5rem; align-items: start; }
@media (max-width: 820px) { .cart { grid-template-columns: 1fr; } }

.cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cart-row {
    display: grid; grid-template-columns: 5rem 1fr auto auto auto; gap: 1.2rem; align-items: center;
    padding: 1.2rem 0; border-bottom: 1px solid var(--theme-border-subtle);
}
.cart-row__media { width: 5rem; height: 5rem; border-radius: 0.8rem; overflow: hidden; display: block; background: var(--theme-surface-sunken); }
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cart-row__title { font-family: Aleo, serif; font-size: 1.05rem; color: inherit; text-decoration: none; }
.cart-row__title:hover { color: var(--brand-gold); }
.cart-row__caption { font-size: 0.72rem; color: var(--theme-text-muted); }
.cart-row__unit { font-size: 0.72rem; color: var(--theme-text-secondary); }
.cart-row__total { font-family: "Geist Mono", monospace; font-weight: 700; color: var(--brand-gold); min-width: 4.5rem; text-align: right; }
.cart-remove {
    width: 2rem; height: 2rem; border: none; background: transparent; cursor: pointer;
    color: var(--theme-text-muted); border-radius: 999px; transition: background-color 0.25s ease, color 0.25s ease;
}
.cart-remove:hover { background: color-mix(in srgb, #b3261e 14%, transparent); color: #b3261e; }

.cart-summary {
    position: sticky; top: 7rem; background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle); border-radius: 1.25rem; padding: 1.6rem;
    display: flex; flex-direction: column; gap: 0.9rem;
}
.cart-summary__row { display: flex; justify-content: space-between; font-size: 0.9rem; }
.cart-summary__row--muted { color: var(--theme-text-muted); font-size: 0.8rem; }
.cart-summary__row--total { font-size: 1.05rem; }
.cart-summary__row--total strong { color: var(--brand-gold); font-family: "Geist Mono", monospace; }
.cart-summary__row--save { color: var(--brand-gold); font-weight: 600; font-size: 0.82rem; }
.cart-summary__row--save .vi { width: 0.95em; height: 0.95em; }
.cart-summary__divider { height: 1px; background: var(--theme-border-subtle); margin: 0.3rem 0; }
.cart-summary__note { font-size: 0.7rem; color: var(--theme-text-muted); line-height: 1.5; }
.cart-summary__continue { text-align: center; font-size: 0.8rem; color: var(--theme-text-secondary); text-decoration: none; }
.cart-summary__continue:hover { color: var(--brand-gold); }

@media (max-width: 560px) {
    .cart-row {
        grid-template-columns: 4rem 1fr auto; grid-template-areas:
            "media info remove" "media qty total";
        row-gap: 0.6rem;
    }
    .cart-row__media { grid-area: media; }
    .cart-row__info { grid-area: info; }
    .cart-row__qty { grid-area: qty; }
    .cart-row__total { grid-area: total; }
    .cart-row__remove { grid-area: remove; justify-self: end; }
}

/* Honour reduced-motion: drop the bump animation */
html.motion-disabled .cart-bubble.bump,
html.motion-disabled .nav-attn.bump { animation: none; }

/* =====================================================================
   Catalog (Shop) page, home preview, filters, and auto image cut-out
   ===================================================================== */

/* --- Catalog hero --- */
.catalog-hero { text-align: center; margin-bottom: 3rem; }
.catalog-hero__title {
    font-family: Aleo, serif; font-weight: 500; line-height: 1.05;
    font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0.4rem 0 0.8rem;
}
.catalog-hero__sub { color: var(--theme-text-secondary); max-width: 42rem; margin: 0 auto; font-weight: 300; line-height: 1.6; }
.catalog-hero__rule { width: 60px; height: 2px; background: var(--brand-gold); margin: 1.6rem auto 0; }

/* --- Staff in-place hero editor (shop only, gated {% if user.is_staff %}) --- */
.catalog-hero--editable { position: relative; }
/* While the popover is open, lift the hero's own stacking context above the
   rest of the page: .scroll-fade (opacity/transform/will-change) makes the
   hero a z:auto context, so without this the dialog paints UNDER the later
   grid/rail siblings and can't be interacted with. Header stays above (z 1000). */
.catalog-hero--editable.is-editing { z-index: 90; }

/* --- Announcement banner (admin-typed offers / free-shipping notice) ---------
   A confident gold announcement band under the header — deliberately reads as
   chrome, not page copy. The old strip was so faint (5–14% tint, hairline) it
   looked like a pull-quote inside the content; this one earns its own presence:
   a real gold band, a lift shadow that floats it above the grid, a filled icon
   "coin", and a single slow sheen on load to catch the eye. Still minimal —
   brand gold + serif italic copy, no second colour. Blank in both languages =
   not rendered. Full-bleed via `margin-inline: calc(50% - 50vw)`; the negative
   top margin tucks it just beneath the fixed header (which clears ~4.25rem). */
.shop-banner {
    position: relative; overflow: hidden;
    margin-inline: calc(50% - 50vw);
    margin-top: -2.5rem; margin-bottom: 2.9rem;
    display: flex; align-items: center; justify-content: center; gap: 0.9rem;
    padding: 1rem 3.6rem;   /* symmetric so the centred copy clears the close button */
    border-block: 1px solid color-mix(in srgb, var(--brand-gold) 55%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand-gold) 26%, var(--theme-bg)),
            color-mix(in srgb, var(--brand-gold) 15%, var(--theme-bg)));
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--brand-gold) 62%, transparent);
    text-align: center;
    transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.shop-banner[hidden] { display: none; }

/* No idle animation — the band earns its presence from the fill, the gold
   hairlines and the coin. It deepens on hover instead: a stronger gold wash and
   a lifted shadow, so pointing at it is what makes it speak up. */
.shop-banner:hover {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand-gold) 38%, var(--theme-bg)),
            color-mix(in srgb, var(--brand-gold) 24%, var(--theme-bg)));
    border-block-color: color-mix(in srgb, var(--brand-gold) 78%, transparent);
    box-shadow: 0 11px 26px -10px color-mix(in srgb, var(--brand-gold) 78%, transparent);
}

/* The notice icon rendered as a filled gold coin — a stamp, not inline text.
   `.shop-banner__icon` IS the <svg>; padding insets the glyph, the circle is its
   background, and white currentColor draws the glyph in both themes. */
.shop-banner__icon.vi {
    flex: 0 0 auto; position: relative; z-index: 1;
    width: 2.05rem; height: 2.05rem; padding: 0.46rem;
    box-sizing: border-box; border-radius: 999px; vertical-align: middle;
    background: var(--brand-gold); color: #fff;
    box-shadow: 0 1px 5px color-mix(in srgb, var(--brand-gold) 60%, transparent);
}
.shop-banner__text {
    margin: 0; position: relative; z-index: 1;
    font-family: var(--font-longform, serif);
    font-style: italic; font-size: 1.06rem; line-height: 1.5; font-weight: 500;
    color: var(--theme-text-primary);
}
.shop-banner__text em { font-style: italic; color: var(--brand-gold); font-weight: 700; }
html.theme-light .shop-banner__text em { color: #855800; }
.shop-banner__mark { flex: 0 0 auto; position: relative; z-index: 1; }
.shop-banner__mark .cv-rosette { width: 1.15rem; height: 1.15rem; }
.shop-banner__close {
    position: absolute; top: 50%; right: 0.9rem; transform: translateY(-50%);
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; padding: 0;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--theme-text-secondary); font-size: 1rem; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.shop-banner__close:hover { background: color-mix(in srgb, var(--brand-gold) 22%, transparent); color: var(--theme-text-primary); }
.shop-banner__close:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
@media (max-width: 600px) {
    .shop-banner {
        margin-top: -1.75rem; padding: 0.9rem 2.8rem 0.9rem 1.1rem;
        gap: 0.6rem;
    }
    .shop-banner__icon.vi { width: 1.85rem; height: 1.85rem; padding: 0.42rem; }
    .shop-banner__text { font-size: 0.95rem; }
    .shop-banner__close { right: 0.5rem; }
}

.hero-edit-grid__note { font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.hero-edit-btn {
    position: absolute; top: 0; inset-inline-end: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; padding: 0;
    background: var(--theme-surface, #fff); color: var(--brand-gold, #cfa13f);
    border: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.28));
    border-radius: 999px; cursor: pointer; opacity: 0.55;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.catalog-hero--editable:hover .hero-edit-btn,
.hero-edit-btn:hover, .hero-edit-btn:focus-visible { opacity: 1; box-shadow: 0 2px 10px rgba(0,0,0,0.14); }
.hero-edit-btn i { font-size: 0.9rem; }

.hero-edit-pop {
    position: absolute; top: 2.8rem; inset-inline-end: 0; z-index: 60;
    width: min(30rem, 92vw); text-align: start;
    background: var(--theme-surface, #fff); color: var(--theme-text-primary, #1c1c1c);
    border: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.28));
    border-radius: 0.9rem; box-shadow: 0 18px 48px rgba(0,0,0,0.24);
    padding: 1rem 1.1rem;
    opacity: 0; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.hero-edit-pop.is-open { opacity: 1; transform: translateY(0); }
.hero-edit-pop__title { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.15rem; }
.hero-edit-pop__hint { font-size: 0.74rem; color: var(--theme-text-muted); margin: 0 0 0.8rem; }
.hero-edit-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0.45rem 0.6rem; align-items: center; }
.hero-edit-grid__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--theme-text-muted); }
.hero-edit-grid label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; color: var(--brand-gold); }
.hero-edit-grid input, .hero-edit-grid textarea {
    width: 100%; box-sizing: border-box; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.82rem; font-weight: 400;
    color: var(--theme-text-primary); background: var(--theme-surface-sunken, rgba(128,128,128,0.06));
    border: 1px solid var(--theme-border-subtle, rgba(128,128,128,0.28)); border-radius: 0.4rem; resize: vertical;
}
.hero-edit-pop__err { color: #b02018; font-size: 0.76rem; margin: 0.6rem 0 0; }
.hero-edit-pop__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
@media (max-width: 560px) {
    .hero-edit-pop { inset-inline: 0; margin-inline: auto; }
    .hero-edit-grid { grid-template-columns: 1fr 1fr; }
    .hero-edit-grid__label { grid-column: 1 / -1; margin-top: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-edit-pop, .hero-edit-btn { transition: none; }
}

/* --- Filter bar --- */
.shop-filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.6rem; }
.shop-filter {
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    padding: 0.5rem 1.05rem; border-radius: 999px; cursor: pointer;
    color: var(--theme-text-secondary); background: transparent;
    border: 1px solid var(--theme-border-subtle);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.shop-filter:hover { color: var(--brand-gold); border-color: color-mix(in srgb, var(--brand-gold) 45%, transparent); }
.shop-filter.is-active { color: var(--brand-light); background: var(--brand-gold); border-color: var(--brand-gold); }
html.theme-light .shop-filter.is-active { color: #fff; }
.shop-card.is-hidden { display: none; }

/* --- Home preview (editorial 3-up with offset) --- */
.shop-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
.shop-preview__item:nth-child(2) { transform: translateY(2.5rem); }
.shop-preview__cta { text-align: center; margin-top: 3.5rem; }
.shop-preview__btn { padding: 0.95rem 1.9rem; font-size: 0.88rem; }
.shop-preview__btn i { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.shop-preview__btn:hover i { transform: translateX(4px); }
@media (max-width: 900px) {
    .shop-preview { grid-template-columns: repeat(2, 1fr); }
    .shop-preview__item:nth-child(2) { transform: none; }
    .shop-preview__item:nth-child(3) { display: none; } /* keep a clean 2-up on tablet */
}
@media (max-width: 600px) {
    .shop-preview { grid-template-columns: 1fr; }
    .shop-preview__item:nth-child(3) { display: block; }
}

/* --- Auto cut-out: images whose background JS detected as white/black/transparent.
   The product then floats on the card surface with a soft glow + shadow, instead
   of sitting inside a thick coloured box. --- */
.shop-card__img.is-cutout, .pdp__main.is-cutout {
    object-fit: contain;
    padding: 9%;
    background: radial-gradient(58% 52% at 50% 44%,
                color-mix(in srgb, var(--brand-gold) 12%, transparent), transparent 72%);
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.30));
}
.pdp__main.is-cutout { padding: 12%; }
html.motion-disabled .shop-preview__item { transform: none; }

/* --- Branded image placeholder: real products without an uploaded photo show
   a calm bottle mark on the same soft gold glow as the cut-outs (never a stock
   photograph — see Product.primary_image_url). Fills whatever media box hosts
   it: shop card, PDP stage, cart row or the navbar cart peek (--mini). --- */
.product-img-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(58% 52% at 50% 44%,
                color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 72%);
}
.product-img-ph i {
    font-size: 2.5rem;
    color: color-mix(in srgb, var(--brand-gold) 55%, transparent);
}
.pdp__stage .product-img-ph i { font-size: 5rem; }
.shop-card__media .product-img-ph i { font-size: 3.25rem; }
.product-img-ph--mini { position: static; width: 100%; height: 100%; }
.product-img-ph--mini i { font-size: 1.25rem; }
.cart-row__media .product-img-ph--mini i { font-size: 2rem; }

/* --- Sold-out restock reveal (hover on desktop, press-hold on mobile) ---
   Kept off the top row so the compact "Sold out" badge and the type pill never
   collide; the restock date slides up from the bottom of the image instead. */
.shop-card__restock {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 1.5rem 0.9rem 0.75rem; text-align: center;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: #fff;
    background: linear-gradient(to top,
        rgba(18, 22, 19, 0.94) 0%, rgba(18, 22, 19, 0.6) 55%, rgba(18, 22, 19, 0) 100%);
    transform: translateY(100%); opacity: 0; pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.shop-card__restock i { color: var(--brand-gold); }
.shop-card:hover .shop-card__restock,
.shop-card.is-held .shop-card__restock { transform: translateY(0); opacity: 1; }

/* Touch devices have no hover lift — give a calm press feedback instead, and a
   subtle resting elevation so cards still read as tappable. */
@media (hover: none) {
    .shop-card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
    .shop-card:active { transform: scale(0.985); }
    .shop-card:active .shop-card__img { transform: scale(1.04); }
    .shop-preview__btn:active { transform: scale(0.985); }
}

/* =====================================================================
   Checkout + public order-status (storefront)
   ===================================================================== */
.checkout {
    display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 2rem; align-items: start;
}
.checkout__main { display: flex; flex-direction: column; gap: 1.5rem; }
.checkout__card {
    border: 1px solid var(--theme-border-subtle); border-radius: 16px; padding: 1.6rem;
    background: var(--theme-surface-sunken);
}
.checkout__h {
    font-family: var(--font-longform); font-weight: 300; font-size: 1.15rem;
    margin: 0 0 0.4rem;
}
.checkout__h i { color: var(--brand-gold); margin-right: 0.4rem; }
.checkout__hint { font-size: 0.82rem; color: var(--theme-text-muted); margin: 0 0 1rem; }

/* The .notif-input (settings) and the type-table cells share the same
   text-control language at their compact size; both were browser-default
   or focus-less before. */
.notif-input {
    font: inherit; font-size: .88rem; padding: .45rem .6rem;
    color: var(--theme-text-primary); background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle); border-radius: 8px;
    caret-color: var(--brand-gold);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.notif-input::placeholder { color: var(--theme-text-muted); opacity: .75; }
.notif-input:hover, .type-table__row input[type="text"]:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--theme-border-subtle)); }
.notif-input:focus, .type-table__row input[type="text"]:focus {
    outline: none; border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 16%, transparent); }
.type-table__row input[type="text"] {
    caret-color: var(--brand-gold);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.6rem; }
/* The `display:grid` above is an AUTHOR rule, so it beats the UA `[hidden]
   { display:none }` — without this the `hidden` attribute (and JS setting
   .hidden) can't collapse a .field-grid, so checkout's billing / invoice
   sections would never hide. Restore the collapse. */
.field-grid[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
/* A grid/flex item floors at its content's min-width, and a form control's
   intrinsic width is large — a text input defaults to ~20 characters, a file
   input to its button + filename label. That floor is what pushed the product
   form ~120px off-screen on a phone. Let the field collapse to its track and
   keep the control inside it. Direct children only, so the visually-hidden
   checkbox inside a .lux-toggle label keeps its own sizing. */
.field { min-width: 0; }
.field > input:not([type="checkbox"]):not([type="radio"]),
.field > select,
.field > textarea { width: 100%; box-sizing: border-box; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; color: var(--theme-text-secondary); }
.field__req { color: var(--brand-gold); }
.field input {
    padding: 0.6rem 0.8rem; border-radius: 10px; font: inherit; font-size: 0.92rem;
    color: var(--theme-text-primary); background: var(--theme-bg);
    border: 1px solid var(--theme-border-subtle);
    caret-color: var(--brand-gold);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field input::placeholder { color: var(--theme-text-muted); opacity: .75; }
.field input:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--theme-border-subtle)); }
.field input:focus { outline: none; border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 16%, transparent); }
.field--error input { border-color: #b3261e; }
/* Input with a leading icon inside a form field (preserves glyph clearance) */
.field .input-icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.field .input-icon > .vi,
.field .input-icon > svg,
.field .input-icon > .icon-picker__preview {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15rem;
    height: 1.15rem;
    color: var(--theme-text-muted, currentColor);
    pointer-events: none;
    flex: none;
}
.field .input-icon > input,
.field input[data-icon-input] {
    padding-left: 2.45rem;
}
.field__select {
    padding: 0.6rem 0.8rem; border-radius: 10px; font: inherit; font-size: 0.92rem;
    color: var(--theme-text-primary); background: var(--theme-bg);
    border: 1px solid var(--theme-border-subtle); width: 100%;
}
.field__select:focus { outline: none; border-color: var(--brand-gold); }
.field__hint { font-size: 0.72rem; color: var(--theme-text-muted); }
.field__err { font-size: 0.75rem; color: #b3261e; }

.checkout__account {
    display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem;
    color: var(--theme-text-secondary); padding: 0.25rem;
}
.checkout__account input { margin-top: 0.2rem; }

.checkout__summary {
    position: sticky; top: 7rem; border: 1px solid var(--theme-border-subtle);
    border-radius: 16px; padding: 1.6rem;
}
.checkout__lines { list-style: none; margin: 0 0 1rem; padding: 0 0 1rem;
    border-bottom: 1px solid var(--theme-border-subtle); display: flex; flex-direction: column; gap: 0.55rem; }
.checkout__lines li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; font-size: 0.88rem; align-items: baseline; }
.checkout__qty { color: var(--theme-text-muted); font-variant-numeric: tabular-nums; }
.checkout__amt { font-variant-numeric: tabular-nums; }
.cart-flash--error { color: #b3261e; }

.shop-btn--block { width: 100%; justify-content: center; margin-top: 1rem; }

/* Receipt codes box: QR · barcode+serial · verification hint. The serial is
   spread character-by-character to exactly the barcode's width (flex
   space-between on per-char spans inside the code's inline-block wrapper). */
.receipt-codes {
    display: flex; align-items: center; gap: 1.1rem; margin-top: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--brand-gold) 35%, transparent);
    border-radius: 10px; padding: 0.9rem 1.1rem;
}
.receipt-codes__qr { height: 74px; width: 74px; flex: none; }
.receipt-codes__strip { flex: 1 1 auto; min-width: 0; text-align: center; }
.receipt-codes__code { display: inline-block; max-width: 100%; }
.receipt-codes__code img { display: block; height: 40px; max-width: 100%; margin: 0 auto; }
.receipt-codes__serial {
    display: flex; justify-content: space-between; margin-top: 0.25rem;
    font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.receipt-codes__hint { flex: 0 1 32%; font-size: 0.72rem; margin: 0; }
@media (max-width: 40rem) {
    .receipt-codes { flex-direction: column; gap: 0.8rem; text-align: center; }
    .receipt-codes__hint { flex: 1 1 auto; }
}

/* Receipt document actions: clear air above, side-by-side on wide screens,
   evenly stacked and full-width on narrow ones so no button is cramped. */
.receipt-actions {
    display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem;
}
.receipt-actions > .shop-btn { flex: 1 1 12rem; }
@media (max-width: 30rem) {
    .receipt-actions { flex-direction: column; }
    .receipt-actions > .shop-btn { flex: 1 1 auto; width: 100%; }
}

/* Fiscal-document strip: always present under the actions — download, pending
   note, or the request button, depending on the order's fiscal route. */
.receipt-fiscal {
    margin-top: 1.5rem; padding-top: 1.1rem;
    border-top: 1px solid var(--theme-border-subtle);
    display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start;
}
.receipt-fiscal p { margin: 0; font-size: 0.85rem; }
.receipt-fiscal form { margin: 0; width: 100%; }
.receipt-fiscal .shop-btn { max-width: 100%; }
@media (max-width: 30rem) {
    .receipt-fiscal .shop-btn { width: 100%; }
}

/* Customer order-recap document links (View receipt / Invoice / scontrino):
   wrap on wide, stack full-width on narrow. Buttons and the request-form each
   count as one item so they distribute evenly. */
.doc-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch;
}
.doc-actions > .btn, .doc-actions > form { flex: 1 1 12rem; }
.doc-actions > form { display: flex; }
.doc-actions > form > .btn { width: 100%; }
@media (max-width: 30rem) {
    .doc-actions { flex-direction: column; }
    .doc-actions > .btn, .doc-actions > form { flex: 1 1 auto; width: 100%; }
}

/* Public order status */
.order-status__meta { color: var(--theme-text-muted); font-size: 0.9rem; margin-top: 0.4rem; }
.order-status__card {
    border: 1px solid var(--theme-border-subtle); border-radius: 16px; padding: 1.8rem;
    max-width: 640px; margin: 1.5rem auto 1rem;
}
.order-status__card .timeline { margin-bottom: 1.4rem; }
.order-status__banner {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; border-radius: 12px;
    background: var(--theme-surface-sunken); border: 1px solid var(--theme-border-subtle);
    font-size: 0.92rem; margin-bottom: 1rem;
}
.order-status__banner i { color: var(--brand-gold); }
.order-status__banner.is-ok { border-color: color-mix(in srgb,#2f7d4f 40%,transparent); }
.order-status__banner.is-ok i { color: #2f7d4f; }
.order-status__banner.is-warn { border-color: color-mix(in srgb,#b3261e 40%,transparent); }
.order-status__banner.is-warn i { color: #b3261e; }
.order-status__lines { margin-top: 1.2rem; }
.order-status__ship { margin-top: 1.4rem; font-size: 0.88rem; }
.order-status__shiplabel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--theme-text-muted); }
.order-status__ship address { font-style: normal; margin-top: 0.3rem; line-height: 1.5; color: var(--theme-text-secondary); }

@media (max-width: 860px) {
    .checkout { grid-template-columns: 1fr; }
    .checkout__summary { position: static; }
}
@media (max-width: 560px) {
    /* Paired fields (first/last name, city/postcode, tax-id/SDI) stack on a phone. */
    .field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    /* 16px is iOS Safari's zoom threshold — anything smaller makes the page zoom on
       focus and re-centre mid-typing. Keep the calmer sizes on desktop. */
    .field input, .field select, .field textarea, .field__select,
    .state-control input, .qty__input { font-size: 16px; }
}

/* Checkout country / subdivision selects — match .field inputs */
.field select,
.state-control select,
.state-control input {
    width: 100%; padding: 0.6rem 0.8rem; border-radius: 10px; font: inherit;
    font-size: 0.92rem; color: var(--theme-text-primary); background: var(--theme-bg);
    border: 1px solid var(--theme-border-subtle);
}
.field select:focus,
.state-control select:focus,
.state-control input:focus { outline: none; border-color: var(--brand-gold); }

/* Split phone field (SplitPhoneNumberField): the country-code dropdown and the
   national-number input sit on one row. The dropdown is content-sized (it shows
   e.g. "Italia +39"); the number fills the rest. Works across the storefront
   (.field), auth-card and profile-edit styling since it only lays the two
   sub-widgets out — their borders/padding come from each system's input rules.
   The `> select` rule overrides the width:100% the checkout `.field select`
   rule would otherwise impose. */
.phone-split { display: flex; gap: 0.5rem; align-items: center; }
.phone-split > select { flex: 0 0 auto; width: auto; max-width: 11rem; }
.phone-split > input { flex: 1 1 auto; min-width: 0; }

/* =====================================================================
   Elegant toggle switch (replaces native checkboxes at checkout)
   ===================================================================== */
.lux-toggle {
    display: inline-flex; align-items: center; gap: 0.85rem;
    cursor: pointer; user-select: none;
}
.lux-toggle__input {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.lux-toggle__switch {
    position: relative; flex: 0 0 auto;
    width: 46px; height: 26px; border-radius: 999px;
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}
.lux-toggle__thumb {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    display: grid; place-items: center;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The tick, the two bars of the cross and nothing else share one grid cell, so
   all three are centred by place-items above and cross-fade in place. Stacking
   them with position:absolute inside an already-absolute thumb is what left
   the mark off-centre. */
.lux-toggle__thumb > *,
.lux-toggle__thumb::before,
.lux-toggle__thumb::after { grid-area: 1 / 1; }

/* Cross while OFF. Drawn in CSS rather than added to the markup: the toggle is
   rendered in eight templates and this needs no change to any of them. */
.lux-toggle__thumb::before,
.lux-toggle__thumb::after {
    content: "";
    width: 8px; height: 1.6px; border-radius: 1px;
    background: var(--theme-text-muted);
    transition: opacity 0.18s ease;
}
.lux-toggle__thumb::before { transform: rotate(45deg); }
.lux-toggle__thumb::after { transform: rotate(-45deg); }
.lux-toggle__input:checked + .lux-toggle__switch .lux-toggle__thumb::before,
.lux-toggle__input:checked + .lux-toggle__switch .lux-toggle__thumb::after {
    opacity: 0;
}

/* Tick while ON. Sized in px, deliberately: .vi is 0.95em and inherits the
   admin icon-scale, which is why this glyph could grow past its 20px thumb. */
.lux-toggle__check {
    width: 10px; height: 10px; font-size: 10px;
    color: var(--brand-gold);
    opacity: 0; transform: scale(0.4);
    transition: opacity 0.2s ease 0.08s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}
/* Checked state */
.lux-toggle__input:checked + .lux-toggle__switch {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
}
.lux-toggle__input:checked + .lux-toggle__switch .lux-toggle__thumb {
    transform: translateX(20px);
}
.lux-toggle__input:checked + .lux-toggle__switch .lux-toggle__check {
    opacity: 1; transform: scale(1);
}
/* Keyboard focus ring */
.lux-toggle__input:focus-visible + .lux-toggle__switch {
    outline: 2px solid var(--brand-gold); outline-offset: 2px;
}
.lux-toggle__text { font-size: 0.9rem; color: var(--theme-text-secondary); line-height: 1.4; }

/* Admin messages inbox + customer compose */
.msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.msg-card {
    border: 1px solid var(--theme-border-subtle); border-radius: 12px; padding: 1rem 1.15rem;
}
.msg-card.is-unread { border-color: color-mix(in srgb, var(--brand-gold) 55%, transparent);
    background: color-mix(in srgb, var(--brand-gold) 7%, transparent); }
.msg-card__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.msg-card__who { font-size: 0.9rem; }
.msg-card__when { font-size: 0.75rem; color: var(--theme-text-muted); white-space: nowrap; }
.msg-card__body { margin: 0.6rem 0 0.75rem; color: var(--theme-text-secondary); }
/* Conversation rows: the snippet + meta are one click-target into the thread. */
.msg-card__open { display: block; text-decoration: none; color: inherit; }
.msg-card__open:hover .msg-card__meta { color: var(--brand-gold); }
.msg-card__body--snippet { margin-bottom: 0.35rem; }
.msg-card__meta { font-size: 0.78rem; color: var(--theme-text-muted); transition: color 0.2s; }
.msg-unread-pill {
    display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.5rem;
    border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    background: var(--brand-gold); color: #2c3024;
}

/* --- Conversation thread (chat transcript) --------------------------------- */
.thread-head { margin-bottom: 1.25rem; }
.thread-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 0.6rem; flex-wrap: wrap; }
.thread-head__title { font-family: var(--font-longform, serif); font-size: 1.35rem; margin: 0; }
.thread-head__meta { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--theme-text-muted); }

.chat { list-style: none; margin: 0; padding: 0.25rem 0; display: flex; flex-direction: column; gap: 0.65rem; }
.chat__day { text-align: center; margin: 0.6rem 0 0.2rem; }
.chat__day span {
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--theme-text-muted); padding: 0.15rem 0.75rem;
    border: 1px solid var(--theme-border-subtle); border-radius: 999px;
}
.chat__row { display: flex; }
.chat__row.is-mine { justify-content: flex-end; }
.chat__bubble {
    max-width: min(34rem, 82%);
    padding: 0.7rem 0.95rem; border-radius: 14px 14px 14px 4px;
    background: var(--theme-surface-sunken); border: 1px solid var(--theme-border-subtle);
}
.chat__row.is-mine .chat__bubble {
    border-radius: 14px 14px 4px 14px;
    background: color-mix(in srgb, var(--brand-gold) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-gold) 40%, transparent);
}
.chat__body { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--theme-text-primary); overflow-wrap: anywhere; }
.chat__meta { display: block; margin-top: 0.35rem; font-size: 0.7rem; color: var(--theme-text-muted); }

.chat-reply { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.chat-reply__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.chat-reply__hint { font-size: 0.78rem; color: var(--theme-text-muted); }

/* Navbar "needs your attention" badge on the account icon (customer side).
   Same mechanics as .cart-bubble: always in the DOM, emptiness is the
   .is-empty class (scale to 0, not display:none) so JS can update the count
   in place after an AJAX action without a template re-render. */
.nav-user { position: relative; display: inline-block; }
.nav-attn {
    position: absolute; top: -0.5rem; right: -0.6rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 700; line-height: 1;
    font-family: "Geist Mono", monospace;
    color: var(--brand-light); background: var(--brand-gold);
    border-radius: 999px; box-shadow: 0 0 0 2px var(--header-bg-solid, #fff);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-attn.is-empty { opacity: 0; transform: scale(0); }
.nav-attn.bump { animation: cart-bump 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
/* Staff duties roll-up on the Manage icon. Red, matching the console's own
   .manage-subnav__badge, so "the shop owes something" never reads as "you owe
   something" — gold stays the customer's own business. */
.nav-attn--staff { background: #b02018; color: #fff; }

/* Profile-page breakdown of that badge — one line per outstanding item. */
.attn-card {
    border: 1px solid var(--brand-gold, #cfa13f);
    background: color-mix(in srgb, var(--brand-gold, #cfa13f) 8%, transparent);
}
.attn-list { list-style: none; margin: 0.9rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.5rem; }
.attn-list a { color: var(--theme-text-primary); text-decoration: none;
    font-size: 0.9rem; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.attn-list a:hover { border-bottom-color: var(--brand-gold, #cfa13f); }
.order-messages { display: flex; flex-direction: column; gap: 0.6rem; }
.order-messages__item { padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle); }
.order-messages__meta { font-size: 0.72rem; color: var(--theme-text-muted); margin: 0 0 0.25rem; }

/* =====================================================================
   Contact page + degustazione booking widget
   ===================================================================== */
.contact-page { background: var(--theme-bg); color: var(--theme-text-primary); min-height: 100vh; position: relative; }
.contact-wrap { max-width: 1140px; margin: 0 auto; padding: 7rem 1.5rem 6rem; position: relative; z-index: 1; }

.contact-hero { max-width: 720px; margin-bottom: 3rem; }
.contact-eyebrow {
    display: block; font-family: "Geist Mono", monospace; font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--brand-gold); margin-bottom: 1rem;
}
.contact-title { font-family: Aleo, serif; font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; margin: 0 0 1.2rem; }
.contact-title__accent { font-style: italic; color: var(--brand-gold); }
.contact-lede { font-size: 1.05rem; font-weight: 300; line-height: 1.6; color: var(--theme-text-secondary); margin: 0; }

.contact-flash { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.6rem; }

.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.contact-section-title { font-family: Aleo, serif; font-weight: 400; font-size: 1.4rem; margin: 0 0 1.2rem; }

.contact-details { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.contact-details li { display: flex; align-items: center; gap: 0.8rem; font-weight: 300; font-size: 0.95rem; }
.contact-details a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.contact-details a:hover { border-color: var(--brand-gold); }
.contact-ic { color: var(--brand-gold); font-size: 1.1rem; flex-shrink: 0; }

/* Opening hours — a two-column day/time list. Times are tabular so the
   columns line up down the week regardless of digit widths. */
.contact-hours { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.contact-hours li { display: flex; justify-content: space-between; gap: 1rem; font-weight: 300; font-size: 0.95rem; }
.contact-hours__day { opacity: 0.75; }
.contact-hours__time { font-variant-numeric: tabular-nums; text-align: right; }

.contact-map {
    height: 320px; width: 100%; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--theme-border-subtle); z-index: 0;
}
.leaflet-container { font: inherit; background: var(--theme-surface-sunken); }
.contact-map__directions { margin-top: 0.95rem; }
.contact-map__label {
    display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem;
    font-size: 0.82rem; color: var(--theme-text-muted);
}
.contact-map__label .vi { color: var(--brand-gold); flex-shrink: 0; }
/* Stacked and tightly spaced: the apps read as one short list rather than a
   ragged row, and each button spans the map width above it so the column has a
   single left and right edge. */
.contact-map__apps {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.contact-map__apps .btn { width: 100%; }

/* --- Legal pages (terms & conditions) --- */
.legal-updated {
    margin-top: 1.1rem; font-family: "Geist Mono", monospace; font-size: 0.72rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-text-muted);
}
.legal-article { max-width: 820px; }
.legal-article section { margin: 0 0 2.6rem; }
.legal-article h2 { font-family: Aleo, serif; font-weight: 400; font-size: 1.35rem; margin: 0 0 0.9rem; }
.legal-num { color: var(--brand-gold); }
.legal-article p { font-weight: 300; font-size: 0.95rem; line-height: 1.75; color: var(--theme-text-secondary); margin: 0 0 0.9rem; }
.legal-article p:last-child { margin-bottom: 0; }
.legal-article a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brand-gold); }
.legal-article a:hover { color: var(--brand-gold); }
.legal-seller {
    margin: 0 0 0.9rem; padding: 1.1rem 1.3rem; border: 1px solid var(--theme-border-subtle);
    border-radius: 14px; background: var(--theme-surface-sunken);
    display: grid; grid-template-columns: auto 1fr; column-gap: 1.4rem; row-gap: 0.35rem;
}
.legal-seller dt {
    font-family: "Geist Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--theme-text-muted); padding-top: 0.2rem;
}
.legal-seller dd { margin: 0; font-weight: 300; font-size: 0.95rem; }
.legal-seller__name { grid-column: 1 / -1; font-family: Aleo, serif; font-size: 1.15rem; color: var(--theme-text-primary); margin-bottom: 0.3rem; }
@media (max-width: 600px) {
    .legal-seller { grid-template-columns: 1fr; row-gap: 0.1rem; }
    .legal-seller dd { margin-bottom: 0.55rem; }
}

/* --- Cookie notice (informational — technical cookies only, no consent UI) ---
   An edgeless frosted plate (brina), not a card: no border, no radius, no
   shadow. The frost lives on an oversized ::before underlay — masking the
   element itself would fade the text and the OK button with it — and the
   rectangular-vignette mask completes its fade exactly at the content box, so
   the words always sit on the plate's solid core. The pseudo's insets stay
   INSIDE the notice's viewport offsets (bottom 1.1rem / 1rem side gap): a mask
   clipped by the screen edge would paint the very hard edge this replaces.
   The OK pill keeps its gold border deliberately — a control keeps its
   affordance; one crisp object on soft frost is figure/ground, not a panel
   edge. It condenses into view like breath on glass rather than sliding. */
.cookie-notice {
    position: fixed; z-index: 90; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: 1.1rem;
    /* % (the initial containing block) rather than vw: a classic scrollbar is
       inside 100vw, and the frost fade must never reach the screen edge. */
    width: min(680px, calc(100% - 2rem)); box-sizing: border-box;
    padding: 0.9rem 1.2rem;
    color: var(--theme-text-primary);
    animation: cookie-condense 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Mobile-first: the tight fade geometry is the default (the notice hugs the
   1rem viewport gap up to ~737px wide), the roomier fade applies only where
   the 680px notice provably leaves ≥1.8rem on each side, scrollbar included. */
.cookie-notice::before {
    content: ""; position: absolute; inset: -0.9rem -0.85rem -0.8rem; z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(85% 130% at 50% 100%,
            color-mix(in srgb, var(--brand-gold) 8%, transparent), transparent 70%),
        color-mix(in srgb, var(--theme-bg) 96%, transparent); /* denser core than the
            shared plate tint: footer/body text was ghosting through the notice */
    -webkit-backdrop-filter: blur(var(--frost-plate-blur)) saturate(1.08);
            backdrop-filter: blur(var(--frost-plate-blur)) saturate(1.08);
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 0.85rem, #000 calc(100% - 0.85rem), transparent),
        linear-gradient(to bottom, transparent, #000 0.9rem, #000 calc(100% - 0.8rem), transparent);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, transparent, #000 0.85rem, #000 calc(100% - 0.85rem), transparent),
        linear-gradient(to bottom, transparent, #000 0.9rem, #000 calc(100% - 0.8rem), transparent);
            mask-composite: intersect;
}
@media (min-width: 769px) {
    .cookie-notice::before {
        inset: -1rem -1.8rem -0.9rem;
        -webkit-mask-image:
            linear-gradient(to right, transparent, #000 1.8rem, #000 calc(100% - 1.8rem), transparent),
            linear-gradient(to bottom, transparent, #000 1rem, #000 calc(100% - 0.9rem), transparent);
        -webkit-mask-composite: source-in;
                mask-image:
            linear-gradient(to right, transparent, #000 1.8rem, #000 calc(100% - 1.8rem), transparent),
            linear-gradient(to bottom, transparent, #000 1rem, #000 calc(100% - 0.9rem), transparent);
                mask-composite: intersect;
    }
}
/* The keyframes must carry the centring translateX or the entrance would
   snap the notice off-centre. */
@keyframes cookie-condense {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .cookie-notice { animation: none; } }
html.motion-disabled .cookie-notice { animation: none; }
@media (prefers-reduced-transparency: reduce) {
    .cookie-notice::before {
        -webkit-backdrop-filter: none; backdrop-filter: none;
        /* The token override already raises the tint to 96%; the mask keeps
           the plate edgeless without blur. */
    }
}
.cookie-notice[hidden] { display: none; }
/* Primary ink, not secondary: 0.83rem text over a translucent plate needs the
   stronger colour to hold contrast over arbitrary page content. */
.cookie-notice__text { margin: 0; font-size: 0.83rem; font-weight: 300; line-height: 1.55; color: var(--theme-text-primary); }
.cookie-notice__text a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brand-gold); }
.cookie-notice__text a:hover { color: var(--brand-gold); }
.cookie-notice__ok {
    appearance: none; cursor: pointer; font: inherit; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--btn-font-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--theme-text-primary); background: none;
    border: 1px solid var(--brand-gold); border-radius: 999px;
    padding: 0.5rem 1.35rem; min-height: 44px; min-width: 44px;
    touch-action: manipulation;
    transition: background 0.2s, color 0.2s, transform 0.15s ease;
}
.cookie-notice__ok:hover { background: var(--brand-gold); color: #1a1408; }
.cookie-notice__ok:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.cookie-notice__ok:active { transform: scale(0.96); }
@media (max-width: 560px) {
    .cookie-notice { flex-direction: column; align-items: stretch; gap: 0.7rem; text-align: center; }
}

/* Footer legal links */
/* Bare <p> would otherwise take the base paragraph size, which
   reads oversized/inconsistent next to the fine-print legal line. Match the
   footer's refined small type so both lines read as one system. */
.footer-copyright {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--theme-text-secondary);
}

.footer-social { display: flex; gap: 1.25rem; }
.footer-social a { color: var(--theme-text-secondary); font-size: 1.15rem; opacity: 0.8; transition: opacity 0.2s, color 0.2s; }
.footer-social a:hover { opacity: 1; color: var(--brand-gold); }

/* Footer credits — finest print in the footer stack: one step smaller and
   dimmer than the legal line so attribution reads as a colophon, not a link row. */
.footer-credits {
    margin: 0;
    font-size: 0.78rem;
    color: var(--theme-text-secondary);
    opacity: 0.75;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: 0.35rem;
}
.footer-credits__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.footer-credits__item i { font-size: 0.9em; }
.footer-credits a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: color 0.2s; }
.footer-credits a:hover { color: var(--brand-gold); }

.footer-legal { font-size: 0.85rem; }
.footer-legal a { color: inherit; text-decoration: none; opacity: 0.8; transition: opacity 0.2s, color 0.2s; }
.footer-legal a:hover { opacity: 1; color: var(--brand-gold); }
.footer-legal .footer-legal__sep { opacity: 0.4; margin: 0 0.5rem; }

/* --- Booking widget --- */
.booking { border-left: 1px solid var(--theme-border-subtle); padding-left: 3.5rem; }
@media (max-width: 900px) { .booking { border-left: none; padding-left: 0; } }
.booking-note { color: var(--theme-text-secondary); font-weight: 300; font-size: 0.95rem; margin: 0 0 1.75rem; }

/* Optional "book a tasting" opt-in + collapsible booking fields */
.booking-toggle {
    display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer;
    border: 1px solid var(--theme-border-subtle); border-radius: 12px;
    padding: 1rem 1.1rem; margin: 0.5rem 0 1.5rem; transition: border-color 0.2s, background 0.2s;
}
.booking-toggle:hover { border-color: var(--brand-gold); }
.booking-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.booking-toggle__box {
    flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 6px; margin-top: 0.1rem;
    border: 1.5px solid var(--theme-border-subtle); display: inline-flex; align-items: center;
    justify-content: center; color: #fff; font-size: 0.72rem; transition: background 0.2s, border-color 0.2s;
}
.booking-toggle__box i { opacity: 0; }
html.theme-dark .booking-toggle__box { color: var(--brand-light); }
.booking-toggle:has(input:checked) { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 8%, transparent); }
.booking-toggle:has(input:checked) .booking-toggle__box { background: var(--brand-gold); border-color: var(--brand-gold); }
.booking-toggle:has(input:checked) .booking-toggle__box i { opacity: 1; }
.booking-toggle__text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.95rem; }
.booking-toggle__sub { font-size: 0.82rem; font-weight: 300; color: var(--theme-text-secondary); }

.booking-fields { display: none; }
.booking-fields.is-open { display: block; animation: bookingReveal 0.35s ease; }
@keyframes bookingReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.booking-step { border: 0; margin: 0 0 1.9rem; padding: 0; }
.booking-step__label {
    display: flex; align-items: center; gap: 0.6rem; padding: 0;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.9rem;
}
.booking-step__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.78rem; font-weight: 700;
    background: var(--brand-gold); color: #fff;
}
html.theme-dark .booking-step__n { color: var(--brand-light); }

.booking-exps { display: flex; flex-direction: column; gap: 0.7rem; }
.booking-exp {
    position: relative; display: flex; gap: 0.9rem; cursor: pointer;
    border: 1px solid var(--theme-border-subtle); border-radius: 12px; padding: 1rem 1.1rem;
    transition: border-color 0.2s, background 0.2s;
}
.booking-exp:hover { border-color: var(--brand-gold); }
.booking-exp input { position: absolute; opacity: 0; pointer-events: none; }
.booking-exp__title { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.booking-exp__blurb { display: block; font-size: 0.85rem; font-weight: 300; line-height: 1.5; color: var(--theme-text-secondary); }
.booking-exp__tick { position: absolute; top: 1rem; right: 1.1rem; color: var(--brand-gold); opacity: 0; transition: opacity 0.2s; }
.booking-exp:has(input:checked) { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 8%, transparent); }
.booking-exp:has(input:checked) .booking-exp__tick { opacity: 1; }

.booking-field { margin-bottom: 1.1rem; }
.booking-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .booking-row { grid-template-columns: 1fr; } }
.booking-flabel { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.45rem; color: var(--theme-text-primary); }
.booking-opt { color: var(--theme-text-muted); font-weight: 400; font-size: 0.82rem; }

.booking-input, .booking-date {
    width: 100%; box-sizing: border-box; padding: 0.8rem 0.95rem; min-height: 2.9rem;
    border: 1px solid var(--theme-border-subtle); border-radius: 10px;
    background: var(--theme-surface-sunken); color: var(--theme-text-primary);
    font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color 0.2s, box-shadow 0.2s;
    /* Tell the browser which theme to render native controls (incl. the date
       picker calendar + its indicator icon) in, so the icon is never invisible. */
    color-scheme: light;
}
html.theme-dark .booking-input, html.theme-dark .booking-date { color-scheme: dark; }
.booking-input:focus, .booking-date:focus {
    outline: none; border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 22%, transparent);
}
.booking-input::placeholder { color: var(--theme-text-muted); }
textarea.booking-input { resize: vertical; min-height: 6rem; }

/* Make the native date control obviously interactive: a clear, gold,
   always-visible calendar button (it can otherwise render near-invisible). */
.booking-date { cursor: pointer; }
.booking-date::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: 1; padding: 0.15rem;
    filter: invert(58%) sepia(38%) saturate(620%) hue-rotate(2deg) brightness(92%);
}
.booking-date::-webkit-calendar-picker-indicator:hover { filter: none; }

.slot-group { margin-bottom: 0.9rem; }
.slot-group__title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--theme-text-muted); margin-bottom: 0.5rem; }
.slot-group__title i { color: var(--brand-gold); }
.slot-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slot-chip {
    border: 1px solid var(--theme-border-subtle); background: transparent; color: var(--theme-text-primary);
    border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.85rem; cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.slot-chip:hover { border-color: var(--brand-gold); }
.slot-chip.is-active { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
html.theme-dark .slot-chip.is-active { color: var(--brand-light); }

.guest-stepper { display: inline-flex; align-items: center; border: 1px solid var(--theme-border-subtle); border-radius: 999px; overflow: hidden; }
.guest-btn { background: transparent; border: 0; color: var(--theme-text-primary); width: 2.6rem; height: 2.6rem; cursor: pointer; font-size: 0.9rem; transition: background 0.2s; }
.guest-btn:hover { background: var(--theme-surface-sunken); color: var(--brand-gold); }
.guest-stepper input { width: 3.2rem; text-align: center; border: 0; background: transparent; color: var(--theme-text-primary); font: inherit; font-size: 1rem; -moz-appearance: textfield; }
.guest-stepper input::-webkit-outer-spin-button, .guest-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.booking-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    margin-top: 0.5rem;
    background: var(--brand-gold); color: #fff; border: 0; border-radius: 999px;
    padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg); min-height: var(--btn-min-h);
    font: inherit; font-weight: 600; font-size: var(--btn-font-lg); cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
}
html.theme-dark .booking-submit { color: var(--brand-light); }
.booking-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-gold) 35%, transparent); }
.booking-fineprint { font-size: 0.85rem; color: var(--theme-text-muted); margin: 0.9rem 0 0; }
.booking-err { color: #b3261e; font-size: 0.8rem; margin: 0.35rem 0 0; }
html.theme-dark .booking-err { color: #f2b8b5; }

/* --- Home page: frosted-glass booking form ---------------------------------
   The home form sits over the dark background video, where the theme's primary
   text colour (near-black in light mode) would be illegible. This frost panel
   gives the form its own self-contained, palette-correct surface — translucent
   olive-on-dark with cream text and gold accents — so contrast is strong in BOTH
   themes (cream #faf9f6 on olive #2c3e2d ≈ 10:1, well past WCAG AAA). The Contact
   page form is untouched: these rules are scoped to .home-booking only. */
.home-booking {
    /* Opaque enough to carry contrast on its own — the background video varies
       from bright sky to dark foliage, and backdrop-filter can't be relied on to
       darken it — while still reading as frosted glass. */
    background: linear-gradient(160deg,
        rgba(30, 43, 33, 0.92),
        rgba(15, 21, 16, 0.95));
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    border: 1px solid color-mix(in srgb, var(--brand-gold) 38%, rgba(255, 255, 255, 0.14));
    border-radius: 20px;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    /* Base text colour for the panel: forces every descendant light, so nothing
       falls back to the (dark) theme primary colour over the dark frost. */
    color: #f3efe6;
}
/* Headings / field labels / titles → brightest cream for strong contrast. */
.home-booking h4,
.home-booking .booking-step__label,
.home-booking .booking-exp__title,
.home-booking .booking-toggle__text strong { color: #faf9f6; }
.home-booking .booking-flabel { color: #f1ede2; }
.home-booking .booking-toggle__sub,
.home-booking .booking-exp__blurb,
.home-booking .slot-group__title { color: rgba(241, 237, 226, 0.74); }
/* payment-related copy — brighter than the decorative subtitles around it */
.home-booking .booking-fineprint { color: rgba(241, 237, 226, 0.92); }
.home-booking .booking-opt { color: rgba(241, 237, 226, 0.6); }
.home-booking .slot-group__title i { color: var(--brand-gold); }

/* Inputs: translucent light fill, cream text, dark native controls. */
.home-booking .booking-input,
.home-booking .booking-date {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    color-scheme: dark;
}
.home-booking .booking-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.home-booking .booking-input:focus,
.home-booking .booking-date:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 30%, transparent);
}

/* Cards / chips / stepper: translucent surfaces that read on the frost. */
.home-booking .booking-toggle,
.home-booking .booking-exp {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
}
.home-booking .booking-toggle__box { border-color: rgba(255, 255, 255, 0.4); }
.home-booking .booking-toggle:has(input:checked),
.home-booking .booking-exp:has(input:checked) {
    border-color: var(--brand-gold);
    background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}
.home-booking .slot-chip {
    color: #f1ede2;
    border-color: rgba(255, 255, 255, 0.26);
}
.home-booking .slot-chip.is-active { color: #1a241c; }
.home-booking .guest-stepper { border-color: rgba(255, 255, 255, 0.26); }
.home-booking .guest-stepper input,
.home-booking .guest-btn { color: #f1ede2; }
.home-booking .guest-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--brand-gold); }
.home-booking .booking-err { color: #f2b8b5; }

/* =====================================================================
   BRAND MOTIF — the official Cesare Vergari mark (Flower of Life)
   Uses the real logo assets: the gold version (logo_oil_color) on light areas
   and the white version (logo_white_color) on dark areas, swapped by theme
   exactly like the footer logo. Rendered via core/_motif.html, which only emits
   markup when the admin has enabled the merchandising style
   (SiteSettings.enable_brand_motif). Subtle + motion-safe.
   ===================================================================== */
.cv-flower { position:relative; display:inline-block; width:3rem; height:3rem; pointer-events:none; }
.cv-flower__img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity 0.5s ease; }
/* Theme swap: gold on light, white on dark */
html.theme-light .cv-flower__img--white { opacity:0; }
html.theme-dark  .cv-flower__img--gold  { opacity:0; }

/* The Flower-of-Life is static decoration — no rotation/breathing (by request).
   The --spin/--breathe/--feature classes remain as harmless no-ops so existing
   markup needn't change. The colored rosette keeps its gentle colour-morph. */

/* Watermarks */
.cv-flower--watermark { position:absolute; z-index:0; opacity:0.07; }
html.theme-dark .cv-flower--watermark { opacity:0.12; }
.cv-flower--page { position:fixed; right:-3rem; bottom:-3rem; width:clamp(14rem,28vw,26rem); height:clamp(14rem,28vw,26rem); opacity:0.05; }
html.theme-dark .cv-flower--page { opacity:0.10; }

/* Footer flourish (applies on every page via base.html) */
.footer-motif { display:flex; align-items:center; justify-content:center; margin-bottom:0.25rem; }
.footer-motif .cv-flower { width:3.25rem; height:3.25rem; opacity:0.85; }

/* Elegant section divider with the mark centred between hairlines */
.cv-divider { display:flex; align-items:center; justify-content:center; gap:1.25rem; margin:1.5rem auto; max-width:22rem; }
.cv-divider::before, .cv-divider::after { content:""; flex:1 1 auto; height:1px; background:linear-gradient(to right, transparent, color-mix(in srgb, var(--brand-gold) 55%, transparent), transparent); }
.cv-divider .cv-flower { width:2.5rem; height:2.5rem; flex:0 0 auto; }

/* Motion safety: honour the site's reduced-motion switch */
html.motion-disabled .cv-flower__img { animation:none !important; }
@media (prefers-reduced-motion: reduce) { .cv-flower__img { animation:none !important; } }

/* =====================================================================
   ERROR PAGES (404 / 403) — branded, shown inside the full site shell.
   500/400 are standalone templates with their own inline styles.
   ===================================================================== */
.error-page {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9rem 1.5rem 6rem;
    text-align: center;
    background: var(--theme-bg);
    color: var(--theme-text-primary);
}
.error-card { max-width: 34rem; }
.error-emblem { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.75rem; position: relative; }
.error-emblem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.error-emblem .logo-dark { opacity: 1; }
.error-emblem .logo-light { opacity: 0; }
html.theme-dark .error-emblem .logo-dark { opacity: 0; }
html.theme-dark .error-emblem .logo-light { opacity: 1; }
.error-code {
    font-family: var(--font-longform, serif);
    font-size: clamp(3.5rem, 10vw, 6rem);
    line-height: 1; font-weight: 300; letter-spacing: 0.04em;
    color: var(--brand-gold); margin: 0;
}
.error-title {
    font-family: var(--font-longform, serif);
    font-weight: 300; font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    margin: 0.75rem 0 0.75rem; color: var(--theme-text-primary);
}
.error-text { color: var(--theme-text-secondary); font-size: 1.0625rem; line-height: 1.6; margin: 0 auto 2rem; max-width: 28rem; }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.error-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x); min-height: var(--btn-min-h);
    border-radius: 999px;
    font-size: var(--btn-font); letter-spacing: 0.02em; text-decoration: none; transition: all 0.25s ease;
}
.error-btn--primary { background: var(--brand-gold); color: #fff; }
/* Dark theme's gold is light (#cfa13f) — white text fails contrast on it. */
html.theme-dark .error-btn--primary { color: var(--brand-light); }
.error-btn--primary:hover { filter: brightness(0.92); transform: translateY(-1px); }
.error-btn--ghost { border: 1px solid color-mix(in srgb, var(--theme-text-primary) 30%, transparent); color: var(--theme-text-primary); }
.error-btn--ghost:hover { border-color: var(--brand-gold); color: var(--brand-gold); }

/* =====================================================================
   COLORED ROSETTE MOTIF — one identical shape (core/_rosette.html) used by
   the veil, detail spots and hover blooms. Multicolor, slowly morphing
   through the brand palette. Coexists with the gold/white Flower-of-Life.
   Gated at call sites by SiteSettings.enable_brand_motif. Motion-safe.
   ===================================================================== */
@keyframes cv-rmorph { 0%,100% { fill:#5d6a33; } 25% { fill:#b3a35c; } 50% { fill:#a9bd9a; } 75% { fill:#b6a8cc; } }
.cv-rosette { display:inline-block; line-height:0; width:2rem; height:2rem; pointer-events:none; vertical-align:middle; }
.cv-rosette svg { display:block; width:100%; height:100%; overflow:visible; }
.cv-petal { fill:#5d6a33; animation:cv-rmorph 9s ease-in-out infinite; }
.cv-petal--1 { animation-delay:-1.5s; }
.cv-petal--2 { animation-delay:-3s; }
.cv-petal--3 { animation-delay:-4.5s; }
.cv-petal--4 { animation-delay:-6s; }
.cv-petal--5 { animation-delay:-7.5s; }

/* Deeper, more saturated morph for the rosette when it blooms ON a gold button —
   the soft veil tones wash out against gold, so use vivid jewel tones here and a
   dark edge so the petals read crisply. Scoped to .cv-bloom (button) only. */
@keyframes cv-rmorph-bloom {     /* official brand rosette palette */
    0%,100% { fill:#a09868; }   /* gold-tan */
    25%     { fill:#506040; }   /* olive */
    50%     { fill:#a0a888; }   /* sage */
    75%     { fill:#a098a8; }   /* lavender */
}
/* Brand-palette petals with a hairline dark border so they keep definition
   against the gold button (stroke is in the rosette's -34..34 viewBox units). */
.cv-bloom .cv-petal {
    animation-name:cv-rmorph-bloom;
    stroke:rgba(18,25,19,0.55); stroke-width:2; stroke-linejoin:round;
}

/* 1 — Ambient veil (faint scatter behind a section's content) */
.cv-veil { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0.06; }
html.theme-dark .cv-veil { opacity:0.10; }
.cv-veil__i { position:absolute; transform:translate(-50%,-50%); }
.cv-veil .cv-rosette { width:100%; height:100%; }

/* 2 — Refined detail spots: eyebrow mark + list bullet.
   The eyebrow rosette is deliberately prominent (2em of the host eyebrow's
   font): it was repeatedly asked to be bigger and kept reading as a speck —
   partly because home_layouts.css carried a SMALLER local override (1.35em)
   that swallowed every increase made here. That override is gone; this is
   the single size rule for eyebrow rosettes. Don't reintroduce a per-page cap. */
.cv-eyebrow-mark { width:2em; height:2em; margin-right:0.5em; flex:0 0 auto; }
.cv-bullet { width:1.15rem; height:1.15rem; flex:0 0 auto; margin-top:0.1rem; }

/* The eyebrow mark precedes an all-caps label. `vertical-align:middle` sits it
   low against caps, and it gets worse the bigger the mark, so centre it with flex
   on every eyebrow host that carries the mark (heritage-eyebrow already does). */
.pdp__eyebrow, .contact-eyebrow, .hl-eyebrow { display:inline-flex; align-items:center; }

/* 6 — CTA reveal: a trailing arrow + rosette bloom that grow out of a button.
   They appear on hover/focus (desktop) or when the button scrolls into view on
   touch devices (mobile), where JS adds .is-revealed (see base.html). Zero layout shift. */
.cv-bloom-host {
    contain: layout style;
}
/* The marks take NO space until they are revealed, and the button grows into
   them. They used to hold their slot permanently so the button never resized —
   but that left roughly 3.8em of blank inside every CTA, with the label pushed
   off-centre and a gap on its right. The button only looked deliberate while
   hovered.

   (This was invisible until the {% icon %} tag stopped discarding class=: with
   .cv-cta__arrow inert the arrow was simply always on show, at .vi's size, and
   nobody saw the reservation it was supposed to be hiding in.)

   Growing on hover does move a neighbouring button. That is the lesser of the
   two, and it is bounded: only the width of an arrow and a rosette, only while
   pointed at, and .cv-bloom-host already contains its layout. */
.cv-bloom {
    display: inline-flex; align-items: center; vertical-align: middle;
    width: 1.15em; height: 1.15em;
    max-width: 0; margin-left: 0; overflow: hidden;
    opacity: 0;
    transform: scale(0.6) rotate(-15deg); pointer-events: none;
    transition: opacity 0.35s ease,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-bloom .cv-rosette { width: 1.15em; height: 1.15em; display: block; }
.cv-cta__arrow {
    display: inline-flex; align-items: center;
    max-width: 0; margin-left: 0; overflow: hidden;
    opacity: 0;
    transform: translateX(-0.35em);
    transition: opacity 0.35s ease,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-bloom-host:hover .cv-bloom,
.cv-bloom-host:focus-visible .cv-bloom,
.cv-bloom-host.is-revealed .cv-bloom {
    opacity: 1; transform: scale(1) rotate(0deg);
    max-width: 1.15em; margin-left: 0.55em;
}
.cv-bloom-host:hover .cv-cta__arrow,
.cv-bloom-host:focus-visible .cv-cta__arrow,
.cv-bloom-host.is-revealed .cv-cta__arrow {
    opacity: 1; transform: translateX(0);
    max-width: 1.6em; margin-left: 0.5em;
}
/* The arrow is a .vi, which is sized from the admin icon-scale. Inside a CTA
   it must track the label instead, or a large scale reopens the same gap. */
.cv-cta__arrow.vi { width: 1.1em; height: 1.1em; }

/* Motion safety */
html.motion-disabled .cv-petal { animation:none !important; }
@media (prefers-reduced-motion: reduce) {
    .cv-bloom, .cv-cta__arrow { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .cv-petal { animation:none !important; } }

/* =====================================================================
   OUR HERITAGE PAGE — CINEMATIC full-bleed
   Every scene fills the viewport, the photograph slowly drifts/zooms
   (Ken Burns), and copy floats at the foot over a soft scrim. Pull-quotes
   become centred lines over a darkened frame of the scene you were just in.
   Gentle scroll-snap lets each scene settle into place. No bands, no dividers.
   ===================================================================== */
.heritage-page {
    position: relative;
    background: var(--heritage-dark);
    --heritage-dark: #0d120c;          /* deep cinema black-green */
    --heritage-rgb: 13,17,12;          /* ^ as rgb, for scrims */
    --heritage-gold: #e6c46e;          /* luminous gold accent */
    --heritage-gold-deep: #c9a24a;     /* deeper gold for rules on dark */
    --heritage-glow: rgba(230,196,110,0.12);
}
/* Each scene snaps to fill the viewport. `mandatory` (not proximity) guarantees
   one scene always wins — you never rest showing slivers of two — on both touch
   and desktop. Scoped to the heritage page; disabled for reduced motion below. */
html:has(.heritage-page) { scroll-snap-type: y mandatory; }
.heritage-hero, .heritage-section, .heritage-quote { scroll-snap-align: start; }
/* The short footer can't host a full-height snap point, so let it settle at the
   document end (its bottom to the viewport bottom) rather than snapping back up. */
html:has(.heritage-page) .luxury-footer { scroll-snap-align: end; }
/* Brand "light" graphics — a soft warm glow pooled behind copy/quotes, plus a
   brighter ambient rosette veil, lift the dark canvas without abandoning it. */
.heritage-page .cv-veil { opacity: 0.14 !important; }
/* Per-band veils sit ABOVE the photo + scrim but BELOW the copy (z-index:2),
   so the rosettes drift across the photographic sections while text stays
   fully legible on top. The section is the containing block + clips overflow. */
.heritage-hero > .cv-veil,
.heritage-section > .cv-veil { z-index: 2; }
/* The page now shares the dark theme with home (so the navbar + footer match),
   but its body carries a self-contained palette: pin the theme-reactive accents
   to the heritage tones so the body looks identical whatever the theme. */
.heritage-page .heritage-copy.border-l-faded::before {
    background: linear-gradient(to bottom, transparent 0%, var(--heritage-gold) 20%, var(--heritage-gold) 80%, transparent 100%) !important;
}
.heritage-page .cv-flower .cv-flower__img--white { opacity: 0 !important; }
.heritage-page .cv-flower .cv-flower__img--gold  { opacity: 1 !important; }

/* Hero ---------------------------------------------------------------- */
.heritage-hero {
    position: relative;
    min-height: 100vh;          /* fallback for browsers without dynamic units */
    min-height: 100dvh;         /* tracks the live viewport so the scene always fills it */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 9rem 1.5rem 7rem;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    color: #fff; overflow: hidden;
}
.heritage-hero__inner { position: relative; z-index: 2; max-width: 60rem; }
/* Brand mark above the eyebrow, mirroring the home hero. */
.heritage-hero__mark {
    display: block; margin: 0 auto 1.5rem;
    filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55));
}
/* Background video layer + gradient scrim (scrim sits above the video so the
   copy stays legible; poster falls back to the hero photo while loading). */
.heritage-hero__video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    pointer-events: none; background: #121913;
}
.heritage-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(85% 75% at 50% 40%, var(--heritage-glow) 0%, rgba(230,196,110,0) 60%),
        linear-gradient(180deg, rgba(var(--heritage-rgb), var(--pv-veil-start, 50%)) 0%, rgba(var(--heritage-rgb),0.30) 45%, rgba(var(--heritage-rgb), var(--pv-veil-end, 62%)) 100%);
}
/* A scene switched to "video" media mode plays a full-bleed background clip in
   place of the still — same layer as the Ken Burns photo (z-index 0), under the
   veil and scrim. The copy (z-index 2) stays legible over it. */
.heritage-section__video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    pointer-events: none; background: #121913;
}
.heritage-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--heritage-gold);
    margin-bottom: 1.1rem;
}
.heritage-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 300; line-height: 1.12;
    font-size: clamp(2.2rem, 5vw, 3.9rem);
    margin: 0 0 1.4rem; color: #fff;
    text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}
.heritage-title em { font-style: italic; color: var(--heritage-gold); }
.heritage-lede {
    max-width: 42rem; margin: 0 auto;
    font-weight: 300; line-height: 1.75;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

/* Cinematic full-viewport scenes -------------------------------------- */
.heritage-section {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; align-items: flex-end; justify-content: flex-start;
    padding: clamp(3rem,10vh,8rem) clamp(1.5rem,7vw,7rem) clamp(3.5rem,11vh,8rem);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: #121913;          /* graceful fallback if photo absent */
    color: #fff; overflow: hidden;
}
.heritage-section--reverse { justify-content: flex-end; }
/* Ken Burns layer — inherits the section's inline background-image. The zoom is
   triggered when the scene enters the viewport (.in-view, added by JS) and uses a
   front-loaded ease-out curve: it pushes in quickly, then keeps drifting ever more
   slowly the longer you dwell. Resets when the scene leaves so it re-triggers. */
.heritage-section::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: inherit; background-size: cover; background-position: center;
    transform: scale(1.04);
    transition: transform 17s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.heritage-section.in-view::before { transform: scale(1.2) translate3d(0, -1.4%, 0); }
/* Cinematic scrim — darkest at the foot where the copy sits, plus a side wash
   on the text side so the words stay legible over any frame. */
.heritage-section::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(var(--heritage-rgb), var(--pv-veil-start, 45%)) 0%, rgba(var(--heritage-rgb),0.10) 24%, rgba(var(--heritage-rgb),0) 40%, rgba(var(--heritage-rgb),0.42) 66%, rgba(var(--heritage-rgb), var(--pv-veil-end, 86%)) 100%),
        linear-gradient(90deg, rgba(var(--heritage-rgb),0.74) 0%, rgba(var(--heritage-rgb),0.30) 44%, rgba(var(--heritage-rgb),0) 72%);
}
.heritage-section--reverse::after {
    background:
        linear-gradient(180deg, rgba(var(--heritage-rgb), var(--pv-veil-start, 45%)) 0%, rgba(var(--heritage-rgb),0.10) 24%, rgba(var(--heritage-rgb),0) 40%, rgba(var(--heritage-rgb),0.42) 66%, rgba(var(--heritage-rgb), var(--pv-veil-end, 86%)) 100%),
        linear-gradient(270deg, rgba(var(--heritage-rgb),0.74) 0%, rgba(var(--heritage-rgb),0.30) 44%, rgba(var(--heritage-rgb),0) 72%);
}
/* "Veil over the media" toggle OFF (Manage → Pages): drop the legibility scrim
   over this scene's video/photo so the imagery shows through undimmed. The copy
   keeps its own text-shadow. Same specificity as the base/mobile ::after rules
   (one class + one pseudo), so !important guarantees the scrim is removed at
   every width even if a future mobile ::after tweak sets `display`. */
.heritage-hero--no-veil::after,
.heritage-section--no-veil::after { display: none !important; }
.heritage-copy { position: relative; z-index: 3; width: 100%; max-width: 40rem; }
.heritage-copy.border-l-faded { padding-left: 2rem; }
.heritage-kicker {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--heritage-gold);
    margin-bottom: 0.9rem;
}
/* Favoloso product signature mark. The source PNG is black ink on opaque white,
   so we use the mark's silhouette as a CSS mask and paint it with the heritage
   gold — the white drops out and it reads as a luminous maker's mark over the
   photographic scrim. */
.heritage-signature {
    display: block;
    height: clamp(1.9rem, 5.5vw, 3.4rem);
    width: auto; max-width: 100%;
    margin: -0.1rem 0 1.2rem;
    background-color: var(--heritage-gold);
    -webkit-mask: var(--sig) no-repeat left center / contain;
            mask: var(--sig) no-repeat left center / contain;
    filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55));
}
/* Favoloso is the flagship mark — give it a touch more presence */
.heritage-signature--favoloso { height: clamp(2.4rem, 7vw, 4.4rem); }

.heritage-h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 300; line-height: 1.18;
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    margin: 0 0 1.4rem; color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.heritage-h2 em { font-style: italic; color: var(--heritage-gold); }
.heritage-p {
    font-weight: 300; line-height: 1.8;
    font-size: 1.02rem; margin: 0 0 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* Pull-quote scenes — a single line held in the centre of the screen over a
   darkened, slowly drifting frame of the scene just viewed. The words dominate;
   a hairline gold rule + brand rosette close the thought. */
.heritage-quote {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.7rem; text-align: center; padding: 6rem 1.5rem; overflow: hidden;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: #121913; color: #fff;
}
.heritage-quote::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: inherit; background-size: cover; background-position: center;
    transform: scale(1.04);
    transition: transform 19s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.heritage-quote.in-view::before { transform: scale(1.17) translate3d(0, -1%, 0); }
.heritage-quote::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /* Heavy, even darkening so the line reads as a held cinematic title. */
    background:
        radial-gradient(70% 60% at 50% 50%, rgba(var(--heritage-rgb),0.40) 0%, rgba(var(--heritage-rgb),0.72) 100%),
        linear-gradient(180deg, rgba(var(--heritage-rgb),0.66) 0%, rgba(var(--heritage-rgb),0.50) 50%, rgba(var(--heritage-rgb),0.74) 100%);
}
.heritage-quote p {
    position: relative; z-index: 3;
    max-width: 46rem; margin: 0 auto;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic; font-weight: 300; line-height: 1.4;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    color: #fff;
    text-shadow: 0 2px 30px rgba(0,0,0,0.7);
}
/* Hairline gold rule with the brand rosette centred. */
.heritage-quote__rule {
    position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; width: min(22rem, 80%);
}
.heritage-quote__rule::before,
.heritage-quote__rule::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, rgba(230,196,110,0.6), transparent);
}
.heritage-quote__mark { width: 28px; height: 28px; flex: 0 0 auto; opacity: 0.92;
    filter: drop-shadow(0 1px 8px rgba(0,0,0,0.5)); }

.heritage-cta { display: inline-flex; margin-top: 1.9rem; }

/* Honour reduced-motion: hold the frame still and turn off snapping. */
@media (prefers-reduced-motion: reduce) {
    .heritage-section::before, .heritage-quote::before,
    .heritage-section.in-view::before, .heritage-quote.in-view::before {
        transition: none; transform: scale(1.06);
    }
    html:has(.heritage-page) { scroll-snap-type: none; }
}

@media (max-width: 768px) {
    /* Soften the snap on phones: 'mandatory' fights intra-scene scrolling, so long
       admin-entered copy on a shrunk viewport becomes hard to reach. 'proximity'
       keeps the snap feel while letting a tall scene scroll freely. */
    html:has(.heritage-page) { scroll-snap-type: y proximity; }
    /* Tighter type + padding so each scene's copy comfortably fits within one
       viewport (scenes are full 100dvh). */
    .heritage-hero { padding: 6.5rem 1.25rem 3.5rem; }
    .heritage-hero__mark { margin-bottom: 1rem; }
    .heritage-title { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-bottom: 1rem; }
    .heritage-lede { font-size: 1rem; line-height: 1.6; }
    .heritage-h2 { font-size: clamp(1.55rem, 7vw, 2.1rem); margin-bottom: 1rem; }
    .heritage-p { font-size: 0.95rem; line-height: 1.62; margin-bottom: 0.75rem; }
    .heritage-section {
        padding: 6vh 1.4rem 8vh;
        justify-content: flex-start;       /* copy always sits bottom-left on mobile */
    }
    .heritage-section--reverse { justify-content: flex-start; }
    /* One consistent left/bottom wash on narrow screens. */
    .heritage-section::after,
    .heritage-section--reverse::after {
        background:
            linear-gradient(180deg, rgba(var(--heritage-rgb),0.4) 0%, rgba(var(--heritage-rgb),0) 34%, rgba(var(--heritage-rgb),0.5) 64%, rgba(var(--heritage-rgb),0.9) 100%),
            linear-gradient(90deg, rgba(var(--heritage-rgb),0.6) 0%, rgba(var(--heritage-rgb),0) 70%);
    }
    .heritage-copy { max-width: none; }
    .heritage-copy.border-l-faded { padding-left: 1.25rem; }
    .heritage-quote { padding: 4rem 1.25rem; }
    .heritage-quote p { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}

/* --- Payment intelligence (Stripe Radar) pills on the order workspace --- */
.risk-pill {
    display: inline-block; font-size: .68rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .12rem .5rem; border-radius: 999px; border: 1px solid;
}
.risk-pill--ok   { color: #2e7d32; border-color: color-mix(in srgb, #2e7d32 45%, transparent);
                   background: color-mix(in srgb, #2e7d32 8%, transparent); }
.risk-pill--warn { color: #916826; border-color: color-mix(in srgb, #916826 50%, transparent);
                   background: color-mix(in srgb, #916826 10%, transparent); }
.risk-pill--high { color: #b02018; border-color: color-mix(in srgb, #b02018 50%, transparent);
                   background: color-mix(in srgb, #b02018 10%, transparent); }

/* --- Product type picker + type chip (Manage → Products → New) --------------
   Step one of creating a product: choose the kind of thing it is. Only shown
   when more than one catalogue ProductType exists, so today it never appears. */
.manage-lede {
    color: var(--theme-text-muted);
    margin: 0 0 1.5rem;
    max-width: 52ch;
}
.type-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}
.type-picker__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.5rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    background: var(--theme-surface-sunken);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.type-picker__card:hover,
.type-picker__card:focus-visible {
    border-color: var(--brand-gold);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .type-picker__card { transition: none; }
    .type-picker__card:hover, .type-picker__card:focus-visible { transform: none; }
}
.type-picker__icon { font-size: 1.6rem; color: var(--brand-gold); margin-bottom: 0.35rem; }
.type-picker__name { font-weight: 600; }
.type-picker__meta { font-size: 0.85rem; color: var(--theme-text-muted); }

.field--type { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 999px;
    background: var(--theme-surface-sunken);
    font-size: 0.9rem;
}
.type-chip i { color: var(--brand-gold); }
.field__hint-link { font-size: 0.85rem; text-decoration: underline; }

/* --- Product type manager (Manage → Types) ----------------------------------
   Mirrors .product-table: a role="table" grid, not a real <table>. */
.type-table {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    overflow: hidden;
}
.type-table__head,
.type-table__row {
    display: grid;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
}
.type-table--5 .type-table__head,
.type-table--5 .type-table__row { grid-template-columns: 2.4fr 0.8fr 0.8fr 1fr 0.8fr; }
.type-table--6 .type-table__head,
.type-table--6 .type-table__row { grid-template-columns: repeat(5, 1fr) 0.6fr; }
.type-table__head {
    background: var(--theme-surface-sunken);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-muted);
}
.type-table__row + .type-table__row { border-top: 1px solid var(--theme-border-subtle); }
.type-table__row input[type="text"] {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 8px;
    background: transparent;
    color: inherit;
}

/* One editable field of a product type. */
.attr-row {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.85rem;
    background: var(--theme-surface-sunken);
}
.attr-row__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
}
.field--narrow { max-width: 130px; }
.field--icon { min-width: 140px; max-width: 175px; }
.attr-row__foot {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--theme-border-subtle);
    font-size: 0.88rem;
}
.attr-check { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.attr-check--danger { color: #b02018; margin-inline-start: auto; }
.attr-row__key { color: var(--theme-text-muted); font-size: 0.82rem; }
.attr-row__key code { font-size: 0.82rem; }
.attr-row__link { display: inline-flex; align-items: center; gap: 0.35rem; }
.attr-row__remove {
    background: none; border: 0; color: #b02018; cursor: pointer;
    margin-inline-start: auto; font: inherit;
}

/* The visibility matrix: which fields the storefront shows, per surface. */
.slot-matrix {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 1rem;
}
.slot-matrix__head,
.slot-matrix__row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
}
.slot-matrix__head {
    background: var(--theme-surface-sunken);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-muted);
}
.slot-matrix__row + .slot-matrix__row { border-top: 1px solid var(--theme-border-subtle); }
.slot-matrix__derived {
    margin-inline-start: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-gold);
}
.slot-matrix__na { color: var(--theme-text-muted); }

@media (max-width: 720px) {
    .slot-matrix__head, .slot-matrix__row { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .type-table__head { display: none; }
    .type-table__row { grid-template-columns: 1fr 1fr; }
}

/* --- Type tree: types with their products cascaded (Manage → Types) ----------
   An accordion, not a table. Each type expands to reveal the products that belong
   to it — the type is the spine, products hang off it. Same <details> reset the
   filter rail uses: the browser paints <details> with a default summary marker, and
   these unlayered rules own the look instead. Surfaces follow the one system —
   a sunken card on the page, raised panels (products, mark) on top of it. */
.type-tree { display: grid; gap: 0.85rem; margin-top: 1.25rem; }

.type-card {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    background: var(--theme-surface-sunken);
    overflow: hidden;
}
.type-card.is-hidden { opacity: 0.72; }
.type-card__head::-webkit-details-marker { display: none; }
.type-card__head::after,
.type-card__head::marker { content: none; display: none; }

.type-card__head {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 1rem 1.25rem;
    cursor: pointer; list-style: none;
}
.type-card__head:hover { background: color-mix(in srgb, var(--brand-gold) 6%, transparent); }
.type-card__mark {
    width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 10px;
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-subtle);
    color: var(--brand-gold); font-size: 1.05rem;
}
.type-card__id { display: flex; flex-direction: column; min-width: 0; }
.type-card__name { font-weight: 600; font-size: 1rem; }
.type-card__alt { font-size: 0.8rem; color: var(--theme-text-muted); }
.type-card__tags {
    display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
    margin-inline-start: auto;
}
.type-card__stat { font-size: 0.82rem; color: var(--theme-text-muted); white-space: nowrap; }
.type-card__stat strong { color: var(--theme-text-primary); }
.type-card__chev {
    font-size: 0.8rem; color: var(--theme-text-muted);
    transition: transform 0.2s ease;
}
.type-card[open] .type-card__chev { transform: rotate(180deg); }

/* Dense chips for the header tags and the storefront preview. */
.type-card__tags .type-chip,
.type-preview .type-chip { font-size: 0.72rem; padding: 0.25rem 0.6rem; gap: 0.35rem; }
.type-chip--kind { background: color-mix(in srgb, var(--brand-gold) 12%, transparent); border-color: transparent; color: var(--theme-text-secondary); }
.type-chip--on { color: #2f7d4f; border-color: color-mix(in srgb, #2f7d4f 40%, transparent); }
.type-chip--off, .type-chip--sys { color: var(--theme-text-muted); }
.type-chip--always { border-style: dashed; color: var(--theme-text-muted); }

.type-card__body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--theme-border-subtle); }
.type-preview {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.9rem 0 0.5rem;
}
.type-preview__lead { font-size: 0.82rem; color: var(--theme-text-muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.type-preview__lead i { color: var(--brand-gold); }
.type-preview__chips { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.type-preview__note { font-size: 0.8rem; color: var(--theme-text-muted); font-style: italic; }

.type-kids { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.type-kid {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px;
    background: var(--theme-surface-raised);
    text-decoration: none; color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.type-kid:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 45%, transparent);
    background: color-mix(in srgb, var(--brand-gold) 6%, var(--theme-surface-raised));
}
.type-kid__thumb {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 8px; overflow: hidden;
    background: var(--theme-surface-sunken); color: var(--brand-gold);
}
.type-kid__thumb img { width: 100%; height: 100%; object-fit: cover; }
.type-kid__main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.type-kid__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-kid__sub { font-size: 0.8rem; color: var(--theme-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-kid__price { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.type-kid__edit { color: var(--theme-text-muted); }
.type-kid:hover .type-kid__edit { color: var(--brand-gold); }

.type-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 1.5rem; margin-top: 0.4rem; text-align: center;
    color: var(--theme-text-muted);
    border: 1px dashed var(--theme-border-subtle); border-radius: 10px;
}
.type-empty i { font-size: 1.6rem; color: var(--brand-gold); opacity: 0.6; }
.type-empty p { margin: 0; font-size: 0.9rem; }

.type-card__foot { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--theme-border-subtle); }
.type-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.type-card__syshint { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--theme-text-muted); }
.type-card__syshint i { color: var(--brand-gold); }

/* Delete confirmation: the cascade manifest and the type-the-name gate. */
.delete-manifest { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.5rem; }
.delete-manifest li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; }
.delete-manifest i { color: #b02018; width: 1.1rem; text-align: center; flex: 0 0 auto; }
.delete-manifest__split { color: var(--theme-text-muted); font-size: 0.85rem; }
/* The reassuring line: what deletion leaves behind, in green rather than danger red. */
.delete-manifest__keep { color: var(--theme-text-secondary); }
.delete-manifest__keep i { color: #2f7d4f; }

/* --- In-context help: the (i) triggers (_help.html) and their overlays --------
   A small info button that sits inline next to a label or section title and opens
   the matching native <dialog> from _help_dialogs.html. */
.help-dot {
    display: inline-grid; place-items: center;
    width: 1.15rem; height: 1.15rem; margin-inline-start: 0.35rem; padding: 0;
    vertical-align: middle; flex: 0 0 auto;
    background: none; border: 0; cursor: help;
    color: var(--theme-text-muted); font-size: 0.82rem; line-height: 1;
    border-radius: 999px; transition: color 0.15s ease, background-color 0.15s ease;
}
.help-dot:hover, .help-dot:focus-visible {
    color: var(--brand-gold);
    background: color-mix(in srgb, var(--brand-gold) 14%, transparent);
    outline: none;
}
/* Keep the dot from inflating a section title's line-height. */
.form-section__title .help-dot, .manage-lede .help-dot { font-size: 0.8rem; }

.help-dialog::part(body) { padding-top: 0.5rem; }
.help-body { font-size: 0.94rem; line-height: 1.6; color: var(--theme-text-secondary); }
.help-body > p { margin: 0 0 0.8rem; }
.help-body > p:last-child { margin-bottom: 0; }
.help-body strong { color: var(--theme-text-primary); font-weight: 600; }
.help-list { margin: 0 0 0.9rem; padding-inline-start: 0; list-style: none; display: grid; gap: 0.5rem; }
.help-list li {
    padding-inline-start: 0.9rem; position: relative;
}
.help-list li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 0.62em;
    width: 0.32rem; height: 0.32rem; border-radius: 50%;
    background: color-mix(in srgb, var(--brand-gold) 70%, transparent);
}
/* A worked example, set apart on a soft gold wash. */
.help-eg {
    margin: 0.4rem 0 0.9rem; padding: 0.8rem 0.95rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-gold) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-gold) 22%, transparent);
    font-size: 0.9rem; line-height: 1.55; color: var(--theme-text-secondary);
}
.help-eg__tag {
    display: inline-block; margin-inline-end: 0.4rem;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
    color: var(--brand-gold);
}
.help-note {
    font-size: 0.86rem; color: var(--theme-text-muted); font-style: italic;
    border-top: 1px dashed var(--theme-border-subtle); padding-top: 0.7rem; margin-top: 0.2rem;
}

.product-form__aside-title {
    display: flex; align-items: center;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--theme-text-muted); font-weight: 600; margin: 0 0 0.75rem;
}
.delete-alt { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--theme-text-muted); margin: 0.5rem 0 1.25rem; }
.linkish {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--brand-gold); text-decoration: underline;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.delete-confirm { border-top: 1px solid var(--theme-border-subtle); padding-top: 1.1rem; }
.delete-confirm__field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; max-width: 22rem; }
.delete-confirm__field span { font-size: 0.88rem; color: var(--theme-text-secondary); }
.delete-confirm__field input {
    padding: 0.6rem 0.7rem; border: 1px solid var(--theme-border-subtle);
    border-radius: 8px; background: var(--theme-bg); color: inherit; font: inherit;
}

@media (max-width: 720px) {
    .type-card__head { flex-wrap: wrap; gap: 0.6rem 0.9rem; }
    .type-card__tags { order: 4; width: 100%; margin-inline-start: 0; }
    .type-kid__sub { display: none; }
    .sec-digest-head { flex-wrap: wrap; gap: 0.75rem; }
    .sec-digest-head__aside { width: 100%; justify-content: space-between; margin-inline-start: 0; }
}

/* --- Security & Audit Workspace (.sec-workspace, .sec-card, etc.) --- */
.sec-workspace {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.sec-card {
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 16px;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease;
}
.sec-card:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 35%, var(--theme-border-subtle));
}
.sec-card__header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.sec-card__header-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-subtle);
    color: var(--brand-gold);
    font-size: 1.1rem;
}
.sec-card__header-text {
    flex: 1;
    min-width: 0;
}
.sec-card__title {
    margin: 0;
    font-family: var(--font-longform, serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    line-height: 1.3;
}
.sec-card__desc {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: var(--theme-text-secondary);
    line-height: 1.45;
}

/* Telemetry Pulse Metrics Tiles */
.sec-pulse {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    min-height: 4.8rem;
    contain: layout style;
}
.sec-pulse__tile {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1 1 9rem;
    min-width: 8.5rem;
    max-width: 14rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-raised);
    color: var(--theme-text-primary);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.sec-pulse__tile:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 55%, transparent);
    background: var(--theme-surface-raised);
    transform: translateY(-1px);
}
.sec-pulse__tile.is-active {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 1px var(--brand-gold), 0 4px 12px -3px rgba(0, 0, 0, 0.15);
}
.sec-pulse__tile--warn .sec-pulse__n { color: #b02018; }
.sec-pulse__n { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.sec-pulse__label { font-size: 0.78rem; font-weight: 600; color: var(--theme-text-primary); }
.sec-pulse__hint {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
}

@media (max-width: 640px) {
    .sec-pulse {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 0.6rem;
        min-height: auto;
    }
    .sec-pulse__tile {
        min-width: 0;
        max-width: none;
        padding: 0.7rem 0.85rem;
    }
}

/* Security Subpanels */
.sec-subpanel {
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    margin-top: 1.15rem;
}
.sec-subpanel--warn {
    border-left: 3px solid var(--brand-gold);
}
.sec-subpanel__head {
    margin-bottom: 0.85rem;
}
.sec-subpanel__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.sec-subpanel__desc {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

/* Security Table Styling (Desktop + Mobile Responsive) */
.sec-table-wrap {
    overflow-x: auto;
    margin-top: 0.75rem;
    contain: layout style;
}
.sec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    table-layout: fixed;
}
.sec-table th {
    text-align: left;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    white-space: nowrap;
}
.sec-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sec-table tr {
    contain: layout style;
}
.sec-table tr:hover td {
    background: color-mix(in srgb, var(--brand-gold) 4%, transparent);
}
.sec-table tr.is-focus td {
    background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
    font-weight: 600;
}
.sec-cell-email span,
.sec-cell-ua span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .sec-table thead { display: none; }
    .sec-table, .sec-table tbody, .sec-table tr, .sec-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .sec-table tr {
        background: var(--theme-surface-raised, var(--theme-surface-sunken));
        border: 1px solid var(--theme-border-subtle);
        border-radius: 12px;
        padding: 0.85rem 1rem;
        margin-bottom: 0.85rem;
        box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.04);
        contain: layout style;
    }
    .sec-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.35rem 0;
        border-bottom: 1px dashed color-mix(in srgb, var(--theme-border-subtle) 60%, transparent);
        font-size: 0.85rem;
        text-align: right;
        white-space: normal;
    }
    .sec-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .sec-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--theme-text-muted);
        text-align: left;
        padding-right: 0.75rem;
        flex-shrink: 0;
    }
    .sec-table td.sec-deny,
    .sec-table td.sec-actions-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding-top: 0.5rem;
    }
    .sec-table td.sec-deny::before,
    .sec-table td.sec-actions-cell::before {
        margin-bottom: 0.2rem;
    }
}

.sec-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.sec-search--inline {
    margin-top: 0.75rem;
    margin-bottom: 0.85rem;
}
.sec-search input[type=search],
.sec-search input[type=text],
.sec-search input[type=email],
.sec-search select {
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--theme-text-primary);
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 8px;
}
.sec-search input[type=search] { flex: 1; min-width: 220px; max-width: 340px; }
.sec-search input[type=text],
.sec-search input[type=email] { flex: 1; min-width: 180px; max-width: 300px; }

.sec-kind {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.14rem 0.5rem;
    border-radius: 5px;
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
}
.sec-kind--warn {
    color: #b02018;
    border-color: color-mix(in srgb, #b02018 45%, transparent);
}
.sec-ua { font-size: 0.75rem; color: var(--theme-text-muted); }

.sec-deny { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.sec-deny form { display: inline; }
.sec-deny__btn {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    color: var(--theme-text-muted);
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    transition: all 0.15s ease;
}
.sec-deny__btn:hover {
    color: #b02018;
    border-color: color-mix(in srgb, #b02018 45%, transparent);
    background: color-mix(in srgb, #b02018 8%, transparent);
}

/* Defensive Shields & Config Form */
.sec-config-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sec-grid-fields {
    display: grid;
    /* min() so a column can never demand more than the panel is wide — below
       ~300px the fixed 240px floor plus padding used to force a sideways
       scroll on the whole card. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.85rem 1rem;
    margin-top: 0.65rem;
}
.sec-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Grid stretches every cell in a row to the same height, so pushing the
       input to the bottom keeps a whole row of inputs on one line even when
       one label wraps to two (e.g. "Label uploads / proof exports per hour"
       at five columns). */
    justify-content: space-between;
}
.sec-field__label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
}
/* Hint tooltips anchor to their FIELD, not to the little (i) glyph.
   Anchored to the glyph, a fixed 15.5rem box opened from a right-hand column
   ran off the screen — measured at 360px every one of them did, so the
   explanations were unreadable on a phone, and one escaped even at 1440px.
   Pinned to the column it belongs to, it is exactly as wide as that column
   and can't leave it at any viewport. */
.sec-field { position: relative; }
.sec-field .hint { position: static; }
.sec-field .hint__box {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}
.sec-field input[type=number],
.sec-field input[type=text],
.sec-field select {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.86rem;
    color: var(--theme-text-primary);
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 8px;
}
.sec-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}
.sec-toggles-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}
/* Switches that carry their own explanation. A bare toggle row only described
   itself through a title= tooltip, which never appears on touch — so on a
   phone the security switches were unlabelled beyond two or three words.
   Each one is now a card: switch, name, and a sentence saying what turning it
   off actually does. Same responsive grid as .sec-grid-fields beside it. */
.sec-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: 0.75rem;
    margin-top: 0.65rem;
}
.sec-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px;
    background: var(--theme-surface-sunken);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.sec-toggle:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--theme-border-subtle));
}
/* Decorative only — the switch itself always states the truth, so browsers
   without :has() lose nothing. */
.sec-toggle:has(.lux-toggle__input:checked) {
    border-color: color-mix(in srgb, var(--brand-gold) 55%, var(--theme-border-subtle));
    background: color-mix(in srgb, var(--brand-gold) 6%, var(--theme-surface-sunken));
}
.sec-toggle:has(.lux-toggle__input:focus-visible) {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}
.sec-toggle__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.sec-toggle__name {
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--theme-text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}
.sec-toggle__desc {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--theme-text-secondary);
}
/* A standing fact the admin can't change, set apart from the switches above
   it so it doesn't read as another option. */
.sec-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
    border-left: 3px solid var(--brand-gold);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--brand-gold) 7%, transparent);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--theme-text-secondary);
}
.sec-note .vi { flex: 0 0 auto; margin-top: 0.15rem; color: var(--brand-gold); }
.sec-config-form__actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    color: var(--theme-text-muted);
    cursor: help;
    vertical-align: middle;
}
.hint > svg, .hint > i { width: 0.95em; height: 0.95em; opacity: 0.7; }
.hint:hover, .hint:focus { color: var(--theme-text-primary); outline: none; }
.hint:hover > svg, .hint:focus > svg { opacity: 1; }
.hint__box {
    position: absolute;
    top: calc(100% + 8px);
    left: -0.5rem;
    width: 15.5rem;
    max-width: 80vw;
    background: var(--theme-bg);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 9px;
    padding: 0.65rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: 0 10px 26px rgba(0,0,0,0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity 0.13s ease, transform 0.13s ease;
    z-index: 30;
    pointer-events: none;
    text-align: left;
    white-space: normal;
}
.hint:hover .hint__box, .hint:focus .hint__box, .hint:focus-within .hint__box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) { .hint__box { transition: none; } }

@media (max-width: 640px) {
    .sec-card { padding: 1.1rem 1rem; border-radius: 14px; }
    .sec-card__header { gap: 0.7rem; }
    .sec-card__header-icon { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
    .sec-card__title { font-size: 1.1rem; }
    .sec-subpanel { padding: 0.95rem 0.95rem; }
    .sec-config-form__actions .btn { width: 100%; }
    /* One column of full-width cards: two 17.5rem tracks don't fit, and a
       half-width switch label wraps to three lines. */
    .sec-toggle-grid { grid-template-columns: 1fr; gap: 0.65rem; }
    .sec-toggle { padding: 0.75rem 0.8rem; }
}

/* --- Security Digests & AI Threat Reports --- */
.sec-digest-card {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 14px;
    background: var(--theme-surface-sunken);
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sec-digest-card:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--theme-border-subtle));
}
.sec-digest-card summary { list-style: none; }
.sec-digest-card summary::-webkit-details-marker,
.sec-digest-card summary::marker { display: none; content: none; }
.sec-digest-head {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.35rem; cursor: pointer; user-select: none;
    transition: background 0.2s ease;
}
.sec-digest-head:hover {
    background: color-mix(in srgb, var(--brand-gold) 5%, transparent);
}
.sec-digest-head__mark {
    width: 2.6rem; height: 2.6rem; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 10px;
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-subtle);
    color: var(--brand-gold); font-size: 1.15rem;
}
.sec-digest-head__content {
    display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
}
.sec-digest-head__title {
    margin: 0; font-family: var(--font-longform, serif);
    font-size: 1.05rem; font-weight: 500; color: var(--theme-text-primary);
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.sec-digest-head__desc {
    margin: 0; font-size: 0.82rem; color: var(--theme-text-secondary);
}
.sec-digest-head__aside {
    display: flex; align-items: center; gap: 0.75rem; margin-inline-start: auto;
}
.sec-digest-head__stat {
    font-size: 0.82rem; color: var(--theme-text-muted); white-space: nowrap;
}
.sec-digest-head__chev {
    font-size: 0.85rem; color: var(--theme-text-muted); transition: transform 0.25s ease;
}
.sec-digest-card[open] .sec-digest-head__chev {
    transform: rotate(180deg);
}
.sec-digest-body {
    padding: 1.1rem 1.35rem 1.35rem;
    border-top: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-sunken);
}
.sec-digest-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    margin-bottom: 1.25rem; gap: 0.75rem;
}
.sec-digest-toolbar label {
    font-size: 0.82rem; color: var(--theme-text-secondary);
    display: flex; align-items: center; gap: 0.35rem; cursor: pointer;
}
.sec-digest-list {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.sec-digest-item {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px; background: var(--theme-surface-raised);
    overflow: hidden; transition: border-color 0.2s ease;
}
.sec-digest-item:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--theme-border-subtle));
}
.sec-digest-item.is-threat-red {
    border-left: 3px solid #b02018;
}
.sec-digest-item.is-threat-yellow {
    border-left: 3px solid var(--brand-gold);
}
.sec-digest-item summary { list-style: none; }
.sec-digest-item summary::-webkit-details-marker,
.sec-digest-item summary::marker { display: none; content: none; }
.sec-digest-item__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.85rem 1.1rem; cursor: pointer; user-select: none;
    font-size: 0.88rem; transition: background 0.2s ease;
}
.sec-digest-item__head:hover {
    background: color-mix(in srgb, var(--brand-gold) 4%, transparent);
}
.sec-digest-item__status {
    display: flex; align-items: center; gap: 0.65rem; font-weight: 500;
}
.sec-digest-item__icon {
    font-size: 1.1rem; line-height: 1;
}
.sec-digest-item__title strong {
    color: var(--theme-text-primary);
}
.sec-digest-item__time {
    color: var(--theme-text-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
.sec-digest-item__meta {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem;
}
.sec-digest-item__chev {
    font-size: 0.78rem; color: var(--theme-text-muted); transition: transform 0.2s ease;
}
.sec-digest-item[open] .sec-digest-item__chev {
    transform: rotate(180deg);
}
.sec-digest-item__content {
    padding: 1.1rem; border-top: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-sunken); font-size: 0.88rem; line-height: 1.6;
}
.sec-digest-summary-box {
    margin-bottom: 0.85rem; padding: 0.9rem 1.1rem; border-radius: 8px;
    background: color-mix(in srgb, var(--brand-gold) 7%, var(--theme-surface-raised));
    border: 1px solid color-mix(in srgb, var(--brand-gold) 25%, var(--theme-border-subtle));
}
.sec-digest-summary-box strong {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--theme-text-secondary); margin-bottom: 0.45rem;
}
.sec-digest-summary-box p {
    margin: 0; color: var(--theme-text-primary); white-space: pre-line;
}
.sec-digest-metrics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.65rem; margin-bottom: 0.85rem;
}
.sec-digest-metric-card {
    padding: 0.65rem 0.85rem; border-radius: 8px;
    border: 1px solid var(--theme-border-subtle);
    background: var(--theme-surface-raised);
    display: flex; flex-direction: column; gap: 0.2rem;
}
.sec-digest-metric-card__label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--theme-text-muted);
}
.sec-digest-metric-card__value {
    font-size: 1.15rem; font-weight: 600;
    font-family: var(--font-longform, serif);
    color: var(--theme-text-primary);
}
.sec-digest-recipients {
    margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--theme-text-muted);
    display: flex; align-items: center; gap: 0.4rem;
}
.sec-digest-item__foot {
    margin-top: 0.85rem; padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border-subtle);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.6rem; font-size: 0.78rem; color: var(--theme-text-muted);
}

/* === Native checkboxes & radios: the one definition ==========================
   THIS is the single place that decides how a native checkbox or radio looks,
   on every screen. No template has to remember a class:
   `.av-check`, `.bulk-check` and a bare <input type="checkbox"> are all styled
   by the selector below, so they are identical by construction.

   Deliberately hidden inputs stay hidden: .lux-toggle__input, .booking-toggle,
   .booking-exp, .layout-card and .ld-option hide their real input with
   `opacity: 0; position: absolute`, and nothing here touches either property. */
:is(input[type="checkbox"], input[type="radio"]):not(.lux-toggle__input) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
    border: 2px solid color-mix(in srgb, var(--brand-gold) 70%, var(--theme-text-secondary));
    background: var(--theme-bg);
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="checkbox"]:not(.lux-toggle__input) { border-radius: 5px; }
input[type="radio"]:not(.lux-toggle__input) { border-radius: 50%; }

:is(input[type="checkbox"], input[type="radio"]):not(.lux-toggle__input):hover:not(:disabled) {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 20%, transparent);
}
:is(input[type="checkbox"], input[type="radio"]):not(.lux-toggle__input):focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}
:is(input[type="checkbox"], input[type="radio"]):not(.lux-toggle__input):checked {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
}
/* The tick — same geometry the manage area has always used. */
input[type="checkbox"]:not(.lux-toggle__input):checked::after {
    content: "";
    width: 0.32rem;
    height: 0.62rem;
    margin-top: -0.12rem;
    border: solid #2c3024;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
input[type="radio"]:not(.lux-toggle__input):checked::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #2c3024;
}
:is(input[type="checkbox"], input[type="radio"]):not(.lux-toggle__input):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    :is(input[type="checkbox"], input[type="radio"]):not(.lux-toggle__input) { transition: none; }
}

/* The Settings theme picker had no CSS at all: its radio was invisible and its
   colour swatches had no size. The radio is fixed above; give the label a layout. */
.theme-pick { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.theme-pick__opt { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.theme-pick__swatch {
    width: 1.15rem; height: 1.15rem; border-radius: 5px; flex: 0 0 auto;
    border: 1px solid var(--theme-border-subtle);
}
.theme-pick__swatch--light { background: #faf9f6; }
.theme-pick__swatch--dark { background: #121913; }

/* --- Product photos (Manage → Products → edit) -------------------------------
   The first row is the main photo. No `is_main` flag exists, so the badge is
   driven purely by position — see manage_product_photos.js. */
.photo-rows { display: grid; gap: 0.85rem; }
.photo-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 12px;
    background: var(--theme-surface-sunken);
}
.photo-row.is-main { border-color: color-mix(in srgb, var(--brand-gold) 55%, transparent); }
.photo-row__preview {
    width: 88px; height: 88px; border-radius: 10px; overflow: hidden;
    display: grid; place-items: center;
    background: var(--theme-bg);
    border: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-muted);
}
.photo-row__preview img { width: 100%; height: 100%; object-fit: cover; }
/* `minmax(0, 1fr)`, not the implicit `auto`: an auto track is floored by its
   items' min-content, and a file input's min-content is its "Choose File"
   button + filename label (~215–344px in Chrome) which never shrinks. That
   floor escaped up the grid and pushed the whole product form off-screen on a
   phone. The explicit 0-min track caps the column at the container instead. */
.photo-row__body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.photo-row__file { min-width: 0; }
.photo-row__file input[type="file"] { max-width: 100%; min-width: 0; box-sizing: border-box; }
.photo-row__name { font-size: 0.85rem; color: var(--theme-text-secondary); word-break: break-all; }
.photo-row__actions {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem;
    font-size: 0.85rem;
}
.photo-row__badge {
    display: none;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: #2c3024; background: var(--brand-gold);
    padding: 0.15rem 0.45rem; border-radius: 999px;
}
.photo-row.is-main .photo-row__badge { display: inline-block; }
.photo-row__btn {
    background: none; border: 1px solid var(--theme-border-subtle);
    border-radius: 8px; width: 2rem; height: 2rem; cursor: pointer;
    color: inherit; display: inline-grid; place-items: center;
    transition: border-color 0.18s ease, color 0.18s ease;
}
.photo-row__btn:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.photo-row .attr-check--danger { margin-inline-start: 0; }

@media (max-width: 640px) {
    .photo-row { grid-template-columns: 64px 1fr; }
    .photo-row__preview { width: 64px; height: 64px; }
    .photo-row__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    /* Alt EN/IT sit one per line here — two 150px-min columns can't fit beside
       the thumbnail on a phone. */
    .photo-row .field-row { grid-template-columns: 1fr; }
}

/* === Catalogue filter rail ===================================================
   One global grid with a sticky rail beside it; on narrow screens the rail
   becomes a bottom sheet behind a "Filters" pill. Facets are generated by
   shop/facets.py from each type's `filter_slots` — nothing here knows a field.

   the browser draws <details> with its own default disclosure marker. These
   unlayered rules own the whole look instead; the default marker is switched
   off and replaced by one explicit chevron. */
/* Rail narrow and to the left; the grid gets the room. The catalogue page also
   widens its container (.shop-wrap--catalog) so the extra space is real. */
.catalog-layout { display: grid; grid-template-columns: 236px 1fr; gap: 2.5rem; align-items: start; }
/* No filter rail (e.g. a shop showing only experience/service cards) — the
   results take the full width instead of the narrow 236px rail column. */
.catalog-layout--full { grid-template-columns: 1fr; }
.shop-wrap--catalog { max-width: 94rem; }
.catalog-body.is-loading .catalog-results { opacity: 0.5; transition: opacity 0.15s ease; }

.filter-rail {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem 1.1rem 1.4rem;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 16px;
    background: var(--rail-surface);

    /* One tray colour, named once. The sticky head and the phone sheet reuse this
       variable rather than re-declaring the token, so the head can never drift from
       the tray it is glued to. */
    --rail-surface: var(--theme-surface-sunken-solid);

    /* A long facet list scrolls inside the rail instead of stretching the sticky
       column past the viewport. It must NOT trap the wheel: `overscroll-behavior:
       contain` swallowed page scrolling whenever the cursor sat over the rail (even
       when the rail had nothing to scroll), so the page "wouldn't go up". Natural
       chaining — rail scrolls if it can, otherwise the page does — is what we want. */
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand-gold) 45%, transparent) transparent;
}
.filter-rail::-webkit-scrollbar { width: 8px; }
.filter-rail::-webkit-scrollbar-track { background: transparent; }
.filter-rail::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-gold) 35%, transparent);
    border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
.filter-rail:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand-gold) 60%, transparent); background-clip: content-box; }

.filter-rail__grip { display: none; }
.filter-rail__head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0 0.15rem 0.9rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    position: sticky; top: 0; z-index: 2;
    /* Sticky, so it must be opaque — facets scroll underneath it. It inherits the tray's
       own colour, which is why it reads as part of the rail and not as a grey band. */
    background: var(--rail-surface);
}
.filter-rail__title {
    display: flex; align-items: center; gap: 0.5rem; margin: 0;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--theme-text-secondary); font-weight: 600;
}
.filter-rail__title i { color: var(--brand-gold); font-size: 0.95rem; }
.filter-rail__count {
    display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem;
    padding: 0 0.3rem; border-radius: 999px;
    background: var(--brand-gold); color: #2c3024;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0;
}
.filter-rail__reset {
    margin-inline-start: auto; font-size: 0.78rem; letter-spacing: 0.02em;
    color: var(--theme-text-muted); text-decoration: underline; text-transform: none;
}
.filter-rail__reset:hover { color: var(--brand-gold); }
.filter-rail__close { display: none; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.2rem; padding: 0.25rem; }
.filter-rail__actions { margin-top: 0.6rem; display: grid; gap: 0.6rem; justify-items: center; }
.filter-rail__clear { font-size: 0.85rem; color: var(--theme-text-muted); text-decoration: underline; }
.filter-rail__foot { display: none; }

/* A facet is a card. Reset the browser's default <details>, then draw our own.
   Translucent, not opaque: an opaque --theme-bg card is *lighter* than the tray it
   lies on, so the facets read as white boxes dropped on the rail instead of as part
   of it. Raised takes its hue from whatever is underneath. */
.facet {
    padding: 0;
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.facet:hover { border-color: color-mix(in srgb, var(--brand-gold) 35%, var(--theme-border-subtle)); }
.facet.is-active {
    border-color: color-mix(in srgb, var(--brand-gold) 55%, transparent);
    box-shadow: inset 3px 0 0 0 var(--brand-gold);
}
.facet > summary,
.facet__summary {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1rem;
    margin: 0;
    cursor: pointer; list-style: none;
    font-size: 0.9rem; font-weight: 600; line-height: 1.3;
    border-radius: 12px;
}
.facet__summary::-webkit-details-marker { display: none; }
/* Hide the browser's default marker; we ship one explicit chevron instead. */
.facet__summary::after,
.facet__summary::marker { content: none; display: none; }
.facet__name { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.facet__derived {
    font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
    color: var(--brand-gold);
    border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
    border-radius: 999px; padding: 0.08rem 0.36rem; line-height: 1.2;
}
.facet__dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--brand-gold); flex: 0 0 auto; }
.facet__chev {
    margin-inline-start: auto; font-size: 0.72rem; color: var(--theme-text-muted);
    transition: transform 0.2s ease;
}
.facet[open] .facet__chev { transform: rotate(180deg); }
/* Everything below the header shares one inset, so no text ever touches an edge. */
.facet[open] > .facet__summary { border-bottom: 1px solid var(--theme-border-subtle); border-radius: 12px 12px 0 0; }

/* Smooth expand/collapse. Progressive: browsers with ::details-content animate
   the height to/from auto (interpolate-size); those without simply snap open —
   today's behaviour. `overflow: clip` only bites during the transition, so
   nothing (focus ring, thumb, pill outline) is cut once open (block-size:auto).
   Reduced-motion opts out below. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .facet::details-content {
        block-size: 0; overflow: clip;
        transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
    }
    .facet[open]::details-content { block-size: auto; }
}

.facet__options {
    list-style: none; margin: 0; padding: 0.7rem 1rem 0.9rem;
    display: grid; gap: 0.2rem;
}
/* Long lists show the first ~8 with a "Show all" toggle. */
.facet__options--capped .facet__opt--extra { display: none; }
.facet__options--capped.is-expanded .facet__opt--extra { display: block; }

/* A facet body must never outgrow the viewport. Once its content would run past
   the bottom edge, it scrolls inside itself so every option stays reachable —
   this is the escape hatch the "Show all" cap alone doesn't cover: after "Show
   all" a long list, or a pills facet that renders every choice, could push its
   lower options off-screen with no way to scroll to them (worst on a short
   viewport). The bound is viewport-relative, so a short list never scrolls (no
   double scroll in the common case) — only a genuinely tall body does, and only
   as far as it needs. No overscroll-behavior: contain here, deliberately — it
   trapped page scrolling on the rail (see .filter-rail), so we let the scroll
   chain naturally to the rail and then the page. */
.facet__pills,
.facet__options {
    max-height: min(58vh, 24rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand-gold) 45%, transparent) transparent;
}
.facet__pills::-webkit-scrollbar,
.facet__options::-webkit-scrollbar { width: 8px; }
.facet__pills::-webkit-scrollbar-thumb,
.facet__options::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-gold) 35%, transparent);
    border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
.facet__more {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin: 0 1rem 0.85rem; padding: 0.15rem 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 0.78rem; color: var(--brand-gold); text-decoration: underline;
}
.facet__more:hover { color: color-mix(in srgb, var(--brand-gold) 78%, var(--theme-text-primary)); }
.facet__more i { font-size: 0.62rem; transition: transform 0.2s ease; }
.facet__more[aria-expanded="true"] i { transform: rotate(180deg); }
.facet__more .facet__more-b { display: none; }
.facet__more[aria-expanded="true"] .facet__more-a { display: none; }
.facet__more[aria-expanded="true"] .facet__more-b { display: inline; }
.facet__option {
    display: flex; align-items: center; gap: 0.65rem; cursor: pointer;
    font-size: 0.88rem; padding: 0.4rem 0.45rem; border-radius: 8px;
    transition: background-color 0.15s ease;
}
.facet__option:hover { background: var(--theme-surface-sunken); }
.facet__option--toggle { margin: 0; padding: 0.85rem 1rem; }
/* Wrap long option labels instead of clipping them with an ellipsis. */
.facet__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.facet__count {
    flex: 0 0 auto; min-width: 1.5rem; text-align: center;
    color: var(--theme-text-muted); font-size: 0.74rem; font-variant-numeric: tabular-nums;
    background: var(--theme-chip-bg); border-radius: 999px; padding: 0.1rem 0.4rem;
}

/* Toggle pills — product kinds, short choice sets. Bigger tap targets than a checkbox. */
.facet__pills { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.85rem 1rem 1rem; }
.pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.42rem 0.8rem; min-height: 2.1rem;
    border: 1px solid var(--theme-border-subtle); border-radius: 999px;
    background: var(--theme-surface-raised); cursor: pointer;
    font-size: 0.84rem; line-height: 1;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pill:hover { border-color: var(--brand-gold); }
.pill.is-on {
    background: var(--brand-gold); border-color: var(--brand-gold); color: #2c3024; font-weight: 600;
}
.pill.is-on .pill__count { background: rgba(44, 48, 36, 0.16); color: #2c3024; }
.pill.is-empty:not(.is-on) { opacity: 0.45; }
.pill:has(input:focus-visible) { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.pill__count {
    font-size: 0.72rem; font-variant-numeric: tabular-nums;
    background: var(--theme-chip-bg); border-radius: 999px; padding: 0.05rem 0.36rem;
    color: var(--theme-text-muted);
}

/* Two overlaid native range inputs — no dual-thumb primitive exists. */
.facet__range { padding: 0.9rem 1rem 1.05rem; display: grid; gap: 1rem; }
.facet__slider { position: relative; height: 1.4rem; padding-inline: 0.55rem; }
.facet__track {
    position: absolute; inset-inline: 0.55rem; top: 50%; height: 4px; transform: translateY(-50%);
    background: var(--theme-border-subtle); border-radius: 999px;
}
.facet__track-fill {
    position: absolute; inset-block: 0; border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--brand-gold) 75%, transparent), var(--brand-gold));
}
.facet__thumb {
    position: absolute; inset-inline: 0; top: 0; width: 100%; height: 1.4rem;
    margin: 0; padding: 0; background: none; border: 0; pointer-events: none;
    appearance: none; -webkit-appearance: none;
}
.facet__thumb::-webkit-slider-thumb {
    pointer-events: auto; appearance: none; -webkit-appearance: none;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--theme-bg); border: 2px solid var(--brand-gold); cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.facet__thumb::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.facet__thumb::-moz-range-thumb {
    pointer-events: auto; width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--theme-bg); border: 2px solid var(--brand-gold); cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.facet__thumb:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--brand-gold); outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-gold) 22%, transparent);
}

/* A grid, not a flex of 100%-wide inputs: the unit can never be clipped. */
.facet__bounds {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center; gap: 0.45rem; font-size: 0.85rem;
}
.facet__bound { min-width: 0; display: block; }
.facet__bounds input[type="number"] {
    width: 100%; min-width: 0; padding: 0.45rem 0.55rem; font: inherit; font-size: 0.85rem;
    border: 1px solid var(--theme-border-subtle); border-radius: 8px;
    background: var(--theme-bg); color: inherit;
    -moz-appearance: textfield;
}
.facet__bounds input::-webkit-outer-spin-button,
.facet__bounds input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.facet__bounds input[type="number"]:focus-visible {
    outline: none; border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 18%, transparent);
}
.facet__dash { color: var(--theme-text-muted); }
.facet__unit {
    color: var(--theme-text-muted); font-size: 0.78rem; white-space: nowrap;
    justify-self: end;
}

.catalog-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.25rem; flex-wrap: wrap;
}
.catalog-count { font-size: 0.85rem; color: var(--theme-text-muted); margin: 0; }
.catalog-sort {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.85rem; color: var(--theme-text-secondary);
}
.catalog-sort i { color: var(--brand-gold); font-size: 0.85rem; }
.catalog-sort select {
    font: inherit; font-size: 0.85rem; color: inherit; cursor: pointer;
    padding: 0.4rem 0.65rem; border-radius: 8px;
    border: 1px solid var(--theme-border-subtle); background: var(--theme-bg);
}
.catalog-sort select:focus-visible {
    outline: none; border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 18%, transparent);
}

.chip-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.36rem 0.75rem; border-radius: 999px; font-size: 0.82rem; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
    background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
    color: inherit; font-family: inherit; min-height: 2rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.chip:hover { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 18%, transparent); }
.chip i { font-size: 0.72rem; opacity: 0.7; }
.chip--clear { border-style: dashed; background: none; text-decoration: none; }
.shop-empty--filtered i { color: var(--theme-text-muted); }

.catalog-filters-toggle { display: none; }
.filter-backdrop { display: none; }

/* Restage the grid after a swap. Honours prefers-reduced-motion via the JS guard. */
@keyframes catalog-restage { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.shop-grid.is-restaged > * { animation: catalog-restage 0.28s ease both; }
.shop-grid.is-restaged > *:nth-child(2) { animation-delay: 0.04s; }
.shop-grid.is-restaged > *:nth-child(3) { animation-delay: 0.08s; }
.shop-grid.is-restaged > *:nth-child(n+4) { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
    .shop-grid.is-restaged > * { animation: none; }
    .facet__chev, .facet, .pill, .facet__more i { transition: none; }
    .facet::details-content { transition: none; }
}

/* --- Phone / tablet: the rail becomes a bottom sheet ---------------------- */
@media (max-width: 1023px) {
    .catalog-layout { grid-template-columns: 1fr; gap: 1.25rem; }
    .catalog-filters-toggle {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.7rem 1.15rem; border-radius: 999px; cursor: pointer; font: inherit;
        min-height: 2.75rem;                       /* a real tap target */
        border: 1px solid var(--theme-border-subtle); background: var(--theme-surface-sunken);
        color: inherit; justify-self: start;
    }
    .catalog-filters-toggle__count {
        background: var(--brand-gold); color: #2c3024; border-radius: 999px;
        padding: 0 0.4rem; font-size: 0.72rem; font-weight: 600;
    }

    .filter-backdrop {
        display: block; position: fixed; inset: 0; z-index: 59;
        background: rgba(18, 22, 19, 0.45);
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.filters-open .filter-backdrop { opacity: 1; pointer-events: auto; }
    /* The page behind an open sheet must not scroll under the customer's thumb. */
    body.filters-open { overflow: hidden; }

    .filter-rail {
        position: fixed; inset-inline: 0; bottom: 0; top: auto; z-index: 60;
        max-height: 85dvh;
        padding: 0.6rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        border: 0;
        /* Opaque: the page shows through anything translucent. Same tray colour as
           the desktop rail, so the sheet is recognisably the same object. */
        background: var(--rail-surface);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
        transform: translateY(101%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .filter-rail.is-open { transform: none; }
    @media (prefers-reduced-motion: reduce) { .filter-rail { transition: none; } }

    .filter-rail__grip {
        display: block; width: 2.5rem; height: 0.25rem; border-radius: 999px;
        background: var(--theme-border-subtle);
        margin: 0.15rem auto 0.55rem; flex: 0 0 auto;
    }
    .filter-rail__head { background: var(--rail-surface); padding-block: 0.15rem 0.85rem; }
    .filter-rail__close { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; }

    /* Tap targets grow; the sticky footer reports the live result count. */
    .facet > summary, .facet__summary { padding: 1rem; min-height: 3rem; }
    .facet__option { padding: 0.6rem 0.5rem; min-height: 2.75rem; }
    .pill { min-height: 2.5rem; padding: 0.55rem 0.95rem; font-size: 0.88rem; }
    .facet__bounds input[type="number"] { padding: 0.6rem 0.55rem; font-size: 1rem; }

    .filter-rail__actions { display: none; }        /* the footer replaces it */
    .filter-rail__foot {
        display: block; position: sticky; bottom: 0; z-index: 2;
        margin-top: 0.75rem; padding-top: 0.75rem;
        background: linear-gradient(to top, var(--rail-surface) 72%, transparent);
    }

    .catalog-toolbar { gap: 0.75rem; }
    .catalog-sort { margin-inline-start: auto; }
    .catalog-sort select { min-height: 2.5rem; }

    @media (prefers-reduced-motion: reduce) {
        .filter-rail, .filter-backdrop { transition: none; }
    }
}

@media (max-width: 480px) {
    .catalog-toolbar { align-items: flex-start; flex-direction: column; }
    .catalog-sort { margin-inline-start: 0; width: 100%; }
    .catalog-sort select { flex: 1 1 auto; }
}


/* ── Mobile audit fixes (2026-07-15) ──────────────────────────────────────── */
/* Narrow the scroll-viewport dissolve on phones: keep ~85% of the screen
   fully legible instead of ~50%. */
@media (max-width: 768px) {
    :root {
        --swallow-top-transparent: 4%;
        --swallow-top-opaque: 12%;
        --swallow-bottom-opaque: 88%;
        --swallow-bottom-transparent: 96%;
    }
    /* Hero ghost CTA sat at ~30% alpha over busy footage — give it real fill
       and border on phones (scoped to the home hero; elsewhere the outline
       button lives on calm backgrounds). */
    #hero .shop-btn--gold-outline {
        background: color-mix(in srgb, var(--brand-gold) 26%, transparent);
        border-color: color-mix(in srgb, var(--brand-gold) 85%, transparent);
        color: var(--brand-light);
    }
    /* First-visit banner covered the hero CTA block — hug tighter on phones. */
    .cookie-notice { padding: 0.6rem 0.85rem; gap: 0.7rem; bottom: 0.6rem; }
    .cookie-notice__text { font-size: 0.78rem; }
}
/* The open filter bottom-sheet must beat the cookie notice (z 90); its
   backdrop is 59, the sheet 60. */
body.filters-open .cookie-notice { z-index: 55; }
/* Facets inside the rail are flex children — without this they shrink and
   clip their own option pills when a facet is expanded. */
.filter-rail > * { flex-shrink: 0; }

/* ── In-viewport style drawer (staff only) ──────────────────────────────────
   The brush on each section opens a right-docked native <dialog class="drawer">
   (ui.css owns docking, slide-in and backdrop) skinned as DARK FROST in both
   themes — it floats over the imagery it edits, so it keeps its own contrast
   instead of following the page theme. Controls are generated from
   core/style_tokens.py; sliders write their --pv-* var live, Save persists. */
.style-edit {
    position: absolute; top: 6rem; right: .9rem; z-index: 60;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 999px;
    border: 1px solid rgb(207 161 63 / .55);
    background: rgb(14 18 15 / .62); color: #cfa13f;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer; opacity: .55;
    transition: opacity .25s ease, transform .25s ease;
}
.style-edit:hover, .style-edit:focus-visible { opacity: 1; transform: scale(1.06); }
.heritage-quote { position: relative; }   /* anchor, should a brush land here later */

dialog.style-drawer {
    width: min(420px, 94vw);
    background: rgb(13 17 14 / .86); color: #eef1ea;
    color-scheme: dark;
    border-left: 1px solid rgb(207 161 63 / .3);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
            backdrop-filter: blur(16px) saturate(1.15);
    padding: 0;
}
/* Flex column ONLY while open: an unconditional author display would beat the
   UA's dialog:not([open]){display:none} (origin, not specificity) and leave a
   "closed" drawer permanently parked — visible — after the page content. */
dialog.style-drawer[open] { display: flex; flex-direction: column; }
/* The drawer is DARK FROST in both themes, but the site's global text rules
   (headings, labels — dark ink in the light theme) outrank the dialog's
   inherited colour. Pin every text element explicitly, gold at the bright
   Cesare Vergari tone (never the light theme's bronze — too dark here). */
dialog.style-drawer :where(h1, h2, h3, h4, p, span, label, em, output, button) {
    color: inherit;
}
dialog.style-drawer .sd-group summary { color: #cfa13f; }
dialog.style-drawer input[type="range"] { accent-color: #cfa13f; }
dialog.style-drawer input[type="checkbox"] { accent-color: #cfa13f; }
@media (prefers-reduced-transparency: reduce) {
    dialog.style-drawer { background: rgb(13 17 14 / .97); }
}
.style-drawer__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 1.1rem 1.2rem .9rem;
    border-bottom: 1px solid rgb(255 255 255 / .08);
}
.style-drawer__title { font-family: var(--font-longform, serif); font-size: 1.15rem;
    display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.style-drawer__which { margin: .15rem 0 0; font-size: .8rem; color: rgb(238 241 234 / .65); }
.style-drawer__head .dlg__x { color: inherit; }
.style-drawer__body { flex: 1; overflow-y: auto; padding: .9rem 1.2rem 1.2rem; }
.style-drawer__hint { font-size: .78rem; color: rgb(238 241 234 / .55); margin: 0 0 .9rem; }
.style-drawer__foot {
    display: flex; gap: .8rem; padding: .9rem 1.2rem;
    border-top: 1px solid rgb(255 255 255 / .08);
}

.sd-group { border: 0; margin: 0 0 .35rem; }
.sd-group summary {
    cursor: pointer; list-style: none; user-select: none;
    font-family: var(--font-code, monospace); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .18em; color: var(--brand-gold);
    padding: .55rem 0; border-bottom: 1px solid rgb(255 255 255 / .06);
}
.sd-group summary::-webkit-details-marker { display: none; }
.sd-group summary::before { content: "▸ "; opacity: .7; }
.sd-group[open] summary::before { content: "▾ "; }

.sd-ctl, .sd-row, .sd-switch { display: block; padding: .55rem 0; }
/* Author display rules beat the UA's [hidden] (origin, the dialog lesson) —
   make hidden controls actually disappear. */
.style-drawer [hidden] { display: none !important; }
.sd-ctl__label, .sd-row > span { display: block; font-size: .82rem; margin-bottom: .3rem; }
.sd-row > span em, .sd-ctl__note { font-size: .72rem; font-style: italic; color: rgb(238 241 234 / .55); }
.sd-ctl__io { display: flex; align-items: center; gap: .6rem; }
.sd-ctl__io input[type="range"] { flex: 1; accent-color: var(--brand-gold); min-width: 0; }
.sd-ctl__io input[type="color"] {
    width: 3rem; height: 1.9rem; padding: 0; border: 1px solid rgb(255 255 255 / .25);
    border-radius: .35rem; background: none; cursor: pointer;
}
.sd-ctl__out { font-family: var(--font-code, monospace); font-size: .74rem;
    min-width: 4.2ch; text-align: right; color: rgb(238 241 234 / .8); }
.sd-ctl__reset {
    display: inline-flex; border: 0; background: none; color: rgb(238 241 234 / .5);
    cursor: pointer; padding: .15rem; border-radius: .3rem;
}
.sd-ctl__reset:hover { color: var(--brand-gold); }
.sd-ctl.is-default .sd-ctl__reset { visibility: hidden; }
.sd-ctl.is-default .sd-ctl__out { opacity: .55; }
.sd-switch { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.sd-row select {
    width: 100%; font-size: .82rem; padding: .35rem .5rem; border-radius: .4rem;
    background: rgb(255 255 255 / .07); color: inherit;
    border: 1px solid rgb(255 255 255 / .18);
}
.sd-row select option { color: #1c231d; }
.sd-note { font-size: .72rem; font-style: italic; color: rgb(238 241 234 / .5); margin: .4rem 0 0; }
.style-drawer .btn { font-size: .84rem; }
.style-drawer .btn:not(.btn-solid) { color: inherit; border-color: rgb(255 255 255 / .3); }

/* ── Text readability treatments (style drawer, all off by default) ─────────
   1) OUTLINE: a thin light stroke around every glyph (inherited text-stroke
      set on the section root; paint-order keeps the fill on top so the stroke
      reads as a contour, not a fattening). Width 0 (the fallback) = no stroke.
      The optional "breathing" pulse exists only as a server-emitted
      --pv-outline-anim shorthand — absent, no animation runs at all.
   2) RING: a slim conic-gradient border travelling around the copy block —
      thickness 0 (the fallback) leaves the ::after invisible and unanimated.
      Hosts are the frost hosts plus .pv-copy (the classic home text columns,
      a hook class with no styling of its own). */
[data-pv-sec] {
    -webkit-text-stroke: var(--pv-outline-w, 0px) var(--pv-outline-color, #f5f3ee);
    paint-order: stroke fill;
    animation: var(--pv-outline-anim, none);
}
@keyframes pv-outline-pulse {
    0%, 100% { -webkit-text-stroke-color: var(--pv-outline-color, #f5f3ee); }
    50% { -webkit-text-stroke-color:
        color-mix(in srgb, var(--pv-outline-color, #f5f3ee) 30%, transparent); }
}

@property --pv-ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pv-copy { position: relative; }
.hl-copy::after, .hl-quote::after, .hl-hero__inner::after,
.heritage-copy::after, .pv-copy::after {
    content: ""; position: absolute; inset: -0.9rem; z-index: 1;
    border-radius: 1rem; padding: var(--pv-ring-w, 0px);
    background: conic-gradient(from var(--pv-ring-angle, 0deg),
        transparent 0% 10%, var(--pv-ring-color, #e6c46e) 18% 32%,
        transparent 40% 60%, var(--pv-ring-color, #e6c46e) 68% 82%,
        transparent 90% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    animation: var(--pv-ring-anim, none);
}
@keyframes pv-ring-spin { to { --pv-ring-angle: 360deg; } }

/* Motion is a garnish here, never a requirement: both treatments freeze under
   reduced-motion and the site's motion switch (the static outline/ring stay). */
@media (prefers-reduced-motion: reduce) {
    [data-pv-sec], .hl-copy::after, .hl-quote::after, .hl-hero__inner::after,
    .heritage-copy::after, .pv-copy::after { animation: none; }
}
html.motion-disabled [data-pv-sec], html.motion-disabled .hl-copy::after,
html.motion-disabled .hl-quote::after, html.motion-disabled .hl-hero__inner::after,
html.motion-disabled .heritage-copy::after, html.motion-disabled .pv-copy::after {
    animation: none;
}

/* Outline presets (style drawer, Text readability) */
.sd-presets { display: flex; gap: .5rem; flex-wrap: wrap; padding: .6rem 0 .2rem; }
.sd-chip {
    font: inherit; font-size: .78rem; cursor: pointer;
    padding: .3rem .85rem; border-radius: 999px;
    border: 1px solid rgb(207 161 63 / .5);
    background: rgb(207 161 63 / .12); color: #eef1ea;
}
.sd-chip:hover, .sd-chip:focus-visible { background: rgb(207 161 63 / .28); }

/* Drawer: motion-frozen notice (animations saved but frozen on this device) */
.sd-warn { display: flex; gap: .5rem; align-items: flex-start;
    font-size: .78rem; color: #f0d48a; margin: 0 0 .8rem;
    padding: .5rem .7rem; border: 1px solid rgb(240 212 138 / .35);
    border-radius: .4rem; background: rgb(240 212 138 / .08); }
.style-drawer .sd-warn[hidden] { display: none; }

/* Inline text colours (Manage → Pages body marks: {gold}…{/} etc.).
   Named tones route through the brand variables so they follow the theme;
   an exact {#rrggbb} pick renders as a validated inline style instead. */
.tclr-gold { color: var(--brand-gold, #cfa13f); }
.tclr-bronze { color: #916826; }
.tclr-olive { color: var(--brand-olive, #5a6b4a); }
.tclr-ivory { color: #f5f3ee; }

/* Section-CTA colours (style drawer, "Buttons"), one token pair PER BUTTON:
   button 1 is the solid first call-to-action, button 2 the outlined second —
   each button's fill/border/hover derive from its own accent so the pair can
   differ. Scoped to [data-pv-sec] so the shop/checkout chrome never inherits
   an experiment; every fallback is the stock gold, so untouched sections
   render byte-identically. */
[data-pv-sec] .shop-btn--gold {
    background: color-mix(in srgb, var(--pv-cta1-accent, var(--brand-gold)) 76%, transparent);
    color: var(--pv-cta1-text, var(--brand-light));
    border-color: color-mix(in srgb, var(--pv-cta1-accent, var(--brand-gold)) 45%, transparent);
}
html.theme-light [data-pv-sec] .shop-btn--gold { color: var(--pv-cta1-text, #fff); }
[data-pv-sec] .shop-btn--gold:hover {
    background: color-mix(in srgb, var(--pv-cta1-accent, var(--brand-gold)) 90%, transparent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--pv-cta1-accent, var(--brand-gold)) 38%, transparent);
}
[data-pv-sec] .shop-btn--gold-outline {
    background: color-mix(in srgb, var(--pv-cta2-accent, var(--brand-gold)) 12%, transparent);
    color: var(--pv-cta2-text, var(--pv-cta2-accent, var(--brand-gold)));
    border-color: color-mix(in srgb, var(--pv-cta2-accent, var(--brand-gold)) 55%, transparent);
}
[data-pv-sec] .shop-btn--gold-outline:hover {
    background: color-mix(in srgb, var(--pv-cta2-accent, var(--brand-gold)) 22%, transparent);
    border-color: var(--pv-cta2-accent, var(--brand-gold));
}

/* ── Emblem animations (style drawer, "Emblem — animation") ─────────────────
   Five picks that LAYER over the morph/static base. All motion is transform
   or registered-@property driven (background-position provably fails to
   repaint on real client hardware — the emblem's own rule) and everything is
   clipped by the emblem's mask, so light plays on the strokes only. The
   frozen state of each equals its resting state, so reduced-motion and the
   motion switch simply hold the stock emblem. */
.emblem-anim--pulse {
    animation: emblem-pulse calc(var(--pv-emblem-sweep, 6s) * 1.5) ease-in-out infinite;
}
@keyframes emblem-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }

.emblem-anim--sway {
    transform-origin: 50% 18%;
    animation: emblem-sway 7.5s ease-in-out infinite;
}
@keyframes emblem-sway {
    0%, 100% { rotate: -1.2deg; translate: 0 0; }
    50% { rotate: 1.2deg; translate: 0 6px; }
}

.emblem-anim--shimmer::after, .emblem-anim--tide::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
}
.emblem-anim--shimmer::after {
    background: linear-gradient(115deg,
        transparent 42%, rgba(255, 246, 220, .6) 50%, transparent 58%);
    transform: translateX(-120%);
    animation: emblem-shimmer var(--pv-emblem-sweep, 6s) linear infinite;
}
@keyframes emblem-shimmer { to { transform: translateX(120%); } }
.emblem-anim--tide::after {
    background: linear-gradient(0deg,
        transparent 38%, rgba(255, 248, 225, .45) 50%, transparent 62%);
    transform: translateY(75%);
    animation: emblem-tide calc(var(--pv-emblem-sweep, 6s) * 1.8) linear infinite;
}
@keyframes emblem-tide { to { transform: translateY(-75%); } }

/* Tratto: a conic wipe draws the mark around the clock, then undraws. The
   paint layer collapses to a still gold fill so the wipe reads cleanly on
   either base; frozen = fully drawn (initial-value 360deg). */
@property --em-trace { syntax: '<angle>'; inherits: true; initial-value: 360deg; }
.emblem-anim--trace {
    animation: emblem-trace 7s ease-in-out infinite alternate;
}
.emblem-anim--trace::before {
    top: 0; left: 0; width: 100%; height: 100%;
    animation: none;                /* the morph sweep would drift this layer */
    background: var(--pv-emblem-color, var(--brand-gold));
    -webkit-mask: conic-gradient(from 0deg, #000 var(--em-trace), transparent 0);
            mask: conic-gradient(from 0deg, #000 var(--em-trace), transparent 0);
}
@keyframes emblem-trace { from { --em-trace: 30deg; } to { --em-trace: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    .emblem-anim--pulse, .emblem-anim--sway, .emblem-anim--trace,
    .emblem-anim--shimmer::after, .emblem-anim--tide::after { animation: none; }
}
html.motion-disabled .emblem-anim--pulse, html.motion-disabled .emblem-anim--sway,
html.motion-disabled .emblem-anim--trace, html.motion-disabled .emblem-anim--shimmer::after,
html.motion-disabled .emblem-anim--tide::after { animation: none; }

/* Drawer header tools: find box, copy-style, saved styles — stacked and
   symmetric: each tool is label / full-width control / (actions row). */
.sd-tools { display: grid; gap: .7rem; margin: 0 0 .9rem; padding-bottom: .9rem;
    border-bottom: 1px solid rgb(255 255 255 / .08); }
.sd-find { font: inherit; font-size: .82rem; padding: .45rem .65rem; width: 100%;
    box-sizing: border-box; border-radius: .4rem;
    border: 1px solid rgb(255 255 255 / .18);
    background: rgb(255 255 255 / .07); color: inherit; }
.sd-find::placeholder { color: rgb(238 241 234 / .45); }
.sd-find:focus { outline: none; border-color: #cfa13f;
    box-shadow: 0 0 0 3px rgb(207 161 63 / .2); }
.sd-tool { display: grid; gap: .3rem; padding: 0; }
.sd-tool__label { font-family: var(--font-code, monospace); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .16em;
    color: rgb(238 241 234 / .6); }
.sd-tool select { width: 100%; box-sizing: border-box; }
.sd-tool__actions { display: flex; gap: .45rem; justify-content: flex-end;
    align-items: center; }
.style-drawer .sd-filtered { display: none !important; }


/* ── Baseline for un-classed text controls ───────────────────────────────
   A safety net at ZERO specificity (:where) so it reaches ONLY inputs /
   textareas / selects that carry no other rule — the leftovers scattered in
   older templates (profile "Message us", guest test-emails, order actions,
   message threads). Every styled family (.field, .hs-field, .notif-input,
   .txt-input, the contact form, the drawer, the RTE editor) has real
   specificity and wins, so nothing bespoke is touched. */
:where(input:not([type]), input[type="text"], input[type="email"],
       input[type="search"], input[type="url"], input[type="tel"],
       input[type="password"], input[type="number"], textarea, select) {
    font: inherit;
    color: var(--theme-text-primary);
    background: var(--theme-surface-sunken);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    box-sizing: border-box;
    caret-color: var(--brand-gold);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
:where(textarea) { resize: vertical; line-height: 1.55; min-height: 3.4em; }
:where(select) {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: var(--select-chevron); background-repeat: no-repeat;
    background-position: right 0.7rem center; background-size: 0.72rem;
    padding-right: 2rem;
}
:where(input:not([type]), input[type="text"], input[type="email"],
       input[type="search"], input[type="url"], input[type="tel"],
       input[type="password"], input[type="number"], textarea)::placeholder {
    color: var(--theme-text-muted); opacity: .75;
}
:where(input:not([type]), input[type="text"], input[type="email"],
       input[type="search"], input[type="url"], input[type="tel"],
       input[type="password"], input[type="number"], textarea, select):hover {
    border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--theme-border-subtle));
}
:where(input:not([type]), input[type="text"], input[type="email"],
       input[type="search"], input[type="url"], input[type="tel"],
       input[type="password"], input[type="number"], textarea, select):focus {
    outline: none; border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

/* ── Styled <select> chrome ──────────────────────────────────────────────
   Selects wore the native OS arrow while every input around them got the
   rounded, gold-accented treatment. Strip the native chrome and paint a
   theme-aware chevron (--select-chevron) so dropdowns match the fields.
   Covers the checkout/state fields (.field select, .field__select) and the
   Pages-editor selects live under manage_pages.css; the dark drawer sets its
   own light chevron below. */
.field select, .field__select {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.72rem;
    padding-right: 2rem;
}
.field__select {
    caret-color: var(--brand-gold);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.field__select:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--theme-border-subtle)); }
.field__select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 16%, transparent); }

/* Dark drawer: an always-light chevron regardless of page theme, plus the
   native-chrome strip + gold focus ring the light selects get. */
.style-drawer {
    --select-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b9c0b3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
}
.sd-row select, .sd-tool select {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 0.66rem;
    padding-right: 1.7rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sd-row select:hover, .sd-tool select:hover { border-color: rgb(207 161 63 / .5); }
.sd-row select:focus, .sd-tool select:focus {
    outline: none; border-color: #cfa13f; box-shadow: 0 0 0 3px rgb(207 161 63 / .2); }

/* === Media Loading & Reveal Experiences ================================== */
.cv-curtain-preloader {
    /* The failsafe. An overlay that covers the whole viewport must be able to
       let go without JavaScript, so the finished state is reached by animation
       (fill-mode forwards) whatever else happens. The keyframes hold it fully
       opaque for the first 80% so a normal, script-driven reveal at ~1.4s
       still looks deliberate; this only ever takes over when nothing else
       does. The coordinator sets animation:none before revealing, because a
       filled animation outranks the class. */
    animation: cv-curtain-failsafe 3.2s linear forwards;
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-bg, #111713);
    color: var(--brand-gold, #c5a059);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
html.theme-light .cv-curtain-preloader {
    background-color: #faf9f6;
}
html.theme-dark .cv-curtain-preloader {
    background-color: #111713;
}
.cv-curtain-preloader.cv-curtain--revealed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.cv-curtain-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    max-width: 90vw;
}
.cv-curtain-mark {
    margin-bottom: 1.25rem;
}
.cv-curtain-rosette {
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    animation: cv-curtain-pulse 2s ease-in-out infinite;
}
.cv-curtain-title {
    font-size: clamp(1.4rem, 3.5vw, 2.1rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 0.35rem;
    color: var(--theme-text-primary, currentColor);
}
.cv-curtain-sub {
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    font-style: italic;
    color: var(--brand-gold, #c5a059);
    margin-bottom: 1.5rem;
    opacity: 0.9;
}
.cv-curtain-bar {
    width: 140px;
    height: 2px;
    background: var(--theme-border-subtle, rgba(212, 175, 55, 0.2));
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.cv-curtain-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--brand-gold, #c5a059);
    transform-origin: left;
    animation: cv-curtain-fill 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cv-curtain-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0)); }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.4)); }
}
@keyframes cv-curtain-fill {
    0% { transform: scaleX(0); }
    60% { transform: scaleX(0.75); }
    100% { transform: scaleX(1); }
}
@keyframes cv-curtain-failsafe {
    0%, 80% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---- Gilded Thread -------------------------------------------------------
   A hairline of brand gold across the top edge. Nothing covers the page, so
   this mode cannot trap a visitor by construction — the worst case is a thin
   line that finishes and fades on its own. No JavaScript is involved at all. */
.cv-thread {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 99999;
    pointer-events: none;
    background: transparent;
    animation: cv-thread-clear 2.6s ease-out forwards;
}
.cv-thread__fill {
    height: 100%;
    width: 100%;
    transform-origin: 0 50%;
    background: linear-gradient(90deg,
        rgba(197, 160, 89, 0) 0%,
        var(--brand-gold, #c5a059) 45%,
        rgba(232, 205, 150, 1) 100%);
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.45);
    animation: cv-thread-fill 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cv-thread-fill {
    0% { transform: scaleX(0); }
    55% { transform: scaleX(0.72); }
    100% { transform: scaleX(1); }
}
@keyframes cv-thread-clear {
    0%, 85% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ---- Soft Dissolve -------------------------------------------------------
   No overlay: the photography settles into focus instead. Scoped to <main> so
   the header logo, footer marks and icon sprites are untouched. `both` fill
   means every image ends fully resolved even if the animation never gets to
   run smoothly — the page is readable throughout either way. */
html[data-media-loading="soft_dissolve"] main img,
html[data-media-loading="soft_dissolve"] main video {
    animation: cv-dissolve-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cv-dissolve-in {
    from { opacity: 0; filter: blur(14px) saturate(0.82); transform: scale(1.02); }
    to { opacity: 1; filter: blur(0) saturate(1); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cv-curtain-preloader { display: none !important; }
    .cv-thread { display: none !important; }
    html[data-media-loading="soft_dissolve"] main img,
    html[data-media-loading="soft_dissolve"] main video { animation: none; }
}

/* ==========================================================================
   MOBILE PRESENTATION LAYOUTS (Configurable via Style Drawer & Admin Settings)

   IMPORTANT:  The live homepage uses page_redesign.html, whose sections carry
   .hl-sec / .hl-media / .hl-copy classes.  The visual "frosted card" behind
   .hl-copy is rendered by .hl-copy::before  (home_layouts.css, line 274).
   Each layout mode must override BOTH the element AND the pseudo to produce a
   distinct look.  `!important` is used throughout because home_layouts.css
   contains specificity-heavy compound selectors like
   `.hl-cinematic .hl-copy` (two classes) inside @media blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EDITORIAL LOOKBOOK  (`data-mobile-layout="lookbook"`)
   ─  Magazine chapter cards: crisp 4:3 media window, elevated frosted capsule
      with gold left accent, chapter badge pills, refined serif typography.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Hero */
    html[data-mobile-layout="lookbook"] #hero,
    html[data-mobile-layout="lookbook"] .hl-hero {
        padding-top: 5.5rem;
        padding-bottom: 3rem;
        min-height: auto !important;
        text-align: center;
    }
    html[data-mobile-layout="lookbook"] .hero-emblem {
        transform: scale(0.82);
        margin-bottom: 1.25rem;
        filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.35));
    }
    html[data-mobile-layout="lookbook"] #hero h1,
    html[data-mobile-layout="lookbook"] .hl-hero h1 {
        font-size: 2.25rem !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em;
        margin-bottom: 1.25rem !important;
    }
    html[data-mobile-layout="lookbook"] #hero p,
    html[data-mobile-layout="lookbook"] .hl-hero p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.75rem;
    }
    html[data-mobile-layout="lookbook"] #hero .shop-btn,
    html[data-mobile-layout="lookbook"] .hl-hero .shop-btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        justify-content: center;
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(197, 160, 89, 0.3);
    }

    /* Section container */
    html[data-mobile-layout="lookbook"] .section-overlay-container,
    html[data-mobile-layout="lookbook"] .hl-sec {
        display: block !important;
        padding: 2.25rem 1.15rem !important;
        min-height: auto !important;
        max-width: 100% !important;
    }

    /* Media: 4:3 magazine window with gold hairline + rounded corners */
    html[data-mobile-layout="lookbook"] .luxury-image-wrapper,
    html[data-mobile-layout="lookbook"] .hl-media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        border: 1px solid rgba(197, 160, 89, 0.32) !important;
        box-shadow: 0 12px 32px rgba(18, 25, 19, 0.16) !important;
        margin: 0 0 1.25rem 0 !important;
        transform: none !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* Copy capsule: explicit bg + rounded + gold left accent */
    html[data-mobile-layout="lookbook"] .pv-copy,
    html[data-mobile-layout="lookbook"] .hl-copy {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.85rem 1.35rem !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 18px !important;
        border-left: 3px solid var(--brand-gold, #c5a059) !important;
    }
    /* Override the ::before frost — give it a visible rounded capsule shape
       with a slight gold top wash and a subtle border effect */
    html[data-mobile-layout="lookbook"] .hl-copy::before,
    html[data-mobile-layout="lookbook"] .pv-copy::before {
        inset: 0 !important;
        border-radius: 18px !important;
        opacity: 1 !important;
        border: 1px solid rgba(197, 160, 89, 0.28) !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* Chapter badge pills */
    html[data-mobile-layout="lookbook"] .hl-copy .hl-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        background: rgba(197, 160, 89, 0.15) !important;
        border: 1px solid rgba(197, 160, 89, 0.45) !important;
        padding: 0.3rem 0.85rem !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.18em !important;
        font-weight: 700 !important;
        color: var(--brand-gold, #c5a059) !important;
        margin-bottom: 0.85rem !important;
        width: fit-content !important;
    }
    html[data-mobile-layout="lookbook"] .hl-copy h2 {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    html[data-mobile-layout="lookbook"] .hl-copy p {
        font-size: 0.95rem !important;
        line-height: 1.62 !important;
    }
}

/* --------------------------------------------------------------------------
   2. FROSTED VIGNETTES / MOSAIC  (`data-mobile-layout="mosaic"`)
   ─  Overlapping glassmorphism: wide 16:10 media tile with the text capsule
      floating over it (negative margin), deep frosted glass with glow.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Hero */
    html[data-mobile-layout="mosaic"] #hero,
    html[data-mobile-layout="mosaic"] .hl-hero {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
        min-height: auto !important;
    }
    html[data-mobile-layout="mosaic"] .hero-emblem {
        transform: scale(0.85);
        margin-bottom: 1rem;
        filter: drop-shadow(0 0 24px rgba(212, 175, 55, 0.5));
    }
    html[data-mobile-layout="mosaic"] #hero h1,
    html[data-mobile-layout="mosaic"] .hl-hero h1 {
        font-size: 2.15rem !important;
        line-height: 1.2 !important;
    }

    /* Section container */
    html[data-mobile-layout="mosaic"] .section-overlay-container,
    html[data-mobile-layout="mosaic"] .hl-sec {
        display: block !important;
        position: relative !important;
        padding: 2.5rem 1rem !important;
        min-height: auto !important;
        max-width: 100% !important;
    }

    /* Media: wide 16:10 tile with thick rounded corners and gold glow border */
    html[data-mobile-layout="mosaic"] .luxury-image-wrapper,
    html[data-mobile-layout="mosaic"] .hl-media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        border: 1.5px solid rgba(197, 160, 89, 0.5) !important;
        box-shadow:
            0 16px 44px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(197, 160, 89, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        margin: 0 0 0 0 !important;
        transform: none !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* Copy capsule: overlaps the media with negative margin */
    html[data-mobile-layout="mosaic"] .pv-copy,
    html[data-mobile-layout="mosaic"] .hl-copy {
        position: relative !important;
        z-index: 10 !important;
        margin: -3.5rem 0.65rem 0 0.65rem !important;
        padding: 2rem 1.35rem !important;
        transform: none !important;
        border-radius: 22px !important;
    }
    /* Override ::before frost — full opaque rounded capsule with heavy blur
       and deep shadow to create the floating glass effect */
    html[data-mobile-layout="mosaic"] .hl-copy::before,
    html[data-mobile-layout="mosaic"] .pv-copy::before {
        inset: 0 !important;
        border-radius: 22px !important;
        opacity: 1 !important;
        border: 1px solid rgba(197, 160, 89, 0.45) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
        -webkit-backdrop-filter: blur(28px) saturate(1.3) !important;
        backdrop-filter: blur(28px) saturate(1.3) !important;
        background:
            radial-gradient(90% 130% at 50% 0%,
                color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 65%),
            var(--pv-frost-tint, rgba(18, 26, 20, 0.75)) !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    html.theme-light[data-mobile-layout="mosaic"] .hl-copy::before,
    html.theme-light[data-mobile-layout="mosaic"] .pv-copy::before {
        background:
            radial-gradient(90% 130% at 50% 0%,
                color-mix(in srgb, var(--brand-gold) 8%, transparent), transparent 65%),
            rgba(250, 248, 242, 0.88) !important;
        box-shadow: 0 20px 48px rgba(31, 51, 34, 0.16) !important;
    }

    /* Floating metadata pills with glow */
    html[data-mobile-layout="mosaic"] .hl-copy .hl-eyebrow {
        display: inline-block !important;
        background: linear-gradient(135deg, rgba(197, 160, 89, 0.25), rgba(197, 160, 89, 0.08)) !important;
        border: 1px solid var(--brand-gold, #c5a059) !important;
        padding: 0.35rem 0.95rem !important;
        border-radius: 999px !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.16em !important;
        font-weight: 700 !important;
        color: var(--brand-gold, #c5a059) !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 4px 14px rgba(197, 160, 89, 0.25) !important;
    }
    html[data-mobile-layout="mosaic"] .hl-copy h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1.15rem !important;
    }
    html[data-mobile-layout="mosaic"] .hl-copy p {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
    }
}

/* --------------------------------------------------------------------------
   3. CLASSIC AMBIENT STACK  (`data-mobile-layout="classic"`)
   ─  Clean, traditional vertical flow.  Standard 16:9 media, no frost card,
      simple gold left accent border, transparent background.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Hero */
    html[data-mobile-layout="classic"] #hero,
    html[data-mobile-layout="classic"] .hl-hero {
        padding-top: 4.5rem;
        padding-bottom: 2rem;
        min-height: auto !important;
    }

    /* Section container */
    html[data-mobile-layout="classic"] .section-overlay-container,
    html[data-mobile-layout="classic"] .hl-sec {
        display: block !important;
        padding: 2rem 1.25rem !important;
        min-height: auto !important;
    }

    /* Media: clean 16:9 with minimal border radius */
    html[data-mobile-layout="classic"] .luxury-image-wrapper,
    html[data-mobile-layout="classic"] .hl-media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 8px !important;
        margin: 0 0 1.25rem 0 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(197, 160, 89, 0.2) !important;
        transform: none !important;
        clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* Copy: no frost card — transparent bg, simple left accent */
    html[data-mobile-layout="classic"] .pv-copy,
    html[data-mobile-layout="classic"] .hl-copy {
        position: relative !important;
        width: 100% !important;
        padding: 1.25rem 0.5rem 1.25rem 1.25rem !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }
    /* Kill the ::before frost entirely for classic — content reads directly
       over the ambient video with just a subtle left gold rule */
    html[data-mobile-layout="classic"] .hl-copy::before,
    html[data-mobile-layout="classic"] .pv-copy::before {
        display: none !important;
    }
    /* Provide legibility via a simple left border instead */
    html[data-mobile-layout="classic"] .hl-copy,
    html[data-mobile-layout="classic"] .pv-copy {
        border-left: 2px solid var(--brand-gold, #c5a059) !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
}