/* ============================================================
   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;
  --btn-o:       #FFA41C;  --btn-o-hover:#FA8900; --btn-o-line:#FF8F00;   /* Amazon's Buy Now */

  --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; }
@media (hover:hover) { .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); }
/* appearance:none on both, or iOS draws its own rounded, shaded control
   inside the bar and the result reads as a box inside a box. */
.search-cat {
  appearance:none; -webkit-appearance:none; border-radius:0;
  background:var(--fill); border:0; border-right:1px solid var(--line);
  /* A fixed width, because a select's intrinsic width keeps room for the
     native arrow it no longer draws, which left the chevron stranded at the
     edge. 112px is the label plus a 10px gap plus the chevron. */
  width:112px; max-width:none; padding:0 24px 0 12px; font:inherit; font-size:var(--t-sm); color:var(--ink-2); cursor:pointer;
  text-overflow:ellipsis; white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23565959' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.search-in {
  appearance:none; -webkit-appearance:none; border-radius:0; box-shadow:none;
  flex:1; border:0; padding:0 12px; font:inherit; font-size:var(--t-plus); color:var(--ink); min-width:0; background:#fff;
}
.search-in:focus { outline:none; }
.search-in::-webkit-search-decoration, .search-in::-webkit-search-cancel-button { -webkit-appearance: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 { display:inline-block; padding:8px 9px; border:1px solid transparent; border-radius:2px; line-height:1.15; flex:none; background:none; color:#fff; font:inherit; text-align:left; cursor:pointer; }
@media (hover:hover) { .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; }
@media (hover:hover) { .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; }

/* Special Delivery. The one tab in the row that is not plain text: a warm
   pill with a flame, so it reads as an event the way Prime Day does in
   Amazon's own row. The link is the hit area and matches the others' box,
   the pill inside it is the look, so a phone can grow the target without
   the pill swelling to fill the bar. */
.hdr-sub .hdr-soon { padding:4px 5px; flex:none; }
.soon-pill {
  display:inline-flex; align-items:center; gap:6px; padding:2px 5px 2px 8px;
  border:1px solid rgba(255,122,26,.55); border-radius:var(--r-pill);
  background:linear-gradient(90deg, rgba(255,122,26,.22), rgba(204,12,57,.18));
  font-weight:700; line-height:18px;
}
.hdr-sub .hdr-soon.is-on .soon-pill { border-color:#FF9A4D; background:linear-gradient(90deg, rgba(255,122,26,.4), rgba(204,12,57,.32)); }
.soon-flame { flex:none; transform-origin:50% 90%; }
.soon-new {
  padding:0 6px; border-radius:var(--r-pill); background:var(--btn-y); color:var(--ink);
  font-size:var(--t-mini); font-weight:700; line-height:16px; text-transform:uppercase; letter-spacing:.04em;
}
/* The row's own hover draws a white box; the pill is the tab's outline. */
.hdr-sub .hdr-soon:hover { border-color:transparent; }
@media (hover:hover) {
  .hdr-sub .hdr-soon:hover .soon-pill { border-color:#FF9A4D; background:linear-gradient(90deg, rgba(255,122,26,.32), rgba(204,12,57,.26)); }
}
@media (prefers-reduced-motion:no-preference) {
  .soon-flame { animation:flicker 1.6s ease-in-out infinite; }
  @keyframes flicker {
    0%,100% { transform:scale(1) rotate(0); }
    25%     { transform:scale(1.08,.94) rotate(-4deg); }
    50%     { transform:scale(.95,1.07) rotate(3deg); }
    75%     { transform:scale(1.04,.97) rotate(-2deg); }
  }
}

/* The aisle band at the top of the Special Delivery listing. */
.aisle {
  margin:22px var(--gutter) 0; padding:16px 18px; border-radius:var(--r-card);
  background:linear-gradient(90deg, #FFF3E8, #FFE9EC); border:1px solid #FFD2B3;
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
}
.aisle-copy { flex:1 1 360px; min-width:0; }
.aisle-hd { display:flex; align-items:center; gap:10px; }
/* Amazon's yellow, the same paint as the card buttons, sized for a band. */
.aisle-cta {
  flex:none; height:40px; padding:0 22px; display:inline-grid; place-items:center;
  background:var(--btn-y); border:1px solid var(--btn-y-line); border-radius:var(--r-pill);
  font-size:var(--t-plus); font-weight:600; color:var(--ink); box-shadow:var(--sh-card);
  transition:background var(--t-micro);
}
@media (hover:hover) { .aisle-cta:hover { background:var(--btn-y-hover); color:var(--ink); text-decoration:none; } }
@media (max-width:767px) { .aisle-cta { flex:1 1 100%; } }
.aisle-title { display:inline-flex; align-items:center; gap:8px; font-size:var(--t-h1); font-weight:700; }
.aisle-note { font-size:var(--t-base); color:var(--ink-2); margin-top:4px; max-width:80ch; }

/* ============================================================
   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; }
.resbar-held { font-size:var(--t-sm); }
.linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--blue); cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }
.facet-hint { font-size:var(--t-mini); color:var(--ink-2); line-height:1.4; margin:2px 0 0; }

.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; }
/* The one toggle that widens the list instead of narrowing it may wrap:
   an ellipsis on "Show inactive projects" would hide what it does. */
.facet-row input[data-flag="showAll"] + .facet-lb { white-space:normal; }
.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); }
.badge-special { background:linear-gradient(90deg, #FF7A1A, #CC0C39); }

.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%; }
@media (hover:hover) { .x-btn:hover { background:var(--fill); } }
/* A tap must not leave the close ring behind; keyboard focus still shows. */
.x-btn:focus:not(:focus-visible) { outline:0; }

@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%; height:44px; }
  /* One bar on a phone: the category menu has a single entry and only
     cost width. 16px, or iOS zooms the page when the field is tapped. */
  .search-cat { display:none; }
  .search-in { font-size:16px; padding:0 14px; }
  .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; }
  /* Cards only. This used to match every .cta, and the dialog's button
     shrank to its text with nothing around it. */
  .card .cta { grid-column:2; width:auto; padding:0 14px; }
  /* 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; }
/* align-self, or the card stretches to the height of the longer column and
   its border runs on below the disclaimer over nothing. */
.pdp > .buybox   { grid-column:3; grid-row:1 / span 2; align-self:start; }
.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 */
/* The gate notice above the write form: a heading, one line under it, and
   the action, if there is one, on its own at the right. On a narrow screen
   the action drops below the text. */
.rev-gate {
  display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 18px; font-size:var(--t-base); line-height:1.5; margin-bottom:20px;
}
.rev-gate.is-wait { background:var(--fill); }
.rev-gate.is-act { background:var(--blue-tint); border-color:var(--blue-line); }
.rev-gate-txt { flex:1 1 320px; min-width:0; }
.rev-gate-txt b { display:block; font-size:var(--t-plus); font-weight:700; margin-bottom:2px; }
.rev-gate-txt span { color:var(--ink-2); }
.abtn-inline {
  flex:none; display:inline-block; background:var(--btn-y);
  border:1px solid var(--btn-y-line); border-radius:var(--r-pill);
  padding:9px 20px; font-size:var(--t-base); font-weight:600; box-shadow:var(--sh-card); white-space:nowrap;
}
.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
   ============================================================ */
.spotlight { position:relative; margin:14px var(--gutter) 0; }
.spot-label {
  font-size:var(--t-mini); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:6px;
}
.spot-track { position:relative; aspect-ratio:3 / 1; overflow:hidden; background:var(--fill); }
.spot-slide {
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 520ms var(--ease), visibility 0s linear 520ms;
}
.spot-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) {
  .spot-slide { transition:none; }
  .spot-slide.is-on { transition:none; }
}
.spot-slide a, .spot-slide img { display:block; width:100%; height:100%; }
.spot-slide img { object-fit:cover; }

.spot-dots { position:absolute; right:14px; bottom:12px; display:flex; gap:7px; }
.spot-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);
}
.spot-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. */
.spot-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;
}
.spot-house-in { position:relative; z-index:2; max-width:56%; }
.spot-house-kicker {
  font-size:var(--t-sm); letter-spacing:.16em; text-transform:uppercase;
  opacity:.78; margin-bottom:10px;
}
.spot-house-h { font-size:clamp(20px, 3.4vw, 46px); line-height:1.08; letter-spacing:-.02em; font-weight:700; }
.spot-house-sub { margin-top:12px; font-size:clamp(12px, 1.2vw, 16px); opacity:.85; max-width:44ch; }

.spot-house-art { position:absolute; right:5%; bottom:0; top:0; width:38%; }
.spot-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);
}
.spot-box-1 { left:6%;  width:34%; aspect-ratio:1; transform:rotate(-6deg); }
.spot-box-2 { left:36%; width:44%; aspect-ratio:1.15; bottom:12%; }
.spot-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; }
/* The star before the review line: filled in the rating colour once a
   project has one, an outline until then. */
.short-rev { display:inline-flex; align-items:center; gap:5px; }
.short-star { width:12px; height:12px; flex:none; fill:none; stroke:var(--ink-3, #8F97AE); stroke-width:1.8; stroke-linejoin:round; }
.short-star.is-on { fill:var(--star); stroke:var(--star); }
.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) {
  .spotlight, .short { margin-left:12px; margin-right:12px; }
  .spot-house-in { max-width:70%; }
  .spot-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:40px; margin-top:18px; font-size:var(--t-plus); width:100%; padding:0 18px; }

.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; } }
}

/* ============================================================
   The Prime Fund
   ============================================================ */
/* An order history, which is what Amazon's own ledger page is: a heading, a
   filter, and rows that are mostly whitespace and one photograph each. The
   numbers are the loudest thing on it and everything else gets out of their
   way, so the one question a reader arrives with, what has actually been
   handed out, is answered by the shape of the page before they read a word. */

.fund { padding:0 var(--gutter) 40px; }
.fund-hd { padding:18px 0 4px; max-width:78ch; }
.fund-hd h1 { font-size:28px; line-height:1.15; margin:0 0 10px; }
.fund-lede { font-size:var(--t-plus); color:var(--ink-2); line-height:1.6; }

/* The wallet itself, stated once, at the top, before any figure derived from
   it: every number on this page is a claim about this address and a reader
   who wants to check one starts here. */
.fund-id {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding:11px 13px;
  background:var(--fill); border:1px solid var(--line-soft); border-radius:var(--r-card);
}
.fund-id-lb { font-size:var(--t-sm); color:var(--ink-2); font-weight:600; }
.fund-id-addr { color:var(--ink); word-break:break-all; }
.fund-id .copy-ca { width:auto; padding:5px 10px; background:var(--card); }
.fund-id-go { font-size:var(--t-sm); margin-left:auto; }

.fund-sec { padding-top:30px; }
.fund-sec > h2 { font-size:var(--t-lg); margin-bottom:12px; }

/* ---- what the fund holds ---- */
/* Three balances, no boxes. They were bordered cards with a caption each until
   the user cut both: what an asset is is already its mark, its ticker and its
   name, and three panels of explanation above the ledger were competing with
   the thing the page is actually for. What is left is the figure, which is
   what somebody came to read. */

.holds { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px 32px; }
.hold {
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center;
  color:inherit; text-decoration:none; min-width:0;
}
.hold:hover { text-decoration:none; }
@media (hover:hover) { .hold:hover .hold-v { color:var(--blue); } }
/* The hairline is what makes these read as marks rather than as pictures.
   Two of the three are drawn on white, which on a white page is a logo
   floating in nothing; the ledger's thumbnails wear the same edge. */
.hold-ico {
  grid-row:1/3; width:40px; height:40px; border-radius:8px;
  background:var(--fill); border:1px solid var(--line-soft);
}
.hold-v {
  font-size:var(--t-price); font-weight:700; line-height:1.15; color:var(--ink);
  display:flex; align-items:baseline; gap:6px; min-width:0;
  transition:color var(--t-micro);
}
.hold-v em { font-style:normal; font-size:var(--t-sm); font-weight:600; color:var(--ink-2); }
.hold-nm { font-size:var(--t-sm); color:var(--ink-2); }
.hold-nm b { color:var(--ink); font-weight:700; }
/* The skeleton holds the row's height so the balances landing does not shove
   the ledger down the page. */
.hold.is-sk { min-height:42px; }

.fund-foot { margin-top:11px; font-size:var(--t-sm); color:var(--ink-2); line-height:1.55; }

/* ---- the three counts ---- */

.stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
.stat { padding:16px 18px; border-left:1px solid var(--line-soft); }
.stat:first-child { border-left:0; }
.stat b { display:block; font-size:26px; line-height:1.1; font-weight:700; }
.stat span { display:block; margin-top:3px; font-size:var(--t-plus); color:var(--ink); }
.stat small { display:block; margin-top:2px; font-size:var(--t-sm); color:var(--ink-2); }

/* ---- the ledger ---- */

.fund-log-hd { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.fund-log-hd h2 { font-size:var(--t-lg); }
.fund-log-hd .chiprail { flex:none; margin-left:auto; }

/* A table that is wider than the screen scrolls inside its own box rather
   than taking the page with it. Below 780px it stops being a table at all,
   see the block further down. */
.ledger-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); }
.ledger { width:100%; border-collapse:collapse; font-size:var(--t-base); }
.ledger thead th {
  text-align:left; font-size:var(--t-sm); font-weight:700; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em;
  padding:11px 16px; background:var(--fill); border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.ledger td { padding:14px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.ledger tbody tr:last-child td { border-bottom:0; }
@media (hover:hover) { .lg-row:hover td { background:var(--fill-hover); } }

.lg-c-date b { display:block; font-weight:600; white-space:nowrap; }
.lg-c-date small { display:block; color:var(--ink-2); font-size:var(--t-sm); }

.lg-item { display:flex; align-items:center; gap:11px; color:inherit; min-width:0; }
.lg-item:hover { text-decoration:none; }
.lg-logo {
  flex:none; width:44px; height:44px; border-radius:6px; object-fit:cover;
  background:var(--fill); border:1px solid var(--line-soft);
}
.lg-nm { min-width:0; }
.lg-nm b { display:block; font-weight:700; color:var(--ink); }
@media (hover:hover) { a.lg-item:hover .lg-nm b { color:var(--blue); text-decoration:underline; } }
.lg-nm small { display:block; color:var(--ink-2); font-size:var(--t-sm); }

.lg-c-qty b { display:block; font-size:var(--t-title); font-weight:700; white-space:nowrap; }
.lg-c-qty small { display:block; color:var(--ink-2); font-size:var(--t-sm); }

.lg-c-usd b { font-size:var(--t-title); font-weight:700; white-space:nowrap; }
.lg-na { color:var(--ink-2); font-size:var(--t-sm); }

.lg-st { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.lg-st.is-del { color:var(--stock); }
.lg-st.is-burn { color:var(--price-red); }
.lg-sub { display:block; margin-top:2px; color:var(--ink-2); font-size:var(--t-sm); line-height:1.45; }

/* Width hints, not a fixed layout: the browser still sizes from the content,
   it just stops handing the whole slack to whichever column has the longest
   sentence in it. Without them the status column stretched halfway across a
   1440px screen and left the receipt marooned. */
.lg-c-date { width:14%; }
.lg-c-item { width:26%; }
.lg-c-qty { width:13%; }
.lg-c-usd { width:11%; }
.ledger th:last-child, .lg-c-rec { text-align:right; }
.lg-rec { white-space:nowrap; }
.lg-rec.is-none { color:var(--ink-2); font-size:var(--t-sm); white-space:normal; }
.lg-empty { padding:28px 16px; text-align:center; color:var(--ink-2); }

/* ---- the written part ---- */

/* Three paragraphs now. The two column split and the second column that
   needed it were cut on 2026-09-23, along with the fine print: the footer
   already carries the disclaimers on every page of the site. */
.fund-note { max-width:74ch; }
.fund-note p { margin-top:10px; color:var(--ink-2); line-height:1.65; font-size:var(--t-plus); }
.fund-note strong { color:var(--ink); }
.fund-note code { font-size:var(--t-base); }

/* ---- the phone ---- */
/* The table stops being a table. Five columns of a money ledger inside 360px
   is either four words a line or a sideways scroll on the one page nobody
   should have to work at, so each row becomes the card Amazon's own order
   history is on a phone: a grey bar with the date, the item under it, then
   the amount, the outcome and the receipt. One DOM, two layouts, and it is
   still a table for anything reading it as one.

   The field labels in data-lb are for a layout that keeps the columns; here
   they are dropped, because each cell is already unmistakable on sight. A
   date, a photograph, a number in bold, a green or red word and a blue link
   need no captions, and five of them down the side of every card is the
   clutter that makes a phone page feel like a form. */
@media (max-width:780px) {
  .ledger-wrap { border:0; overflow-x:visible; }
  .ledger thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ledger, .ledger tbody, .lg-row, .ledger td { display:block; width:auto; }
  .lg-row {
    border:1px solid var(--line); border-radius:var(--r-card);
    margin-bottom:12px; background:var(--card); overflow:hidden;
  }
  .ledger td { border-bottom:0; padding:0 14px; }
  .ledger td::before { content:none; }

  /* The date becomes the card's header bar. Every one of these is written
     against `.ledger td` so it outranks the padding and the display set on
     that selector three rules up: a bare .lg-c-date is one class where that
     is a class and an element, and it loses. */
  .ledger td.lg-c-date {
    display:flex; align-items:baseline; gap:8px;
    padding:8px 14px; background:var(--fill); border-bottom:1px solid var(--line-soft);
  }
  .lg-c-date b { font-size:var(--t-sm); }

  .ledger td.lg-c-item { padding-top:13px; }
  .ledger td.lg-c-qty { padding-top:11px; }
  .lg-c-qty b { display:inline; }
  .lg-c-qty small { display:inline; margin-left:5px; }
  /* The dollar figure is a restatement of the line above it, so it reads as
     the quiet half of one fact rather than as a second headline number. */
  .ledger td.lg-c-usd { padding-top:2px; }
  .lg-c-usd b { font-size:var(--t-plus); color:var(--ink-2); }
  .ledger td.lg-c-st { padding-top:9px; }
  .ledger td.lg-c-rec { padding-top:11px; padding-bottom:14px; text-align:left; }
  .lg-c-date, .lg-c-item, .lg-c-qty, .lg-c-usd { width:auto; }

  .lg-empty { display:block; }
  .fund-log-hd .chiprail { margin-left:0; width:100%; }
  .stat { border-left:0; border-top:1px solid var(--line-soft); }
  .stat:first-child { border-top:0; }
  .fund-hd h1 { font-size:24px; }
}
@media (max-width:420px) {
  .fund-id-go { margin-left:0; }
  .fund-id-addr { font-size:11px; }
}

/* ============================================================
   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; }
  .hdr-sub .hdr-soon { padding:11px 5px; }

  /* 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. */
  .spot-dots { gap:2px; right:8px; bottom:4px; }
  .spot-dot {
    width:30px; height:30px; border-radius:50%; background:none; box-shadow:none;
    display:grid; place-items:center;
  }
  .spot-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);
  }
  .spot-dot.is-on { background:none; transform:none; }
  .spot-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; }
}

/* "12 people found this helpful", and the button under it, as on Amazon */
.rev-help { margin-top:10px; }
.rev-help-n { font-size:var(--t-sm); color:var(--ink-2); margin-bottom:6px; }
.rev-help-act { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; font-size:var(--t-sm); }
.rev-help-btn {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:5px 18px; font-size:var(--t-sm); box-shadow:var(--sh-card); cursor:pointer;
}
.rev-help-btn:disabled { opacity:.55; cursor:default; }
@media (hover:hover) { .rev-help-btn:not(:disabled):hover { background:var(--fill); } }
.rev-help-done { color:var(--pos); font-weight:600; }
.rev-help-msg { color:var(--ink-2); }
.rev-help-msg:empty { display:none; }
.rev-sort { justify-content:flex-end; margin:4px 0 8px; }
.rev-help:empty { display:none; }

/* The price chart, a DexScreener or GeckoTerminal frame. A fixed height
   holds the space while the live price read settles, so nothing below it
   jumps when the frame arrives. */
.chart-frame {
  height:440px; border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; background:var(--fill);
}
.chart-frame iframe { display:block; width:100%; height:100%; border:0; }
@media (max-width:767px) { .chart-frame { height:360px; } }

/* ============================================================
   Buy Now and the checkout window
   Markup is built in js/checkout.js and js/walletpick.js.
   ============================================================ */
.cta-buy { background:var(--btn-o); border-color:var(--btn-o-line); }
@media (hover:hover) { .cta-buy:hover { background:var(--btn-o-hover); } }
.bb-alt { display:inline-block; margin-top:8px; font-size:var(--t-sm); }

.ck-in { padding:22px 22px 18px; }
.ck-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-right:28px; }
.ck-logo { width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--fill); flex:none; }
.ck-h { font-size:var(--t-title); }
.ck-sub { font-size:var(--t-sm); color:var(--ink-2); }

.ck-tabs { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-ctl); overflow:hidden; margin-bottom:14px; }
.ck-tabs button { padding:8px 0; font-size:var(--t-base); font-weight:600; color:var(--ink-2); background:var(--card); }
.ck-tabs button[aria-selected="true"] { background:var(--ink); color:#fff; }

.ck-lb { display:block; font-size:var(--t-sm); font-weight:700; margin-bottom:5px; }
.ck-field { display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--card); }
.ck-field:focus-within { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-tint); }
.ck-field input {
  flex:1; min-width:0; border:0; background:none; padding:10px 12px; outline:0;
  font-family:var(--mono); font-size:20px; appearance:none; -webkit-appearance:none;
}
.ck-unit { padding:0 12px; font-weight:700; color:var(--ink-2); }
.ck-bal { font-size:var(--t-sm); color:var(--ink-2); margin-top:6px; min-height:1em; }
.ck-bal .linkbtn { margin-left:4px; font-weight:600; }
.ck-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ck-chips:empty { display:none; }
.ck-chip { border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 12px; font-size:var(--t-sm); background:var(--card); }
@media (hover:hover) { .ck-chip:hover { background:var(--fill); } }

.ck-sum { margin-top:14px; padding:12px 14px; border-radius:var(--r-card); background:var(--fill); }
.ck-hint { font-size:var(--t-base); color:var(--ink-2); }
.ck-recv { display:flex; flex-direction:column; margin-bottom:8px; }
.ck-recv span { font-size:var(--t-sm); color:var(--ink-2); }
.ck-recv b { font-size:22px; font-weight:700; font-family:var(--mono); font-weight:400; word-break:break-all; }
.ck-recv em { font-style:normal; font-size:var(--t-sm); color:var(--ink-2); }
.ck-row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:var(--t-sm); padding:4px 0; border-top:1px solid var(--line-soft); }
.ck-row > span:first-child { color:var(--ink-2); }
.ck-row > span:last-child { text-align:right; }
.is-bad { color:var(--price-red); font-weight:700; }
.ck-slips { display:inline-flex; gap:4px; }
.ck-slip { border:1px solid var(--line); border-radius:var(--r-pill); padding:1px 8px; font-size:var(--t-mini); background:var(--card); }
.ck-slip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }

.ck-warn { display:none; margin-top:10px; padding:9px 12px; border-radius:var(--r-badge); background:var(--neg-bg); color:var(--neg); font-size:var(--t-sm); font-weight:600; }
.ck-warn.is-on { display:block; }
.ck-go {
  margin-top:14px; width:100%; height:42px; border-radius:var(--r-pill); font-size:var(--t-plus); font-weight:600;
  background:var(--btn-o); border:1px solid var(--btn-o-line); color:var(--ink); box-shadow:var(--sh-card);
}
.ck-go.is-sell { background:var(--btn-y); border-color:var(--btn-y-line); }
.ck-go:disabled { background:var(--fill); border-color:var(--line); color:var(--ink-2); box-shadow:none; cursor:default; }
@media (hover:hover) { .ck-go:not(:disabled):hover { filter:brightness(.96); } }
.ck-status { margin-top:10px; font-size:var(--t-sm); color:var(--ink-2); min-height:1em; }
.ck-status:empty { display:none; }

.wpick-list { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.wpick-btn {
  width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); font-size:var(--t-plus); font-weight:600; text-align:left;
}
@media (hover:hover) { .wpick-btn:hover { background:var(--fill); } }
.wpick-ic { width:28px; height:28px; border-radius:6px; overflow:hidden; background:var(--fill); flex:none; }
.wpick-ic img { display:block; width:28px; height:28px; }
.wpick-nm { display:flex; flex-direction:column; }
.wpick-nm small { font-size:var(--t-sm); font-weight:400; color:var(--ink-2); }
.ck-who { font-size:var(--t-sm); color:var(--ink-2); margin-top:4px; }
.ck-who .linkbtn { margin-left:4px; }

/* ============================================================
   Seller, paired stocks, compare, Your Orders
   Pages added 2026-10-06. They borrow the fund page's shell (.fund,
   .fund-hd, .stats, .ledger) so the new pages read as one family with the
   dashboard rather than as a second design.
   ============================================================ */
.grid-page { margin-top:4px; }
/* The ledger's thumbnail slot, filled with a ticker rather than artwork, for
   a paired asset: there is no logo in the feed for a stock. */
.stock-tile {
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:6px;
  background:var(--blue-tint); color:var(--blue-deep); font-family:var(--mono); font-size:11px; font-weight:400;
  border:1px solid var(--blue-line); letter-spacing:-.02em;
}
.stock-tile-lg { width:64px; height:64px; font-size:15px; border-radius:10px; }
.stock-top { display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.stock-top h1 { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.stock-kind { font-size:var(--t-plus); font-weight:400; color:var(--ink-2); }
.stock-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px; }
.stock-price small { font-size:var(--t-sm); color:var(--ink-2); }
.stocks-table .lg-c-qty b { font-size:var(--t-plus); }
.page-stock .fund-log-hd .sortwrap { margin-left:auto; }
.page-stock .fund-log-hd .resbar-count { flex:0 1 auto; min-width:0; }
.page-seller .fund-log-hd .resbar-count { flex:0 1 auto; min-width:0; }

/* ---- compare ---- */
.cmp-add { margin-top:14px; max-width:520px; }
.cmp-add-field { position:relative; }
.cmp-in {
  width:100%; height:40px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--card); font-size:var(--t-plus); appearance:none; -webkit-appearance:none;
}
.cmp-in:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-tint); }
.cmp-sugg {
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-pop);
  padding:4px; max-height:320px; overflow-y:auto;
}
.cmp-sugg button { width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; text-align:left; font-size:var(--t-base); }
@media (hover:hover) { .cmp-sugg button:hover { background:var(--fill); } }
.cmp-sugg img { width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--fill); flex:none; }
.cmp-none { padding:10px; font-size:var(--t-sm); color:var(--ink-2); }
.cmp-table th[scope="row"] { text-align:left; font-size:var(--t-sm); font-weight:700; color:var(--ink-2); padding:14px 16px; width:20%; vertical-align:middle; border-bottom:1px solid var(--line-soft); background:var(--fill); }
.cmp-table td { vertical-align:top; font-size:var(--t-plus); }
.cmp-table .cmp-head td { border-bottom:1px solid var(--line); }
.cmp-item { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-right:28px; }
.cmp-item img { width:96px; height:96px; border-radius:8px; object-fit:cover; background:var(--fill); }
.cmp-nm { font-size:var(--t-title); font-weight:500; color:var(--blue-deep); }
.cmp-rm { position:absolute; top:0; right:0; }
.cmp-cta td { border-bottom:0; }
.cmp-cta .cta { margin-top:0; width:auto; display:inline-grid; padding:0 20px; }
.cmp-table .lg-sub { font-size:var(--t-sm); }
.cmp-table .social { margin:0 6px 6px 0; display:inline-block; }
/* On a phone the comparison keeps its columns: a side by side table is the
   whole point of the page, so it scrolls sideways inside its box instead of
   collapsing into cards the way the fund ledger does. */
@media (max-width:780px) {
  .cmp-wrap { overflow-x:auto; border:1px solid var(--line); }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td, .cmp-table th { display:revert; width:auto; }
  .cmp-table td { padding:10px 12px; min-width:150px; }
  .cmp-table th[scope="row"] { min-width:110px; position:sticky; left:0; z-index:1; }
  .cmp-item img { width:72px; height:72px; }
}

/* ---- the compare tray along the bottom ---- */
.tray {
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:var(--card); border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(15,17,17,.12);
}
.tray-in { max-width:var(--content-max); margin:0 auto; display:flex; align-items:center; gap:14px; padding:10px var(--gutter); flex-wrap:wrap; }
.tray-lb { font-size:var(--t-plus); color:var(--ink-2); }
.tray-list { display:flex; gap:8px; flex:1; min-width:0; flex-wrap:wrap; }
.tray-list li { display:flex; align-items:center; gap:6px; padding:4px 6px 4px 4px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:var(--t-sm); font-family:var(--mono); }
.tray-list img { width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--fill); }
.tray-x { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:var(--ink-2); }
@media (hover:hover) { .tray-x:hover { background:var(--fill); color:var(--ink); } }
.tray-go { margin-top:0; width:auto; display:inline-grid; padding:0 20px; }
.tray-clear { font-size:var(--t-sm); }
/* room for the tray at the foot of the page when it is showing */
body:has(.tray:not([hidden])) .foot { padding-bottom:72px; }

/* ---- the Market | Limit slider in the checkout ---- */
/* A segmented control with a sliding thumb, under the Buy and Sell tabs. The
   thumb is one element moved by transform, so the two labels never move and
   the switch reads as one control sliding, not two buttons repainting. */
.ck-mode {
  position:relative; display:grid; grid-template-columns:1fr 1fr; margin:-6px 0 14px;
  padding:3px; background:var(--fill); border:1px solid var(--line); border-radius:var(--r-pill);
}
.ck-mode-thumb {
  position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  background:var(--card); border-radius:var(--r-pill); box-shadow:var(--sh-card);
  transition:transform 220ms var(--ease);
}
.ck-mode[data-mode="limit"] .ck-mode-thumb { transform:translateX(100%); }
@media (prefers-reduced-motion:reduce) { .ck-mode-thumb { transition:none; } }
.ck-mode button { position:relative; z-index:1; padding:7px 0; font-size:var(--t-sm); font-weight:600; color:var(--ink-2); border-radius:var(--r-pill); }
.ck-mode button[aria-selected="true"] { color:var(--ink); }
.lo-exp-row { border:0; margin-top:8px; }
.lo-gasless {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:-4px 0 12px;
  padding:7px 11px; border-radius:var(--r-badge); background:var(--pos-bg); color:var(--pos); font-size:var(--t-sm);
}
.lo-gasless svg { flex:none; }
.lo-gasless span { color:var(--ink-2); }
.lo-px .ck-unit:first-child { padding-right:0; }

/* ---- buy box extras: compare, limit order, alerts, badge ---- */
.bb-tools { display:flex; gap:8px 14px; flex-wrap:wrap; margin-top:6px; font-size:var(--t-sm); }
.bb-tools .linkbtn { font-size:var(--t-sm); }
.bb-tools .is-on { color:var(--pos); font-weight:600; }
.lo-open { margin-top:14px; }
.lo-open h3 { font-size:var(--t-base); margin-bottom:6px; }
.lo-open ul { display:flex; flex-direction:column; gap:6px; }
.lo-open li { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:var(--t-sm); padding:6px 0; border-top:1px solid var(--line-soft); }
.lo-open li small { display:block; color:var(--ink-2); }
.lo-open .ck-hint { margin-top:8px; }

/* ---- price alert form and the badge embed, on the project page ---- */
.alert-form { display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:var(--r-card); padding:16px; }
.alert-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.alert-row .ain, .alert-row .sel { height:36px; }
.alert-form .ain { border:1px solid var(--line); border-radius:var(--r-ctl); padding:0 12px; font-size:var(--t-plus); background:var(--card); min-width:0; appearance:none; -webkit-appearance:none; }
.alert-form .ain:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-tint); }
.alert-form .ain[type="email"] { flex:1 1 220px; }
.alert-form .ain[inputmode="decimal"] { width:140px; font-family:var(--mono); }
.alert-form .cta { margin-top:0; width:auto; display:inline-grid; padding:0 20px; }
.badge-embed { display:grid; grid-template-columns:auto 1fr; gap:14px 18px; align-items:start; }
.badge-embed img { display:block; border:1px solid var(--line-soft); border-radius:6px; }
.badge-embed pre {
  margin:0; padding:10px 12px; background:var(--fill); border-radius:var(--r-card); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:var(--t-sm); white-space:pre-wrap; word-break:break-all; line-height:1.5;
}
@media (max-width:560px) { .badge-embed { grid-template-columns:1fr; } }

/* ---- questions and answers ---- */
.qa-list { display:flex; flex-direction:column; }
.qa-item { padding:14px 0; border-top:1px solid var(--line-soft); display:grid; grid-template-columns:72px 1fr; gap:4px 14px; }
.qa-lb { font-size:var(--t-sm); font-weight:700; color:var(--ink-2); padding-top:2px; }
.qa-q { font-size:var(--t-plus); font-weight:500; line-height:1.5; white-space:pre-wrap; }
.qa-a { font-size:var(--t-plus); line-height:1.6; white-space:pre-wrap; }
.qa-meta { grid-column:2; font-size:var(--t-sm); color:var(--ink-2); }
.qa-meta .mono { font-size:var(--t-sm); }
.qa-answers { grid-column:2; display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.qa-answer { padding-left:12px; border-left:2px solid var(--line); }
.qa-form { margin-top:10px; grid-column:2; }
.qa-form textarea.ain { min-height:64px; }
@media (max-width:560px) { .qa-item { grid-template-columns:1fr; } .qa-meta, .qa-answers, .qa-form { grid-column:1; } }

/* ---- the header gained a second link; on a phone the two small labels
        are what give way, the strong words stay ---- */
@media (max-width:479px) {
  .hdr-link small { display:none; }
  .hdr-link { padding:8px 6px; }
}