/* ==========================================================================
   O&M Mongolian Wool — editorial maison design system
   Black, bone and antique gold. Photography does the work; type stays quiet.
   ========================================================================== */


/* Self-hosted fonts (variable woff2, latin + latin-ext) */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: block; src: url('resources/fonts/cormorant-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: block; src: url('resources/fonts/cormorant-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: block; src: url('resources/fonts/cormorant-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: block; src: url('resources/fonts/cormorant-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 500; font-display: block; src: url('resources/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 500; font-display: block; src: url('resources/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* Palette */
    --ink: #0b0a08;           /* the dark room */
    --ink-raised: #100e0b;    /* panels on ink */
    --charcoal: #1a1814;      /* warm shop ground */
    --charcoal-raised: #221f1a;
    --seam: #1a1610;          /* 1px gaps between panels */
    --gold: #c4a35a;          /* rules, numbers, one word */
    --gold-soft: #e8d7b0;     /* champagne text on dark */
    --bone: #f3eee4;
    --bone-shade: #e6dfd1;

    --text: #f3eee4;
    --text-body: #b9b0a0;
    --text-muted: #948b7a;
    --rule: rgba(196, 163, 90, 0.28);
    --rule-strong: rgba(196, 163, 90, 0.6);

    /* Type */
    --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
    --font-ui: 'Outfit', system-ui, -apple-system, sans-serif;

    /* Layout */
    --gutter: 48px;
    --max: 1320px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    background: var(--ink);
    color: var(--text);
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

[v-cloak] { display: none !important; }

/* Page entrance — covers the moment Vue takes over (header built, language
   swapped, products arriving) so opening a page reads as one smooth reveal.
   Opacity only on #app: a transform there would capture the fixed bottom bar
   and drawers. Reduced-motion visitors skip all of it (rule at the end). */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes settleIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
#app { animation: pageIn 0.5s ease both; }
.site-header { animation: pageIn 0.5s ease both; }
#app > section:not(.hero), #app > main, #app > .shop-ground, .site-footer {
    animation: riseIn 0.9s var(--ease) both;
}
#app > :nth-child(3) { animation-delay: 0.08s; }
#app > :nth-child(4) { animation-delay: 0.16s; }
#app > :nth-child(n+5) { animation-delay: 0.24s; }
/* Home hero: the scene comes out of the morning mist from the front back —
   the hill and herd first, then the mountains, the sky last — while the haze
   (.hero-mist, lying thickest in the valley) settles away downwards; the title
   rises as it clears */
@keyframes mistIn {
    from { opacity: 0; filter: blur(12px) brightness(1.3) saturate(0.6); }
    to { opacity: 1; filter: none; }
}
/* Three motions at their own pace: the clearing edge and the whole bank
   sink slowly, while the mist itself thins away quickly */
@keyframes mistClear {
    from { -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
    to { -webkit-mask-position: 50% 0%; mask-position: 50% 0%; }
}
@keyframes mistSink { to { translate: 0 12%; } }
@keyframes mistFade { to { opacity: 0; } }
@keyframes mistDrift {
    from { background-position: 0% 0, 100% 0, 20% 0, 0 0; }
    to { background-position: 45% 0, 55% 0, 60% 0, 0 0; }
}
.hero-layer { animation: mistIn 1.4s var(--ease) both; }
.hero-front { animation-duration: 2.2s; }
.hero-mid { animation-delay: 0.25s; }
.hero-back { animation-duration: 1.6s; animation-delay: 0.5s; }
/* The cloud sea settles slowly into the valley as the veil lifts, and stays */
@keyframes seaSettle { from { transform: translateY(-1.5%); } }
/* …then breathes: each slice drifts slowly for as long as the page is open,
   the near one most, the far one barely (it is distant). Each loop swings
   one way (--bob-a, --sway) and then the other (--bob-b, back across), and
   the slices take different swings at their own pace, so they rarely move
   the same way at once. It starts and ends at rest, where seaSettle leaves off */
@keyframes cloudBob {
    30% { transform: translate(var(--sway), var(--bob-a)); }
    70% { transform: translate(calc(-1 * var(--sway)), var(--bob-b)); }
}
.hero-cloud {
    animation:
        mistIn 1.4s var(--ease) 0.25s both,
        seaSettle 4s linear both,
        cloudBob var(--bob-time) ease-in-out 4s infinite;
}
.hero-cloud-far { --bob-a: -3px; --bob-b: 2px; --sway: 2px; --bob-time: 13s; }
.hero-cloud-mid { --bob-a: 6px; --bob-b: -5px; --sway: -4px; --bob-time: 10s; }
.hero-cloud-near { --bob-a: -12px; --bob-b: 8px; --sway: 6px; --bob-time: 7.5s; }
.hero-mist {
    animation:
        mistClear 4s cubic-bezier(0.3, 0, 0.4, 1) both,
        mistSink 4s cubic-bezier(0.3, 0, 0.4, 1) both,
        mistDrift 4s ease-out both,
        mistFade 1.3s ease-in 0.2s both;
}
.hero-copy-text > * { animation: riseIn 1.1s var(--ease) 0.8s both; }
.hero-copy-text > :nth-child(2), .hero-copy-text > :nth-child(3) { animation-delay: 0.95s; }
.hero-copy-text > :nth-child(4) { animation-delay: 1.1s; }
.hero-copy-text > :nth-child(n+5) { animation-delay: 1.25s; }
/* Below the fold (v-reveal): faded into the frame by the scroll itself,
   instead of playing an entrance on load while still off screen */
#app > .is-reveal { animation: none; will-change: opacity, translate; }
.product-card { animation: riseIn 0.7s var(--ease) both; }
.product-card:nth-child(2) { animation-delay: 0.06s; }
.product-card:nth-child(3) { animation-delay: 0.12s; }
.product-card:nth-child(n+4) { animation-delay: 0.18s; }
/* English/Mongolian visitors: hidden until Vue has swapped the Czech text
   (class set by an inline script in <head>, removed in app.js after mount) */
html.lang-pending #app { opacity: 0 !important; animation: none; }
/* Before Vue mounts, <site-header> is an empty tag; holding the real header's
   height keeps the pre-rendered page from jumping down when it appears */
site-header { display: block; height: 99px; background: var(--ink); }
@media (max-width: 900px) { site-header { height: 87px; } }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.05;
    color: var(--gold-soft);
}

/* Shared small type ------------------------------------------------------- */
.eyebrow {
    display: block;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.numeral {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--gold);
    font-variant-numeric: lining-nums;
    text-transform: none;
    letter-spacing: 0;
}

.gold-word { color: var(--gold); font-style: italic; }

.rule {
    border: 0;
    height: 1px;
    background: var(--rule);
}

/* The one gold text link — used instead of buttons wherever possible */
.link-gold {
    display: inline-block;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-soft);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.link-gold:hover { color: var(--gold); }
.link-gold.on-bone { color: var(--ink); }

/* Solid action — only for commitment (add to cart, checkout) */
.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 52px;
    padding: 0 2.2rem;
    background: var(--gold-soft);
    color: var(--ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}
.btn-solid:hover { background: var(--bone); }
.btn-solid:disabled { background: #3a3630; color: var(--text-muted); cursor: not-allowed; }

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 24px var(--gutter);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-soft);
    border-bottom: 1px solid rgba(196, 163, 90, 0.12);
    transition: border-color 0.4s ease, padding 0.4s ease;
}
/* Blur/tint live on a pseudo-element rather than the header itself. A
   backdrop-filter on the header would make it the containing block for its
   position:fixed children (the mobile nav below), confining that fullscreen
   menu to the header's own thin box instead of the viewport — this keeps
   .primary-nav's fixed positioning viewport-relative as intended. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(11, 10, 8, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color 0.4s ease;
}

/* On the home page the header floats over the hero until you scroll */
.site-header.is-overlay {
    position: fixed;
    left: 0;
    right: 0;
    border-bottom-color: transparent;
}
.site-header.is-overlay::before {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site-header.is-overlay.is-scrolled {
    border-bottom-color: rgba(196, 163, 90, 0.12);
}
.site-header.is-overlay.is-scrolled::before {
    background: rgba(11, 10, 8, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Brand lockup: knot seal | hairline | stacked wordmark */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    justify-self: start;
}
.brand-knot {
    width: 42px;
    height: auto;
    opacity: 0.92;
    transition: opacity 0.4s ease;
}
.brand-words {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-left: 18px;
    border-left: 1px solid var(--rule);
}
.brand-mark-wrap { display: block; line-height: 0; }
.brand-mark {
    display: block;
    height: 30px;
    width: auto;
    overflow: visible;
}
.brand-mark .om-letter,
.brand-mark .om-amp { fill: #fff; }

.brand-sub {
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.34em;
    line-height: 1;
    color: var(--gold);
    margin-right: -0.34em;
    white-space: nowrap;
}

.primary-nav {
    display: flex;
    gap: 28px;
    list-style: none;
}
.primary-nav a {
    position: relative;
    padding: 6px 0;
    transition: color 0.3s ease;
}
.primary-nav a:hover, .primary-nav a.active { color: var(--gold); }
.primary-nav a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold);
}

/* Mobile-only fixed tab bar (see @media below); irrelevant on desktop, where
   .primary-nav in the header already handles navigation. */
.bottom-nav { display: none; }

.header-tools {
    justify-self: end;
    margin-left: 32px; /* keeps the nav from touching the tools at narrow desktop widths */
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Language: the current code with a chevron, opening a small list under it
   (one narrow control, so the header row fits even a small phone) */
.lang-menu { position: relative; }
.lang-current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    letter-spacing: inherit;
    font-size: inherit;
    text-transform: uppercase;
    color: var(--gold-soft);
    transition: color 0.3s ease;
}
.lang-current:hover, .lang-menu.open .lang-current { color: var(--gold); }
.lang-current svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 0.3s var(--ease); }
.lang-menu.open .lang-current svg { transform: rotate(180deg); }
.lang-options {
    position: absolute;
    top: calc(100% + 10px);
    right: -14px;
    min-width: 150px;
    list-style: none;
    padding: 6px 0;
    background: rgba(11, 10, 8, 0.97);
    border: 1px solid rgba(196, 163, 90, 0.25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    animation: langDrop 0.22s var(--ease) both;
}
@keyframes langDrop { from { opacity: 0; transform: translateY(-6px); } }
.lang-options button {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--text-muted);
    text-align: left;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.lang-options .lang-code { width: 22px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.lang-options button:hover { color: var(--text); background: rgba(196, 163, 90, 0.08); }
.lang-options button.active { color: var(--gold); }
.lang-options button.active .lang-code { color: var(--gold); }

/* Account and bag both need to read as tappable controls, not nav words —
   especially over the transparent hero header — so they share one solid
   backdrop (like .btn-solid) split by a hairline, instead of two separately-
   shaped pills or blending into the gold text around them. */
.account-cart {
    display: flex;
    align-items: stretch;
    background: var(--gold-soft);
}
.account-link, .cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.08em;
    font-size: inherit;
    text-transform: uppercase;
    color: var(--ink);
    padding: 9px 16px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}
.account-link:hover, .cart-link:hover { background: var(--bone); color: var(--ink); }
.account-link { border-right: 1px solid rgba(11, 10, 8, 0.15); }
.account-link svg, .cart-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cart-link .numeral { font-size: 20px; letter-spacing: 0; color: var(--ink); }

/* Header boxes get fixed widths on desktop, sized for the longest label in any
   language. Without them the header stretches and squashes when the language
   changes (Mongolian labels run wider than Czech/English). */
@media (min-width: 1101px) {
    .primary-nav li { width: 80px; text-align: center; }
}
@media (min-width: 1201px) {
    .account-link { width: 160px; justify-content: center; }
    .cart-link { width: 104px; justify-content: center; }
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

.hero {
    position: relative;
    background: var(--ink);
    /* clip, not hidden: hidden would make it a scroll box and break the sticky stage */
    overflow: clip;
}
/* The hero itself: one screen, scrolling away like the rest of the page —
   v-parallax plays the pull-in by itself as the fog lifts */
.hero-stage {
    position: sticky;
    /* Where it already sits, under the header's reserved space (site-header) */
    top: 99px;
    min-height: calc(100vh - 78px);
    min-height: calc(100svh - 78px);
    display: flex;
    flex-direction: column;
    /* Clipped at the sides (the overscan), but the photo may hang below its foot */
    overflow-x: clip;
    overflow-y: visible;
}
@media (max-width: 900px) { .hero-stage { top: 87px; } }
.hero-media {
    position: absolute;
    inset: 0;
}
.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
/* Overscan, so the layers can drift (v-parallax) without showing an edge */
.hero-layer { scale: 1.05; will-change: translate; }
/* The hill and herd a little bigger still, so their grass hangs below the stage */
.hero-layer.hero-front { scale: 1.08; }
/* Valley fog lit by the dawn: screen-blended, so it glows over the photo
   rather than greying it — white, so the dawn colour comes out of the photo —
   with drifting banks and the sun burning through (::before). It clears
   through a sliding mask, a soft edge sinking from the sky down to the
   valley floor (mistClear), not by fading as one sheet. */
.hero-mist {
    position: absolute;
    /* Taller than the stage at the top, so sinking never uncovers its edge */
    inset: -12% 0 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 70% 20% at 25% 84%, rgba(255, 255, 255, 0.9), transparent 70%),
        radial-gradient(ellipse 80% 24% at 75% 68%, rgba(255, 255, 255, 0.75), transparent 70%),
        radial-gradient(ellipse 95% 26% at 45% 52%, rgba(255, 255, 255, 0.6), transparent 72%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
    background-size: 160% 100%, 160% 100%, 160% 100%, 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 43%, #000 57%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 43%, #000 57%, #000 100%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* The depth fog (v-fog) when WebGL is there; the CSS mist is its fallback */
.hero-fog {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.has-fog .hero-mist { display: none; }
.hero-mist::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 380px at var(--sun-x, 82%) var(--sun-y, 52%),
        rgba(255, 240, 200, 0.95) 0, rgba(255, 196, 110, 0.55) 110px, rgba(255, 150, 70, 0.2) 220px, transparent 380px);
}

.hero-copy {
    position: relative;
    margin-top: auto;
    /* Low and to the right, over the valley — the herd keeps the left */
    align-self: flex-end;
    display: flex;
    align-items: stretch;
    gap: 20px;
    /* Fixed width, not content-sized: every language fills the same box, so
       the text block occupies the same space (Czech sets the reference) */
    width: min(760px, 50vw);
    max-width: calc(100vw - 2 * var(--gutter));
    margin-right: var(--gutter);
    /* Anchored a fixed distance above the hero's foot (not a translate, whose %
       follows the block's own height — the longer English heading wrapped to
       three lines and jumped up under the header) */
    padding-bottom: 45vh;
    padding-bottom: 45svh;
}
.hero-mark {
    flex: none;
    width: auto;
    height: 100%;
    max-width: 190px;
    align-self: center;
    opacity: 0.96;
}
.hero-copy-text {
    /* It flies past the camera from its own middle (v-parallax) */
    transform-origin: 50% 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    width: 100%;
    /* Extra room between the text and the right wall (≈105px at a 1440px window) */
    padding-right: 15vw;
    min-width: 0;
}
.hero-copy h1 {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: clamp(48px, 6vw, 92px);
    /* Below ~1 the descenders of line one (p, y) touch line two's capitals */
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    /* Two lines in every language — the <br> sets the break, not the box width */
    white-space: nowrap;
}
/* Mongolian headline runs longer than Czech at the same size; a touch smaller
   keeps it on two lines so the block doesn't grow up into the header */
.hero-copy h1.hero-title-mn { font-size: clamp(40px, 4.6vw, 72px); }
.hero-copy .hero-fibres {
    margin-top: 10px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.18em;
    font-size: 13px;
    text-transform: uppercase;
}
.hero-copy .link-gold { margin-top: 14px; align-self: flex-end; color: #fff; border-bottom-color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 12px; box-shadow: 0 1px 2px rgba(48, 24, 6, 0.35); }
.hero-copy .link-gold:hover { color: #fff; border-bottom-color: #fff; }
/* The hero's one action: buy, with the price on the button */
.hero-copy .hero-buy {
    margin-top: 22px;
    align-self: flex-end;
    gap: 14px;
    /* Caps label and price sit on one baseline; padding (not a fixed
       height) keeps the pair centred in the button */
    align-items: baseline;
    height: auto;
    padding-top: 18px;
    padding-bottom: 17px;
    line-height: 1;
    box-shadow: 0 10px 30px rgba(48, 24, 6, 0.35);
}
.hero-buy-price {
    padding-left: 14px;
    border-left: 1px solid rgba(11, 10, 8, 0.25);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Practical facts under the hero — plain, scannable, no ornament */
.facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--charcoal);
    border-bottom: 1px solid var(--seam);
    position: relative;
    z-index: 1;
}
.facts li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px var(--gutter);
    border-left: 1px solid rgba(243, 238, 228, 0.07);
}
.facts li:first-child { border-left: 0; }
.facts strong { font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--text); }
.facts span, .facts a { font-size: 13px; color: var(--text-body); }
.facts a:hover { color: var(--gold-soft); }

/* Landscape band carrying the visit-the-shop card */
.shop-visit { height: auto; min-height: clamp(480px, 70vh, 680px); display: flex; align-items: center; }
.shop-visit img { position: absolute; inset: 0; }
.shop-visit::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(11, 10, 8, 0.82) 0, rgba(11, 10, 8, 0.55) 40%, rgba(11, 10, 8, 0) 75%);
}
.shop-visit-card { position: relative; z-index: 2; max-width: 460px; margin: 64px var(--gutter); }
.shop-visit-card h2 { font-size: clamp(34px, 4vw, 52px); margin: 16px 0 18px; line-height: 1.05; }
.shop-visit-card p { color: var(--text); opacity: 0.85; }
.shop-visit-card address { font-style: normal; margin: 22px 0 6px; color: var(--gold-soft); line-height: 1.7; }
.shop-visit-card address a:hover { color: var(--gold); }
.shop-visit .land-caption { left: auto; right: var(--gutter); z-index: 2; }

/* Sun glare: the sun in the photo bleeds light over the title, washing out
   the letters it sits behind. Position and --glare come from v-parallax. */
.hero-glare {
    position: absolute;
    inset: 0;
    /* Over everything in the hero: every layer, the fog and the title */
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    /* After the sky has come out of the mist */
    /* Small at rest; as the hero pushes in (--sun-grow 0…1, from v-parallax)
       it swells to a solid core wide enough to cover the photo's own sun, even
       zoomed in and drifted off it a little as it follows the mid layer */
    --g: var(--sun-grow, 0);
    background: radial-gradient(circle 420px at var(--sun-x, -999px) var(--sun-y, -999px),
        rgba(255, 251, 238, 1) 0,
        rgba(255, 248, 228, calc(0.95 + 0.05 * var(--g))) calc(15px * var(--g)),
        rgba(255, 228, 170, calc(0.72 + 0.03 * var(--g))) 26px,
        rgba(250, 186, 104, 0.4) 90px,
        rgba(232, 150, 70, 0.16) 210px,
        rgba(226, 140, 60, 0) 420px);
    animation: pageIn 1.6s var(--ease) 1s both;
}
.hero-copy h1, .hero-copy .hero-fibres, .hero-copy .link-gold {
    text-shadow: 0 0 calc(var(--glare, 0) * 22px) rgba(255, 206, 130, calc(var(--glare, 0) * 0.75));
}
/* The small lines, white like the title, sit on a soft dark-warm shadow so
   the thin letters hold against the bright sky (the sun's bloom still on top) */
.hero-copy .hero-fibres, .hero-copy .link-gold {
    text-shadow:
        0 1px 2px rgba(48, 24, 6, 0.55),
        0 0 10px rgba(60, 30, 8, 0.45),
        0 0 calc(var(--glare, 0) * 22px) rgba(255, 206, 130, calc(var(--glare, 0) * 0.75));
}

/* ==========================================================================
   Home — three fibres
   ========================================================================== */

.fibres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--seam);
}
.fibre-col {
    display: flex;
    flex-direction: column;
    background: var(--ink-raised);
    color: inherit;
}
.fibre-col .frame {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.fibre-col .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease), opacity 0.8s ease;
}
.fibre-col .frame .still {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.fibre-col:hover .frame img { transform: scale(1.03); }
.fibre-col:hover .frame .still { opacity: 1; }

.fibre-col .body { padding: 48px 40px 56px; }
.fibre-col h2 { font-size: 36px; }
.fibre-col .kicker {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.fibre-col p {
    margin-top: 14px;
    color: var(--text-body);
    line-height: 1.6;
    max-width: 340px;
}
.fibre-col .link-gold { margin-top: 26px; }

/* ==========================================================================
   Home — editorial blocks
   ========================================================================== */

.statement {
    padding: 140px var(--gutter);
    text-align: center;
}
.statement blockquote {
    max-width: 860px;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.15;
    font-weight: 400;
    color: var(--gold-soft);
}
.statement .eyebrow { margin-bottom: 28px; }
.statement .link-gold { margin-top: 40px; }

/* Statement over a darkened landscape photo */
.statement.has-photo { position: relative; overflow: hidden; isolation: isolate; }
.statement.has-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.statement.has-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgba(11, 10, 8, 0.62), rgba(11, 10, 8, 0.78));
}

/* Full-width landscape between sections */
.land-band { position: relative; height: clamp(320px, 62vh, 680px); overflow: hidden; background: var(--ink); }
.land-band img { width: 100%; height: 100%; object-fit: cover; }
.land-band-peaks img { object-position: center top; } /* keep the summits in frame */
.land-caption {
    position: absolute;
    left: var(--gutter);
    bottom: 24px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-soft);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.statement.on-bone {
    background: var(--bone);
    color: var(--ink);
    padding: 36px var(--gutter);
    position: relative;
    overflow: hidden;
}
.statement.on-bone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('resources/brand/knot.png') no-repeat center / 240px auto;
    opacity: 0.14;
    pointer-events: none;
    /* Turns into place as the section scrolls up (--knot 0…1, v-story) */
    transform: rotate(calc((1 - var(--knot, 1)) * -90deg)) scale(calc(0.75 + 0.25 * var(--knot, 1)));
}
/* v-story: each word rises out of its own line (the clip hides it below) */
.rise-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Room for descenders inside the clip */
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}
.rise-word > span { display: inline-block; transform-origin: 0 100%; will-change: transform; }
.statement.on-bone > * { position: relative; z-index: 1; }
/* Home: an ordinary band, nothing pinned; v-story builds it word by word
   once it comes into view */
.statement.on-bone.story {
    padding: 180px var(--gutter);
    overflow: clip;
}
.statement.on-bone.story::before { display: none; }
/* (as specific as .statement.on-bone > *, which would make it relative) */
.statement.on-bone.story > .story-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media (max-width: 900px) {
    .statement.on-bone.story { padding: 120px var(--gutter); }
}
/* The knot pinned behind the words, turning into place with them */
.story-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('resources/brand/knot.png') no-repeat center / 240px auto;
    opacity: 0.14;
    pointer-events: none;
    transform: rotate(calc((1 - var(--knot, 1)) * -90deg)) scale(calc(0.75 + 0.25 * var(--knot, 1)));
}
.story-stage > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    /* Nothing to build: an ordinary band */
    .statement.on-bone.story { padding: 96px var(--gutter); }
}

/* 404 page: one statement block filling the space between header and footer */
.not-found { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.not-found .eyebrow.numeral { font-size: clamp(56px, 8vw, 96px); letter-spacing: 0.04em; margin-bottom: 12px; }
.not-found p { margin-top: 20px; color: var(--text-body); }
.not-found-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 40px; margin-top: 40px; }
.not-found-links .link-gold { margin-top: 0; }
.statement.on-bone .eyebrow { color: #8a6f33; }
.statement.on-bone blockquote { color: var(--ink); }

.feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 640px;
    background: var(--charcoal);
}
.feature-media { position: relative; overflow: hidden; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-products {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-content: center;
    gap: 40px 28px;
    padding: 64px clamp(24px, 4vw, 64px);
}
.feature-product { display: flex; flex-direction: column; min-width: 0; }
.feature-product .plate {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--charcoal-raised);
    isolation: isolate;
    position: relative;
}
.feature-products img { position: static; transform: scale(1.001); backface-visibility: hidden; will-change: transform; transition: transform 1.2s var(--ease); }
.feature-product .plate:hover img { transform: scale(1.035); }
.feature-product-title {
    margin-top: 16px;
    text-align: left;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.2;
    color: var(--text);
}
.feature-product-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.feature-product-meta .numeral { font-family: var(--font-ui); font-weight: 500; font-size: 16px; color: var(--gold-soft); white-space: nowrap; }
.feature-swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.feature-swatches button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 3px;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.feature-swatches button span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.feature-swatches button.active, .feature-swatches button:hover { border-color: var(--gold); }
.feature-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.feature-sizes button {
    min-width: 34px;
    padding: 5px 8px;
    border: 1px solid var(--rule);
    color: var(--text-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.feature-sizes button.active, .feature-sizes button:hover:not(:disabled) { border-color: var(--gold); color: var(--text); }
.feature-sizes button:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.feature-add {
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid var(--rule-strong);
    color: var(--gold-soft);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease;
}
.feature-add:hover:not(:disabled) { background: var(--gold); color: var(--ink); }
.feature-add:disabled { opacity: 0.4; cursor: not-allowed; }
/* Buttons line up across cards even when one title wraps to two lines */
.feature-product > .feature-add { margin-top: auto; }
.feature-product > :nth-last-child(2) { margin-bottom: 14px; }
.feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px clamp(32px, 6vw, 96px);
}
.feature-copy h2 { font-size: clamp(36px, 4vw, 56px); margin: 18px 0 22px; }
.feature-copy p { color: var(--text-body); max-width: 440px; }
.feature-copy .price-line {
    margin: 30px 0 34px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.feature-copy .price-line .numeral { font-size: 34px; letter-spacing: 0; text-transform: none; }

/* ==========================================================================
   Vlákna / Fibres page
   ========================================================================== */

.fibre-index {
    display: flex;
    gap: 36px;
    padding: 48px var(--gutter) 64px;
    max-width: var(--max);
    margin: 0 auto;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.fibre-index a { display: inline-flex; gap: 10px; align-items: baseline; }
.fibre-index a:hover { color: var(--gold-soft); }
.fibre-index .numeral { font-size: 18px; letter-spacing: 0; }

.chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--seam);
    scroll-margin-top: 100px;
}
.chapter.reverse .chapter-media { order: 2; }
.chapter-media {
    display: grid;
    grid-template-rows: 3fr 2fr;
    gap: 1px;
    background: var(--seam);
    min-height: 760px;
}
.chapter-media > div { position: relative; overflow: hidden; }
.chapter-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter-media.single { grid-template-rows: 1fr; }

.chapter-copy {
    padding: 96px clamp(32px, 6vw, 96px);
    background: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.chapter-copy .chapter-no { font-size: 56px; line-height: 1; }
.chapter-copy h2 { font-size: clamp(44px, 5vw, 72px); margin-top: 18px; }
.chapter-copy .latin {
    margin-top: 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--text-muted);
}
.chapter-copy > p { margin-top: 26px; color: var(--text-body); max-width: 480px; }

.spec {
    margin-top: 40px;
    border-top: 1px solid var(--rule);
    max-width: 480px;
}
.spec-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.spec-row dt {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.spec-row dd { color: var(--bone); }
.spec-row .numeral { font-size: 24px; }
.warmth { display: inline-flex; gap: 6px; vertical-align: middle; margin-right: 10px; }
.warmth i { width: 22px; height: 2px; background: var(--rule); display: block; }
.warmth i.on { background: var(--gold); }

.chapter-actions { margin-top: 40px; display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.status {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.status.available { color: var(--gold); }

/* A short, centred measure — full-width it ran to ~200 characters a line */
/* How to read the chapters' spec rows — a short guide before them, not
   small print after them */
.spec-note {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px 80px;
    align-items: baseline;
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 56px var(--gutter);
    border-top: 1px solid var(--seam);
}
.spec-note p { max-width: 620px; font-size: 15px; line-height: 1.7; color: var(--text-body); }

/* Size guide + washing, side by side above the fibre chapters */
.fibre-guides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 80px var(--gutter) 112px;
}
/* Both columns share one subgrid (eyebrow · title · intro · symbols · rows) so the
   size-table rows line up with the washing steps. The table spans the last two
   tracks and is pushed down so its header rule meets the steps' top rule. */
.fibre-guides { grid-template-rows: repeat(5, auto); row-gap: 0; }
.fibre-guides > div {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    align-content: start;
    scroll-margin-top: 100px;
}
.fibre-guides h2 { font-size: clamp(34px, 3.6vw, 48px); margin-top: 16px; }
.fibre-guides > div > p { margin: 16px 0 32px; color: var(--text-body); }
.fibre-guides .size-table { grid-row: 4 / span 2; align-self: start; margin-top: var(--guide-table-offset); }
.fibre-guides .size-table th { height: var(--guide-head); padding-top: 0; padding-bottom: 12px; vertical-align: bottom; }
.fibre-guides .size-table td { height: var(--guide-row); padding-top: 0; padding-bottom: 0; }
.fibre-guides {
    --guide-symbols: 84px;   /* icon + two label lines */
    --guide-head: 40px;
    --guide-row: 58px;
    --guide-table-offset: calc(var(--guide-symbols) + 32px - var(--guide-head) + 1px); /* +1: the list's top rule */
}
.care-symbols {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    gap: 12px;
    height: var(--guide-symbols, auto);
    margin-bottom: 32px;
}
.care-symbols li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.care-symbols svg { width: 48px; height: 40px; fill: none; stroke: var(--gold-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.care-symbols text { fill: var(--gold-soft); stroke: none; font-family: var(--font-ui); font-size: 10px; font-weight: 500; }
.care-symbols span { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--text-muted); }
.care-steps { list-style: none; border-top: 1px solid var(--rule); }
.care-steps li {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: baseline;
    align-content: center;
    min-height: var(--guide-row, 0);
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--bone);
}
.care-steps .numeral { font-size: 18px; }

/* ==========================================================================
   Story / Příběh
   ========================================================================== */

.story-hero {
    position: relative;
    min-height: 78vh;
    min-height: 78svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.story-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,10,8,0.2) 0%, rgba(11,10,8,0.1) 45%, rgba(11,10,8,0.92) 100%);
}
.story-hero .copy {
    position: relative;
    z-index: 1;
    /* right-hand side, clear of the herd */
    margin-left: auto;
    padding: 0 var(--gutter) 80px;
    width: min(620px, 44vw);
    box-sizing: content-box;
}
.story-hero h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.05; color: #f6f0e4; margin-top: 18px; }

.sequence {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--seam);
    border-bottom: 1px solid var(--seam);
}
.sequence figure { background: var(--ink-raised); }
.sequence .frame { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.sequence .frame img { width: 100%; height: 100%; object-fit: cover; }
.sequence figcaption { padding: 28px 32px 40px; }
.sequence .numeral { font-size: 30px; line-height: 1; }
.sequence h3 { font-size: 26px; margin-top: 12px; }
.sequence p { margin-top: 10px; color: var(--text-body); font-size: 15px; }

/* Content width matches .care-band .inner and the footer (--max inside the gutter) */
.provenance {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    padding: 120px var(--gutter);
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin: 0 auto;
}
.provenance h2 { font-size: clamp(36px, 4vw, 54px); margin-top: 18px; }
.provenance-list { border-top: 1px solid var(--rule); }
.provenance-list > div {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
}
.provenance-list .numeral { font-size: 22px; }
.provenance-list h3 { font-size: 24px; }
.provenance-list p { margin-top: 6px; color: var(--text-body); }

.care-band {
    background: var(--bone);
    color: var(--ink);
    padding: 96px var(--gutter);
}
.care-band .inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
}
.care-band h2 { color: var(--ink); font-size: clamp(34px, 4vw, 50px); margin-top: 16px; }
.care-band .eyebrow { color: #8a6f33; }
.care-band p { color: #4a443a; font-weight: 400; }
.care-band ul { list-style: none; border-top: 1px solid rgba(11,10,8,0.18); }
.care-band li { padding: 16px 0; border-bottom: 1px solid rgba(11,10,8,0.18); color: #2b2720; font-weight: 400; }

/* ==========================================================================
   Shop
   ========================================================================== */

/* Shop reads as a clean, lit shelf rather than the rest of the site's dark
   room — same light "on bone" treatment as .care-band, just spread across
   the whole page instead of one section. */
.shop-ground { background: var(--bone); color: var(--ink); position: relative; overflow: clip; isolation: isolate; }
/* The faded knot from the contact band, cropped into two corners. z-index -1 inside the
   isolated ground keeps it above the bone but behind the filters and products. */
.shop-ground::before, .shop-ground::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 330px;
    background: url('resources/brand/knot.png') no-repeat center / contain;
    opacity: 0.1;
    pointer-events: none;
}
.shop-ground::before { top: -60px; right: -90px; }
.shop-ground::after { bottom: -40px; left: -60px; }

.filters {
    max-width: var(--max);
    margin: 0 auto;
    padding: 48px var(--gutter) 48px;
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.filter-group { display: flex; flex-direction: column; gap: 12px; }
.filter-group .eyebrow { color: #8a6f33; }
.filter-options { display: flex; gap: 20px; flex-wrap: wrap; }
.filter-options button {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #4a443a;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.filter-options button:hover { color: #8a6f33; }
.filter-options button.active { color: var(--ink); border-bottom-color: var(--gold); }

/* Sliding underline (v-slide-indicator in app.js): one line per row, sized to
   the active item's box and moved when the active item changes. It sits
   behind the items (isolation keeps z-index -1 inside the row). */
.has-slide-indicator { position: relative; isolation: isolate; }
.slide-indicator { position: absolute; z-index: -1; pointer-events: none; opacity: 0; }
.slide-indicator::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold);
}
.slide-indicator.is-animating {
    transition: left 0.5s var(--ease), top 0.5s var(--ease), width 0.5s var(--ease), height 0.5s var(--ease);
}
/* The rows' own static underlines give way to the sliding one */
.filter-options.has-slide-indicator button.active { border-bottom-color: transparent; }
.primary-nav.has-slide-indicator a.active::after { display: none; }

/* Mobile-only shop chrome (search bar, funnel toggle); see @media below.
   .more-filters keeps display:contents at every size so, on desktop, its
   children (garment + colour) sit exactly where they always have, as if
   the <details> wrapper weren't there at all. */
.search-bar { display: none; }
.more-filters { display: contents; }
.filter-toggle { display: none; }

.product-grid {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter) 128px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 32px;
}
.product-card { display: flex; flex-direction: column; cursor: pointer; text-align: left; }
.product-card .plate {
    background: var(--bone);
    border: 1px solid rgba(11, 10, 8, 0.12);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
}
.product-card .plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}
.product-card:hover .plate img { transform: scale(1.035); }
.product-card .quick-view-badge {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(14, 13, 11, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--rule-strong);
    color: var(--gold-soft);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 16px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}
.product-card:hover .quick-view-badge {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Mobile-only: title + arrow live on the photo instead (see @media below) */
.product-card .plate-arrow { display: none; }
.product-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-top: 20px;
}
.product-card h3 { font-size: 22px; line-height: 1.2; color: var(--ink); }
.product-card .sub {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b6355;
}
.product-card .numeral { font-size: 22px; white-space: nowrap; color: #8a6f33; }

.empty-shelf {
    grid-column: 1 / -1;
    padding: 80px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    text-align: center;
}
.empty-shelf h3 { font-size: 32px; color: var(--ink); }
.empty-shelf p { margin: 12px auto 28px; color: #4a443a; max-width: 460px; }
.shop-ground .link-gold { color: var(--ink); }
.shop-ground .link-gold:hover { color: #8a6f33; }

/* Product detail */
.product-detail {
    max-width: var(--max);
    margin: 120px auto 0;
    padding: 72px var(--gutter) 0;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 72px;
    scroll-margin-top: 60px;
}
.gallery-main { background: var(--bone); aspect-ratio: 4 / 5; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 12px; margin-top: 12px; }
.gallery-thumbs button {
    width: 76px;
    aspect-ratio: 1;
    background: var(--bone);
    overflow: hidden;
    opacity: 0.55;
    border-bottom: 1px solid transparent;
    transition: opacity 0.3s ease;
}
.gallery-thumbs button.active, .gallery-thumbs button:hover { opacity: 1; }
.gallery-thumbs button.active { border-bottom-color: var(--gold); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info { padding-top: 12px; }
.product-info h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; color: #f6f0e4; margin-top: 16px; }
.product-info .price { margin-top: 22px; font-size: 34px; display: block; }
.product-info .compare { margin-left: 12px; font-size: 18px; color: var(--text-muted); text-decoration: line-through; }
.product-info .lede { margin-top: 22px; color: var(--text-body); }

.selector { margin-top: 34px; }
.selector-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.selector-head .val { color: var(--gold-soft); letter-spacing: 0.12em; }
.selector-head button { font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--gold); }

.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    padding: 3px;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.swatch.active, .swatch:hover { border-color: var(--gold); }

.sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.size {
    min-width: 64px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(232, 215, 176, 0.18);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--bone);
    transition: border-color 0.3s ease, color 0.3s ease;
}
.size:hover:not(:disabled) { border-color: var(--rule-strong); }
.size.active { border-color: var(--gold); color: var(--gold-soft); }
.size:disabled { color: var(--text-muted); text-decoration: line-through; cursor: not-allowed; opacity: 0.5; }

.stock-line {
    margin-top: 26px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.stock-line.out { color: var(--text-muted); }

.buy-row { display: flex; gap: 12px; margin-top: 22px; }
.qty {
    display: flex;
    align-items: center;
    border: 1px solid rgba(232, 215, 176, 0.18);
    height: 52px;
}
.qty button { width: 40px; height: 100%; font-size: 18px; color: var(--gold-soft); }
.qty button:disabled { color: var(--text-muted); cursor: not-allowed; }
.qty span { min-width: 28px; text-align: center; font-family: var(--font-display); font-size: 20px; }
.buy-row .btn-solid { flex: 1; min-width: 0; padding: 0 1.2rem; white-space: nowrap; }

.details { margin-top: 44px; border-top: 1px solid var(--rule); }
.details details { border-bottom: 1px solid var(--rule); }
.details summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-soft);
}
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: '+'; color: var(--gold); font-size: 16px; line-height: 1; }
.details details[open] summary::after { content: '–'; }
.details details p { padding: 0 0 22px; color: var(--text-body); font-size: 15px; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
    max-width: var(--max);
    margin: 56px auto 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--seam);
    border-left: 1px solid var(--seam);
    border-right: 1px solid var(--seam);
}
.contact-grid > div { background: var(--ink); padding: 56px 48px; }
.contact-grid h2 { font-size: 34px; margin: 16px 0 18px; }
.contact-grid p, .contact-grid a { color: var(--text-body); font-size: 17px; }
.contact-grid a:hover { color: var(--gold); }
.contact-grid dl { border-top: 1px solid var(--rule); margin-top: 24px; }
.contact-grid dl > div { display: grid; grid-template-columns: 140px 1fr; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.contact-grid dt { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--text-body); padding-top: 3px; text-align: right; padding-right: 24px; }
.contact-grid dd { font-weight: 400; line-height: 1.5; }
.contact-grid dd a { color: var(--bone); }

/* The full logo opens the page — its black ground melts into --ink */
.contact-logo { display: flex; justify-content: center; padding: 48px var(--gutter) 0; }
.contact-logo img { width: min(380px, 78vw); height: auto; }
.contact-logo + .contact-grid { margin: 32px auto 96px; }

/* Message form on a bone band, like .care-band, with the knot watermark of .statement.on-bone */
.contact-band {
    background: var(--bone);
    color: var(--ink);
    padding: 96px var(--gutter);
    position: relative;
    overflow: hidden;
}
.contact-band::before {
    content: '';
    position: absolute;
    left: -60px;
    bottom: -40px;
    width: 420px;
    height: 330px;
    background: url('resources/brand/knot.png') no-repeat center / contain;
    opacity: 0.1;
    pointer-events: none;
}
.contact-band .inner {
    position: relative;
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
}
.contact-band h2 { color: var(--ink); font-size: clamp(34px, 4vw, 50px); margin: 16px 0 20px; }
.contact-band .eyebrow { color: #8a6f33; }
.contact-band p { color: #4a443a; font-weight: 400; max-width: 380px; }
/* Fields on bone: a lighter "paper" well with a hairline frame. color-scheme stops the
   browser from painting dark-mode/autofill colours over ours. */
.contact-band form { color-scheme: light; }
.contact-band .form-group { gap: 10px; margin-bottom: 22px; }
.contact-band .form-label { color: #5a5245; }
.contact-band .form-input, .contact-band .form-textarea {
    background: #fffdf8;
    border: 1px solid rgba(11,10,8,0.18);
    padding: 14px 16px;
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
    caret-color: #8a6f33;
    font-size: 16px;          /* 16px keeps iOS from zooming in on focus */
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-band .form-input:hover, .contact-band .form-textarea:hover { border-color: rgba(11,10,8,0.32); }
.contact-band .form-input:focus, .contact-band .form-textarea:focus {
    border-color: #8a6f33;
    box-shadow: 0 0 0 3px rgba(196,163,90,0.28);
}
.contact-band .form-input:-webkit-autofill, .contact-band .form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    box-shadow: inset 0 0 0 1000px #fffdf8;
}

/* bichig.mn keyboard: its switches are drawn for dark fields (pale gold/grey, closed Shadow DOM).
   Darkening its host element turns them into antique gold that reads on our paper fields.
   A filter makes the host the containing block for the widget's position:fixed parts, so the
   host is pinned to the viewport origin (full width so labels don't wrap, zero height so it
   never blocks clicks) to keep their coordinates unchanged. */
[data-bichig-keyboard] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    z-index: 2147483647;
    filter: brightness(0.55) saturate(1.2);
}
/* Extra room at the bottom so the bichig.mn label never covers the last line */
.contact-band .form-textarea { resize: vertical; min-height: 160px; padding-bottom: 32px; }
.contact-band .btn-solid { margin-top: 12px; background: var(--ink); color: var(--bone); }
.contact-band .btn-solid:hover { background: #8a6f33; }
.contact-band .form-status { margin-top: 18px; font-size: 15px; color: #4a443a; }
.contact-band .form-status:empty { display: none; }
.contact-band .form-status.error { color: #9b3a2a; }

/* ==========================================================================
   Footer — the knot returns as a seal
   ========================================================================== */

.site-footer {
    background: var(--ink);
    border-top: 1px solid var(--seam);
    padding: 80px var(--gutter) 40px;
}
/* Two tight clusters (logo+Explore, map+Visit), centred as a pair on the
   page rather than stretched edge to edge — both pairs use the same
   internal spacing so neither reads closer together than the other. */
.footer-inner {
    --footer-logo: 208px;
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
    height: var(--footer-logo);
}
/* flex-start (not center) so both eyebrow headings sit on the same line
   regardless of how many links follow — Explore and Visit don't hold the
   same number of items, so centering each independently would misalign them. */
.footer-group {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}
/* Full illustrated logo. Its PNG ground is pure black; lighten blends that
   into the ink background so no square edge shows. */
.footer-logo { display: block; width: var(--footer-logo); aspect-ratio: 1; }
.footer-logo img { width: 100%; height: 100%; mix-blend-mode: lighten; }
.footer-col li { line-height: 1.4; }
.footer-col .eyebrow { margin-bottom: 16px; line-height: 1; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col li, .footer-col a { color: var(--text-body); font-size: 14px; }
.footer-col a:hover { color: var(--gold-soft); }
.explore-grid .numeral { display: none; }
/* Contact page map + actions: phones only (desktop has the footer map) */
.contact-map { display: none; }
/* Square, same height as the logo block, in Google's normal map colours. */
.footer-map iframe {
    display: block;
    width: var(--footer-logo);
    height: var(--footer-logo);
    border: 1px solid var(--rule);
}
.footer-divider {
    display: block;
    width: 20%;
    max-width: calc(var(--max) * 0.2);
    height: auto;
    margin: 56px auto 0;
}
.footer-base {
    max-width: var(--max);
    margin: 24px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 3, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 90;
}
.drawer-overlay.active { opacity: 1; pointer-events: auto; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    background: var(--ink-raised);
    border-left: 1px solid var(--seam);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    z-index: 100;
    display: flex;
    flex-direction: column;
}
.cart-drawer.active { transform: translateX(0); }

.product-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100vw);
    background: var(--ink-raised);
    border-left: 1px solid var(--seam);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    z-index: 100;
    display: flex;
    flex-direction: column;
}
.product-drawer.active { transform: translateX(0); }

/* Doubled class so it wins over the generic .drawer-body padding below */
.drawer-body.product-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px 40px;
}

.product-drawer .drawer-header { align-items: flex-start; gap: 24px; }
.product-drawer .drawer-title { font-size: 26px; line-height: 1.15; }
.product-drawer .btn-close { flex: none; padding-top: 2px; }

.product-drawer-gallery {
    margin-bottom: 24px;
}

/* Kept shorter than square so price and Add to bag sit above the fold */
.product-drawer-gallery .gallery-main {
    background: var(--bone);
    aspect-ratio: 5 / 4;
    overflow: hidden;
}

.product-drawer-gallery .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-drawer-gallery .gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.product-drawer-gallery .gallery-thumbs button {
    width: 64px;
    aspect-ratio: 1;
    background: var(--bone);
    overflow: hidden;
    opacity: 0.55;
    border-bottom: 2px solid transparent;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.product-drawer-gallery .gallery-thumbs button.active,
.product-drawer-gallery .gallery-thumbs button:hover {
    opacity: 1;
}

.product-drawer-gallery .gallery-thumbs button.active {
    border-bottom-color: var(--gold);
}

.product-drawer-info .price {
    font-size: 28px;
    line-height: 1.2;
}
.product-drawer-info .compare { margin-left: 10px; font-size: 17px; color: var(--text-muted); text-decoration: line-through; }

.product-drawer-info .lede {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-body);
}

.product-drawer-info .selector { margin-top: 28px; }
.product-drawer-info .selector-head { gap: 16px; flex-wrap: wrap; }
.product-drawer-info .stock-line { margin-top: 20px; }
.product-drawer-info .buy-row { margin-top: 14px; }
.product-drawer-info .details { margin-top: 36px; }

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
    border-bottom: 1px solid var(--seam);
}
.drawer-title { font-size: 28px; }
.btn-close {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.btn-close:hover { color: var(--gold-soft); }

.drawer-body { flex: 1; overflow-y: auto; padding: 8px 32px; }
.cart-empty { padding: 64px 0; text-align: center; color: var(--text-body); }
.cart-empty .link-gold { margin-top: 24px; }

/* Remove sits in the top corner so the price column runs to the drawer edge */
.cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--seam);
}
.cart-item img { width: 84px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bone); }
.cart-item > div { display: flex; flex-direction: column; min-width: 0; }
.cart-item-title { font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--bone); padding-right: 36px; }
.cart-item-meta { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.cart-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; }
.cart-qty {
    display: flex;
    align-items: center;
    height: 32px;
    border: 1px solid rgba(232, 215, 176, 0.18);
    font-family: var(--font-display);
    font-size: 17px;
}
.cart-qty button { color: var(--gold-soft); width: 30px; height: 100%; font-size: 16px; }
.cart-qty span { min-width: 22px; text-align: center; }
.cart-item .numeral { font-size: 18px; }
.btn-remove {
    position: absolute;
    top: 16px;
    right: -8px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
}
.btn-remove:hover, .btn-remove:focus-visible { color: var(--gold-soft); background: rgba(232, 215, 176, 0.08); }
.btn-remove svg, .promo-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Promo code */
.promo { margin-bottom: 20px; }
.promo-form { display: flex; border: 1px solid rgba(232, 215, 176, 0.18); transition: border-color 0.2s ease; }
.promo-form:focus-within { border-color: var(--rule-strong); }
.promo-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.promo-input::placeholder { color: var(--text-muted); letter-spacing: 0.16em; }
.promo-input[aria-invalid="true"] { color: #e0a08a; }
.promo-apply {
    padding: 0 18px;
    border-left: 1px solid rgba(232, 215, 176, 0.18);
    color: var(--gold-soft);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.promo-apply:hover:not(:disabled) { background: rgba(232, 215, 176, 0.08); }
.promo-apply:disabled { color: var(--text-muted); cursor: not-allowed; }
.promo-error { margin-top: 8px; font-size: 12px; color: #e0a08a; }
.promo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 14px;
    border: 1px solid var(--rule-strong);
    color: var(--gold-soft);
    font-size: 12px;
    letter-spacing: 0.14em;
}
.promo-chip button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-muted); }
.promo-chip button:hover { color: var(--gold-soft); }
.promo-note { margin: -12px 0 16px; font-size: 12px; color: var(--text-muted); }
.summary-row--minor { margin-bottom: 8px; }
.summary-row--minor .numeral { font-size: 18px; }
.summary-row--discount, .summary-row--discount .numeral { color: var(--gold-soft); }

/* Bag on bone: same paper palette as .contact-band, so the drawer reads as a light
   sheet over the dark site. The footer is a deeper paper band for the totals. */
.cart-drawer {
    --cart-ink: var(--ink);
    --cart-body: #4a443a;
    --cart-muted: #6b6253;
    --cart-gold: #8a6f33;
    --cart-seam: rgba(11, 10, 8, 0.12);
    --cart-line: rgba(11, 10, 8, 0.2);
    --cart-hover: rgba(11, 10, 8, 0.06);
    background: var(--bone);
    border-left-color: var(--cart-seam);
    color: var(--cart-body);
    color-scheme: light;
}
.cart-drawer .drawer-header,
.cart-drawer .cart-item { border-bottom-color: var(--cart-seam); }
.cart-drawer .drawer-title,
.cart-drawer .cart-item-title { color: var(--cart-ink); }
.cart-drawer .btn-close,
.cart-drawer .cart-item-meta,
.cart-drawer .btn-remove,
.cart-drawer .promo-chip button { color: var(--cart-muted); }
.cart-drawer .btn-close:hover,
.cart-drawer .btn-remove:hover,
.cart-drawer .btn-remove:focus-visible,
.cart-drawer .promo-chip button:hover { color: var(--cart-ink); }
.cart-drawer .btn-remove:hover,
.cart-drawer .btn-remove:focus-visible { background: var(--cart-hover); }
.cart-drawer .cart-empty { color: var(--cart-body); }
.cart-drawer .link-gold { color: var(--cart-ink); border-bottom-color: var(--cart-gold); }
.cart-drawer .link-gold:hover { color: var(--cart-gold); }
.cart-drawer .cart-item img { background: var(--bone-shade); }
.cart-drawer .cart-qty { background: #fffdf8; border-color: var(--cart-line); color: var(--cart-ink); }
.cart-drawer .cart-qty button { color: var(--cart-gold); }
.cart-drawer .cart-qty button:hover { background: var(--cart-hover); }
.cart-drawer .numeral { color: var(--cart-ink); }

.cart-drawer .drawer-footer { background: var(--bone-shade); border-top-color: var(--cart-seam); }
.cart-drawer .summary-row,
.cart-drawer .drawer-footer .note,
.cart-drawer .promo-note { color: var(--cart-muted); }
.cart-drawer .summary-row--discount,
.cart-drawer .summary-row--discount .numeral { color: var(--cart-gold); }
.cart-drawer .drawer-footer .btn-solid { background: var(--ink); color: var(--bone); }
.cart-drawer .drawer-footer .btn-solid:hover { background: var(--cart-gold); }

/* Order placed on Shopify — shown at the top of the bag */
.last-order {
    position: relative;
    margin: 20px 0 4px;
    padding: 16px 18px;
    border: 1px solid var(--cart-seam);
    background: #fffdf8;
    color: var(--cart-body);
}
.last-order--new { border-color: var(--cart-gold); }
.last-order-head .btn-remove { top: 6px; right: 6px; }
.last-order-title { font-family: var(--font-display); font-size: 18px; line-height: 1.25; font-weight: 400; color: var(--cart-ink); padding-right: 36px; }
.last-order-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.last-order-items li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; font-size: 14px; color: var(--cart-ink); }
.last-order-items img { width: 40px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bone-shade); }
.last-order-items .cart-item-meta { display: block; }
.last-order-note { margin-top: 12px; font-size: 12px; color: var(--cart-muted); }
.last-order-note a { color: var(--cart-ink); border-bottom: 1px solid var(--cart-gold); }
.last-order-note a:hover { color: var(--cart-gold); }

.cart-drawer .promo-form { background: #fffdf8; border-color: var(--cart-line); }
.cart-drawer .promo-form:focus-within { border-color: var(--cart-gold); box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.28); }
.cart-drawer .promo-input { color: var(--cart-ink); caret-color: var(--cart-gold); font-size: 16px; } /* 16px: no iOS zoom */
.cart-drawer .promo-input::placeholder { color: var(--cart-muted); }
.cart-drawer .promo-input[aria-invalid="true"],
.cart-drawer .promo-error { color: #9b3a2a; }
.cart-drawer .promo-apply { color: var(--cart-ink); border-left-color: var(--cart-line); }
.cart-drawer .promo-apply:hover:not(:disabled) { background: var(--cart-hover); }
.cart-drawer .promo-apply:disabled { color: var(--cart-muted); }
.cart-drawer .promo-chip { background: #fffdf8; border-color: var(--cart-gold); color: var(--cart-ink); }

.drawer-footer { padding: 24px 32px 32px; border-top: 1px solid var(--seam); }
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.summary-row .numeral { font-size: 28px; letter-spacing: 0; }
.drawer-footer .btn-solid { width: 100%; }
.drawer-footer .note { margin-top: 14px; font-size: 12px; color: var(--text-muted); text-align: center; }

/* ==========================================================================
   Modals, forms, toasts
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 3, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 110;
}
.modal-backdrop.active { opacity: 1; pointer-events: auto; }
.modal-card {
    width: min(620px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--ink-raised);
    border: 1px solid var(--seam);
    padding: 40px;
    transform: translateY(12px);
    transition: transform 0.4s var(--ease);
}
.modal-backdrop.active .modal-card { transform: none; }
.modal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.modal-title { font-size: 30px; }
.modal-card > p { color: var(--text-body); font-size: 14px; margin-bottom: 20px; }

/* Size guide modal: Velikosti / Jak prát as two slides in one card */
.guide-tabs { display: flex; gap: 22px; }
.guide-tabs button {
    padding: 0 0 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.guide-tabs button:hover { color: var(--bone); }
.guide-tabs button.active { color: var(--gold-soft); border-bottom-color: var(--gold); }
.guide-slides { display: grid; overflow: hidden; }
.guide-slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition: opacity 0.35s ease, transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.guide-slide.before { transform: translateX(-40px); }
.guide-slide.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.guide-slide .modal-title { margin-bottom: 10px; }
.guide-slide > p { color: var(--text-body); font-size: 14px; margin-bottom: 24px; }
.guide-slide .care-symbols { grid-template-columns: repeat(3, 1fr); row-gap: 22px; height: auto; margin-bottom: 24px; }
.guide-slide .care-steps li { padding: 14px 0; font-size: 14px; }

/* Logo lightbox: the crest at full size, ground blended into the dark backdrop */
.lightbox-img { max-width: min(80vw, 720px); max-height: 85vh; width: auto; height: auto; mix-blend-mode: lighten; }
.lightbox-close { position: fixed; top: 28px; right: var(--gutter); }

/* Product photo viewer: tap the drawer photo to open, tap again to zoom in */
.gallery-zoom { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.photo-zoom { z-index: 115; background: rgba(5, 4, 3, 0.94); }
.photo-zoom-frame { overflow: hidden; line-height: 0; max-width: 100%; }
.photo-zoom-frame img {
    max-width: min(92vw, 1100px);
    max-height: 86vh;
    width: auto;
    height: auto;
    cursor: zoom-in;
    user-select: none;
    transition: transform 0.35s var(--ease);
}
.photo-zoom-frame img.zoomed { transform: scale(2.5); cursor: zoom-out; touch-action: none; transition: transform 0.35s var(--ease), transform-origin 0.08s linear; }
.photo-zoom-step {
    position: fixed;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--bone);
    background: rgba(5, 4, 3, 0.55);
    border-radius: 50%;
}
.photo-zoom-step:hover { color: var(--gold-soft); }
.photo-zoom-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.photo-zoom-step.prev { left: 16px; }
.photo-zoom-step.next { right: 16px; }

/* Cart line: photo and name open the product */
.cart-item-link { display: block; padding: 0; text-align: left; }
.cart-item-link img { display: block; }
button.cart-item-title { padding: 0 36px 0 0; }
button.cart-item-title:hover { text-decoration: underline; text-underline-offset: 3px; }

.size-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.size-table th, .size-table td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule); }
.size-table th { font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.size-table td { color: var(--bone); }
.size-table td:first-child { font-family: var(--font-display); font-size: 18px; color: var(--gold); }

.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.form-input, .form-textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 10px 0;
    color: var(--bone);
    font: inherit;
    outline: none;
}
.form-input:focus, .form-textarea:focus { border-bottom-color: var(--gold); }
.form-check { display: flex; gap: 10px; align-items: center; color: var(--text-body); font-size: 14px; }
.form-check input { accent-color: var(--gold); width: 16px; height: 16px; }

.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 120;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.toast-msg {
    background: var(--bone);
    color: var(--ink);
    padding: 14px 22px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
    animation: toastIn 0.4s var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }



/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    /* Nav + language + account + bag don't all fit with labels here; the
       account button keeps its icon (and aria-label) */
    .header-tools .account-label { display: none; }
}

@media (max-width: 1100px) {
    .site-header { column-gap: 24px; }
    .primary-nav { gap: 18px; letter-spacing: 0.14em; }
    .header-tools { gap: 16px; }

    .footer-inner { --footer-logo: 176px; gap: 80px; }
    .footer-group { gap: 40px; }
    .product-detail { grid-template-columns: 1fr; gap: 48px; }
    .sequence { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    :root { --gutter: 22px; }

    /* Navigation moves to the fixed .bottom-nav bar (below); the header on
       mobile only carries the brand and the language/bag tools. */
    .site-header { grid-template-columns: auto 1fr; gap: 18px; padding: 18px var(--gutter); }
    .brand { gap: 12px; }
    .brand-knot { width: 32px; }
    .brand-words { padding-left: 12px; gap: 5px; }
    .brand-mark { height: 24px; }
    .brand-sub { font-size: 7.5px; }
    .header-tools { gap: 16px; }
    .header-tools .cart-label { display: none; }
    .header-tools .account-link { display: none; }
    .primary-nav { display: none; }

    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        justify-content: space-around;
        background: rgba(11, 10, 8, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(243, 238, 228, 0.3);
    }
    /* Gold tile behind the active tab; one tab wide (5 equal tabs), moved by
       translateX in whole tab widths from the bottom-nav component */
    .bottom-nav-tile {
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 0;
        width: 20%;
        pointer-events: none;
    }
    .bottom-nav-tile::before {
        content: '';
        position: absolute;
        inset: 0 6px;
        border-radius: 10px;
        background: rgba(196, 163, 90, 0.16);
        border: 1px solid rgba(196, 163, 90, 0.35);
    }
    .bottom-nav-tile.sliding { transition: transform 0.5s var(--ease); }
    .bottom-nav a { position: relative; }
    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 4px 12px;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        transition: color 0.3s ease;
    }
    .bottom-nav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
    .bottom-nav a.active { color: var(--gold-soft); }

    /* Room for .bottom-nav so it doesn't cover the last of the page content
       (the footer is hidden on phones, so the page itself keeps the room) */
    #app { padding-bottom: 65px; }
    /* Shop: the bone ground runs to the bottom of the screen, even with few
       products, and the strip kept free for the nav is bone too */
    body:has(.shop-ground) { background: var(--bone); }
    .shop-ground { min-height: calc(100svh - 87px - 65px); } /* minus header and nav */
    .toast-container { bottom: 84px; }

    /* Mobile hero: a vertical film still. Title card sits low and to the
       right, same corner as desktop — and where a thumb naturally rests,
       right where the "Explore the collection" link needs a tap. The base
       gradient (strong dark toward the bottom) already suits it, so no
       mobile-specific override is needed here. */
    /* A landscape photo on a tall screen: filling it would show barely a
       quarter of the width and cut the herd. On a portrait screen the photo
       is a band at the foot of the hero, sized to show ~50% of its width,
       framed on the herd with room either side (the hill's zoom and the
       tilt drift must not push an animal off the edge); above it the sky
       goes on in its own colour (matched to the photo's top edge, so there
       is no seam) */
    .hero-media img { object-position: 32% 100%; }
    @media (orientation: portrait) {
        /* --herd-lift raises the band off the very bottom (where the tab bar
           sits), the strip under it dark like the ground at the photo's foot */
        .hero-stage {
            --herd-lift: 6svh;
            background: linear-gradient(180deg, #3a2c26 0%, #654d41 calc(100% - var(--herd-lift) - min(112vw, 100% - var(--herd-lift))), #654d41 calc(100% - var(--herd-lift) - 1px), #1c140e calc(100% - var(--herd-lift)));
        }
        .hero-media {
            top: auto;
            bottom: var(--herd-lift);
            height: min(112vw, 100% - var(--herd-lift));
            /* Its top edge melts into the sky above instead of cutting off */
            -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 25%);
        }
        .hero-media img { object-position: 26% 100%; }
    }
    .hero-copy {
        flex-direction: column;
        align-self: stretch;
        width: auto;
        max-width: none;
        margin: auto 0 0;
        padding: 0 var(--gutter) 37vh;
        padding-bottom: 37svh;
        gap: 16px;
        text-align: right;
    }
    /* A phone is too narrow to hold a line unbroken; wrap, growing upward */
    .hero-copy h1 { white-space: normal; }
    /* Stretch, not flex-end: a headline sized to its own content can run past
       the phone's right edge; stretched, long lines wrap inside the gutter */
    .hero-copy-text { padding-right: 0; align-items: stretch; width: 100%; }
    .hero-copy h1 { width: 100%; max-width: 100%; overflow-wrap: break-word; }
    .hero-mark { height: auto; width: 110px; }
    /* align-self, not just text-align: .hero-copy-text is a column flex
       container, so without it the link's own box (and its border-bottom
       underline) would stretch edge to edge instead of hugging its text */
    .hero-copy .link-gold { align-self: flex-end; margin-top: 14px; }

    .fibres { grid-template-columns: 1fr; }
    .fibre-col { display: grid; grid-template-columns: 38% 1fr; }
    .fibre-col .frame { aspect-ratio: auto; min-height: 240px; }
    .fibre-col .body { padding: 32px 24px 36px; }
    .fibre-col h2 { font-size: 30px; }
    .fibre-col .still { display: none; }

    .statement { padding: 96px var(--gutter); }

    .feature, .chapter, .provenance, .care-band .inner, .contact-grid, .contact-band .inner { grid-template-columns: 1fr; }
    .feature-media { min-height: 420px; }
    .feature-products { gap: 32px 14px; padding: 40px 16px; }
    .facts { grid-template-columns: 1fr 1fr; }
    .facts li { padding: 20px var(--gutter); }
    .facts li:nth-child(3) { border-left: 0; }
    .facts li:nth-child(n+3) { border-top: 1px solid rgba(243, 238, 228, 0.07); }
    .facts strong { font-size: 18px; }
    .shop-visit::before { background: linear-gradient(0deg, rgba(11, 10, 8, 0.9) 0, rgba(11, 10, 8, 0.6) 55%, rgba(11, 10, 8, 0.15) 100%); }
    .shop-visit { align-items: flex-end; }
    .shop-visit-card { margin: 48px var(--gutter); }
    .shop-visit .land-caption { top: 20px; bottom: auto; }
    .feature-product-title { font-size: 16px; }
    .feature-copy { padding: 56px var(--gutter) 72px; }

    .story-hero .copy { width: auto; margin-left: 0; }

    .chapter.reverse .chapter-media { order: 0; }
    .chapter-media { min-height: 0; height: 90vw; max-height: 560px; grid-template-rows: 1fr; grid-template-columns: 3fr 2fr; }
    .chapter-media.single { grid-template-columns: 1fr; }
    .chapter-copy { padding: 48px var(--gutter) 72px; }
    .chapter-copy .chapter-no { font-size: 40px; }
    .chapter-copy h2 { margin-top: 12px; }
    .chapter-copy > p { margin-top: 20px; }
    .spec { margin-top: 32px; }
    .spec-row { grid-template-columns: 92px 1fr; gap: 14px; }
    .spec-row .numeral { font-size: 22px; }
    .chapter-actions { margin-top: 32px; }
    .spec-note { grid-template-columns: 1fr; padding: 40px var(--gutter); }
    .fibre-guides { grid-template-columns: 1fr; gap: 64px; padding: 56px var(--gutter) 80px; }
    .care-symbols { grid-template-columns: repeat(3, 1fr); row-gap: 24px; height: auto; }
    /* Stacked: nothing to line up across, so drop the shared grid */
    .fibre-guides { grid-template-rows: none; }
    .fibre-guides > div { display: block; grid-row: auto; }
    .fibre-guides .size-table { margin-top: 0; }

    .sequence figcaption { padding: 24px var(--gutter) 32px; }
    .provenance-list > div { grid-template-columns: 36px 1fr; gap: 14px; }

    .provenance { gap: 32px; padding: 80px var(--gutter); }
    .care-band { padding: 72px var(--gutter); }
    .care-band .inner { gap: 32px; }
    .contact-band { padding: 72px var(--gutter); }
    .contact-band .inner { gap: 32px; }

    /* Shop: a search bar + funnel button on one row, fibre as an editorial
       tab strip, garment/colour tucked behind the funnel. Flex `order` lets
       .more-filters' children (garment, colour) sit visually right after the
       tabs even though, in the markup, they're inside the <details> that
       trails the fibre group — see .more-filters:contents in the base rules. */
    .filters { gap: 14px; padding: 24px var(--gutter) 32px; align-items: stretch; }
    .search-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 16px;
        height: 48px;
        border: 1px solid var(--rule-strong);
        color: var(--ink);
    }
    .search-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: #6b6355; stroke-width: 1.5; }
    .search-bar input {
        flex: 1;
        min-width: 0;
        background: transparent;
        border: 0;
        outline: none;
        color: inherit;
        font: inherit;
        font-size: 14px;
    }
    .search-bar input::placeholder { color: #6b6355; }

    .filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 2;
        flex: none;
        width: 48px;
        height: 48px;
        border: 1px solid var(--rule-strong);
        color: var(--ink);
        cursor: pointer;
        list-style: none;
    }
    .filter-toggle::-webkit-details-marker { display: none; }
    .filter-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
    .more-filters[open] .filter-toggle { color: #8a6f33; border-color: var(--gold); }

    .fibre-tabs { order: 3; flex-basis: 100%; }
    .fibre-tabs .filter-options { gap: 22px; }
    .fibre-tabs .filter-options button {
        padding-bottom: 8px;
        font-family: var(--font-display);
        font-size: 17px;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Garment + colour: hidden until the funnel opens the <details> */
    .more-filters:not([open]) .filter-group { display: none; }
    .more-filters .filter-group { order: 4; flex-basis: 100%; padding-top: 8px; border-top: 1px solid var(--rule); }

    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 14px; padding-bottom: 88px; }
    .product-card .plate { background: var(--bone); }
    .product-card .plate-arrow {
        display: flex;
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        background: var(--bone);
        border: 1px solid rgba(11, 10, 8, 0.15);
    }
    .product-card .plate-arrow svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
    .product-card .quick-view-badge { display: none; }
    .product-card .meta h3 { font-size: 17px; }
    .product-card .meta { flex-direction: column; gap: 6px; padding-top: 14px; }
    .product-card .numeral { font-size: 18px; }
    .product-detail { margin-top: 80px; padding-top: 48px; }

    .contact-grid > div, .contact-grid > div + div { padding: 40px var(--gutter); }
    .contact-grid dl > div { grid-template-columns: 110px 1fr; }

    /* Contact page: map, then Navigovat / Zavolat */
    .contact-map { display: block; margin-top: 24px; }
    .visit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
    .contact-grid .visit-actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
        border: 1px solid var(--rule-strong);
        color: var(--gold-soft);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }
    .contact-grid .visit-actions a:first-child { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
    .contact-grid .visit-actions a:hover { border-color: var(--gold); }

    /* The map as a picture of it: the frame ignores touches (so the page
       scroll never gets trapped inside it) and the link laid over it opens
       Google Maps for directions */
    .map-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; }
    .map-frame iframe { display: block; width: 100%; height: 100%; border: 1px solid var(--rule); pointer-events: none; }
    .btn-map-link { position: absolute; inset: 0; }

    /* Phones: no footer — its links and the shop are covered by the bottom
       nav and the contact page */
    .site-footer { display: none; }
}

@media (max-width: 560px) {
    .fibre-col { grid-template-columns: 1fr; }
    .fibre-col .frame { aspect-ratio: 4 / 3; min-height: 0; }
    .sequence { grid-template-columns: 1fr; }
    .sequence .frame { aspect-ratio: 16 / 10; }
    .modal-card { padding: 28px 22px; }
    .buy-row { flex-wrap: wrap; }

    /* Drawers are full-width here; the 32px desktop gutters waste a phone's width */
    .drawer-header { padding: 20px var(--gutter); }
    .drawer-body, .drawer-body.product-drawer-body { padding-left: var(--gutter); padding-right: var(--gutter); }
    .drawer-footer { padding: 20px var(--gutter) 24px; }
    .product-drawer .drawer-title { font-size: 24px; }
    .buy-row .btn-solid { letter-spacing: 0.16em; }

    /* Header row: brand + language + bag must fit a phone width. Without this
       the row is wider than the screen, the whole page widens with it, and the
       hero text gets cut off on the right. */
    .site-header { gap: 12px; }
    .brand { gap: 9px; }
    .brand-knot { width: 26px; }
    .brand-words { padding-left: 9px; }
    .header-tools { gap: 14px; margin-left: 0; }
}

@media (max-width: 380px) {
    .brand { gap: 9px; }
    .brand-knot { width: 22px; }
    .brand-words { padding-left: 9px; }
    .brand-mark { height: 19px; }
    .brand-sub { font-size: 6.5px; letter-spacing: 0.28em; margin-right: -0.28em; }
}

@media (prefers-reduced-motion: reduce) {
    /* No clearing animation, so no mist to clear */
    .hero-mist { display: none; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   Legal pages, cookie consent, footer extras
   ========================================================================== */

/* Read by screen readers and search engines, not drawn */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Quiet outlined action, next to a .btn-solid */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 1.8rem;
    border: 1px solid var(--rule-strong);
    color: var(--gold-soft);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover { border-color: var(--gold); color: var(--bone); }

/* Row of legal links (footer, contact page) */
.legal-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}
.legal-links a, .legal-links button {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.legal-links a:hover, .legal-links button:hover { color: var(--gold-soft); }
.footer-legal { max-width: var(--max); margin: 28px auto 0; }

.drawer-footer .legal-note a { color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }

/* Newsletter + socials, under the two footer clusters */
.footer-extras {
    max-width: var(--max);
    margin: 56px auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 64px;
    flex-wrap: wrap;
}
.newsletter-form { width: min(420px, 100%); }
.newsletter-form .eyebrow { margin-bottom: 12px; }
.newsletter-row { display: flex; gap: 20px; align-items: flex-end; }
.newsletter-row .form-input { flex: 1; min-width: 0; }
.newsletter-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.newsletter-note a { color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }
.footer-socials { list-style: none; display: flex; gap: 28px; }
.footer-socials a { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-body); }
.footer-socials a:hover { color: var(--gold-soft); }

/* Map before consent: same box as the map, a line and a link */
.map-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--rule);
    background: var(--ink-raised);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.footer-map .map-placeholder { width: var(--footer-logo); height: var(--footer-logo); }
.map-frame .map-placeholder { width: 100%; height: 100%; }

/* First-visit consent bar */
.cookie-bar {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 110;
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 22px 28px;
    background: var(--ink-raised);
    border: 1px solid var(--rule-strong);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    animation: toastIn 0.5s var(--ease) both;
}
.cookie-bar p { flex: 1; font-size: 13px; line-height: 1.6; color: var(--text-body); }
.cookie-bar p a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cookie-bar .btn-solid, .cookie-bar .btn-outline, .cookie-settings .btn-solid, .cookie-settings .btn-outline { height: 44px; padding: 0 1.4rem; }
.cookie-settings .form-check { align-items: flex-start; line-height: 1.55; margin-bottom: 16px; }
.cookie-settings .form-check input { flex: none; margin-top: 3px; }
.cookie-settings strong { color: var(--bone); font-weight: 500; }
.cookie-settings .cookie-actions { margin-top: 26px; }

/* Legal documents: one readable column */
.legal-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 72px var(--gutter) 96px;
}
.legal-page h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin: 16px 0 12px; }
.legal-page .legal-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.legal-page .legal-lang-note { color: var(--text-muted); font-size: 13px; font-style: italic; margin-bottom: 40px; }
.legal-page h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 48px 0 14px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--bone); }
.legal-page h3 { font-size: 15px; font-weight: 500; color: var(--bone); margin: 24px 0 8px; }
.legal-page p, .legal-page li { color: var(--text-body); font-size: 16px; line-height: 1.75; }
.legal-page p + p { margin-top: 12px; }
.legal-page ul, .legal-page ol { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.legal-page a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: var(--gold); }
.legal-page dl { border-top: 1px solid var(--rule); margin: 16px 0; }
.legal-page dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.legal-page dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.legal-page dd { color: var(--bone); }
.legal-page .form-sample { margin-top: 16px; padding: 24px 28px; border: 1px dashed var(--rule-strong); background: var(--ink-raised); }
.legal-page .form-sample p { font-size: 15px; }
.legal-page .legal-links { justify-content: flex-start; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
/* A seller detail still missing from site-config.js */
mark.todo { background: rgba(196, 163, 90, 0.18); color: var(--gold); padding: 0 4px; }

/* Contact page: legal links for phones (no footer there) */
.contact-legal { display: none; padding: 40px 16px 120px; border-top: 1px solid var(--seam); }
.contact-band .form-privacy { margin: 4px 0 0; font-size: 13px; color: #5a5245; max-width: none; }
.contact-band .form-privacy a { color: #5a5245; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    .cookie-bar {
        left: 12px;
        right: 12px;
        bottom: 96px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px;
    }
    .cookie-actions { gap: 10px; }
    .cookie-bar .btn-solid, .cookie-bar .btn-outline { flex: 1; }
    .legal-page { padding: 40px 16px 120px; }
    .legal-page dl > div { grid-template-columns: 1fr; gap: 2px; }
    .contact-legal { display: block; }
}