/* ============================================================
   Deal Dog storefront (2026-11-02 redesign)
   Loaded after styles.css on the deals page (index.html, body.sf).
   Uses the existing --cr-* design tokens; adds layout + the shared
   storefront components: two-level header, hero, product card,
   carousels, You May Like, Shop Collections, Explore toolbar + grid,
   app panel and footer. DealSeek is the reference for composition and
   density; colour, type and voice stay Deal Dog's (blue primary).
   ============================================================ */
:root {
  --sf-max: 1296px;          /* content width at 1440px, matches the reference */
  --sf-gutter: 24px;
  --sf-line: #EAECF0;         /* card + divider hairline */
  --sf-ink: #101828;
  --sf-ink-2: #475467;
  --sf-ink-3: #667085;
  --sf-radius-card: 16px;
  --sf-red: #E8263C;          /* discount badge */
  --sf-section-gap: 56px;
  --sf-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
}
@media (max-width: 700px) { :root { --sf-gutter: 16px; --sf-section-gap: 40px; } }

.sf { background: #fff; }
/* An author `display` rule beats the UA's [hidden]{display:none}; on this page
   `hidden` always means hidden. */
.sf [hidden] { display: none !important; }
.sf .brand-cat-section { max-width: none; padding: 0; }
.sf-container { max-width: calc(var(--sf-max) + 2 * var(--sf-gutter)); margin: 0 auto; padding: 0 var(--sf-gutter); }
.sf main.page {
  max-width: calc(var(--sf-max) + 2 * var(--sf-gutter));
  margin: 0 auto;
  padding: 24px var(--sf-gutter) 0;
  border-radius: 0;
}

/* ---------- App promotion bar (compact) ---------- */
.sf .app-banner { min-height: 40px; padding: 6px var(--sf-gutter); font-size: 14px; gap: 10px; }
.sf .app-banner-btn { height: 28px; padding: 0 12px; font-size: 13px; }

/* ---------- Header ---------- */
.sf-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--sf-line);
}
.sf-bar { display: flex; align-items: center; gap: 24px; height: 72px; }
.sf-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--cr-brand); }
.sf-brand-icon { width: 36px; height: 36px; border-radius: 10px; }
.sf-wordmark { font-family: var(--sf-display); font-weight: 800; font-size: 23px; letter-spacing: -0.03em; color: var(--cr-brand); }
.sf-primary { display: flex; align-items: center; gap: 4px; flex: none; }
.sf-plink {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: none;
  font-size: 15px; font-weight: 600; color: var(--sf-ink); white-space: nowrap;
  transition: background var(--cr-dur) var(--cr-ease), color var(--cr-dur) var(--cr-ease);
}
.sf-plink svg { width: 19px; height: 19px; color: var(--cr-brand); }
.sf-plink:hover { background: var(--cr-blue-25); color: var(--cr-brand); }
.sf-plink.active { color: var(--cr-brand); background: var(--cr-brand-subtle); }
.sf-search { flex: 1 1 auto; min-width: 0; max-width: 620px; }
.sf .sf-search .search-box {
  height: 44px; border-radius: 999px; background: var(--cr-gray-100);
  border: 1px solid transparent; padding: 0 16px; box-shadow: none;
}
.sf .sf-search .search-box:focus-within { background: #fff; border-color: var(--cr-brand); box-shadow: var(--cr-focus-ring); }
.sf-actions { margin-left: auto; flex: none; }

.sf-nav { border-top: 1px solid #F2F4F7; }
.sf-nav-inner {
  display: flex; align-items: center; gap: 2px; height: 48px;
  overflow-x: auto; scrollbar-width: none;
}
.sf-nav-inner::-webkit-scrollbar { display: none; }
.sf-link {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: 48px; padding: 0 12px; border: 0; background: none;
  font-size: 14.5px; font-weight: 500; color: var(--sf-ink-2); white-space: nowrap; flex: none;
}
.sf-nav-inner > .sf-link:first-child { margin-left: -12px; }
.sf-link:hover, .sf-dd.open > .sf-link { color: var(--cr-brand); }
.sf-link.active { color: var(--sf-ink); font-weight: 600; }
.sf-link.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--cr-brand);
}
.sf-caret { width: 14px; height: 14px; transition: transform var(--cr-dur) var(--cr-ease); }
.sf-dd.open .sf-caret { transform: rotate(180deg); }
.sf-only-mobile { display: none; }

/* Dropdowns: hang under their item; positioned against .sf-dd. The nav row
   scrolls (overflow-x), which would clip an absolute child, so menus are
   fixed-position on top of the page and placed by their item (top via CSS,
   left via the item's own box since .sf-dd is not a scroll container). */
.sf-dd { position: static; flex: none; }
.sf-menu {
  position: absolute; top: calc(100% + 1px); z-index: 50;
  min-width: 230px; max-width: calc(100vw - 16px); padding: 8px;
  background: #fff; border: 1px solid var(--sf-line); border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(16,24,40,.22);
}
.sf-menu[hidden] { display: none; }
.sf-menu-cols .sf-menu-list { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.sf-menu-link {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--sf-ink); white-space: nowrap;
}
.sf-menu-link:hover, .sf-menu-link:focus-visible { background: var(--cr-blue-25); color: var(--cr-brand); }
.sf-menu-all {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 0; border-top: 1px solid var(--sf-line); border-radius: 0 0 9px 9px; background: none;
  text-align: left; font-size: 14px; font-weight: 600; color: var(--cr-brand);
}
.sf-menu-all:hover { background: var(--cr-blue-25); }

@media (max-width: 1100px) {
  .sf-plink span { display: none; }
  .sf-plink { padding: 0 10px; }
}
@media (max-width: 900px) {
  .sf-bar { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .sf-primary { display: none; }
  .sf-search { order: 3; flex: 1 0 100%; max-width: none; }
  .sf-only-mobile { display: inline-flex; }
  .sf-link { font-size: 14px; padding: 0 11px; height: 44px; }
  .sf-nav-inner { height: 44px; }
  .sf-wordmark { font-size: 21px; }
  .sf-brand-icon { width: 32px; height: 32px; }
}

/* ---------- Section rhythm ---------- */
.sf-section { margin-top: var(--sf-section-gap); }
.sf .sf-head { margin: 0 0 18px; }
.sf .sf-head h2, .sf-explore-head h2 {
  font-family: var(--sf-display); font-size: 30px; font-weight: 800; letter-spacing: -0.035em; color: var(--sf-ink);
}
.sf-viewall {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--sf-ink); color: #fff; font-size: 14px; font-weight: 700; box-shadow: none;
}
.sf-viewall svg { width: 16px; height: 16px; }
.sf .sf-viewall:hover { background: #2B3446; }
@media (max-width: 700px) {
  .sf .sf-head h2, .sf-explore-head h2 { font-size: 23px; }
  .sf-viewall { height: 34px; padding: 0 13px; font-size: 13px; }
}

/* ---------- Hero ---------- */
.sf .hx-grid {
  margin: 0;
  gap: 12px;
  grid-template-columns: 2.7fr repeat(6, 1fr);
  grid-template-rows: 358px 220px;
}
.sf .hx {
  border-radius: 20px; padding: 22px; gap: 10px;
  box-shadow: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.sf .hx:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(16,24,40,.45); }
.sf .hx-title {
  font-family: var(--sf-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98;
  text-shadow: none; font-size: clamp(26px, 12cqi, 44px);
}
.sf .hx-season .hx-title { font-size: clamp(34px, 13cqi, 58px); }
.sf .hx-sub { font-weight: 500; opacity: .92; font-size: clamp(13px, 4.2cqi, 16px); line-height: 1.3; }
.sf .hx-cta {
  background: #fff; color: var(--sf-ink); font-size: 14px; font-weight: 700;
  padding: 8px 15px; box-shadow: none; margin-top: 2px;
}
.sf .hx-tile { border-radius: 14px; box-shadow: 0 4px 14px -6px rgba(16,24,40,.35); }
.sf .hx-tile img { padding: 7%; }
.sf .hx-pct { background: var(--sf-red); font-size: 11.5px; padding: 2px 7px; left: 7px; bottom: 7px; }
.sf .hx-rank { background: var(--sf-ink); width: 24px; height: 24px; font-size: 12px; top: 7px; left: 7px; }
.sf .hx-picks .hx-rank { background: var(--sf-ink); }
.sf .hx-viewall { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; font-size: 15px; }

/* Flat, coordinated tile colours (a whisper of depth, not a gradient show). */
.sf .hx-picks   { background: linear-gradient(165deg, #2C5BF0, #1F44D0); }
.sf .hx-brands  { background: linear-gradient(165deg, #12A06B, #0B7F55); }
.sf .hx-fashion { background: linear-gradient(165deg, #E0457B, #C02763); }
.sf .hx-give    { background: linear-gradient(165deg, #F2A516, #E07B06); }
.sf .hx-promo   { background: linear-gradient(165deg, #0D8BA6, #0A6A84); }
.sf .hx-season  { background: linear-gradient(170deg, var(--hx-a, #7C3AED), var(--hx-b, #5B21B6)); padding: 26px; }

/* Season: three large product cards, fanned, filling the lower half. */
.sf .hx-fan { left: 0; right: 0; bottom: 16px; height: 62%; }
.sf .hx-fan .hx-tile { width: 54%; }
.sf .hx-fan .hx-tile:nth-child(1) { left: 4%; bottom: 4%; transform: rotate(-7deg); }
.sf .hx-fan .hx-tile:nth-child(2) { left: 25%; bottom: 20%; transform: rotate(2deg); }
.sf .hx-fan .hx-tile:nth-child(3) { right: 4%; left: auto; bottom: 2%; transform: rotate(8deg); }

/* Top Picks: 2x2 that fills the tile under the title. */
.sf .hx-grid4 { gap: 8px; margin-top: 4px; }

/* Brands: one hero product + two stacked, filling the bottom of the tile. */
.sf .hx-pile {
  position: static; margin-top: auto; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; max-height: 64%;
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
}
.sf .hx-pile .hx-tile { position: relative; width: auto; aspect-ratio: auto; transform: none; left: auto; right: auto; bottom: auto; }
.sf .hx-pile .hx-tile:first-child { grid-row: 1 / 3; }

/* Fashion: two tall products. */
.sf .hx-pair { max-height: 64%; gap: 8px; }

/* Top Deal Lists: copy left, three products right. */
.sf .hx-give { flex-direction: row; align-items: stretch; gap: 18px; }
.hx-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 0 0 auto; max-width: 40%; }
.sf .hx-give .hx-title { font-size: clamp(24px, 7.4cqi, 38px); }
.sf .hx-give .hx-sub { font-size: 14px; }
.sf .hx-promo .hx-title { font-size: clamp(24px, 7.4cqi, 38px); }
.hx-lists { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-self: center; height: 100%; max-height: 176px; }

/* Promo: two codes + View All, filling the lower part of the tile. */
.sf .hx-row3 { max-height: 62%; gap: 8px; }

@media (max-width: 1100px) and (min-width: 701px) {
  .sf .hx-grid {
    grid-template-columns: 1fr 1fr; grid-template-rows: 340px 320px 300px 220px;
    grid-template-areas: "season picks" "season brands" "fashion promo" "give give";
  }
  .sf .hx-title, .sf .hx-give .hx-title, .sf .hx-promo .hx-title { font-size: clamp(24px, 7cqi, 38px); }
  .sf .hx-season .hx-title { font-size: clamp(34px, 10cqi, 56px); }
  .sf .hx-pile, .sf .hx-pair, .sf .hx-row3 { max-height: 66%; }
  .hx-lists { max-height: 170px; }
}
@media (max-width: 700px) {
  /* Phone: season leads full width, then a two-up grid; Lists + Promo full width. */
  .sf .hx-grid {
    grid-template-columns: 1fr 1fr; gap: 10px;
    grid-template-rows: 300px 230px 230px 170px 170px;
    grid-template-areas: "season season" "picks brands" "fashion fashion" "give give" "promo promo";
  }
  .sf .hx { padding: 16px; border-radius: 18px; }
  .sf .hx-season { padding: 20px; }
  .sf .hx-season .hx-title { font-size: 36px; }
  .sf .hx-title { font-size: 24px; }
  .sf .hx-fan { height: 58%; left: 34%; }
  .sf .hx-fan .hx-tile { width: 48%; }
  .sf .hx-fashion .hx-pair { position: absolute; right: 12px; bottom: 12px; top: 12px; width: 52%; max-height: none; }
  .sf .hx-pile { max-height: 58%; }
  .sf .hx-cta { font-size: 13px; padding: 7px 12px; }
  .hx-lists { max-height: 130px; }
  .sf .hx-promo .hx-row3 { max-height: 58%; }
}

/* ---------- Carousels ---------- */
.sf .deal-row-wrap { position: relative; }
.sf .sf-row {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 16px) / 5);
  gap: 16px; overflow-x: auto; padding: 2px 1px 6px;
  scroll-snap-type: x mandatory; scroll-padding: 0 1px;
}
.sf .sf-row > * { scroll-snap-align: start; }
@media (max-width: 1180px) { .sf .sf-row { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 900px)  { .sf .sf-row { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; } }
@media (max-width: 640px)  { .sf .sf-row { grid-auto-columns: 46%; gap: 12px; } }
.sf .row-arrow {
  width: 40px; height: 40px; border: 1px solid var(--sf-line); background: #fff;
  color: var(--sf-ink); font-size: 22px; box-shadow: 0 6px 18px -6px rgba(16,24,40,.3);
}
.sf .row-arrow:hover { background: var(--cr-blue-25); color: var(--cr-brand); }
.sf .row-arrow-prev { left: -20px; }
.sf .row-arrow-next { right: -20px; }
@media (max-width: 1400px) { .sf .row-arrow-prev { left: -8px; } .sf .row-arrow-next { right: -8px; } }

/* ---------- Product card (.pc) — one component, every surface ---------- */
.pc {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-card);
  padding: 10px; cursor: pointer; overflow: hidden;
  transition: border-color var(--cr-dur) var(--cr-ease), box-shadow var(--cr-dur) var(--cr-ease), transform var(--cr-dur) var(--cr-ease);
}
.pc:hover { border-color: #D0D5DD; box-shadow: 0 10px 24px -14px rgba(16,24,40,.35); }
.pc:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); border-color: var(--cr-brand); }
.pc .card-actions { top: 10px; right: 10px; }
.pc:hover .card-flag, .pc:focus-within .card-flag { opacity: 1; }
.pc-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 0.8; border-radius: 10px; overflow: hidden; background: #fff;
}
.pc-media img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.pc-rank {
  position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 6px rgba(16,24,40,.25), inset 0 0 0 2px rgba(255,255,255,.55);
}
.pc-rank-1 { background: linear-gradient(160deg, #F7C948, #D99A06); }
.pc-rank-2 { background: linear-gradient(160deg, #C9D1DC, #8D99AB); }
.pc-rank-3 { background: linear-gradient(160deg, #E8A06B, #B8642B); }
.pc-rank-4 { background: var(--cr-brand); }
.pc-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 2px; flex: 1 1 auto; min-width: 0; }
.pc-title {
  margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--sf-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.3em);
  transition: color var(--cr-dur) var(--cr-ease);
}
.pc:hover .pc-title { color: var(--cr-brand); }
.pc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; }
.pc-off {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--sf-red); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -0.01em;
}
.pc .pill { height: 24px; padding: 0 9px; font-size: 12px; font-weight: 600; border-radius: 999px; gap: 4px; }
.pc .pill svg { width: 12px; height: 12px; }
.pc-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.pc-price { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--sf-ink); }
.pc-list { font-size: 14px; font-weight: 500; color: #98A2B3; text-decoration: line-through; }
.pc-noprice { margin: 0; font-size: 15px; font-weight: 700; color: var(--sf-ink-2); }
.pc-note { margin: -3px 0 0; font-size: 12px; line-height: 1.3; color: var(--sf-ink-3); }
.pc-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pc-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--sf-ink-2); }
.pc-star { color: #F79009; font-size: 13px; }
.pc-rating-n { font-weight: 500; color: var(--sf-ink-3); margin-left: 1px; }
.pc .pill-sold { height: 22px; font-size: 11.5px; }
.pc-meta { margin: auto 0 0; padding-top: 4px; font-size: 12px; color: var(--sf-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-ended .pc-media img { opacity: .55; }
.pc-ended .pc-price { color: #98A2B3; }

/* Reveal Code (promo carousel opens the modal; grid reveals + copies in place). */
.pc-reveal {
  display: flex; align-items: stretch; width: 100%; height: 40px; margin-top: 2px;
  border: 0; border-radius: 10px; overflow: hidden; padding: 0;
  background: var(--cr-brand); color: #fff; font: inherit; cursor: pointer;
  transition: background var(--cr-dur) var(--cr-ease);
}
.pc-reveal:hover { background: var(--cr-brand-hover); }
.pc-reveal-main { flex: 1 1 auto; display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 700; }
.pc-reveal-peek {
  flex: none; display: flex; align-items: center; padding: 0 12px;
  background: var(--cr-blue-50); color: var(--cr-blue-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  border-left: 2px dashed var(--cr-blue-300);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -10px; padding-left: 18px;
}
.pc-reveal.revealed { background: var(--cr-success-600); }
.pc-reveal.revealed .pc-reveal-peek { background: var(--cr-success-50); color: var(--cr-success-700); border-color: var(--cr-success-500); letter-spacing: .02em; }
@media (max-width: 640px) {
  .pc { padding: 8px; border-radius: 14px; }
  .pc-body { padding: 8px 2px 0; gap: 5px; }
  .pc-title { font-size: 13.5px; }
  .pc-price { font-size: 18px; }
  .pc .pill:not(.pill-sold) { display: none; }   /* phone: discount badge carries the tag row */
  .pc-reveal { height: 38px; }
  .pc-reveal-main { font-size: 13px; padding: 0 10px; }
  .pc-reveal-peek { font-size: 12px; padding-right: 8px; }
}

/* ---------- You May Like ---------- */
.yml-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.yml-card { border: 1px solid var(--sf-line); border-radius: var(--sf-radius-card); padding: 16px 16px 18px; background: #fff; }
.yml-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.yml-head h3 { margin: 0; flex: 1; font-size: 15px; font-weight: 700; color: var(--sf-ink); }
.yml-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cr-blue-25); color: var(--cr-brand); flex: none; }
.yml-icon svg { width: 17px; height: 17px; }
.yml-go { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--sf-ink-3); display: grid; place-items: center; }
.yml-go svg { width: 18px; height: 18px; }
.yml-go:hover { background: var(--cr-gray-100); color: var(--cr-brand); }
.yml-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.yml-tile { position: relative; border: 0; padding: 0 0 12px; background: none; cursor: pointer; }
.yml-img { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--cr-gray-50); border: 1px solid #F2F4F7; transition: border-color var(--cr-dur) var(--cr-ease); }
.yml-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.yml-tile:hover .yml-img { border-color: var(--cr-blue-300); }
.yml-tag {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  white-space: nowrap; padding: 2px 8px; border-radius: 999px;
  background: var(--sf-red); color: #fff; font-size: 11.5px; font-weight: 800; box-shadow: 0 0 0 2px #fff;
}
.yml-card[data-yml="sellers"] .yml-tag { background: var(--cr-success-600); font-weight: 700; }
.yml-card[data-yml="ending"] .yml-tag { background: var(--sf-ink); font-weight: 700; font-size: 10.5px; }
@media (max-width: 1000px) { .yml-grid { grid-template-columns: 1fr; } }
@media (max-width: 1240px) { .yml-pre { display: none; } }
@media (max-width: 1000px) and (min-width: 641px) { .yml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yml-card:last-child { grid-column: 1 / -1; } }

/* ---------- Shop Collections ---------- */
.sf .col-row { display: flex; gap: 14px; overflow-x: auto; padding: 2px 1px 8px; scroll-snap-type: x proximity; }
.col-card {
  flex: 0 0 128px; display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid var(--sf-line); border-radius: 18px; overflow: hidden; background: #fff;
  scroll-snap-align: start; transition: transform var(--cr-dur) var(--cr-ease), box-shadow var(--cr-dur) var(--cr-ease);
}
.col-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(16,24,40,.4); }
.col-img { display: block; height: 104px; background: var(--col-tint, var(--cr-gray-50)); }
.col-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; }
.col-label {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 8px;
  text-align: center; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--sf-ink);
}
.col-card:hover .col-label { color: var(--cr-brand); }
@media (max-width: 640px) { .col-card { flex-basis: 108px; } .col-img { height: 88px; } }

/* ---------- Explore ---------- */
.sf-explore { margin-top: var(--sf-section-gap); }
.sf .sf-explore-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.sf-explore-head h2 { margin: 0; }
.sf-explore-sub { margin: 6px 0 0; font-size: 16px; color: var(--sf-ink-3); }
.sf-explore-sub[hidden] { display: none; }
.sf .cat-back-btn { flex: none; }
/* Non-home views (Top Deals / Promo heroes, brand pages) sit right under the header. */
.sf #homeSections[hidden] ~ .sf-explore { margin-top: 8px; }

.sf .sf-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--sf-line);
}
.sf .sf-toolbar .fb-pill {
  height: 40px; padding: 0 14px; gap: 7px; border-color: #D0D5DD; box-shadow: none;
  font-weight: 500; color: var(--sf-ink-2);
}
.sf .sf-toolbar .fb-pill svg { width: 16px; height: 16px; color: var(--sf-ink-3); }
.sf .sf-toolbar .fb-caret { width: 14px; height: 14px; margin-left: 2px; }
.sf .sf-toolbar .fb-pill:hover { background: var(--cr-gray-50); }
.sf .sf-toolbar .fb-pill.on, .sf .sf-toolbar .fb-pill[aria-expanded="true"] { border-color: var(--cr-brand); background: var(--cr-brand-subtle); color: var(--cr-brand); }
.sf .sf-toolbar .fb-pill.on svg { color: var(--cr-brand); }
.sf .sf-toolbar .fb-more { background: var(--cr-brand); border-color: var(--cr-brand); color: #fff; font-weight: 700; }
.sf .sf-toolbar .fb-more svg { color: #fff; }
.sf .sf-toolbar .fb-more:hover { background: var(--cr-brand-hover); }
.sf .sf-toolbar .fb-more.on { background: var(--cr-brand-hover); color: #fff; }
.fb-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; border-radius: 999px; background: #fff; color: var(--cr-brand); font-size: 12px; }
.fb-count[hidden] { display: none; }
.sf .fb-pop { border-color: var(--sf-line); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(16,24,40,.25); }
.fb-pop-right { left: auto !important; right: 0; }
.fb-pop-list { min-width: 240px; padding: 10px; }
.fb-opt-list { display: flex; flex-direction: column; margin-top: 6px; max-height: 340px; overflow-y: auto; }
.sf .fb-opt {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; font-size: 14px; font-weight: 500; color: var(--sf-ink);
}
.sf .fb-opt:hover { background: var(--cr-gray-50); }
.sf .fb-opt.selected { background: var(--cr-brand-subtle); color: var(--cr-brand); font-weight: 700; }
.fb-check-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 14px; color: var(--sf-ink); cursor: pointer; }
.fb-check-row input { width: 18px; height: 18px; accent-color: var(--cr-brand); }

.sf .sf-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: auto;
}
@media (max-width: 1180px) { .sf .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sf .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 640px)  { .sf .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* Skeletons keep the card's proportions. */
.sf .sf-grid .deal-card.skeleton { border-radius: var(--sf-radius-card); min-height: 340px; }

.sf-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0 0; }
.sf-more[hidden] { display: none; }
.sf-more-note { margin: 0; font-size: 13px; color: var(--sf-ink-3); }
.sf-more-btn {
  height: 48px; min-width: 200px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--cr-brand); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(36,80,233,.7);
  transition: background var(--cr-dur) var(--cr-ease), transform var(--cr-dur) var(--cr-ease);
}
.sf-more-btn:hover { background: var(--cr-brand-hover); }
.sf-more-btn:active { transform: scale(.98); }
.sf-more-btn:disabled { background: var(--cr-blue-300); cursor: progress; box-shadow: none; }

@media (max-width: 700px) {
  .sf-explore-sub { font-size: 14px; }
  /* Phone: the toolbar scrolls sideways; popovers become bottom sheets so the
     scroll container can't clip them. */
  .sf .sf-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--sf-gutter)); margin-right: calc(-1 * var(--sf-gutter)); padding: 0 var(--sf-gutter) 14px; }
  .sf .sf-toolbar::-webkit-scrollbar { display: none; }
  .sf .sf-toolbar .fb-pill { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .sf .fb-pop, .sf .fb-pop-right {
    position: fixed; left: 12px !important; right: 12px; top: auto; bottom: 12px; z-index: 90;
    max-height: 70vh; overflow-y: auto; box-shadow: 0 -8px 40px rgba(16,24,40,.3);
  }
}

/* ---------- App panel ---------- */
.sf-app { margin-top: 72px; }
.sf-app-card {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 28px; padding: 52px 32px 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #DCE5FF 0%, #EEF2FF 55%, #F7F9FF 100%);
}
.sf-app-copy { max-width: 680px; margin: 0 auto; }
.sf-app-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--cr-brand); }
.sf-app-eyebrow img { width: 28px; height: 28px; border-radius: 8px; }
.sf-app-copy h2 { margin: 0; font-family: var(--sf-display); font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--sf-ink); }
.sf-app-sub { margin: 14px auto 0; max-width: 560px; font-size: 17px; line-height: 1.5; color: var(--sf-ink-2); }
.sf-app-perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 18px 0 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--sf-ink); }
.sf-app-perks li { display: inline-flex; align-items: center; gap: 7px; }
.sf-app-perks li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--cr-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sf-app-get { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; }
.sf-app-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 22px 0 0; border: 0; border-right: 1px solid #C9D3F5; background: none; font-size: 12.5px; font-weight: 600; color: var(--sf-ink-2); }
.sf-app-qr img { width: 88px; height: 88px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(16,24,40,.08); }
.sf .sf-app-store { background: #000; color: #fff; padding: 10px 18px; border-radius: 12px; }
.sf-app-visual { position: relative; display: flex; align-items: flex-start; justify-content: center; height: 370px; margin-top: 40px; }
.sf-shot { flex: none; width: 220px; height: auto; border-radius: 28px; box-shadow: 0 24px 48px -18px rgba(16,24,40,.45); }
.sf-shot-1 { transform: rotate(-7deg) translate(36px, 36px); }
.sf-shot-2 { transform: rotate(7deg) translate(-36px, 36px); }
.sf-app-mascot {
  position: relative; z-index: 2; flex: none; align-self: flex-start; margin-top: 70px;
  width: 210px; height: 210px; border-radius: 50%; overflow: hidden;
  border: 8px solid #fff; box-shadow: 0 20px 44px -16px rgba(36,80,233,.6);
}
.sf-app-mascot img { width: 100%; height: 100%; display: block; }
@media (max-width: 700px) {
  .sf-app { margin-top: 48px; }
  .sf-app-card { border-radius: 22px; padding: 36px 18px 0; }
  .sf-app-sub { font-size: 15px; }
  .sf-app-perks { flex-direction: column; align-items: center; gap: 8px; }
  .sf-app-qr { display: none; }   /* a QR code is for scanning from another screen */
  .sf-app-visual { height: 260px; margin-top: 28px; }
  .sf-shot { width: 140px; border-radius: 20px; }
  .sf-app-mascot { margin-top: 56px; }
  .sf-shot-1 { transform: rotate(-7deg) translate(30px, 40px); }
  .sf-shot-2 { transform: rotate(7deg) translate(-30px, 40px); }
  .sf-app-mascot { width: 140px; height: 140px; border-width: 6px; }
}

/* ---------- Footer ---------- */
.sf-footer { margin-top: 72px; background: #F9FAFB; border-top: 1px solid var(--sf-line); padding: 56px 0 32px; }
.sf-foot-top { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 32px; }
.sf-foot-tag { margin: 14px 0 18px; max-width: 260px; font-size: 14px; line-height: 1.5; color: var(--sf-ink-3); }
.sf-foot-app {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid #D0D5DD; border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 600; color: var(--sf-ink);
}
.sf-foot-app svg { width: 16px; height: 16px; color: var(--cr-brand); }
.sf-foot-app:hover { border-color: var(--cr-brand); color: var(--cr-brand); }
.sf-foot-col { display: flex; flex-direction: column; gap: 12px; }
.sf-foot-col h3 { margin: 4px 0 4px; font-size: 14px; font-weight: 700; color: var(--sf-ink); }
.sf-foot-col a { font-size: 14px; color: var(--sf-ink-3); }
.sf-foot-col a:hover { color: var(--cr-brand); }
.sf-foot-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--sf-line); }
.sf-footer .footer-disclosure { margin: 0 0 8px; max-width: 900px; font-size: 12.5px; line-height: 1.55; color: var(--sf-ink-3); }
.sf-foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 18px; font-size: 13px; color: var(--sf-ink-3); }
.sf-foot-legal-links { display: flex; gap: 20px; }
.sf-foot-legal a:hover { color: var(--cr-brand); }
@media (max-width: 1000px) {
  .sf-foot-top { grid-template-columns: repeat(3, 1fr); }
  .sf-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sf-footer { padding-top: 40px; }
  .sf-foot-top { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* ---------- Phone refinements ---------- */
@media (max-width: 520px) {
  .sf-bar { column-gap: 10px; }
  .sf-actions { gap: 6px; }
  .sf .account-slot { gap: 6px; }
  .sf .account-signin, .sf .account-signup { height: 36px; padding: 0 12px; font-size: 13.5px; }
  .sf .sf-actions .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 400px) {
  .sf-wordmark { font-size: 19px; }
  .sf-brand { gap: 8px; }
  /* The app banner above already offers the download the bell leads to. */
  .sf .sf-actions #bellBtn { display: none; }
}
@media (max-width: 700px) {
  .sf .hx-fashion .hx-pair { left: auto; right: 12px; top: 12px; bottom: 12px; width: 50%; }
  .sf .hx-fashion .hx-title { max-width: 46%; }
  .pc-reveal-main { white-space: nowrap; font-size: 12.5px; padding: 0 8px; }
  .pc-reveal-peek { margin-left: -8px; padding: 0 7px 0 14px; font-size: 11.5px; letter-spacing: .02em; }
}

/* ---------- Name Brands landing (storefront treatment) ----------
   Same card language as the rest of the page: white card, hairline border,
   brand monogram in the brand's own colour instead of a full colour band. */
.sf .nb-hero {
  margin: 8px 0 24px; padding: 0; border: 0; background: none; box-shadow: none; text-align: left;
}
.sf .nb-hero-badge { background: var(--cr-brand-subtle); color: var(--cr-brand); }
.sf .nb-hero-title { font-family: var(--sf-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.04em; margin: 12px 0 8px; }
.sf .nb-hero-sub { font-size: 16px; color: var(--sf-ink-3); max-width: 640px; }
.sf .nb-browse-all {
  height: 40px; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--sf-ink); color: #fff; font-size: 14px; font-weight: 700;
}
.sf .nb-browse-all:hover { background: #2B3446; }
.sf .nb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sf .nb-card {
  border: 1px solid var(--sf-line); border-radius: var(--sf-radius-card); background: #fff;
  box-shadow: none; overflow: hidden; padding: 0;
  transition: border-color var(--cr-dur) var(--cr-ease), box-shadow var(--cr-dur) var(--cr-ease);
}
.sf .nb-card:hover { border-color: #D0D5DD; box-shadow: 0 10px 24px -14px rgba(16,24,40,.35); transform: none; }
.sf .nb-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px;
  background: none; color: var(--sf-ink);
}
.nb-mono {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--nb-c1, var(--cr-brand)), var(--nb-c2, var(--nb-c1, var(--cr-brand))));
  color: #fff; font-family: var(--sf-display); font-weight: 800; font-size: 16px;
}
.sf .nb-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: var(--sf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf .nb-count { background: var(--cr-gray-100); color: var(--sf-ink-2); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.sf .nb-thumbs { padding: 4px 16px 0; gap: 8px; }
.sf .nb-thumb { border: 1px solid #F2F4F7; border-radius: 12px; background: var(--cr-gray-50); }
.sf .nb-thumb img { mix-blend-mode: multiply; }
.sf .nb-badge { background: var(--sf-red); }
.sf .nb-cta { padding: 12px 16px 16px; color: var(--cr-brand); font-weight: 700; }
@media (max-width: 1100px) { .sf .nb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .sf .nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sf .nb-name { font-size: 15px; } .nb-mono { width: 28px; height: 28px; font-size: 14px; } }

.sf .nb-grid { max-width: none; margin-left: 0; margin-right: 0; }

/* The modal shows the full code so the shopper knows what to look for at
   checkout, but copying it is the CTA's job ("Copy Code & Open Amazon"), which
   leaves through our link. */
.sf #promoCodeText { -webkit-user-select: none; user-select: none; }
.sf #promoCodeText.is-loading { color: var(--sf-ink-3); font-size: 15px; letter-spacing: 0; }
.sf #promoCodeText.is-error { color: var(--cr-error-600); font-size: 14px; letter-spacing: 0; }