/* Customer-facing hotlist page — placeholder scaffolding.
   Replace freely to match the stylized design. Palette vars inherited from main.css. */

.hotlist-hero {
  background: linear-gradient(180deg, var(--cloud) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--silver);
  padding: 3rem 1.5rem 2.5rem;
}
.hotlist-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hotlist-hero-title {
  /* text-wrap: balance redistributes line lengths so the headline reads
     as roughly equal halves instead of breaking awkwardly at the em-dash
     ("AND" trailing line 1) or running tight against the right edge.
     Supported in Chrome 114+, Safari 17.5+, Firefox 121+; older browsers
     fall back to the default wrap which still reads fine. */
  text-wrap: balance;
}
.hotlist-hero-body {
  /* Two-column body grid: the primary paragraph (wider) sits next to the
     payout-method italic note (narrower). Fills the horizontal space
     under the headline without inventing new copy, and replaces what was
     two stacked max-w-2xl paragraphs leaving the right half of the hero
     empty. Collapses to a single stacked column on mobile via the media
     query at the bottom of this file. */
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 2rem;
  align-items: start;
}
.hotlist-hero-emphasis {
  font-style: normal;
  color: var(--lavender-dark);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: var(--lavender);
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
  padding: 0 .05em;
}

.hotlist-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* ── Controls (search + quote CTA + TOC) ────────────────────────────────── */
/* The controls block is the seller's persistent reference rail — it carries
   the search, the "different card" CTA, and the category-jump TOC, and it
   stays sticky as the page scrolls. On mobile the TOC defaults collapsed
   behind a "Categories ▾" toggle so the sticky bar doesn't eat half the
   viewport on a phone (12+ categories wrapping). */
.hotlist-controls {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-bottom: 1.25rem;
  position: sticky;
  top: var(--hotlist-sticky-top, 0px);
  z-index: 20;
  padding: 0;
  background: transparent;
  transition: padding .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.hotlist-controls-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Only once the bar actually pins do we paint a background and shadow so
   the cards scrolling beneath it don't bleed through. When in the natural
   flow the bar looks like plain content. */
.hotlist-controls.is-pinned {
  padding: .75rem 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  background: rgba(253, 251, 255, .96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 6px 20px -14px rgba(15, 19, 41, .35);
}
.hotlist-controls input[type="search"] {
  flex: 1;
  min-width: 240px;
  padding: .7rem 1rem;
  border: 1.5px solid var(--silver);
  border-radius: .5rem;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.hotlist-controls input[type="search"]:focus {
  border-color: var(--navy);
}
.hotlist-quote-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: .7rem 1.1rem;
  border-radius: .5rem;
  font-family: 'Oswald', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.hotlist-quote-btn:hover { background: var(--navy-deep); }

.hotlist-loading,
.hotlist-empty,
.hotlist-error {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--navy);
  opacity: 0.6;
  font-size: .95rem;
}
.hotlist-error { color: #b91c1c; opacity: 1; }

.hotlist-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: .85rem;
  background: #fff;
  border: 1px solid var(--silver);
  border-radius: .75rem;
}
/* Toggle button — mobile-only. Hidden on desktop where the TOC is always
   expanded inline. The chevron rotates 180deg when the parent
   .hotlist-controls carries .toc-open. */
.hotlist-toc-toggle {
  display: none;
}
.hotlist-toc-toggle-count {
  background: var(--navy);
  color: #fff;
  font-size: .65rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  letter-spacing: 0;
  font-weight: 700;
}
.hotlist-toc-toggle-chevron {
  margin-left: auto;
  transition: transform .18s ease;
  font-size: .85rem;
}
.hotlist-controls.toc-open .hotlist-toc-toggle-chevron {
  transform: rotate(180deg);
}
.hotlist-toc a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--navy);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.hotlist-toc a:hover { background: var(--lavender-soft); }
.hotlist-toc-count {
  background: var(--navy);
  color: #fff;
  font-size: .65rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  letter-spacing: 0;
}

/* ── Color-grouped category pill ───────────────────────────────────────────
   The category designated as colorGroupedCategory renders as a single
   rounded pill with two parts: the normal "jump to section" link on the
   left and a color-wheel toggle on the right that reveals per-color
   sub-anchors inline after the pill. Mirrors the .hotlist-subcat-X accents
   so the color icons (and the expanded children) preview what each
   sub-section looks like. */
.hotlist-toc-pill-group {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  background: var(--cloud);
  overflow: hidden;
  transition: background .15s;
}
.hotlist-toc-pill-group:hover { background: var(--lavender-soft); }
.hotlist-toc-pill-group .hotlist-toc-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  background: transparent;
  color: var(--navy);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.hotlist-toc-colors-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .55rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-left: 1px solid rgba(45, 37, 64, .18);
  transition: background .15s;
}
.hotlist-toc-colors-btn:hover { background: rgba(45, 37, 64, .08); }
.hotlist-toc-colors-btn[aria-expanded="true"] {
  background: var(--navy);
}
.hotlist-toc-colors-btn[aria-expanded="true"] .hotlist-color-wheel {
  outline: 1px solid rgba(255, 255, 255, .55);
  outline-offset: 1px;
  border-radius: 50%;
}
.hotlist-color-wheel {
  width: 18px;
  height: 18px;
  display: block;
}

/* display:contents lets the child color pills wrap as direct flex items of
   the .hotlist-toc nav — they slot into the same row-wrap flow as every
   other TOC pill, just after the parent's pill-group. The explicit [hidden]
   override is required because display:contents otherwise wins over the
   browser's default [hidden]{display:none} rule. */
.hotlist-toc-colors        { display: contents; }
.hotlist-toc-colors[hidden] { display: none; }
.hotlist-toc-color {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  background: var(--cloud);
  border-left: 3px solid var(--silver);
  transition: background .15s, color .15s;
}
.hotlist-toc-color:hover { background: var(--lavender-soft); }
.hotlist-toc-color .hotlist-toc-count {
  font-size: .6rem;
  padding: .08rem .4rem;
}
/* Per-bucket accents — keys match COLOR_BUCKETS in js/hotlist.js and the
   .hotlist-subcat-X tints below so the chip color reads as a preview of the
   sub-section it jumps to. */
.hotlist-toc-color-W         { border-left-color: #d8c69a; background: rgba(248, 244, 230, .65); }
.hotlist-toc-color-U         { border-left-color: #4a7eb8; background: rgba(212, 226, 244, .55); }
.hotlist-toc-color-B         { border-left-color: #2d2540; background: rgba(220, 215, 230, .65); }
.hotlist-toc-color-R         { border-left-color: #c4533a; background: rgba(248, 222, 214, .6);  }
.hotlist-toc-color-G         { border-left-color: #4a8c5e; background: rgba(218, 236, 222, .6);  }
.hotlist-toc-color-multi     { border-left-color: #d4a847; background: rgba(248, 236, 198, .65); }
.hotlist-toc-color-colorless { border-left-color: #8a8aa0; background: rgba(228, 228, 234, .65); }
.hotlist-toc-color-land      { border-left-color: #8a6a4a; background: rgba(232, 222, 208, .65); }

.hotlist-category {
  margin-bottom: 2.5rem;
  /* --hotlist-anchor-offset is set by js/hotlist.js to header + admin-bar +
     sticky controls bar + a 16px gap, so an anchor jump (clicking a TOC tile)
     lands just below the sticky bar instead of under it. Fallback covers the
     brief window before the JS measurement lands. */
  scroll-margin-top: var(--hotlist-anchor-offset, 160px);
}
.hotlist-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--navy);
}
.hotlist-category-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
  margin: 0;
}
.hotlist-category-count {
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .55;
}

.hotlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* ── Color-grouped sub-categories ──────────────────────────────────────────
   Cards in the configured colorGroupedCategory render under one sub-header
   per WUBRG bucket (+ Multicolor / Colorless / Lands). The parent category
   keeps its single TOC pill; sub-headers are smaller and tinted to the bucket
   color so customers can scan the gallery by color at a glance. */
.hotlist-subcat {
  margin-top: 1.5rem;
  /* Same offset the .hotlist-category sections use so a TOC color-wheel
     child click (e.g. #cat-staples-W) lands the sub-header just below the
     sticky controls bar instead of underneath it. */
  scroll-margin-top: var(--hotlist-anchor-offset, 160px);
}
.hotlist-subcat:first-child {
  margin-top: .75rem;
}
.hotlist-subcat-title {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 .65rem;
  padding: .25rem .55rem;
  border-left: 4px solid var(--silver);
  background: rgba(232, 227, 240, .25);
  border-radius: 0 .35rem .35rem 0;
}
.hotlist-subcat-count {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--navy);
  opacity: .55;
}
/* Per-bucket accent on the left border. WUBRG follows MtG's standard mana
   palette; multi-color uses gold; colorless / lands use neutral greys. */
.hotlist-subcat-W    { }
.hotlist-subcat-W .hotlist-subcat-title    { border-left-color: #d8c69a; background: rgba(248, 244, 230, .55); }
.hotlist-subcat-U .hotlist-subcat-title    { border-left-color: #4a7eb8; background: rgba(212, 226, 244, .45); }
.hotlist-subcat-B .hotlist-subcat-title    { border-left-color: #2d2540; background: rgba(220, 215, 230, .55); }
.hotlist-subcat-R .hotlist-subcat-title    { border-left-color: #c4533a; background: rgba(248, 222, 214, .5); }
.hotlist-subcat-G .hotlist-subcat-title    { border-left-color: #4a8c5e; background: rgba(218, 236, 222, .5); }
.hotlist-subcat-multi .hotlist-subcat-title     { border-left-color: #d4a847; background: rgba(248, 236, 198, .55); }
.hotlist-subcat-colorless .hotlist-subcat-title { border-left-color: #8a8aa0; background: rgba(228, 228, 234, .55); }
.hotlist-subcat-land .hotlist-subcat-title      { border-left-color: #8a6a4a; background: rgba(232, 222, 208, .55); }

/* Multicolor sub-combo headers (Azorius, Esper, etc.). Tighter than the
   color sub-headers above — they're one nesting level deeper, so smaller
   font / lighter accent keeps the hierarchy obvious. */
.hotlist-subcombo {
  margin-top: 1rem;
}
.hotlist-subcombo:first-child {
  margin-top: .35rem;
}
.hotlist-subcombo-title {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-family: 'Oswald', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .85;
  margin: 0 0 .5rem;
  padding: 0 0 .25rem;
  border-bottom: 1px dashed rgba(45, 37, 64, .25);
}
.hotlist-subcombo-letters {
  font-family: 'Oswald', sans-serif;
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--navy);
  opacity: .55;
  padding: .05rem .35rem;
  border-radius: .25rem;
  background: rgba(45, 37, 64, .07);
}
.hotlist-subcombo-count {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--navy);
  opacity: .5;
  margin-left: auto;
}

.hotlist-card {
  background: #fff;
  border: 1px solid var(--silver);
  border-radius: .75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.hotlist-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 19, 41, 0.12);
  border-color: var(--lavender);
}
/* Wrapper exists so the flip button can anchor to the image's bottom-left
   without overlapping the card body. Inherits the inset margin + aspect
   ratio that used to live on the image itself. */
.hotlist-card-img-wrap {
  position: relative;
  width: calc(100% - .8rem);
  margin: .4rem .4rem 0;
  aspect-ratio: 488 / 680;
}
.hotlist-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  background: var(--cloud);
  /* Round all four corners so the printed card reads as a card. The tile
     has its own outer border-radius; this inset image gets its own rounded
     rectangle, with a sliver of tile background showing around it so the
     card silhouette doesn't blend into the tile's white. */
  border-radius: .5rem;
}
.hotlist-card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 31, 58, 0.4);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  border-radius: .5rem;
}
.hotlist-card-body {
  padding: .85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.hotlist-card-name {
  font-weight: 600;
  color: var(--navy);
  font-size: .95rem;
  line-height: 1.3;
}
.hotlist-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .55;
  font-family: 'Oswald', sans-serif;
}
/* Promo chips have their own colors and shouldn't inherit the meta row's
   .55 opacity wash — that washes out the gradients. The set name keeps
   the dimmed look via its own span (no class), so this targets only the
   stylized chips. */
.hotlist-card-meta .hotlist-finish,
.hotlist-card-meta .hotlist-promo {
  opacity: 1;
}
/* Finish chip styles (.hotlist-finish, .hotlist-finish-foil/-etched) live
   in main.css alongside the promo chips so the admin's HotListAdmin row
   can paint them too. main.css ships sitewide; hotlist.css only loads on
   /hotlist.html. */

/* Promo chip styles live in main.css so both the customer-facing hotlist
   tile/modal AND the admin's HotListAdmin row can paint them identically.
   The shared classes (.hotlist-promo + .hotlist-promo-<tag>) are loaded on
   every page since main.css is sitewide; hotlist.css is only on the public
   hotlist page. See `Promo-type chips` block in main.css. */
.hotlist-card-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px dashed var(--silver);
}
.hotlist-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hotlist-price-label {
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .55;
}
.hotlist-price-value {
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}
/* Admin-only: the stored hot-list price would fall back to base %, so the
   card is hidden from customers. Red tint flags it so the admin can see
   what's being suppressed without flipping to the admin bundle. */
.hotlist-card-hidden-admin {
  background: #fef2f2;
  border-color: #fca5a5;
  box-shadow: inset 0 0 0 1px #fca5a5;
  position: relative;
}
.hotlist-card-hidden-admin::after {
  content: 'HIDDEN';
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: #dc2626;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .15rem .5rem;
  border-radius: 999px;
  z-index: 2;
}
/* Second chip stacked below HIDDEN explaining *why* the card was suppressed:
   the stored hot-list price was under base %, so fallback dropped it to the
   base rate. Matches the MAX % chip style so the two reason-tags read as a
   set. */
.hotlist-card-hidden-admin::before {
  content: 'TOO LOW';
  position: absolute;
  top: 1.85rem;
  right: .5rem;
  background: #1e40af;
  color: #dbeafe;
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .15rem .5rem;
  border-radius: 999px;
  z-index: 2;
}
/* Admin-only: the card's effective payout differs from the stored hot-list
   price (max-payout cap hit, premium fallback, etc.). The price shown is
   already the corrected value — the color is the visual breadcrumb. */
.hotlist-card-corrected-admin .hotlist-price-value {
  color: #b45309; /* amber-700 */
}
.hotlist-card-corrected-admin::after {
  content: 'ADJUSTED';
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: #f59e0b;
  color: #1a1f3a;
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .15rem .5rem;
  border-radius: 999px;
  z-index: 2;
}
.hotlist-card-corrected-admin { position: relative; }
/* Admin-only: the max payout cap was the specific reason the price was
   adjusted. Stacks below the ADJUSTED chip using ::before on the same
   element so both can appear together. */
.hotlist-card-cap-admin::before {
  content: 'MAX %';
  position: absolute;
  top: 1.85rem;
  right: .5rem;
  background: #1e40af; /* blue-800 */
  color: #dbeafe;
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .15rem .5rem;
  border-radius: 999px;
  z-index: 2;
}
.hotlist-card-notes {
  font-size: .7rem;
  color: var(--navy);
  opacity: .65;
  line-height: 1.4;
  border-top: 1px solid var(--silver);
  padding-top: .5rem;
  min-height: calc(.7rem * 1.4 + .5rem);
}
.hotlist-card-notes-empty { border-top-color: transparent; }

/* ── Quote any card modal ───────────────────────────────────────────────── */
.hotlist-modal[hidden] { display: none; }
.hotlist-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.hotlist-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 19, 41, 0.72);
}
.hotlist-modal-box {
  position: relative;
  background: #fff;
  border-radius: .875rem;
  box-shadow: 0 20px 60px rgba(15, 19, 41, 0.4);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hotlist-modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--silver);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hotlist-modal-header h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0;
}
.hotlist-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  opacity: .4;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 .25rem;
  transition: opacity .15s;
}
.hotlist-modal-close:hover { opacity: 1; }
.hotlist-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}
.hotlist-modal-blurb {
  font-size: .9rem;
  color: var(--navy);
  opacity: .75;
  margin: 0 0 1rem;
}
.hotlist-modal-search {
  position: relative;
  margin-bottom: 1rem;
}
.hotlist-modal-search input[type="search"] {
  width: 100%;
  padding: .7rem 1rem;
  border: 1.5px solid var(--silver);
  border-radius: .5rem;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  color: var(--navy);
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.hotlist-modal-search input[type="search"]:focus {
  border-color: var(--navy);
}
.hotlist-modal-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--silver);
  border-radius: .5rem;
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(15, 19, 41, .15);
}
.hotlist-modal-suggestions:empty { display: none; }
.hotlist-modal-suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .85rem;
  border: none;
  background: #fff;
  font-size: .9rem;
  color: var(--navy);
  cursor: pointer;
  border-bottom: 1px solid rgba(212, 216, 222, .5);
}
.hotlist-modal-suggestions button:last-child { border-bottom: none; }
.hotlist-modal-suggestions button:hover { background: var(--cloud); }
.hotlist-modal-loading,
.hotlist-modal-error {
  text-align: center;
  padding: 1.5rem;
  font-size: .9rem;
  color: var(--navy);
  opacity: .6;
}
.hotlist-modal-error { color: #b91c1c; opacity: 1; }
.hotlist-modal-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (max-width: 640px) {
  .hotlist-modal-card { grid-template-columns: 1fr; }
}
.hotlist-modal-img img {
  width: 100%;
  border-radius: .5rem;
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.hotlist-modal-img .hotlist-card-img-placeholder {
  aspect-ratio: 488 / 680;
  background: var(--cloud);
  border-radius: .5rem;
}
.hotlist-modal-details h3 {
  margin: 0 0 .75rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: .02em;
}
.hotlist-modal-details h3.hotlist-modal-empty-title {
  color: var(--navy);
  opacity: .5;
  font-style: italic;
  font-weight: 400;
}
.hotlist-modal-field { margin-bottom: .6rem; }
.hotlist-modal-field label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .6;
  margin-bottom: .2rem;
}
.hotlist-modal-field select {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--silver);
  border-radius: .35rem;
  font-size: .85rem;
  color: var(--navy);
  background: #fff;
}
.hotlist-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.hotlist-modal-summary {
  margin-top: 1rem;
  padding: .9rem;
  background: var(--cloud);
  border-radius: .5rem;
}
.hotlist-modal-hotlist-badge {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .3rem .7rem;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: var(--navy);
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.hotlist-modal-new-badge {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .3rem .7rem;
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hotlist-modal-cooldown-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: .5rem;
  padding: .85rem 1rem;
  color: #78350f;
  font-size: .85rem;
  line-height: 1.55;
}
.hotlist-modal-cooldown-note p { margin: 0; }
.hotlist-modal-cooldown-note p + p { margin-top: .5rem; }
.hotlist-modal-cooldown-note strong { color: #78350f; }
.hotlist-modal-market {
  font-size: .9rem;
  color: var(--navy);
  margin-bottom: .5rem;
}
.hotlist-modal-market strong { font-size: 1.05rem; }
.hotlist-modal-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: .5rem;
}
.hotlist-modal-prices > div {
  background: #fff;
  border: 1px solid var(--silver);
  border-radius: .4rem;
  padding: .5rem .6rem;
}
.hotlist-modal-prices span {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .6;
}
.hotlist-modal-prices strong {
  font-size: 1.2rem;
  color: var(--navy);
}
.hotlist-modal-note {
  font-size: .7rem;
  color: var(--navy);
  opacity: .55;
  line-height: 1.4;
}
.hotlist-modal-nomarket {
  font-size: .85rem;
  color: var(--navy);
  opacity: .75;
  font-style: italic;
}
.hotlist-modal-digital-warning {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: .5rem;
  padding: .85rem 1rem;
  color: #78350f;
  font-size: .85rem;
  line-height: 1.5;
}
.hotlist-modal-digital-warning p { margin: .35rem 0 0; }
.hotlist-modal-digital-warning strong { color: #78350f; }
.hotlist-modal-digital-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #78350f;
}
.hotlist-modal-footer {
  padding: .85rem 1.5rem;
  border-top: 1px solid var(--silver);
  display: flex;
  justify-content: flex-end;
  background: var(--cloud);
}

/* ── Grouped tiles (multiple printings of one card) ─────────────────────── */
.hotlist-card-grouped { position: relative; cursor: pointer; }
.hotlist-card-grouped:hover { border-color: var(--lavender-dark); }
.hotlist-card-versions-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 19, 41, .35);
  transition: background .15s, transform .15s;
}
.hotlist-card-versions-badge:hover {
  background: var(--lavender-dark);
  transform: translateY(-1px);
}

/* ── Versions modal (click a grouped tile to see all printings) ─────────── */
.hotlist-versions-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.hotlist-vrow {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: .85rem;
  align-items: center;
  padding: .55rem .65rem;
  background: #fff;
  border: 1px solid var(--silver);
  border-radius: .5rem;
}
.hotlist-vrow-img {
  width: 110px;
  aspect-ratio: 488 / 680;
  object-fit: cover;
  object-position: top;
  border-radius: .4rem;
  background: var(--cloud);
  display: block;
  box-shadow: 0 3px 10px rgba(15, 19, 41, .12);
}
.hotlist-vrow-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26, 31, 58, 0.45);
  text-align: center;
  padding: .4rem;
}
.hotlist-vrow-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
/* Meta on the left, prices flush right — collapses lots of vertical
   whitespace by keeping both on one line and only spilling notes below. */
.hotlist-vrow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hotlist-vrow-meta {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.hotlist-vrow-set {
  font-weight: 700;
  background: var(--navy);
  color: #fff;
  padding: .12rem .45rem;
  border-radius: 999px;
  letter-spacing: .14em;
}
.hotlist-vrow-category {
  font-weight: 600;
  opacity: .6;
}
/* Admin-only chip on rows that customers don't see (cooldown, no market,
   below-min). Sits inline with the meta chips so the row stays scannable. */
.hotlist-vrow-hidden {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: .12rem .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: .62rem;
}
.hotlist-vrow-hidden-row {
  background: #fef2f2;
  border-color: #fca5a5;
}
/* Pin toggle on the versions modal — admin-only on high-end-category rows.
   Inactive state: outlined star, low-emphasis. Active state: filled lavender
   chip so the pinned printing reads at a glance. The same class is reused
   as a non-interactive badge for customers who shouldn't see the toggle. */
.hotlist-vrow-pin {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--cloud, #f5f3f8);
  color: var(--navy, #1a1f3a);
  border: 1px solid var(--silver, #d4d8de);
  border-radius: 999px;
  padding: .15rem .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .62rem;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
button.hotlist-vrow-pin:hover { border-color: var(--navy, #1a1f3a); }
button.hotlist-vrow-pin:disabled { opacity: .5; cursor: wait; }
.hotlist-vrow-pin-active {
  background: var(--lavender-soft, #d9cfe8);
  color: var(--navy, #1a1f3a);
  border-color: var(--lavender, #b8a9d4);
}
.hotlist-vrow-prices {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  flex-shrink: 0;
}
.hotlist-vrow-prices .hotlist-price {
  flex-direction: row;
  align-items: baseline;
  gap: .35rem;
}
.hotlist-vrow-prices .hotlist-price-label {
  font-size: .55rem;
  letter-spacing: .14em;
}
.hotlist-vrow-prices .hotlist-price-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.hotlist-vrow-notes {
  font-size: .75rem;
  color: var(--navy);
  opacity: .7;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .hotlist-vrow {
    grid-template-columns: 80px 1fr;
    gap: .55rem;
    padding: .5rem;
  }
  .hotlist-vrow-img { width: 80px; }
  .hotlist-vrow-prices { gap: .85rem; }
  .hotlist-vrow-prices .hotlist-price-value { font-size: .9rem; }
  .hotlist-vrow-notes { font-size: .68rem; }
}

/* ── Mobile tweaks (≤640px) ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hotlist-hero { padding: 1.75rem 1rem 1.5rem; }
  .hotlist-hero h1 { font-size: 1.875rem; line-height: 1.15; }
  .hotlist-hero p { font-size: .9rem; }
  .hotlist-hero-body {
    /* Single column on mobile — the side-by-side grid gets cramped
       below ~640px and the primary paragraph reads better stacked above
       the payout-method note. */
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
  }

  .hotlist-root { padding: 1.25rem 1rem 2rem; }

  .hotlist-controls {
    gap: .5rem;
    margin-bottom: 1rem;
  }
  .hotlist-controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .hotlist-controls input[type="search"] {
    width: 100%;
    min-width: 0;
    padding: .6rem .85rem;
    font-size: .9rem;
    box-sizing: border-box;
  }
  .hotlist-quote-btn {
    width: 100%;
    padding: .55rem .85rem;
    font-size: .7rem;
    line-height: 1.2;
    box-sizing: border-box;
  }
  .hotlist-controls.is-pinned {
    padding: .55rem 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  /* Mobile TOC: hidden behind a toggle button. The toggle takes up one row;
     when expanded, the nav appears below it inside the same sticky bar
     so tap-to-jump stays one motion. Tapping a category collapses again
     (handled in js/hotlist.js#wireTocAnchors). */
  .hotlist-toc-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .6rem .9rem;
    font-family: 'Oswald', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--silver);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .hotlist-toc-toggle:hover {
    border-color: var(--navy);
  }
  .hotlist-toc {
    display: none;
    padding: .65rem;
    gap: .35rem;
    border-radius: .55rem;
  }
  .hotlist-controls.toc-open .hotlist-toc {
    display: flex;
  }
  .hotlist-toc a { padding: .3rem .6rem; font-size: .65rem; gap: .3rem; }
  .hotlist-toc-count { font-size: .55rem; padding: .05rem .35rem; }

  .hotlist-category { margin-bottom: 1.75rem; scroll-margin-top: 64px; }
  .hotlist-category-head { margin-bottom: .75rem; padding-bottom: .4rem; }
  .hotlist-category-title { font-size: 1.1rem; }
  .hotlist-category-count { font-size: .6rem; }
  .hotlist-subcat { margin-top: 1.1rem; }
  .hotlist-subcat-title { font-size: .85rem; padding: .2rem .45rem; gap: .45rem; }
  .hotlist-subcat-count { font-size: .55rem; }
  .hotlist-subcombo { margin-top: .8rem; }
  .hotlist-subcombo-title { font-size: .7rem; gap: .4rem; }
  .hotlist-subcombo-letters { font-size: .55rem; padding: .04rem .3rem; }
  .hotlist-subcombo-count { font-size: .5rem; }

  .hotlist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
  }
  .hotlist-card { border-radius: .55rem; }
  .hotlist-card-body { padding: .55rem .65rem .65rem; gap: .35rem; }
  .hotlist-card-name { font-size: .8rem; line-height: 1.25; }
  .hotlist-card-meta { font-size: .6rem; gap: .3rem; }
  .hotlist-finish { font-size: .5rem; padding: .08rem .35rem; }
  .hotlist-card-prices { gap: .25rem; padding-top: .35rem; }
  .hotlist-price-label { font-size: .5rem; letter-spacing: .08em; }
  .hotlist-price-value { font-size: .85rem; }
  .hotlist-card-notes { font-size: .6rem; padding-top: .35rem; line-height: 1.35; }
}

/* ── Flip control for double-faced cards ────────────────────────────────── */

/* Tile (main grid) — corner button anchored bottom-left of the image wrap
   so the printed card title at top and the hotlist price row at the
   article's bottom both stay clear. */
.hotlist-card-flip {
  position: absolute;
  z-index: 2;
  top: auto;
  right: auto;
  bottom: .5rem;
  left: .5rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 19, 41, .55), 0 0 0 1px rgba(15, 19, 41, .35);
  transition: background .15s, transform .15s;
  padding: 0;
}
.hotlist-card-flip svg {
  width: 56%;
  height: 56%;
  display: block;
}
.hotlist-card-flip:hover {
  background: var(--lavender-dark);
  transform: translateY(-1px);
}
.hotlist-flipped .hotlist-card-flip {
  background: var(--lavender-dark);
}
@media (max-width: 540px) {
  .hotlist-card-flip { width: 2rem; height: 2rem; font-size: 1.15rem; }
}

/* Versions modal row — the entire image is the flip target, with a
   centered semi-transparent indicator that comes alive on hover. The
   small tile-style corner button got lost when scanning a stack of
   near-identical printings; click-anywhere-on-the-image is the easier
   target. */
.hotlist-vrow { position: relative; }
.hotlist-vrow-img-wrap {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: .4rem;
  flex-shrink: 0;
}
.hotlist-vrow-img-wrap:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.hotlist-vrow-flip-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: rgba(15, 19, 41, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: .68;
  transition: opacity .15s, background .15s, transform .15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.hotlist-vrow-flip-overlay svg {
  width: 58%;
  height: 58%;
  display: block;
}
.hotlist-vrow-img-wrap:hover .hotlist-vrow-flip-overlay {
  opacity: 1;
  background: rgba(15, 19, 41, .82);
}
.hotlist-vrow-img-wrap:active .hotlist-vrow-flip-overlay {
  transform: translate(-50%, -50%) scale(.92);
}
/* Flipped state — lavender tint on the indicator so customers can tell at a
   glance that they're looking at the back face. */
.hotlist-flipped .hotlist-vrow-flip-overlay {
  background: rgba(138, 122, 168, .85);
}