/* ============================================================
   קוסטילאטאס · shop.css v3 - החנות (/shop /product /cart /checkout /pay /order)
   נטען אחרי site-a.css: אותם טוקנים, אותה כותרת ואותה כותרת תחתונה כמו
   בעמוד הבית. מובייל קודם, 360px עד 1920px, RTL עם מאפיינים לוגיים.
   ============================================================ */

/* ---------- base ---------- */
.page-store{background:var(--cream)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* spam-trap field: out of sight and out of the accessibility tree whatever the page (the markup also carries aria-hidden, tabindex=-1, autocomplete=off) */
.hp-field{position:absolute!important;inset-inline-start:-9999px;top:auto;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none}
.money{unicode-bidi:isolate;direction:ltr;display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em;unicode-bidi:isolate}
[hidden]{display:none!important}
html.drawer-open{overflow:hidden}
.page-store main{display:block;min-height:60vh;padding-block:clamp(20px,3vw,40px) clamp(56px,7vw,96px)}
.page-store :focus-visible{outline:2px solid var(--glacial-deep);outline-offset:3px}
.page-store main a:not(.btn):not(.sz):not(.pc-img):not(.cl-img){color:var(--glacial-deep)}
.page-store main a:not(.btn):not(.sz):not(.pc-img):not(.cl-img):hover{text-decoration:underline}

/* ---------- header: same bar as the home page, solid from the first pixel ---------- */
header.nav.shop-head{position:sticky;top:0;background:rgba(247,244,238,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:8px 0;box-shadow:0 1px 0 var(--line-soft)}
.shop-head .brand{flex:0 0 auto;display:block}
.shop-logo{display:block;height:84px;width:auto;background:#fff;border-radius:50%;padding:4px;box-shadow:0 5px 18px rgba(14,42,71,.20)}
.shop-head .nav-links{gap:26px}
.shop-head .nav-links a{font-size:17.5px;text-shadow:none}
.shop-head .nav-links a::before{display:none}
.nav-tools{display:flex;align-items:center;gap:10px}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 18px;border:1.5px solid var(--ink);border-radius:var(--r-pill);font-weight:700;font-size:16px;color:var(--ink);background:rgba(255,255,255,.55);transition:background var(--d-fast),color var(--d-fast)}
.cart-btn svg{width:22px;height:22px;flex:0 0 auto}
.cart-btn:hover{background:var(--ink);color:var(--cream)}
.cart-count{min-width:22px;height:22px;padding-inline:6px;border-radius:11px;background:var(--magenta);color:#fff;font-size:12.5px;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.cart-count[data-n="0"]{background:rgba(14,42,71,.12);color:var(--ink)}
.lang-dd .nav-lang{min-height:40px}
.lang-dd-menu a[aria-current="true"]{background:rgba(95,182,220,.15);cursor:default}
@media(max-width:880px){
  .shop-logo{height:58px}
  .cart-btn{padding:8px 13px}
  .cart-btn .cb-label{display:none}
}
/* the mobile menu stays out of the render tree when closed, in either direction */
.m-nav:not(.open){pointer-events:none}
.m-nav .m-cta{font-family:var(--sans)}

/* ---------- page heads ---------- */
.page-head{padding-block:clamp(12px,2vw,24px) clamp(18px,3vw,32px)}
.page-head h1,.pdp-h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,54px);line-height:1.1;color:var(--ink);letter-spacing:var(--track-display);text-wrap:balance}
.page-head p{margin-top:12px;color:var(--ink2);font-size:18px;max-width:60ch}
.crumbs{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.crumbs li+li::before{content:"/";margin-inline-end:6px;opacity:.55}

/* ---------- notices ---------- */
.notice{border-radius:var(--r-md);padding:16px 20px;margin-block:0 22px;font-size:16px;line-height:1.6;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between}
.notice p{margin:0;flex:1 1 280px}
.notice-soon{background:linear-gradient(115deg,#0E2A47,#173d63);border:0;color:#F7F4EE;padding:18px 22px;box-shadow:0 14px 34px -22px rgba(14,42,71,.55)}
.notice-soon p{color:#E6EEF5}.notice-soon b{color:#fff}
.soon-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--glacial);margin-inline-end:10px;vertical-align:middle;box-shadow:0 0 0 0 rgba(95,182,220,.6)}
html:not(.a11y-stop-motion) .soon-dot{animation:soonPulse 2.4s ease-out infinite}
@keyframes soonPulse{0%{box-shadow:0 0 0 0 rgba(95,182,220,.55)}70%{box-shadow:0 0 0 10px rgba(95,182,220,0)}100%{box-shadow:0 0 0 0 rgba(95,182,220,0)}}
@media(prefers-reduced-motion:reduce){.soon-dot{animation:none!important}}
.btn-light{background:#F7F4EE;color:var(--ink);border-color:#F7F4EE}
.btn-light:hover{background:#fff}
.notice-soon :focus-visible{outline-color:#9DD7EE}
.notice-warn{background:#FFF6E5;border:1px solid #E9C27A;color:#5B3B00}
.notice-err{background:#FDECEF;border:1px solid #E7A1B0;color:#7A1023}
.notice a:not(.btn){color:var(--glacial-deep);font-weight:700;text-decoration:underline}
.fine{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-top:10px}
.line-err{color:#A3122A;font-weight:600;font-size:14.5px;margin-top:6px}

/* ---------- buttons (extends .btn from site-a) ---------- */
.btn{justify-content:center;min-height:48px}
.btn-sm{padding:10px 20px;font-size:15px;min-height:42px}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn[disabled]::before{display:none}
.link-btn{background:none;border:0;padding:6px 2px;font:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:underline;cursor:pointer;min-height:44px}
.link-btn:hover{color:#A3122A}
.back-link{display:inline-block;margin-top:18px;font-weight:600;font-size:15.5px}

/* ---------- shop hero ---------- */
.shop-hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:end;padding-block:clamp(8px,2vw,24px) clamp(24px,4vw,48px)}
.sh-copy h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,6vw,72px);line-height:1.04;color:var(--ink);letter-spacing:var(--track-display);text-wrap:balance}
.sh-copy .eyebrow{margin-bottom:16px}
.sh-copy p{margin-top:16px;font-size:clamp(17px,1.6vw,20px);color:var(--ink2);font-weight:500;max-width:46ch;line-height:1.7}
.sh-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.sh-points li{font-size:14.5px;font-weight:700;color:var(--glacial-deep);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;background:rgba(255,255,255,.6)}
.sh-bottles{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,3vw,34px);position:relative;padding-top:10px;max-width:560px;margin-inline:auto;width:100%}
.sh-bottles::before{content:"";position:absolute;inset:auto -4% -6%;height:70%;background:radial-gradient(closest-side,rgba(95,182,220,.30),rgba(95,182,220,0));z-index:0;pointer-events:none}
/* the product PNGs carry wide transparent margins: a narrow cover box trims them so the three bottles stand together */
.sh-bottles img{position:relative;z-index:1;width:auto;aspect-ratio:270/660;object-fit:cover;object-position:50% 100%;filter:drop-shadow(0 18px 22px rgba(14,42,71,.18))}
.sh-bottles img:nth-child(1){height:clamp(150px,22vw,250px)}
.sh-bottles img:nth-child(2){height:clamp(180px,27vw,310px)}
.sh-bottles img:nth-child(3){height:clamp(205px,31vw,360px)}
@media(min-width:900px){.shop-hero{grid-template-columns:1.05fr .95fr;gap:40px}}

/* ---------- catalog ---------- */
.sec-h{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.12;color:var(--ink);margin-bottom:22px}
.prod-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:720px){.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}}
.prod-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow var(--d-base) var(--ease),transform var(--d-base) var(--ease)}
.prod-card:hover{box-shadow:0 22px 50px -26px rgba(14,42,71,.35)}
.pc-img{display:flex;align-items:flex-end;justify-content:center;height:clamp(230px,26vw,300px);padding-top:18px;background:radial-gradient(90% 75% at 50% 100%,var(--mist),#fff 72%)}
.pc-img img{height:100%;width:auto;object-fit:contain;transition:transform .55s var(--ease)}
html:not(.a11y-stop-motion) .prod-card:hover .pc-img img{transform:translateY(-6px) scale(1.03)}
.pc-body{display:flex;flex-direction:column;gap:4px;padding:18px clamp(16px,2vw,24px) 22px;flex:1}
.pc-title a{color:var(--ink)!important;text-decoration:none!important;display:block}
.pc-title a::after{content:"";position:absolute;inset:0;z-index:0}
.pc-title a:focus-visible{outline:none}
.prod-card:has(.pc-title a:focus-visible){outline:2px solid var(--glacial-deep);outline-offset:3px}
.pc-size{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.pc-size .num{font-family:var(--display);font-size:40px;line-height:1}
.pc-name{display:block;font-size:15.5px;font-weight:600;color:var(--ink2);margin-top:2px}
.pc-tag{font-size:14px;color:var(--glacial-deep);font-weight:700;letter-spacing:.02em}
.pc-case{font-size:14.5px;color:var(--ink-soft)}
.pc-buy,.pc-more,.prod-card .stepper,.prod-card .btn{position:relative;z-index:1}
.pc-buy{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.pc-buy .btn{flex:1 1 140px;padding:12px 18px}
.pc-more{margin-top:auto;padding-top:14px;font-weight:700}
.soon-tag{margin-top:12px;align-self:flex-start;font-size:14.5px;font-weight:700;color:var(--ink);background:rgba(95,182,220,.16);border:1px solid rgba(21,100,143,.22);border-radius:var(--r-pill);padding:7px 15px}
.stock-out{margin-top:auto;padding-top:14px;font-weight:700;color:#A3122A}

/* price block */
.price{margin-top:12px}
.price-main{font-family:var(--display);font-size:30px;font-weight:700;color:var(--ink);line-height:1.15}
.price-main .per{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink-soft)}
.price-sub{font-size:14.5px;color:var(--ink2);margin-top:2px}
.price-dep{font-size:13.5px;color:var(--ink-soft);margin-top:2px}
.kos-slot[data-slot="fixed-delivery"]:empty{display:block;min-height:6.6rem;margin-top:14px}
.price-tiers{list-style:none;margin:8px 0 0;padding:8px 10px;border-inline-start:3px solid var(--glacial-deep);background:rgba(255,255,255,.7);border-radius:6px;display:grid;gap:2px}
.price-tiers li{font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:600}

/* stepper: + on the start side in RTL, − on the end */
.stepper{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;overflow:hidden;height:46px}
.st-btn{width:44px;border:0;background:transparent;font-size:22px;font-weight:600;color:var(--ink);cursor:pointer;display:grid;place-items:center;font-family:var(--sans)}
.st-btn:hover:not([disabled]){background:var(--mist)}
.st-btn:active:not([disabled]){background:rgba(95,182,220,.28)}
.st-btn,.st-input,.btn,.link-btn{touch-action:manipulation}
.st-btn[disabled]{opacity:.32;cursor:not-allowed}
.st-input{width:52px;border:0;border-inline:1px solid var(--line-soft);text-align:center;font:700 17px var(--sans);color:var(--ink);background:transparent;-moz-appearance:textfield;appearance:textfield}
.st-input::-webkit-outer-spin-button,.st-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-btn:focus-visible,.st-input:focus-visible{outline:2px solid var(--glacial-deep);outline-offset:-3px}

/* how it works: numbered rail, no boxes */
.how-wrap{margin-top:clamp(48px,7vw,88px)}
.how{display:grid;grid-template-columns:1fr;gap:22px;counter-reset:how;position:relative}
@media(min-width:760px){.how{grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
  .how::before{content:"";position:absolute;top:22px;inset-inline:22px calc(33.333% - 22px);height:1px;background:linear-gradient(to left,var(--glacial),rgba(95,182,220,.15))}}
.how li{list-style:none;counter-increment:how;position:relative}
.how li::before{content:counter(how);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1.5px solid var(--glacial);font-family:var(--display);font-weight:700;font-size:20px;color:var(--glacial-deep);margin-bottom:14px;position:relative;z-index:1}
.how b{display:block;font-size:18px;color:var(--ink);margin-bottom:4px}
.how span{font-size:15.5px;color:var(--ink2);line-height:1.65;max-width:34ch;display:block}
.biz-note{margin-top:22px;font-size:15.5px;color:var(--ink2);max-width:72ch}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1fr;gap:clamp(20px,4vw,56px);align-items:start}
@media(min-width:880px){.pdp{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.pdp-media{display:flex;align-items:flex-end;justify-content:center;border-radius:var(--r-lg);background:radial-gradient(85% 70% at 50% 100%,var(--mist),#fff 74%);border:1px solid var(--line);height:clamp(320px,48vw,560px);padding-top:24px}
.pdp-media img{height:100%;width:auto;object-fit:contain}
@media(min-width:880px){.pdp-media{position:sticky;top:120px}}
.pdp-info .eyebrow{margin-bottom:14px}
.pdp-case{margin-top:8px;font-size:17px;font-weight:600;color:var(--ink2)}
.pdp-lede{margin-top:14px;font-size:18px;color:var(--ink2);line-height:1.7;max-width:52ch}
.size-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sz{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border:1.5px solid var(--line);border-radius:var(--r-pill);font-weight:700;font-size:15.5px;color:var(--ink);background:#fff;transition:border-color var(--d-fast)}
.sz:hover{border-color:var(--ink)}
.sz.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pdp-info .price{margin-top:24px}
.pdp-info .price-main{font-size:clamp(30px,4.2vw,50px);line-height:1.05}   /* about the product title (owner 07.10) */
.pdp-buy{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:22px}
.pdp-qty{display:flex;flex-direction:column;gap:6px}
.pdp-qty label{font-size:14.5px;font-weight:700;color:var(--ink2)}
.pdp-buy .btn{flex:1 1 200px}
.pdp-missing{padding-block:40px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.skel{border-radius:var(--r-md);background:linear-gradient(90deg,rgba(14,42,71,.05),rgba(14,42,71,.09),rgba(14,42,71,.05));min-height:420px}

.label-facts{margin-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,40px)}
@media(min-width:880px){.label-facts{grid-template-columns:1fr 1fr}}
.label-facts h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,36px);color:var(--ink);margin-bottom:8px}
.label-facts p{color:var(--ink2);font-size:16px;line-height:1.7}
.facts-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:14px}
.facts-table caption{caption-side:top;text-align:start;font-weight:700;padding:0 0 8px;color:var(--ink)}
.facts-table th,.facts-table td{padding:10px 16px;border-top:1px solid var(--line-soft);text-align:start;font-size:15.5px}
.facts-table thead th{font-size:13.5px;color:var(--ink-soft);font-weight:700;border-top:0;background:var(--cream)}
.facts-table td.num{font-family:var(--display);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.facts-table td.sym{color:var(--ink-soft);font-size:14px}
.facts-list{display:grid;gap:0;margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.facts-list div{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.facts-list div:first-child{border-top:0}
.facts-list dt{color:var(--ink-soft);font-weight:600;font-size:15px}
.facts-list dd{color:var(--ink);font-weight:700;font-size:15.5px;text-align:end}

/* ---------- cart ---------- */
.cart-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,40px);align-items:start}
@media(min-width:960px){.cart-grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr)}}
.cart-lines{list-style:none;display:grid;gap:12px}
.cart-line{display:grid;grid-template-columns:72px 1fr;grid-template-areas:"img info" "img qty" "img total";gap:6px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.cl-img{grid-area:img;display:flex;align-items:center;justify-content:center;background:var(--mist);border-radius:12px;height:96px}
.cl-img img{height:86px;width:auto;object-fit:contain}
.cl-info{grid-area:info}
.cl-info h3{font-size:17px;font-weight:700}
.cl-info h3 a{color:var(--ink)!important}
.cl-meta{font-size:14px;color:var(--ink-soft)}
.cl-qty{grid-area:qty;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cl-total{grid-area:total;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}
@media(min-width:600px){
  .cart-line{grid-template-columns:88px 1fr auto auto;grid-template-areas:"img info qty total";align-items:center;gap:16px}
  .cl-img{height:104px}
  .cl-total{min-width:96px;text-align:end}
  .cl-qty{flex-direction:column;gap:2px}
}
.summary{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px)}
@media(min-width:960px){.summary{position:sticky;top:120px}}
.summary h2,.co-aside h2{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink);margin-bottom:14px}
.zones{border:0;margin:0 0 16px;padding:0;display:grid;gap:8px}
.zones legend,.fset>legend{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:8px;padding:0}
.zone-opt,.pay-opt,.type-opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:#fff;transition:border-color var(--d-fast),background var(--d-fast)}
.zone-opt:hover,.pay-opt:hover,.type-opt:hover{border-color:rgba(14,42,71,.4)}
.zone-opt:has(input:checked),.pay-opt:has(input:checked),.type-opt:has(input:checked){border-color:var(--ink);background:rgba(95,182,220,.08)}
.zone-opt:has(input:focus-visible),.pay-opt:has(input:focus-visible),.type-opt:has(input:focus-visible){outline:2px solid var(--glacial-deep);outline-offset:2px}
.zone-opt input,.pay-opt input,.type-opt input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--ink)}
.zo-body,.po-body{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.zo-body b,.po-body b{font-size:16px;color:var(--ink)}
.zo-fee{font-weight:700;color:var(--ink)}
.zo-rules{color:var(--ink-soft);font-size:13.5px}
.sum{display:grid;gap:0;margin-top:6px}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:15.5px;color:var(--ink2)}
.sum-row dd{margin:0;font-weight:700;color:var(--ink)}
.sum-row.sub{font-size:14px}
.sum-row.total{border-top:1.5px solid var(--ink);margin-top:4px;padding-top:12px;font-size:17px;color:var(--ink);font-weight:700}
.sum-row.total dd{font-family:var(--display);font-size:24px}
.free-hint{margin-top:8px;font-size:14.5px;font-weight:700;color:var(--glacial-deep)}
.summary .btn{margin-top:14px}
.empty-state{text-align:center;padding:clamp(40px,8vw,90px) 16px;max-width:520px;margin-inline:auto;display:flex;flex-direction:column;gap:14px;align-items:center}
.empty-state h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,38px);color:var(--ink)}
.empty-state p{color:var(--ink2)}

/* ---------- drawer (dialog) ---------- */
.drawer-scrim{position:fixed;inset:0;z-index:99990;background:rgba(14,42,71,.42);opacity:0;transition:opacity .3s var(--ease)}
.drawer-scrim.open{opacity:1}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:99991;width:min(440px,100vw);background:var(--cream);box-shadow:0 0 60px rgba(14,42,71,.28);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .36s var(--ease);outline:0}
html[dir="ltr"] .drawer{transform:translateX(100%)}
.drawer.open,html[dir="ltr"] .drawer.open{transform:none}
html.a11y-stop-motion .drawer,html.a11y-stop-motion .drawer-scrim{transition:none}
@media(prefers-reduced-motion:reduce){.drawer,.drawer-scrim{transition:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink);outline:0}
.drawer-close{width:44px;height:44px;border:0;background:transparent;font-size:32px;line-height:1;color:var(--ink);cursor:pointer;border-radius:50%}
.drawer-close:hover{background:rgba(14,42,71,.06)}
.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 20px}
.drawer-foot{padding:16px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:10px;background:#fff}
.drawer-foot .fine{margin:0}
.drawer .empty{padding:30px 0;color:var(--ink2)}
.dl-list{list-style:none;display:grid;gap:12px}
.dl-line{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.dl-line img{width:52px;height:66px;object-fit:contain;background:var(--mist);border-radius:10px}
.dl-info{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}
.dl-info b{color:var(--ink);font-size:15.5px}
.dl-info .stepper{height:44px;align-self:flex-start}
.dl-info .st-btn{width:44px;font-size:20px}
.dl-info .st-input{width:44px;font-size:16px}
.dl-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-weight:700;color:var(--ink)}

/* ---------- checkout ---------- */
.co-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,40px);align-items:start}
@media(min-width:960px){.co-grid{grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}.co-aside{position:sticky;top:120px}}
.co-form{display:grid;gap:18px}
.fset{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2.4vw,26px);margin:0;background:var(--paper);min-width:0}
.fset>legend{float:inline-start;width:100%;font-family:var(--serif);font-weight:600;font-size:23px;margin-bottom:14px}
.fset>legend+*{clear:both}
.fset .hint{font-size:14px;color:var(--ink-soft);margin:-6px 0 12px}
.fgrid{display:grid;grid-template-columns:1fr;gap:14px 16px}
@media(min-width:620px){.fgrid{grid-template-columns:repeat(6,1fr)}.c2{grid-column:span 2}.c3{grid-column:span 3}.c6{grid-column:1/-1}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-size:15px;font-weight:700;color:var(--ink)}
.fld label .opt{font-weight:500;color:var(--ink-soft);font-size:13.5px}
.fld input:not([type=checkbox]):not([type=radio]),.fld select,.fld textarea{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid rgba(14,42,71,.22);border-radius:var(--r-sm);font:500 16px var(--sans);color:var(--ink);background:#fff;transition:border-color var(--d-fast)}
.fld textarea{min-height:84px;resize:vertical}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(14,42,71,.45)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--glacial-deep);outline-offset:1px;border-color:var(--glacial-deep)}
.fld input[dir="ltr"]{text-align:end}
.fld input,.fld select,.fld textarea{scroll-margin-top:128px}   /* the sticky header must not cover the field the first error scrolls to */
@media(max-width:880px){.fld input,.fld select,.fld textarea{scroll-margin-top:96px}}
.has-err input,.has-err select,.has-err textarea,[aria-invalid="true"]{border-color:#C4223F!important}
.fld-err{color:#A3122A;font-size:14px;font-weight:600;line-height:1.45}
.fld-err::before{content:"! ";font-weight:800}
.type-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
/* the delivery day chips (checkout) */
.day-pick{border:0;padding:0;margin:0;min-width:0}
.day-pick legend{font-weight:700;color:var(--ink);margin-bottom:8px;padding:0}
.day-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:6px}
@media(max-width:480px){.day-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.day-opt{position:relative;display:block;cursor:pointer}
.day-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.day-opt .do-body{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 8px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;text-align:center;transition:border-color var(--d-fast),background var(--d-fast);min-height:64px;justify-content:center}
.day-opt .do-body b{color:var(--ink);font-size:16px}
.day-opt .do-body span{color:var(--ink-soft);font-size:14px}
.day-opt .do-body small{font-size:12px;color:var(--glacial-deep);font-weight:700}
.day-opt:hover .do-body{border-color:rgba(14,42,71,.4)}
.day-opt input:checked+.do-body{border-color:var(--ink);background:rgba(95,182,220,.1);box-shadow:inset 0 0 0 1px var(--ink)}
.day-opt input:focus-visible+.do-body{outline:2px solid var(--glacial-deep);outline-offset:2px}
/* the business quote form (shop) */
.b2b .b2b-sizes{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;min-width:0}
.b2b .b2b-sizes legend{font-weight:700;color:var(--ink);padding:0;margin-bottom:6px;width:100%}
.b2b .b2b-sizes legend .opt{font-weight:400}
.b2b .b2b-sizes .check{display:inline-flex;width:auto;margin:0}
.b2b .fld-err{margin:4px 0 0;color:#7A1023;font-size:14px}
.b2b select{width:100%}
.type-opt{align-items:center}
.type-opt span{font-weight:700;color:var(--ink)}
.biz{margin-top:14px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink2);line-height:1.55;cursor:pointer;padding:6px 0}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:1px;accent-color:var(--ink)}
.check-wrap+.check-wrap{margin-top:8px}
.pay-opts{display:grid;gap:10px}
.po-wallets{align-self:flex-start;font-weight:700;color:var(--ink);letter-spacing:.02em;unicode-bidi:isolate}
.co-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.err-summary{border:2px solid #C4223F;background:#FDECEF;border-radius:var(--r-md);padding:16px 20px;color:#7A1023;outline:0}
.err-summary h2{font-size:18px;font-weight:800;margin-bottom:6px}
.err-summary ul{padding-inline-start:20px;display:grid;gap:4px}
.err-summary a{color:#7A1023!important;text-decoration:underline;font-weight:600}
.submit-msg{border-radius:var(--r-md);padding:14px 18px;background:#FDECEF;border:1px solid #E7A1B0;color:#7A1023;font-weight:600;outline:0}
.submit-msg a{color:#7A1023!important;text-decoration:underline}
.co-submit{display:grid;gap:12px}
.co-submit .fine{margin:0}
.co-aside{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px)}
.co-lines{list-style:none;display:grid;gap:10px;margin-bottom:8px}
.co-line{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-weight:700;color:var(--ink);font-size:15px}
.order-items .co-line{grid-template-columns:1fr auto}
.co-line img{width:40px;height:51px;object-fit:contain;background:var(--mist);border-radius:8px}
.co-name{display:flex;flex-direction:column;gap:1px}
.co-name small{font-weight:500;color:var(--ink-soft);font-size:13.5px}
.co-line.has-err{background:#FDECEF;border-radius:10px;padding:6px}
.secure-line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft)}
.secure-line svg{width:16px;height:16px;flex:0 0 auto}

/* ---------- order status ---------- */
.order-wrap{max-width:860px}
.order-head .eyebrow{margin-bottom:12px}
.order-lede{margin-top:12px;font-size:18px;color:var(--ink2);max-width:58ch}
.tracker{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:28px 0 26px;counter-reset:st}
.tracker li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.tracker li::before{content:"";position:absolute;top:8px;inset-inline-start:50%;width:100%;height:2px;background:var(--line);z-index:0}
.tracker li:last-child::before{display:none}
.tracker .dot{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--cream);border:2px solid rgba(14,42,71,.3)}
.tracker li.done{color:var(--ink)}
.tracker li.done .dot{background:var(--glacial-deep);border-color:var(--glacial-deep)}
.tracker li.done::before{background:var(--glacial-deep)}
.tracker li.cur{color:var(--ink);font-weight:800}
.tracker li.cur .dot{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(95,182,220,.3)}
.bank-box{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:clamp(18px,2.6vw,30px);margin-block:6px 26px}
.bank-box h2,.order-items h2{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink);margin-bottom:8px}
.bank-box>p{color:var(--ink2);font-size:16px}
.copy-list{display:grid;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.copy-row{display:grid;grid-template-columns:1fr;gap:2px 14px;padding:12px 16px;border-top:1px solid var(--line-soft);align-items:center}
.copy-row:first-child{border-top:0;background:rgba(95,182,220,.10)}
.copy-row dt{font-size:14px;color:var(--ink-soft);font-weight:600}
.copy-row dd{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;font-size:18px;color:var(--ink)}
.copy-row:first-child dd{font-family:var(--display);font-size:24px}
@media(min-width:620px){.copy-row{grid-template-columns:minmax(170px,.8fr) 1.6fr}}
.copy-btn{flex:0 0 auto;min-height:40px;min-width:80px;padding:8px 14px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:#fff;font:700 14px var(--sans);color:var(--ink);cursor:pointer}
.copy-btn:hover{background:var(--ink);color:var(--cream)}
.copy-btn.ok{background:var(--glacial-deep);border-color:var(--glacial-deep);color:#fff}
.bank-warn{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);background:#FFF6E5;border:1px solid #E9C27A;color:#5B3B00;font-weight:700;font-size:15.5px;line-height:1.6}
.bank-warn a{color:#5B3B00!important;text-decoration:underline}
.order-items{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px)}
.order-help{margin-top:22px;color:var(--ink2)}
.spinner{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(21,100,143,.3);border-top-color:var(--glacial-deep);vertical-align:-2px;margin-inline-end:6px;animation:kspin 1s linear infinite}
@keyframes kspin{to{transform:rotate(360deg)}}
html.a11y-stop-motion .spinner{animation:none}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

/* ---------- pay ---------- */
.pay-head .nav-inner{justify-content:space-between}
.pay-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,36px);align-items:start}
@media(min-width:960px){.pay-grid{grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr)}}
.pay-frame{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(8px,1.4vw,16px);min-height:200px}
.pay-frame iframe{display:block;width:100%;min-height:640px;border:0;border-radius:var(--r-sm);background:#fff}
@media(max-width:600px){.pay-frame iframe{min-height:720px}}
.pay-note{margin-top:12px}
.store-ft-min{padding:28px 0 36px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.store-ft-min nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:8px}
.store-ft-min a{color:var(--ink2)!important;font-weight:600}

/* ---------- footer tweaks (footer.ft from site-a) ---------- */
.page-store footer.ft .ft-top img{height:120px}
@media(max-width:600px){.page-store footer.ft .ft-top img{height:96px}}

/* ---------- small screens ---------- */
@media(max-width:420px){
  .wrap{padding-inline:16px}
  .pc-buy{flex-direction:column;align-items:stretch}
  .pc-buy .stepper{align-self:center}
  .pc-buy .btn{flex:none;width:100%}
  .type-opts{grid-template-columns:1fr}
  .tracker li{font-size:11.5px}
}

/* ---------- misc ---------- */
.fset-inner{border:0;padding:0;margin:0 0 4px;min-width:0}
.m-nav a.m-lang{margin-top:2px;font-size:15px;opacity:.8;font-family:var(--sans)}
.m-nav a.m-cta+a.m-lang{margin-top:10px}
.pay-head .secure-line{font-weight:700;color:var(--ink);font-size:15.5px}
.pay-head .secure-line svg{width:18px;height:18px}
.order-again{margin-top:22px}
.cat-note{margin:-12px 0 20px;font-size:15px;color:var(--ink-soft);font-weight:600}
.dd-line{display:block}
.co-review{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:clamp(16px,2.4vw,26px)}
.co-review h2{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink);margin-bottom:8px}
.review-list{display:grid;margin-top:12px;gap:8px}
.review-list div{display:grid;grid-template-columns:1fr;gap:2px}
@media(min-width:620px){.review-list div{grid-template-columns:150px 1fr;gap:12px}}
.review-list dt{font-size:14.5px;color:var(--ink-soft);font-weight:600}
.review-list dd{margin:0;font-weight:700;color:var(--ink);font-size:15.5px}
.ft-legal-links a.ft-cancel,.store-ft-min a.ft-cancel{font-weight:800;color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px}
.ft-company{display:inline-block;margin-top:4px;font-weight:600;color:var(--ink2)}
.page-store footer.ft a[href^="mailto:"],.store-ft-min a[href^="mailto:"]{color:var(--glacial-deep)}

/* pre-launch lead block (commerce.js soonNotice): buying is not open yet, leave details instead */
.prelaunch{background:#fff;border:1px solid rgba(21,100,143,.22);border-radius:var(--r-md);padding:22px 20px;margin-block:0 26px;box-shadow:0 10px 30px -18px rgba(14,42,71,.35)}
.prelaunch h2{font-family:var(--serif);font-size:24px;line-height:1.25;color:var(--ink);margin:0 0 6px}
.prelaunch .pl-sub{margin:0 0 14px;color:var(--ink-soft);font-size:16px}
.prelaunch .pl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.prelaunch .pl-wide{grid-column:1/-1}
.prelaunch .btn{margin-top:12px}
.prelaunch .pl-msg{margin:10px 0 0;font-size:15px;color:#7A1023;min-height:1em}
.prelaunch [aria-invalid="true"]{border-color:#C0392B!important}
.prelaunch .pl-ok h2{margin-bottom:4px}.prelaunch .pl-ok p{margin:0}
.prelaunch .pl-ok:focus{outline:none}
@media(max-width:640px){.prelaunch .pl-grid{grid-template-columns:1fr}.prelaunch h2{font-size:21px}}

/* ---------- facts strip (shop) ---------- */
.facts-strip{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-block:0 clamp(28px,4vw,48px)}
@media(min-width:900px){.facts-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts-strip li{background:#FCFBF8;padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.facts-strip b{font-family:var(--display);font-size:clamp(21px,2.2vw,26px);font-weight:700;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.facts-strip span{font-size:14px;color:var(--ink-soft);line-height:1.45}

/* ---------- product cards: true relative size + pre-launch CTA ---------- */
.pc-img{height:clamp(250px,27vw,320px)}
.prod-card.sz-330 .pc-img img{height:74%}
.prod-card.sz-500 .pc-img img{height:86%}
.prod-card.sz-1000 .pc-img img{height:100%}
.pc-soon{margin-top:12px;font-size:15px;color:var(--ink-soft);font-weight:600}
.pc-want{flex-direction:column;align-items:stretch;gap:10px}
.pc-want .btn{flex:0 0 auto}
.pc-want .pc-more{margin:0;padding:6px 0 0;text-align:center}
.prod-card .btn:active,.pdp-soon .btn:active,.biz-block .btn:active{transform:translateY(1px) scale(.99)}

/* ---------- origin band ---------- */
.origin{display:grid;grid-template-columns:1fr;margin-top:clamp(56px,8vw,104px);background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -40px rgba(14,42,71,.4)}
@media(min-width:860px){.origin{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}}
.origin-img img{display:block;width:100%;height:100%;max-height:520px;object-fit:cover}
.origin-copy{padding:clamp(26px,4vw,56px)}
.origin-copy h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1.12;color:var(--ink);text-wrap:balance}
.origin-copy .eyebrow{margin-bottom:10px}
.origin-copy p{margin-top:14px;font-size:17px;line-height:1.75;color:var(--ink2);max-width:52ch}
.text-link{display:inline-block;margin-top:18px;font-weight:700;font-size:16px}
.text-link::after{content:" \2190"}

/* ---------- business ---------- */
.biz-block{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:1fr;gap:18px 40px;align-items:center;padding:clamp(24px,4vw,44px);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--mist),rgba(255,255,255,.7))}
@media(min-width:900px){.biz-block{grid-template-columns:1.1fr 1fr auto}}
.biz-block h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,36px);color:var(--ink);line-height:1.15}
.biz-block .eyebrow{margin-bottom:10px}
.biz-block p{margin-top:8px;color:var(--ink2);font-size:16.5px;line-height:1.65}
.biz-points{list-style:none;display:grid;gap:9px}
.biz-points li{position:relative;padding-inline-start:26px;font-weight:600;color:var(--ink);font-size:16px}
.biz-points li::before{content:"";position:absolute;inset-inline-start:2px;top:.42em;width:12px;height:6px;border-left:2px solid var(--glacial-deep);border-bottom:2px solid var(--glacial-deep);transform:rotate(-45deg)}

/* ---------- pre-launch lead: split layout ---------- */
.prelaunch{display:grid;grid-template-columns:1fr;gap:24px 48px;margin-top:clamp(40px,6vw,72px);padding:clamp(24px,4vw,48px)}
@media(min-width:960px){.prelaunch{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.pl-side .eyebrow{margin-bottom:10px}
.prelaunch h2{font-size:clamp(26px,3vw,36px)}
.pl-steps{list-style:none;counter-reset:pl;display:grid;gap:14px;margin-top:22px}
.pl-steps li{counter-increment:pl;display:grid;grid-template-columns:34px 1fr;column-gap:12px}
.pl-steps li::before{content:counter(pl);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);font-weight:800;font-size:15px}
.pl-steps b{font-size:16.5px;color:var(--ink)}
.pl-steps span{font-size:15px;color:var(--ink-soft)}
.prelaunch:has(.pl-ok){display:block}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(48px,7vw,88px);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;font-size:17.5px;font-weight:700;color:var(--ink);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--glacial-deep);line-height:1;transition:transform var(--d-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 18px;color:var(--ink2);font-size:16px;line-height:1.7;max-width:68ch}

/* ---------- product page: key facts + pre-launch box ---------- */
.pdp-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pdp-facts li{display:flex;flex-direction:column;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.65);min-width:96px}
.pdp-facts b{font-family:var(--display);font-size:20px;color:var(--ink);line-height:1.2}
.pdp-facts span{font-size:13.5px;color:var(--ink-soft)}
.pdp-soon{margin-top:22px;padding:18px 20px;border-radius:var(--r-md);background:var(--mist);border:1px solid rgba(21,100,143,.18);display:grid;gap:14px}
.pdp-soon p{margin:0;font-size:16px;line-height:1.65;color:var(--ink2)}
.pdp-soon b{color:var(--ink)}
@media(min-width:560px){.pdp-soon .btn{justify-self:start}}

/* phones: product cards side by side (image | details) instead of tall stacked tiles */
@media(max-width:719px){
  .prod-card{flex-direction:row;align-items:stretch}
  .prod-card .pc-img{flex:0 0 38%;height:auto;min-height:236px;padding-top:12px;background:radial-gradient(120% 80% at 50% 100%,var(--mist),#fff 70%)}
  .prod-card .pc-img img{height:auto;max-height:210px;width:100%;object-fit:contain;object-position:50% 100%}
  .prod-card.sz-330 .pc-img img{max-height:160px}
  .prod-card.sz-500 .pc-img img{max-height:185px}
  .pc-body{padding:16px 14px 16px}
  .pc-size .num{font-size:34px}
  .pc-want .btn{padding:11px 14px;font-size:15px;min-height:46px}
  .origin-img img{max-height:280px}
}

/* links inside running text are underlined, never colour-only (WCAG 1.4.1) */
.page-store main p a:not(.btn):not(.text-link),.page-store main li a:not(.btn){text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   UX pass 04.10.2026 (web-design-guidelines + ui-ux-pro-max audit)
   ============================================================ */
/* the sticky header never covers what an anchor, the error summary or Tab brings into view */
html{scroll-padding-top:116px}
@media(max-width:880px){html{scroll-padding-top:84px}}
.m-nav{overscroll-behavior:contain}
.page-store main h2{text-wrap:balance}
.st-input,.cart-count,.sum dd,.bb-price{font-variant-numeric:tabular-nums}

/* purchase steps: cart -> details & payment -> confirmation */
.co-steps{display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:0 0 14px;font-size:14px;font-weight:600;color:var(--ink-soft);counter-reset:st}
.co-steps li{display:inline-flex;align-items:center;gap:8px;counter-increment:st}
.co-steps li::before{content:counter(st);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;font-size:12.5px;font-weight:800}
.co-steps li:not(:last-child){padding-inline-end:22px;position:relative}
.co-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-end:6px;top:50%;width:10px;border-top:1.5px solid var(--line)}
.co-steps li.done{color:var(--glacial-deep)}
.co-steps li.done::before{content:"✓";background:var(--glacial-deep);border-color:var(--glacial-deep);color:#fff}
.co-steps li[aria-current="step"]{color:var(--ink)}
.co-steps li[aria-current="step"]::before{background:var(--ink);border-color:var(--ink);color:#fff}

/* next to the buy button: delivery, payment, deposit, invoices */
.trust{list-style:none;display:grid;gap:8px;margin-top:18px;padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.7);border:1px solid var(--line-soft)}
.trust li{position:relative;padding-inline-start:26px;font-size:15px;line-height:1.5;color:var(--ink2)}
.trust li::before{content:"";position:absolute;inset-inline-start:3px;top:.45em;width:11px;height:6px;border-left:2px solid var(--glacial-deep);border-bottom:2px solid var(--glacial-deep);transform:rotate(-45deg)}

/* phones: price + action at the thumb once the real button is out of view */
.buy-bar{display:none}
@media(max-width:719px){
  .buy-bar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:14px;
    padding:10px max(16px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));
    background:rgba(247,244,238,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--line),0 -10px 28px -18px rgba(14,42,71,.5);
    transform:translateY(110%);visibility:hidden;transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s}
  .buy-bar.on{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .buy-bar .bb-price{display:flex;flex-direction:column;font-weight:800;font-size:19px;color:var(--ink);line-height:1.15}
  .buy-bar .bb-price small{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
  .buy-bar .btn{flex:0 0 auto;min-height:48px;padding-inline:22px}
  body.has-buy-bar #a11yTrigger{inset-block-end:calc(84px + env(safe-area-inset-bottom))}
  body.has-buy-bar .undo-note{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.has-buy-bar main{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){.buy-bar,.buy-bar.on{transition:none}}
html.a11y-stop-motion .buy-bar{transition:none}

/* "removed - undo" note */
.undo-note{position:fixed;z-index:1001;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,140%);visibility:hidden;
  display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;max-width:calc(100vw - 32px);padding:10px 12px 10px 18px;border-radius:14px;
  background:var(--ink);color:#F7F4EE;font-size:15px;box-shadow:0 16px 40px -18px rgba(14,42,71,.7);transition:transform .22s ease-out,visibility 0s linear .22s}
.undo-note.on{transform:translate(-50%,0);visibility:visible;transition:transform .22s ease-out,visibility 0s}
.undo-btn{min-height:40px;padding:6px 14px;border-radius:var(--r-pill);border:1.5px solid rgba(247,244,238,.6);background:transparent;color:#fff;font:700 15px var(--sans);cursor:pointer;touch-action:manipulation}
.undo-btn:hover{background:rgba(247,244,238,.14)}
.undo-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.undo-note,.undo-note.on{transition:none}}

.btn .spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff}

/* payment page: never a blank white box while the secure form loads */
.pay-frame{position:relative}
.pay-loading{position:absolute;inset:0 0 auto 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:160px;padding:20px;color:var(--ink2);font-size:16px;text-align:center}
.pay-stopped{margin-top:12px}

/* Cloudflare Turnstile: takes no room unless Cloudflare asks the visitor to tick the box */
.ts-box{display:flex;justify-content:center;margin-block:4px 10px}
.ts-box:empty{display:none}

/* delivery time per zone, when the client has set it */
.zo-eta{display:block;margin-top:3px;font-size:13.5px;font-weight:600;color:var(--glacial-deep)}
.order-again{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* product page: the number of cases as bottles and money */
.qty-calc{margin:8px 0 0;font-size:15px;color:var(--ink-soft);font-variant-numeric:tabular-nums;min-height:1.4em}

/* ---- the store in English, Arabic and Russian (05.10.2026) ----
   Logical properties already mirror the layout; these are the few rules that assumed a right-to-left page,
   and the font stacks with Arabic and Cyrillic glyphs (the same as each language's home page). */
html[dir="ltr"] .btn::before{clip-path:inset(0 100% 0 0)}
html[dir="ltr"] .btn:hover::before{clip-path:inset(0 0 0 0)}
html[dir="ltr"] .fld input[dir="ltr"]{text-align:start}
html[lang="ar"]{--serif:'Frank Ruhl Libre','Kostilatas Sans','Segoe UI',Tahoma,'Geeza Pro','Noto Naskh Arabic',system-ui,serif;--sans:'Kostilatas Sans','Segoe UI',Tahoma,'Geeza Pro','Noto Sans Arabic',system-ui,sans-serif;--display:'Frank Ruhl Libre','Kostilatas Sans','Segoe UI',Tahoma,'Geeza Pro','Noto Naskh Arabic',system-ui,serif}
html[lang="ru"]{--serif:'Frank Ruhl Libre','Kostilatas Sans',Georgia,'Times New Roman',system-ui,'Segoe UI',serif;--sans:'Kostilatas Sans',system-ui,'Segoe UI',sans-serif;--display:'Frank Ruhl Libre','Kostilatas Sans',Georgia,'Times New Roman',system-ui,'Segoe UI',serif}

/* ============================================================
   Storefront wave 0 (05.10.2026): defect sweep + extension slots
   ============================================================ */
/* render slots for feature modules (STORE_EXTENSIONS.md): no room taken until a module fills one */
.kos-slot:empty{display:none}
.kos-slot{min-width:0}

/* D17: the current page in the header is a solid pill with a small underline, not a ring that reads as a stuck focus */
.page-store .nav-tools .store-link[aria-current="page"]{box-shadow:none}
.page-store .nav-tools .store-link[aria-current="page"]::after{content:"";position:absolute;inset-inline:22%;bottom:-7px;height:2px;border-radius:2px;background:var(--magenta,#E11A86)}

/* D2: the footer starts below the first screen while the cart, the checkout and the tracking page load, so it
   never jumps when they render (CLS) */
.page-store:is([data-page="cart"],[data-page="checkout"],[data-page="order"],[data-page="track"],[data-page="quote"],[data-page="standing"]) main{min-height:calc(100svh - 60px)}
#cartRoot[aria-busy="true"]{min-height:420px}

/* D10: the shop opens on the products. A shorter hero on desktop; on phones the bottles are in the cards below */
.shop-hero{padding-block:clamp(4px,1.2vw,14px) clamp(18px,2.4vw,30px)}
.sh-copy h1{font-size:clamp(34px,3.9vw,54px)}
.sh-copy p{margin-top:12px}
.sh-points{margin-top:16px}
@media(min-width:900px){
  .page-store[data-page="shop"] main{padding-top:16px}
  .shop-hero{grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:32px;align-items:end;min-height:260px}
  .sh-copy p{max-width:64ch;font-size:18px;line-height:1.65}
  .sh-points li{font-size:13.5px;padding:6px 13px}
  /* two rows whatever the font: the payment chip always starts the second row, so the hero keeps its height when the web font arrives (CLS) */
  .sh-points{display:grid;grid-template-columns:auto auto 1fr;justify-items:start}
  .sh-points li:nth-child(3){grid-column:1/-1}
  .sh-bottles{padding-top:0;gap:clamp(6px,1.4vw,18px)}
  .sh-bottles img:nth-child(1){height:clamp(110px,10vw,150px)}
  .sh-bottles img:nth-child(2){height:clamp(130px,12vw,182px)}
  .sh-bottles img:nth-child(3){height:clamp(150px,14vw,214px)}
}
@media(min-width:1180px){.sh-copy h1,.sh-points li{white-space:nowrap}}
@media(max-width:899px){
  .sh-bottles{display:none}
  .sh-copy .eyebrow{margin-bottom:10px}
  .sh-copy p{font-size:16.5px;line-height:1.6}
  .sh-points{gap:6px;margin-top:12px}
  .sh-points li{font-size:13px;padding:5px 11px}
}
.facts-strip{margin-block:clamp(28px,4vw,48px) 0}
.pc-img{height:clamp(196px,14.5vw,212px)}
#catH{margin-bottom:6px}
.cat-note{margin:0 0 16px}
@media(min-width:900px){.prod-card .pc-body{padding-top:14px}.price{margin-top:8px}}

/* D7: one card per size. The grid follows the number of cards, so no card is left alone on a row */
@media(min-width:720px){
  .prod-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1100px){.prod-grid[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pc-packs{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pc-pack{min-height:40px;padding:6px 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;font:700 14px var(--sans);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:border-color var(--d-fast),background var(--d-fast)}
.pc-pack:hover{border-color:var(--ink)}
.pc-pack[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pc-pack.is-out{color:var(--ink-soft);border-style:dashed}
.pc-pack.is-out[aria-pressed="true"]{color:var(--cream);border-style:solid}
.pc-pack small{font-size:12.5px;font-weight:600}
.pc-pack:focus-visible{outline:2px solid var(--glacial-deep);outline-offset:2px}

/* product page: price and the button before the story (D10). Phones: a shorter picture */
.pdp-info .pdp-lede{margin-top:22px}
@media(max-width:879px){
  .pdp-media{height:clamp(220px,58vw,300px);padding-top:14px}
  .pdp-info .eyebrow{margin-bottom:8px}
  .pdp-h1{font-size:clamp(28px,7.4vw,40px)}
  .size-pick{margin-top:14px}
  .pdp-info .price{margin-top:16px}
  .pdp-info .price-main{font-size:clamp(28px,7vw,38px)}
  .pdp-buy{margin-top:14px}
}

/* D6: compact delivery areas, so the summary and its button fit the first screen on a laptop */
.summary h2{margin-bottom:10px}
.zones{gap:6px;margin-bottom:10px}
.zones legend{margin-bottom:6px}
.zone-opt{padding:10px 14px;align-items:center}
.zo-body{gap:1px;flex:1;min-width:0}
.zo-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.zo-rules{font-size:13px;line-height:1.45}
.zo-rules .zo-eta{display:inline;margin:0;font-size:inherit}
.summary .sum-row{padding:7px 0}
.summary .btn{margin-top:12px}
.summary > .fine{margin-top:12px;font-size:13px}
.go-block{margin-top:6px}
.add-min{margin-top:10px}
@media(min-width:960px){.page-store[data-page="cart"] .page-head{padding-block:4px 18px}.page-store[data-page="cart"] .page-head h1{font-size:clamp(32px,3.4vw,46px)}}

/* D9: the deposit as its own component under the deposit-inclusive items row */
.sum-row.sub{border-top:0;padding-top:0;margin-top:-4px;font-size:13.5px;color:var(--ink-soft)}
.sum-row.sub dt{padding-inline-start:14px;position:relative}
.sum-row.sub dt::before{content:"";position:absolute;inset-inline-start:2px;top:.15em;width:7px;height:.6em;border-inline-start:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.6}
.sum-row.sub dd{font-weight:600;color:var(--ink2)}

/* D14: the enclosed checkout header: the logo, a secure badge, help and the language */
.co-head .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.co-head .shop-logo{height:64px}
.co-secure{margin:0;font-weight:700;color:var(--ink);font-size:15.5px}
.co-secure svg{width:18px;height:18px}
.co-tools{display:flex;align-items:center;gap:14px}
.co-help{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--glacial-deep);text-decoration:underline;text-underline-offset:3px}
.co-help:focus-visible{outline:2px solid var(--glacial-deep);outline-offset:3px}
@media(max-width:560px){
  .co-head .shop-logo{height:48px}
  .co-secure{font-size:13.5px;gap:5px}
  .co-tools{gap:8px}
  .co-help{font-size:0;width:40px;height:40px;min-height:40px;justify-content:center;border:1.5px solid rgba(14,42,71,.35);border-radius:50%;text-decoration:none}
  .co-help::before{content:"?";font-size:18px;font-weight:800;color:var(--ink)}
  .co-head .nav-lang{padding:8px 10px}
}
.page-focused .store-ft-min{margin-top:0}

/* D13: one summary on phone checkout. The total in one line at the top (it leads to the recap), the recap with the
   lines right above the button, and no side summary under the button */
.co-mini{margin:0 0 14px}
.co-mini-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink)!important;text-decoration:none!important;font-weight:700}
.co-mini-bar .cm-v{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:17px}
.co-mini-bar .cm-go{font-size:12.5px;font-weight:600;color:var(--glacial-deep);text-decoration:underline;text-underline-offset:2px}
.co-mini-bar:focus-visible{outline:2px solid var(--glacial-deep);outline-offset:2px}
@media(min-width:960px){.co-mini{display:none!important}.co-review .rv-lines{display:none}}
@media(max-width:959px){.co-aside{display:none}}
.rv-lines{margin:4px 0 6px}
.rv-lines .co-lines{margin-bottom:2px}
.rv-lines .back-link{margin-top:2px;font-size:14.5px}
/* phones: apartment and floor side by side */
@media(max-width:619px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid>*{grid-column:1/-1}
  .fgrid>.fld:has(#f-apt),.fgrid>.fld:has(#f-floor){grid-column:auto}
}

/* D15: the box's label is a plain sentence (a tap ticks it); the documents are links under it */
.check-docs{margin:2px 0 0;padding-inline-start:34px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.check-docs a{font-weight:700}

/* D5: phones: the accessibility button sits at the end of the row (checkboxes, radios and steppers start at the
   other side), a little smaller, and above the sticky price bar when it shows. Still one tap away on every page. */
@media(max-width:719px){
  .page-store #a11yTrigger{inset-inline-start:auto;inset-inline-end:10px;inset-block-end:calc(14px + env(safe-area-inset-bottom));width:46px;height:46px}
  .page-store #a11yTrigger svg{width:25px;height:25px}
  body.page-store.has-buy-bar #a11yTrigger{inset-block-end:calc(86px + env(safe-area-inset-bottom))}
  body.page-store.cookie-open #a11yTrigger{inset-block-end:calc(var(--ck-h, 104px) + 12px)}
  .page-store #a11yPanel{inset-inline-start:auto;inset-inline-end:10px;transform:none}
  .page-store main{padding-bottom:max(76px,clamp(56px,7vw,96px))}
}
/* the catalogue heading and its price note on one line on wide screens */
@media(min-width:900px){
  section[aria-labelledby="catH"]{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:18px}
  section[aria-labelledby="catH"]>*:not(#catH):not(.cat-note){grid-column:1/-1}
  section[aria-labelledby="catH"] .cat-note{margin:0}
  #catH{margin-bottom:16px}
  .shop-hero{padding-bottom:16px}
}
/* a sold-out size says so in words on the product page too (UX review R11), and a sold-out product points to what is in stock */
.sz.is-out:not(.on){color:#6B7280;border-style:dashed}
.sz .sz-out{font-weight:600;font-size:13.5px}
.stock-alt{margin:8px 0 12px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.stock-alt a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* phones: the first screen of the shop shows a price and an "add" button (UX review R14): the long intro, the three pills and the
   small label above the title step aside (the delivery card and the price note say the same things) */
@media (max-width:640px){
  .shop-hero .eyebrow,.shop-hero .sh-copy>p,.shop-hero .sh-points{display:none}
  .shop-hero{padding-block:2px 8px;min-height:0;gap:0}
  .shop-hero h1{margin:0}
  .cat-note{margin:0 0 10px}
}
/* checkout on phones: private / business is one compact row (private already chosen), so the name field is near the top (UX review R18) */
@media (max-width:640px){
  .type-opts{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:0}
  .type-opt{padding:6px 12px;min-height:44px;gap:8px}
}

/* 10.10.2026 (owner): the card picture is centred and large on every screen, with a "bottle / case" switch on it */
.pc-media{position:relative}
.pc-media .pc-img{position:relative}
.pc-view{position:absolute;top:12px;inset-inline:0;margin-inline:auto;width:max-content;z-index:2;display:flex;gap:2px;padding:3px;border-radius:100px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px -6px rgba(14,42,71,.35)}
.pc-view button{font:inherit;font-size:13.5px;font-weight:700;min-height:36px;padding:0 14px;border:0;border-radius:100px;background:transparent;color:var(--ink);cursor:pointer;transition:background var(--d-base,.2s) var(--ease),color var(--d-base,.2s) var(--ease)}
.pc-view button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pc-view button:focus-visible{outline:2px solid var(--glacial-deep);outline-offset:2px}
.pc-media.is-pack .pc-img{align-items:center;padding-top:52px}
.pc-media.is-pack .pc-img img{height:auto;width:auto;max-width:92%;max-height:100%;object-fit:contain}
@media(max-width:719px){
  .prod-card{flex-direction:column}
  .prod-card .pc-media .pc-img{flex:none;height:360px;min-height:0;padding-top:58px;background:radial-gradient(90% 75% at 50% 100%,var(--mist),#fff 72%)}
  .prod-card .pc-media .pc-img img{height:100%;max-height:none;width:auto;object-position:50% 100%}
  .prod-card.sz-330 .pc-media .pc-img img{height:90%;max-height:none}
  .prod-card.sz-500 .pc-media .pc-img img{height:100%;max-height:none}
  .prod-card .pc-media.is-pack .pc-img{align-items:center;padding:58px 12px 12px}
  .prod-card .pc-media.is-pack .pc-img img{height:auto;max-height:100%;width:100%;max-width:330px;object-position:50% 50%}
  .prod-card .pc-body{align-items:center;text-align:center}
  .prod-card .pc-packs{justify-content:center}
}
/* the static cards shown before the catalog arrives have the picture straight in the card: same size, so nothing jumps */
@media(max-width:719px){.prod-card>.pc-img{flex:none;height:360px;min-height:0;padding-top:58px;background:radial-gradient(90% 75% at 50% 100%,var(--mist),#fff 72%)}.prod-card>.pc-img img{height:100%;max-height:none;width:auto;object-position:50% 100%}.prod-card.sz-330>.pc-img img{height:90%}}
/* 10.10.2026 (owner): the bottles are the stage. Desktop and tablet: a tall picture area with room kept for the bottle / case switch,
   so the switch never covers a bottle; the bottles fill it */
@media(min-width:720px){
  .prod-card .pc-media .pc-img,.prod-card>.pc-img{height:clamp(380px,34vw,480px);padding-top:66px}
  .prod-card.sz-330 .pc-media .pc-img img,.prod-card.sz-330>.pc-img img{height:80%}
  .prod-card.sz-500 .pc-media .pc-img img,.prod-card.sz-500>.pc-img img{height:92%}
  .prod-card.sz-1000 .pc-media .pc-img img,.prod-card.sz-1000>.pc-img img{height:100%}
  .prod-card .pc-media.is-pack .pc-img{padding:66px 14px 14px}
  .pc-view{top:14px}
}