/* ==========================================================================
   Valorie storefront
   Bootstrap 5 supplies the grid utilities, offcanvas, modal, toast and form
   behaviour. This file is the design system on top of it: tokens, type,
   surfaces, components and the 3D world layout.

   Direction: monochrome modern luxury. Square corners (0 radius), hairline
   borders, a single cold accent used only for focus and "current" states,
   one grotesk typeface (Familjen Grotesk) carrying both display and body
   weight, headlines set heavier than body copy for contrast. Dark by
   design; the page is locked to one theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Neutrals: a cold-leaning off-black ramp and one warm-neutral text ramp */
    --bg: #090b11;
    --surface: #10131b;
    --surface-2: #161a24;
    --surface-3: #1e232f;

    --line: rgba(236, 235, 230, 0.1);
    --line-strong: rgba(236, 235, 230, 0.22);

    --text-strong: #f6f5f1;
    --text: #e6e5e0;
    --muted: #9a9b97;
    --faint: #7c7e7c;

    /* The single accent: focus, current state, progress. Never a fill. */
    --accent: #e6e5e0;

    /* Type */
    /* Typefaces. The site used Familjen Grotesk everywhere until the switch
       to Cinzel (the serif in the Valorie wordmark). To go back, set
       --font to var(--font-grotesk) and remove the "Cinzel tuning" block. */
    --font-grotesk: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Cinzel", "Trajan Pro", Georgia, serif;
    --font: var(--font-grotesk);       /* longer running text */
    --font-display: var(--font-serif); /* headings and short labels */

    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-h3: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
    --text-h2: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
    --text-display: clamp(2.5rem, 1.1rem + 5.6vw, 6rem);

    /* Shape: square corners everywhere - no radius, no softness */
    --r: 0;

    /* Space: 4px base */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --s-9: 7rem;

    --gutter: clamp(1.25rem, 3.4vw, 3rem);
    --header-height: 3.5rem;
    --announce-height: 2rem;
    --header-total: calc(var(--header-height) + var(--announce-height));
    --section-space: clamp(5rem, 9vw, 8.5rem);

    /* Motion */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 500ms;
}

/* Bootstrap hooks: this page is dark only. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font);
    --bs-body-font-size: var(--text-base);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r);
    --bs-border-radius-sm: var(--r);
    --bs-border-radius-lg: var(--r);
    --bs-link-color-rgb: 230, 229, 224;
    --bs-link-hover-color-rgb: 246, 245, 241;
    --bs-focus-ring-color: rgba(143, 165, 232, 0.5);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html.lenis,
html.lenis body {
    height: auto;
}

html.lenis {
    scroll-behavior: auto;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

html {
    scroll-behavior: smooth;
    scrollbar-color: var(--surface-3) var(--bg);
    scrollbar-width: thin;
}

body {
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font);
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.035em;
    line-height: 1;
    text-wrap: balance;
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
    letter-spacing: -0.028em;
    line-height: 1.08;
}

p {
    text-wrap: pretty;
}

a {
    color: inherit;
}

/* Beats single-class link rules (`.footer-grid a`) without !important. */
html a:visited {
    color: inherit;
}

::selection {
    background: var(--text-strong);
    color: var(--bg);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border: 2px solid var(--bg);
}

input,
textarea {
    caret-color: var(--accent);
}

/* Metadata label: rare, and always carries data (a category, a collection). */
.meta {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.lede {
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--muted);
    max-width: 46ch;
    margin: 0;
}

.measure {
    max-width: 62ch;
}

.section {
    position: relative;
    padding-block: var(--section-space);
    background-color: var(--bg);
}

.section-sunken {
    background-color: var(--surface);
    border-block: 1px solid var(--line);
}

.container-wide {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

section[id] {
    scroll-margin-top: var(--header-total);
}

/* A section heading is one message: the headline, then at most one line
   of support directly under it. */
.section-head {
    display: grid;
    gap: var(--s-4);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head h2 {
    max-width: 16ch;
}

/* --------------------------------------------------------------------------
   Focus and skip link
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Containers that receive focus programmatically (drawers, dialogs) are not
   controls; ring the controls inside them instead. */
.offcanvas:focus-visible,
.modal:focus-visible,
[tabindex="-1"]:focus-visible {
    outline: 0;
}

.skip-link {
    position: absolute;
    left: var(--s-3);
    top: -4rem;
    z-index: 1100;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r);
    background: var(--text-strong);
    color: var(--bg);
    text-decoration: none;
    font-weight: 600;
    transition: top var(--dur-base) var(--ease-out);
}

.skip-link:focus {
    top: var(--s-3);
}

/* --------------------------------------------------------------------------
   Buttons
   One height scale (36 / 44 / 52), one radius, two variants. Primary is a
   solid light fill; secondary is a hairline outline. Labels never wrap.
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-family: var(--font-display);
    --bs-btn-font-size: var(--text-xs);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: var(--r);
    --bs-btn-focus-box-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        background-color var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        color var(--dur-fast) ease,
        transform var(--dur-fast) var(--ease-out);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-lg {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-size: 0.75rem;
    min-height: 3.25rem;
}

.btn-sm {
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: var(--text-xs);
    min-height: 2.25rem;
}

.btn-solid {
    --bs-btn-bg: var(--text-strong);
    --bs-btn-color: var(--bg);
    --bs-btn-border-color: var(--text-strong);
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-bg: var(--text);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-border-color: var(--text);
    --bs-btn-disabled-bg: var(--surface-3);
    --bs-btn-disabled-color: var(--faint);
    --bs-btn-disabled-border-color: var(--surface-3);
}

.btn-line {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--text-strong);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: rgba(246, 245, 241, 0.06);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-border-color: var(--text-strong);
    --bs-btn-active-bg: rgba(246, 245, 241, 0.1);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-border-color: var(--text-strong);
    --bs-btn-disabled-color: var(--faint);
    --bs-btn-disabled-border-color: var(--line);
}

/* Text-only actions inside dense UI (header, drawers). */
.link-button {
    background: transparent;
    border: 0;
    padding: var(--s-1) 0;
    color: var(--muted);
    font-size: var(--text-sm);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 4px;
    transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

.link-button:hover {
    color: var(--text-strong);
    text-decoration-color: var(--text-strong);
}

.btn-close {
    border-radius: var(--r);
    opacity: 0.7;
}

.btn-close:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 1030;
    height: var(--header-total);
    background: linear-gradient(to bottom, rgba(9, 11, 17, 0.6), rgba(9, 11, 17, 0));
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--dur-base) ease,
        border-color var(--dur-base) ease;
}

.site-header.is-scrolled {
    background: rgba(9, 11, 17, 0.84);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border-bottom-color: var(--line);
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-height);
}

/* Announcement bar: one message at a time, slow crossfade. */
.announce {
    position: relative;
    height: var(--announce-height);
    background: #f1efe9;
    color: #14161c;
    overflow: hidden;
}

.announce-track {
    position: relative;
    height: 100%;
}

.announce-item {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding-inline: var(--s-4);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 250ms ease, transform 250ms ease;
}

.announce-item.is-active {
    opacity: 1;
    transform: none;
    transition: opacity 600ms var(--ease-out) 250ms, transform 600ms var(--ease-out) 250ms;
}

/* Small uppercase kicker above headings. */
.eyebrow {
    margin: 0 0 var(--s-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    justify-self: start;
    text-decoration: none;
    color: var(--text-strong);
    transition: opacity var(--dur-base) ease;
}

.wordmark:hover {
    color: var(--text-strong);
    opacity: 0.85;
}

.wordmark-mark {
    width: 2.75rem;
    height: auto;
    flex: none;
    display: block;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}

/* The brand name set in a classic inscriptional serif, matching the
   lettering embroidered on the garments. */
.wordmark-text {
    font-family: "Cinzel", "Trajan Pro", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
    padding-top: 0.1em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 575.98px) {
    .wordmark {
        gap: 0.6rem;
    }

    .wordmark-mark {
        width: 2.3rem;
    }

    .wordmark-text {
        font-size: 1.05rem;
        letter-spacing: 0.2em;
    }
}

.site-footer .wordmark-mark {
    width: 3.25rem;
}

.site-footer .wordmark-text {
    font-size: 1.45rem;
}

.preloader-wordmark {
    font-family: "Cinzel", Georgia, serif;
}

.primary-nav {
    display: none;
    gap: clamp(0.75rem, 2.2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav a,
.header-link {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color var(--dur-fast) ease;
}

.primary-nav a {
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding-inline: var(--s-3);
    position: relative;
}

.primary-nav a::after {
    content: "";
    position: absolute;
    inset-inline: var(--s-3);
    bottom: -1px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
}

.primary-nav a:hover,
.primary-nav a[aria-current="true"] {
    color: var(--text-strong);
}

.primary-nav a:focus-visible {
    outline-offset: -8px;
}

.primary-nav a[aria-current="true"]::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: clamp(0.25rem, 1vw, 0.75rem);
}

.header-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
}

.header-link:hover {
    color: var(--text-strong);
}

.header-icon {
    position: relative;
    justify-content: center;
    width: 2.75rem;
    color: var(--text);
}

.header-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    transition: transform var(--dur-base) var(--ease-out);
}

.header-icon:hover svg {
    transform: translateY(-1px);
}

/* Small count badge on the bag; hidden while the bag is empty. */
.bag-count {
    position: absolute;
    top: 7px;
    right: 5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--text-strong);
    color: var(--bg);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transform: scale(1);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) ease;
}

.bag-count[data-count="0"] {
    opacity: 0;
    transform: scale(0.6);
}

.bag-count.is-bumping {
    transform: scale(1.2);
}

@media (min-width: 992px) {
    .primary-nav {
        display: flex;
    }

    .menu-toggle {
        display: none;
    }
}

/* Drawers share one surface. */
.offcanvas {
    --bs-offcanvas-bg: var(--surface);
    --bs-offcanvas-color: var(--text);
    --bs-offcanvas-width: min(26rem, 100vw);
    --bs-offcanvas-border-width: 1px;
    --bs-offcanvas-border-color: var(--line);
    --bs-offcanvas-padding-x: var(--s-5);
    --bs-offcanvas-padding-y: var(--s-5);
    --bs-offcanvas-transition: transform 380ms var(--ease-drawer);
}

.offcanvas-header {
    border-bottom: 1px solid var(--line);
}

.offcanvas-title {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-strong);
}

.mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    font-size: var(--text-h3);
    font-weight: 600;
    letter-spacing: -0.028em;
    color: var(--text-strong);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */

html.is-loading {
    overflow: hidden;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--s-4);
    background: var(--bg);
    color: var(--text-strong);
    transition: opacity 600ms var(--ease-out), visibility 0s linear 600ms;
}

.preloader.is-done {
    opacity: 0;
    visibility: hidden;
}

.preloader-mark {
    width: 4.5rem;
    height: auto;
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
    animation: preloader-draw 1.2s var(--ease-out) forwards;
}

.preloader-wordmark {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    opacity: 0;
    animation: preloader-fade 800ms var(--ease-out) 400ms forwards;
}

.preloader-progress {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

@keyframes preloader-draw {
    to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes preloader-fade {
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   The 3D world (fixed canvas behind the showroom)
   -------------------------------------------------------------------------- */

.world-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms var(--ease-out);
}

.world-canvas.is-ready {
    opacity: 1;
}

.world-canvas.is-interactive {
    pointer-events: auto;
}

.world-canvas.is-hidden {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Opening campaign (scroll-driven frame sequence)
   -------------------------------------------------------------------------- */

.campaign {
    position: relative;
    z-index: 2;
    /* Shortened from 400svh: still enough room for four story beats to read
       clearly, but noticeably less scrolling to get through the opener. */
    height: 340svh;
    background: var(--bg);
}

.campaign[hidden] {
    display: none;
}

.campaign-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
}

.campaign-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.campaign-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(9, 11, 17, 0.5) 100%);
}

.campaign-scrim {
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
}

.campaign-scrim-top {
    top: 0;
    height: 30svh;
    background: linear-gradient(to bottom, var(--bg), rgba(9, 11, 17, 0.55) 50%, transparent);
}

.campaign-scrim-bottom {
    bottom: 0;
    height: 62svh;
    background: linear-gradient(to top, var(--bg) 4%, rgba(9, 11, 17, 0.78) 38%, transparent);
}

.campaign-grain {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    animation: grain-shift 0.9s steps(6) infinite;
}

@keyframes grain-shift {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-3%, 2%); }
    40% { transform: translate(2%, -4%); }
    60% { transform: translate(-4%, -1%); }
    80% { transform: translate(3%, 3%); }
    100% { transform: translate(0, 0); }
}

.campaign-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0);
}

/* Story captions: left-aligned copy, anchored to the bottom of the frame.
   The block sits on the left or the right; the text never centres. */
.campaign-story {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--gutter) clamp(3.5rem, 11svh, 7rem);
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.campaign-story.is-left {
    align-items: flex-start;
}

.campaign-story.is-right {
    align-items: flex-end;
}

.campaign-story.is-active {
    pointer-events: auto;
}

.campaign-story-inner {
    max-width: 46rem;
    display: grid;
    gap: var(--s-5);
    justify-items: start;
    text-align: left;
}

.campaign-story h1,
.campaign-story h2 {
    font-size: var(--text-display);
    letter-spacing: -0.045em;
    line-height: 0.94;
    margin: 0;
    max-width: 13ch;
}

.campaign-story .lede {
    max-width: 38ch;
}

.campaign-story .hero-actions {
    padding-top: var(--s-2);
}

.campaign-story h1 .word,
.campaign-story h2 .word {
    display: inline-block;
    will-change: transform, opacity;
}

.campaign-story .campaign-story-inner > :not(h1):not(h2) {
    will-change: opacity;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

/* Phones: full-width, equal-height actions read as a deliberate stack. */
@media (max-width: 575.98px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Showroom (scroll-pinned stage over the 3D world)
   -------------------------------------------------------------------------- */

.showroom {
    position: relative;
    z-index: 1;
    background: transparent;
    /* Taller than the viewport: one extra viewport for the section to slide
       fully into place and the camera to ease into the full showroom framing,
       with sticky dwell left over for browsing the stations. */
    min-height: 175svh;
}

.showroom-stage {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-top: calc(var(--header-total) + var(--s-5));
    padding-bottom: var(--s-5);
}

.showroom-heading {
    display: grid;
    gap: var(--s-3);
}

.showroom-heading h2 {
    max-width: 12ch;
}

.showroom-panel {
    align-self: center;
    justify-self: start;
    width: min(100%, 24rem);
    padding: var(--s-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: rgba(9, 11, 17, 0.86);
    display: grid;
    gap: var(--s-3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
}

.showroom-panel.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.panel-copy {
    display: grid;
    gap: var(--s-3);
    transition: opacity var(--dur-fast) var(--ease-out);
}

.panel-copy.is-switching {
    opacity: 0;
}

.showroom-panel h3 {
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
    margin: 0;
}

.showroom-panel p:not(.meta) {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.showroom-panel .panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding-top: var(--s-2);
}

/* Station strip: one bordered row of four cells, divided by hairlines. */
.station-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: rgba(9, 11, 17, 0.82);
    overflow: hidden;
}

.station-strip li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
}

.station-strip li:nth-child(even) {
    border-left: 1px solid var(--line);
}

.station {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 0.15rem;
    align-content: center;
    text-align: left;
    padding: var(--s-3) var(--s-4);
    min-height: 3.75rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-strong);
    transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.station:hover {
    background: rgba(246, 245, 241, 0.05);
}

.station[aria-pressed="true"] {
    background: rgba(246, 245, 241, 0.08);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.station .station-name {
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: -0.005em;
}

.station .station-meta {
    font-size: 0.75rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .station-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .station-strip li:nth-child(n + 3) {
        border-top: 0;
    }

    .station-strip li + li {
        border-left: 1px solid var(--line);
    }
}

/* --------------------------------------------------------------------------
   Details: interactive viewers
   -------------------------------------------------------------------------- */

.detail-row {
    display: grid;
    gap: var(--s-6);
    align-items: center;
}

.detail-row + .detail-row {
    margin-top: clamp(4rem, 9vw, 7.5rem);
}

.viewer {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 78vh;
    width: 100%;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    touch-action: pan-y;
}

.viewer canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

.viewer canvas:active {
    cursor: grabbing;
}

.viewer img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
}

.viewer-hint {
    position: absolute;
    left: var(--s-4);
    bottom: var(--s-4);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    pointer-events: none;
}

.viewer-views {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

.chip {
    min-height: 2.25rem;
    padding: 0 var(--s-4);
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.chip:hover {
    color: var(--text-strong);
    border-color: var(--line-strong);
}

.chip[aria-pressed="true"] {
    color: var(--bg);
    background: var(--text-strong);
    border-color: var(--text-strong);
}

.detail-copy {
    display: grid;
    gap: var(--s-4);
    align-content: center;
    justify-items: start;
}

.detail-copy h3 {
    font-size: var(--text-h2);
    letter-spacing: -0.04em;
    max-width: 12ch;
}

.detail-list {
    list-style: none;
    margin: var(--s-3) 0 0;
    padding: 0;
    width: 100%;
    border-top: 1px solid var(--line);
}

.detail-list li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
    font-size: var(--text-base);
}

.detail-list .label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
}

@media (min-width: 992px) {
    .detail-row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--s-5);
    }

    .detail-media {
        grid-column: 1 / span 6;
    }

    .detail-copy {
        grid-column: 8 / span 5;
    }

    .detail-row.is-reversed .detail-media {
        grid-column: 7 / span 6;
        grid-row: 1;
    }

    .detail-row.is-reversed .detail-copy {
        grid-column: 1 / span 5;
        grid-row: 1;
    }
}

/* --------------------------------------------------------------------------
   Shop
   -------------------------------------------------------------------------- */

.shop-header {
    display: grid;
    gap: var(--s-6);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Toolbar: filters on the left, result count on the right, framed by
   hairlines so the grid below reads as the result of the controls. */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-6);
    padding-block: var(--s-4);
    border-block: 1px solid var(--line);
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

.filter-group > .filter-label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: var(--s-1);
}

.result-count {
    font-size: var(--text-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.form-select,
.form-control {
    background-color: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    color: var(--text-strong);
    min-height: 2.75rem;
    font-size: var(--text-sm);
    box-shadow: none;
}

.form-select:focus,
.form-control:focus {
    background-color: var(--surface-2);
    border-color: var(--accent);
    box-shadow: none;
    outline: 0;
    color: var(--text-strong);
}

.form-control::placeholder {
    color: var(--faint);
}

.form-select {
    width: auto;
    min-width: 10rem;
}

.form-select-sm {
    min-height: 2.25rem;
}

.form-control.is-invalid {
    border-color: #d99a86;
    background-image: none;
}

.form-label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Product grid: 6 tracks. Three cards per row at desktop; counts that do
   not divide into threes (1, 2, 4, 5) widen the trailing cards so no row
   ends in a hole. */
.product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7) var(--s-5);
}

.product-card {
    position: relative;
    display: grid;
    gap: var(--s-4);
    align-content: start;
    animation: card-in 800ms var(--ease-out) both;
    animation-delay: calc(var(--card-index, 0) * 70ms);
}

@keyframes card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

:root.reduce-motion .product-card {
    animation: none;
}

@media (min-width: 576px) {
    .product-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--s-8) var(--s-5);
    }

    .product-card {
        grid-column: span 3;
    }
}

@media (min-width: 992px) {
    .product-card {
        grid-column: span 2;
    }

    .product-grid[data-count="1"] .product-card,
    .product-grid[data-count="2"] .product-card,
    .product-grid[data-count="4"] .product-card,
    .product-grid[data-count="5"] .product-card:nth-child(n + 4) {
        grid-column: span 3;
    }

    .product-grid[data-count="1"] .product-media,
    .product-grid[data-count="2"] .product-media,
    .product-grid[data-count="5"] .product-card:nth-child(n + 4) .product-media {
        aspect-ratio: 1 / 1;
    }
}

.product-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e6e3dd;
    border-radius: var(--r);
}

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 900ms var(--ease-out), opacity 320ms var(--ease-out);
}

/* Every photo of the piece, side by side; swipe, scroll or use the arrows. */
.product-track {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.product-track::-webkit-scrollbar {
    display: none;
}

.product-slide {
    flex: 0 0 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    cursor: pointer;
    overflow: hidden;
}

.product-dots {
    position: absolute;
    left: 50%;
    top: var(--s-4);
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.product-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(20, 22, 28, 0.25);
    transition: background-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}

.product-dots span.is-current {
    background: rgba(20, 22, 28, 0.85);
    transform: scale(1.25);
}

.product-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -1.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(246, 245, 241, 0.92);
    color: #14161c;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) ease;
}

.product-arrow svg {
    width: 14px;
    height: 14px;
}

.product-arrow.is-prev {
    left: var(--s-3);
    transform: translateX(-4px);
}

.product-arrow.is-next {
    right: var(--s-3);
    transform: translateX(4px);
}

.product-arrow:hover {
    background: #fff;
}

.product-media .missing {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--faint);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--s-4);
}

@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-arrow,
    .product-arrow:focus-visible {
        opacity: 1;
        transform: none;
    }

}

@media (hover: none) {
    .product-arrow {
        display: none;
    }
}

.product-quick {
    position: absolute;
    inset-inline: var(--s-3);
    bottom: var(--s-3);
    display: flex;
    gap: var(--s-2);
    z-index: 1;
}

.product-quick .btn {
    flex: 1;
    min-height: 2.5rem;
    --bs-btn-padding-x: var(--s-3);
}

.product-quick .btn-line {
    --bs-btn-bg: rgba(9, 11, 17, 0.88);
    --bs-btn-hover-bg: var(--bg);
}

@media (hover: hover) and (pointer: fine) {
    .product-quick {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    }

    .product-card:hover .product-quick,
    .product-card:focus-within .product-quick {
        opacity: 1;
        transform: none;
    }
}

.product-info {
    display: grid;
    gap: var(--s-1);
}

.product-head,
.product-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
}

.product-name {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
}

.product-name a {
    color: var(--text-strong);
    text-decoration: none;
}

/* Whole card is the click target. */
.product-name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.product-name a:hover {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 4px;
}

.swatches {
    position: relative;
    z-index: 1;
}

.price {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.price-pending {
    color: var(--muted);
    font-weight: 400;
}

.product-meta {
    font-size: var(--text-sm);
    color: var(--muted);
}

.swatches {
    display: flex;
    gap: var(--s-1);
    align-items: center;
}

.swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0;
    border: 1px solid var(--line-strong);
    display: inline-block;
    flex: none;
}

.empty-state {
    padding: var(--s-8) var(--s-4);
    text-align: center;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   Product modal
   -------------------------------------------------------------------------- */

.modal {
    --bs-modal-bg: var(--surface);
    --bs-modal-color: var(--text);
    --bs-modal-border-color: var(--line-strong);
    --bs-modal-border-radius: var(--r);
    --bs-modal-inner-border-radius: var(--r);
    --bs-modal-header-border-color: transparent;
    --bs-modal-footer-border-color: var(--line);
}

.modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.72;
}

.modal.fade .modal-dialog {
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
    transform: translateY(8px);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}

#productModal .modal-header {
    padding-bottom: 0;
}

@media (min-width: 992px) {
    #productModal .modal-dialog {
        max-width: min(92vw, 1240px);
    }
}

.product-modal-grid {
    display: grid;
    gap: var(--s-5);
}

@media (min-width: 992px) {
    .product-modal-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: var(--s-7);
    }
}

.gallery {
    display: grid;
    gap: var(--s-2);
}

.gallery-main {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e6e3dd;
    border-radius: var(--r);
    cursor: zoom-in;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 420ms var(--ease-out);
    transform-origin: 50% 50%;
}

.gallery-main.is-zoomed {
    cursor: zoom-out;
}

.gallery-main.is-zoomed img {
    transform: scale(2);
}

.gallery-main img.is-swapping {
    opacity: 0;
}

.gallery-main img {
    transition: transform 420ms var(--ease-out), opacity 220ms ease;
}

.gallery-main .product-arrow {
    cursor: pointer;
}

.gallery-main:not(.has-many) .product-arrow,
.gallery-main:not(.has-many) .gallery-count {
    display: none;
}

.gallery-main:hover .product-arrow,
.gallery-main .product-arrow:focus-visible {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .gallery-main .product-arrow {
        display: grid;
        opacity: 1;
        transform: none;
        width: 2.25rem;
        height: 2.25rem;
    }
}

.gallery-count {
    position: absolute;
    right: var(--s-3);
    bottom: var(--s-3);
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(20, 22, 28, 0.7);
    color: #f6f5f1;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.gallery-thumb {
    width: 4.25rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    padding: 0;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
    opacity: 0.55;
    transition: opacity var(--dur-base) ease, border-color var(--dur-base) ease;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb:hover {
    opacity: 1;
}

.gallery-thumb[aria-pressed="true"] {
    opacity: 1;
    border-color: var(--text-strong);
}

.product-form {
    display: grid;
    gap: var(--s-5);
    align-content: start;
}

.product-form h2 {
    font-size: var(--text-h3);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
}

.option-group {
    display: grid;
    gap: var(--s-2);
    border: 0;
    padding: 0;
    margin: 0;
}

.option-group legend,
.option-group .form-label {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    float: none;
    width: auto;
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.option-group legend strong {
    color: var(--text-strong);
    font-weight: 500;
}

.option-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.option-list input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-list label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-width: 3.25rem;
    min-height: 2.75rem;
    padding: 0 var(--s-4);
    cursor: pointer;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.option-list label:hover {
    border-color: var(--text-strong);
}

.option-list input:checked + label {
    background: var(--text-strong);
    border-color: var(--text-strong);
    color: var(--bg);
}

.option-list input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.option-error {
    font-size: var(--text-sm);
    color: #e2a591;
}

.qty {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
}

.qty button {
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 0;
    color: var(--text-strong);
    font-size: var(--text-md);
    line-height: 1;
    transition: background-color var(--dur-fast) ease;
}

.qty button:hover:not(:disabled) {
    background: rgba(246, 245, 241, 0.07);
}

.qty button:disabled {
    color: var(--faint);
}

.qty input {
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    background: transparent;
    border: 0;
    color: var(--text-strong);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* On phones the bag CTA stays reachable while scrolling the rest of the form. */
@media (max-width: 767.98px) {
    .add-to-bag-group {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding-block: var(--s-4);
        margin-inline: calc(var(--s-4) * -1);
        padding-inline: var(--s-4);
        background: linear-gradient(to top, var(--surface) 70%, rgba(17, 19, 22, 0));
    }
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--text);
    --bs-accordion-border-color: var(--line);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--text-strong);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--text-strong);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6e5e0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: var(--s-4);
    --bs-accordion-body-padding-x: 0;
    border-top: 1px solid var(--line);
}

.accordion-item {
    border-inline: 0;
    border-top: 0;
}

.accordion-button {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.accordion-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.related button {
    width: 100%;
    display: grid;
    gap: var(--s-2);
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.3;
}

.related .thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-3);
}

.related .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related button:hover .thumb {
    border-color: var(--line-strong);
}

/* --------------------------------------------------------------------------
   Bag drawer
   -------------------------------------------------------------------------- */

.cart-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
}

.cart-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
}

.cart-item .thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-3);
}

.cart-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-item .item-body {
    display: grid;
    gap: var(--s-1);
    align-content: start;
}

.cart-item .item-name {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-strong);
}

.cart-item .item-variant {
    font-size: var(--text-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cart-item .item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: var(--s-2);
}

.cart-item .qty button,
.cart-item .qty input {
    width: 2.25rem;
    height: 2.25rem;
}

.cart-summary {
    display: grid;
    gap: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-strong);
}

.cart-summary .row-line {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
}

.cart-summary .row-line strong {
    font-weight: 600;
    color: var(--text-strong);
}

.cart-empty {
    display: grid;
    gap: var(--s-4);
    justify-items: start;
    padding: var(--s-6) 0;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.search-results {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0 0;
    display: grid;
    border-top: 1px solid var(--line);
}

.search-results li {
    border-bottom: 1px solid var(--line);
}

.search-results button {
    width: 100%;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--s-4);
    align-items: center;
    text-align: left;
    background: transparent;
    border: 0;
    padding: var(--s-3) 0;
    color: var(--text-strong);
    font-weight: 500;
    transition: background-color var(--dur-fast) ease;
}

.search-results button:hover {
    background: rgba(246, 245, 241, 0.04);
}

.search-results .thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-3);
}

.search-results .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-results small {
    display: block;
    color: var(--muted);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
    --bs-toast-bg: var(--surface-2);
    --bs-toast-color: var(--text);
    --bs-toast-border-color: var(--line-strong);
    --bs-toast-border-radius: var(--r);
    --bs-toast-font-size: var(--text-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.toast.fade {
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    transform: translateY(8px);
}

.toast.show {
    transform: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-block: var(--s-8) var(--s-6);
}

.footer-grid {
    display: grid;
    gap: var(--s-7);
}

.footer-grid h2 {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: var(--s-4);
}

.footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--s-2);
}

.footer-grid a {
    color: var(--muted);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--dur-fast) ease;
}

.footer-grid a:hover {
    color: var(--text-strong);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--s-8);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--text-xs);
    color: var(--faint);
}

.newsletter .form-label {
    display: block;
    margin-bottom: var(--s-2);
}

.newsletter-row {
    display: flex;
    max-width: 26rem;
}

.newsletter-row .form-control {
    flex: 1;
    min-width: 0;
    border-right: 0;
    border-radius: var(--r) 0 0 var(--r);
}

.newsletter-row .btn {
    flex: none;
    border-radius: 0 var(--r) var(--r) 0;
}

.newsletter-status {
    color: var(--muted);
    font-size: var(--text-sm);
    margin-top: var(--s-2);
    max-width: 30rem;
}

.motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--muted);
}

.motion-toggle input {
    accent-color: var(--text-strong);
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        column-gap: var(--s-5);
    }
}

/* --------------------------------------------------------------------------
   Reveal on scroll: opacity plus a small rise, staggered by --reveal-index
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * 50ms);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        transform: none;
        transition: opacity 300ms ease;
    }

    .campaign-grain {
        animation: none;
    }

    .preloader-mark {
        animation-duration: 0.4s;
    }

    .primary-nav a::after,
    .product-media img,
    .product-quick,
    .bag-count,
    .showroom-panel,
    .gallery-main img,
    .modal.fade .modal-dialog,
    .toast.fade {
        transition-property: opacity, color, background-color, border-color;
        transform: none;
    }

    .btn:active:not(:disabled) {
        transform: none;
    }
}

/* The footer "Reduce motion" switch mirrors the OS preference. */
:root.reduce-motion {
    scroll-behavior: auto;
}

:root.reduce-motion .reveal {
    transform: none;
    transition: opacity 300ms ease;
}

:root.reduce-motion .campaign-grain {
    animation: none;
}

:root.reduce-motion .btn:active:not(:disabled) {
    transform: none;
}


/* --------------------------------------------------------------------------
   Promise strip
   -------------------------------------------------------------------------- */

.values {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-top: 1px solid var(--line);
}

.values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.values-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--line);
}

.values-list svg {
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--text-strong);
    margin-top: 2px;
}

.values-list strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0.01em;
}

.values-list span {
    display: block;
    font-size: var(--text-sm);
    color: var(--muted);
}

@media (min-width: 768px) {
    .values-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .values-list li {
        padding: var(--s-6) var(--s-5);
        border-bottom: 0;
    }

    .values-list li + li {
        border-left: 1px solid var(--line);
    }

    .values-list li:nth-child(3) {
        border-left: 0;
    }
}

@media (min-width: 1200px) {
    .values-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .values-list li:nth-child(3) {
        border-left: 1px solid var(--line);
    }

    .values-list li:first-child {
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Destinations
   -------------------------------------------------------------------------- */

.section-head-split {
    align-items: end;
}

@media (min-width: 992px) {
    .section-head-split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--s-8);
    }

    .section-head-split .lede {
        justify-self: end;
    }
}

.destination-grid {
    display: grid;
    gap: var(--s-7) var(--s-5);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .destination-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.destination-card {
    display: grid;
    gap: var(--s-4);
    align-content: start;
}

.destination-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #e6e3dd;
    cursor: pointer;
}

.destination-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .destination-card:hover .destination-media img {
        transform: scale(1.025);
    }
}

.destination-card.is-upcoming .destination-media {
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 80% at 50% 110%, rgba(143, 165, 232, 0.16), transparent 60%),
        linear-gradient(180deg, #121827, #0b0e16);
    border: 1px solid var(--line);
    text-decoration: none;
}

.upcoming-mark {
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    color: var(--text-strong);
}

.upcoming-mark svg {
    width: 5.5rem;
    opacity: 0.9;
}

.upcoming-mark span {
    font-size: var(--text-h2);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(236, 235, 230, 0.55);
}

.destination-copy h3 {
    margin: var(--s-2) 0 var(--s-2);
    font-size: var(--text-h3);
}

.destination-copy p:not(.meta) {
    margin: 0 0 var(--s-4);
    color: var(--muted);
    max-width: 40ch;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    background: none;
    color: var(--text-strong);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color var(--dur-base) ease, gap var(--dur-base) var(--ease-out);
}

.link-arrow::after {
    content: "\2192";
    font-size: 1rem;
    letter-spacing: 0;
}

.link-arrow:hover {
    gap: var(--s-3);
    border-color: var(--text-strong);
    color: var(--text-strong);
}

/* Product badge */
.product-badge {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 2;
    padding: 3px 8px;
    background: #14161c;
    color: #f6f5f1;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
}

.shop-title .eyebrow {
    margin-bottom: var(--s-2);
}

.footer-bottom span + span {
    text-align: right;
}

/* Four products: one row of four on wide screens, all in portrait. */
@media (min-width: 1200px) {
    .product-grid[data-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .product-grid[data-count="4"] .product-card {
        grid-column: span 1;
    }
}


/* --------------------------------------------------------------------------
   Type split: headings and short labels in Cinzel (the wordmark serif),
   longer running text in Familjen Grotesk. To go all-grotesk again, set
   --font-display to var(--font-grotesk) and remove this block.
   -------------------------------------------------------------------------- */

h1, h2, h3,
.eyebrow,
.meta,
.primary-nav a,
.mobile-nav a,
.header-link,
.announce-item,
.btn,
.chip,
.link-arrow,
.product-name,
.price,
.price-pending,
.station-name,
.product-badge,
.footer-grid h2,
.form-label,
.filter-label,
.label,
.values-list strong,
.upcoming-mark span,
.preloader-progress,
.accordion-button,
.offcanvas-title,
.option-group legend {
    font-family: var(--font-display);
}

h1, h2, h3,
.campaign-story h1,
.campaign-story h2 {
    letter-spacing: 0.01em;
    font-weight: 600;
    line-height: 1.08;
}

/* Smoother reveals everywhere. */
.reveal {
    transition-duration: 900ms;
}


/* --------------------------------------------------------------------------
   Phones: simpler, calmer layout
   -------------------------------------------------------------------------- */

.hold-hint,
.showroom-nav,
.panel-price {
    display: none;
}

.panel-price {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--text-strong);
}

@media (pointer: coarse) {
    .campaign-stage.has-hold {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .campaign-stage.has-hold .hold-hint {
        position: absolute;
        left: 50%;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
        z-index: 4;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.5rem 0.95rem;
        border: 1px solid rgba(246, 245, 241, 0.28);
        border-radius: 999px;
        background: rgba(9, 11, 17, 0.55);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: var(--text-strong);
        font-family: var(--font-display);
        font-size: var(--text-xs);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        transform: translateX(-50%);
        pointer-events: none;
        transition: opacity var(--dur-base) ease;
    }

    .hold-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--text-strong);
        animation: hold-pulse 1.6s ease-in-out infinite;
    }

    .campaign-stage.is-holding .hold-hint {
        opacity: 0.35;
    }
}

@keyframes hold-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.55); opacity: 0.5; }
}

@media (max-width: 767.98px) {
    :root {
        --announce-height: 0px;
    }

    .announce {
        display: none;
    }

    h1,
    .campaign-story h1 {
        font-size: 2rem;
    }

    h2,
    .campaign-story h2 {
        font-size: 1.65rem;
    }

    .campaign-scrim-bottom {
        height: 48svh;
        background: linear-gradient(to top, var(--bg) 2%, rgba(9, 11, 17, 0.6) 34%, transparent);
    }

    .campaign-story .lede {
        font-size: var(--text-sm);
    }

    /* Showroom: heading on top, one piece in the middle, a product bar at
       the bottom with arrows and dots. The 2x2 list is not needed here. */
    .showroom {
        min-height: 150svh;
    }

    .showroom-stage {
        grid-template-rows: auto 1fr auto auto;
        padding-top: calc(var(--header-total) + var(--s-4));
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
        gap: var(--s-3);
    }

    .showroom-heading {
        gap: var(--s-2);
    }

    .showroom-heading h2 {
        max-width: none;
        font-size: 1.6rem;
    }

    .showroom-heading .lede {
        display: none;
    }

    .station-strip {
        display: none;
    }

    .showroom-panel {
        grid-row: 3;
        align-self: end;
        justify-self: stretch;
        width: 100%;
        padding: var(--s-4);
        gap: var(--s-2);
        background: rgba(9, 11, 17, 0.78);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .showroom-panel .panel-copy {
        gap: var(--s-1);
    }

    .showroom-panel h3 {
        font-size: var(--text-md);
    }

    .showroom-panel .panel-price {
        display: block;
    }

    .showroom-panel p#showroomPanelText {
        display: none;
    }

    .showroom-panel .panel-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top: var(--s-2);
    }

    .showroom-panel .panel-actions .btn {
        min-height: 2.75rem;
    }

    .showroom-nav {
        grid-row: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .showroom-nav .product-arrow {
        position: static;
        margin: 0;
        opacity: 1;
        transform: none;
        display: grid;
    }

    .showroom-dots {
        display: flex;
        gap: 8px;
    }

    .showroom-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(246, 245, 241, 0.3);
        transition: background-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
    }

    .showroom-dots span.is-current {
        background: var(--text-strong);
        transform: scale(1.35);
    }

    /* Calmer spacing through the rest of the page. */
    .section {
        padding-block: 3.5rem;
    }

    .section-head {
        margin-bottom: 2rem;
    }

    .values-list li {
        padding: var(--s-4) 0;
    }

    .destination-card.is-upcoming {
        display: none;
    }

    .filters {
        gap: var(--s-3);
    }
}


/* Phones, round two: the film plays in place, and the product bar sits at
   the very bottom of the showroom screen. */
.campaign.is-hold-mode {
    height: 100svh;
}

.campaign.is-hold-mode .campaign-progress {
    display: none;
}

@media (max-width: 767.98px) {
    .showroom {
        min-height: 130svh;
    }

    .showroom-stage {
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .showroom-heading {
        flex: none;
    }

    .showroom-nav {
        order: 3;
        margin-top: auto;
        padding-bottom: var(--s-3);
    }

    .showroom-panel {
        order: 4;
        flex: none;
        margin: 0 calc(var(--gutter) * -1) 0;
        width: auto;
        align-self: stretch;
        justify-self: stretch;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: var(--s-4) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
        background: rgba(9, 11, 17, 0.92);
    }

    .showroom-stage {
        padding-bottom: 0;
    }
}

/* Desktop: the product panel sits low, just above the station strip. */
@media (min-width: 768px) {
    .showroom-panel {
        align-self: end;
        margin-bottom: var(--s-4);
    }
}

/* Phones: the showroom is exactly one screen tall, so the product bar ends
   flush with the bottom of the section and nothing empty follows it. */
@media (max-width: 767.98px) {
    .showroom {
        min-height: 0;
    }

    .showroom-stage {
        position: relative;
    }
}


/* ==========================================================================
   Retail theme
   The film stays dark and cinematic; everything after it is a light,
   editorial store: warm off-white, near-black type, hairlines, product
   photography on a soft stone ground.
   ========================================================================== */

[data-bs-theme="light"] {
    --bg: #f4f2ee;
    --surface: #ece9e3;
    --surface-2: #fbfaf8;
    --surface-3: #e3dfd8;
    --stone: #e9e6e0;
    --line: rgba(21, 21, 21, 0.1);
    --line-strong: rgba(21, 21, 21, 0.24);
    --text-strong: #151515;
    --text: #2b2a28;
    --muted: #6f6b64;
    --faint: #8e8a83;
    --accent: #151515;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--line);
    --bs-link-color-rgb: 21, 21, 21;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-emphasis-color: #151515;
    color: var(--text);
}

[data-bs-theme="light"] .btn-solid {
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-color: #f4f2ee;
    --bs-btn-active-color: #fff;
}

[data-bs-theme="light"] .btn-line {
    --bs-btn-hover-bg: rgba(21, 21, 21, 0.04);
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: rgba(21, 21, 21, 0.08);
    --bs-btn-active-color: #000;
}

[data-bs-theme="light"] .chip[aria-pressed="true"] {
    color: #f4f2ee;
}

[data-bs-theme="light"] ::selection {
    background: #151515;
    color: #f4f2ee;
}

/* Calmer, smaller headings: a store, not a poster. */
[data-bs-theme="light"] h2 {
    font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
    letter-spacing: 0.02em;
}

[data-bs-theme="light"] .detail-copy h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
    letter-spacing: 0.02em;
    max-width: 16ch;
}

[data-bs-theme="light"] .lede {
    color: var(--muted);
}

/* Header ------------------------------------------------------------------ */

.site-header .primary-nav a::after {
    background: currentColor;
    height: 1px;
}

.site-header.is-light,
.site-header.is-light.is-scrolled {
    background: rgba(244, 242, 238, 0.94);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom-color: rgba(21, 21, 21, 0.08);
}

.site-header.is-light .wordmark-mark,
.site-header.is-light .wordmark-text {
    filter: none;
    text-shadow: none;
}

.site-header.is-light .header-link,
.site-header.is-light .primary-nav a {
    color: #55524c;
}

.site-header.is-light .header-icon,
.site-header.is-light .primary-nav a:hover,
.site-header.is-light .primary-nav a[aria-current="true"] {
    color: #151515;
}

.site-header.is-light .bag-count {
    background: #151515;
    color: #f4f2ee;
}

.announce {
    background: #151515;
    color: #ece9e3;
}

/* Preloader ----------------------------------------------------------------- */

.preloader-progress {
    width: 7rem;
    height: 1px;
    background: rgba(236, 235, 230, 0.15);
    overflow: hidden;
}

.preloader-bar {
    display: block;
    height: 100%;
    background: #ece9e3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms linear;
}

/* Showroom ------------------------------------------------------------------ */

.showroom .eyebrow,
.showroom .lede {
    color: var(--muted);
}

.showroom-panel {
    background: rgba(250, 249, 246, 0.92);
    border-color: rgba(21, 21, 21, 0.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(40, 34, 28, 0.08);
}

.station-strip {
    background: rgba(250, 249, 246, 0.86);
    border-color: rgba(21, 21, 21, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.station:hover {
    background: rgba(21, 21, 21, 0.03);
}

.station[aria-pressed="true"] {
    background: rgba(21, 21, 21, 0.05);
    box-shadow: inset 0 -2px 0 #151515;
}

.showroom-nav .product-arrow,
.product-arrow {
    background: rgba(255, 255, 255, 0.96);
    color: #151515;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(40, 34, 28, 0.1);
}

.showroom-dots span {
    background: rgba(21, 21, 21, 0.22);
}

.showroom-dots span.is-current {
    background: #151515;
}

@media (max-width: 767.98px) {
    .showroom-panel {
        background: rgba(250, 249, 246, 0.96);
        box-shadow: 0 -10px 30px rgba(40, 34, 28, 0.06);
    }
}

/* Details viewer ------------------------------------------------------------ */

.viewer {
    background: radial-gradient(120% 90% at 50% 35%, #f7f5f1 0%, var(--stone) 70%);
    border-color: rgba(21, 21, 21, 0.06);
}

.viewer canvas {
    transition: opacity 220ms ease;
}

.viewer.is-switching canvas {
    opacity: 0;
}

.viewer-hint {
    color: var(--faint);
}

.section-sunken[data-bs-theme="light"] {
    background-color: var(--bg);
    border-block-color: var(--line);
}

/* Product cards and gallery --------------------------------------------------
   Photos sit on one stone tone; multiply blending lets every photo's own
   white or grey studio background take on that same tone, so a grid of
   pictures shot on slightly different backgrounds reads as one set. */

.product-media,
.gallery-main,
.gallery-thumb,
.related .thumb,
.search-results .thumb {
    background: var(--stone, #e9e6e0);
}

.product-media img,
.gallery-main img,
.gallery-thumb img,
.related .thumb img,
.search-results .thumb img,
.cart-items img {
    mix-blend-mode: multiply;
}

.product-badge {
    top: var(--s-3);
    left: var(--s-3);
    padding: 0;
    background: none;
    color: #151515;
    font-size: 10px;
    letter-spacing: 0.16em;
}

.product-quick .btn-line {
    --bs-btn-bg: rgba(250, 249, 246, 0.94);
    --bs-btn-hover-bg: #fff;
}

.product-dots span {
    background: rgba(21, 21, 21, 0.2);
}

.product-dots span.is-current {
    background: rgba(21, 21, 21, 0.8);
}

.product-card .product-name a {
    color: var(--text-strong);
}

.product-info .price {
    color: var(--text-strong);
}

.gallery-count {
    background: rgba(250, 249, 246, 0.92);
    color: #151515;
}

/* Drawers and dialog -------------------------------------------------------- */

.offcanvas[data-bs-theme="light"],
.modal[data-bs-theme="light"] {
    --bs-offcanvas-bg: var(--bg);
    --bs-modal-bg: var(--bg);
}

.modal-backdrop.show {
    opacity: 0.4;
}

/* Footer: dark band to close the page. */

.site-footer {
    border-top: 0;
}


/* ==========================================================================
   Warmer, textured page: no flat white anywhere
   ========================================================================== */

[data-bs-theme="light"] {
    --bg: #ede9e2;
    --surface: #e5e0d7;
    --surface-2: #f3f0ea;
    --stone: #e3ded5;
}

/* A fine paper grain over the whole light store, very faint. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .34 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sections alternate between two warm tones, with a soft light falloff. */
#details[data-bs-theme="light"] {
    background:
        radial-gradient(90% 60% at 20% 0%, rgba(255, 252, 246, 0.7), transparent 60%),
        #e8e3db;
}

#shop[data-bs-theme="light"] {
    background:
        radial-gradient(80% 50% at 85% 0%, rgba(255, 252, 246, 0.65), transparent 60%),
        var(--bg);
}

/* Product photos: one consistent pale studio ground, slightly lighter than
   the page so the cards lift off it. */
.product-media,
.gallery-main,
.gallery-thumb,
.related .thumb,
.search-results .thumb {
    background: #f1eee8;
}

.product-media {
    box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.04);
}

.viewer {
    background:
        radial-gradient(70% 55% at 50% 38%, #f6f3ee 0%, #e9e4dc 60%, #ddd7cd 100%);
}

.offcanvas[data-bs-theme="light"],
.modal[data-bs-theme="light"] {
    --bs-offcanvas-bg: #f1eee8;
    --bs-modal-bg: #f1eee8;
}

.site-header.is-light,
.site-header.is-light.is-scrolled {
    background: rgba(237, 233, 226, 0.92);
}

/* Showroom copy over the studio: details that make it read as a set. */
.showroom-heading .eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    margin-right: 0.6rem;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.6;
}

.station {
    position: relative;
    grid-template-columns: auto 1fr auto;
    column-gap: 0.85rem;
    align-items: baseline;
}

.station .station-number {
    grid-row: 1 / span 2;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    color: var(--faint);
    letter-spacing: 0.08em;
}

.station .station-name {
    grid-column: 2;
}

.station .station-meta {
    grid-column: 2;
}

.station .station-price {
    grid-column: 3;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--text-strong);
}


/* ==========================================================================
   Navy theme (final): the whole store sits in deep alpine blue
   ========================================================================== */

:root {
    --bg: #0b1424;
    --surface: #0f1a2e;
    --surface-2: #142139;
    --surface-3: #1b2a45;
    --line: rgba(226, 232, 244, 0.1);
    --line-strong: rgba(226, 232, 244, 0.22);
    --muted: #9aa5b8;
    --faint: #76829a;
}

body::after {
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

/* Header: always deep navy, never switches tone. */
.site-header,
.site-header.is-scrolled {
    background: rgba(11, 20, 36, 0.96);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgba(226, 232, 244, 0.08);
}

/* The bar above it: white with black text, on every screen size. */
.announce,
.site-header .announce {
    display: block;
    background: #ffffff;
    color: #111111;
}

@media (max-width: 767.98px) {
    :root {
        --announce-height: 1.75rem;
    }

    .announce {
        display: block;
    }

    .announce-item {
        font-size: 10px;
    }
}

/* Sections: navy, with a soft light falloff so they never look flat. */
#details {
    background:
        radial-gradient(80% 55% at 15% 0%, rgba(80, 104, 150, 0.22), transparent 60%),
        #0e182b;
    border-block: 1px solid var(--line);
}

#shop {
    background:
        radial-gradient(70% 50% at 85% 0%, rgba(80, 104, 150, 0.18), transparent 60%),
        var(--bg);
}

.site-footer {
    background: #070d19;
    border-top: 1px solid var(--line);
}

/* Showroom copy and controls over the night scene. */
.showroom .eyebrow,
.showroom .lede {
    color: #b3bdcf;
}

.showroom-panel {
    background: rgba(11, 20, 36, 0.82);
    border-color: rgba(226, 232, 244, 0.14);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.station-strip {
    background: rgba(11, 20, 36, 0.78);
    border-color: rgba(226, 232, 244, 0.16);
}

.station:hover {
    background: rgba(226, 232, 244, 0.05);
}

.station[aria-pressed="true"] {
    background: rgba(226, 232, 244, 0.08);
    box-shadow: inset 0 -2px 0 #f6f5f1;
}

.showroom-dots span {
    background: rgba(226, 232, 244, 0.3);
}

.showroom-dots span.is-current {
    background: #f6f5f1;
}

@media (max-width: 767.98px) {
    .showroom-panel {
        background: rgba(11, 20, 36, 0.94);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
    }
}

/* Viewer: a lit navy studio sweep. */
.viewer {
    background: radial-gradient(70% 55% at 50% 38%, #2a3a59 0%, #172440 55%, #0e182b 100%);
    border-color: rgba(226, 232, 244, 0.08);
}

/* Product photography stays on its own pale studio card, which reads as
   premium against the navy page. */
.product-media,
.gallery-main,
.gallery-thumb,
.related .thumb,
.search-results .thumb {
    background: #f1eee8;
}

.product-badge {
    color: #111;
}

.product-card .product-name a,
.product-info .price {
    color: var(--text-strong);
}

.offcanvas,
.modal {
    --bs-offcanvas-bg: #0f1a2e;
    --bs-modal-bg: #0f1a2e;
}

.modal-backdrop.show {
    opacity: 0.6;
}

.product-quick .btn-line {
    --bs-btn-bg: rgba(255, 255, 255, 0.95);
    --bs-btn-color: #111;
    --bs-btn-border-color: rgba(17, 17, 17, 0.15);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-border-color: #111;
}

.product-quick .btn-solid {
    --bs-btn-bg: #0b1424;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #0b1424;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #000;
}

/* A Closer Look: neutral white studio light on the navy sweep. */
.viewer {
    background:
        radial-gradient(45% 38% at 50% 30%, rgba(255, 255, 255, 0.16), transparent 70%),
        radial-gradient(75% 60% at 50% 40%, #2b3c5c 0%, #18263f 55%, #0e182b 100%);
}

/* Keep the heading legible over the mountains. */
@media (min-width: 768px) {
    .showroom-stage {
        background: linear-gradient(100deg, rgba(8, 14, 28, 0.6) 0%, rgba(8, 14, 28, 0.25) 32%, transparent 52%);
    }
}

@media (max-width: 767.98px) {
    .showroom-stage {
        background: linear-gradient(to bottom, rgba(8, 14, 28, 0.55), transparent 28%);
    }
}

/* The collection's landscape: a real photograph behind the transparent 3D
   canvas, slightly oversized so it can drift with the camera. */
.world-canvas {
    background-color: #0b1424;
    background-image: url("../assets/images/scene/alps-blue-hour.webp");
    background-image: image-set(
        url("../assets/images/scene/alps-blue-hour-1600.webp") 1x,
        url("../assets/images/scene/alps-blue-hour.webp") 2x
    );
    background-repeat: no-repeat;
    background-size: max(102vw, 100vh) auto;
    background-position: 50% 24%;
}

@media (min-width: 1200px) {
    .world-canvas {
        background-image: url("../assets/images/scene/alps-blue-hour.webp");
    }
}

@media (max-width: 767.98px) {
    .world-canvas {
        background-size: auto 100vh;
        background-position: 50% 0%;
    }
}

/* Lighter heading scrim now that the backdrop is a photograph. */
@media (min-width: 768px) {
    .showroom-stage {
        background: linear-gradient(100deg, rgba(6, 12, 26, 0.42) 0%, rgba(6, 12, 26, 0.12) 28%, transparent 42%);
    }
}

/* No dark overlay over the landscape: the heading carries its own soft
   shadow instead. */
.showroom-stage,
.showroom-stage::before,
.showroom-stage::after {
    background: none !important;
}

.showroom-heading h2,
.showroom-heading .eyebrow,
.showroom-heading .lede {
    text-shadow: 0 1px 2px rgba(4, 9, 20, 0.35), 0 2px 18px rgba(4, 9, 20, 0.45);
}

.showroom-heading .lede {
    color: #dfe5ef;
}

/* A Closer Look: dimmer studio light. */
.viewer {
    background:
        radial-gradient(45% 38% at 50% 30%, rgba(255, 255, 255, 0.07), transparent 70%),
        radial-gradient(75% 60% at 50% 40%, #22324f 0%, #152239 55%, #0d1729 100%);
}

/* A Closer Look: no spotlight effects, just an even navy studio ground. */
.viewer {
    background: linear-gradient(180deg, #17243c 0%, #111c31 100%);
}