/* ============================================================
   Prime - main.css
   Brand layer: CRAFT.md
   Amazon's layout metrics, Base blue palette.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('../assets/fonts/FragmentMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  /* Base blue replaces every Amazon orange */
  --blue:        #0052FF;
  --blue-deep:   #003ECC;
  --blue-hi:     #3D7DFF;
  --nav:         #0A1024;
  --nav-2:       #111A33;
  --blue-tint:   #EBF1FF;
  --blue-line:   #C7D8FF;
  --prime-cyan:  #00A8E1;

  /* neutrals: ordinary UI greys */
  --ink:         #0F1111;
  --ink-2:       #565959;   /* 4.6:1 on white, passes AA */
  --ink-3:       #888C8C;   /* 2.9:1, DECORATIVE ONLY, never body text */
  --line:        #D5D9D9;
  --line-soft:   #E7E9EC;
  --page:        #EAEDED;
  --card:        #FFFFFF;
  --fill:        #F0F2F2;
  --fill-hover:  #F7FAFA;

  /* semantic */
  --star:        #F5A623;
  --price-red:   #B12704;
  --pos:         #067D62;  --pos-bg: #DDF5E9;
  --neg:         #B12704;  --neg-bg: #FDE9EA;
  --urgent:      #CC0C39;
  --stock:       #007600;
  --btn-y:       #FFD814;  --btn-y-hover:#F7CA00; --btn-y-line:#FCD200;

  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='14' viewBox='0 0 76 14'%3E%3Cpath d='M7 .6L8.9 4.7L13.4 5.2L10 8.3L10.9 12.7L7 10.5L3.1 12.7L4 8.3L.6 5.2L5.1 4.7ZM22.5 .6L24.4 4.7L28.9 5.2L25.5 8.3L26.4 12.7L22.5 10.5L18.6 12.7L19.5 8.3L16.1 5.2L20.6 4.7ZM38 .6L39.9 4.7L44.4 5.2L41 8.3L41.9 12.7L38 10.5L34.1 12.7L35 8.3L31.6 5.2L36.1 4.7ZM53.5 .6L55.4 4.7L59.9 5.2L56.5 8.3L57.4 12.7L53.5 10.5L49.6 12.7L50.5 8.3L47.1 5.2L51.6 4.7ZM69 .6L70.9 4.7L75.4 5.2L72 8.3L72.9 12.7L69 10.5L65.1 12.7L66 8.3L62.6 5.2L67.1 4.7Z' fill='%23000'/%3E%3C/svg%3E");

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Fragment Mono', 'SF Mono', Menlo, monospace;

  /* Amazon layout metrics */
  --content-max: 1500px;
  --sidebar-w: 240px;
  --gutter: 20px;
  --card-gap: 16px;
  /* Header frame. These were landing-only until the directory header was
     aligned to it, and shop.html does not load landing.css, so they live
     here: one definition both stylesheets read, rather than two that drift.
     --stick-h is how much chrome is pinned to the top of the viewport, which
     is the main row plus the category row here and just the main row on the
     landing, where landing.css narrows it. Anchor scrolling and the sticky
     buy box are both positioned from it, so neither has to restate the sum. */
  --top-h: 64px;
  --subnav-h: 39px;
  --gx: clamp(20px, 4.5vw, 64px);
  /* Gap between the header's own items. Shared so the "Delivering to" block
     lands on the same pixel on every page: the two headers used to set this
     separately (10px here, 6px there, plus a stray 2px nudge on the landing)
     and the block visibly jumped when you moved between pages. */
  --hdr-gap: 10px;
  --stick-h: calc(var(--top-h) + var(--subnav-h));

  /* type scale */
  --t-mini: 11px; --t-sm: 12px; --t-base: 13px; --t-plus: 14px;
  --t-title: 16px; --t-lg: 18px; --t-price: 21px; --t-h1: 24px;

  --r-card: 8px; --r-ctl: 8px; --r-pill: 100px; --r-badge: 4px;
  --sh-card: 0 2px 5px rgba(15,17,17,.06);
  --sh-hover: 0 2px 12px rgba(15,17,17,.14);
  --sh-pop: 0 4px 16px rgba(15,17,17,.22);
  --ease: cubic-bezier(.16,1,.3,1);
  --t-micro: 150ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--stick-h) + 12px); }
/* The `hidden` attribute is how this codebase toggles the disclosure strips,
   the advert slot and the shortlist rail. Its UA rule is `display:none` at
   element specificity, so any class that sets display beats it: .buybox is
   display:flex and stayed on screen as an empty bordered panel when hidden.
   One declaration here makes the attribute mean what it says everywhere. */
[hidden] { display:none !important; }
body {
  font-family:var(--sans); font-size:var(--t-base); color:var(--ink);
  /* white edge to edge. Everything sits ON this rather than in a panel
     floating over a grey canvas. If you find yourself adding a
     background to a container here, check it is not just re-drawing a
     box the page already removed. */
  background:var(--card); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:var(--blue-deep); text-decoration:none; }
a:hover { color:var(--blue); text-decoration:underline; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,select { font:inherit; color:inherit; }
ul { list-style:none; }

:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:2px; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip {
  position:absolute; left:8px; top:-48px; z-index:100;
  background:var(--card); color:var(--ink); padding:10px 16px;
  border-radius:var(--r-ctl); font-weight:600; transition:top var(--t-micro);
}
.skip:focus { top:8px; }

/* ============================================================
   Header
   ============================================================ */
/* Sticky, full height and inset to --gx so this header sits at exactly the
   same place on the page as the landing's.
   Both rows are deliberately NOT capped to --content-max, unlike .shell below
   them. A cap plus margin:0 auto centres the row, so on a monitor wider than
   1500px the logo gets pushed inward by half the overflow: at 1800px that is
   150px on top of --gx, and the two headers stop agreeing exactly where the
   difference is most visible. Full bleed keeps the logo on the --gx line at
   every width, which is what the landing's .top does. The trade is that on a
   very wide screen the header no longer lines up with the product grid; the
   landing makes the same trade, since its .wrap is narrower still. */
.hdr { background:var(--nav); color:#fff; position:sticky; top:0; z-index:60; }
.hdr a { color:#fff; text-decoration:none; }

.hdr-main {
  height:var(--top-h); display:flex; align-items:center; gap:var(--hdr-gap);
  padding:0 var(--gx);
}
/* Kill the logo's own left padding so the mark itself starts on the --gx
   line rather than 8px inside it, which is what makes the two headers line
   up to the pixel. The landing does the same thing via .top .logo. */
.hdr .logo { padding-left:0; }
/* The global focus ring is Base blue, which lands at about 3.3:1 on the navy
   chrome: a pass, but the narrowest one on the site, on the controls a
   keyboard user reaches first. White on navy is unambiguous. */
.hdr :focus-visible, .top :focus-visible { outline-color:#fff; }

/* logo
   One traced lockup, retinted per surface with --logo-w (word) and
   --logo-s (smile). On the navy chrome that is white over Base blue. */
.logo { display:flex; align-items:center; padding:6px 8px; border:1px solid transparent; border-radius:2px; flex:none; }
.logo:hover { border-color:#fff; }
.logo-mark { display:block; height:34px; width:auto; --logo-w:#fff; --logo-s:var(--blue); }

/* deliver-to */
.deliver { display:flex; align-items:center; gap:5px; padding:8px 9px; border:1px solid transparent; border-radius:2px; flex:none; }
.deliver:hover { border-color:#fff; }
.deliver svg { flex:none; }
.deliver-txt { line-height:1.15; }
.deliver-txt small { display:block; font-size:var(--t-sm); color:#CCC; }
.deliver-txt strong { font-size:var(--t-plus); font-weight:700; }

/* search */
.search { flex:1; display:flex; height:40px; border-radius:var(--r-ctl); overflow:hidden; min-width:0; background:#fff; }
.search:focus-within { box-shadow:0 0 0 3px var(--blue-hi); }
.search-cat {
  background:var(--fill); border:0; border-right:1px solid var(--line);
  padding:0 10px; font-size:var(--t-sm); color:var(--ink-2); max-width:130px; cursor:pointer;
}
.search-in { flex:1; border:0; padding:0 12px; font-size:var(--t-plus); color:var(--ink); min-width:0; }
.search-in:focus { outline:none; }
.search-go {
  width:46px; background:var(--blue); display:grid; place-items:center; flex:none;
  transition:background var(--t-micro);
}
.search-go:hover { background:var(--blue-deep); }

.hdr-link { padding:8px 9px; border:1px solid transparent; border-radius:2px; line-height:1.15; flex:none; }
.hdr-link:hover { border-color:#fff; }
.hdr-link small { display:block; font-size:var(--t-sm); color:#CCC; }
.hdr-link strong { font-size:var(--t-plus); font-weight:700; }

.basket { display:flex; align-items:flex-end; gap:3px; padding:8px 9px; border:1px solid transparent; border-radius:2px; flex:none; }
.basket:hover { border-color:#fff; }
.basket-n { font-size:var(--t-plus); font-weight:700; color:var(--blue-hi); }

/* sub nav */
.hdr-sub {
  background:var(--nav-2); height:var(--subnav-h);
  display:flex; align-items:center; gap:2px; padding:0 calc(var(--gx) - 9px);
  overflow-x:auto; scrollbar-width:none;
}
.hdr-sub::-webkit-scrollbar { display:none; }
.hdr-sub a {
  font-size:var(--t-plus); padding:6px 9px; border:1px solid transparent;
  border-radius:2px; white-space:nowrap;
}
.hdr-sub a:hover { border-color:#fff; }
.hdr-sub a.is-on { font-weight:700; }

/* ============================================================
   Shell
   ============================================================ */
.shell { max-width:var(--content-max); margin:0 auto; background:var(--card); }

.resbar {
  display:flex; align-items:center; gap:14px; padding:13px var(--gutter);
  border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
}
.resbar-count { font-size:var(--t-plus); color:var(--ink-2); flex:1; min-width:200px; }
.resbar-count b { color:var(--ink); font-weight:700; }
.resbar-count em { font-style:normal; color:var(--price-red); font-weight:700; }

.sortwrap { display:flex; align-items:center; gap:7px; font-size:var(--t-base); }
.sortwrap label { color:var(--ink-2); }
.sel {
  background:var(--fill); border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:7px 9px; font-size:var(--t-base); cursor:pointer; box-shadow:var(--sh-card);
}
.sel:hover { background:var(--fill-hover); }

/* the disclosure strip. permanent, never dismissible */
.disclose {
  padding:10px var(--gutter); border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm); color:var(--ink-2);
}
.disclose b { color:var(--ink); }

.body { display:grid; grid-template-columns:var(--sidebar-w) 1fr; align-items:start; }

/* ============================================================
   Sidebar
   ============================================================ */
.side { padding:16px var(--gutter) 40px; }
.side h3 {
  font-size:var(--t-title); font-weight:700; margin:18px 0 7px;
}
.side h3:first-child { margin-top:0; }
.facet { display:flex; flex-direction:column; gap:1px; }
.facet-row {
  display:flex; align-items:center; gap:8px; padding:3px 0;
  font-size:var(--t-plus); color:var(--ink); cursor:pointer; text-align:left; width:100%;
}
.facet-row:hover .facet-lb { color:var(--blue); text-decoration:underline; }
.facet-row input { accent-color:var(--blue); width:14px; height:14px; flex:none; cursor:pointer; }
.facet-lb { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.facet-row.is-on .facet-lb { font-weight:700; }
.facet-n { color:var(--ink-2); font-size:var(--t-sm); flex:none; }

.facet-link {
  display:block; padding:3px 0; font-size:var(--t-plus);
  color:var(--ink); text-align:left; width:100%;
}
.facet-link:hover { color:var(--blue); text-decoration:underline; }
.facet-link.is-on { font-weight:700; color:var(--ink); }

.facet-more { color:var(--blue-deep); font-size:var(--t-plus); padding:5px 0; display:flex; align-items:center; gap:4px; }
.facet-more:hover { color:var(--blue); text-decoration:underline; }

.stars-opt { display:flex; align-items:center; gap:6px; }
.clear-all {
  margin-top:20px; font-size:var(--t-plus); color:var(--blue-deep);
  border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:7px 12px; width:100%; background:var(--fill);
}
.clear-all:hover { background:var(--fill-hover); }

.side-note { margin-top:22px; font-size:var(--t-sm); color:var(--ink-2); line-height:1.5; }

/* ============================================================
   Results grid
   ============================================================ */
.main { padding:0 var(--gutter) 40px; min-width:0; }
.grid {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--card-gap); padding-top:16px;
}

.card {
  display:flex; flex-direction:column; position:relative;
}
.card.is-sponsored { }

/* Every image frame on the site is a true square.
   The frame sets the shape with aspect-ratio, and the image is absolutely
   positioned to fill it exactly, with object-fit:contain letterboxing any
   source ratio inside. Absolute positioning is deliberate: as a flex or grid
   item, a percentage height on a replaced element resolves against a
   content-sized track, so portrait art escapes the frame and covers the text
   below it. inset:0 cannot do that. Do not "simplify" this back. */
.card-media {
  position:relative; aspect-ratio:1/1; width:100%;
  margin-bottom:12px; overflow:hidden;
}
.card-media img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain; border-radius:4px;
}
.tile {
  width:100%; height:100%; display:grid; place-items:center;
  background:var(--fill); border-radius:4px;
  font-family:var(--mono); font-size:26px; font-weight:400; color:var(--blue);
  letter-spacing:-.02em; padding:8px; text-align:center; overflow:hidden;
}

/* badges */
.badge {
  position:absolute; top:6px; left:6px; z-index:2;
  height:20px; display:inline-flex; align-items:center; gap:4px;
  padding:0 7px; border-radius:var(--r-badge);
  font-size:var(--t-mini); line-height:1; color:#fff; white-space:nowrap;
}
.badge b { font-weight:700; }
.badge-verified { background:var(--blue); }
.badge-trending {
  background:var(--blue-deep); padding-right:13px;
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 50%,100% 100%,0 100%);
}
.badge-sponsored { background:var(--ink-2); }

.card-body { display:flex; flex-direction:column; gap:4px; flex:1; }

.card-title {
  font-size:var(--t-title); line-height:20px; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
a.card-title:hover { color:var(--blue); text-decoration:underline; }

.card-tick {
  font-family:var(--mono); font-size:var(--t-sm); color:var(--ink-2);
}
.card-opts { font-size:var(--t-sm); color:var(--ink-2); }
.card-opts a { color:var(--blue-deep); }

.rating { display:flex; align-items:center; gap:6px; }
.rating-n { font-size:var(--t-plus); color:var(--blue-deep); }
.rating-n:hover { color:var(--blue); text-decoration:underline; }

/* one element, five stars, sub-star precision via --fill */
.stars {
  --fill:0%;
  width:76px; height:14px; flex:none; position:relative;
  background:var(--line-soft);
  -webkit-mask:var(--star-mask) no-repeat 0 0 / 76px 14px;
  mask:var(--star-mask) no-repeat 0 0 / 76px 14px;
}
.stars::before {
  content:''; position:absolute; inset:0 auto 0 0;
  width:var(--fill); background:var(--star);
}
.stars-sm { width:60px; height:11px; -webkit-mask-size:60px 11px; mask-size:60px 11px; }

.bought { font-size:var(--t-sm); color:var(--ink-2); }

.price-row { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-top:2px; }
/* The slot the live price is patched into. It has to be a real box rather
   than display:contents, because the update flash paints on it. */
.price-slot { display:inline-flex; align-items:baseline; }
/* The review byte counter once it is past the contract's cap. */
.is-over { color:var(--price-red); font-weight:700; }
.price { color:var(--ink); font-weight:400; display:inline-flex; align-items:flex-start; }
.price-cur { font-size:var(--t-sm); position:relative; top:3px; margin-right:1px; }
.price-main { font-size:var(--t-price); letter-spacing:-.01em; }
.price-main.is-tiny { font-size:var(--t-title); letter-spacing:0; }
.price-sub { font-size:var(--t-sm); position:relative; top:3px; }
.price-was { font-size:var(--t-sm); color:var(--ink-2); }
.price-was s { text-decoration:line-through; }
.price-na { font-size:var(--t-plus); color:var(--price-red); font-weight:700; }

.chg {
  display:inline-flex; align-items:center; height:18px; padding:0 6px;
  border-radius:var(--r-badge); font-size:var(--t-mini); font-weight:700;
}
.chg-up { color:var(--pos); background:var(--pos-bg); }
.chg-dn { color:var(--neg); background:var(--neg-bg); }

.ship { font-size:var(--t-sm); color:var(--ink-2); }
.ship b { color:var(--ink); font-weight:700; }
.urgent { font-size:var(--t-sm); color:var(--urgent); font-weight:400; }

.cta {
  margin-top:10px; height:32px; width:100%;
  background:var(--btn-y); border:1px solid var(--btn-y-line);
  border-radius:var(--r-pill); font-size:var(--t-base); font-weight:500; color:var(--ink);
  display:grid; place-items:center; box-shadow:var(--sh-card);
  transition:background var(--t-micro);
}
.cta:hover { background:var(--btn-y-hover); color:var(--ink); text-decoration:none; }

/* skeleton while prices load */
.sk { display:inline-block; height:1em; width:64px; border-radius:3px; background:var(--line-soft); }
@media (prefers-reduced-motion:no-preference) {
  .sk { animation:pulse 1.3s var(--ease) infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
}
.is-live { animation:flash 240ms var(--ease); }
@keyframes flash { from { background:var(--blue-tint); } to { background:transparent; } }
@media (prefers-reduced-motion:reduce) { .is-live { animation:none; } }

/* ============================================================
   Pagination + empty
   ============================================================ */
/* Wraps rather than overflowing. Previous + six numbers + Next is wider than
   a phone, and a centred nowrap row does not merely spill to one side: it
   spills to both, so the two controls a visitor actually wants were the two
   being cut off the edges. */
.pager { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; padding:34px 0 10px; }
.pg {
  min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-ctl);
  display:grid; place-items:center; font-size:var(--t-plus);
  background:var(--card); color:var(--ink);
}
.pg:hover:not(:disabled):not(.is-on) { background:var(--fill-hover); text-decoration:none; }
.pg.is-on { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }
.pg:disabled { color:var(--ink-3); cursor:default; background:var(--fill); }
.pg-gap { color:var(--ink-3); padding:0 2px; }

.empty { padding:60px 20px; text-align:center; }
.empty h2 { font-size:var(--t-lg); margin-bottom:8px; }
.empty p { color:var(--ink-2); font-size:var(--t-plus); }

/* ============================================================
   Footer
   ============================================================ */
.foot { background:var(--nav-2); color:#fff; margin-top:0; }
.foot-top {
  display:block; text-align:center; padding:15px; background:var(--nav-2); color:#DDD;
  font-size:var(--t-base); border-bottom:1px solid rgba(255,255,255,.1);
}
.foot-top:hover { background:#18233F; text-decoration:none; }
.foot-main {
  max-width:var(--content-max); margin:0 auto; padding:32px var(--gutter);
  background:var(--nav); display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.foot-col h4 { font-size:var(--t-plus); margin-bottom:9px; }
.foot-col a, .foot-col p { display:block; font-size:var(--t-base); color:#DDD; margin-bottom:6px; }
.foot-col a:hover { text-decoration:underline; color:#fff; }
.foot-legal {
  background:var(--nav); border-top:1px solid rgba(255,255,255,.13);
  padding:20px; text-align:center; font-size:var(--t-sm); color:#AAA; line-height:1.7;
}
.foot-legal a { color:#DDD; text-decoration:underline; }

/* ============================================================
   Filter drawer (below 1000px)
   ============================================================ */
.filtbar { display:none; gap:8px; padding:10px var(--gutter); border-bottom:1px solid var(--line-soft); align-items:center; }
.filt-btn {
  display:inline-flex; align-items:center; gap:6px; flex:none;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 14px; font-size:var(--t-base); font-weight:500;
  background:var(--card); box-shadow:var(--sh-card);
}
.filt-btn .n {
  background:var(--blue); color:#fff; border-radius:var(--r-pill);
  min-width:18px; height:18px; padding:0 5px; font-size:var(--t-mini);
  font-weight:700; display:grid; place-items:center;
}
.chiprail { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; flex:1; }
.chiprail::-webkit-scrollbar { display:none; }
.chip {
  flex:none; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 12px; font-size:var(--t-base); background:var(--card); white-space:nowrap;
}
.chip.is-on { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }

dialog.drawer {
  border:0; padding:0; margin:0; height:100dvh; max-height:100dvh;
  width:320px; max-width:88vw; margin-right:auto;
  background:var(--card); box-shadow:var(--sh-pop);
}
dialog.drawer::backdrop { background:rgba(15,17,17,.45); }
.drawer-in { display:flex; flex-direction:column; height:100%; }
.drawer-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line); flex:none;
}
.drawer-hd h2 { font-size:var(--t-title); }
.drawer-bd { overflow-y:auto; flex:1; padding:0 16px; }
.drawer-bd .side { padding:16px 0 24px; }
.drawer-ft {
  display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); flex:none;
}
.drawer-ft button { flex:1; height:38px; border-radius:var(--r-pill); font-size:var(--t-plus); }
.btn-primary { background:var(--btn-y); border:1px solid var(--btn-y-line); font-weight:500; }
.btn-ghost { border:1px solid var(--line); background:var(--card); }
.x-btn { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; }
.x-btn:hover { background:var(--fill); }

@media (prefers-reduced-motion:no-preference) {
  dialog.drawer[open] { animation:slidein 260ms var(--ease); }
  @keyframes slidein { from { transform:translateX(-100%); } to { transform:none; } }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1399px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1159px) {
  :root { --sidebar-w:200px; }
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:999px) {
  .body { grid-template-columns:1fr; }
  .side-desktop { display:none; }
  .main { border-left:0; }
  .filtbar { display:flex; }
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hdr-main { flex-wrap:wrap; height:auto; padding:8px var(--gx); gap:8px; }
  .search { order:3; flex-basis:100%; }
  .deliver { display:none; }
}
@media (max-width:767px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* market cap is the number people came for, so it stays.
     The launch date and buy count are what give way. */
  .card-opts, .bought, .ship-date { display:none; }
  .price-main { font-size:var(--t-lg); }
}
@media (max-width:479px) {
  :root { --gutter:12px; }
  .grid { grid-template-columns:1fr; gap:0; }
  .card {
    display:grid; grid-template-columns:116px 1fr; gap:12px;
    padding:14px 4px; border-bottom:1px solid var(--line-soft); border-radius:0;
  }
  .card:hover { box-shadow:none; }
  .card-media { width:116px; margin-bottom:0; }
  .card-title { font-size:var(--t-plus); line-height:18px; -webkit-line-clamp:3; }
  .cta { grid-column:2; width:auto; }
  /* 10px was the one piece of type on the site below the 11px floor, and
     it sits over artwork rather than paper. "New arrival" still clears
     the 116px thumbnail at 11px. */
  .badge { height:18px; padding:0 5px; }
  .hdr-sub { padding:0 calc(var(--gx) - 9px); }
}

/* ============================================================
   Detail page
   ============================================================ */
/* Three columns, two rows. The DOM is in phone order (head, gallery, buy box,
   detail) and every child is placed by hand here, so the wide layout reads
   gallery | name over detail | buy box without the markup having to be in
   that order. Rows are auto sized and the gallery and buy box span both, so
   each column is still as tall as its own content. */
.pdp {
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr) 300px;
  grid-template-rows:auto 1fr; gap:0 26px; padding:22px var(--gutter) 40px;
}
.pdp > .pdp-head { grid-column:2; grid-row:1; }
.pdp > #gal      { grid-column:1; grid-row:1 / span 2; }
.pdp > .buybox   { grid-column:3; grid-row:1 / span 2; }
.pdp > #main     { grid-column:2; grid-row:2; min-width:0; }

.crumb { padding:11px var(--gutter) 0; font-size:var(--t-sm); color:var(--ink-2); }
.crumb a { color:var(--blue-deep); }

.gal-main {
  position:relative; border:1px solid var(--line-soft); border-radius:var(--r-card);
  aspect-ratio:1/1; width:100%; background:var(--card); overflow:hidden;
}
.gal-main img {
  position:absolute; inset:14px;
  width:calc(100% - 28px); height:calc(100% - 28px);
  object-fit:contain; border-radius:4px;
}
.gal-thumbs { display:flex; gap:8px; margin-top:10px; }
.gal-thumb {
  position:relative; width:54px; aspect-ratio:1/1;
  border:1px solid var(--line); border-radius:6px;
  background:var(--card); overflow:hidden;
}
.gal-thumb.is-on { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.gal-thumb img { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; }

.pdp-h1 { font-size:var(--t-h1); font-weight:500; line-height:1.28; margin-bottom:6px; }
.pdp-sub { font-size:var(--t-plus); color:var(--ink-2); margin-bottom:9px; font-family:var(--mono); }
.pdp-rating { display:flex; align-items:center; gap:9px; padding-bottom:12px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.pdp-sec { padding:16px 0; border-bottom:1px solid var(--line-soft); }
.pdp-sec:last-child { border-bottom:0; }
.pdp-sec h2 { font-size:var(--t-lg); font-weight:700; margin-bottom:10px; }
.pdp-sec h3 { font-size:var(--t-title); font-weight:700; margin-bottom:8px; }
.pdp-desc { font-size:var(--t-plus); color:var(--ink); line-height:1.6; white-space:pre-wrap; }
.pdp-desc.is-empty { color:var(--ink-2); font-style:italic; }

.bullets { display:flex; flex-direction:column; gap:7px; }
.bullets li { font-size:var(--t-plus); line-height:1.5; padding-left:17px; position:relative; }
.bullets li::before { content:''; position:absolute; left:4px; top:8px; width:4px; height:4px; border-radius:50%; background:var(--ink-2); }

.socials { display:flex; gap:9px; flex-wrap:wrap; }
.social {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--t-base); background:var(--card); color:var(--ink);
}
.social:hover { background:var(--fill-hover); text-decoration:none; border-color:var(--blue); color:var(--blue); }

/* buy box */
.buybox {
  border:1px solid var(--line); border-radius:var(--r-card); padding:16px;
  position:sticky; top:calc(var(--stick-h) + 14px);
  display:flex; flex-direction:column; gap:10px; background:var(--card);
}
.buybox .price-row { margin:0; }
.bb-stock { font-size:var(--t-lg); font-weight:500; }
.bb-stock.ok { color:var(--stock); }
.bb-stock.low { color:var(--urgent); }
.bb-stock.no { color:var(--price-red); }
.bb-rows { display:flex; flex-direction:column; gap:5px; font-size:var(--t-base); }
.bb-row { display:flex; justify-content:space-between; gap:10px; }
.bb-row span:first-child { color:var(--ink-2); }
.bb-row span:last-child { text-align:right; font-weight:500; }
.bb-note { font-size:var(--t-sm); color:var(--ink-2); line-height:1.5; }
.mono { font-family:var(--mono); font-size:var(--t-sm); }

.copy-ca {
  display:flex; align-items:center; gap:6px; width:100%; justify-content:space-between;
  border:1px solid var(--line); border-radius:var(--r-ctl); padding:7px 10px;
  background:var(--fill); font-family:var(--mono); font-size:var(--t-sm);
}
.copy-ca:hover { background:var(--fill-hover); }

/* score breakdown, the honest replacement for a reviews block */
.score-grid { display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:26px; align-items:start; }
.score-big { font-size:28px; font-weight:700; line-height:1.1; }
.check { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start; }
.check:last-child { border-bottom:0; }
.check-ico { width:18px; height:18px; flex:none; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.check-pass { background:var(--pos-bg); color:var(--pos); }
.check-fail { background:var(--neg-bg); color:var(--neg); }
.check-unk  { background:var(--fill); color:var(--ink-2); }
.check-body { flex:1; min-width:0; }
.check-lb { font-size:var(--t-plus); font-weight:700; }
.check-lb .st { font-weight:400; color:var(--ink-2); }
.check-help { font-size:var(--t-sm); color:var(--ink-2); margin-top:2px; line-height:1.5; }
.check-note { font-size:var(--t-sm); margin-top:3px; }

.datapoint { padding:11px 0; border-bottom:1px solid var(--line-soft); }
.datapoint:last-child { border-bottom:0; }
.dp-tag {
  display:inline-block; font-size:var(--t-mini); font-weight:700; color:var(--pos);
  background:var(--pos-bg); border-radius:var(--r-badge); padding:2px 6px; margin-bottom:4px;
}
.dp-txt { font-size:var(--t-plus); line-height:1.55; }

.fbt { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.fbt-card { display:block; text-align:left; }
.fbt-card img, .fbt-card .tile { width:100%; aspect-ratio:1/1; height:auto; object-fit:contain; border-radius:6px; background:var(--fill); }
.fbt-nm { font-size:var(--t-base); margin-top:6px; color:var(--blue-deep); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fbt-card:hover .fbt-nm { text-decoration:underline; color:var(--blue); }
.fbt-mc { font-size:var(--t-sm); color:var(--ink-2); }

@media (max-width:1100px) {
  /* Two columns: gallery beside the name, detail and buy box across the full
     width under them. The buy box stops being sticky because there is no
     longer a tall neighbour for it to track. */
  .pdp { grid-template-columns:minmax(0,300px) minmax(0,1fr); grid-template-rows:auto auto auto; }
  .pdp > .pdp-head { grid-column:2; grid-row:1; }
  .pdp > #gal      { grid-column:1; grid-row:1; }
  /* Capped rather than stretched. The rows inside are label left, figure
     right, so at the full 830px of a tablet "Market cap" and "$8.29M" end up
     at opposite ends of the screen with a hand span of nothing between them. */
  .pdp > .buybox   { grid-column:1/-1; grid-row:2; position:static; margin-top:18px; max-width:520px; }
  .pdp > #main     { grid-column:1/-1; grid-row:3; }
}
@media (max-width:767px) {
  /* One column, and now the source order is the order: the price and the
     button sit directly under the picture instead of below the checks, the
     reviews and the related projects, which on a phone was about 2700px of
     scrolling before the page showed what the token costs. */
  .pdp { display:flex; flex-direction:column; gap:18px; padding-top:16px; }
  .pdp > .buybox { margin-top:0; }

  .score-grid { grid-template-columns:1fr; gap:14px; }
  .pdp-h1 { font-size:var(--t-lg); }

  /* Most project art is a 3:1 banner, and letterboxing that inside a square
     spent about 240px of a phone screen on white. A shallower frame still
     contains a square logo without cropping it. */
  .gal-main { aspect-ratio:3/2; }
  .gal-main img { inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); }
}

/* score breakdown bars */
.bar-row { padding:9px 0; border-bottom:1px solid var(--line-soft); }
.bar-row:last-child { border-bottom:0; }
.bar-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:5px; }
.bar-lb { font-size:var(--t-plus); font-weight:700; }
.bar-v { font-size:var(--t-sm); color:var(--ink-2); font-family:var(--mono); flex:none; }
.bar-v.is-neg { color:var(--neg); }
.bar { height:8px; border-radius:100px; background:var(--line-soft); overflow:hidden; }
.bar-fill { display:block; height:100%; background:var(--blue); border-radius:100px; }
.bar-fill.is-neg { background:var(--neg); }
@media (prefers-reduced-motion:no-preference) {
  .bar-fill { animation:grow 620ms var(--ease); }
  @keyframes grow { from { width:0 !important; } }
}

/* ============================================================
   Community reviews
   ============================================================ */
.rev-overall { display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:26px; align-items:start; margin-bottom:20px; }
.rev-score .stars { margin-top:6px; }

.hist-row { display:flex; align-items:center; gap:9px; padding:2px 0; }
.hist-lb { font-size:var(--t-base); color:var(--blue-deep); flex:none; width:52px; }
.hist-lb:hover { color:var(--blue); text-decoration:underline; }
.hist-bar { flex:1; height:19px; background:var(--fill); border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.hist-fill { display:block; height:100%; background:var(--star); }
.hist-pct { font-size:var(--t-base); color:var(--ink-2); flex:none; width:38px; text-align:right; }

/* The one moment the page has something to confirm. Survives the re-render
   that follows a post, which is the whole reason it is a block of its own
   rather than a line inside the form. */
.rev-flash {
  margin:12px 0 0; padding:10px 13px; border-radius:var(--r-badge);
  background:var(--pos-bg); color:var(--pos); border:1px solid rgba(6,125,98,.25);
  font-size:var(--t-plus); font-weight:600;
}

.rev-empty { padding:18px 0 22px; }
.rev-empty h3 { font-size:var(--t-title); margin-bottom:6px; }
.rev-empty p { font-size:var(--t-plus); color:var(--ink-2); line-height:1.55; max-width:60ch; }

/* gate notices */
.rev-gate {
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:13px 15px; font-size:var(--t-plus); line-height:1.55; margin-bottom:20px;
}
.rev-gate.is-wait { background:var(--fill); }
.rev-gate.is-act { background:var(--blue-tint); border-color:var(--blue-line); }
.abtn-inline {
  display:inline-block; margin-top:8px; background:var(--btn-y);
  border:1px solid var(--btn-y-line); border-radius:var(--r-pill);
  padding:7px 16px; font-size:var(--t-base); font-weight:500; box-shadow:var(--sh-card);
}
.abtn-inline:hover { background:var(--btn-y-hover); }

/* write form */
.rev-form {
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px; margin-bottom:22px; display:flex; flex-direction:column; gap:10px;
}
.rev-form h3 { font-size:var(--t-title); }
.rev-form .ain {
  width:100%; border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:9px 11px; font-size:var(--t-plus); font-family:inherit; background:var(--card);
}
.rev-form .ain:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-tint); }
.rev-form textarea.ain { min-height:88px; resize:vertical; line-height:1.55; }

.rev-picker { display:flex; align-items:center; gap:3px; }
.pick { padding:2px; line-height:0; border-radius:4px; color:var(--line); }
.pick svg { fill:currentColor; }
.pick.on { color:var(--star); }
.pick:hover { color:var(--star); }
.rev-picked { margin-left:9px; font-size:var(--t-base); color:var(--ink-2); }

.rev-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rev-foot .bb-note { margin-right:auto; }
.rev-foot .cta { margin-top:0; }

/* the list */
.rev-list { display:flex; flex-direction:column; }
.rev-item { padding:16px 0; border-top:1px solid var(--line-soft); }
.rev-item.is-mine { background:var(--blue-tint); border-radius:var(--r-card); padding:16px; border-top:0; margin-bottom:8px; }
.rev-who { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.rev-av {
  width:26px; height:26px; border-radius:50%; background:var(--fill);
  display:grid; place-items:center; font-family:var(--mono);
  font-size:var(--t-mini); color:var(--ink-2); flex:none;
}
.rev-addr { font-family:var(--mono); font-size:var(--t-base); color:var(--ink); }
.rev-addr:hover { color:var(--blue); }
.rev-mine { font-size:var(--t-mini); font-weight:700; color:var(--blue); }
.rev-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rev-title { font-size:var(--t-plus); }
.rev-date { font-size:var(--t-sm); color:var(--ink-2); margin:3px 0 7px; }
.rev-verified { color:var(--price-red); font-weight:700; margin-left:5px; }
.rev-body { font-size:var(--t-plus); line-height:1.6; white-space:pre-wrap; }
.rev-hidden { margin-top:16px; padding-top:12px; border-top:1px solid var(--line-soft); }

@media (max-width:767px) {
  .rev-overall { grid-template-columns:1fr; gap:14px; }
}
.rev-held { color:var(--ink-2); margin-left:8px; }

/* ============================================================
   Banner advert
   ============================================================ */
.adslot { position:relative; margin:14px var(--gutter) 0; }
.ad-label {
  font-size:var(--t-mini); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:6px;
}
.ad-track { position:relative; aspect-ratio:3 / 1; overflow:hidden; background:var(--fill); }
.ad-slide {
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 520ms var(--ease), visibility 0s linear 520ms;
}
.ad-slide.is-on { opacity:1; visibility:visible; transition-delay:0s; }
/* Rotation is stopped in JS for reduced motion, but a visitor can still change
   slide by clicking a dot, and that must not cross-fade. */
@media (prefers-reduced-motion:reduce) {
  .ad-slide { transition:none; }
  .ad-slide.is-on { transition:none; }
}
.ad-slide a, .ad-slide img { display:block; width:100%; height:100%; }
.ad-slide img { object-fit:cover; }

.ad-dots { position:absolute; right:14px; bottom:12px; display:flex; gap:7px; }
.ad-dot {
  width:8px; height:8px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(15,17,17,.25);
  transition:background var(--t-micro), transform var(--t-micro);
}
.ad-dot.is-on { background:#fff; transform:scale(1.25); }

/* The slot with nothing sold. Rendered at the real size so the format
   reads to a buyer, and labelled Advertisement rather than Sponsored so
   it is never mistaken for a paid placement. */
.ad-house {
  aspect-ratio:3 / 1; overflow:hidden; position:relative;
  background:linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 58%, var(--blue-hi) 100%);
  display:flex; align-items:center; padding:0 clamp(24px, 5%, 68px); color:#fff;
}
.ad-house-in { position:relative; z-index:2; max-width:56%; }
.ad-house-kicker {
  font-size:var(--t-sm); letter-spacing:.16em; text-transform:uppercase;
  opacity:.78; margin-bottom:10px;
}
.ad-house-h { font-size:clamp(20px, 3.4vw, 46px); line-height:1.08; letter-spacing:-.02em; font-weight:700; }
.ad-house-sub { margin-top:12px; font-size:clamp(12px, 1.2vw, 16px); opacity:.85; max-width:44ch; }

.ad-house-art { position:absolute; right:5%; bottom:0; top:0; width:38%; }
.ad-box {
  position:absolute; bottom:14%; border-radius:6px;
  background:linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.1));
  box-shadow:0 18px 30px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.ad-box-1 { left:6%;  width:34%; aspect-ratio:1; transform:rotate(-6deg); }
.ad-box-2 { left:36%; width:44%; aspect-ratio:1.15; bottom:12%; }
.ad-box-3 { left:72%; width:26%; aspect-ratio:.9; transform:rotate(7deg); }

/* ============================================================
   Treasury shortlist rail
   ============================================================ */
/* No panel and no cards inside it. The row sits on the same white as
   everything else, which is the point of flattening: a tinted box
   holding white boxes is two containers doing the job of none. */
.short { margin:22px var(--gutter) 0; }
.short-hd { margin-bottom:12px; }
.short-hd h2 { font-size:var(--t-lg); font-weight:700; }
.short-note { font-size:var(--t-base); color:var(--ink-2); margin-top:3px; max-width:80ch; }

.short-rail { position:relative; }
.short-track {
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; scroll-snap-type:x proximity; padding:2px;
}
.short-track::-webkit-scrollbar { display:none; }
@media (prefers-reduced-motion:reduce) { .short-track { scroll-behavior:auto; } }

.short-card {
  flex:0 0 auto; width:clamp(150px, 17vw, 188px);
  display:flex; flex-direction:column; scroll-snap-align:start;
}
.short-card:hover { text-decoration:none; }
.short-media { position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; border-radius:4px; }
.short-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.short-rank {
  position:absolute; left:0; top:0; z-index:2; min-width:20px; height:20px; padding:0 6px;
  background:var(--blue); color:#fff; border-radius:var(--r-badge) 0 var(--r-badge) 0;
  font-size:var(--t-mini); font-weight:700; display:grid; place-items:center;
}
.short-name {
  margin-top:9px; font-size:var(--t-base); color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.short-card:hover .short-name { color:var(--blue); text-decoration:underline; }
.short-tick { font-family:var(--mono); font-size:var(--t-mini); color:var(--ink-2); margin-top:2px; }
.short-row { display:flex; align-items:baseline; gap:6px; margin-top:6px; flex-wrap:wrap; }
.short-price { font-size:var(--t-plus); color:var(--ink); }
.short-none { font-size:var(--t-sm); color:var(--ink-2); }

.short-arr {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:44px; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-ctl);
  display:grid; place-items:center; box-shadow:var(--sh-card);
}
.short-arr:hover { background:var(--fill-hover); }
.short-prev { left:-6px; }
.short-next { right:-6px; }

.short-empty { padding:26px 4px; font-size:var(--t-plus); color:var(--ink-2); }

@media (max-width:560px) {
  .adslot, .short { margin-left:12px; margin-right:12px; }
  .ad-house-in { max-width:70%; }
  .ad-house-art { display:none; }
  .short-arr { display:none; }
}

/* The weakest badge on the site, and styled to stay that way: an outline
   rather than a fill, so it never competes with Prime Verified beside it. */
.badge-new {
  background:var(--card); color:var(--blue);
  border:1px solid var(--blue-line); font-weight:600;
}
/* "Nothing bought yet" is a real reading, not a missing one, so it reads as
   ordinary grey text rather than an error. */
.ship-none { color:var(--ink-2); }

/* ============================================================
   Arrival notice (the store is not open yet)
   Markup is built in js/announce.js.
   ============================================================ */
/* A <dialog> rather than a fixed div: Escape, the focus trap and the
   backdrop all come from the element, and none of the three is worth
   reimplementing badly. The card is centred by the dialog's own margin
   auto, so nothing here has to know the viewport. */
dialog.ann {
  border:0; padding:0; background:transparent; overflow:visible;
  max-width:min(460px, calc(100vw - 32px)); width:100%;
  margin:auto;
}
dialog.ann::backdrop { background:rgba(10,16,36,.55); }

.ann-in {
  position:relative; background:var(--card); border-radius:var(--r-card);
  box-shadow:var(--sh-pop); padding:26px 26px 22px; text-align:left;
}
/* Sits in the padding, out of the text column, the way Amazon's does. */
.ann-x { position:absolute; top:8px; right:8px; color:var(--ink-2); }

.ann-kicker {
  font-size:var(--t-mini); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); margin-bottom:5px;
}
.ann-h {
  font-size:var(--t-h1); line-height:1.22; font-weight:700; color:var(--ink);
  /* focused on open so the notice is read from its first word, and a focus
     ring around a heading nobody can type into is just noise */
  outline:0;
}
.ann-p { margin-top:11px; font-size:var(--t-plus); line-height:1.55; color:var(--ink-2); }
.ann-p + .ann-p { margin-top:9px; }

.ann-go { height:38px; margin-top:18px; font-size:var(--t-plus); }

.ann-fine {
  margin-top:13px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:var(--t-sm); color:var(--ink-2);
}

@media (prefers-reduced-motion:no-preference) {
  dialog.ann[open] { animation:annpop 240ms var(--ease); }
  @keyframes annpop { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
}

@media (max-width:560px) {
  .ann-in { padding:22px 20px 18px; }
  .ann-h { font-size:var(--t-lg); }
}

/* The line that says coins have launched since this page was opened. It is a
   button, not a banner, because the only thing it does is wait to be clicked:
   nothing on the page moves until somebody asks for it to. */
.live-bar {
  display:flex; align-items:center; gap:9px; width:calc(100% - var(--gutter) * 2);
  margin:14px var(--gutter) 0; padding:10px 14px; text-align:left;
  background:var(--blue-tint); border:1px solid var(--blue-line);
  border-radius:var(--r-ctl); font-size:var(--t-plus); color:var(--ink);
}
.live-bar:hover { background:#E2EBFF; }
.live-bar b { color:var(--blue); text-decoration:underline; }
.live-dot {
  flex:none; width:8px; height:8px; border-radius:50%; background:var(--blue);
}
@media (prefers-reduced-motion:no-preference) {
  .live-dot { animation:livepulse 2.4s var(--ease) infinite; }
  @keyframes livepulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
}

/* ============================================================
   Touch targets
   ============================================================ */
/* Everything below is a hit area, not a look: the type, the colours and the
   spacing between rows are all unchanged, the box a thumb has to land in
   just gets taller. Keyed on pointer:coarse rather than on width, because
   what makes a 20px row hard to hit is the finger, not the screen: a phone
   held in landscape needs this and a narrow desktop window does not. */
@media (pointer:coarse) {
  /* Filter drawer. Eight facet rows at 20px each were stacked inside half a
     thumb's width of each other, which is where a mis-tap costs the most:
     it applies the wrong filter and reloads the list. */
  .facet-row { min-height:44px; padding:0; align-items:center; }
  /* .facet-link stays a block and gets there on padding. Its label and its
     count are a text node and a span with an ordinary space between them, and
     flex layout drops whitespace between items: turning this into a flex row
     to set min-height printed "Under $50K30". */
  .facet-link { padding:13px 0; }
  .facet-more { min-height:44px; }
  .drawer-ft button { height:46px; }

  /* Footer columns. Link to link spacing carries the margin already, so this
     only grows each link's own box down into space that was dead. The links
     stack with no gap between them, so anything short of a full target here
     means a mis-tap opens the neighbouring page rather than nothing. */
  .foot-col a { padding:12px 0; margin-bottom:0; }
  .foot-col p { padding:12px 0; margin-bottom:0; }
  .foot-top { padding:17px; }

  /* Category row. 14px type in 6px of padding is a 32px target, and the row
     is a horizontal scroller, so a tap that misses scrolls instead of
     navigating. The bar itself has to grow with the links or it clips them:
     --subnav-h is what sets its height, and --stick-h, the scroll padding and
     the sticky buy box offset are all computed from that one number. */
  :root { --subnav-h:48px; }
  .hdr-sub a { padding:13px 9px; }

  /* The advert's dots are 8px of paint with 7px between them, which is under
     a third of a fingertip and too close together to choose between. The
     paint stays 8px and moves to ::before; the button around it grows to
     30px and the gap shrinks to match, so the dots sit 32px apart and land
     within a couple of px of where they were. */
  .ad-dots { gap:2px; right:8px; bottom:4px; }
  .ad-dot {
    width:30px; height:30px; border-radius:50%; background:none; box-shadow:none;
    display:grid; place-items:center;
  }
  .ad-dot::before {
    content:''; width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(15,17,17,.25);
    transition:background var(--t-micro), transform var(--t-micro);
  }
  .ad-dot.is-on { background:none; transform:none; }
  .ad-dot.is-on::before { background:#fff; transform:scale(1.25); }

  /* The yellow button that repeats down the results list, and stands alone on
     the two not-found pages. 32px is comfortably under a fingertip, and in
     the list every one of them has another card's link directly below it. */
  .cta { height:40px; }
  .gal-thumb { width:60px; }

  /* Breadcrumb and the inline "how scoring works" style links sit in running
     text, so they get height without becoming blocks. */
  .crumb a, .disclose a { display:inline-block; padding:6px 0; }
}