/* Self-hosted fonts (copied from Google Fonts; files in assets/fonts). */
/* Barlow Semi Condensed 500 latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/barlow-semi-condensed-6m_CWslu50.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Semi Condensed 500 latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/barlow-semi-condensed-Rfi6m_B2sl.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;
}
/* Barlow Semi Condensed 600 latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/barlow-semi-condensed-66_CWslu50.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Semi Condensed 600 latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/barlow-semi-condensed-Rfp66_B2sl.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;
}
/* Barlow Semi Condensed 700 latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/barlow-semi-condensed-6-_CWslu50.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Semi Condensed 700 latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/barlow-semi-condensed-Rfw6-_B2sl.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;
}
/* Public Sans 400 latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/public-sans-wnNIfJ7Cww.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Public Sans 400 latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/public-sans-9YVwnNGfJ4.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;
}
/* Public Sans 500 latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/public-sans-wnNIfJ7Cww.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Public Sans 500 latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/public-sans-9YVwnNGfJ4.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;
}
/* Public Sans 600 latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/public-sans-wnNIfJ7Cww.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Public Sans 600 latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/public-sans-9YVwnNGfJ4.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;
}
/* Public Sans 700 latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/public-sans-wnNIfJ7Cww.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Public Sans 700 latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/public-sans-9YVwnNGfJ4.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;
}

/* ===========================================================================
   Made in Latvia — storefront styles

   Ported 1:1 from the design mockups in pages/. Every pixel value, colour and
   hover state below comes from pages/*.html, pages/assets/styles.css or the
   interactive prototype in reference/; nothing here is invented.

   The mockups carried their styling as inline attributes because they were
   static prototypes. Here the same values live in classes so a card, a button
   or a price renders identically on every screen.

   Two typefaces only: Barlow Semi Condensed (display) and Public Sans (body),
   always via --font-display / --font-body so no screen drifts.

   Order: tokens, base, layout, type, buttons, header, footer, components,
   then one screen per block, then responsive.
   =========================================================================== */

:root{
  /* Brand */
  --wine:#7A1E2D;        /* primary burgundy — header, footer, accents, active states */
  --wine2:#9D2335;       /* brighter burgundy — small labels / eyebrows */
  --wine-deep:#5E1621;   /* hover/pressed burgundy */
  --accent:#C1440E;      /* terracotta — PRIMARY ACTIONS ONLY (add to cart, checkout, place order) */
  --accent-deep:#A5380B; /* accent hover */

  /* Neutrals */
  --ink:#241D1D;         /* near-black headings */
  --body:#4A4340;        /* body text */
  --muted:#8A807A;       /* secondary/meta text */
  --line:#ECE6E1;        /* hairline borders / dividers */
  --line2:#DBD2CB;       /* stronger border (inputs, controls) */
  --cream:#FAF7F3;       /* soft section background */
  --warm:#F1ECE6;        /* image placeholder / tint background */
  --artboard:#E7E1DA;    /* page background behind the card */

  /* Type */
  --font-display:'Barlow Semi Condensed', system-ui, sans-serif;
  --font-body:'Public Sans', system-ui, sans-serif;

  /* Radii */
  --r-card:14px;
  --r-media:16px;
  --r-control:10px;
  --r-control-lg:11px;
  --r-pill:999px;

  /* Shadow — soft only; prefer 1px borders over heavy shadows */
  --shadow-card:0 14px 30px -20px rgba(0,0,0,.45);
  --shadow-tile:0 16px 34px -22px rgba(0,0,0,.5);
  --shadow-menu:0 30px 50px -28px rgba(36,20,20,.5);

  --container:1200px;
}

/* ------------------------------------------------------------------- base */

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* The HTML `hidden` attribute must win over any element's own `display` (e.g.
   .builder-row{display:grid}), otherwise JS that toggles `hidden` is silently
   overridden by a class rule. */
[hidden]{display:none !important}

body{
  font-family:var(--font-body);
  color:var(--body);
  /* Full-bleed in production: header, main and footer run edge to edge, so the
     page background is white, not the artboard the mockup card floated on. The
     design handoff explicitly allows dropping the card treatment here. */
  background:#fff;
  -webkit-font-smoothing:antialiased;
  padding:0;
}

img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--wine);text-decoration:none}
a:hover{color:var(--wine-deep)}
::selection{background:var(--wine);color:#fff}
input::placeholder,textarea::placeholder{color:#B4ABA5}

/* Visible focus for keyboard users; mouse users keep the mockup's look. */
:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:var(--wine);padding:12px 18px;border-radius:0 0 var(--r-control) 0;
  font-family:var(--font-display);font-weight:600;
}
.skip-link:focus{left:0}

/* ----------------------------------------------------------------- layout */

/* Full-bleed shell. The card, its max-width cap and its shadow were a mockup
   device; in production the site spans the viewport and only the inner
   containers (.container / .section, max-width 1200px) keep the content
   readable and centered. */
.mil-card{width:100%;background:#fff;overflow:visible}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{width:100%;max-width:var(--container);margin:0 auto;padding:clamp(40px,5vw,64px) 24px}
.section--cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page{width:100%;max-width:var(--container);margin:0 auto;padding:22px 24px clamp(40px,5vw,64px)}
.page--tight{padding-top:26px}

/* Image placeholder box (used where a real image is not available). */
.img-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;font-family:var(--font-body);
  font-size:12px;color:var(--muted);background:var(--warm);
}
.cover{width:100%;height:100%;object-fit:cover;display:block}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen{animation:fadeUp .3s ease both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------------------------- type */

.eyebrow{
  font-family:var(--font-display);font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wine2);
}
.eyebrow--sm{font-size:12px;letter-spacing:.16em}

.h1{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--ink);
}
.h1--hero{font-size:clamp(34px,4.1vw,50px);line-height:1.02;letter-spacing:-.01em}
/* Second line of a two-line heading: the differentiator, in brand burgundy. */
.h1__accent{color:var(--wine)}
.h1--pdp{font-size:clamp(30px,3.6vw,42px);line-height:1.02;margin:8px 0 0}

.h2{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,3vw,34px);line-height:1;color:var(--ink);
}
.h2--story{font-size:clamp(26px,3vw,36px);line-height:1.02}
.h2--related{font-size:clamp(24px,3vw,32px);margin:0 0 22px}

.lede{margin:0;max-width:440px;font-size:16px;line-height:1.65;color:var(--body)}
.body-text{margin:0;font-size:15px;line-height:1.7;color:var(--body);overflow-wrap:break-word;word-break:break-word}
.meta{font-size:13px;color:var(--muted)}
.meta--sm{font-size:12.5px}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:26px;
}

.price{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink)}
.price--lg{font-size:34px}
.price-note{font-size:10.5px;color:var(--muted)}
.price-old{font-family:var(--font-body,inherit);font-weight:400;font-size:.8em;color:var(--muted);text-decoration:line-through;margin-left:6px;white-space:nowrap}
.price-old--lg{font-size:20px;margin-left:0}
.price-old[hidden]{display:none}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;border-radius:var(--r-control);transition:.15s;
}

/* Terracotta is reserved for primary actions: add to cart, checkout, order. */
.btn--accent{background:var(--accent);color:#fff;font-size:15px;padding:15px 28px}
.btn--accent:hover{background:var(--accent-deep);color:#fff}

.btn--outline{background:#fff;border:1.5px solid var(--line2);color:var(--ink);font-size:15px;padding:15px 26px}
.btn--outline:hover{border-color:var(--wine);color:var(--ink)}

.btn--wine{background:#fff;border:1.5px solid var(--wine);color:var(--wine);border-radius:var(--r-control);padding:0 22px}
.btn--wine:hover{background:var(--wine);color:#fff}

.btn--sm{font-size:13.5px;letter-spacing:.04em;padding:12px 22px}
.btn--md{font-size:14px;letter-spacing:.05em;padding:12px 26px}
.btn--block{width:100%}
.btn--lg{font-size:16px;height:52px;padding:0 28px;border-radius:var(--r-control-lg)}
.btn--cart{width:100%;font-size:16px;padding:15px;border-radius:var(--r-control-lg)}
.btn--order{width:100%;font-size:16px;padding:16px;border-radius:var(--r-control-lg)}

.btn-link{
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--wine);
  display:inline-flex;align-items:center;gap:6px;background:none;
}
.btn-link:hover{color:var(--wine-deep)}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* Small square terracotta "+" on product cards. */
.add-btn{
  width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0;
}
.add-btn:hover{background:var(--accent-deep)}

/* 52px square outline button (wishlist on the product page). */
.icon-square{
  width:52px;height:52px;border:1.5px solid var(--line2);border-radius:var(--r-control-lg);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:.15s;flex-shrink:0;background:none;
}
.icon-square:hover{border-color:var(--wine);color:var(--wine)}

/* ----------------------------------------------------------------- header */

.site-header{background:var(--wine);color:#fff}
.header-wrap{position:sticky;top:0;z-index:50}

.header-inner{
  width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:18px;height:74px;
}

.header-logo{flex-shrink:0;display:flex;align-items:center;margin-right:26px}
.header-logo img{height:58px;width:auto;display:block}

.main-nav{
  flex:1 1 0;min-width:0;overflow-x:auto;display:flex;gap:22px;
  align-items:center;white-space:nowrap;scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}

.nav-link{
  font-family:var(--font-display);font-weight:600;font-size:13.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;opacity:.9;
  padding:26px 0;transition:opacity .15s;display:inline-flex;align-items:center;gap:5px;
}
.nav-link:hover,.nav-link:focus-visible{opacity:1;color:#fff}
.nav-link svg{opacity:.65}

.nav-sep{width:1px;height:16px;background:rgba(255,255,255,.28);flex-shrink:0}

/* Admin-built header menu: hover dropdown for items that have children. */
.nav-dd-wrap{position:relative;display:inline-flex;align-items:center}
.nav-dd{
  position:absolute;top:100%;left:0;min-width:210px;background:#fff;
  border-radius:var(--r-control);box-shadow:var(--shadow-menu);padding:8px;z-index:45;
  display:none;animation:fadeUp .16s ease both;
}
.nav-dd-wrap:hover .nav-dd,.nav-dd-wrap:focus-within .nav-dd{display:block}
.nav-dd a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink);white-space:nowrap}
.nav-dd a:hover{background:var(--warm);color:var(--wine)}

.header-actions{flex-shrink:0;display:flex;align-items:center;gap:14px}

.icon-btn{opacity:.9;display:flex;transition:opacity .15s;color:#fff}
.icon-btn:hover,.icon-btn:focus-visible{opacity:1;color:#fff}

.cart-btn{position:relative;opacity:.95}
.cart-count{
  position:absolute;top:-7px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  background:var(--accent);color:#fff;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* Language switcher */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:5px;opacity:.9;font-family:var(--font-display);
  font-weight:600;font-size:12.5px;letter-spacing:.08em;color:#fff;transition:opacity .15s;
}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{opacity:1;color:#fff}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:var(--r-control);
  box-shadow:var(--shadow-menu);padding:6px;min-width:132px;z-index:50;
  display:none;animation:fadeUp .16s ease both;
}
.lang-menu[data-open="true"]{display:block}
.lang-menu[data-open="true"]::before{
  content:"";position:absolute;top:-4px;right:14px;width:9px;height:9px;
  background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 3px -2px rgba(36,20,20,.14);
}
.lang-option{
  display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
  font-size:14px;color:var(--ink);transition:background .12s;
}
.lang-option:hover{background:var(--warm);color:var(--ink)}
.lang-option[aria-current="true"]{color:var(--wine);font-weight:700;background:var(--warm)}

/* Mega menu (nav cluster hover / click) */
.mega{
  position:absolute;left:0;right:0;top:100%;background:#fff;
  box-shadow:var(--shadow-menu);z-index:40;animation:fadeUp .16s ease both;display:none;
}
.mega[data-open="true"]{display:block}
.mega-inner{
  width:100%;max-width:var(--container);margin:0 auto;padding:24px;
  display:flex;gap:28px;align-items:stretch;
}
.mega-col{flex:1;min-width:0}
.mega-title{
  font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wine2);margin-bottom:22px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 10px}

/* Full category directory: roots as headings, children beneath, in columns. */
.mega-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px 24px;align-items:start}
.mega-cat__row{display:flex;align-items:center;gap:6px}
.mega-cat__head{
  display:block;font-family:var(--font-display);font-weight:600;font-size:14.5px;
  letter-spacing:.01em;color:var(--ink);padding:3px 0;
}
.mega-cat__head:hover{color:var(--wine)}
/* Toggle arrow — only categories with children show it. Click reveals the
   subcategories; they stay collapsed by default. */
.mega-cat__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;color:var(--muted);
  transition:background .12s,transform .18s;flex:0 0 auto;
}
.mega-cat__toggle:hover{background:var(--warm);color:var(--wine)}
.mega-cat__toggle svg{transition:transform .18s}
.mega-cat[data-open="true"] .mega-cat__toggle svg{transform:rotate(180deg)}
.mega-cat__children{display:none;flex-direction:column;gap:1px;margin-top:4px;padding-left:2px}
.mega-cat[data-open="true"] .mega-cat__children{display:flex}
.mega-cat__children a{font-size:13px;color:var(--body);padding:2px 0;line-height:1.3}
.mega-cat__children a:hover{color:var(--wine)}
.mega-item{
  text-align:left;display:flex;align-items:center;gap:11px;padding:11px 12px;
  border-radius:var(--r-control);transition:background .12s;color:var(--ink);
}
.mega-item:hover{background:var(--warm);color:var(--ink)}
.mega-dot{width:6px;height:6px;border-radius:50%;background:var(--wine2);flex-shrink:0}
.mega-name{font-size:14.5px;color:var(--ink);font-weight:500}
.mega-feature{
  flex:0 0 260px;position:relative;border-radius:var(--r-card);overflow:hidden;
  min-height:190px;background:var(--warm);transition:opacity .15s;
}
.mega-feature:hover{opacity:.95}
.mega-feature-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,20,20,0) 38%,rgba(36,20,20,.8));
  pointer-events:none;
}
.mega-feature-label{position:absolute;left:16px;right:16px;bottom:15px;text-align:left}
.mega-feature-title{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff}
.mega-feature-sub{display:block;font-size:12.5px;color:rgba(255,255,255,.9);margin-top:3px}

/* Search bar: drops out of the header when the search icon is pressed.
   No mockup for it; built from the design's own field and button styles. */
.search-bar{background:#fff;border-bottom:1px solid var(--line)}
.search-bar__form{
  width:100%;max-width:var(--container);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:10px;position:relative;
}
.search-suggest{
  position:absolute;top:calc(100% - 4px);left:24px;right:24px;background:#fff;
  border-radius:var(--r-control);box-shadow:var(--shadow-menu);padding:6px;z-index:60;
  max-height:min(64vh,440px);overflow-y:auto;animation:fadeUp .14s ease both;
}
.search-suggest__item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;color:var(--ink)}
.search-suggest__item:hover{background:var(--warm);color:var(--ink)}
.search-suggest__item img,.search-suggest__ph{width:40px;height:48px;object-fit:cover;border-radius:6px;background:var(--warm);flex-shrink:0}
.search-suggest__name{flex:1 1 0;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-suggest__price{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);flex-shrink:0}
@media(max-width:640px){.search-suggest{left:16px;right:16px}}
.search-bar__input{
  flex:1 1 0;min-width:0;border:1px solid var(--line2);border-radius:var(--r-control);
  padding:12px 14px;font-size:14px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s;
}
.search-bar__input:focus{border-color:var(--wine)}

/* ----------------------------------------------- mini cart / wishlist panels */

.mini-wrap{position:relative}
.mini-panel{
  position:absolute;top:calc(100% + 14px);right:-4px;width:340px;max-width:calc(100vw - 24px);
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-menu);
  z-index:50;color:var(--ink);overflow:hidden;opacity:0;transform:scale(.96);transform-origin:top right;
  transition:opacity .15s ease,transform .15s ease;pointer-events:none;
}
.mini-panel[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.mini__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.mini__title{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.mini__count{font-size:12px;color:var(--muted)}
.mini__empty{padding:24px 16px;text-align:center;font-size:14px;color:var(--muted)}
.mini__list{max-height:min(50vh,360px);overflow-y:auto}
.mini-row{display:flex;gap:11px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)}
.mini-row:last-child{border-bottom:none}
.mini-row__thumb{width:48px;height:56px;border-radius:8px;overflow:hidden;background:var(--warm);flex-shrink:0}
.mini-row__info{flex:1 1 0;min-width:0}
.mini-row__name{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-row__variant{font-size:12px;color:var(--muted);margin-top:1px}
.mini-row__meta{font-size:12px;color:var(--muted);margin-top:2px}
.mini-row__end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.mini-row__price{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)}
.mini-row__remove{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--muted);background:var(--cream)}
.mini-row__remove:hover{background:var(--wine);color:#fff}
.mini__foot{padding:14px 16px;border-top:1px solid var(--line)}
.mini__subtotal{display:flex;justify-content:space-between;font-size:14px;color:var(--body);margin-bottom:10px}
.mini__subtotal strong{font-family:var(--font-display);font-size:16px;color:var(--ink)}
.mini__actions{display:flex;flex-direction:column;gap:8px}

/* Pointer caret centred under the open icon. */
.mini-wrap:has(.mini-panel[data-open="true"])::after{
  content:"";position:absolute;top:calc(100% + 11px);right:6px;width:9px;height:9px;
  background:#fff;transform:rotate(45deg);z-index:52;box-shadow:-2px -2px 3px -2px rgba(36,20,20,.14);
}

@media(max-width:640px){
  /* Compact right-anchored dropdown (not full-width), like a typical shop.
     Capped to the viewport as a flex column so the item list scrolls and the
     footer (subtotal + buttons) stays visible even with many products. */
  .mini-panel{
    position:fixed;top:62px;right:8px;left:auto;
    width:min(340px, calc(100vw - 16px));max-width:none;border-radius:var(--r-card);
    max-height:calc(100vh - 74px);
  }
  /* Flex column only while open, so the closed (hidden) state is untouched. */
  .mini-panel[data-open="true"]{display:flex;flex-direction:column}
  .mini__head,.mini__foot{flex:0 0 auto}
  .mini__list{max-height:none;flex:1 1 auto;min-height:0}
  /* Caret drops to the panel's top edge; it stays under its own icon, so cart
     and wishlist each point at the right trigger. */
  .mini-wrap:has(.mini-panel[data-open="true"])::after{
    top:calc(100% + 15px);right:7px;
  }
}

/* --------------------------------------------------- mobile menu / drawer */

/* Hamburger: hidden on desktop, revealed under the nav breakpoint. */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;flex-shrink:0;margin-left:-8px;
}
.hamburger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s;margin:0 auto}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer-overlay{
  position:fixed;inset:0;background:rgba(36,20,20,.5);z-index:60;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.drawer-overlay[data-open="true"]{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(84vw,340px);background:#fff;z-index:70;
  transform:translateX(-100%);transition:transform .24s ease;
  display:flex;flex-direction:column;overflow-y:auto;box-shadow:var(--shadow-menu);
}
.drawer[data-open="true"]{transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
  position:sticky;top:0;background:#fff;z-index:1;
}
.drawer__title{
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wine);
}
.drawer__close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--ink)}
.drawer__close:hover{background:var(--warm)}
.drawer__nav{display:flex;flex-direction:column;padding:0 0 28px}
.drawer__link,.drawer__acc{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  padding:13px 20px;font-family:var(--font-display);font-weight:600;font-size:15px;
  color:var(--ink);letter-spacing:.02em;
}
.drawer__link--top{color:var(--wine);text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.drawer__link:hover,.drawer__acc:hover{background:var(--warm);color:var(--ink)}
.drawer__acc svg{transition:transform .2s;flex-shrink:0}
.drawer__acc[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer__sub{display:flex;flex-direction:column;background:var(--cream);padding:4px 0}
.drawer__sublink{padding:10px 20px 10px 34px;font-size:14px;color:var(--body)}
.drawer__sublink:hover{color:var(--wine);background:var(--warm)}
.drawer__divider{height:1px;background:var(--line);margin:8px 0}
.drawer__langs{display:flex;gap:8px;padding:0}
.drawer__lang{
  min-width:44px;padding:8px 0;text-align:center;border:1px solid var(--line2);border-radius:9px;
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);
}
.drawer__lang.is-current{background:var(--wine);color:#fff;border-color:var(--wine)}
body.drawer-open{overflow:hidden}

/* ------------------------------------------------------------ static page */

.prose{max-width:100%}
.prose__body{font-size:15px;line-height:1.75;color:var(--body);overflow-wrap:break-word;word-break:break-word}
/* Migrated WooCommerce descriptions can carry tables/images with fixed widths;
   keep them inside the column so the page never scrolls sideways on mobile. */
.prose__body img{max-width:100%;height:auto}
.prose__body table{
  display:block;width:fit-content;max-width:100%;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-control);
  border-collapse:separate;border-spacing:0;
  margin:0 0 20px;font-size:14px;line-height:1.55;background:#fff;
}
.prose__body td,.prose__body th{
  padding:11px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);word-break:break-word;
}
.prose__body th{background:var(--cream);color:var(--ink);font-weight:600}
/* Spec-style tables: first cell reads as the label. */
.prose__body td:first-child{color:var(--ink);font-weight:600}
.prose__body td:last-child{color:var(--body)}
.prose__body tr:last-child td{border-bottom:0}
.prose__body p{margin:0 0 16px}
.prose__body h2{
  font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ink);
  margin:28px 0 12px;
}
.prose__body h3{
  font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);
  margin:22px 0 10px;
}
.prose__body ul,.prose__body ol{margin:0 0 16px;padding-left:24px}
.prose__body ul{list-style:disc}
.prose__body ol{list-style:decimal}
.prose__body li{margin:0 0 6px}
.prose__body li:last-child{margin-bottom:0}
.prose__body li>ul,.prose__body li>ol{margin:6px 0 0}
.prose__body strong{color:var(--ink)}
.prose__body a{text-decoration:underline}

/* ----------------------------------------------------------------- footer */

.site-footer{position:relative;background:linear-gradient(180deg,var(--wine) 0%,var(--wine-deep,#5a1420) 100%);color:#fff}
.site-footer::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--accent,#c98a3a) 0%,rgba(201,138,58,.35) 45%,transparent 75%)}
.footer-inner{
  width:100%;max-width:var(--container);margin:0 auto;
  padding:clamp(44px,5vw,64px) 24px clamp(30px,3vw,40px);
  display:flex;flex-wrap:wrap;gap:40px 48px;
}
.footer-brand{flex:1 1 300px;min-width:240px;max-width:340px;display:flex;flex-direction:column;gap:18px}
.footer-brand img{height:50px;width:auto;align-self:flex-start;flex-shrink:0}
.footer-blurb{margin:0;max-width:300px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.72)}

.footer-social{display:flex;gap:10px;margin-top:2px}
.footer-social a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .18s,border-color .18s,transform .18s;
}
.footer-social a:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.footer-social a.social--ig:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b 50%,#6228d7);border-color:transparent;box-shadow:0 6px 16px rgba(238,42,123,.35)}
.footer-social a.social--fb:hover{background:#1877f2;border-color:transparent;box-shadow:0 6px 16px rgba(24,119,242,.35)}

.footer-col{flex:1 1 160px;min-width:150px}
.footer-col--pay{flex:1 1 200px;min-width:180px}
.footer-head{
  position:relative;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;padding-bottom:11px;
}
.footer-head::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--accent,#c98a3a);border-radius:2px}
.footer-head a{color:inherit;transition:color .15s}
.footer-head a:hover{color:var(--accent,#c98a3a)}
.footer-links{display:flex;flex-direction:column;gap:11px;font-size:14px}
.footer-links a{color:rgba(255,255,255,.76);transition:color .15s,transform .15s;width:fit-content}
.footer-links a:hover{color:#fff;transform:translateX(3px)}
.footer-col--contact{flex:1 1 210px;min-width:190px}
.footer-contact{display:flex;flex-direction:column;gap:12px;font-size:14px}
.footer-contact a,.footer-contact__addr{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.76);line-height:1.45}
.footer-contact a{transition:color .15s}
.footer-contact a:hover{color:#fff}
.footer-contact svg{flex:none;margin-top:2px;opacity:.8}

.footer-bottom{
  width:100%;max-width:var(--container);margin:0 auto;padding:20px 24px;
  border-top:1px solid rgba(255,255,255,.13);display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;align-items:center;
}
.footer-bottom span{font-size:12.5px;color:rgba(255,255,255,.58);letter-spacing:.01em}

/* Payment marks. Rendered as text + shapes, exactly like the mockups;
   swap for official brand SVGs when licensing is sorted. */
.pay-marks{display:flex;flex-wrap:wrap;gap:8px}
.mark{display:inline-flex;align-items:center;height:30px;border-radius:6px}
.mark--visa{padding:0 11px;background:#fff;font-family:Arial,Helvetica,sans-serif;font-style:italic;font-weight:800;font-size:14px;letter-spacing:.02em;color:#1A1F71}
.mark--paypal{padding:0 10px;background:#fff;font-family:Arial,Helvetica,sans-serif;font-style:italic;font-weight:800;font-size:13.5px;letter-spacing:-.01em}
.mark--paypal .pp1{color:#003087}
.mark--paypal .pp2{color:#009cde}
.pay-marks--sm .mark--paypal{padding:0 8px;font-size:12px}
.mark--mc{padding:0 10px;background:#fff}
.mark--img{padding:0 10px;background:#fff}
.mark--img img{display:block;height:16px;width:auto}
.mark--img img[alt="Mastercard"]{height:22px}
.pay-marks--sm .mark--img{padding:0 8px}
.pay-marks--sm .mark--img img{height:13px}
.pay-marks--sm .mark--img img[alt="Mastercard"]{height:18px}
.mark--mc i{width:16px;height:16px;border-radius:50%;background:#EB001B;display:block}
.mark--mc i+i{background:#F79E1B;margin-left:-7px;mix-blend-mode:multiply}
.mark--apple{gap:3px;padding:0 11px;background:#000;border-radius:6px;color:#fff;font-size:13px;font-weight:600}
.mark--gpay{gap:4px;padding:0 11px;background:#fff;font-size:13px;font-weight:600;color:#3C4043}
.mark__logo{width:15px;height:16px;display:block}
.mark--gpay .mark__logo{width:16px;height:16px}
.pay-marks--sm .mark__logo{width:13px;height:14px}

/* Smaller "Pieņemam:" strip on checkout: bordered, 26px tall. */
.pay-marks--sm .mark{height:26px;border:1px solid var(--line2)}
.pay-marks--sm .mark--visa{padding:0 9px;font-size:12px}
.pay-marks--sm .mark--mc{padding:0 8px}
.pay-marks--sm .mark--mc i{width:14px;height:14px}
.pay-marks--sm .mark--mc i+i{margin-left:-6px}
.pay-marks--sm .mark--apple{padding:0 10px;font-size:12px}
.pay-marks--sm .mark--gpay{padding:0 10px;font-size:12px}
.pay-accept{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.pay-accept-label{font-size:11.5px;color:var(--muted);margin-right:4px}

/* ----------------------------------------------------------- breadcrumbs */

.breadcrumbs{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  margin-bottom:16px;flex-wrap:wrap;
}
.breadcrumbs a,.breadcrumbs button{color:var(--muted);transition:color .15s;background:none}
.breadcrumbs a:hover,.breadcrumbs button:hover{color:var(--wine)}
.breadcrumbs .current{color:var(--ink);font-weight:600}
.breadcrumbs--pdp{margin-bottom:20px}

/* --------------------------------------------------------- product card */

.product-card{
  cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s;color:inherit;
}
.product-card:hover{
  border-color:var(--line2);
  box-shadow:var(--shadow-card);
  transform:translateY(-3px);
  color:inherit;
}
.product-card__media{position:relative;width:100%;aspect-ratio:1/1;background:#fff}
/* Products are shot on white with varied ratios — show the whole item, no side crop. */
.product-card__media .cover{object-fit:contain;padding:10px}
.product-card__body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:10px;flex:1 1 0}
.product-card__name{font-size:14px;line-height:1.42;color:var(--ink);min-height:40px}
.product-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.product-card__price{display:flex;flex-direction:column}

/* Related-products card: no add button, tighter gap. */
.product-card--related .product-card__body{gap:8px}

.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.grid-products{grid-template-columns:repeat(3,1fr)}}

/* -------------------------------------------------------- category tiles */

.grid-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.grid-tiles{grid-template-columns:repeat(3,1fr)}}
.cat-tile{
  text-align:left;position:relative;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:var(--warm);aspect-ratio:1/1;transition:.18s;display:block;
}
.cat-tile .cover{width:100%;height:100%;object-fit:cover;object-position:center}
.cat-tile:hover{box-shadow:var(--shadow-tile);transform:translateY(-3px)}
.cat-tile__scrim{
  position:absolute;inset:0;
  background:linear-gradient(transparent 45%,rgba(36,20,20,.72));pointer-events:none;
}
.cat-tile__label{position:absolute;left:0;right:0;bottom:0;padding:16px;pointer-events:none}
.cat-tile__name{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:.02em;color:#fff;line-height:1.05;
}
.cat-tile__sub{font-size:12px;color:rgba(255,255,255,.82);margin-top:3px}

/* ============================== SCREEN 1 · HOMEPAGE ====================== */

/* Full-bleed cream band, but the content (copy + image) is held to the same
   container width as the rest of the page so the image no longer bleeds off
   the right edge. Rounded so it reads as a contained hero, not an edge banner. */
.hero{
  background:var(--cream);border-bottom:1px solid var(--line);
}
.hero__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:stretch;
}
.hero__copy{
  flex:1.25 1 560px;min-width:300px;
  padding:clamp(40px,5vw,64px) clamp(24px,3vw,48px);
  display:flex;flex-direction:column;justify-content:center;gap:22px;
}
/* Keep the hero copy readable and left-anchored on wide, full-bleed screens
   instead of stranding it in the middle of a huge column. */
.hero__copy > *{max-width:520px}
/* The headline gets more room than the body copy: at 520px the first line
   of the two-line H1 broke mid-phrase. Balanced wrapping keeps the two
   lines even where the browser supports it. */
.hero__copy .h1--hero{max-width:720px;text-wrap:balance}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* The media is a cover-cropped band. The image is absolutely positioned so it
   fills the flex-stretched column height reliably (a plain height:100% does not
   resolve against a flex-stretched parent, which is why it used to blow up to
   its natural size). min-height gives it presence; max-height caps it on tall
   viewports so it never dominates the fold. */
.hero__media{
  flex:1 1 380px;min-width:300px;position:relative;overflow:hidden;
  min-height:clamp(340px,34vw,500px);
}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}

/* Two alternative hero treatments, switched by a modifier on .hero. The plain
   band above butts the photo against the copy on a hard vertical line and
   crops a wide image to a much narrower box; these two soften that. */

/* "fade": still full-bleed, but the photo keeps its own aspect ratio and
   dissolves into the cream on every side. Cover-cropping a 1.83:1 photo into
   this ~1.2:1 column threw away a third of its width, which is what cut the
   right-hand edge off; height:auto shows the frame whole instead, and the
   feather is what removes the hard seam against the copy.

   The horizontal feather sits on the column and the vertical one on the image
   so each element carries a single mask; mask-composite is not reliable
   enough across browsers to put both on one element. */
.hero--fade .hero__media{
  display:flex;align-items:center;
  min-height:clamp(280px,26vw,420px);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 96%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 96%,transparent 100%);
}
.hero--fade .hero__media img{
  position:static;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
}

/* "card": the photo becomes a rounded card inset in the cream band. height:auto
   lets it keep its own aspect ratio, so a wide photo is shown whole instead of
   being cropped to the column, and the cream margin around it is what removes
   the hard seam. max-height is only a guard so a tall or square image cannot
   push the fold down; that is the one case where it still crops. */
.hero--card .hero__media{
  display:flex;align-items:center;
  padding:clamp(20px,2.6vw,36px) clamp(20px,2.6vw,40px) clamp(20px,2.6vw,36px) 0;
  min-height:clamp(300px,30vw,460px);
}
.hero--card .hero__media img{
  position:static;width:100%;height:auto;
  max-height:clamp(320px,34vw,520px);object-fit:cover;
  border-radius:var(--r-media);box-shadow:var(--shadow-card);
}

.trust-strip{border-bottom:1px solid var(--line)}
.trust-strip__inner{
  width:100%;max-width:var(--container);margin:0 auto;padding:22px 24px;
  display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;
}
.trust-item{display:flex;align-items:center;gap:12px;flex:1 1 200px}
.trust-item__title{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.trust-item__sub{font-size:12.5px;color:var(--muted)}

.story{
  width:100%;max-width:var(--container);margin:0 auto;
  padding:clamp(40px,5vw,72px) 24px;display:flex;flex-wrap:wrap;
  gap:clamp(24px,4vw,56px);align-items:center;
}
.story__media{
  flex:1 1 320px;min-width:280px;position:relative;aspect-ratio:5/4;
  border-radius:var(--r-media);overflow:hidden;background:var(--warm);
}
.story__copy{flex:1 1 320px;min-width:280px;display:flex;flex-direction:column;gap:18px}
.story__text{margin:0;font-size:16px;line-height:1.7;color:var(--body)}
.stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:4px}
.stat__value{font-family:var(--font-display);font-weight:700;font-size:32px;color:var(--wine)}
.stat__label{font-size:13px;color:var(--muted)}

/* ========================= SCREEN 2 · CATEGORY LISTING ================== */

.catalog-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:22px;
}
.catalog-head__sub{margin:8px 0 0;font-size:14px;color:var(--muted)}
.catalog-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.sort-field{
  display:flex;align-items:center;gap:8px;background:#fff;position:relative;
  border:1px solid var(--line2);border-radius:var(--r-control);padding:9px 12px;
}
.sort-field__label{font-size:12.5px;color:var(--muted);flex:0 0 auto}
.sort-field select{
  border:none;background:none;font-family:var(--font-display);font-weight:600;
  font-size:13.5px;color:var(--ink);outline:none;cursor:pointer;
}

/* Custom sort dropdown (JS-enhanced; native select is the no-JS fallback). */
.cselect__btn{
  display:flex;align-items:center;gap:8px;background:none;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink);
}
.cselect__btn svg{color:var(--muted);transition:transform .18s;flex:0 0 auto}
.sort-field[data-open="true"] .cselect__btn svg{transform:rotate(180deg)}
.cselect__menu{
  position:absolute;top:calc(100% + 11px);right:0;left:auto;min-width:190px;max-width:calc(100vw - 32px);background:#fff;
  border-radius:var(--r-control);box-shadow:var(--shadow-menu);padding:6px;z-index:50;
  display:none;animation:fadeUp .16s ease both;
}
.sort-field[data-open="true"] .cselect__menu{display:block}
.cselect__menu::before{
  content:"";position:absolute;top:-4px;right:18px;left:auto;width:9px;height:9px;background:#fff;
  transform:rotate(45deg);box-shadow:-2px -2px 3px -2px rgba(36,20,20,.14);
}
.cselect__opt{
  display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
  font-size:14px;color:var(--ink);cursor:pointer;background:none;white-space:nowrap;transition:background .12s;
}
.cselect__opt:hover{background:var(--warm)}
.cselect__opt[aria-selected="true"]{color:var(--wine);font-weight:700;background:var(--warm)}

.catalog-body{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.sidebar{flex:1 1 220px;max-width:250px;min-width:200px;position:sticky;top:16px}
.catalog-main{flex:3 1 480px;min-width:280px}

.filter-card{border:1px solid var(--line);border-radius:var(--r-card);padding:18px;background:#fff}
.filter-card--tree{padding:18px 18px 8px}
.filter-card + .filter-card{margin-top:16px}
.filter-head{
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.filter-head--price{margin-bottom:14px}
.filter-sub{
  font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:20px;margin-bottom:10px;
}

.tree-group{position:relative;margin-bottom:6px}
.tree-parent{
  font-family:var(--font-display);font-weight:600;font-size:13.5px;
  letter-spacing:.02em;color:var(--ink);padding:6px 30px 6px 0;display:block;
}
/* Chevron toggle: expands the subcategories in place without navigating. */
.tree-toggle{
  position:absolute;top:2px;right:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--muted);border-radius:6px;
}
.tree-toggle:hover{color:var(--wine);background:var(--warm)}
.tree-toggle svg{transition:transform .18s}
.tree-group.is-open > .tree-toggle svg{transform:rotate(180deg)}
.tree-children{
  display:none;flex-direction:column;padding-left:2px;
  border-left:1px solid var(--line);margin-left:2px;
}
.tree-group.is-open > .tree-children{display:flex}
.tree-link{
  text-align:left;padding:7px 12px;border-radius:8px;font-size:14px;
  color:var(--body);font-weight:400;transition:background .12s;display:block;
}
.tree-link:hover{background:var(--warm);color:var(--body)}
.tree-link.is-active{color:var(--wine);font-weight:700;background:var(--warm)}
.tree-parent.is-active{color:var(--wine);font-weight:700}
/* Highlight the active top-level category like the selected sort option. */
.tree-group > .tree-parent.is-active{
  background:var(--warm);border-radius:8px;
  padding-left:10px;padding-right:10px;margin-left:-10px;
}
.tree-all{padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.tree-all.is-active{color:var(--wine)}

/* Price range: burgundy fill between two white knobs. */
.price-range{position:relative;height:4px;background:var(--line);border-radius:var(--r-pill);margin:18px 8px 12px;touch-action:none}
.price-range__fill{position:absolute;top:0;bottom:0;background:var(--wine);border-radius:var(--r-pill)}
.price-range__knob{
  position:absolute;top:50%;width:16px;height:16px;background:#fff;
  border:2px solid var(--wine);border-radius:50%;transform:translate(-50%,-50%);
  cursor:grab;touch-action:none;box-shadow:0 1px 4px -1px rgba(0,0,0,.4);
}
.price-range__knob:hover{background:var(--wine)}
.price-range__knob:active{cursor:grabbing}
.price-range__knob:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.price-range__labels{display:flex;justify-content:space-between;font-size:13px;color:var(--body);margin-top:6px}
.price-inputs{display:flex;gap:8px;margin-top:12px}
.price-inputs input{
  width:100%;border:1px solid var(--line2);border-radius:8px;padding:8px 10px;
  font-size:13px;background:#fff;outline:none;
}
.price-inputs input:focus{border-color:var(--wine)}

.check-row{
  display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;
  font-size:14px;color:var(--body);
}
.check-box{
  width:16px;height:16px;border:1.5px solid var(--line2);border-radius:5px;
  display:inline-block;flex-shrink:0;position:relative;background:#fff;transition:.12s;
}
.check-row input{position:absolute;opacity:0;width:0;height:0}
.check-row input:checked + .check-box{background:var(--wine);border-color:var(--wine)}
.check-row input:checked + .check-box::after{
  content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check-row input:focus-visible + .check-box{outline:2px solid var(--wine);outline-offset:2px}

.load-more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:36px}
.load-more__count{font-size:13px;color:var(--muted)}
.load-more__track{width:120px;height:4px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.load-more__bar{height:100%;background:var(--wine2);transition:width .3s ease}
.load-more .btn{margin-top:6px}

.empty-state{
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--cream);
  padding:48px 24px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px;
}

/* ========================== SCREEN 3 · PRODUCT DETAIL =================== */

.pdp{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);align-items:flex-start}
.pdp__gallery{flex:1 1 380px;min-width:300px;position:sticky;top:16px}
.pdp__info{flex:1 1 340px;min-width:300px;display:flex;flex-direction:column;gap:18px}

.gallery-main{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r-media);
  overflow:hidden;background:#fff;border:1px solid var(--line);
}
.gallery-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .35s}
.gallery-main:hover img{transform:scale(1.04)}
/* Click opens the zoom lightbox. pointer first = fallback where zoom-in is unknown. */
.gallery-main.is-zoomable,.gallery-main.is-zoomable img{cursor:pointer;cursor:zoom-in}
.gallery-pill{
  position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);border-radius:var(--r-pill);padding:6px 12px;
  font-family:var(--font-display);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wine);
}
.gallery-zoom{
  position:absolute;bottom:14px;right:14px;width:38px;height:38px;
  background:rgba(255,255,255,.92);border-radius:var(--r-control);
  display:flex;align-items:center;justify-content:center;
}
.gallery-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:10px;margin-top:12px}
.gallery-thumb{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r-control);
  overflow:hidden;background:var(--warm);transition:box-shadow .15s;
  box-shadow:0 0 0 1px var(--line);
}
.gallery-thumb.is-active{box-shadow:0 0 0 2px var(--wine)}
.gallery-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;background:#fff}

/* Slider arrows on the main image (shown when there is more than one photo). */
/* Double-tapping a control on mobile must not trigger the browser's zoom. */
.gallery-arrow,.stepper__btn,.add-btn,.swatch,.icon-btn,.btn,.mini-row__remove,
.filter-toggle,.cselect__btn,.cselect__opt,.pay-row,.tab{touch-action:manipulation}

.gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  box-shadow:0 3px 12px -4px rgba(0,0,0,.5);opacity:.9;transition:opacity .15s,background .15s;
}
.gallery-arrow:hover{opacity:1;background:#fff;color:var(--wine)}
.gallery-arrow--prev{left:12px}
.gallery-arrow--next{right:12px}
.gallery-arrow--prev svg{transform:rotate(90deg)}
.gallery-arrow--next svg{transform:rotate(-90deg)}

/* Zoom lightbox: fullscreen image viewer. */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(20,12,12,.94);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeUp .18s ease both;
}
.lightbox__img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 24px 70px -24px #000}
.lightbox__close,.lightbox__arrow{
  position:absolute;color:#fff;background:rgba(255,255,255,.14);border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s;
}
.lightbox__close:hover,.lightbox__arrow:hover{background:rgba(255,255,255,.26);color:#fff}
.lightbox__close{top:16px;right:18px;width:44px;height:44px;font-size:26px}
.lightbox__arrow{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:32px}
.lightbox__arrow--prev{left:14px}
.lightbox__arrow--next{right:14px}
@media(max-width:640px){
  .lightbox__arrow{width:44px;height:44px;font-size:26px}
  .lightbox__arrow--prev{left:8px}
  .lightbox__arrow--next{right:8px}
}

.pdp-price{display:flex;align-items:baseline;gap:10px}
.pdp-price__note{font-size:13px;color:var(--muted)}
.pdp-stock{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;font-weight:600}
.pdp-stock__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pdp-stock--in{color:#1F7A46}
.pdp-stock--in .pdp-stock__dot{background:#28A55F;box-shadow:0 0 0 3px rgba(40,165,95,.16)}
.pdp-stock--out{color:#B23A2E}
.pdp-stock--out .pdp-stock__dot{background:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.pdp-shipping{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--body)}
/* The one delivery notice of a product card (partials/delivery-note). */
.pdp-delivery{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--cream);
}
.pdp-delivery svg{flex:0 0 auto}
.pdp-delivery__text{min-width:0}
.pdp-delivery__title{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink)}
.pdp-delivery__title p,.pdp-delivery__sub p{margin:0}
.pdp-delivery__sub{font-size:12px;color:var(--muted);margin-top:2px}
.pdp-producer{margin-top:8px;font-size:13.5px;color:var(--body);display:flex;align-items:center;gap:10px}
.pdp-producer__logo{height:34px;width:auto;max-width:90px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:#fff;padding:3px}
.pdp-bullets{
  margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;
  font-size:14px;color:var(--body);
}

.variants{border-top:1px solid var(--line);padding-top:18px}

/* Free-choice options (e.g. a scent per candle): same pill language as variants. */
.variants--option{border-top:none;padding-top:0;margin-top:14px}
.variants--option + .variants--option{margin-top:14px}
.opt-pill{cursor:pointer;padding:0}
.opt-pill input{position:absolute;opacity:0;width:0;height:0}
.opt-pill span{display:inline-block;border-radius:var(--r-control);padding:8px 14px;font-size:13.5px;
  color:var(--ink);box-shadow:0 0 0 1px var(--line2);transition:box-shadow .12s,background .12s,color .12s}
.opt-pill:hover span{box-shadow:0 0 0 1px var(--ink)}
.opt-pill input:checked + span{background:var(--wine);color:#fff;box-shadow:0 0 0 2px var(--wine)}
.opt-pill input:focus-visible + span{box-shadow:0 0 0 2px var(--ink)}
.variants__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.variants__label{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.variants__value{color:var(--wine2)}
.variants__list{display:flex;gap:12px;flex-wrap:wrap}
/* Variants as pills, the same look as the option pills (.opt-pill span). */
.var-pill{
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-control);padding:8px 14px;
  font:inherit;font-size:13.5px;color:var(--ink);background:none;border:0;cursor:pointer;
  box-shadow:0 0 0 1px var(--line2);transition:box-shadow .12s,background .12s,color .12s;
}
.var-pill:hover{box-shadow:0 0 0 1px var(--ink)}
.var-pill.is-active{background:var(--wine);color:#fff;box-shadow:0 0 0 2px var(--wine)}
.var-pill:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink)}
.var-pill__dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.var-pill.is-active .var-pill__dot{box-shadow:0 0 0 1.5px #fff}
.var-pill.is-unavailable{opacity:.45;position:relative}
.var-pill.is-unavailable::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:currentColor;transform:rotate(-12deg)}
.swatch{padding:3px;border-radius:50%;transition:box-shadow .12s;box-shadow:0 0 0 1px var(--line2);background:none}
.swatch.is-active{box-shadow:0 0 0 2px var(--ink)}
.swatch__chip{
  width:26px;height:26px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
/* Variant without a colour: render the name as a pill instead of a chip. */
.swatch--text{
  border-radius:var(--r-control);padding:8px 14px;font-size:13.5px;color:var(--ink);
  box-shadow:0 0 0 1px var(--line2);
}
.swatch--text.is-active{box-shadow:0 0 0 2px var(--ink)}

.buy-row{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-top:18px}
.variants + .buy-row{margin-top:18px}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line2);border-radius:var(--r-control-lg);overflow:hidden}
.stepper__btn{
  width:46px;height:52px;font-size:20px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:background .12s;
}
.stepper__btn:hover{background:var(--warm)}
.stepper__value{
  width:44px;text-align:center;font-family:var(--font-display);
  font-weight:700;font-size:18px;color:var(--ink);border:none;background:none;
  -moz-appearance:textfield;
}
.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-row .btn--lg{flex:1 1 0;min-width:200px}

.pdp-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:8px}
.pdp-trust__card{
  border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--cream);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pdp-trust__card svg{flex:0 0 auto}
.pdp-trust__text{min-width:0}
.pdp-trust__title{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink)}
.pdp-trust__sub{font-size:12px;color:var(--muted);margin-top:2px}

.tabs{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line);padding-top:8px}
.tabs__nav{display:flex;gap:28px;border-bottom:1px solid var(--line)}
.tab{
  padding:14px 2px;font-family:var(--font-display);font-weight:600;font-size:15px;
  letter-spacing:.03em;color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .15s;background:none;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--wine)}
.tab-panel{padding:26px 0;max-width:760px}
.tab-panel[hidden]{display:none}
.tab-panel p{margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--body)}

.spec-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px;
}
.spec-row__value{overflow-wrap:break-word;min-width:0}
.spec-row{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.spec-row:nth-last-child(-n+2){border-bottom:none}
.spec-row__label{font-size:13px;color:var(--muted)}
.spec-row__value{font-size:13.5px;font-weight:600;color:var(--ink);text-align:right}

.reviews-empty{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* stars */
.stars{display:inline-flex;gap:2px;line-height:1;font-size:16px;letter-spacing:1px}
.stars__star{color:var(--line2)}
.stars__star.is-on{color:#E0A500}

/* reviews */
.reviews-summary{display:flex;align-items:center;gap:18px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.reviews-summary__score{font-family:var(--font-display,inherit);font-size:44px;font-weight:700;color:var(--wine);line-height:1}
.reviews-summary__count{margin-top:6px;font-size:13px;color:var(--muted)}
/* Write-a-review block. */
.review-write{margin-bottom:22px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--cream)}
.review-write__title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:12px}
.review-write__msg{margin:0;font-size:14px;color:var(--body)}
.review-write__msg a{color:var(--wine);font-weight:600;text-decoration:underline}
.review-write__hint{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.review-form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.review-verified{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#1F7A46;margin-left:8px}

.review-list{display:flex;flex-direction:column;gap:20px}
.review-card{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff}
.review-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.review-card__author{font-weight:700;color:var(--ink)}
.review-card__date{font-size:12.5px;color:var(--muted);white-space:nowrap}
.review-card__title{margin:8px 0 4px;font-weight:600;color:var(--ink)}
.review-card__body{margin-top:6px}
.review-card__body p{margin:0 0 6px}

.related{margin-top:clamp(24px,4vw,40px)}

/* --------------------------------------------------- composite builder */

.builder{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line);padding-top:24px}
.builder-select{margin-bottom:20px}
.builder-rows{display:flex;flex-direction:column}
.builder-row{
  display:grid;grid-template-columns:72px 1fr auto 128px;gap:16px;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--line);
}
.builder-row__media{
  width:72px;height:86px;border-radius:10px;overflow:hidden;background:var(--warm);flex-shrink:0;
}
.builder-row__name{font-size:14.5px;color:var(--ink);line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.builder-row__name .select{width:auto;max-width:240px}
.builder-row__name a{color:var(--ink)}
.builder-row__name a:hover{color:var(--wine)}
.builder-row__price{text-align:right;white-space:nowrap}
.builder-row__price .price-note{display:block}
.builder-row__qty{display:flex;justify-content:flex-end}
.builder-empty{padding:36px 8px;text-align:center;color:var(--muted);font-size:14px}

.builder-foot{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-top:22px;padding:18px 20px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
  position:sticky;bottom:12px;
}
.builder-total{display:flex;align-items:baseline;gap:12px}
.builder-total__label{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.builder-total__value{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--ink)}
.builder-foot .btn--lg{min-width:220px}
@media(max-width:640px){
  /* Slimmer sticky bar on phones. */
  .builder-foot{padding:9px 12px;gap:10px;margin-top:16px;bottom:0;border-radius:12px 12px 0 0;flex-wrap:nowrap}
  .builder-total{gap:8px}
  .builder-total__label{font-size:11px}
  .builder-total__value{font-size:19px}
  .builder-foot .btn--lg{min-width:0;flex:1 1 auto;padding:11px 14px;font-size:13px}
}

@media(max-width:640px){
  .builder-row{grid-template-columns:56px 1fr;grid-template-areas:"media name" "media price" "qty qty";gap:8px 12px}
  .builder-row__media{grid-area:media;width:56px;height:68px}
  .builder-row__name{grid-area:name;gap:8px}
  .builder-row__price{grid-area:price;text-align:left}
  .builder-row__qty{grid-area:qty;justify-content:flex-start;margin-top:6px}
  .builder-foot{flex-direction:column;align-items:stretch}
  .builder-foot .btn--lg{width:100%}
}

/* ================================ SCREEN 4 · CART ======================= */

.cart-layout{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.cart-main{flex:2 1 440px;min-width:300px}
.cart-aside{flex:1 1 300px;min-width:280px;position:sticky;top:16px}

.cart-table{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.cart-table__head{
  display:flex;padding:14px 18px;background:var(--cream);border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.cart-row{display:flex;align-items:center;gap:14px;padding:16px 18px}
.cart-row + .cart-row{border-top:1px solid var(--line)}
.cart-row__thumb{width:70px;height:84px;border-radius:var(--r-control);overflow:hidden;background:var(--warm);flex-shrink:0}
.cart-row__info{flex:1 1 0;min-width:120px}
.cart-row__name{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.cart-row__variant{font-size:12.5px;color:var(--muted);margin-top:3px}
.cart-row__remove{
  font-size:12px;color:var(--wine2);margin-top:8px;
  display:inline-flex;align-items:center;gap:4px;transition:color .15s;background:none;
}
.cart-row__remove:hover{color:var(--wine-deep)}

.col-price{width:96px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.col-qty{width:120px;display:flex;justify-content:center}
.col-total{width:96px;text-align:right;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.cart-table__head .col-price{text-align:center}
.cart-table__head .col-total{text-align:right}
.cart-table__head .col-name{flex:1 1 0}

.stepper--sm{border-radius:9px}
.stepper--sm .stepper__btn{width:32px;height:38px;font-size:17px}
.stepper--sm .stepper__value{width:30px;font-size:15px}

.cart-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:18px}

.coupon-card{border:1px solid var(--line);border-radius:var(--r-card);padding:18px;margin-top:20px;background:var(--cream)}
.coupon-card__head{
  display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;
}
.coupon-card__form{display:flex;gap:10px;flex-wrap:wrap}
.coupon-card__form input{
  flex:1 1 0;min-width:160px;border:1px solid var(--line2);border-radius:var(--r-control);
  padding:12px 14px;background:#fff;font-size:14px;outline:none;
}
.coupon-card__form input:focus{border-color:var(--wine)}
.coupon-applied{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid var(--wine);border-radius:var(--r-control);padding:12px 14px;
}
.coupon-applied__code{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--wine)}

.summary-card{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.summary-card__head{
  padding:18px 20px;background:var(--cream);border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.summary-card__body{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--body)}
.summary-row strong{font-weight:600;color:var(--ink)}
.summary-row__muted{color:var(--muted)}
.summary-row__free{color:#2E7D32;font-weight:700}
.summary-row--discount strong{color:var(--wine)}
.summary-total{
  border-top:1px solid var(--line);padding-top:14px;display:flex;
  justify-content:space-between;align-items:baseline;
}
.summary-total__label{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.summary-total__value{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink)}
.secure-note{
  display:flex;align-items:center;gap:7px;justify-content:center;
  font-size:12px;color:var(--muted);margin-top:2px;
}

/* ============================= SCREEN 4b · CHECKOUT ==================== */

.checkout-layout{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start}
.checkout-main{flex:2 1 440px;min-width:300px;display:flex;flex-direction:column;gap:24px}
.checkout-aside{flex:1 1 300px;min-width:280px;position:sticky;top:16px}

.step-card{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;background:#fff}
.step-card__head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.step-badge{
  width:26px;height:26px;border-radius:50%;background:var(--wine);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step-card__title{
  margin:0;font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:.02em;color:var(--ink);
}

.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.field-grid--narrow{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.field-stack{display:flex;flex-direction:column;gap:14px}
.form-stack{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:12.5px;font-weight:600;color:var(--ink)}
.field__req{color:var(--wine2)}
.input,.select,.textarea{
  border:1px solid var(--line2);border-radius:var(--r-control);padding:12px 14px;
  font-size:14px;outline:none;background:#fff;width:100%;transition:border-color .15s;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--wine)}
.select{cursor:pointer}
.textarea{min-height:88px;resize:vertical;font-family:var(--font-body)}
/* Catalogue sidebar facets (Admin › Filters) */
.filter-list{display:flex;flex-direction:column;gap:2px;margin:2px 0 16px}
.filter-check{position:relative;display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:13.5px;color:var(--body)}
.filter-check input{position:absolute;left:0;top:6px;width:17px;height:17px;margin:0;opacity:0;cursor:pointer}
.filter-check__box{width:17px;height:17px;flex-shrink:0;border:1.5px solid var(--line2);border-radius:5px;background:#fff;position:relative}
.filter-check input:checked + .filter-check__box{background:var(--wine);border-color:var(--wine)}
.filter-check input:checked + .filter-check__box::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.filter-check input:focus-visible + .filter-check__box{outline:2px solid var(--wine);outline-offset:2px}
.filter-check__label{flex:1;min-width:0}
.filter-check:hover .filter-check__label{color:var(--ink)}
.filter-check__count{font-size:12px;color:var(--muted)}

.field__error{font-size:12px;color:var(--wine2)}
.field__error[data-inline]{display:block;margin-top:4px}
.input.has-error,.select.has-error,.textarea.has-error{border-color:var(--wine2);box-shadow:0 0 0 3px rgba(122,30,45,.08)}
.field.has-error .field__label{color:var(--wine2)}
.consent-row.has-error .check-box,.terms-row.has-error .check-box{border-color:var(--wine2);box-shadow:0 0 0 3px rgba(122,30,45,.12)}
input[type="checkbox"].has-error,input[type="radio"].has-error{outline:2px solid var(--wine2);outline-offset:2px}
.consent-row input.has-error,.terms-row input.has-error{outline:none}

.pay-list{display:flex;flex-direction:column;gap:10px}
.pay-row{
  display:flex;align-items:center;gap:13px;width:100%;padding:14px 16px;
  border-radius:var(--r-control-lg);transition:.14s;border:1.5px solid var(--line);
  background:none;cursor:pointer;position:relative;
}
.pay-row:hover{border-color:var(--line2)}
.pay-row input{position:absolute;opacity:0;width:0;height:0}
.pay-radio{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;border:1.5px solid var(--line2);
}
.pay-radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--wine);display:none}
.pay-row__label{flex:1 1 0;text-align:left;font-size:14.5px;font-weight:600;color:var(--ink)}
.pay-row__main{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.pay-row__main .pay-row__label{flex:0 0 auto}
.pay-row__eta{font-size:12px;color:var(--muted);margin-top:2px}
.pay-row__note{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--muted)}
.pay-row.is-selected{border-color:var(--wine);background:var(--warm)}
.pay-row.is-selected .pay-radio{border-color:var(--wine)}
.pay-row.is-selected .pay-radio::after{display:block}
.pay-row input:focus-visible ~ .pay-radio{outline:2px solid var(--wine);outline-offset:2px}
.pay-row.is-disabled{opacity:.55;cursor:not-allowed}

/* Checkout coupon */
.checkout-coupon{margin-top:14px;margin-bottom:16px;padding-top:14px;border-top:1px solid var(--line)}
.checkout-coupon__msg[hidden]{display:none}
.checkout-coupon__toggle{font-size:13.5px}
.checkout-coupon__applied{display:flex;align-items:center;justify-content:space-between;gap:12px}
.checkout-coupon__applied strong{color:var(--wine)}
.checkout-coupon__form{display:flex;gap:8px;margin-top:8px}
.checkout-coupon__form .input{flex:1 1 0}
.checkout-coupon__msg{margin-top:8px;font-size:12.5px;color:var(--danger)}

/* Shop pickup address box (checkout) */
.pickup-address{display:flex;gap:10px;align-items:flex-start;margin-top:6px;padding:14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--cream);font-size:14px;color:var(--body);line-height:1.5}
.pickup-address svg{flex:0 0 auto;margin-top:1px}

/* Parcel-locker picker (checkout) */
.pickup-picker{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;background:var(--cream)}
.pickup-picker__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.pickup-picker__title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)}
.pickup-picker__chosen{font-size:13px;color:#1F7A46;font-weight:600}
.pickup-picker [data-pickup-search]{margin-bottom:10px}
.pickup-picker__body{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pickup-picker__list{max-height:320px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px}
.pickup-item{display:block;width:100%;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:none;cursor:pointer;touch-action:manipulation}
.pickup-item:last-child{border-bottom:none}
.pickup-item:hover{background:var(--warm)}
.pickup-item.is-selected{background:var(--warm);box-shadow:inset 3px 0 0 var(--wine)}
.pickup-item__name{display:block;font-weight:600;font-size:13.5px;color:var(--ink)}
.pickup-item__addr{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.pickup-empty,.pickup-more{padding:12px;font-size:12.5px;color:var(--muted);text-align:center}
.pickup-picker__map{height:320px;border-radius:10px;overflow:hidden;border:1px solid var(--line);position:relative;z-index:0}
@media(max-width:760px){.pickup-picker__body{grid-template-columns:1fr}.pickup-picker__map{height:240px;order:-1}}

/* Collapsed state: the chosen locker + a button to reopen the picker. */
.pickup-selected{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pickup-selected__main{display:flex;align-items:flex-start;gap:11px;min-width:0}
.pickup-selected__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#1F7A46;color:#fff;margin-top:1px}
.pickup-selected__text{display:flex;flex-direction:column;min-width:0}
.pickup-selected__label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pickup-selected__name{font-weight:600;font-size:14px;color:var(--ink);line-height:1.4}
.pickup-selected__change{flex-shrink:0;border:1px solid var(--line2);background:#fff;color:var(--wine);
  font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.02em;
  padding:8px 15px;border-radius:var(--r-pill);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.pickup-selected__change:hover{background:var(--wine);border-color:var(--wine);color:#fff}
/* On phones long payment notes drop below; short delivery prices stay right. */
@media(max-width:560px){
  .pay-row__label{font-size:14px}
  [data-pay-list] .pay-row{flex-wrap:wrap}
  [data-pay-list] .pay-row__note{flex-basis:100%;margin-left:32px;margin-top:2px;text-align:left}
}
/* iOS zooms into any focused field with a font smaller than 16px. Force 16px on
   phones so tapping a search / checkout / form field never zooms the page. */
@media(max-width:640px){
  input,select,textarea,.input,.search-bar__input,.select,.stepper__value{font-size:16px}
}

/* Scroll the order summary when there are many products. */
.order-lines[data-scroll]{max-height:340px;overflow-y:auto;margin:0 -6px;padding:0 6px}
.order-line{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.order-line + .order-line{padding-top:16px}
.order-line__thumb{
  position:relative;width:56px;height:66px;border-radius:9px;
  overflow:hidden;background:var(--warm);flex-shrink:0;
}
.order-line__qty{
  position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;background:var(--wine);
  color:#fff;border-radius:var(--r-pill);font-size:10px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.order-line__info{flex:1 1 0;min-width:0}
.order-line__name{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.order-line__variant{font-size:12px;color:var(--muted);margin-top:2px}
.order-line__price{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}

.order-totals{display:flex;flex-direction:column;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.order-grand{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 8px}
.order-grand__label{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.order-grand__value{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ink)}
.order-grand__vat{font-size:11px;color:var(--muted)}

.terms-row{
  position:relative;
  display:flex;align-items:flex-start;gap:9px;margin:10px 0 16px;cursor:pointer;
  font-size:12.5px;color:var(--body);line-height:1.45;
}
.terms-row .check-box{width:17px;height:17px;margin-top:1px}
.terms-row input{position:absolute;left:0;top:1px;width:17px;height:17px;margin:0;opacity:0;cursor:pointer}   /* invisible but focusable (a 0-size required box blocks submit silently) */
.terms-row input:checked + .check-box{background:var(--wine);border-color:var(--wine)}
.terms-row input:checked + .check-box::after{
  content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.terms-row input:focus-visible + .check-box{outline:2px solid var(--wine);outline-offset:2px}

/* Privacy consent checkbox (public forms) */
.consent-row{position:relative;display:flex;align-items:flex-start;gap:9px;margin:4px 0 14px;cursor:pointer;font-size:12.5px;color:var(--body);line-height:1.45}
.consent-row .check-box{width:17px;height:17px;margin-top:1px;flex-shrink:0}
/* Keep the real checkbox invisible but focusable and sized over the drawn box:
   a zero-size required checkbox makes browsers block submit with a silent
   "not focusable" error instead of showing the validation message. */
.consent-row input{position:absolute;left:0;top:1px;width:17px;height:17px;margin:0;opacity:0;cursor:pointer}
.consent-row input:checked + .check-box{background:var(--wine);border-color:var(--wine)}
.consent-row input:checked + .check-box::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent-row input:focus-visible + .check-box{outline:2px solid var(--wine);outline-offset:2px}
.consent-row a{color:var(--wine);font-weight:600;text-decoration:underline}

/* Order success (post-submit screen) */
.order-success{
  max-width:560px;margin:40px auto;text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:18px;
}
.order-success__badge{
  width:72px;height:72px;border-radius:50%;background:var(--wine);
  display:flex;align-items:center;justify-content:center;
}
.order-success__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--ink)}
.order-success__text{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.order-success__text strong{color:var(--ink)}
.order-success .btn{margin-top:6px}
.order-success__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.bank-details{
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--cream);
  padding:18px 20px;text-align:left;width:100%;font-size:14px;line-height:1.7;color:var(--body);
}
.bank-details pre{
  margin:8px 0 0;font-family:var(--font-body);font-size:14px;
  line-height:1.7;white-space:pre-wrap;color:var(--ink);
}

/* -------------------------------------------------------------- messages */

.flash-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.flash{
  border-radius:var(--r-control);padding:12px 16px;font-size:14px;
  border:1px solid var(--line2);background:var(--cream);color:var(--body);
}
.flash--success{border-color:var(--wine);background:var(--warm);color:var(--ink)}
.flash--error{border-color:var(--wine2);background:#fff;color:var(--wine-deep)}

/* ------------------------------------------------------------------- 404 */

.error-page{
  max-width:560px;margin:clamp(40px,8vw,90px) auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.error-page__code{
  font-family:var(--font-display);font-weight:700;font-size:clamp(64px,10vw,110px);
  line-height:1;color:var(--wine);
}
.error-page__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.error-page__badge{display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;background:rgba(122,30,45,.07)}
.error-page__code{margin-top:-4px}
.error-page__search{display:flex;align-items:center;gap:8px;width:100%;max-width:420px;padding:6px 6px 6px 14px;border:1.5px solid var(--line2);border-radius:var(--r-control);background:#fff}
.error-page__search input{flex:1;border:none;outline:none;background:none;font:inherit;color:var(--ink);min-width:0}

/* Mobile filter toggle: a button that collapses the catalog sidebar on phones. */
.filter-toggle{
  display:none;align-items:center;justify-content:center;gap:8px;padding:11px 16px;
  border:1.5px solid var(--line2);border-radius:var(--r-control);background:#fff;
  font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);
}
.filter-toggle:hover{border-color:var(--wine)}

/* ------------------------------------------------ ask + contacts */

.ask-btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:2px;background:none;
  font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--wine);
}
.ask-btn:hover{color:var(--wine-deep)}

.ask-modal{
  position:fixed;inset:0;z-index:120;background:rgba(36,20,20,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeUp .18s ease both;
}
.ask-modal__card{
  position:relative;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;background:#fff;
  border-radius:var(--r-card);padding:28px 26px;box-shadow:var(--shadow-menu);
}
.ask-modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--ink)}
.ask-modal__close:hover{background:var(--warm)}
.ask-modal__title{margin:0 0 3px;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink)}
.ask-modal__product{margin:0 0 18px;font-size:14px;color:var(--muted)}

/* Checkout login/register modal */
.auth-modal .ask-modal__card{max-width:440px}
.auth-tabs{display:flex;gap:4px;margin:2px 0 18px;border-bottom:1px solid var(--line)}
.auth-tab{padding:10px 14px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;background:none;cursor:pointer}
.auth-tab.is-active{color:var(--ink);border-bottom-color:var(--wine)}
@media(max-width:560px){
  .ask-modal{padding:10px;align-items:center}
  .ask-modal__card{padding:22px 18px 24px;max-height:94vh}
  .ask-modal__title{font-size:19px}
  .ask-modal .field-grid,.ask-modal .field-grid--narrow{display:flex;flex-direction:column;gap:14px}
}

.contacts{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,44px);align-items:flex-start;margin-top:18px}
.contacts__info{flex:1 1 320px;min-width:280px}
.contacts__form-wrap{flex:1 1 360px;min-width:300px}
.contacts__cards{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.contacts__card{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--cream)}
.contacts__card-label{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.contacts__reqs{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--body)}
.contacts__reqs-head{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.contacts__form-card{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,3vw,30px);background:#fff}
.contacts__form-title{margin:0 0 18px;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink)}
.contacts__form{display:flex;flex-direction:column;gap:14px}

/* ---------------------------------------------------- account + wishlist */

.auth{max-width:460px;margin:16px auto}
.auth--wide{max-width:680px}
.auth__card{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,4vw,36px);background:#fff}
.auth__title{margin:0 0 20px;font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--ink)}
.auth__form{display:flex;flex-direction:column;gap:14px}
.auth__or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:13px}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth__alt{margin:18px 0 0;text-align:center;font-size:14px;color:var(--body)}
.btn--google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;
  border:1.5px solid var(--line2);border-radius:var(--r-control);background:#fff;
  font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--ink);transition:.15s;
}
.btn--google:hover{border-color:var(--muted);background:var(--cream)}

.account-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start}
.account-empty{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:16px 0}
.account-orders{display:flex;flex-direction:column;gap:12px}
.account-order{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden}
.account-order__sum{
  list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;align-items:center;padding:16px 18px;
}
.account-order__sum::-webkit-details-marker{display:none}
.account-order__sum::marker{content:""}
.account-order[open] .account-order__sum{border-bottom:1px solid var(--line)}
.account-order__main{display:flex;flex-direction:column;gap:2px}
.account-order__num{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.account-order__side{display:flex;align-items:center;gap:14px}
.account-order__side svg{transition:transform .2s}
.account-order[open] .account-order__side svg{transform:rotate(180deg)}
.account-order__total{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink)}
.account-order__items{padding:6px 18px 12px}
.account-order__items .mini-row{padding:11px 0}

.btn--danger{background:#fff;border:1.5px solid #C0392B;color:#C0392B;font-size:14px;padding:12px 22px}
.btn--danger:hover{background:#C0392B;color:#fff}
.account-card--danger{border-color:#E6C9C9;margin-top:20px}
.badge-pill{padding:5px 11px;border-radius:var(--r-pill);background:var(--warm);font-size:12px;font-weight:600;color:var(--body)}
.badge-pill--ok{background:#E7F3E9;color:#2E7D32}

.account-layout{display:flex;gap:clamp(20px,3vw,32px);align-items:flex-start;margin-top:24px}
.account-nav{flex:0 0 210px;display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
.account-nav__item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;
  border-radius:var(--r-control);font-family:var(--font-display);font-weight:600;font-size:14.5px;
  color:var(--ink);transition:.14s;background:none;
}
.account-nav__item:hover{background:var(--warm);color:var(--ink)}
.account-nav__item.is-active{background:var(--wine);color:#fff}
.account-main{flex:1 1 0;min-width:0}
.account-card{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,3vw,28px);background:#fff}
.account-card__title{margin:0 0 20px;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink)}

@media(max-width:760px){
  .account-layout{flex-direction:column}
  .account-nav{
    flex:1 1 auto;flex-direction:row;overflow-x:auto;position:static;gap:6px;width:100%;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;
  }
  .account-nav__item{width:auto;white-space:nowrap;padding:10px 14px;flex-shrink:0}
}

.icon-square.is-wished{border-color:var(--accent);background:var(--accent);color:#fff}
.icon-square.is-wished svg{fill:#fff}

/* Info notice on the storefront (e.g. "nothing to pay now" in checkout step 4).
   Same look as the delivery-step notices: icon beside the text, not above it. */
.alert{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.5;
}
.alert > svg{flex-shrink:0;margin-top:3px}
.alert--info{background:#FBF7F1;color:#5a3620}

.checkout-login{
  display:flex;align-items:center;gap:9px;padding:12px 16px;margin-bottom:22px;
  border:1px solid var(--line);border-radius:var(--r-control);background:var(--cream);
  font-size:14px;color:var(--body);
}
.checkout-login a{color:var(--wine);font-weight:600;text-decoration:underline}

/* cookie consent */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35);
  transform:translateY(100%);transition:transform .3s ease;
}
.cookie-bar[data-open="true"]{transform:none}
.cookie-bar__inner{
  max-width:var(--container);margin:0 auto;padding:15px 24px;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap;justify-content:space-between;
}
.cookie-bar__text{margin:0;flex:1 1 340px;font-size:13.5px;line-height:1.6;color:var(--body)}
.cookie-bar__text a{color:var(--wine);font-weight:600;text-decoration:underline}
.cookie-bar__actions{display:flex;gap:10px;flex-shrink:0}
/* --- consent panel (Consent Mode v2) ------------------------------------ */
.cookie-bar__title{display:block;font-family:var(--font-display);font-size:15px;margin-bottom:4px}
.cookie-bar__actions{flex-wrap:wrap}
.cookie-prefs{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px;max-height:42vh;overflow-y:auto}
.cookie-cat{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;cursor:pointer}
.cookie-cat--locked{cursor:default;background:var(--cream)}
.cookie-cat__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cookie-cat__title{font-weight:600;font-size:13.5px;color:var(--ink)}
.cookie-cat__always{font-size:12px;color:var(--muted)}
.cookie-cat__desc{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:4px}
/* Switch: the checkbox stays focusable, the track is the visible control. */
.cookie-switch{position:relative;flex:0 0 auto;width:38px;height:22px}
.cookie-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cookie-switch__track{
  position:absolute;inset:0;border-radius:999px;background:#d9d2c8;transition:background .18s ease;pointer-events:none;
}
.cookie-switch__track::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.cookie-switch input:checked + .cookie-switch__track{background:var(--wine2)}
.cookie-switch input:checked + .cookie-switch__track::after{transform:translateX(16px)}
.cookie-switch input:focus-visible + .cookie-switch__track{outline:2px solid var(--wine);outline-offset:2px}
/* Footer link that reopens the panel: a button that reads as a link. */
.footer-bottom__link{
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;opacity:.85;
}
.footer-bottom__link:hover{opacity:1}
/* Small screens: one column, every button the same full width. Side by side
   they wrapped to different heights and the ghost "customise" button floated
   away from the others. The whole bar scrolls if the panel makes it tall. */
@media (max-width:720px){
  .cookie-bar{max-height:88vh;overflow-y:auto}
  .cookie-bar__inner{
    flex-direction:column;align-items:stretch;gap:12px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
  }
  .cookie-bar__text{flex:none;font-size:13px}
  .cookie-bar__title{font-size:14.5px;margin-bottom:5px}
  .cookie-bar__actions{flex-direction:column;gap:8px;width:100%}
  .cookie-bar__actions .btn{width:100%;flex:none;justify-content:center;min-height:44px}
  /* Accept and reject stay the two obvious choices; customise sits last. */
  .cookie-bar__actions [data-cookie="all"]{order:1}
  .cookie-bar__actions [data-cookie-save]{order:2}
  .cookie-bar__actions [data-cookie="necessary"]{order:3}
  .cookie-bar__actions [data-cookie-customise]{order:4;text-decoration:underline}
  /* No inner scroller on phones: it cut a card in half and gave two nested
     scrollbars. The bar itself scrolls (max-height above) when it needs to. */
  .cookie-prefs{max-height:none;overflow:visible;margin:4px 0 0}
  .cookie-cat{padding:10px}
  .cookie-cat__desc{font-size:11.5px}
}
@media(max-width:640px){
  .cookie-bar__inner{padding:14px 16px;gap:12px}
  .cookie-bar__actions{width:100%}
  .cookie-bar__actions .btn{flex:1 1 0}
}

/* ------------------------------------------------------------ responsive */

/* Nav collapses into the hamburger drawer below this width. */
@media(max-width:900px){
  .hamburger{display:flex}
  .main-nav{display:none}
  .mega{display:none !important}          /* desktop hover panel; phones use the drawer */

  /* Toolbar on phones: sort + filter share one row, the count drops below. */
  /* Filter + sort become two matched, equal-width controls (same height, border
     and radius) so they read as a pair; the count drops onto its own line. */
  .catalog-tools{width:100%;gap:10px}
  .catalog-tools .filter-toggle,
  .catalog-tools .sort-field{
    height:48px;box-sizing:border-box;margin:0;
    border:1.5px solid var(--line2);border-radius:var(--r-control);
  }
  /* Filter is an icon-only square; sort takes the rest of the single row. */
  .catalog-tools .filter-toggle{display:flex;order:1;flex:0 0 48px;width:48px;padding:0;justify-content:center}
  .catalog-tools .filter-toggle__text{display:none}
  .catalog-tools > form{flex:0 1 auto;display:flex;order:2;margin-left:auto}
  .catalog-tools .sort-field{width:auto;flex:0 1 auto;gap:8px;justify-content:flex-start;padding:0 14px}
  .catalog-tools .sort-field__label{flex:0 0 auto}
  .catalog-tools .sort-field select{flex:0 1 auto}
  .catalog-tools .meta{order:3;flex-basis:100%;margin-top:4px;color:var(--muted);font-size:13px}
  .sidebar{position:static;max-width:none;flex:1 1 100%;display:none}
  .sidebar.is-open{display:block}
  .pdp__gallery,.cart-aside,.checkout-aside{position:static}

  /* Below the nav breakpoint the row is three fixed parts: burger, logo, icons.
     A grid (not flex) keeps the logo optically centred whatever the burger and
     the icon set weigh, instead of letting it hug the burger with dead space on
     the right. */
  .header-inner{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:10px;
  }
  .hamburger{grid-column:1;justify-self:start}
  .header-logo{grid-column:2;justify-self:center;margin:0;min-width:0}
  .header-logo img{max-width:100%;object-fit:contain}
  .header-actions{grid-column:3;justify-self:end}
}

@media(max-width:640px){
  /* Tighter gutters on phones. */
  .container,.header-inner,.search-bar__form,.footer-inner,.footer-bottom,
  .trust-strip__inner{padding-left:16px;padding-right:16px}
  .section{padding-left:16px;padding-right:16px}
  .page{padding-left:16px;padding-right:16px}

  .header-inner{gap:8px;height:64px}
  .header-logo img{height:46px}
  .header-actions{gap:12px}
  /* Phones: language moves into the drawer (it is duplicated there), which frees
     room for the account icon. Bar reads: search, account, wishlist, cart. */
  .header-actions .lang{display:none}
  .icon-btn--opt{display:flex}

  /* Hero: single column of copy. */
  .hero__copy{flex:1 1 100%;min-width:0;padding:36px 16px;gap:16px}
  .hero__copy > *{max-width:none}
  .hero__media{display:none}
  /* The desktop treatments raise .hero__media's specificity, so they have to be
     switched off here by name or they reappear stacked under the button. */
  .hero--card .hero__media{display:none}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%;justify-content:center}

  /* Phones have no room for a second column, so the photo moves behind the
     copy as a texture rather than being dropped or stacked. It is held well
     back: a cream scrim over a low-opacity image keeps the heading and lede at
     full reading contrast, strongest at the top where the small text sits. */
  .hero--fade .hero__inner{position:relative}
  .hero--fade .hero__copy{position:relative;z-index:1}
  .hero--fade .hero__media{
    display:block;position:absolute;inset:0;z-index:0;
    min-height:0;padding:0;pointer-events:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero--fade .hero__media img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;opacity:.38;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero--fade .hero__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(250,247,243,.90) 0%,
      rgba(250,247,243,.72) 55%,
      rgba(250,247,243,.55) 100%);
  }

  /* Trust items in a 2x2 grid instead of a single tall column. */
  .trust-strip__inner{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
  .trust-item{flex:none;align-items:flex-start}

  .grid-products{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid-tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .stats{gap:20px}

  /* Product page: gallery + info stack full width. */
  .pdp__gallery,.pdp__info{flex:1 1 100%;min-width:0}
  .buy-row{flex-wrap:wrap}
  .buy-row .btn--lg{flex:1 1 100%;order:3}
  .gallery-arrow{opacity:1}

  /* Cart turns into stacked cards: the column headers stop making sense. */
  .cart-table__head{display:none}
  .cart-row{flex-wrap:wrap;row-gap:12px}
  .cart-row__info{flex:1 1 140px}
  .col-price{width:auto;order:3;text-align:left}
  .col-qty{width:auto;order:4;margin-left:auto}
  .col-total{width:100%;order:5;text-align:right;padding-top:4px;border-top:1px solid var(--line)}
  .cart-aside,.checkout-aside{flex:1 1 100%}

  /* Checkout steps sit tighter. */
  .step-card{padding:18px 16px}

  .order-success__title{font-size:26px}
  .order-success__actions{width:100%}
  .order-success__actions .btn{flex:1 1 auto;justify-content:center}
  .tabs__nav{gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .spec-row{padding:12px 14px}
}

/* Very small phones. */
@media(max-width:380px){
  .container,.section,.page,.header-inner,.trust-strip__inner,
  .footer-inner,.footer-bottom{padding-left:13px;padding-right:13px}
  .grid-products{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .btn--accent,.btn--outline{padding-left:20px;padding-right:20px}
  /* Narrowest phones: shrink the wordmark and tighten the icons so the three
     header parts still fit on one row with the logo centred. */
  .header-logo img{height:38px}
  .header-actions{gap:9px}
}

/* Inline link-styled button (e.g. "log in to review" trigger) */
.link-btn{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:600;color:var(--wine,#7a1f2b);text-decoration:underline;cursor:pointer}
.link-btn:hover{opacity:.8}

/* Password show/hide eye toggle */
.pw-wrap{position:relative;display:block}
.pw-wrap .input{width:100%;padding-right:42px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:none;border:none;color:var(--muted,#8a8a8a);cursor:pointer;border-radius:6px}
.pw-toggle:hover{color:var(--wine,#7a1f2b)}

/* Segmented radio choice (builder group / diameter picker) */
.seg-choice{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.seg-choice__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.seg-choice__btn{margin:0;padding:11px 20px;border:1.5px solid var(--line,#e6ddd4);border-radius:12px;font-size:15px;font-weight:600;color:var(--ink,#2b2320);background:#fff;cursor:pointer;transition:border-color .15s,background .15s,color .15s;user-select:none}
.seg-choice__btn:hover{border-color:var(--wine,#7a1f2b)}
.seg-choice__input:checked+.seg-choice__btn{background:var(--wine,#7a1f2b);border-color:var(--wine,#7a1f2b);color:#fff}
.seg-choice__input:focus-visible+.seg-choice__btn{box-shadow:0 0 0 3px rgba(122,31,43,.25)}

/* Constructor builder: out-of-stock component + composite price range */
.builder-oos{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.pdp-price__dash{margin:0 6px;color:var(--muted)}

/* Checkout order summary: remove a line */
.order-line__remove{background:none;border:none;padding:4px;margin-left:6px;color:var(--muted);cursor:pointer;display:flex;align-items:center;border-radius:6px;flex:0 0 auto}
.order-line__remove:hover{color:var(--wine,#7a1f2b);background:var(--warm)}

/* Minimum order value notice (checkout / cart) */
.min-order-note{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:11px 14px;border-radius:10px;background:#fbefe1;border:1px solid #eecfae;color:#8a4b12;font-size:14px;line-height:1.4}
.btn--order[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.2)}

/* Forgot-password link on the login form */
.auth__forgot{margin:-6px 0 4px;text-align:right;font-size:13px}

/* Variant not buyable (stage 4): greyed swatch, still selectable to read the state. */
.swatch.is-unavailable{opacity:.4;position:relative}
.swatch.is-unavailable::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:currentColor;transform:rotate(-20deg)}

/* MakeCommerce bank/card buttons (checkout + pay-by-link page) */
.mk-widget{padding:12px 0 4px}
.mk-widget__country{margin-bottom:12px}
.mk-widget__country .select{max-width:220px}
.mk-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mk-logo{display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px;border:1px solid var(--line,#e6e0d8);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s;font-size:12px;font-weight:600}
.mk-logo img{max-width:100%;max-height:26px;width:auto;object-fit:contain}
.mk-logo--multi{gap:6px;grid-column:span 2}
.mk-logo--multi img{max-width:46%}
.mk-logo:hover{border-color:var(--wine,#7A1E2D)}
.mk-logo.is-active{border-color:var(--wine,#7A1E2D);box-shadow:0 0 0 2px rgba(122,30,45,.15)}