/* V1 web-app polish: freshness, retailer-rich empty states and checked artwork. */
.recently-checked {
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
  gap: 28px;
  margin-top: 28px;
  padding: 34px;
  border: 1px solid rgb(7 63 44 / .1);
  border-radius: 30px;
  background: linear-gradient(135deg, #073f2c, #08744a);
  box-shadow: 0 20px 50px rgb(5 93 57 / .13);
}

.recently-checked-copy { align-self: center; color: #fff; }
.recently-checked-copy .eyebrow { color: #7cf0b4; }
.recently-checked-copy h2 { margin: 8px 0 10px; font-family: var(--display); font-size: clamp(38px, 4vw, 60px); font-style: italic; line-height: .95; text-transform: uppercase; }
.recently-checked-copy p { margin: 0; color: rgb(255 255 255 / .68); line-height: 1.55; }
.recently-checked-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recently-checked-list button { min-width: 0; min-height: 76px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; color: var(--ink); text-align: left; border: 1px solid rgb(255 255 255 / .22); border-radius: 18px; background: rgb(255 255 255 / .94); box-shadow: inset 0 1px #fff; cursor: pointer; }
.recently-checked-list button:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgb(0 0 0 / .12); }
.recently-checked-list button > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.recently-checked-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.recently-checked-list small { color: var(--muted); font-size: 10px; }
.recently-checked-list b { color: var(--v1-green); }

.product-preview-retailers { width: min(100%, 520px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 18px auto 20px; }
.product-preview-retailers > span { min-width: 0; display: grid; justify-items: center; gap: 7px; padding: 13px 8px; border: 1px solid rgb(7 63 44 / .1); border-radius: 15px; background: #fff; }
.product-preview-retailers .retailer-mark { width: 42px; height: 42px; }
.product-preview-retailers b { overflow: hidden; width: 100%; color: var(--ink); font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.promo-art.noel-spin { position: relative; height: 100%; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 18px 20px 44px; overflow: hidden;  /* height (not min-height) so it cannot outgrow .art and clip; bottom pad reserves the .art-value corner */ color: #fff; background: radial-gradient(circle at 80% 24%, rgb(255 232 50 / .28), transparent 28%), linear-gradient(145deg, #33206d, #6240ad); }
.promo-art.noel-spin:after { content: ""; position: absolute; inset: 0; opacity: .15; background-image: radial-gradient(circle, #fff 1px, transparent 1.5px); background-size: 16px 16px; }
.promo-art.noel-spin > * { position: relative; z-index: 1; }
.promo-art .promo-brand { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 99px; background: rgb(255 255 255 / .14); font-size: 10px; font-weight: 800; }
.promo-art .promo-brand img { width: 19px; height: 19px; object-fit: contain; border-radius: 5px; }
.promo-art.noel-spin small { margin-top: 6px; color: #d9cfff; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.promo-art.noel-spin strong { font-family: var(--display); font-size: clamp(21px, 2.1vw, 30px); font-style: italic; line-height: .86; text-transform: uppercase; }
.promo-art.noel-spin > b { color: #ffeb3b; font-size: 12px; text-transform: uppercase; }
.promo-wheel { position: absolute !important; z-index: 0 !important; right: -32px; bottom: -46px; width: 180px; height: 180px; border: 18px solid rgb(255 255 255 / .12); border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .18), 0 0 45px rgb(255 227 50 / .17); }
.promo-wheel:before, .promo-wheel:after, .promo-wheel span:before, .promo-wheel span:after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 50%; transform-origin: 50% 0; background: rgb(255 255 255 / .22); }
.promo-wheel:after { transform: rotate(90deg); }
.promo-wheel span:before { transform: rotate(45deg); }
.promo-wheel span:after { transform: rotate(135deg); }

@media (max-width: 920px) {
  .recently-checked { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .recently-checked { padding: 24px 18px; border-radius: 24px; }
  .recently-checked-list { grid-template-columns: 1fr; }
  .product-preview-retailers { grid-template-columns: 1fr; }
  .product-preview-retailers > span { grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
  .product-preview-retailers b { text-align: left; }
}

/* Entry-cost badges are now glyphs, not words: a ticket for free, a person for
   a social action, a dollar for spend. Colour still carries meaning, and the
   text label lives in aria-label/title so nothing is lost to a screen reader
   or on hover. Filter chips keep their words via the withText option. */
.badge.badge-icon { gap: 5px; padding: 0 7px; }
.badge.badge-icon svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.badge.badge-icon:has(span) { padding: 0 9px 0 7px; }
.badge.badge-solid.badge-icon svg { stroke: #fff; }

/* ==========================================================================
   Giveaways page — horizontal filters (Airbnb pattern)
   The left sidebar was removed: with a feed this size it spent a third of the
   page filtering a handful of cards. Entry type is now a row of icon tabs,
   category a row of pills, and the whole thing scrolls horizontally on narrow
   screens rather than stacking.
   ========================================================================== */
.gv-filters { margin: var(--s-5) 0 var(--s-4); }

.gv-tabs {
  display: flex; gap: clamp(26px, 4vw, 54px);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.gv-tabs::-webkit-scrollbar { display: none; }
.gv-tab {
  display: grid; justify-items: center; gap: 5px;
  flex: none; min-width: 74px; padding: 4px 6px 10px; margin-bottom: -13px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font: inherit; font-size: var(--t-2); font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color .16s, border-color .16s, opacity .16s;
  white-space: nowrap;
}
.gv-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gv-tab:hover { color: var(--ink); }
.gv-tab-n { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.gv-tab.is-active .gv-tab-n { color: var(--ink-2); }
.gv-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

.gv-tools { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); }
.gv-pills { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; flex: 1; }
.gv-pills::-webkit-scrollbar { display: none; }
.gv-pill {
  flex: none; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--t-2); font-weight: 600; white-space: nowrap;
  transition: border-color .16s, background-color .16s, color .16s;
}
.gv-pill:hover { border-color: var(--ink-3); }
.gv-pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.gv-sort { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.gv-count { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--t-3); font-weight: 700; }
.gv-clear { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: var(--t-2); font-weight: 600; color: var(--brand); text-decoration: underline; }

@media (max-width: 720px) {
  .gv-tools { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .gv-tabs { gap: var(--s-5); }
}

/* Prize value was bare text with a shadow over busy artwork and got lost.
   A solid pill reads at a glance regardless of what is behind it. */
.art-value {
  left: 10px; bottom: 10px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgb(9 24 17 / .82);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .3), 0 4px 14px rgb(0 0 0 / .3);
  font-size: var(--t-4);
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   Occasion band (Father's Day and whatever follows it)
   Warm, so it reads as a moment in the calendar rather than another feed row,
   but restrained: it sits above the catalogue and must not outshout it.
   -------------------------------------------------------------------------- */
.occasion-band {
  display: grid;
  gap: var(--s-5);
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgb(184 118 42 / .22);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(255 196 108 / .2), transparent 58%),
    linear-gradient(180deg, rgb(255 246 233 / .9), rgb(255 250 243 / .55));
}
.occasion-head { display: flex; align-items: center; gap: var(--s-4); }
.occasion-flag {
  flex: none;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: #7a4410;
  color: #fff;
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.occasion-head h2 { font-size: var(--t-6); line-height: 1.15; }
.occasion-head p { margin-top: 3px; color: var(--muted); font-size: var(--t-3); }

.occasion-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); }
.occ-tile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.occ-tile:hover { transform: translateY(-2px); border-color: rgb(122 68 16 / .4); box-shadow: 0 8px 20px rgb(70 40 8 / .1); }
.occ-tile-copy { min-width: 0; flex: 1; display: grid; gap: 1px; }
.occ-tile-copy small { color: var(--muted); font-size: var(--t-2); }
.occ-tile-copy strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--t-3); line-height: 1.3;
}
.occ-tile-meta { flex: none; font-size: var(--t-3); font-weight: 700; color: #7a4410; }

@media (max-width: 640px) {
  .occasion-head { align-items: flex-start; }
  .occasion-flag { margin-top: 2px; }
}

/* An estimated closing date shown in the same type as a published one is
   exactly the sort of quiet inaccuracy this product exists to avoid. */
.close-basis {
  display: flex;
  gap: 8px;
  margin-top: var(--s-3);
  padding: 10px 12px;
  border: 1px solid rgb(180 120 20 / .28);
  border-radius: var(--r-md);
  background: rgb(255 246 230 / .8);
  color: #6b4308;
  font-size: var(--t-2);
  line-height: 1.45;
}
.close-basis svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.buy-row .v em { font-style: normal; color: var(--muted); font-weight: 500; }
.occasion-head { flex-wrap: wrap; }
.occasion-head > div { flex: 1; min-width: 240px; }
.occ-more {
  flex: none;
  padding: 9px 15px;
  border: 1px solid rgb(122 68 16 / .3);
  border-radius: var(--r-pill);
  background: transparent;
  color: #7a4410;
  font-size: var(--t-2);
  font-weight: 700;
  cursor: pointer;
}
.occ-more:hover { background: rgb(122 68 16 / .08); }

/* Station wordmarks are wide lockups, not square app icons: contain with
   breathing room, on the station's own background colour. */
.rmark.logo-chip img { object-fit: contain; padding: 14%; }

/* --------------------------------------------------------------------------
   App header, matched one-to-one to the landing page's glass nav.
   This file loads last, so these overrides win over the two earlier header
   passes in app.css (one of which had pinned the bar to a constant size).
   Typography stays the app's own; the landing header adopted it in return.
   -------------------------------------------------------------------------- */
.hdr,
.hdr.is-scrolled {
  position: sticky;
  top: 12px;
  z-index: 100;
  width: calc(100% - 28px);
  margin: 12px auto 0;
  padding: 0;
  background: none;
  transition: width .38s cubic-bezier(.2, .8, .2, 1);
}
.hdr.is-scrolled { width: min(calc(100% - 40px), 1280px); }
.hdr-main,
.hdr.is-scrolled .hdr-main {
  height: auto;
  min-height: 70px;
  max-width: none;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 24px;
  background: linear-gradient(112deg, rgb(4 90 57 / .82), rgb(6 139 82 / .78));
  box-shadow: 0 18px 45px rgb(5 78 49 / .21), inset 0 1px rgb(255 255 255 / .28);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  transition: min-height .3s, border-radius .3s;
}
.hdr.is-scrolled .hdr-main { min-height: 62px; border-radius: 28px; }

@media (max-width: 640px) {
  .hdr, .hdr.is-scrolled { top: 8px; width: calc(100% - 16px); margin-top: 8px; }
  .hdr.is-scrolled { width: calc(100% - 24px); }
  .hdr-main, .hdr.is-scrolled .hdr-main { min-height: 60px; padding: 8px 9px 8px 12px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr-main { transition: none; }
}

/* Deal figures in the product's own sans. The condensed display face made
   "Up to 30% off" shout like a flyer; the numbers still lead at this
   weight without changing voice mid-card. */
.d-offer { font-family: inherit; font-weight: 800; letter-spacing: -.02em; font-size: var(--t-5); }
.d-offer.small { font-size: var(--t-4); }

/* Campaign banners keep every word: contain on a dark ground instead of a
   crop. Only listings that opt in via image_fit get this. */
.art .art-img-contain, .art img.art-img-contain { object-fit: contain; background: #101016; }

/* Plain back link: the boxed chip read as a button competing with the page. */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 18px; padding: 0; border: 0; background: none;
  color: var(--ink-2); font: inherit; font-size: var(--t-3); font-weight: 600;
  cursor: pointer;
}
.back-link:hover { color: var(--ink); text-decoration: underline; }

/* Breathing room between the estimated-date note and the enter button. */
.close-basis { margin-bottom: var(--s-3); }

/* The occasion band sits between big panels on Deals; give it its own air. */
.page > .occasion-band { margin: clamp(26px, 3.5vw, 44px) 0; }

/* Nav links breathe like the landing header's. */
.nav { gap: 4px; padding: 4px; }
.nav a { padding: 10px 17px; }

/* Discover hero illustration, replacing the search tile: the map, lifted
   from the landing page, with three slow entry-cost dots. */
.discover-hero-art {
  position: relative;
  justify-self: end;
  width: min(100%, 300px);
  aspect-ratio: 300 / 411;
  max-height: 340px;
  display: grid;
  place-items: center;
}
.discover-hero-art img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: invert(32%) sepia(52%) saturate(560%) hue-rotate(100deg) brightness(.9);
  opacity: .9;
}
.discover-hero-art .dot {
  position: absolute;
  width: 12px; height: 12px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(6 40 26 / .25);
  animation: discoverDot 3.2s ease-in-out infinite;
}
.discover-hero-art .d1 { left: 66%; top: 20%; background: #ef3f38; }
.discover-hero-art .d2 { left: 67%; top: 51%; background: #34c26a; animation-delay: 1.1s; }
.discover-hero-art .d3 { left: 51%; top: 67%; background: #3d8bfd; animation-delay: 2.2s; }
@keyframes discoverDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .discover-hero-art .dot { animation: none; } }
@media (max-width: 860px) { .discover-hero-art { display: none; } }

/* "View giveaway" is a label for the card's own link, not its own control.
   It was stacked above the card overlay, so clicks landed on an inert span. */
.g-card .g-foot .link-arrow { pointer-events: none; }

/* Entry chip leads the tag row: same size as the category chips, with the
   glyph the product uses everywhere else. */
.g-tags .badge.badge-icon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: var(--r-pill);
  font-size: var(--t-1); font-weight: 700;
}
.g-tags .badge.badge-icon svg { width: 13px; height: 13px; }

/* With the illustration instead of a 420px search tile, the right column
   only needs to fit the map. */
.discover-page .discover-top { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }

/* --------------------------------------------------------------------------
   Nav parity with the landing header, to the pixel: centred link group,
   same pill dimensions, same hover glass, same mint underline. The landing
   nav adopts this same spec (minus the display face) on its side.
   -------------------------------------------------------------------------- */
.hdr-main { display: grid; grid-template-columns: 1fr auto 1fr; }
.app-mark { justify-self: start; }
.hdr-right { justify-self: end; margin-left: 0; }
.nav {
  justify-self: center;
  gap: 4px; padding: 4px;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 17px;
  background: rgb(0 40 26 / .14);
  box-shadow: none;
}
.nav a {
  min-height: 40px;
  display: inline-flex; align-items: center;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: rgb(255 255 255 / .76);
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
}
.nav a:hover, .nav a.on {
  color: #fff;
  border-color: rgb(255 255 255 / .18);
  background-image:
    radial-gradient(110px circle at var(--glass-x, 50%) var(--glass-y, 50%), rgb(255 255 255 / .28), transparent 68%),
    linear-gradient(135deg, rgb(255 255 255 / .2), rgb(255 255 255 / .08));
  box-shadow: inset 0 1px rgb(255 255 255 / .24);
}
.nav a.on::after {
  left: 14px; right: 14px; bottom: 4px;
  background: #75efae;
  box-shadow: 0 0 10px #75efae;
}
@media (max-width: 900px) {
  .hdr-main { display: flex; }
}

/* Discover hero: a touch shorter, and the empty air under the headline now
   carries live numbers computed from the catalogue itself. */
.discover-page .discover-top { padding: clamp(26px, 3.5vw, 46px) clamp(30px, 4vw, 52px); }
.discover-stats {
  display: flex; flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
}
.discover-stats span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / .72);
  color: var(--ink-2);
  font-size: var(--t-2); font-weight: 600;
}
.discover-stats b { color: var(--ink); font-size: var(--t-4); font-weight: 800; letter-spacing: -.02em; }
.discover-hero-art { max-height: 300px; }

/* Stats as a quiet metric strip: big numeral over a small label, hairline
   dividers instead of pill boxes. */
.discover-stats { gap: 0; margin-top: var(--s-5); }
.discover-stats .stat {
  display: grid; gap: 2px;
  padding: 2px clamp(18px, 2.4vw, 34px);
  border: 0; border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.discover-stats .stat:first-child { border-left: 0; padding-left: 0; }
.discover-stats .stat b {
  line-height: 1.1;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.discover-stats .stat small {
  line-height: 1.3;
  color: var(--ink-3);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* App nav base state matches the landing's: plain text until hovered.
   Earlier passes gave every link a filled chip. */
.nav a { background: none; box-shadow: none; font-weight: 600; }

/* The Noel Leeming promo art draws its own roundel; no favicon service. */
.promo-brand .nl-dot {
  width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: #e42619; color: #fff;
  font: 800 10px/1 var(--sans); font-style: normal;
}

/* Idle nav links carried a per-link backdrop-filter from the old glass pass,
   which rendered each one as its own tinted chip. The landing nav has no
   such thing: idle is plain text on the shared strip. */
.nav a { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* One line for the Discover headline. */
.discover-page .discover-heading h1 { max-width: none; white-space: nowrap; font-size: clamp(28px, 2.7vw, 44px); }
@media (max-width: 900px) { .discover-page .discover-heading h1 { white-space: normal; } }

/* Retailer marquee, drifting LMCT-style. Duplicated track halves make the
   loop seamless; hover pauses it; reduced motion gets a scrollable row. */
.rt-marquee {
  overflow: hidden;
  margin-top: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rt-track {
  display: flex; gap: var(--s-3);
  width: max-content;
  animation: rtScroll 36s linear infinite;
}
.rt-marquee:hover .rt-track { animation-play-state: paused; }
@keyframes rtScroll { to { transform: translateX(-50%); } }
.rt-tile {
  display: inline-flex; align-items: center; gap: 10px;
  flex: none;
  padding: 9px 16px 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit; font-size: var(--t-2); font-weight: 700;
  cursor: pointer;
  transition: border-color .16s, transform .16s;
}
.rt-tile:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.rt-tile .rmark { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) {
  .rt-track { animation: none; }
  .rt-marquee { overflow-x: auto; }
}

.detail-actions { display: flex; align-items: center; }
.share-btn { margin-left: 12px; }
.share-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* Stats: numeral and label sit together. */
.discover-stats .stat { gap: 4px; align-content: start; }
.discover-stats .stat b { line-height: 1; }

/* Min-saving control under the search bar. */
.product-minsave {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s-3);
  color: rgb(255 255 255 / .85);
  font-size: var(--t-2); font-weight: 600;
}
.product-minsave .sel { width: auto; }

/* The input's clear control inherited a tinted default; plain white X. */
.product-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  background: #fff;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg>') center / contain no-repeat;
  cursor: pointer;
}

@media (max-width: 640px) {
  /* One row of three stats. */
  .discover-stats { flex-wrap: nowrap; margin-top: var(--s-4); }
  .discover-stats .stat { padding: 0 12px; }
  .discover-stats .stat:first-child { padding-left: 0; }
  .discover-stats .stat b { font-size: 19px; }
  .discover-stats .stat small { font-size: 9px; letter-spacing: .02em; }

  /* Entry tabs fit the viewport: no counts, tighter run. */
  .gv-tabs { gap: 14px; }
  .gv-tab { min-width: 0; padding: 4px 2px 10px; }
  .gv-tab svg { width: 20px; height: 20px; }
  .gv-tab span { font-size: 11px; }
  .gv-tab-n { display: none; }

  /* Burger sits far right, heart beside it. */
  .hdr-right { margin-left: auto; }
}

/* Save and Share as two matched buttons on one row. Previously an icon
   button and a loose text label alternated four times, which read as
   clutter in the corner of an otherwise clean panel. */
.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.detail-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit; font-size: var(--t-2); font-weight: 700;
  cursor: pointer;
  transition: border-color .16s, color .16s, background-color .16s;
}
.detail-action:hover { border-color: var(--ink-3); color: var(--ink); }
.detail-action svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.detail-action[aria-pressed="true"] { color: var(--free); border-color: var(--free); }
.detail-action[aria-pressed="true"] svg { fill: var(--free); stroke: var(--free); }

/* The estimated-date note now sits in the body under Who can enter. */
.detail-sec .close-basis { margin-top: var(--s-3); margin-bottom: 0; }

/* Deal search lives with the other filters, in the product's own voice. */
.deal-search-row { flex-wrap: wrap; }
.deal-search {
  flex: 1;
  min-width: 240px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.deal-search svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: var(--icon-stroke); stroke-linecap: round; }
.deal-search input {
  flex: 1; min-width: 0; height: 42px;
  border: 0; outline: 0; background: none;
  color: var(--ink); font: inherit; font-size: var(--t-3);
}
.deal-search input::placeholder { color: var(--ink-3); }
.deal-search:focus-within { border-color: var(--ink-3); }