/* 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:8px}
.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) directly under the hero, tucked into its faded bottom edge (owner, 2026-10-09).
   The overlap only applies when the cards are there (:has), so a store without promo cards keeps a normal hero. */
.page-home:has(.promo-under-hero){--hero-overlap:40px}
@media (min-width:1024px){.page-home:has(.promo-under-hero){--hero-overlap:150px}}
.promo.promo-under-hero{margin-top:calc(-1 * var(--hero-overlap));z-index:5}
.promo{position:relative;margin-block:20px 4px;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:44px}
.promo-more:hover{text-decoration:underline}
.page-home .trust-strip{margin-block:16px 8px}
/* Personal zone (SPEC §24): zero height until home.js fills a slot; slots never reserve space while empty. */
.home-personal>.hsec{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.home-personal .ip-host:empty,.home-personal .fy-teaser-host:empty{display:none}
.home-personal .fy-teaser{padding-block:20px}
/* One rhythm for every home section: same vertical spacing, headers aligned with their "See all" link. */
.home-secs .rail,.home-secs .cats,.home-secs .brands-rail,.home-secs .sec,.home-secs .mis{padding-block:20px}
.home-secs .rail.rail-pending{padding-block:0}
.home-secs .sec-head{align-items:center;margin-block-end:12px}
.home-secs .sec-head .muted{margin-top:2px}
/* 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:6px}
  .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:16px}
  .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:24px}
  .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}}

/* ───────── SPEC §26: storefront polish ───────── */
/* Carousel layout copy (main.css loads async; this keeps the first paint of the two carousels identical, no CLS). */
.car-track{display:grid;grid-auto-flow:column;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.cats-track{grid-auto-columns:88px;gap:10px}
.brand-track{grid-auto-columns:132px;gap:12px}
@media (min-width:900px){.cats-track{grid-auto-columns:112px;gap:14px}.brand-track{grid-auto-columns:168px;gap:14px}}

/* Strip banners: copy on the start side, the art (full colour, sensible ratio) on the end side. One per row below
   1024 px, two per row from 1024 px, so they are never a 1,900 px-wide sliver. */
.strips{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-block:20px}
@media (min-width:1024px){.strips{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.strips-1{grid-template-columns:minmax(0,1fr);max-width:min(100%,1100px)}}
.strip{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,40%);align-items:stretch;min-height:150px;border-radius:var(--sh-radius-lg);overflow:hidden;background:var(--strip-bg,var(--sh-accent-soft));border:1px solid rgba(22,24,29,.06);color:var(--sh-ink);transition:transform var(--base),box-shadow var(--base)}
.strip-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:18px 16px;padding-inline-start:20px;min-width:0}
.strip-t{font-family:var(--sh-font-display);font-weight:700;font-size:clamp(17px,2.2vw,22px);line-height:1.3}
.strip-s{font-size:14px;line-height:1.45;color:var(--sh-ink-2)}
.strip-cta{margin-top:6px;min-height:40px;gap:6px}
.strip-art{position:relative;overflow:hidden}
.strip-art picture{position:absolute;inset:0}
.strip-art img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.strip-art::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:28%;z-index:1;background:linear-gradient(to right,var(--strip-bg,var(--sh-accent-soft)),transparent);pointer-events:none}
[dir=rtl] .strip-art::before{background:linear-gradient(to left,var(--strip-bg,var(--sh-accent-soft)),transparent)}
.strip:hover{box-shadow:var(--sh-shadow-2);transform:translateY(-2px)}
.strip:hover .strip-art img{transform:scale(1.04)}
@media (min-width:640px){.strip{min-height:170px}.strip-copy{padding:22px 20px;padding-inline-start:28px}}
@media (min-width:1024px){.strip{min-height:clamp(180px,14vw,280px)}.strip-art{min-width:0}}

/* Hover lift on cards (subtle; pointer devices only). */
@media (hover:hover){
  .page-home .pcard{transition:transform var(--base),box-shadow var(--base),border-color var(--base)}
  .page-home .pcard:hover{transform:translateY(-3px)}
  .promo-card{transition:box-shadow var(--base),transform var(--base)}
  .promo-card:hover{transform:translateY(-2px)}
  .trust-item{transition:transform var(--base),box-shadow var(--base)}
  .trust-item:hover{transform:translateY(-2px);box-shadow:var(--sh-shadow-1)}
}

/* Scroll reveal (home.js adds .rv only to sections that start below the fold, so LCP content never waits). */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.rv-in{opacity:1;transform:none}
.cu{font-variant-numeric:tabular-nums}

/* Deal countdown: gentle pulse in the last hour. */
.countdown.cd-hot b{animation:cdPulse 1.6s ease-in-out infinite}
@keyframes cdPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,38,75,.45)}50%{box-shadow:0 0 0 6px rgba(192,38,75,0)}}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .page-home .pcard:hover,.promo-card:hover,.trust-item:hover,.strip:hover{transform:none}
  .strip:hover .strip-art img{transform:none}
  .countdown.cd-hot b{animation:none}
}