@font-face{font-family:"Lens Grotesk";src:url("../fonts/lens-grotesk/LensGrotesk-Book.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Lens Grotesk";src:url("../fonts/lens-grotesk/LensGrotesk-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Lens Grotesk";src:url("../fonts/lens-grotesk/LensGrotesk-SemiBold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}

:root{
  --ink:#11110f;--paper:#fff;--line:rgba(17,17,15,.28);--muted:rgba(17,17,15,.62);--signal:#ff5c45;
  --font:"Lens Grotesk",Arial,sans-serif;
  --text-small:clamp(1.0625rem,1.03rem + .12vw,1.125rem);--text-body:clamp(1.125rem,1.08rem + .18vw,1.25rem);
  --text-medium:clamp(1.35rem,1.05rem + 1vw,2rem);--text-large:clamp(2.25rem,1.25rem + 4.2vw,6.2rem);--text-display:clamp(3.2rem,1.2rem + 8.5vw,10.5rem);
  --space-xs:.5rem;--space-sm:1rem;--space-md:clamp(1.5rem,2vw,2.5rem);--space-lg:clamp(3rem,6vw,7rem);--space-xl:clamp(5rem,11vw,12rem);
  --page-margin:3rem;--content-width:1280px;--page-inset:max(var(--page-margin),calc((100vw - var(--content-width)) / 2 + var(--page-margin)));--motion-medium:.45s;--motion-header:.75s;--ease-out-cubic:cubic-bezier(.215,.61,.355,1);
  --radius-card:16px;--radius-card-lg:24px;
}
@media(min-width:1440px){:root{--content-width:1440px}}
@media(min-width:1920px){:root{--content-width:1600px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* --page-bg is the animated value JS drives; --page-bg-target is rendered inline on <body>
   so the colour still lands for no-JS and reduced-motion visitors, just without the fade. */
body{margin:0;background-color:var(--page-bg,var(--page-bg-target,var(--paper)));color:var(--ink);font-family:var(--font);font-size:var(--text-body);line-height:1.35;-webkit-font-smoothing:antialiased;transition:background-color .55s var(--ease-out-cubic)}
body,button,input,select,textarea{font-family:var(--font)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
/* Links that wrap artwork rather than text: the global underline above renders as a stray
   line beneath the image, so opt every media anchor out of it. */
.product-tile__image:hover,.home-collection-card__media:hover,.home-collection-hero__media:hover,.home-dark-card__media:hover{text-decoration:none}
button,input,select,textarea{font-size:inherit}small{font-size:var(--text-small)}
.skip-link{position:fixed;z-index:100;top:0;left:0;padding:.75rem 1rem;background:var(--ink);color:var(--paper);transform:translateY(-120%)}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
::selection{background:var(--signal);color:var(--ink)}
.page-shell{width:min(100%,var(--content-width));margin-inline:auto;padding-inline:var(--page-margin)}

.site-header{position:sticky;z-index:20;top:0;background:#fff;font-size:var(--text-small);font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:transform var(--motion-header) cubic-bezier(.22,1,.36,1);will-change:transform}
/* Frost the header only where the blur is actually supported — a translucent header without
   it would just look muddy. .75 keeps nav text above 10:1 contrast even over the near-black
   categories section, which is the darkest thing that scrolls underneath. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header{background:rgba(255,255,255,.75);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header:focus-within{transform:translateY(0)}
.site-announcement{overflow:hidden;background:var(--announcement-bg);color:var(--announcement-ink);font-weight:400;line-height:1.25;letter-spacing:0;text-transform:none}.site-announcement__track{display:flex;width:max-content;animation:announcement-slide 24s linear infinite;will-change:transform}.site-announcement__item{flex:none;padding:.55rem 2rem;white-space:nowrap}
@keyframes announcement-slide{to{transform:translateX(-33.333333%)}}
.site-header__inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:var(--space-md);min-height:82px;padding-top:1.5rem;padding-bottom:1rem}
.wordmark{display:block;grid-column:1;justify-self:start;width:80px;height:40px}.wordmark img{width:100%;height:100%;object-fit:contain;object-position:left center}
.header-categories{display:flex;grid-column:2;justify-self:center;justify-content:center;align-items:center;gap:clamp(1rem,2.2vw,2.4rem);font-size:var(--text-small);line-height:1;transition:opacity .8s var(--ease-out-cubic),transform .8s var(--ease-out-cubic),visibility .8s var(--ease-out-cubic)}
.header-categories a{text-decoration:none;transition:transform .8s var(--ease-out-cubic),color .2s ease}.header-categories a:hover,.header-categories a:focus-visible{text-decoration:none;transform:translateX(-.12em)}
.site-header--in-page-nav:not(.is-compact-nav-visible) .header-categories{visibility:hidden;opacity:0;transform:translateY(-.45rem);pointer-events:none}
.header-meta{display:flex;grid-column:3;justify-self:end;align-items:center;justify-content:flex-end;gap:clamp(1rem,2vw,2.3rem)}
.language-switch{display:flex;gap:.22rem}.language-switch a:not([aria-current]){opacity:.42}.cart-preview{white-space:nowrap}.menu-toggle{display:none;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;cursor:pointer;transition:opacity .5s var(--ease-out-cubic),visibility .5s var(--ease-out-cubic)}.menu-toggle>span{grid-area:1/1;text-align:center}.menu-toggle__close,.menu-toggle[aria-expanded="true"] .menu-toggle__open{visibility:hidden}.menu-toggle[aria-expanded="true"] .menu-toggle__close{visibility:visible}

.eyebrow{margin:0 0 var(--space-md);font-size:var(--text-small);font-weight:500;letter-spacing:.07em;text-transform:uppercase}
/* Homepage section header: label and count sitting on a hairline, so each block of the
   page announces itself without competing with the display type inside it. */
/* The margins here are the single source of section rhythm — the blocks below carry no
   padding-top of their own, so every section sits the same distance under its label. */
.section-label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-lg);margin-bottom:var(--space-md);padding-bottom:.7rem;border-bottom:1px solid var(--line);font-size:var(--text-small);font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.section-label h2{margin:0;font:inherit}
.section-label__link{flex:none}.section-label__link:hover{text-decoration:none}.section-label__link span{display:inline-block;transition:transform .35s var(--ease-out-cubic)}.section-label__link:hover span,.section-label__link:focus-visible span{transform:translateX(.25em)}
.section-label--bare{padding-bottom:0;border-bottom:0}
.section-label--dark{border-bottom-color:rgba(255,255,255,.22)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;padding-top:var(--space-md);font-size:var(--text-small);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.breadcrumbs>span{opacity:.4}.breadcrumbs a{opacity:.4;transition:opacity .2s ease}.breadcrumbs a:hover{opacity:1;text-decoration:none}
.breadcrumbs [aria-current]{opacity:1}
/* Every listing page is headed by its own path. "Catalogue /" sits back so the thing you
   are actually looking at reads as the subject. */
.listing-path{margin:0;font-size:var(--text-medium);font-weight:500;letter-spacing:.05em;line-height:1.05;text-transform:uppercase}
.listing-path span{margin-right:.12em;opacity:.35}
.text-arrow{display:inline-flex;gap:1rem;border-bottom:1px solid;padding-bottom:.25rem;font-size:var(--text-small);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.text-arrow:hover{text-decoration:none}
.text-arrow span{display:inline-block;transition:transform var(--motion-medium) var(--ease-out-cubic)}
.text-arrow:hover span{transform:translateX(.3em)}

.home-menu{display:grid;min-height:clamp(19rem,38vw,35rem);place-items:center;align-content:center;padding-top:var(--space-md);padding-bottom:var(--space-md);background:#fff;text-align:center}
.home-menu--single{min-height:0}
.home-tagline{margin:0 0 var(--space-md);font-size:var(--text-small);line-height:1.3}.home-tagline strong{font-weight:600}
.home-category-stack{display:flex;flex-direction:column;align-items:center;font-size:clamp(3.3rem,8vw,7.75rem);font-weight:400;letter-spacing:.045em;line-height:.89;text-transform:uppercase}
.home-category-stack a{display:block;text-decoration:none}
.home-category-stack a span{display:block;transition:transform .8s var(--ease-out-cubic)}
.home-category-stack a:hover,.home-category-stack a:focus-visible{text-decoration:none}
.home-category-stack a:hover span,.home-category-stack a:focus-visible span{transform:translateX(-.16em)}
/* Greyed-out category with nothing in it yet: both labels share one grid cell, so the word's
   width never shifts the stack when it swaps to "Coming soon". */
.home-category-soon{display:grid;justify-items:center;color:rgba(17,17,15,.3);cursor:default;outline:0}
.home-category-soon>span{grid-area:1/1;transition:opacity .4s var(--ease-out-cubic)}
/* "Coming soon" is longer than most category names; capped so it can't outgrow a phone. */
.home-category-soon__hint{font-size:min(1em,10.5vw);opacity:0;white-space:nowrap}
.home-category-soon:hover .home-category-soon__name,.home-category-soon:focus-visible .home-category-soon__name{opacity:0}
.home-category-soon:hover .home-category-soon__hint,.home-category-soon:focus-visible .home-category-soon__hint{opacity:1}
/* Primary catalogue CTA — was .86rem, the smallest type on the page for the most important link. */
.home-shop-all{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-md);padding-bottom:.35rem;font-size:var(--text-body);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.home-shop-all::after{position:absolute;inset:auto 0 0;height:1px;background:currentColor;content:"";transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out-cubic)}
.home-shop-all:hover{text-decoration:none}
.home-shop-all:hover::after{transform:scaleX(1);transform-origin:left}
.home-collection-hero{position:relative;background:#fff;color:#fff}
.home-collection-hero__media{position:relative;display:block;min-height:clamp(26rem,48vw,48rem);overflow:hidden}
/* Two layers: the wrapper tracks scroll instantly, the image eases its hover zoom.
   Both can't share one transform — a transition slow enough for the zoom would lag the scroll. */
.home-collection-hero__parallax{position:absolute;inset:calc(-1 * var(--hero-parallax-range,0px)) 0;display:block;transform:translate3d(0,var(--hero-shift,0px),0);will-change:transform}
.home-collection-hero__media img,.home-collection-hero__video{width:100%;height:100%;min-height:clamp(26rem,48vw,48rem);object-fit:cover;transform:scale(var(--hero-scale,1));transition:transform 1.2s var(--ease-out-cubic);will-change:transform}
.home-collection-hero__media:hover img,.home-collection-hero__media:hover .home-collection-hero__video{--hero-scale:1.06}
/* The still sits under the video and only surfaces when the video is suppressed. */
.home-collection-hero__still{display:none}
.home-collection-hero__media::after{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0));content:"";pointer-events:none;transition:opacity .6s var(--ease-out-cubic),height .6s var(--ease-out-cubic)}
.home-collection-hero__media:hover::after{height:68%}
.home-collection-hero__copy{position:absolute;z-index:1;right:var(--page-inset);bottom:var(--space-md);left:var(--page-inset)}
.home-collection-hero__copy p,.home-collection-card__copy p{margin:0 0 .35rem;font-size:var(--text-small);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.home-collection-hero__copy h2,.home-collection-card__copy h2{margin:0;font-size:clamp(2rem,1.4rem + 2.2vw,3.75rem);font-weight:400;line-height:1.05;text-transform:uppercase}
.home-pill-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;padding:.55rem 1.2rem;border:1px solid currentColor;border-radius:999px;font-size:var(--text-small);line-height:1;text-transform:none;transition:background-color .35s var(--ease-out-cubic),color .35s var(--ease-out-cubic),border-color .35s var(--ease-out-cubic)}
/* Invert to a solid paper pill. Not `background:currentColor`, which resolves against the
   `color` set in this same rule and paints ink on ink. */
.home-pill-link:hover,.home-collection-hero__media:hover~.home-collection-hero__copy .home-pill-link,.home-collection-card:hover .home-pill-link{background:var(--paper);border-color:var(--paper);color:var(--ink);text-decoration:none}
.home-pill-link span{display:inline-block;transition:transform .35s var(--ease-out-cubic)}
.home-pill-link:hover span,.home-collection-card:hover .home-pill-link span{transform:translateX(.25em)}
/* One card system for every product grid (homepage selection, shop/category/collection listing,
   related products, 404 suggestions): every photo shown whole, centred in an invisible frame of
   the same portrait size whatever its orientation; no border or frame colour; only the price
   under it, right-aligned. The only hover is the crossfade to the second photo. */
.home-selected-grid,.product-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:var(--space-sm) var(--space-md)}
.home-selected-card,.product-tile{min-width:0}
.home-selected-grid{padding-bottom:var(--space-lg)}
.product-caption{display:flex;justify-content:flex-end;padding-top:.6rem;font-size:var(--text-small);text-transform:uppercase;letter-spacing:.04em}.product-caption>*{min-width:0;overflow-wrap:break-word}
.product-caption p{margin:0;font:inherit}
.product-caption__price{text-align:right}
.home-dark-categories{overflow:hidden;background:#060606;color:#fff}
/* No heading above the cards any more, so the section spaces itself: equal room top and bottom. */
.home-dark-categories__inner{position:relative;padding-block:var(--space-lg)}
/* Full-bleed track: cards run edge to edge, but the first one still lines up with the page
   grid so the section reads as part of the layout rather than floating loose.
   overflow-y:hidden is load-bearing — with only overflow-x set, CSS computes the other axis
   to auto, making this a vertical scroll container that swallows wheel events over it. */
.home-dark-categories__track{--dark-gap:clamp(2rem,4.5vw,5rem);--dark-inset:max(var(--page-margin),calc((100vw - var(--content-width)) / 2 + var(--page-margin)));display:flex;gap:var(--dark-gap);padding-inline:var(--dark-inset);scroll-padding-inline:var(--dark-inset);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.home-dark-categories__track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.home-dark-categories__track::-webkit-scrollbar{display:none}
.home-dark-card{flex:0 0 min(22rem,60%);min-width:0;scroll-snap-align:start}
.home-dark-card__media{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;border-radius:var(--radius-card-lg);background:#d9d9d9}
.home-dark-card__media img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .9s var(--ease-out-cubic);will-change:transform}
.home-dark-card:hover .home-dark-card__media img{transform:scale(1.03)}.home-dark-card h2{margin:1rem 0 .5rem;font-size:var(--text-medium);font-weight:500;line-height:1}.home-dark-card p{max-width:24rem;margin:0 0 .7rem;color:rgba(255,255,255,.68);font-size:var(--text-small);line-height:1.25}.home-dark-card>a:last-child{font-size:var(--text-small);text-decoration:underline;text-underline-offset:.18em}
/* Pills tucked against the viewport edges, rounded only on the side facing the cards. */
.home-dark-categories__arrow{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;width:3.25rem;height:4.25rem;padding:0;border:0;border-radius:0 999px 999px 0;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;transform:translateY(-50%);transition:background-color .25s var(--ease-out-cubic),color .25s var(--ease-out-cubic),width .25s var(--ease-out-cubic)}
.home-dark-categories__arrow[data-slider-next]{left:auto;right:0;border-radius:999px 0 0 999px}
.home-dark-categories__arrow:hover{width:3.75rem;background:#fff;color:#060606}
.home-dark-categories__arrow[hidden]{display:none}
/* Colour-field cards. Each collection's own background_color is the card surface and the
   product sits on it, rather than the old treatment where a full-bleed cover image plus a
   dark gradient hid that colour completely and left white text fighting the photograph. */
.home-collection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:#fff}
.home-collection-card{position:relative;display:block;overflow:hidden;aspect-ratio:5/4;color:#fff}
.home-collection-card__media{position:absolute;inset:0;display:block}
.home-collection-card__media img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .9s var(--ease-out-cubic);will-change:transform}
.home-collection-card:hover .home-collection-card__media img{transform:scale(1.03)}
.home-collection-card::after{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0));content:"";pointer-events:none}
/* Both cards keep their text the same small distance inside their own edge, so the two read as
   twins and a long collection name has the full card width. */
.home-collection-card__copy{position:absolute;z-index:1;right:var(--space-md);bottom:var(--space-md);left:var(--space-md)}
/* Closing pair, measured off the designer's 1440px frame: the studio statement (punkt.studio
   mark centred in the left half, copy starting exactly at the midline), then the visit band.
   Spacing is in vw so the proportions hold at every desktop width. */
.home-about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;padding-block:clamp(5rem,12vw,15rem)}
.home-about__logo{justify-self:center}.home-about__logo img{width:clamp(9rem,18.4vw,22rem);height:auto}
/* 28.2em reproduces the mockup's line breaks; the page margin keeps it off the edge below ~1200px.
   The top margin is the mockup's: the copy sits a little below the logo's centre line. */
.home-about__statement{max-width:min(28.2em,100% - var(--page-margin));margin:2.2vw 0 0;font-size:var(--text-body);line-height:1.25}
.home-visit{background:#f5f5f5;text-align:center}
.home-visit__copy{padding-top:clamp(var(--space-lg),12.2vw,15rem);padding-bottom:clamp(var(--space-lg),7.4vw,9rem)}
/* Two lines in every language (COME / VISIT US, ЕЛАТЕ / ПРИ НАС): the break is in the markup
   (break_after_first_word), so no width limit has to guess where each language wraps. */
.home-visit h2{margin:0 auto;font-size:clamp(3rem,6.67vw,8rem);font-weight:400;line-height:1;text-transform:uppercase}
.home-visit__address{margin:clamp(1.5rem,3vw,3.5rem) 0 0;font-size:var(--text-body);line-height:1.25;text-transform:uppercase}.home-visit__address span{display:block;text-wrap:balance}
.home-visit__image img{width:100%;max-height:44rem;object-fit:cover}

.listing-header{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}
/* Category pages carry only a visually hidden h1, so the block keeps its top rhythm but
   drops the space that would otherwise sit under an invisible heading. */
.listing-header--bare{padding-bottom:0}
.collection-banner{padding-bottom:var(--space-md);animation:collection-banner-in .5s var(--ease-out-cubic) both}
.collection-banner h2{margin:0 0 .35rem;font-size:var(--text-medium);font-weight:400;line-height:1.05;text-transform:uppercase}
.collection-banner__description{max-width:38rem;margin:0;font-size:var(--text-small)}
@keyframes collection-banner-in{from{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}
/* Steps down from the path heading, which is also --text-medium — matching sizes left the
   two competing instead of reading as heading and subheading. */
.listing-intro{max-width:46rem;margin:var(--space-sm) 0 0;color:var(--muted);font-size:var(--text-body);line-height:1.35}
.listing-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem var(--space-md);padding-bottom:var(--space-md)}
.category-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.5rem;font-size:var(--text-small);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
/* Rule is drawn by ::after, never text-decoration, so the active tab can't show two lines. */
.category-filter a{position:relative;padding-bottom:.28rem;opacity:.45;transition:opacity .35s var(--ease-out-cubic)}
.category-filter a::after{position:absolute;inset:auto 0 0;height:1px;background:currentColor;content:"";transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out-cubic)}
.category-filter a:hover,.category-filter a:focus-visible{opacity:1;text-decoration:none}
.category-filter a:hover::after,.category-filter a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.category-filter a[aria-current]{font-weight:600;opacity:1}
.category-filter a[aria-current]::after{transform:scaleX(1)}
/* Collection filter: a disclosure of links in the filter bar's type. The dots stay monochrome (an
   outline, filled black for the current choice and the hovered row); only the hovered row takes the
   collection's own colour, previewing the page it leads to. */
.collection-menu{position:relative;font-size:var(--text-small);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.collection-menu__toggle{display:flex;align-items:center;gap:.6rem;list-style:none;cursor:pointer}.collection-menu__toggle::-webkit-details-marker{display:none}.collection-menu__toggle:focus-visible{outline:none}
.collection-menu__label{opacity:.4}
.collection-menu__current{display:inline-flex;align-items:center;gap:.5rem;padding-bottom:.15rem;border-bottom:1px solid var(--ink);transition:border-color .25s ease}
.collection-menu__current::after{width:.42rem;height:.42rem;margin:-.25rem .15rem 0 .4rem;border-right:1.5px solid;border-bottom:1.5px solid;content:"";transform:rotate(45deg)}
.collection-menu[open] .collection-menu__current::after{margin-top:.25rem;transform:rotate(225deg)}
.collection-menu__toggle:hover .collection-menu__current,.collection-menu__toggle:focus-visible .collection-menu__current,.collection-menu[open] .collection-menu__current{border-bottom-color:var(--signal)}
.collection-dot{flex:none;box-sizing:border-box;width:.78rem;height:.78rem;border:1.5px solid var(--ink);border-radius:50%;background:transparent}.collection-menu__current .collection-dot{background:var(--ink)}
.collection-menu__panel{position:absolute;z-index:30;top:calc(100% + .8rem);right:0;width:min(24rem,calc(100vw - 2 * var(--page-margin)));padding:.4rem;border:1px solid var(--ink);border-radius:var(--radius-card);background:var(--paper);box-shadow:0 1rem 2.5rem rgba(17,17,15,.1)}
.collection-menu[open] .collection-menu__panel{animation:collection-menu-in .2s ease-out}
@keyframes collection-menu-in{from{opacity:0}}
.collection-menu__panel ul{margin:0;padding:0;list-style:none}
.collection-menu__panel a{display:flex;align-items:center;gap:.85rem;padding:.85rem .9rem;border-radius:10px;transition:background-color .2s ease}
.collection-menu__panel a,.collection-menu__panel a:hover{text-decoration:none}.collection-menu__panel a:hover,.collection-menu__panel a:focus-visible{background:var(--swatch);outline:none}
.collection-menu__panel a:hover .collection-dot,.collection-menu__panel a:focus-visible .collection-dot{background:var(--ink)}
.collection-menu__panel a[aria-current] .collection-dot{background:var(--ink)}
.collection-menu__name{flex:1}
.collection-menu__arrow{opacity:0;transition:opacity .2s ease}.collection-menu__panel a:hover .collection-menu__arrow,.collection-menu__panel a:focus-visible .collection-menu__arrow{opacity:1}
@media(prefers-reduced-motion:reduce){.collection-menu[open] .collection-menu__panel{animation:none}.collection-menu__panel a,.collection-menu__arrow{transition:none}}
@media(max-width:900px){.collection-menu{flex:1 1 100%;min-width:0}.collection-menu__panel{left:0;width:auto;transform-origin:top left}}
.product-index{padding-bottom:var(--space-xl)}
/* Two exact sizes, one per orientation: a portrait photo fills the 3:4 frame, a landscape one
   (.is-landscape, from the image's stored width/height) fills a 3:2 box centred in it, which is
   exactly half the frame's height. object-fit:cover trims a photo whose own proportions differ
   from its box, so every portrait and every landscape renders at the same size. The frame is
   transparent, so a PNG cut-out shows the page or collection colour behind it. */
.product-tile__image{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:transparent;isolation:isolate}
.product-tile__image img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .28s var(--ease-out-cubic)}
.product-tile__image img.is-landscape{top:25%;height:50%}
.product-tile__swap{opacity:0}
/* The only hover effect: crossfade to the second photo, where there is one. */
.product-tile__image.has-swap:hover img:not(.product-tile__swap){opacity:0}
.product-tile__image.has-swap:hover .product-tile__swap{opacity:1}
.stock-flag{position:absolute;z-index:2;top:.7rem;left:.7rem;padding:.32rem .5rem;background:var(--ink);color:var(--paper);font-size:.68rem;font-weight:500;letter-spacing:.09em;line-height:1;text-transform:uppercase}

/* Staff-only shortcut into the admin for the record being viewed. */
.admin-edit{position:fixed;z-index:30;right:var(--space-md);bottom:var(--space-md);display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 24px rgba(17,17,15,.22);transition:background-color .25s var(--ease-out-cubic),transform .25s var(--ease-out-cubic)}
.admin-edit:hover{background:var(--signal);color:var(--ink);text-decoration:none;transform:translateY(-2px)}
.admin-edit__dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--signal)}
.admin-edit:hover .admin-edit__dot{background:var(--ink)}

.product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--page-margin);align-items:start;padding-top:var(--space-md);padding-bottom:var(--space-xl)}
.product-gallery{display:grid;min-width:0;gap:var(--space-sm)}.product-gallery__dots{display:none}.product-gallery figure{min-width:0;margin:0}.product-gallery img{width:100%;background:#ddd9ce}
.product-information{position:sticky;top:var(--space-md);padding:var(--space-md) 0}
.product-information h1{margin:0;font-size:var(--text-large);font-weight:400;line-height:.95;letter-spacing:-.045em}
.product-price{margin:var(--space-md) 0;font-size:var(--text-medium)}.product-lede{max-width:32rem;font-size:var(--text-medium);line-height:1.15}.product-collections{margin:var(--space-md) 0 0;color:var(--muted);font-size:var(--text-small);letter-spacing:.04em;text-transform:uppercase}.product-collections a{color:var(--ink)}
.product-form{margin:var(--space-lg) 0}.product-variant-field{margin-bottom:var(--space-md)}.product-variant-field label,.quantity-field>label{font-size:var(--text-small);font-weight:500;letter-spacing:.06em;text-transform:uppercase}.product-variant-field label{display:block;margin-bottom:.75rem}.product-variant-field select{width:100%;padding:1rem 2.5rem 1rem 1rem;border:1px solid var(--line);border-radius:14px;appearance:none;background:#ffffff78 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%2311110f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat;background-position:right 12px center;background-size:14px 8px;color:var(--ink);cursor:pointer;transition:border-color .28s ease,background-color .28s ease,background-position .28s var(--ease-out-cubic)}.product-variant-field select:hover{border-color:rgba(17,17,15,.58);background-color:#fff;background-position:right 12px top calc(50% + 3px)}.product-variant-field select:focus{border-color:var(--signal);background-color:#fff;outline:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23ff5c45' stroke-width='1.5'/%3E%3C/svg%3E")}
.quantity-field{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin:0}.quantity-control{display:grid;grid-template-columns:3rem 3.25rem 3rem;border:1px solid var(--line);border-radius:14px;background:#ffffff78;transition:border-color .28s ease,background-color .28s ease}.quantity-control:hover{border-color:rgba(17,17,15,.58);background-color:#fff}.quantity-control:focus-within{border-color:var(--signal);background-color:#fff}.quantity-control button,.quantity-control input{min-height:3.5rem;padding:0;border:0;background:transparent;color:var(--ink);text-align:center}.quantity-control button{width:100%;font-size:1.35rem;cursor:pointer}.quantity-control button:disabled,.quantity-control button[aria-disabled="true"]{opacity:.25;cursor:not-allowed}.quantity-control input{width:100%;appearance:textfield}.quantity-control input:focus-visible{outline:0}.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{margin:0;appearance:none}.quantity-action{position:relative;display:grid}.quantity-tooltip{position:absolute;z-index:2;right:0;bottom:calc(100% + .65rem);width:max-content;max-width:14rem;padding:.5rem .65rem;border-radius:8px;background:var(--ink);color:var(--paper);font-size:.875rem;font-weight:400;letter-spacing:0;line-height:1.25;text-align:left;text-transform:none;opacity:0;pointer-events:none;transform:translateY(.25rem);transition:opacity .2s ease,transform .2s ease}.quantity-tooltip::after{position:absolute;top:100%;right:1.1rem;border:.35rem solid transparent;border-top-color:var(--ink);content:""}.quantity-action.is-limit:hover .quantity-tooltip,.quantity-action.is-limit:focus-within .quantity-tooltip{opacity:1;transform:translateY(0)}
/* The shop's one action button: Add to cart, Review order, the final order button and the myPOS
   steps. Outlined at rest; ink, with the arrow nudged right, on hover or keyboard focus. */
.add-button{display:flex;width:100%;justify-content:space-between;margin-top:var(--space-md);padding:1rem;border:1px solid var(--ink);border-radius:14px;background:transparent;color:var(--ink);font-weight:500;text-transform:uppercase;cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.add-button span{display:inline-block;transition:transform .35s var(--ease-out-cubic)}
.add-button:hover:not(:disabled),.add-button:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.add-button:hover:not(:disabled) span,.add-button:focus-visible span{transform:translateX(.3em)}
.add-button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.add-button:disabled{opacity:.4;cursor:not-allowed}
.product-description{max-width:40rem}.product-notes{margin-top:var(--space-lg);border-top:1px solid var(--line)}.product-notes div{display:grid;grid-template-columns:1fr 1.5fr;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:var(--text-small)}.product-notes dt{text-transform:uppercase}.product-notes dd{margin:0}.related-products{padding-top:var(--space-lg);padding-bottom:var(--space-xl);border-top:1px solid var(--line)}.product-index--compact{grid-template-columns:repeat(4,1fr);align-items:start;gap:var(--space-md);padding-bottom:0}
.image-placeholder{display:grid;min-height:25rem;place-items:center;background:#d7d2c5;text-transform:uppercase}.image-placeholder--large{min-height:75vh}
.empty-state{min-height:50vh;padding-block:var(--space-lg)}
.error-state{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:52vh;padding-top:var(--space-xl);padding-bottom:var(--space-lg)}
.error-state__code{margin:0 0 var(--space-sm);font-size:var(--text-display);font-weight:400;letter-spacing:-.05em;line-height:.8}
.error-state h1{max-width:14ch;margin:0;font-size:var(--text-large);font-weight:400;letter-spacing:-.045em;line-height:.98}
.error-state__lede{max-width:44ch;margin:var(--space-md) 0 0;color:var(--muted);font-size:var(--text-medium);line-height:1.2}
.error-state__actions{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-lg)}
.error-suggestions{padding-bottom:var(--space-xl)}

/* Scroll reveal. Gated behind .js-reveal so no-JS and reduced-motion visitors never get hidden content. */
html.js-reveal :is(.home-collection-hero,.home-collection-card,.home-dark-card,.home-about__logo,.home-about__statement,.home-visit__copy,.home-visit__image){transition:opacity .8s var(--ease-out-cubic),transform .8s var(--ease-out-cubic);transition-delay:var(--reveal-delay,0ms)}
html.js-reveal :is(.home-collection-hero,.home-collection-card,.home-dark-card,.home-about__logo,.home-about__statement,.home-visit__copy,.home-visit__image):not(.is-revealed){opacity:0;transform:translateY(1.5rem)}
/* Product cards just fade in, without the slide-up the other sections use: the moving entrance
   read as cards being dealt across the grid. ease-in-out rather than var(--ease-out-cubic),
   which is tuned for motion and on a pure fade jumps up fast, then crawls to full opacity. */
html.js-reveal :is(.home-selected-card,.product-tile){transition:opacity .5s ease-in-out;transition-delay:var(--reveal-delay,0ms)}
html.js-reveal :is(.home-selected-card,.product-tile):not(.is-revealed){opacity:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.messages{position:relative;z-index:10}.message{margin:0;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:var(--text-small)}.message--error{color:#a52d20}

.cart-header{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}
.cart-header h1{margin:0;font-size:var(--text-large);font-weight:400;line-height:.98;letter-spacing:-.045em}.cart-header h1 span{color:var(--muted)}
.cart-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(21rem,.75fr);gap:var(--space-lg);align-items:start;padding-bottom:var(--space-xl)}
.cart-lines{border-top:1px solid var(--ink)}
.cart-labels{display:grid;min-height:3.75rem;grid-template-columns:minmax(12rem,1fr) 8rem 6rem 5rem;align-items:center;gap:var(--space-md);padding:.75rem 0;border-bottom:1px solid var(--line);font-size:var(--text-small);letter-spacing:.06em;text-transform:uppercase}.cart-labels span:nth-child(n+2){text-align:right}
.cart-line{display:grid;grid-template-columns:minmax(12rem,1fr) 8rem 6rem 5rem;gap:var(--space-md);align-items:center;padding:var(--space-md) 0;border-bottom:1px solid var(--line)}
.cart-line__product{display:grid;grid-template-columns:clamp(4.5rem,8vw,7rem) 1fr;gap:var(--space-sm);align-items:start}.cart-line__product img{display:block;width:100%;height:auto}.cart-line__product span{display:flex;flex-direction:column;gap:.3rem}.cart-line__product strong{font-size:var(--text-medium);font-weight:400;line-height:1.05}.cart-line__product small{color:var(--muted);font-size:var(--text-small)}
.cart-line__product .stock-error,.cart-summary .stock-error{color:#a52d20}
.price-was{margin-right:.15em;color:var(--muted);text-decoration-thickness:1px}
.discount-code{position:relative;border-bottom:1px solid var(--line);font-size:var(--text-small)}.discount-code summary,.discount-code--applied{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-md) 0}.discount-code summary,.discount-code--applied>span:first-child{letter-spacing:.06em;text-transform:uppercase}.discount-code summary{list-style:none;cursor:pointer}.discount-code summary::-webkit-details-marker{display:none}.discount-code summary::after{content:"+";font-size:1.9rem;font-weight:400;line-height:1;letter-spacing:0;transition:transform .35s var(--ease-out-cubic)}.discount-code[open] summary::after{transform:rotate(45deg)}.discount-code summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.discount-code__row{position:absolute;top:0;right:3rem;bottom:0;display:flex;width:min(28rem,calc(100% - 15rem));align-items:center;gap:1rem}.discount-code[open] .discount-code__row{animation:discount-code-in .4s var(--ease-out-cubic) both}@keyframes discount-code-in{from{opacity:0;transform:translateX(.75rem)}to{opacity:1;transform:none}}.discount-code__row input{flex:1;min-width:0;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#ffffff78;color:var(--ink);font:inherit;letter-spacing:.06em;text-transform:uppercase;transition:border-color .28s ease,background-color .28s ease}.discount-code__row input::placeholder{color:var(--muted);letter-spacing:.04em;text-transform:none}.discount-code__row input:hover{border-color:rgba(17,17,15,.58);background-color:#fff}.discount-code__row input:focus{border-color:var(--signal);background-color:#fff;outline:0}
.discount-code__row button{flex:none;padding:.35rem 0;border:0;background:none;color:var(--ink);font:inherit;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.discount-code__row button span{display:inline-block;transition:transform .35s var(--ease-out-cubic)}.discount-code__row button:hover span,.discount-code__row button:focus-visible span{transform:translateX(.25em)}
.discount-code--applied strong{letter-spacing:.06em}.discount-code--applied form{display:inline;margin-left:.9rem}.discount-code--applied button{padding:0;border:0;border-bottom:1px solid;background:none;color:var(--muted);font:inherit;cursor:pointer}.discount-code--applied button:hover{color:var(--ink)}
.cart-line__quantity,.cart-line__total,.cart-line__remove{font-size:var(--text-body);line-height:1.35}.cart-line__quantity{display:flex;flex-direction:column;align-items:flex-end;justify-content:center}.cart-line__quantity .quantity-control{grid-template-columns:2.5rem 3rem 2.5rem}.cart-quantity-error{max-width:10rem;margin-top:.35rem;color:#a52d20;font-size:.875rem;text-align:right}.cart-line__remove button{padding:0;border:0;border-bottom:1px solid;background:none;font-size:inherit;line-height:inherit;cursor:pointer}.cart-line__total{margin:0;text-align:right}.cart-line__remove{text-align:right}
.cart-summary{position:sticky;top:var(--space-md);border-top:1px solid var(--ink)}.cart-summary [hidden]{display:none}.cart-summary>div{display:flex;min-height:3.75rem;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:var(--text-small)}.cart-summary strong{font-weight:500;text-align:right}.cart-summary>p{color:var(--muted);font-size:var(--text-small)}
/* Same button as Add to cart on the product page (.add-button). */
.checkout-button{display:flex;justify-content:space-between;gap:1rem;margin-top:var(--space-md);padding:1rem;border:1px solid var(--line);border-radius:14px;color:var(--muted);font-size:var(--text-body);font-weight:500;text-transform:uppercase}.checkout-button--active{border-color:var(--ink);background:transparent;color:var(--ink);transition:background-color .3s ease,color .3s ease,border-color .3s ease}.checkout-button--active span{display:inline-block;transition:transform .35s var(--ease-out-cubic)}.checkout-button--active:hover,.checkout-button--active:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper);text-decoration:none}.checkout-button--active:hover span,.checkout-button--active:focus-visible span{transform:translateX(.3em)}.checkout-button--active:focus-visible{outline:2px solid var(--signal);outline-offset:3px}.continue-shopping{position:relative;display:inline-block;margin-top:var(--space-md);padding-bottom:.2rem;font-size:var(--text-small)}
.continue-shopping::after{position:absolute;inset:auto 0 0;height:1px;background:currentColor;content:""}
.continue-shopping:hover{text-decoration:none}
/* Line already sits under this link, so sweep it out and back rather than just revealing it. */
.continue-shopping:hover::after{animation:underline-sweep .55s var(--ease-out-cubic)}
@keyframes underline-sweep{
  0%{transform:scaleX(1);transform-origin:right}
  45%{transform:scaleX(0);transform-origin:right}
  55%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}
}
.cart-empty{min-height:55vh;padding-top:var(--space-lg);padding-bottom:var(--space-xl)}.cart-empty p{max-width:16ch;margin:0 0 var(--space-md);font-size:var(--text-large);line-height:1}

.checkout-header,.confirmation-header{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.checkout-header h1,.confirmation-header h1{max-width:12ch;margin:0;font-size:var(--text-large);font-weight:400;line-height:.98;letter-spacing:-.045em}.confirmation-header>p:last-child{max-width:38rem;font-size:var(--text-medium)}
.checkout-form{padding-bottom:var(--space-xl)}.checkout-section{display:grid;grid-template-columns:minmax(12rem,.6fr) minmax(0,1.4fr);column-gap:var(--space-lg);row-gap:var(--space-md);padding:var(--space-lg) 0;border-top:1px solid var(--ink)}.checkout-section h2{margin:0;font-size:var(--text-medium);font-weight:400}.checkout-section h2 span{display:block;margin-bottom:.5rem;color:var(--muted);font-size:var(--text-small)}.checkout-section>h2+*{margin-top:2rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.checkout-section>.form-grid,.checkout-section>[data-city-fields],.checkout-section>[data-address-city-field],.checkout-section>[data-location-fields],.checkout-section>[data-address-fields],.checkout-section>.field,.checkout-section>.checkbox-field{grid-column:2}.field{display:flex;flex-direction:column;align-items:stretch}.field--wide{grid-column:1/-1}.field label{margin-bottom:.45rem;font-size:var(--text-small);letter-spacing:.04em;text-transform:uppercase}.field input,.field select,.field textarea{width:100%;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#ffffff78;color:var(--ink);transition:border-color .28s ease,background-color .28s ease}.field select{appearance:none;padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%2311110f' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 8px;cursor:pointer;transition:border-color .28s ease,background-color .28s ease,background-position .28s var(--ease-out-cubic)}.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(17,17,15,.58);background-color:#fff}
.field select:hover{background-position:right 12px top calc(50% + 3px)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--signal);background-color:#fff;outline:0}
.field select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23ff5c45' stroke-width='1.5'/%3E%3C/svg%3E")}.field textarea{min-height:7rem;resize:none}.field-error,.form-errors{margin:.4rem 0 0;color:#a52d20;font-size:var(--text-small)}.field--error input,.field--error select{border-color:#a52d20}.checkbox-field{display:flex;align-items:center;gap:.7rem}.checkbox-field input{width:1.15rem;height:1.15rem;accent-color:var(--ink)}
.delivery-overview{row-gap:.55rem}.delivery-overview .field select{height:3.4rem;padding-top:0;padding-bottom:0}.delivery-note{grid-column:1/-1;color:var(--muted)}.location-picker{margin-top:0}
.checkout-form [hidden]{display:none}
.checkout-submit{display:grid;grid-template-columns:1fr minmax(18rem,.7fr);gap:var(--space-lg);align-items:end;padding-top:var(--space-lg);border-top:1px solid var(--ink)}.checkout-submit p{margin:0}.checkout-submit .add-button{margin:0}
.review-layout,.confirmation-order{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(20rem,.7fr);gap:var(--space-lg);align-items:start;padding-bottom:var(--space-xl)}.review-items,.confirmation-items{border-top:1px solid var(--ink)}.review-items article,.confirmation-items article{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-md);padding:.8rem 0;border-bottom:1px solid var(--line)}.review-items article div,.confirmation-items article div{display:flex;flex-direction:column}.review-items strong,.confirmation-items strong{font-weight:400}.review-items article div span,.confirmation-items article div span{color:var(--muted);font-size:var(--text-small)}
.review-summary,.confirmation-details{border-top:1px solid var(--ink)}.review-summary dl,.confirmation-details{margin:0}.review-summary dl div,.confirmation-details div{display:grid;grid-template-columns:1fr 1.5fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:var(--text-small)}.review-summary dt,.confirmation-details dt{text-transform:uppercase}.review-summary dd,.confirmation-details dd{margin:0}.review-totals{margin-top:var(--space-md)}.review-totals p{display:flex;justify-content:space-between;margin:0;padding:.65rem 0}.review-totals strong{font-weight:500}.review-totals .review-total{border-top:1px solid var(--ink);font-size:var(--text-medium)}.confirmation-total{font-size:var(--text-medium)}
.order-legal{margin:var(--space-md) 0;color:var(--muted);font-size:var(--text-small)}.order-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}
.payment-state{min-height:65vh;padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.payment-state h1{max-width:12ch;margin:0;font-size:var(--text-large);font-weight:400;line-height:.98;letter-spacing:-.045em}.payment-state>p:not(.eyebrow){max-width:38rem;margin:var(--space-md) 0;color:var(--muted);font-size:var(--text-medium)}.payment-state form{max-width:38rem}.payment-state .add-button{margin-top:var(--space-md)}

.legal-page{max-width:1100px;padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.legal-page header{padding-bottom:var(--space-lg);border-bottom:1px solid var(--ink)}.legal-page header h1{max-width:11ch;margin:0;font-size:var(--text-large);font-weight:400;letter-spacing:-.045em;line-height:.98}.legal-page header>p:last-child{margin:var(--space-md) 0 0;color:var(--muted)}.legal-page section{display:grid;grid-template-columns:minmax(12rem,.55fr) minmax(0,1.45fr);gap:var(--space-lg);padding:var(--space-md) 0;border-bottom:1px solid var(--line)}.legal-page section h2{margin:0;font-size:var(--text-medium);font-weight:400;line-height:1.1}.legal-page section>p,.legal-page section>ul,.legal-page section>ol,.legal-page section>.legal-body{grid-column:2;margin-top:0}.legal-page section[id]{scroll-margin-top:7rem}.legal-body>:first-child{margin-top:0}.legal-body h3{margin:var(--space-md) 0 .5rem;font-size:var(--text-body);font-weight:500}.legal-table-wrap{overflow-x:auto;margin:var(--space-md) 0}.legal-table{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--text-small);line-height:1.35}.legal-table th,.legal-table td{padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.legal-table th{font-weight:500}.legal-page li+li{margin-top:.5rem}.legal-page a{text-decoration:underline;text-underline-offset:.18em}.legal-page .withdrawal-form{display:block;margin-top:var(--space-lg);padding:var(--space-md);border:1px solid var(--ink)}.withdrawal-form h2{margin-bottom:var(--space-md)}.withdrawal-form .form-line{min-height:3rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}

.site-footer{background:var(--ink);color:var(--paper)}
.site-footer__inner{padding-top:var(--space-lg);padding-bottom:var(--space-md)}
.footer-statement{max-width:13ch;margin:0 0 var(--space-xl);font-size:var(--text-large);line-height:.98;letter-spacing:-.04em}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr .7fr auto;gap:var(--space-md);padding-top:var(--space-md);border-top:1px solid rgba(242,240,233,.3);font-size:var(--text-small)}.footer-grid span{opacity:.5;text-transform:uppercase}.footer-grid__end{justify-self:end;text-align:right}.footer-top span{display:inline-block;margin-left:.3rem;opacity:1;transition:transform var(--motion-medium) ease}.footer-top:hover span{transform:translateY(-.2rem)}

.footer-legal{display:flex;flex-wrap:wrap;gap:.5rem var(--space-md);margin-top:var(--space-lg);padding-top:var(--space-sm);border-top:1px solid rgba(242,240,233,.3);font-size:var(--text-small)}.footer-copyright{flex-basis:100%;margin:0;opacity:.6}.footer-cookie-settings{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.footer-cookie-settings:hover{text-decoration:underline;text-underline-offset:.18em}
/* Cookie consent: shown until a choice exists (html.consent-pending, set in the head before first
   paint, so it never pops in late) or when reopened from the footer. Reject and Accept look the
   same on purpose: refusing has to be as easy as agreeing. */
.cookie-banner{position:fixed;z-index:90;right:var(--space-sm);bottom:var(--space-sm);display:none;width:min(31rem,calc(100% - 2 * var(--space-sm)));padding:1.25rem;border:1px solid var(--ink);border-radius:var(--radius-card);background:var(--paper);color:var(--ink);font-size:var(--text-small);line-height:1.35;box-shadow:0 1.25rem 3rem rgba(17,17,15,.14)}
html.consent-pending .cookie-banner,.cookie-banner.is-open{display:block;animation:cookie-banner-in .45s var(--ease-out-cubic)}
@keyframes cookie-banner-in{from{opacity:0;transform:translateY(1rem)}}
.cookie-banner h2{margin:0 0 .5rem;font-size:inherit;font-weight:500;letter-spacing:.06em;text-transform:uppercase}.cookie-banner h2:focus{outline:none}.cookie-banner p{margin:0}.cookie-banner a{text-decoration:underline;text-underline-offset:.18em}
.cookie-banner__settings{display:grid;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}.cookie-banner__settings[hidden]{display:none}
.cookie-option{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;color:var(--muted);cursor:pointer}.cookie-option input{width:1.1rem;height:1.1rem;margin:.1rem 0 0;accent-color:var(--ink)}.cookie-option strong{display:block;color:var(--ink);font-weight:500}
.cookie-banner__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.1rem}
.cookie-banner__settings-toggle{margin-right:auto;padding:.3rem 0;border:0;border-bottom:1px solid;background:none;color:var(--ink);font:inherit;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cookie-banner__button{padding:.7rem 1.1rem;border:1px solid var(--ink);border-radius:14px;background:none;color:var(--ink);font:inherit;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .25s ease,color .25s ease}.cookie-banner__button:hover,.cookie-banner__button:focus-visible{background:var(--ink);color:var(--paper)}
@media(max-width:600px){.cookie-banner__button{flex:1 1 40%}.cookie-banner__settings-toggle{order:1;margin-right:0}}
@media(prefers-reduced-motion:reduce){html.consent-pending .cookie-banner,.cookie-banner.is-open{animation:none}.cookie-banner__button{transition:none}}

@media(max-width:1100px){
  :root{--page-margin:2rem;--content-width:3000px}
  .home-selected-grid,.product-index:not(.product-index--compact){grid-template-columns:repeat(3,minmax(0,1fr))}
  .cart-layout{grid-template-columns:1fr}.cart-summary{position:static}
}
@media(max-width:900px){
  :root{--page-margin:1.5rem}
  .home-about{grid-template-columns:1fr;gap:var(--space-lg);padding:var(--space-xl) var(--page-margin)}.home-about__logo{justify-self:start}.home-about__logo img{width:clamp(9rem,40vw,14rem)}.home-about__statement{max-width:28.2em;margin-top:0}
  /* The category row: not justify-content:flex-end, which pushes overflow off the left edge where it
     can't be scrolled to (the Bulgarian names overflow a phone). The auto margin right-aligns a row that
     fits and collapses when it doesn't, so a long row starts at the left and scrolls. */
  .site-header__inner{grid-template-columns:auto 1fr;gap:0 clamp(1rem,4vw,2.5rem)}.header-meta{grid-column:2;grid-row:1;justify-self:end;justify-content:flex-end}.header-categories{grid-column:1/-1;grid-row:2;justify-self:end;justify-content:flex-start;max-width:100%;gap:1rem;overflow-x:auto;scrollbar-width:none}.header-categories>:first-child{margin-left:auto}.header-categories::-webkit-scrollbar{display:none}
  .home-menu{min-height:clamp(18rem,45vw,28rem)}.home-menu--single{min-height:0}.home-dark-card{flex:0 0 min(64vw,18rem)}.home-collection-grid{grid-template-columns:1fr}.home-collection-card{aspect-ratio:4/5}.home-collection-card__copy{right:var(--page-margin);left:var(--page-inset)}
  .product-detail{grid-template-columns:1fr}.product-information{position:static}.product-gallery{grid-template-columns:repeat(2,1fr)}.product-gallery figure:first-child{grid-column:1/-1}
  .product-index:not(.product-index--compact){grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-index--compact{grid-template-columns:repeat(2,1fr)}
  .review-layout,.confirmation-order{grid-template-columns:1fr}.checkout-section{grid-template-columns:1fr}.checkout-section>h2+*{margin-top:0}.checkout-section>.form-grid,.checkout-section>[data-city-fields],.checkout-section>[data-address-city-field],.checkout-section>[data-location-fields],.checkout-section>[data-address-fields],.checkout-section>.field,.checkout-section>.checkbox-field{grid-column:1}.checkout-submit{grid-template-columns:1fr}.legal-page section{grid-template-columns:1fr;gap:var(--space-sm)}.legal-page section>p,.legal-page section>ul,.legal-page section>ol,.legal-page section>.legal-body{grid-column:1}
}
@media(max-width:600px){
  .discount-code__row{left:0;width:auto}.discount-code summary{transition:color .25s ease}.discount-code[open] summary{color:transparent}.discount-code[open] summary::after{color:var(--ink)}
  .site-announcement__item{padding-block:.45rem}.site-header__inner{min-height:64px;padding-top:1rem;padding-bottom:.8rem}.home-category-stack{font-size:clamp(2.75rem,14vw,4.6rem)}.home-menu{min-height:clamp(16rem,70vw,24rem)}.home-menu--single{min-height:0}.home-selected-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);padding-top:var(--space-md)}.home-visit h2{font-size:clamp(2.75rem,14vw,4.7rem)}
  .product-index:not(.product-index--compact){grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
  .product-index--compact{grid-template-columns:1fr}
  .product-gallery{display:flex;align-items:flex-start;gap:.5rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;transition:height .35s var(--ease-out-cubic)}.product-gallery::-webkit-scrollbar{display:none}.product-gallery figure{flex:0 0 100%;scroll-snap-align:start}.product-gallery__dots{display:flex;justify-content:center;gap:.5rem;padding-top:.85rem}.product-gallery__dots span{width:.5rem;height:.5rem;border-radius:50%;background:var(--line);transition:background-color .3s ease,transform .3s ease}.product-gallery__dots span.is-active{background:var(--ink);transform:scale(1.25)}.product-information{padding-top:var(--space-lg)}
  .cart-header{padding-top:var(--space-lg)}.cart-labels{display:none}.cart-line{grid-template-columns:1fr auto;gap:var(--space-sm);align-items:end}.cart-line__product{grid-column:1/-1}.cart-line__quantity{justify-content:flex-start}.cart-line__total{align-self:center}.cart-line__remove{grid-column:1/-1;text-align:left}.cart-summary{margin-top:var(--space-md)}
  .checkout-header,.confirmation-header{padding-top:var(--space-lg)}.form-grid{grid-template-columns:1fr}.checkout-section{gap:var(--space-md)}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-statement{margin-bottom:var(--space-xl)}
}
@media(prefers-reduced-motion:reduce){:root{--motion-medium:0s;--motion-header:0s}html{scroll-behavior:auto}.field input,.field select,.field textarea,.product-variant-field select,.quantity-control,.quantity-tooltip{transition:none}.site-announcement__track{width:100%;animation:none;will-change:auto}.site-announcement__item{width:100%;padding-inline:var(--page-margin);white-space:normal;text-align:center}.site-announcement__item[aria-hidden="true"]{display:none}.collection-banner{animation:none}.home-collection-hero__video{display:none}.home-collection-hero__still{display:block}body{transition:none}.continue-shopping:hover::after{animation:none}.category-filter a::after,.product-tile__image img,.discount-code summary,.discount-code summary::after,.discount-code__row input,.discount-code__row button span,.home-category-soon>span,.home-collection-card__media img,.add-button,.add-button span,.product-gallery__dots span,.product-gallery,.section-label__link span,.checkout-button--active,.checkout-button--active span{transition:none}.discount-code[open] .discount-code__row{animation:none}}

/* --- quantity stepper feedback ---
   The +/- buttons had no hover or :active state, so a click changed the number with no
   acknowledgement that the press had registered. */
/* Shares the dropdown chevron's language so the two controls feel like one system: the
   glyph shifts toward what it does on hover, then turns signal on press. Same .28s and the
   same curve — previously these tinted and scaled over .12s, which read as a different kit. */
.quantity-control button{border-radius:11px;transition:color .28s ease,transform .28s var(--ease-out-cubic)}
.quantity-control button:not(:disabled):not([aria-disabled="true"]):hover{color:var(--ink)}
[data-quantity-increase]:not([aria-disabled="true"]):hover,[data-cart-quantity-increase]:not([aria-disabled="true"]):hover{transform:translateY(-3px)}
[data-quantity-decrease]:not(:disabled):hover,[data-cart-quantity-decrease]:not(:disabled):hover{transform:translateY(3px)}
.quantity-control button:not(:disabled):not([aria-disabled="true"]):active{color:var(--signal)}
/* The value itself reacts, so the press is felt where the change actually happens. */
.quantity-control input.is-bumped{animation:quantity-bump .32s var(--ease-out-cubic)}
@keyframes quantity-bump{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}
/* Pressing + at the stock ceiling used to do nothing at all; refuse visibly instead. */
.quantity-control.is-refused{animation:quantity-refuse .34s ease}
@keyframes quantity-refuse{0%,100%{transform:translateX(0)}22%{transform:translateX(4px)}62%{transform:translateX(-4px)}}

/* Must come after the stepper rules above: same specificity, so source order decides. */
@media(prefers-reduced-motion:reduce){
  .quantity-control button{transition:none}
  .quantity-control input.is-bumped,.quantity-control.is-refused{animation:none}
}
/* Up to 900px the header's categories leave the row for a MENU panel under the header, so the header
   stays one line. Only with JavaScript (html.js, set in base.html's head), which opens it; without, the
   second row below stays. Open beats the in-page-nav hiding, so the panel works on home and shop too. */
.site-menu{display:contents}.site-menu__language{display:none}
@media(max-width:900px){
  /* One row: logo, MENU in the middle, the rest on the right. */
  html.js .site-header__inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  html.js .menu-toggle{display:inline-grid;grid-column:2;grid-row:1;justify-self:center}
  html.js .header-meta{grid-column:3}
  /* Where the page shows its own categories (home, shop), MENU waits until they've scrolled away. */
  html.js .site-header--in-page-nav:not(.is-compact-nav-visible) .menu-toggle{visibility:hidden;opacity:0;pointer-events:none}
  html.js .site-menu{position:absolute;top:100%;right:0;left:0;display:none;padding:.25rem var(--page-margin) 1rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
  html.js .site-header.is-menu-open .site-menu{display:block;animation:site-menu-in .2s ease-out}
  html.js .header-categories{display:flex;flex-direction:column;align-items:stretch;justify-self:stretch;width:100%;gap:0;max-width:none;margin:0;overflow:visible;font-size:var(--text-body);letter-spacing:.06em}
  html.js .header-categories>:first-child{margin-left:0}
  html.js .header-categories a{padding:1rem 0;border-bottom:1px solid var(--line)}html.js .header-categories a:last-child{border-bottom:0}
  html.js .header-categories a:hover,html.js .header-categories a:focus-visible{transform:none}
  html.js .site-header.is-menu-open .header-categories{visibility:visible;opacity:1;transform:none;pointer-events:auto}
}
/* Phones: BG / EN moves from the header row into the panel, so logo, cart and MENU fit one line even
   with the longer Bulgarian words. */
@media(max-width:600px){
  /* Halves of a phone are too narrow for the Bulgarian cart label, so MENU centres between the logo
     and the cart instead of on the page. */
  html.js .site-header__inner{grid-template-columns:auto minmax(0,1fr) auto}
  html.js .header-meta .language-switch{display:none}
  html.js .site-menu__language{display:flex;padding-top:1rem;border-top:1px solid var(--line)}
}
@keyframes site-menu-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){html.js .site-header.is-menu-open .site-menu{animation:none}.menu-toggle{transition:none}}
/* Lets the four Bulgarian category names fit a phone instead of scrolling. */
@media(max-width:420px){.header-categories{gap:.7rem;font-size:1rem;letter-spacing:.03em}}