/* Home (SPEC §19.1/§19.2): full-bleed hero carousel that fades into the page, promo cards overlapping
   its bottom edge (Amazon-style), then rails. Render-blocking but small; every box has a reserved size (CLS). */
.page-home{--hero-h:clamp(300px,86vw,470px);--hero-overlap:40px}
.hero{position:relative;height:var(--hero-h);margin:0;overflow:hidden;background:var(--sh-surface-2);isolation:isolate}
.hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:min(60%,calc(var(--hero-overlap) + 140px));background:linear-gradient(to bottom,rgba(250,248,244,0),var(--sh-bg) 92%);pointer-events:none;z-index:2}
.hero-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:var(--sh-surface-2)}
.hero-slide>a.hero-hit{position:absolute;inset:0;z-index:1}
.hero-slide picture,.hero-slide>img{position:absolute;inset:0}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center;background-size:cover;background-position:center}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;--ov:.35;--rgb:255,255,255;background:linear-gradient(to right,rgba(var(--rgb),var(--ov)) 0%,rgba(var(--rgb),calc(var(--ov) * .55)) 45%,rgba(var(--rgb),0) 78%)}
[dir=rtl] .hero-scrim{background:linear-gradient(to left,rgba(var(--rgb),var(--ov)) 0%,rgba(var(--rgb),calc(var(--ov) * .55)) 45%,rgba(var(--rgb),0) 78%)}
.hero-slide[data-align=end] .hero-scrim{background:linear-gradient(to left,rgba(var(--rgb),var(--ov)) 0%,rgba(var(--rgb),calc(var(--ov) * .55)) 45%,rgba(var(--rgb),0) 78%)}
[dir=rtl] .hero-slide[data-align=end] .hero-scrim{background:linear-gradient(to right,rgba(var(--rgb),var(--ov)) 0%,rgba(var(--rgb),calc(var(--ov) * .55)) 45%,rgba(var(--rgb),0) 78%)}
.hero-slide[data-align=center] .hero-scrim{background:radial-gradient(ellipse at 50% 42%,rgba(var(--rgb),var(--ov)) 0%,rgba(var(--rgb),calc(var(--ov) * .4)) 55%,rgba(var(--rgb),0) 85%)}
.hero-slide[data-theme=light] .hero-scrim{--rgb:12,14,18}
.hero-copy{position:absolute;z-index:3;inset-inline:0;top:0;bottom:calc(var(--hero-overlap) + 30px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);padding-block:16px 0;pointer-events:none}
.hero-text{max-width:min(620px,100%);color:var(--sh-ink);pointer-events:auto}
.hero-slide[data-theme=light] .hero-text{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero-slide[data-align=center] .hero-copy{align-items:center;text-align:center}
.hero-slide[data-align=end] .hero-copy{align-items:flex-end;text-align:end}
.hero-kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;opacity:.85}
:root[lang=ar] .hero-kicker{letter-spacing:0}
.hero-title{font-family:var(--sh-font-display);font-weight:700;font-size:clamp(22px,5.6vw,30px);line-height:1.18;letter-spacing:-.015em}
:root[lang=ar] .hero-title{line-height:1.4;letter-spacing:0}
.hero-sub{display:none;margin-top:8px;font-size:clamp(15px,1.3vw,19px);line-height:1.5;opacity:.92}
.hero-cta{margin-top:12px;min-height:44px}
.hero-slide[data-theme=light] .hero-cta{background:#fff;color:var(--sh-ink)}
.hero-slide[data-theme=light] .hero-cta:hover{background:var(--sh-primary-soft)}
.hero-ctl{position:absolute;z-index:4;inset-inline:0;bottom:calc(var(--hero-overlap) + 6px);display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none}
.hero-ctl>*{pointer-events:auto}
.hero-dots{display:flex;gap:0}
/* 24×24 px hit area per dot (WCAG 2.5.8); the visible pill is drawn by ::before. */
.hero-dots button{position:relative;display:grid;place-items:center;min-width:24px;height:24px;padding:0 8px;background:none}
.hero-dots button::before{content:"";display:block;width:8px;height:8px;border-radius:4px;background:rgba(22,24,29,.25);transition:width var(--base),background var(--base)}
.hero-dots button[aria-current=true]::before{width:26px;background:var(--sh-primary)}
.hero-dots button:focus-visible{outline:2px solid var(--sh-primary);outline-offset:1px;border-radius:8px}
.hero-pause{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);color:var(--sh-ink);box-shadow:var(--sh-shadow-1)}
.hero-pause .i-play,.hero-pause[aria-pressed=true] .i-pause{display:none}
.hero-pause[aria-pressed=true] .i-play{display:block}
.hero-arrow{position:absolute;z-index:4;top:0;bottom:calc(var(--hero-overlap) + 40px);display:none;place-items:center;width:64px;color:var(--sh-ink);transition:background var(--fast)}
.hero-arrow span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:var(--sh-shadow-2);transition:transform var(--fast)}
.hero-arrow:hover span{transform:scale(1.06)}
.hero-arrow:focus-visible{outline-offset:-4px}
.hero-prev{inset-inline-start:0}.hero-next{inset-inline-end:0}
.hero-empty{display:flex;align-items:flex-end;background:var(--sh-primary-soft) var(--damask);background-size:64px}
/* No banners (API down / none scheduled): brand mark as the art instead of an empty pattern block */
.hero-empty-art{position:absolute;z-index:1;inset-inline-end:max(var(--gut),8%);top:50%;width:clamp(120px,30vw,260px);height:auto;transform:translateY(calc(-50% - var(--hero-overlap) / 2));opacity:.95;filter:drop-shadow(0 18px 30px rgba(14,122,95,.18))}
.hero-empty .hero-text{max-width:min(620px,56%)}
/* Promo cards (Amazon-style), first row overlaps the hero bottom */
.promo{position:relative;z-index:5;margin-top:calc(-1 * var(--hero-overlap));overflow-x:clip}
.promo-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,320px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;padding-bottom:6px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.promo-grid::-webkit-scrollbar{display:none}
.promo-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 16px 14px;background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-radius);box-shadow:var(--sh-shadow-1);transition:box-shadow var(--base)}
.promo-card:hover{box-shadow:var(--sh-shadow-2)}
.promo-card h2{font-size:18px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo-quad{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.promo-quad a{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12.5px;line-height:1.3;color:var(--sh-ink-2)}
.promo-quad a:hover{color:var(--sh-primary)}
.promo-quad .pq-img,.promo-one{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--sh-surface-2)}
.promo-one{aspect-ratio:auto;flex:1;min-height:200px;position:relative}
.promo-quad img,.promo-one img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.promo-one img{position:absolute;inset:0}
.promo-quad a:hover img,.promo-one:hover img{transform:scale(1.04)}
.promo-quad .pq-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-more{display:inline-flex;align-items:center;gap:4px;margin-top:auto;font-size:14px;font-weight:600;color:var(--sh-primary);min-height:32px}
.promo-more:hover{text-decoration:underline}
.page-home .trust-strip{margin-block:16px 0}
/* Phones: dark-text slides become a short split card (copy | square art) so the art is fully visible and the block
   isn't a tall, mostly empty pattern (owner report 2026-10-08). Light-text/centred slides stay full-bleed. */
@media (max-width:639.98px){
  .page-home{--hero-h:clamp(236px,66vw,290px);--hero-overlap:28px}
  .page-home .hero::after{height:calc(var(--hero-overlap) + 44px)}
  .hero-split picture{inset-block:10px calc(var(--hero-overlap) + 30px);inset-inline:auto var(--gut);width:min(48%,240px)}
  .hero-split img{object-fit:contain;background-size:contain;background-repeat:no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent);mask-image:radial-gradient(closest-side,#000 74%,transparent)}
  .hero-split .hero-copy{bottom:calc(var(--hero-overlap) + 30px);justify-content:center}
  .hero-split .hero-text{max-width:52%}
  .hero-split .hero-title{font-size:clamp(19px,5.3vw,24px)}
  .hero-split .hero-cta{margin-top:10px;padding-inline:16px}
}
@media (min-width:640px){
  .page-home{--hero-h:clamp(340px,58vw,470px);--hero-overlap:80px}
  .promo-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0;gap:16px}
  .hero-sub{display:block}
}
@media (min-width:900px){
  .page-home{--hero-h:clamp(400px,33.34vw,640px);--hero-overlap:clamp(130px,12.5vw,250px)}
  .hero-arrow{display:grid}
  .hero-copy{justify-content:center;padding-inline:calc(var(--gut) + 64px)}
  .hero-title{font-size:clamp(30px,3vw,52px)}
  .hero-text{max-width:min(620px,48%)}
  .hero-slide[data-align=center] .hero-text{max-width:min(760px,70%)}
  .hero-cta{margin-top:18px;min-height:48px;padding-inline:26px}
}
@media (min-width:1024px){.promo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.promo-card{padding:20px 20px 16px}.promo-card h2{font-size:20px}}
@media (min-width:1600px){.promo-quad{gap:12px 14px}.promo-quad a{font-size:13px}}
@media (prefers-reduced-motion:reduce){.hero-track{scroll-behavior:auto}}
/* Rendering budget (SPEC §21.8): home sections below the hero/promo row skip style/layout/paint until they near
   the viewport (the first paint used to lay out ~4,500 nodes). The negative margin + matching padding keeps rail
   arrows and card shadows inside the paint-contained box. */
.home-secs>.hsec,.home-secs>.rail,.home-secs>.trust-strip{content-visibility:auto;contain-intrinsic-size:auto 460px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.home-secs>.trust-strip{contain-intrinsic-size:auto 120px}
.home-secs>.rail.rail-pending{contain-intrinsic-size:auto 0px}
/* Phones: only the first promo cards are on screen (horizontal strip); the rest skip rendering until scrolled to. */
@media (max-width:639.98px){.promo-card:nth-child(n+3){content-visibility:auto;contain-intrinsic-size:auto 300px auto 480px}}

/* Welcome back / still thinking strip (SPEC §23.6), injected after idle by welcome.js */
.wb-host:empty{display:none}
.wb{margin-block:16px 4px;padding:14px 14px 12px;background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-radius);box-shadow:var(--sh-shadow-1)}
.wb-head{display:flex;align-items:flex-start;gap:12px}
.wb-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--sh-primary-soft);color:var(--sh-primary)}
.wb-checker .wb-ic,.wb-price_watcher .wb-ic{background:var(--sh-accent-soft);color:#8A5A00}
.wb-txt{flex:1;min-width:0;padding-top:2px}
.wb-title{font-size:18px;font-weight:700;line-height:1.35}
:root[lang=ar] .wb-title{line-height:1.55}
.wb-body{font-size:14px;line-height:1.5;color:var(--sh-ink-2)}
.wb-x{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-6px;border-radius:50%;color:var(--sh-ink-3)}
.wb-x:hover{background:var(--sh-surface-2);color:var(--sh-ink)}
.wb-items{display:flex;gap:10px;margin-top:12px;padding-bottom:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}
.wb-items li{flex:0 0 min(260px,80%);scroll-snap-align:start}
.wb-item{display:flex;align-items:center;gap:10px;min-height:80px;padding:8px;border-radius:12px;background:var(--sh-surface-2);transition:background var(--fast)}
.wb-item:hover{background:var(--sh-primary-soft)}
.wb-item img,.wb-noimg{flex:none;width:64px;height:64px;border-radius:10px;object-fit:cover;background:#fff}
.wb-it{display:flex;flex-direction:column;gap:2px;min-width:0}
.wb-name{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wb-price{font-size:14px;font-weight:700}
.wb-price s{margin-inline-start:4px;font-size:12.5px;font-weight:400;color:var(--sh-ink-3)}
@media (min-width:900px){.wb{padding:18px 18px 14px}.wb-items li{flex-basis:290px}}