/* 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 {
    /* 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-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 */
    --brand-dark: #121613;
    --brand-light: #faf9f6;
    --scroll-bg-blur: blur(20px);
}

html.theme-dark {
    --theme-bg: #121913;
    --theme-text-primary: #faf9f6;
    --theme-text-secondary: #cbd5ce;
    --theme-text-muted: #8b9d92;
    --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 */
    --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);
    }
}

/* --- 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;
}

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: 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-primary, #1c1c1c); opacity: 0.55;
    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;
}

/* --- 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: 38vh;
    z-index: 10;
    pointer-events: none;
    background: rgba(16, 26, 20, 0.17);
    backdrop-filter: blur(7px) saturate(1.05);
    -webkit-backdrop-filter: 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: 34vh;
        background: rgba(16, 26, 20, 0.19);
        backdrop-filter: blur(6px) saturate(1.05);
        -webkit-backdrop-filter: 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, 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(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: #2c3e2d;     /* strokes are never blank if the layer fails */
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.28));
}
.hero-emblem::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 300%; height: 300%;
    background: 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 6s linear infinite,
               hero-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 {
    animation: none;
    background: var(--brand-gold);
}

@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));
}
/* 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);
}

/* --- 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);
    /* Eight tabs never fit a phone: swipeable one-line tab bar instead of
       overflowing off-screen. On desktop the scroll simply never engages. */
    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; }
@media (max-width: 767px) {
    .manage-subnav { gap: 0.9rem; }
    .manage-subnav a { padding: 0.65rem 0.15rem; }
}
.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;
}

.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; }

.manage-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.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: 640px) { .priority-grid { grid-template-columns: 1fr; } }

/* --- 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;
}
.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); }
.order-btn--star.is-on { color: var(--brand-gold); }
.order-btn--star.is-on:hover { color: var(--brand-gold); }
.order-btn--promo.is-on { color: var(--brand-olive); }
.order-btn--promo.is-on:hover { color: var(--brand-olive); }
.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; }
@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;
    grid-template-columns: repeat(auto-fit, minmax(150px, 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 --- */
@media (max-width: 860px) {
    .product-form__grid { grid-template-columns: 1fr; }
    .product-form__aside { position: static; }
    .product-table__head { display: none; }
    .product-table__row {
        grid-template-columns: 1fr auto;
        grid-auto-rows: min-content;
        gap: 0.4rem 1rem;
        padding: 1rem 1.25rem;
    }
    .product-table__row .cell-product { grid-column: 1 / -1; }
    .product-table .ta-right,
    .product-table .ta-center { justify-self: start; text-align: left; }
    .cell-actions { grid-column: 2; justify-self: end; }
}

/* =====================================================================
   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-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; }

/* --- 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; }
    .order-table .product-table__head { display: none; }
    .order-table .product-table__row {
        grid-template-columns: 1fr auto; gap: 0.4rem 1rem; padding: 1rem 1.25rem;
    }
    .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; }
}

/* 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; }
.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: 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 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;
    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;
}
.shop-toast.is-in { transform: translateY(0); opacity: 1; }
.shop-toast--ok i { color: var(--brand-gold); }
.shop-toast--warn i { color: #c98a1e; }
@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; }
.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); }
.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__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; }

/* --- Promotional banner (admin-typed offers, shop page) ---------------------
   A quiet gold-framed strip between the header and the grid: hairline border,
   warm tint, serif italic copy with an optional <em> gold accent. Blank in
   both languages = not rendered at all. */
/* Full-bleed promotional stripe under the header. `margin-inline: calc(50% - 50vw)`
   cancels .shop-page's side padding to reach both viewport edges; the negative
   top margin tucks it just beneath the fixed header (which clears ~4.25rem). */
.shop-banner {
    position: relative;
    margin-inline: calc(50% - 50vw);
    margin-top: -2.5rem; margin-bottom: 2.6rem;
    display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    padding: 0.85rem 3.4rem;   /* symmetric so the centred copy clears the close button */
    border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 35%, transparent);
    background:
        linear-gradient(115deg,
            color-mix(in srgb, var(--brand-gold) 12%, transparent),
            color-mix(in srgb, var(--brand-gold) 5%, transparent) 45%,
            color-mix(in srgb, var(--brand-gold) 14%, transparent));
    text-align: center;
}
.shop-banner[hidden] { display: none; }
.shop-banner__icon { color: var(--brand-gold); font-size: 1.05rem; flex: 0 0 auto; }
.shop-banner__text {
    margin: 0; font-family: var(--font-longform, serif);
    font-style: italic; font-size: 1.02rem; line-height: 1.5;
    color: var(--theme-text-primary);
}
.shop-banner__text em { font-style: italic; color: var(--brand-gold); font-weight: 600; }
.shop-banner__mark { flex: 0 0 auto; }
.shop-banner__mark .cv-rosette { width: 1.1rem; height: 1.1rem; }
.shop-banner__close {
    position: absolute; top: 50%; right: 0.9rem; transform: translateY(-50%);
    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) 18%, 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.8rem 2.8rem 0.8rem 1.1rem;
        gap: 0.5rem;
    }
    .shop-banner__text { font-size: 0.92rem; }
    .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; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.6rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.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);
}
.field input:focus { outline: none; border-color: var(--brand-gold); }
.field--error input { border-color: #b3261e; }
.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; }

/* 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);
}
.lux-toggle__check {
    font-size: 0.58rem; 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; }

.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__link {
    display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.85rem;
    font-size: 0.82rem; color: var(--theme-text-muted); text-decoration: none;
}
.contact-map__link:hover { color: var(--brand-gold); }

/* --- 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.45rem 1.15rem; min-height: var(--btn-min-h);
    transition: background 0.2s, color 0.2s;
}
.cookie-notice__ok:hover { background: var(--brand-gold); color: #1a1408; }
@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). */
.cv-bloom { display:inline-flex; align-items:center; vertical-align:middle; overflow:visible; width:0; height:1.15em; opacity:0; margin-left:0;
            transition:width 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, margin-left 0.45s 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; opacity:0; margin-left:0; overflow:hidden; transform:translateX(-0.3em);
            transition:max-width 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, margin-left 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s 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 { width:1.15em; opacity:1; 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 { max-width:1.6em; opacity:1; margin-left:0.5em; transform:translateX(0); }

/* Motion safety */
html.motion-disabled .cv-petal { animation:none !important; }
@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),0.50) 0%, rgba(var(--heritage-rgb),0.30) 45%, rgba(var(--heritage-rgb),0.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),0.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),0.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),0.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),0.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; }
.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; }
}

/* === 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; }
.photo-row__body { min-width: 0; display: grid; gap: 0.6rem; }
.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; }
}

/* === 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; }