/* Storefront layout: the shell (shell.js) and the core pages. Layout and tokens only; components live in design-system/rada.css. */

/* ───────── Shared layout helpers ─────────
   Rhythm: 8 inside a group · 16 between groups · 24 between blocks of a panel · 24 (16 on mobile) between panels · 48 before a rail. */
.r-root{--s-gutter:var(--space-4);--s-gap:var(--space-6)}
.s-wrap{width:100%;max-width:calc(var(--container) + 2 * var(--s-gutter));margin-inline:auto;padding-inline:var(--s-gutter)}
.s-main{display:grid;gap:var(--space-3);min-width:0;padding-top:var(--space-8)}
.s-main>*{min-width:0}
.s-sections{display:grid;gap:var(--s-gap);min-width:0}
.s-sections>*{min-width:0}
.s-sections>[id]{scroll-margin-top:calc(var(--r-sticky-top,0px) + var(--space-16))}
.s-section{display:grid;gap:var(--space-4);min-width:0}
.s-section>*{min-width:0}
.s-section--rail{margin-top:var(--space-6)}
.s-stack{display:grid;gap:var(--space-3);min-width:0}
.s-stack--tight{gap:var(--space-1)}
.s-stack--loose{gap:var(--space-6)}
.s-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-width:0}
.s-row--between{justify-content:space-between}
.s-split{display:grid;gap:var(--space-6);align-items:start;min-width:0}
.s-split>*{min-width:0}
.s-prose{display:grid;gap:var(--space-3);max-width:62ch}
.s-prose ul{margin:0;padding-inline-start:var(--space-6)}
.s-links{display:grid;margin:0;padding:0;list-style:none}
.s-points{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.s-points li{display:flex;align-items:flex-start;gap:var(--space-3)}
.s-points svg.lucide{margin-top:3px;color:var(--cypress)}
.s-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2)}
.s-line>svg.lucide{color:var(--cypress)}
.s-divide{padding-top:var(--space-4);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){html:not([data-motion=reduced]){scroll-behavior:smooth}}
@media (min-width:641px){
  .s-rail .r-products{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media (min-width:961px){
  .r-root{--s-gutter:var(--space-6);--s-gap:var(--space-8);--r-sticky-top:107px}
  .s-main{padding-top:var(--space-8)}
  .s-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12)}
  .s-points--cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-12)}
  .s-section--rail{margin-top:var(--space-8)}
}

/* ───────── Shell: announcement, header (row 1: wordmark, search, tools · row 2: categories, utility links) ───────── */
.s-announce{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height-sm);padding-inline:var(--s-gutter);background:var(--cypress-deep);color:var(--on-cypress);font-size:13px;text-align:center}
.s-announce a{text-decoration:none}
.s-announce .r-icon-btn{color:inherit}
.s-header{position:relative;z-index:var(--z-header);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-4);min-height:0;padding:var(--space-2) var(--s-gutter) var(--space-3)}
.s-search{position:relative;grid-column:1/-1;grid-row:2}
.s-header .s-menu{display:inline-flex;width:auto;gap:6px;padding-inline:10px;font-size:12px;white-space:nowrap}
@media (min-width:641px){.s-header .s-menu{display:none}}
.s-search .r-search--soft .r-input{border-color:transparent;border-radius:var(--radius-full);background:color-mix(in srgb,var(--tint) 65%,var(--surface))}
@media (min-width:641px){.s-header .s-account-link{display:inline-flex;width:auto;flex-direction:row-reverse;gap:6px;padding-inline:8px;font-size:12px;font-weight:600;white-space:nowrap;text-decoration:none}}
.s-header .s-account-link svg{width:18px;height:18px}
.s-search-panel{position:absolute;top:calc(100% + var(--space-2));inset-inline:0;z-index:var(--z-popover);display:grid;gap:var(--space-4);max-height:70dvh;overflow:auto;padding:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
.s-search-panel section{display:grid;gap:var(--space-1)}
.s-search-panel .r-link{min-height:var(--control-height)}
.s-hit{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--space-1) var(--space-3);padding:var(--space-1) 0;text-decoration:none}
.s-hit img{grid-row:span 2;width:48px;height:60px;border-radius:var(--radius-sm);object-fit:cover}
.s-hit .r-price{grid-column:2}
.s-utility{display:none}
@media (max-width:640px){
  .s-header .r-nav,.s-desk{display:none}
}
@media (min-width:641px){.s-menu{display:none}}
@media (min-width:641px){
  .s-header{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:var(--control-height) var(--control-height);gap:var(--space-1) var(--space-8);padding:var(--space-3) var(--s-gutter);transition:grid-template-rows 220ms var(--ease-out),row-gap 160ms var(--ease-out)}
  .s-header.is-nav-collapsed{grid-template-rows:var(--control-height) 0;row-gap:0}
  .s-search{grid-column:2;grid-row:1;width:min(520px,100%);justify-self:center}
  .s-header .r-nav{grid-column:1/-1;grid-row:2;min-height:0;gap:var(--space-8);overflow:hidden;opacity:1;transform:translateY(0);transform-origin:top;transition:opacity 160ms var(--ease-out),transform 220ms var(--ease-out)}
  .s-header .r-nav>button{align-self:center;height:16px;min-height:16px;line-height:16px}
  .s-header .r-nav>button::after{bottom:-6px}
  .s-header.is-nav-collapsed .r-nav{opacity:0;transform:translateY(-5px);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.s-header,.s-header .r-nav,.s-utility{transition:none}}
@media (min-width:961px){
  .s-header{position:sticky;top:0;padding-inline:max(var(--s-gutter),calc((100% - var(--container)) / 2))}
  .s-header .r-nav{grid-column:1/3}
  .s-utility{display:flex;grid-column:3;grid-row:2;align-items:center;justify-content:flex-end;min-height:0;gap:var(--space-6);overflow:hidden;opacity:1;transform:translateY(0);transform-origin:top;transition:opacity 160ms var(--ease-out),transform 220ms var(--ease-out)}
  .s-header.is-nav-collapsed .s-utility{opacity:0;transform:translateY(-5px);pointer-events:none}
  .s-utility a{text-decoration:none}
  .s-utility__phone{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .s-utility__phone svg{width:11px;height:11px;color:var(--ink)}
  .s-header .r-mega{padding-inline:max(var(--s-gutter),calc((100% - var(--container)) / 2))}
}

/* ───────── Shell: cart drawer extras ───────── */
.s-drawer-more{padding-block:var(--space-6)}
.s-drawer-more .r-products{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ───────── Shell: footer (on cypress-deep): trust strip · contact and links · legal ───────── */
.s-footer{margin-top:var(--space-12);padding-bottom:var(--r-dock);background:var(--cypress-deep);color:var(--on-cypress)}
@media (max-width:640px){.s-footer{padding-bottom:calc(var(--r-dock) + 88px)}} /* last line clears the chat launcher */
.s-footer__in{display:grid;gap:var(--space-8);max-width:calc(var(--container) + 2 * var(--s-gutter));margin-inline:auto;padding:var(--space-8) var(--s-gutter) var(--space-6)}
.s-footer__in>*+*{padding-top:var(--space-8);border-top:1px solid color-mix(in srgb,var(--on-cypress) 14%,transparent)}
.s-footer .r-assurances{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-footer .r-assurances--quad>li{border:0}
.s-footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-6)}
.s-footer__contact{grid-column:1/-1;display:grid;gap:var(--space-1);justify-items:start}
.s-footer .r-wordmark{color:var(--lime-200)}
.s-footer .r-wordmark>img{filter:brightness(0) invert(1)}
.s-footer__cols h2{color:color-mix(in srgb,var(--on-cypress) 64%,transparent)}
.s-footer__cols ul{display:grid;margin:var(--space-2) 0 0;padding:0;list-style:none}
.s-footer__cols li{display:flex;align-items:center;min-height:var(--control-height-sm)}
.s-footer a,.s-footer__btn{color:inherit;text-decoration:none}
.s-footer__btn{padding:0;border:0;background:none;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.s-footer :focus-visible{outline-color:var(--lime-200)}
.s-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-6);color:color-mix(in srgb,var(--on-cypress) 72%,transparent)}
@media (min-width:961px){
  .s-footer{margin-top:var(--space-16)}
  .s-footer__in{gap:var(--space-12);padding-top:var(--space-12)}
  .s-footer__in>*+*{padding-top:var(--space-12)}
  .s-footer .r-assurances{grid-template-columns:repeat(4,minmax(0,1fr))}
  .s-footer__cols{grid-template-columns:2fr repeat(4,minmax(0,1fr));gap:var(--space-8)}
  .s-footer__contact{grid-column:auto}
  .s-footer__legal{padding-top:var(--space-6)}
}

/* ───────── product.html ───────── */
.s-pdp{display:grid;gap:var(--s-gap);min-width:0}
.s-pdp>*{min-width:0}
.s-buy{display:grid;gap:var(--space-4);align-content:start}
.s-gallery{display:grid;gap:var(--space-4);align-content:start;min-width:0}
.s-price-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.s-cat{color:var(--ink-muted);font:400 12px/1.6 var(--font-sans)}
.s-cat .r-link{font-size:12px}
.s-benefits+h2{margin-top:var(--space-2)}
@media (min-width:641px){.s-sections>.r-anchor-nav{display:none}}
.s-buy__main{display:grid;gap:var(--space-6)}
.s-buy__actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center}
.s-signup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:end}
.s-bundle{display:grid;gap:var(--space-4)}
@media (max-width:640px){
  .s-sections .r-stats--band{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-4)}
}
@media (min-width:961px){
  .s-pdp{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8)}
  .s-pdp{align-items:start}
  .s-pdp>:first-child{grid-column:span 5}
  .s-buy{grid-column:span 7}
}

/* ───────── Purchase path: shared pieces (rails that scroll sideways, compact order lines, chip links) ───────── */
.s-scroller .r-products{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(156px,44%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:2px 2px var(--space-3)}
.s-scroller .r-product{scroll-snap-align:start}
.s-mini{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.s-mini li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--space-3);align-items:center}
.s-mini img{width:48px;height:60px;border-radius:var(--radius-sm);object-fit:cover}
.s-mini li>span{display:grid;min-width:0}
.s-mini strong{font-weight:500;font-size:14px}
.s-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.s-arrivals__title{display:flex;align-items:center;gap:var(--space-2)}
.s-arrivals__mark{display:grid;place-items:center;color:var(--cypress)}
.s-arrivals__mark svg{width:1.15em;height:1.15em;transform-origin:50% 100%}
.s-arrivals.is-revealed .s-arrivals__mark svg{animation:s-arrivals-sprout var(--duration-spring) var(--ease-spring) both}
@keyframes s-arrivals-sprout{from{opacity:.65;transform:translateY(3px) rotate(-7deg) scale(.94)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.s-arrivals.is-revealed .s-arrivals__mark svg{animation:none}}
.s-full-banner{margin:0;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface)}
.s-full-banner img{display:block;width:100%;height:auto}
.s-category-banners .r-cat-cards{grid-template-columns:repeat(4,minmax(0,390px));justify-content:center}
@media (max-width:640px){.s-category-banners .r-cat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* A full-bleed brand field: each category pill swaps the recommendation rail beneath it. */
.s-recommendations{position:relative;isolation:isolate;display:grid;width:100vw;gap:var(--space-6);margin-inline:calc(50% - 50vw);padding:var(--space-8) var(--s-gutter);overflow:hidden;background:#1164B4;color:#fff}
.s-recommendations::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#ffffff06 1px,transparent 1px);background-size:20px 20px}
.s-sections>.s-section.s-recommendations>.s-head .heading-sm{display:flex;align-items:center;gap:var(--space-2);color:#fff}
.s-recommendations .heading-sm svg{width:1.1em;height:1.1em}
.s-recommendations .s-head{align-items:center}
.s-recommendations .s-head .r-link{color:#fff}
.s-recommendations .caption{display:none}
.s-recommendations .r-tabs{max-width:100%;padding:0;overflow-x:auto;background:transparent}
.s-recommendations .r-tabs__list{gap:var(--space-2)}
.s-recommendations .r-tabs__list>button{min-height:44px;padding-inline:var(--space-4);border:1px solid #ffffff70;border-radius:var(--radius-full);background:#ffffff08;color:#fff;transition:transform 140ms var(--ease-out)}
.s-recommendations .r-tabs__list>button[aria-selected=true]{background:#ffffff30;border-color:#fff;color:#fff}
.s-recommendations .r-tabs__list>button:active{transform:scale(.97)}
.s-recommendations .r-tabs__active{display:none}
.s-recommendations .r-tabs:focus-within{outline-offset:4px}
.s-recommendations .r-tabs__list>button:focus-visible{outline:2px solid #f5f5f6;outline-offset:3px}
.s-recommendations .r-rail__dot::before{background:#ffffff52}
.s-recommendations .r-rail__dot[aria-current]::before{background:#f5f5f6}
@media (hover:hover) and (pointer:fine){.s-recommendations .r-tabs__list>button:not([aria-selected=true]):hover{background:#ffffff16;color:#f5f5f6}}
@media (prefers-reduced-motion:reduce){.s-recommendations .r-tabs__list>button{transition:none}.s-recommendations .r-tabs__list>button:active{transform:none}}
.s-recommendations .r-rail{width:100%}
.s-recommendations__products{position:relative;min-width:0;min-height:240px}
.s-recommendations .s-recommendations__products{padding-inline:0}
.s-recommendations .r-rail__nav{top:calc(50% - var(--control-height));inset-inline-start:auto;inset-inline-end:var(--space-2)}
.s-recommendations .r-rail__nav--prev{inset-inline-start:var(--space-2);inset-inline-end:auto}
.s-recommendations .s-recommendations__products .r-products{margin-block-end:0;padding-block-end:var(--space-4);scrollbar-width:none}
.s-recommendations .s-recommendations__products .r-products::-webkit-scrollbar{display:none}
.s-recommendations__products .r-products{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:220px;justify-content:start;gap:var(--space-4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#ffffff80 transparent;padding-block:var(--space-2) var(--space-4)}
.s-recommendations__products .r-product{scroll-snap-align:start}
.s-recommendations__loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#fff}
.s-recommendations__loading[hidden]{display:none}
.s-travel-mugs .s-recommendations__products .r-products{grid-template-columns:264px;grid-auto-columns:220px;align-items:stretch;padding-block:32px 20px}
.s-category-showcase{display:grid;grid-template-columns:264px minmax(0,1fr);gap:var(--space-4);align-items:stretch;min-width:0;padding-top:24px}
.s-category-showcase>.s-recommendations__products{min-width:0;min-height:0}
.s-travel-mugs .s-category-showcase .r-products{grid-template-columns:none;padding-block:0}
.s-category-showcase>.s-travel-mugs__banner{margin-block:-24px 0}
@media (max-width:640px){.s-category-showcase{grid-template-columns:180px minmax(0,1fr);gap:var(--space-3)}}
.s-travel-mugs .r-product__title{min-height:3.6em}
.s-coffee{background:radial-gradient(ellipse 120% 110% at 0% 0%,#c78b5273 0%,#96603a3d 42%,transparent 85%),#38251f;color:#fff8ef}
.s-coffee::before{background-image:radial-gradient(ellipse 3px 5px at 12px 12px,#e2b99426 65%,transparent 75%);background-size:48px 48px}
.s-coffee__intro{margin:0;color:#f0dccb;font-size:14px;line-height:1.9}
.s-coffee .r-product__title{min-height:3.6em}
.s-travel-mugs::before{background-image:url('../images/home/travel-mug-pattern.svg');background-size:144px 144px;filter:invert(1);opacity:.045}
.s-coffee.s-travel-mugs::before{background-image:url('../images/home/coffee-bean-pattern.svg');background-size:112px 112px;background-repeat:repeat;filter:invert(1);opacity:.045}
.s-category-icon{display:inline-block;flex:none;width:28px;height:28px;background:currentColor;mask:var(--category-icon) center/contain no-repeat;-webkit-mask:var(--category-icon) center/contain no-repeat}
.s-category-icon--coffee{--category-icon:url('../images/home/coffee-bean.svg')}
.s-category-icon--mug{--category-icon:url('../images/home/travel-mug-icon.png')}
.s-coffee .s-travel-mugs__banner{background:#e7d3bc;color:#38251f}
.s-kitchen{background:radial-gradient(ellipse at 0 0,#9eae7338,transparent 70%),#244737}
.s-kitchen.s-travel-mugs::before{background-image:url('../images/home/kitchen-pattern.svg');background-size:144px 144px;filter:none;opacity:.045}
.s-kitchen .s-travel-mugs__banner{background:#dfe7d7;color:#244737}
.s-kitchen .r-tabs__list>button[aria-selected=true]{background:#3e7555;border-color:#a0c9ad;color:#fff}
.s-kitchen>[data-rails-tabs]{justify-self:end;width:max-content;max-width:100%}
.s-travel-mugs__banner{position:relative;display:block;align-self:stretch;margin-block:-24px 0;min-height:0;overflow:hidden;border-radius:var(--radius-lg);background:#bdc8e2;color:#173452;text-decoration:none;scroll-snap-align:start}
.s-travel-mugs__banner>picture{position:absolute;inset:0;display:block}
.s-travel-mugs__banner>picture>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
@media (min-width:641px){.s-kitchen .s-travel-mugs__banner>picture>img{object-fit:cover;object-position:center}}
.s-travel-mugs__copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-4);max-width:100%;margin-inline-end:auto}
.s-travel-mugs__copy>strong{font:600 28px/1.6 var(--font-display)}
.s-travel-mugs__copy>span{font-size:14px}
.s-travel-mugs__cta{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:#fff;color:var(--cypress)}
.s-travel-mugs__cta svg{width:18px;height:18px}
.s-travel-mugs__banner:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:640px){.s-travel-mugs .s-recommendations__products .r-products{grid-template-columns:180px;grid-auto-columns:minmax(150px,44vw)}.s-travel-mugs__copy>strong{font-size:24px}}
@media (max-width:640px){
  .s-travel-mugs{grid-template-columns:minmax(0,1fr)}
  .s-travel-mugs>.s-category-showcase{display:contents}
  .s-travel-mugs .s-category-showcase>.s-travel-mugs__banner{order:-1;width:100%;aspect-ratio:3/1;min-height:170px;margin:0;align-self:auto}
  .s-kitchen .s-category-showcase>.s-travel-mugs__banner{aspect-ratio:auto;min-height:0}
  .s-kitchen .s-travel-mugs__banner>picture{position:static}
  .s-kitchen .s-travel-mugs__banner>picture>img{width:100%;height:auto;object-fit:contain}
  .s-travel-mugs .s-category-showcase>.s-recommendations__products{width:100%}
  .s-travel-mugs .s-category-showcase .r-products{grid-template-columns:none}
  .s-travel-mugs__banner>picture>img{object-position:center}
  .s-travel-mugs__copy{position:absolute;inset-block-start:20%;inset-inline-start:24px;max-width:calc(54% - 24px);margin:0;padding:0}
  .s-travel-mugs__copy>strong{font-size:clamp(32px,7vw,40px);line-height:1.2;text-wrap:balance}
}
@media (max-width:640px){.s-recommendations__products .r-products{grid-auto-columns:minmax(150px,44vw);gap:var(--space-3)}}
@media (min-width:961px){.s-recommendations{padding-block:var(--space-12)}}
@media (min-width:641px){
  .s-scroller .r-products{grid-template-columns:none;grid-auto-columns:minmax(240px,calc((100% - 3 * var(--space-4)) / 4))}
}

/* ───────── index.html ───────── */
.s-hero{display:grid;gap:var(--space-6);align-items:center;overflow:hidden}
.s-hero h1{text-wrap:balance}
.s-hero__photo{justify-self:center;width:min(480px,92%)}
.s-look{display:grid;gap:var(--space-6);align-items:center}
.s-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4)}
.s-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4);align-items:start}
.s-club{display:grid;gap:var(--space-6)}
.s-steps{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none;counter-reset:step}
.s-shortcuts{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px}
.s-shortcuts .r-chip{flex:none}
.s-sections--airy{gap:calc(var(--space-8) + var(--space-2))}
.s-offers{display:grid;gap:var(--space-4);padding:0;overflow:hidden}
@media (max-width:640px){
  .s-short>:nth-child(n+2){display:none}
  .s-hero__photo{width:min(300px,80%)}
}
@media (min-width:641px){
  .s-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:961px){
  .s-shortcuts{display:none}
  .s-sections--airy{gap:var(--space-16)}
  .s-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-12);padding:var(--space-12)}
  .s-look{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-12)}
  .s-club{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--space-12)}
}

/* ───────── Shell: checkout frame (body data-shell="checkout"): wordmark · stepper · payment note, phone, help ───────── */
.s-header--flow{padding-block:var(--space-2)}
.s-header--flow .r-stepper{grid-column:1/-1;grid-row:2;justify-content:center}
.s-flow-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 var(--space-4)}
.s-flow-tools a{text-decoration:none}
.s-flow-tools .r-link{min-height:var(--control-height)}
.s-flow-tools .s-utility__phone{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.s-flow-tools .s-utility__phone svg{width:14px;height:14px}
.s-footer--flow .s-footer__in{padding-block:var(--space-6)}
@media (max-width:640px){
  .s-flow-tools .s-desk{display:none}
}
@media (min-width:641px){
  .s-header--flow{grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--space-3)}
  .s-header--flow .r-stepper{grid-column:2;grid-row:1}
}

/* ───────── PLP module (plp.js): listing, search, category. Filters in a sidebar from 961 px, in a drawer below. ───────── */
.s-plp{display:grid;gap:var(--space-6);min-width:0}
.s-plp__side{display:none}
.s-plp__main{display:grid;gap:var(--space-4);align-content:start;min-width:0}
.s-plp__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.s-plp__bar .r-chips:empty{display:none}
.s-plp .r-products{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-plp__tile{grid-column:1/-1}
.s-plp__more{display:grid;justify-items:center;gap:var(--space-3);padding-top:var(--space-4)}
.s-plp__more:empty{display:none}
.s-filters{display:grid;gap:var(--space-4);align-content:start}
.s-editorial{display:grid;gap:var(--space-4);align-items:center}
.s-editorial .r-frame{justify-self:center;width:min(320px,90%)}
.s-quick{display:grid;gap:var(--space-6)}
@media (min-width:641px){
  .s-mob{display:none}
  .s-plp .r-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-editorial{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8)}
}
@media (min-width:961px){
  .s-plp{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8)}
  .s-plp__side{display:block;grid-column:span 3;align-self:start;position:sticky;top:calc(var(--r-sticky-top) + var(--space-4));max-height:calc(100dvh - var(--r-sticky-top) - var(--space-8));overflow:auto}
  .s-plp__main{grid-column:span 9}
  .s-plp__open{display:none}
}

/* ───────── listing.html ───────── */
.s-title{display:grid;gap:var(--space-2)}

/* ───────── category.html ───────── */
.s-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (min-width:641px){
  .s-tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6)}
}

/* ───────── Order layout (cart.html, checkout steps): lines 8 columns, summary 4 columns and sticky ───────── */
.s-order{display:grid;gap:var(--s-gap);align-items:start;min-width:0}
.s-order__main,.s-order__side{display:grid;gap:var(--s-gap);align-content:start;min-width:0}
.s-order__side .r-summary{margin-bottom:0}
@media (max-width:960px){.s-order--flow .s-order__side{order:-1}}
.s-coupon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:end}
@media (min-width:961px){
  .s-order{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8)}
  .s-order__main{grid-column:span 8}
  .s-order__side{grid-column:span 4;position:sticky;top:calc(var(--r-sticky-top) + var(--space-4))}
}

/* ───────── checkout-*.html ───────── */
.s-fields{display:grid;gap:var(--space-4)}
.s-review{display:grid;gap:var(--space-2)}
@media (min-width:641px){
  .s-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6)}
  .s-fields__wide{grid-column:1/-1}
}

/* ───────── login.html ───────── */
.s-narrow{width:100%;max-width:480px;margin-inline:auto}

/* ───────── cart.html: line actions in one aligned row ───────── */
.s-line-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-3)}
.s-line-actions .r-link{display:inline-flex;align-items:center;gap:var(--space-1);min-height:32px}

/* Latin codes (order, return, tracking): the brand fonts are Persian-digit builds, so Latin digits fall back to the system sans. */
.s-latin{font-family:var(--font-mono)} /* brand sans draws Persian digits; codes need Latin ones */
/* login.html: signed-in actions */
.s-stack--mid{gap:var(--space-4)}
.s-login-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.s-login-actions .r-link{display:inline-flex;align-items:center;min-height:44px}

/* Cart and checkout, simplified: gift row under the lines, centred helper line */
.s-center{text-align:center;justify-self:center}
.s-gift{display:grid;gap:var(--space-3);padding-top:var(--space-2)}
.s-save{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--cypress)}
.s-save svg.lucide{width:var(--icon-sm);height:var(--icon-sm)}
#k-free .r-progress{gap:var(--space-3)}
#k-free .r-progress__head>.r-badge{margin-inline-start:auto}
/* Cart summary: the total sits above the button, under the free-delivery bar */
#k-summary .r-summary>div:last-child{padding-top:0;border-top:0;font-size:inherit;font-weight:400}
#k-total{margin:0}
#k-total>div{padding-top:var(--space-4);border-top:1px dashed var(--line)}
/* Coupon field: the Persian placeholder reads from the right, typed codes stay left-to-right */
.s-coupon .r-input:placeholder-shown{direction:rtl}
/* Coupon: the apply button sits inside the field, inset from its edge */
#coupon-form{position:relative;display:block}
#coupon-form .r-input{padding-left:88px}
#coupon-form .r-btn{position:absolute;top:4px;bottom:4px;left:4px;min-height:0;height:auto;padding:0 var(--space-4);border-color:transparent;border-radius:var(--radius-sm);background:var(--lime-100);color:var(--cypress)}
#coupon-form .r-btn:hover{background:var(--lime-200)}
/* Checkout order summary (collapsible): no double borders inside the panel, prices never wrap, clear gaps between lines, rows and total */
#order-side.r-acc,#order-side.r-acc:last-of-type{border:0}
#order-side summary{min-height:44px;padding:0}
#order-side .r-acc__content>div{padding:var(--space-3) 0 0}
#order-side .s-stack{gap:var(--space-4)}
#order-side .s-mini{gap:var(--space-4)}
#order-side .s-mini li>.r-price{display:flex;align-items:baseline;gap:var(--space-1);white-space:nowrap;align-self:end}
#order-side .s-mini+.r-summary{padding-top:var(--space-4);border-top:1px solid var(--line)}
#order-side .r-summary{gap:var(--space-3);margin-bottom:0}
/* Address form: two columns at every width, only the address line is full width */
#d-new.s-fields,#d-load.s-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-3)}
#d-new .s-fields__wide,#d-load .s-fields__wide{grid-column:1/-1}
#d-new .r-field{align-content:start}
/* Saved addresses: two columns; "new address" is one centred card with a plus */
#d-saved{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
#d-saved .r-radio-card:not(.s-addr-new){grid-template-columns:auto minmax(0,1fr);align-content:start}
#d-saved .r-radio-card:not(.s-addr-new)>.r-link{grid-column:1/-1;justify-self:start}
#d-saved .s-addr-new{grid-column:1/-1;justify-content:center}
#d-saved .s-addr-new .r-radio__dot{display:none}
#d-saved .s-addr-new .r-radio-card__body{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
/* Order summary header: title on one side, total and chevron on the other */
#order-side .s-sum-end{display:inline-flex;align-items:center;gap:var(--space-3)}
/* Verification code step: label, cells and hint centred */
#d-verify .r-field:has(.r-otp){text-align:center}
#d-verify .r-field:has(.r-otp) .r-help{justify-content:center}
#d-verify .r-otp{display:block}
#d-verify .r-otp__cells{justify-content:center}
#d-verify .s-row{justify-content:center}
#d-verify .r-field:has(.r-otp){padding-top:var(--space-4)}
#d-saved .r-address__lines{font-size:13px;line-height:1.7}
#d-saved .r-radio-card:not(.s-addr-new){padding:var(--space-3);gap:var(--space-2)}
#d-saved{margin-bottom:var(--space-4)}
#d-saved .s-addr-new{grid-template-columns:minmax(0,1fr)}
/* Checkout steps sit at the top of the page, above the title */
.s-flow-steps{width:100%;max-width:480px;margin:0 auto var(--space-6)}
/* Free-delivery bar: amount so far at one end, the goal at the other */
.s-goal{display:flex;justify-content:space-between;gap:var(--space-3);font-variant-numeric:tabular-nums}
.s-coupon-open{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%}
.s-coupon-open>span{display:inline-flex;align-items:center;gap:var(--space-2)}
.s-coupon-open>svg.lucide{transition:transform var(--duration-base) var(--ease-out)}
.s-coupon-open[aria-expanded=true]>svg.lucide{transform:rotate(180deg)}
/* Payment methods: an icon and a badge per method, no radio dot (the card's selected style shows the choice) */
.s-pay{grid-template-columns:minmax(0,1fr) auto}
.s-pay .r-radio__dot{display:none}
.s-pay .s-pay__head{display:flex;align-items:center;gap:var(--space-2);color:var(--ink);font-size:15px}
.s-pay .s-pay__head strong{font-weight:600}
.s-pay__head svg.lucide{width:var(--icon-md);height:var(--icon-md);color:var(--cypress)}
.s-pay__logo{width:var(--icon-md);height:var(--icon-md);object-fit:contain;flex:none}

/* A page link in the listing lands on the toolbar above the products, clear of the sticky header. */
.s-plp__bar{scroll-margin-top:calc(var(--space-16) + var(--space-4))}

/* The sale countdown sits at the left end of the offers header (end side in RTL), also when the header wraps. */
.s-offers .s-head{flex-wrap:nowrap;align-items:center}
.s-offers .s-head>.s-stack:last-child{margin-inline-start:auto;flex:none}
@media (max-width:640px){
  .s-offers .r-countdown{gap:2px}
  .s-offers .r-countdown__cell{min-width:40px;padding:4px 2px}
  .s-offers .r-countdown__cell strong{font-size:16px}
}

/* «همه …» link at the end of a section: at the end side (left in RTL). */
.s-more{display:flex;justify-content:flex-end}

/* The offers header is a red band from edge to edge of the panel; the rail and the link keep the panel's inner spacing. */
.s-offers .s-head{padding:var(--space-4);background:var(--sale);color:var(--on-cypress)}
.s-offers .s-head .heading-sm{display:flex;align-items:center;gap:var(--space-2);color:inherit}
.s-offers .s-head .heading-sm svg.lucide{width:28px;height:28px}
.s-offers .r-rail,.s-offers .s-more{padding-inline:var(--space-4)}
.s-offers .s-more{padding-block-end:var(--space-4)}
@media (min-width:961px){
  .s-offers .s-head{padding-inline:var(--space-6)}
  .s-offers .r-rail,.s-offers .s-more{padding-inline:var(--space-6)}
}

/* Section links («همه …») are neutral, not coloured. */
.s-head .r-link,.s-more .r-link{color:var(--ink)}

/* Section titles take the primary colour (the offers header keeps its own). */
.s-sections>.s-section>.heading-sm,.s-sections>.s-section>.s-head .heading-sm{color:var(--cypress)}

/* The rack hero occupies the viewport; the following sections retain their normal container. */
.s-main--rack{padding-top:0;gap:var(--space-12)}