/* === AShopper fluid storefront layout (wide-layout 2026-10-19) ===
   Scope: body.sf-fluid only (home, category, store, storefronts, search, product, account).
   Mission Control (.control-shell), dashboard, portal and checkout keep their own widths. */

/* Content width by breakpoint. Mobile (<768) keeps the original 100vw - 2rem. */
@media (min-width: 768px)  { body.sf-fluid { --shell: calc(100vw - 2.5rem); } }
@media (min-width: 1024px) { body.sf-fluid { --shell: calc(100vw - 3rem); } }
@media (min-width: 1280px) { body.sf-fluid { --shell: min(1240px, calc(100vw - 3rem)); } }
@media (min-width: 1440px) { body.sf-fluid { --shell: min(1360px, calc(100vw - 4rem)); } }
/* From 1800px the side rails take the spare margins; the main column has its own target width. */
@media (min-width: 1800px) { body.sf-fluid { --shell: 1320px; } }
@media (min-width: 2200px) { body.sf-fluid { --shell: 1600px; } }
@media (min-width: 2560px) { body.sf-fluid { --shell: 1880px; } }
@media (min-width: 3200px) { body.sf-fluid { --shell: 2560px; } }
@media (min-width: 3800px) { body.sf-fluid { --shell: 3000px; } }
@media (min-width: 4800px) { body.sf-fluid { --shell: calc(100vw - 840px); } }

/* Gentle type scaling for big screens (4K TVs, 34-50in ultrawides). Below 2400px nothing changes. */
@media (min-width: 2400px) { html.sf-fluid-root { font-size: 17px; } }
@media (min-width: 3200px) { html.sf-fluid-root { font-size: 18px; } }
@media (min-width: 3800px) { html.sf-fluid-root { font-size: 19px; } }
@media (min-width: 5000px) { html.sf-fluid-root { font-size: 22px; } }

/* ---------- Home hero ---------- */
body.sf-fluid .home-mp-hero { padding-block: clamp(1.25rem, 0.6rem + 1.2vw, 2.75rem) clamp(1.5rem, 0.8rem + 1.3vw, 3rem); }
body.sf-fluid .home-mp-hero__inner { gap: clamp(1.25rem, 0.5rem + 1.5vw, 3rem); }
body.sf-fluid .home-mp-hero__copy h1 { font-size: clamp(1.65rem, 1.1rem + 1.6vw, 3.6rem); }
body.sf-fluid .home-mp-hero__eyebrow { font-size: clamp(0.78rem, 0.7rem + 0.15vw, 0.95rem); }
@media (min-width: 861px) {
  /* The slide image always fills its frame (the old max-height left a blank strip on the right). */
  body.sf-fluid .home-hero-gallery { min-height: 0; }
  body.sf-fluid .home-hero-gallery__track { max-height: none; aspect-ratio: 12 / 7; }
  body.sf-fluid .home-hero-gallery__slide img,
  body.sf-fluid .home-hero-gallery__video { width: 100%; height: auto; max-height: none; aspect-ratio: 12 / 7; object-fit: cover; }
}
@media (min-width: 1800px) {
  body.sf-fluid .home-mp-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(620px, 32vw, 1180px)); }
  body.sf-fluid .home-hero-gallery__track,
  body.sf-fluid .home-hero-gallery__slide img,
  body.sf-fluid .home-hero-gallery__video { aspect-ratio: 2 / 1; }
}

/* ---------- Section titles ---------- */
body.sf-fluid .home-shelf__title,
body.sf-fluid .home-cat-row__head h2 { font-size: clamp(1.15rem, 1rem + 0.35vw, 1.7rem); }
body.sf-fluid .home-shelf__more { font-size: clamp(0.88rem, 0.8rem + 0.15vw, 1.05rem); }
body.sf-fluid .shelf-card__title { font-size: clamp(0.88rem, 0.82rem + 0.1vw, 1rem); }
body.sf-fluid .shelf-card__price strong { font-size: clamp(0.98rem, 0.9rem + 0.12vw, 1.15rem); }

/* ---------- Category tiles: spread across the row, bigger visuals on wide screens ---------- */
@media (min-width: 1440px) {
  body.sf-fluid .home-cat-tile__visual { width: clamp(72px, 2rem + 2.6vw, 132px); height: clamp(72px, 2rem + 2.6vw, 132px); }
  body.sf-fluid .home-cat-tile__label { font-size: clamp(0.82rem, 0.75rem + 0.12vw, 1rem); }
}

/* ---------- Product carousels: card count grows with width (container queries) ----------
   Under 1140px wide the original peeking carousel stays as it was (mobile and tablets). */
body.sf-fluid .home-shelf { container: sfshelf / inline-size; }
body.sf-fluid .home-shelf--gift { container: sfgc / inline-size; }
@container sfshelf (min-width: 1140px) {
  .home-shelf__track { grid-auto-columns: calc((100% - (var(--sf-n, 6) - 1) * 0.85rem) / var(--sf-n, 6)); }
}
@container sfgc (min-width: 1200px) {
  .home-gc-track { grid-auto-columns: calc((100% - (var(--sf-gn, 8) - 1) * 0.75rem) / var(--sf-gn, 8)); }
}
@container sfshelf (min-width: 1140px) { .home-shelf__track { --sf-n: 6; } }
@container sfshelf (min-width: 1330px) { .home-shelf__track { --sf-n: 7; } }
@container sfshelf (min-width: 1520px) { .home-shelf__track { --sf-n: 8; } }
@container sfshelf (min-width: 1710px) { .home-shelf__track { --sf-n: 9; } }
@container sfshelf (min-width: 1900px) { .home-shelf__track { --sf-n: 10; } }
@container sfshelf (min-width: 2090px) { .home-shelf__track { --sf-n: 11; } }
@container sfshelf (min-width: 2280px) { .home-shelf__track { --sf-n: 12; } }
@container sfshelf (min-width: 2470px) { .home-shelf__track { --sf-n: 13; } }
@container sfshelf (min-width: 2660px) { .home-shelf__track { --sf-n: 14; } }
@container sfshelf (min-width: 2850px) { .home-shelf__track { --sf-n: 15; } }
@container sfshelf (min-width: 3040px) { .home-shelf__track { --sf-n: 16; } }
@container sfshelf (min-width: 3230px) { .home-shelf__track { --sf-n: 17; } }
@container sfshelf (min-width: 3420px) { .home-shelf__track { --sf-n: 18; } }
@container sfshelf (min-width: 3610px) { .home-shelf__track { --sf-n: 19; } }
@container sfshelf (min-width: 3800px) { .home-shelf__track { --sf-n: 20; } }
@container sfshelf (min-width: 3990px) { .home-shelf__track { --sf-n: 21; } }
@container sfshelf (min-width: 4180px) { .home-shelf__track { --sf-n: 22; } }
@container sfshelf (min-width: 4370px) { .home-shelf__track { --sf-n: 23; } }
@container sfshelf (min-width: 4560px) { .home-shelf__track { --sf-n: 24; } }
@container sfshelf (min-width: 4750px) { .home-shelf__track { --sf-n: 25; } }
@container sfshelf (min-width: 4940px) { .home-shelf__track { --sf-n: 26; } }
@container sfshelf (min-width: 5130px) { .home-shelf__track { --sf-n: 27; } }
@container sfshelf (min-width: 5320px) { .home-shelf__track { --sf-n: 28; } }
@container sfshelf (min-width: 5510px) { .home-shelf__track { --sf-n: 29; } }
@container sfshelf (min-width: 5700px) { .home-shelf__track { --sf-n: 30; } }
@container sfshelf (min-width: 5890px) { .home-shelf__track { --sf-n: 31; } }
@container sfshelf (min-width: 6080px) { .home-shelf__track { --sf-n: 32; } }
@container sfgc (min-width: 1200px) { .home-gc-track { --sf-gn: 8; } }
@container sfgc (min-width: 1350px) { .home-gc-track { --sf-gn: 9; } }
@container sfgc (min-width: 1500px) { .home-gc-track { --sf-gn: 10; } }
@container sfgc (min-width: 1650px) { .home-gc-track { --sf-gn: 11; } }
@container sfgc (min-width: 1800px) { .home-gc-track { --sf-gn: 12; } }
@container sfgc (min-width: 1950px) { .home-gc-track { --sf-gn: 13; } }
@container sfgc (min-width: 2100px) { .home-gc-track { --sf-gn: 14; } }
@container sfgc (min-width: 2250px) { .home-gc-track { --sf-gn: 15; } }
@container sfgc (min-width: 2400px) { .home-gc-track { --sf-gn: 16; } }
@container sfgc (min-width: 2550px) { .home-gc-track { --sf-gn: 17; } }
@container sfgc (min-width: 2700px) { .home-gc-track { --sf-gn: 18; } }
@container sfgc (min-width: 2850px) { .home-gc-track { --sf-gn: 19; } }
@container sfgc (min-width: 3000px) { .home-gc-track { --sf-gn: 20; } }
@container sfgc (min-width: 3150px) { .home-gc-track { --sf-gn: 21; } }
@container sfgc (min-width: 3300px) { .home-gc-track { --sf-gn: 22; } }
@container sfgc (min-width: 3450px) { .home-gc-track { --sf-gn: 23; } }
@container sfgc (min-width: 3600px) { .home-gc-track { --sf-gn: 24; } }
@container sfgc (min-width: 3750px) { .home-gc-track { --sf-gn: 25; } }
@container sfgc (min-width: 3900px) { .home-gc-track { --sf-gn: 26; } }
@container sfgc (min-width: 4050px) { .home-gc-track { --sf-gn: 27; } }
@container sfgc (min-width: 4200px) { .home-gc-track { --sf-gn: 28; } }
@container sfgc (min-width: 4350px) { .home-gc-track { --sf-gn: 29; } }
@container sfgc (min-width: 4500px) { .home-gc-track { --sf-gn: 30; } }
@container sfgc (min-width: 4650px) { .home-gc-track { --sf-gn: 31; } }
@container sfgc (min-width: 4800px) { .home-gc-track { --sf-gn: 32; } }
@container sfgc (min-width: 4950px) { .home-gc-track { --sf-gn: 33; } }
@container sfgc (min-width: 5100px) { .home-gc-track { --sf-gn: 34; } }
@container sfgc (min-width: 5250px) { .home-gc-track { --sf-gn: 35; } }
@container sfgc (min-width: 5400px) { .home-gc-track { --sf-gn: 36; } }
@container sfgc (min-width: 5550px) { .home-gc-track { --sf-gn: 37; } }
@container sfgc (min-width: 5700px) { .home-gc-track { --sf-gn: 38; } }
@container sfgc (min-width: 5850px) { .home-gc-track { --sf-gn: 39; } }
@container sfgc (min-width: 6000px) { .home-gc-track { --sf-gn: 40; } }

/* ---------- Category, store and search grids: auto-fill cards ---------- */
@media (min-width: 1024px) {
  body.sf-fluid .catalog-product-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(176px, 9rem + 3vw, 250px), 1fr)); }
  body.sf-fluid .gc-brand-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 7rem + 2.6vw, 230px), 1fr)); }
  body.sf-fluid .catalog-layout { grid-template-columns: clamp(240px, 10rem + 4vw, 320px) minmax(0, 1fr); }
  body.sf-fluid .sf-dir__grid { grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 12rem + 4vw, 360px), 1fr)); }
}

/* ---------- Product page: gallery, details and buy box scale together ---------- */
@media (min-width: 1181px) {
  body.sf-fluid .product-market__layout { grid-template-columns: minmax(300px, clamp(420px, 6rem + 22vw, 860px)) minmax(0, 1fr) clamp(280px, 8rem + 8vw, 400px); gap: clamp(1.2rem, 0.5rem + 1vw, 2.25rem); }
  body.sf-fluid .product-market .product-grid,
  body.sf-fluid .product-market ~ .section .product-grid,
  body.sf-fluid .product-grid--compact { grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 9rem + 3vw, 260px), 1fr)); }
}

/* ---------- Never let anything force sideways scrolling ---------- */
body.sf-fluid .page-main { overflow-x: clip; }

/* ================= Side rails (>= 1800px, real spare space only) ================= */
.sf-rails { display: none; }
@media (min-width: 1800px) {
  body.sf-fluid .page-main { position: relative; }
  .sf-rails {
    display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    --sf-gap: 24px;
    --sf-rail-w: clamp(200px, calc((100% - var(--shell)) / 2 - 2 * var(--sf-gap)), 360px);
  }
  .sf-rail { position: absolute; top: 0; bottom: 0; width: var(--sf-rail-w); }
  .sf-rail--left { left: calc((100% - var(--shell)) / 2 - var(--sf-rail-w) - var(--sf-gap)); }
  .sf-rail--right { right: calc((100% - var(--shell)) / 2 - var(--sf-rail-w) - var(--sf-gap)); }
  .sf-rail.is-empty { display: none; }
  .sf-rail__inner {
    position: sticky; top: calc(var(--sf-header-h, 120px) + 14px);
    max-height: calc(100vh - var(--sf-header-h, 120px) - 28px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    display: grid; gap: 14px; padding: 14px 2px 18px; pointer-events: auto;
  }
}
/* ===== Left rail from 1200px (t366, 2026-10-19): Sponsored + Categories in every desktop window.
   1200-1799px: the main column narrows to make room for one left rail; the right rail (reviews,
   trending) keeps its >= 1800px breakpoint because two rails would squeeze product grids and the buy box. */
@media (min-width: 1200px) and (max-width: 1799.98px) {
  body.sf-fluid .page-main--rails {
    --sf-lrail-w: 216px; --sf-gap: 16px; position: relative;
    padding-left: calc(var(--sf-lrail-w) + 2 * var(--sf-gap));
    --shell: calc(100vw - var(--sf-lrail-w) - 4 * var(--sf-gap) - 12px);
  }
  body.sf-fluid .page-main--rails > .sf-rails {
    display: block; position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; pointer-events: none;
    width: calc(var(--sf-lrail-w) + 2 * var(--sf-gap));
  }
  body.sf-fluid .page-main--rails .sf-rail--right { display: none; }
  body.sf-fluid .page-main--rails .sf-rail--left { position: absolute; top: 0; bottom: 0; left: var(--sf-gap); width: var(--sf-lrail-w); }
  body.sf-fluid .page-main--rails .sf-rail__inner {
    position: sticky; top: calc(var(--sf-header-h, 120px) + 14px);
    max-height: calc(100vh - var(--sf-header-h, 120px) - 28px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    display: grid; gap: 14px; padding: 14px 2px 18px; pointer-events: auto;
  }
}
@media (min-width: 1440px) and (max-width: 1799.98px) {
  body.sf-fluid .page-main--rails { --sf-lrail-w: 236px; --sf-gap: 20px; }
}
.sf-card { background: #ffffff; border: 1px solid #d5ecf5; border-radius: 16px; box-shadow: 0 10px 24px rgba(12, 30, 54, 0.07); padding: 0.85rem 0.9rem 0.95rem; color: #0f2648; min-width: 0; }
.sf-card[hidden] { display: none; }
.sf-card__head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.65rem; }
.sf-card__title { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 1rem; line-height: 1.2; color: #0f2648; flex: 1; }
.sf-pill { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.16rem 0.45rem; border-radius: 999px; }
.sf-pill--ad { background: #fff3dc; color: #8a5a00; border: 1px solid #f1d39a; }
.sf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3bb273; box-shadow: 0 0 0 0 rgba(59, 178, 115, 0.5); animation: sfPulse 2s infinite; }
.sf-list, .sf-card__body { display: grid; gap: 0.55rem; }
.sf-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0.6rem; align-items: center; text-decoration: none; color: #0f1111; border-radius: 12px; padding: 0.2rem; }
.sf-row:hover { background: #f3fafd; }
.sf-rank + .sf-thumb { grid-column: 2; }
.sf-row:has(.sf-rank) { grid-template-columns: 1.4rem 56px minmax(0, 1fr); }
.sf-rank { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #0f6a87; text-align: center; }
.sf-thumb { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #f7fafa; border: 1px solid #e3eef3; }
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-row__text, .sf-review__text { display: grid; gap: 0.15rem; min-width: 0; }
.sf-row__name { font-size: 0.85rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-row__price { display: flex; gap: 0.35rem; align-items: baseline; font-size: 0.85rem; }
.sf-row__price s { color: #565959; font-size: 0.75rem; }
.sf-row__note { font-size: 0.74rem; color: #5a6a82; }
.sf-count { font-variant-numeric: tabular-nums; font-weight: 700; color: #b12704; }
.sf-ad { display: grid; gap: 0.3rem; padding: 0.75rem 0.8rem; border-radius: 14px; text-decoration: none; color: #0f2648; background: linear-gradient(135deg, #eef5ff, #f8fbff); border: 1px solid rgba(24, 74, 130, 0.18); }
.sf-ad[hidden] { display: none; }
.sf-ad--video video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #0f2648; object-fit: cover; }
.sf-ad__label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #184a82; }
.sf-ad__title { font-size: 0.98rem; line-height: 1.25; }
.sf-ad__meta { font-size: 0.78rem; color: #5a6a82; }
.sf-ad__cta { justify-self: start; margin-top: 0.2rem; font-size: 0.8rem; font-weight: 800; color: #007185; }
.sf-badge { display: inline-flex; align-items: center; gap: 0.35rem; justify-self: start; font-size: 0.72rem; font-weight: 800; padding: 0.18rem 0.5rem; border-radius: 999px; }
.sf-badge--live { background: #ef4058; color: #fff; }
.sf-badge--soon { background: #eef5ff; color: #184a82; }
.sf-badge--soon .sf-count { color: #184a82; }
.sf-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: sfPulse 1.4s infinite; }
.sf-stream { display: grid; gap: 0.45rem; }
.sf-stream + .sf-stream { border-top: 1px solid #e3eef3; padding-top: 0.6rem; }
.sf-stream__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0f2648; }
.sf-stream__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-stream__title { font-size: 0.92rem; }
.sf-stream__store { font-size: 0.78rem; color: #007185; text-decoration: none; }
.sf-review { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0.6rem; text-decoration: none; color: #0f1111; }
.sf-review + .sf-review { border-top: 1px solid #e3eef3; padding-top: 0.55rem; }
.sf-review__top { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.74rem; }
.sf-review__top .sf-count { color: #5a6a82; font-weight: 600; }
.sf-review__title { font-size: 0.85rem; }
.sf-review__body { font-size: 0.8rem; color: #33475b; line-height: 1.35; }
.sf-review__meta { font-size: 0.72rem; color: #5a6a82; }
.sf-stars { color: #d5d9d9; letter-spacing: 1px; }
.sf-stars .is-on { color: #f7a51c; }
.sf-empty { display: grid; gap: 0.3rem; padding: 0.7rem 0.75rem; border-radius: 12px; background: #f3fafd; border: 1px dashed #b9dbe8; font-size: 0.82rem; color: #33475b; }
.sf-empty strong { font-size: 0.92rem; color: #0f2648; }
.sf-link { font-size: 0.8rem; font-weight: 700; color: #007185; text-decoration: none; }
.sf-btn { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: 0 1.1rem; border: 0; border-radius: 999px; font-weight: 800; font-size: 0.88rem; color: #08253d; background: linear-gradient(135deg, #2fd9ff, #71f56d); text-decoration: none; cursor: pointer; }
.sf-btn[disabled] { opacity: 0.6; cursor: progress; }
.sf-game__lead { margin: 0; font-size: 0.85rem; color: #33475b; }
.sf-game__prizes { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: #33475b; }
.sf-game__result { font-size: 0.86rem; font-weight: 700; color: #0f2648; display: grid; gap: 0.3rem; }
.sf-game__result:empty { display: none; }
.sf-game__code { display: inline-block; justify-self: start; padding: 0.3rem 0.6rem; border-radius: 8px; background: #fff3dc; border: 1px dashed #c4661a; font-size: 0.95rem; letter-spacing: 0.05em; }
.sf-game__permit { font-size: 0.7rem; color: #5a6a82; }
@keyframes sfPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); opacity: 1; } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); opacity: 0.6; } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sf-live-dot, .sf-badge__dot { animation: none; } }