/* components.css — the marketplace's OWN components, exactly per Figma "Mineralica -client (Kopie)"
   (see DESIGN_SYSTEM_PLAN.md §5). Colours/behaviour come from the `mineralica` theme (P1).

   The atoms both apps share — icon, button, input, checkbox, radio, the pill geometry, link, meta
   item, banner, form card — live in the platform since DESIGN_PLATFORM_PLAN D1:
   mineralica/web/static/components.css, loaded just BEFORE this file (base.html). Both come AFTER
   tailwind.css, so single-class rules win over Tailwind utilities by source order. */

/* ---------- Pill colours — Figma 239:327. The geometry (.pill, .pill-status, .pill-micro) is the
   platform's; these are the marketplace's variants. ---------- */
/* Tag pills (ORIGIN/AUCTION/FIXED PRICE/TRENDING/DUE) */
.pill-origin  { background: #E8EDF2; color: #5E7186; }
/* Figma values — the page is white again (P1b, §13.3), so these no longer need the
   one-step darkening that compensated for the old warm base surface. */
.pill-auction  { background: #F6F3EE; color: #75614A; }
.pill-fixed    { background: #F3F5F6; color: #5F6B6D; }
.pill-trending { background: #ECE9F4; color: #6D6287; }
.pill-due      { background: #FBE7E7; color: #A13E3E; }
/* Status pills (highest/outbid/ended/won/autobid) */
.pill-highest, .pill-won { background: #DDEFE5; color: #046B5C; }
.pill-outbid  { background: #FBE7E7; color: #A13E3E; }
.pill-ended   { background: #ECECEC; color: #5F6772; }
.pill-autobid { background: #EAEDEB; color: #4B5B55; }
/* Micro pills: countdown (red) / anti-snipe (green) */
.pill-micro-count { background: #FBE7E7; color: #A13E3E; font-weight: 700; }
.pill-micro-snipe { background: #C7DDDA; color: #2D4F4D; font-weight: 500; }
/* SSE / connection pill: dot + label, transparent */
.pill-sse { background: transparent; padding: 2px 8px; border-radius: 40px;
  text-transform: none; letter-spacing: normal; font-size: 12px; line-height: 18px; gap: 6px; }
.pill-sse::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: currentColor; flex: none; }
.pill-sse-on  { color: #4E8B61; }
.pill-sse-warn{ color: #C68A28; }
.pill-sse-off { color: #C54A4A; }
.pill-sse-idle{ color: #9CA3AF; }

/* ---------- Product card — Figma 239:564 ---------- */
.product-card {
  display: flex; flex-direction: column;              /* column so the price foot can pin to the bottom */
  background: #FFFFFF; border-radius: var(--rounded-box); overflow: hidden;   /* white per Figma; set off the page by shadow only (P1b) */
  box-shadow: 0 -8px 22px rgba(0,0,0,.08);            /* upward shadow, per Figma */
  transition: box-shadow .2s, transform .2s;
}
.product-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.12); transform: translateY(-2px); }
/* Image sits flush to the card edges, rounded on all four corners to the shared box radius
   (var(--rounded-box)). aspect-ratio is the ONE thing the ratio toggle flips (default square,
   via <html data-card-ratio>); object-cover crops the Thumbor image to whichever box is active,
   so no template/logic change is needed. */
.card-media { position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: #ECEAE6; border-radius: var(--rounded-box); }
[data-card-ratio="square"] .card-media { aspect-ratio: 1 / 1; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #C9C9C9; }
.card-overlay-tl { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 56px); }
/* card pills sit smaller than the full tag pill */
.card-overlay-tl .pill { padding: 4px 10px; font-size: 12px; letter-spacing: .4px; }
/* Heart = bare outline, no chip. Revealed on card hover only (keyboard focus too); on touch
   devices (no hover) it stays visible so it's reachable. */
.card-heart {
  position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #FBFAF8; opacity: 0; transition: opacity .15s, color .15s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));   /* legible over any photo */
}
.product-card:hover .card-heart, .card-heart:focus-visible { opacity: 1; }
.card-heart:hover { color: #C54A4A; }
@media (hover: none) { .card-heart { opacity: 1; } }
/* Saved: a filled red heart (heart-filled sprite = currentColor fill), always visible — a favourited
   lot must read at a glance, not only on hover. */
.card-heart.is-on { opacity: 1; color: #C54A4A; }
/* Body fills the leftover card height (grid stretches cards to the row's tallest); the foot then
   pushes to the bottom, so on shorter cards the empty buffer sits above the divider, not below the
   price. The divider keeps its own 16px top margin as a min gap when there's no free space. */
.product-card-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px; }
.product-card-foot { margin-top: auto; }
.product-card-title {
  font-family: Baskervville, Georgia, serif; font-size: 24px; line-height: 32px; color: #1F1E1E;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card-loc { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px;
  font-weight: 500; font-size: 14px; line-height: 20px; color: #5B5B5B; }
.product-card-loc svg { flex: none; margin-top: 2px; }
.product-card-size { display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-weight: 500; font-size: 14px; color: #5B5B5B; }   /* same style as the locality line */
.product-card-size svg { flex: none; }
.product-card-divider { border: 0; border-top: 1px solid #ECEAE6; margin: 16px 0; }
.product-card-price-label { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #37605D; }
.product-card-bids { display: inline-flex; align-items: center; gap: 4px; padding-left: 8px;
  border-left: 1px solid #DCDAD6; font-weight: 500; font-size: 12px; letter-spacing: normal;
  text-transform: none; color: #7A7A7A; }
.product-card-bids svg { width: 14px; height: 14px; }
.product-card-price { font-weight: 700; font-size: 24px; line-height: 1.1; color: #37605D; margin-top: 4px; }
/* Terminal-lot status on the label line (past sale): only the status WORD is tinted (SOLD = green,
   NOT SOLD = grey/state-ended token); the price below keeps the normal colour. NOT SOLD carries a
   "· <context>" caption (auction-only) kept lowercase + muted so it reads as a caption. */
.product-card-price-label.is-sold { color: #046B5C; }
.product-card-price-label.is-unsold { color: #5F6772; }
.product-card-status-ctx { text-transform: none; letter-spacing: normal; font-weight: 500; color: #7A7A7A; }
.product-card-status-ctx::before { content: "·"; margin: 0 6px; color: #C9C7C3; }
.product-card-chevron { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9999px; border: 1px solid #DCDAD6; color: #37605D;
  transition: background .2s, color .2s, border-color .2s; }
.product-card:hover .product-card-chevron { background: #37605D; border-color: #37605D; color: #FBFCFC; }
/* Mobile: the 2-up grid makes cards ~165px wide, where the price + the 38px chevron button overflow the
   foot row (esp. 3-digit+ prices). Drop the chevron below md — it's decorative (the whole tile is the
   link), so the price reclaims the full width. Tablet/desktop cards stay wide enough to keep it. */
@media (max-width: 767px) {
  .product-card-chevron { display: none; }
}

/* ---------- Bid card — Figma 2101:8 (Redesign "Proposal A") ----------
   The PDP price/action panel. Assembled from these blocks, cut along the SSE-swap seams so P5c/d can
   move each block into its live region unchanged (see DESIGN_SYSTEM_PLAN.md §10): status banner
   (bid-status) · price (price) · meta+countdown (countdown) · action button (bid-area). Meta text is
   13px — a component-local step between body-s (14) and detail (12). */
.bid-card { display: flex; flex-direction: column; gap: 18px; padding: 20px;
  background: #FBFAF8; border: 1px solid #ECEAE6; border-radius: var(--rounded-box); }

/* Status banner (sits ABOVE the price) — the platform's .banner (ui/_banner.html) in the bid
   states; the semantic variants (success/error/warning/info) are defined with the atom. The variant
   tints the surface, the icon disc and the title. Maps to _bid_status.html + _auction_ended.html. */
.banner--highest { background: #E6F0EE; }
.banner--highest .banner__icon { background: #37605D; }
.banner--highest .banner__title { color: #2D4F4D; }
.banner--won { background: #DDEFE5; }
.banner--won .banner__icon { background: #046B5C; }
.banner--won .banner__title { color: #046B5C; }
.banner--outbid { background: #FBE7E7; }
.banner--outbid .banner__icon { background: #C54A4A; }
.banner--outbid .banner__title { color: #A13E3E; }
.banner--ended { background: #ECECEC; }
.banner--ended .banner__icon { background: #5F6772; }
.banner--ended .banner__title { color: #5F6772; }
.banner--scheduled { background: #E7EEF4; }
.banner--scheduled .banner__icon { background: #5B7C99; }
.banner--scheduled .banner__title { color: #3C566B; }

/* Price block — "CURRENT BID / SOLD FOR / FIXED PRICE" label over the amount, both green 600. */
.bid-price-label { font-weight: 500; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #37605D; }
.bid-price { font-weight: 700; font-size: 40px; line-height: 44px; color: #37605D; margin-top: 4px; }

.bid-divider { height: 1px; background: #ECEAE6; border: 0; margin: 0; }

/* Meta: bids + ships-to on row 1, ends-in + ends-at on row 2 (won/ended collapse to one row).
   Reflow (R3): rows wrap as whole groups when narrow — the ships-to group drops below the bids
   count, the countdown drops below "Ends in" — but labels and the chip never break mid-word. */
.bid-meta { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.bid-meta__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.bid-meta__bids { font-weight: 500; color: #5B5B5B; white-space: nowrap; }
.bid-meta__ended { font-weight: 500; color: #7A7A7A; white-space: nowrap; }

/* A moment of an auction (templates/_moment.html, static/moments.js): the time with its zone and, under
   it, only where the visitor's clock differs, their own time, smaller and quieter. The dotted line says
   there is more on hover. */
/* ⚠️ The line wraps where room is short: in the slot card's meta row (nowrap) it ran 21 px past a
   phone's card and the page scrolled sideways (seen at 375, 2026-10-17). */
.moment { display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: top; min-width: 0; max-width: 100%; }
.moment time[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.moment__local { font-size: 12px; line-height: 16px; font-weight: 400; color: #6C717C; white-space: normal; }
.hero-meta__value .moment__local { color: rgba(255,255,255,.8); }
.bid-meta__ship { display: flex; align-items: center; gap: 6px; }
.bid-meta__ship-label { font-weight: 500; color: #7A7A7A; white-space: nowrap; }
.bid-meta__ends { display: flex; flex-direction: column; gap: 4px; }
.bid-meta__ends-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bid-meta__ends-label { font-weight: 500; color: #7A7A7A; white-space: nowrap; }
.bid-meta__endsat { font-weight: 400; font-size: 12px; color: #6C717C; }

/* Ships-to chip (closed). Opens the country dropdown; the open chip picks up the green tint. */
.ships-to { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 8px; cursor: pointer;
  background: #F1EFEA; border: 1px solid #ECEAE6; border-radius: 6px; font-weight: 600; font-size: 13px;
  color: #1F1E1E; white-space: nowrap; }
.ships-to svg { width: 13px; height: 13px; color: #7A7A7A; }
.ships-to[aria-expanded="true"] { background: #E6F0EE; border-color: #C7DDDA; color: #2D4F4D; }
.ships-to[aria-expanded="true"] svg { color: #2D4F4D; }

/* Ships-to dropdown (floating). Anchored to the chip's positioned wrapper (.ships-anchor). */
.ships-anchor { position: relative; }
.ships-dd { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: 300px;
  max-width: calc(100vw - 32px); background: #FFFFFF; border: 1px solid #DCDAD6; border-radius: 10px;
  padding: 6px; box-shadow: 0 12px 28px rgba(0,0,0,.16); display: flex; flex-direction: column; gap: 2px; }
.ships-dd__search { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #FBFAF8; border: 1px solid #ECEAE6; border-radius: 8px; }
.ships-dd__search svg { flex: none; width: 15px; height: 15px; color: #6C717C; }
.ships-dd__search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 13px; color: #1F1E1E; }
.ships-dd__list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.ships-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-size: 13px; color: #1F1E1E; text-align: left; }
.ships-dd__opt:hover { background: #F6F4F1; }
.ships-dd__opt-price { font-weight: 500; color: #6C717C; }
.ships-dd__opt[aria-selected="true"] { background: #E6F0EE; }
.ships-dd__opt[aria-selected="true"],
.ships-dd__opt[aria-selected="true"] .ships-dd__opt-price { font-weight: 600; color: #2D4F4D; }
.ships-dd__opt svg { flex: none; width: 15px; height: 15px; color: #2D4F4D; }
.ships-dd__more { padding: 6px 10px 4px; font-size: 12px; color: #6C717C; }

/* Bid-card foot: "How bidding works" link + SSE connection pill on opposite ends. */
.bid-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* What stands at the price besides it (R5; C7 "Am Los", products/_lot_facts.html): the seller's tax
   sentence, payment, import charges, the guarantee link, the lot's number — small, in the meta's grey. */
.lot-facts { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; color: #5B5B5B; }
.lot-facts__id { color: #7A7A7A; }

/* The bid dialog (R5; DESIGN_ALIGNMENT_PLAN S-C12): the platform's atoms inside DaisyUI's modal shell.
   Three steps swap in #bid-dialog-body (products/_bid_entry, _bid_confirm, _bid_result). */
.bid-dialog { display: flex; flex-direction: column; gap: 16px; }
.bid-dialog__min { font-size: 14px; line-height: 20px; color: #5B5B5B; }
.bid-dialog__step { display: flex; flex-direction: column; gap: 16px; }
.bid-dialog__text { font-size: 14px; line-height: 20px; color: #3A3A3A; }
.bid-dialog__note { font-size: 13px; line-height: 18px; color: #5B5B5B; }
.bid-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bid-dialog__actions .btn { flex: 1 1 160px; }
/* Under the buttons of the first step: "How bidding works", in a tab of its own (how_it_works.html). */
.bid-dialog__guide { text-align: center; }
/* The confirmation block directly above "Confirm bid" — set off as § 312j Abs. 2 BGB asks: a tinted box,
   the lot and what the bidder binds himself to (the commitment, the total) in the strong face. */
.bid-confirm { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #F6F4F1;
  border: 1px solid #DCDAD6; border-radius: 10px; font-size: 14px; line-height: 20px; color: #3A3A3A; }
.bid-confirm__line--lot, .bid-confirm__line--commit, .bid-confirm__line--total { font-weight: 600; color: #1F1E1E; }
.bid-confirm__line--max_room { font-size: 13px; line-height: 18px; color: #5B5B5B; }
/* After the bid the next possible bid stands above the buttons; the live minimum at the top steps aside. */
.bid-dialog:has(.bid-dialog__step--result) > .bid-dialog__min { display: none; }

/* A fold for the small print (15.10.: in the confirmation block and at the price of a lot). */
.fold { display: flex; flex-direction: column; gap: 4px; }
.fold__head { cursor: pointer; width: fit-content; font-size: 13px; line-height: 18px; color: #5B5B5B;
  text-decoration: underline; text-underline-offset: 2px; }
.fold[open] > .fold__head { margin-bottom: 2px; }

/* ---------- Seller card — Figma 2101:185 (full contact) / 2101:205 (slim strip) ---------- */
.seller-card { display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: #FBFAF8; border: 1px solid #ECEAE6; border-radius: var(--rounded-box); }
.seller-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: #FBFAF8; border: 1px solid #ECEAE6; border-radius: var(--rounded-box); }
.seller-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.seller-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: #E6F0EE; color: #2D4F4D; font-weight: 600; }
.seller-name { font-weight: 600; font-size: 16px; color: #1F1E1E; }
.seller-loc { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #6C717C; }
.seller-loc svg { flex: none; width: 14px; height: 14px; }
.seller-ask { font-size: 14px; line-height: 20px; color: #5B5B5B; }
.seller-negotiate { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6C717C; }
/* Wired PDP seller card (products/_seller_card.html, P5e): the identity row is a link to the
   storefront with a trailing chevron; hover tints the name + chevron green. */
.seller-id--link { text-decoration: none; color: inherit; }
.seller-id--link:hover .seller-name { color: #37605D; }
/* Identity row + trailing actions cluster (envelope for signed-out + chevron). The link fills the row
   so most of it stays clickable; the chevron sits outside the link now (a button can't nest in an <a>). */
.seller-head { display: flex; align-items: center; gap: 12px; }
.seller-head > .seller-id { flex: 1 1 auto; }
.seller-head__actions { flex: none; display: flex; align-items: center; gap: 4px; }
.seller-chev { flex: none; color: #B8BDC4; transition: color .15s; }
.seller-id--link:hover ~ .seller-head__actions .seller-chev { color: #37605D; }
/* Signed-out contact affordance: a discreet envelope icon (beside the chevron) with a hover tooltip
   (what it does) and a click-reveal sign-in hint — replaces the old full-width sign-in button. The
   popover is right-anchored so it opens leftward into the card, not off its right edge. */
.seller-contact { position: relative; display: inline-flex; }
.seller-contact__pop { position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 20;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 18px; white-space: nowrap;
  background: #FBFAF8; color: #5B5B5B; border: 1px solid #ECEAE6; box-shadow: 0 6px 20px rgba(31,30,30,.08); }

/* ---------- PDP slot card — Figma 246:330 (P5e): green-tinted "PART OF AUCTION SLOT" link ---------- */
.slot-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; color: inherit;
  text-decoration: none; background: #EEF4F2; border: 1px solid #C7DDDA; border-radius: var(--rounded-box);
  transition: background .15s, border-color .15s; }
.slot-card:hover { background: #E6F0EE; border-color: #37605D; }
.slot-card__disc { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 9999px; background: #DCE9E6; color: #37605D; }
.slot-card__disc svg { width: 26px; height: 26px; }
.slot-card__body { min-width: 0; }
.slot-card__kicker { font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #37605D; }
/* The title reads the headline step of a card's title (h3) from the preset's variables: 20/26 from
   1024 as drawn, 18/24 below it, like every headline. */
.slot-card__title { font-family: Baskervville, Georgia, serif; font-size: var(--mn-size-h3); line-height: var(--mn-line-h3); color: #1F1E1E;
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 7px; }
.slot-card__meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #6C717C; white-space: nowrap; }
.slot-card__meta-item svg { flex: none; width: 14px; height: 14px; color: #7A9B96; }
.slot-card__chev { flex: none; color: #7A9B96; }

/* ---------- PDP bidding-history card — Figma 246:330 (P5e) ---------- */
/* Card chrome (head / column labels / show-more) is STATIC; only .hist-list (#bid-history) is the
   SSE swap target. The show-more cap is pure CSS keyed on row position, so an innerHTML swap of the
   rows never resets it (§10.5 guardrail: the swap region stays untouched). */
/* <details>/<summary>: default-collapsed, no-JS-safe, no flash. Kill the native marker. */
.hist-card { background: #FBFAF8; border: 1px solid #ECEAE6; border-radius: var(--rounded-box); overflow: hidden; }
.hist-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 16px 20px; background: transparent; text-align: left; cursor: pointer; list-style: none; user-select: none; }
.hist-card__head::-webkit-details-marker { display: none; }
.hist-card__title { font-weight: 700; font-size: 18px; color: #1F1E1E; }
.hist-card__toggle { flex: none; color: #6C717C; transition: transform .2s; }
.hist-card:not([open]) .hist-card__toggle { transform: rotate(180deg); }
.hist-body { padding: 0 20px 12px; }
.hist-head, .hist-row { display: grid; grid-template-columns: 1.5fr 0.9fr 1.1fr; gap: 12px; align-items: baseline; }
.hist-head { padding: 6px 0 10px; font-weight: 600; font-size: 12px; letter-spacing: .6px;
  text-transform: uppercase; color: #9AA0A8; border-bottom: 1px solid #ECEAE6; }
.hist-row { padding: 12px 0; border-bottom: 1px solid #F1EFEB; font-size: 14px; }
.hist-list > .hist-row:last-child { border-bottom: 0; }
.hist-row__bidder { min-width: 0; color: #3A3A3A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-row__bid { font-weight: 500; color: #1F1E1E; white-space: nowrap; }
.hist-row__time { color: #6C717C; font-size: 13px; white-space: nowrap; }
.hist-row--you .hist-row__bidder, .hist-row--you .hist-row__bid { color: #37605D; font-weight: 600; }
.hist-auto { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9999px;
  background: #EFEDE9; color: #7A7A7A; font-size: 12px; font-weight: 500; vertical-align: 1px; }
.hist-empty { padding: 16px 0 4px; font-size: 14px; color: #6C717C; }
/* Show-more: cap the list to 5 rows; the label toggles the hidden checkbox to reveal the rest. */
.hist-expand { position: absolute; opacity: 0; pointer-events: none; }
.hist-list > .hist-row:nth-child(n+6) { display: none; }
.hist-expand:checked ~ .hist-list > .hist-row:nth-child(n+6) { display: grid; }
.hist-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 12px 0 2px; font-size: 13px; font-weight: 600; color: #37605D; cursor: pointer; }
.hist-more:hover { color: #2D4F4D; }
.hist-more__chev { transition: transform .2s; }
.hist-expand:checked ~ .hist-more .hist-more__chev { transform: rotate(180deg); }
.hist-expand:checked ~ .hist-more .hist-more__text { display: none; }
.hist-more__less { display: none; }
.hist-expand:checked ~ .hist-more .hist-more__less { display: inline; }
/* Hide show-more when there are ≤5 rows (live-safe: re-evaluated on each SSE swap via :has). */
.hist-body:not(:has(.hist-list > .hist-row:nth-child(6))) .hist-more { display: none; }

/* ---------- PDP layout — Figma 226:753 (P5b scaffold) ---------- */
/* Header cluster: view-count pill (green tint) + bare icon buttons (heart / share). */
.pdp-view-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px;
  background: #E6F0EE; color: #37605D; font-weight: 500; font-size: 12px; line-height: 18px; white-space: nowrap; }
.pdp-view-pill svg { width: 16px; height: 16px; }
.pdp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 9999px; color: #5B5B5B; transition: background .15s, color .15s; }
.pdp-icon-btn:hover { background: #F6F4F1; color: #1F1E1E; }
.pdp-icon-btn.is-heart:hover { color: #C54A4A; }
.pdp-icon-btn.is-heart.is-on { color: #C54A4A; }  /* saved: filled red heart (heart-filled sprite) */

/* Follow heart on the dark country/mineral hero (FAVOURITES_PLAN §11 Phase 1c): light glyph on a
   translucent disc so it reads over the cover photo; filled red when followed. */
.hero-heart { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  flex: none; border-radius: 9999px; color: #FBFAF8; background: rgba(0,0,0,.22);
  transition: background .15s, color .15s; }
.hero-heart:hover { color: #C54A4A; background: rgba(0,0,0,.32); }
.hero-heart.is-on { color: #C54A4A; }

/* Gallery: mobile = horizontal snap carousel with dots; desktop (lg) = vertical stack (Figma). */
.pdp-gallery__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pdp-gallery__track::-webkit-scrollbar { display: none; }
.pdp-gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1;
  border-radius: var(--rounded-box); overflow: hidden; background: #ECEAE6; }
.pdp-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The link that opens a photo in the lightbox (ui/_lightbox.html) covers its slide. */
.pdp-gallery__slide > .lightbox-link { position: absolute; inset: 0; }
.pdp-gallery__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; color: rgba(255,255,255,.85); pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.pdp-gallery__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.pdp-dot { width: 8px; height: 8px; border-radius: 9999px; background: #DCDAD6; transition: width .2s, background .2s; }
.pdp-dot.is-active { width: 20px; background: #37605D; }
@media (min-width: 1024px) {
  .pdp-gallery__track { flex-direction: column; overflow: visible; }
  .pdp-gallery__slide { flex: none; }
  .pdp-gallery__dots { display: none; }
}

/* ---------- Catalogue search (auctions/docs/DESIGN_ALIGNMENT_PLAN.md G2, D1 part 2) — the
   marketplace's one field for free text: the shell's header has none, its magnifier leads to the
   catalogue (products/index.html). The platform's field atom on a HULL, as in the magazine's search
   row of the issue overview: `.input .input-bordered` give the hull its height (48), border, radius
   and the green edge while the field inside has the focus, so the bare <input> draws no ring of its
   own. The magnifier is the button that sends: written after the field (the order of the Tab key),
   shown before it, a target of 36 for a finger. Full width on a phone, 480 from 768. Colours of the
   preset only. ---------- */
.cat-search__field { gap: 4px; padding-left: 6px; padding-right: 0; }
.cat-search__input { flex: 1; align-self: stretch; min-width: 0; padding-right: 12px; background: transparent; }
.cat-search__input:focus { outline: none; }
.cat-search__submit { order: -1; flex: none; display: inline-flex; padding: 9px; border-radius: 9999px;
  color: var(--mn-gray-600); }
.cat-search__submit svg { width: 18px; height: 18px; }
.cat-search__submit:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (hover: hover) { .cat-search__submit:hover { color: var(--mn-gray-900); } }
@media (min-width: 768px) { .cat-search { max-width: 480px; } }

/* ---------- Catalogue filter bar — Figma 358:864 (P6a). Horizontal dropdown-pills replace the
   sidebar. Apply-on-change (no Save button, E9); a green count-badge marks a selected pill, active
   selections also show as removable chips below. Panels reuse the .ships-dd visual language. The
   green tint on a pill means "open", not "has selection" (the badge carries that). ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter-bar__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar__meta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.filter-anchor { position: relative; }

.filter-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #FFFFFF;
  border: 1px solid #DCDAD6; border-radius: 9999px; font-size: 14px; font-weight: 500; color: #3A3A3A;
  cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.filter-pill:hover { border-color: #B8BDC4; }
.filter-pill[aria-expanded="true"] { background: #E6F0EE; border-color: #C7DDDA; color: #2D4F4D; }
.filter-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
  height: 18px; padding: 0 5px; border-radius: 9999px; background: #37605D; color: #FFFFFF;
  font-size: 12px; font-weight: 600; line-height: 1; }
.filter-pill__chev { flex: none; color: #6C717C; transition: transform .2s; }
.filter-pill[aria-expanded="true"] .filter-pill__chev { transform: rotate(180deg); color: #2D4F4D; }

.filter-count { font-size: 13px; color: #6C717C; white-space: nowrap; }
.filter-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #6C717C; white-space: nowrap; }

/* Active-filter chips (row under the bar). */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px;
  background: #E6F0EE; border: 1px solid #C7DDDA; border-radius: 9999px; font-size: 13px; color: #2D4F4D; }
.filter-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 9999px; color: #4B5B55; cursor: pointer; background: transparent; }
.filter-chip__x:hover { background: #D2E4DF; color: #2D4F4D; }
.filter-chip__x svg { width: 13px; height: 13px; }
.filter-clear { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500;
  color: #6C717C; cursor: pointer; background: transparent; }
.filter-clear:hover { color: #2D4F4D; }
.filter-clear svg { width: 13px; height: 13px; }

/* Dropdown panel — floats under its pill (.filter-anchor is the positioned wrapper). */
.filter-dd { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: 244px;
  max-width: calc(100vw - 32px); background: #FFFFFF; border: 1px solid #DCDAD6; border-radius: 10px;
  padding: 6px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.filter-dd--right { left: auto; right: 0; }
.filter-dd__list { display: flex; flex-direction: column; gap: 2px; max-height: 264px; overflow-y: auto; }
.filter-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: 14px; color: #1F1E1E; }
.filter-opt:hover { background: #F6F4F1; }
.filter-opt__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-opt__count { flex: none; color: #9AA0A8; font-size: 12px; }
.filter-dd__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 6px 4px; }
.filter-dd__clear { font-size: 13px; font-weight: 500; color: #6C717C; cursor: pointer; margin-right: auto; }
.filter-dd__clear:hover { color: #2D4F4D; }

/* Price dropdown: two currency fields + a decorative range track (real control = the two inputs). */
.filter-price { display: flex; flex-direction: column; gap: 12px; padding: 8px 8px 4px; }
.filter-price__row { display: flex; align-items: flex-end; gap: 10px; }
.filter-price__field { flex: 1; min-width: 0; }
.filter-price__lbl { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #9AA0A8; margin-bottom: 4px; }
.filter-price__inp { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #FBFAF8;
  border: 1px solid #ECEAE6; border-radius: 8px; }
.filter-price__inp span { color: #6C717C; font-size: 13px; }
.filter-price__inp input { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: #1F1E1E; }
.filter-price__dash { color: #B8BDC4; padding-bottom: 8px; }
.filter-price__track { position: relative; height: 4px; border-radius: 9999px; background: #E6E3DE; margin: 2px 4px 0; }
.filter-price__track-fill { position: absolute; height: 100%; border-radius: 9999px; background: #37605D; }
.filter-price__track-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 9999px;
  background: #FFFFFF; border: 2px solid #37605D; transform: translate(-50%, -50%); }

.filter-dd--wide { width: 300px; }

/* ---- Filter bar → mobile bottom-sheet (P6e Task 3). Desktop & tablet keep the inline bar; below md a
   single "Filters" button opens the SAME bar (one input set, just reflowed) as a bottom-sheet, so the
   #filter-form / htmx contract is untouched. All show/hide is media-query based (NOT Tailwind display
   utilities) — components.css loads after tailwind.css and would otherwise win the display cascade. ---- */
.filter-trigger { display: none; }
.filter-sheet { display: contents; }              /* desktop: no box → the bar renders inline as before */
.filter-sheet__head, .filter-sheet__foot { display: none; }
.filter-backdrop { display: none; }

@media (max-width: 767px) {
  /* Trigger (mirrors a filter pill) + its active-count badge. */
  .filter-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #FFFFFF;
    border: 1px solid #DCD9D3; border-radius: 9999px; font-size: 14px; font-weight: 600; color: #3A3A3A; cursor: pointer; }
  .filter-trigger svg { flex: none; width: 18px; height: 18px; color: #6C717C; }
  .filter-trigger__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9999px; background: #37605D; color: #FFFFFF; font-size: 12px; font-weight: 700; }

  /* Backdrop + sheet shell. Hidden (translated down) until Alpine adds .is-open. */
  .filter-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.4); }
  .filter-sheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    max-height: 85vh; background: #FBFAF8; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18);
    transform: translateY(100%); transition: transform .22s ease; }
  .filter-sheet.is-open { transform: translateY(0); }
  .filter-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
    border-bottom: 1px solid #ECEAE6; }
  .filter-sheet__title { font-size: 16px; font-weight: 700; color: #1F1E1E; }
  .filter-sheet__close { display: inline-flex; padding: 4px; color: #6C717C; cursor: pointer; }
  .filter-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 18px 12px; }
  .filter-sheet__foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #ECEAE6; }
  .filter-sheet__foot .filter-clear { white-space: nowrap; }
  .filter-sheet__foot .btn { flex: 1; }

  /* Reflow the bar: vertical; pills become full-width section rows; dropdowns become inline accordion
     panels (same Alpine `open` state drives them — no absolute positioning inside the sheet). */
  .filter-bar { flex-direction: column; align-items: stretch; gap: 0; }
  .filter-bar__pills { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .filter-bar__meta { margin-left: 0; border-top: 1px solid #ECEAE6; }
  .filter-bar__pills > .filter-anchor + .filter-anchor { border-top: 1px solid #ECEAE6; }
  .filter-pill { width: 100%; padding: 14px 4px; border: 0; border-radius: 0; background: transparent; font-size: 15px; }
  .filter-pill .filter-pill__chev { margin-left: auto; }
  .filter-pill[aria-expanded="true"] { background: transparent; color: #1F1E1E; }
  .filter-dd, .filter-dd--right, .filter-dd--wide { position: static; width: auto; border: 0; box-shadow: none;
    padding: 0 4px 12px; }
  .filter-sort { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 12px 4px 0;
    font-size: 13px; color: #6C717C; }
  .filter-dd__foot { justify-content: flex-start; }
}

/* ---------- Context-page heroes — Figma 321:2893 (slot) / 321:2892 (seller) / 194:113 (country),
   P6b. Dark hero (slot + country) = near-black with a photo faded in on the right; light hero
   (seller) = warm off-white with a stats bar. Widths are fluid (R2); the media hides on narrow. ---- */
/* NB: override DaisyUI's own `.hero` component, which is `display:grid; place-items:center` with
   `.hero>*{grid-column-start:1;grid-row-start:1}` — that stacks ALL children into one centred cell.
   For our heroes children must flow normally (seller: content then stats bar), so force block flow
   and undo the grid placement. Without this the stats bar floats centred over the seller content. */
.hero { position: relative; display: block; border-radius: var(--rounded-box); overflow: hidden; }
.hero > * { grid-column-start: auto; grid-row-start: auto; }
/* Dark-hero colours are driven by two custom properties so admins can theme a slot / mineral hero
   from the editor (inline `--hero-bg` / `--hero-glow` on the .hero element). Defaults reproduce the
   original design exactly; the glow's opacity stays baked into the gradients below (see color-mix). */
.hero--dark { --hero-bg: #1C1B1A; --hero-glow: #967854; background: var(--hero-bg); color: #F4F2EF; }
/* The light hero (seller) is the warm section tone #F9F7F3 (= gray.75, E18). On the now-white page
   (P1b) it reads as a distinct warm panel; the hairline border + soft shadow keep the card definition
   the design shows — it's not full-bleed like the dark heroes. */
.hero--light { background: #F9F7F3; color: #1F1E1E; border: 1px solid #ECEAE6; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
/* Content is inset to the page grid (design: hero is full-bleed, content aligns to the x=160/1440
   ≈ 11% column). Text is allowed to run over the faded photo — the uploaded image carries the
   darkness/transparency where text sits — so we only widen the left inset, not constrain the width. */
.hero__inner { position: relative; z-index: 1; padding: 48px 80px; max-width: 660px; }
.hero__media { position: absolute; inset: 0 0 0 auto; width: 42%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Two dark-hero variants (slot). --photo: content stacked left, photo faded in right. --split (no
   image): content splits into two columns to fill the width (lead left, meta+countdown right). */
.hero--photo .hero__inner { max-width: 56%; }
/* --photo desktop: the specimen owns the right half and rises out of the bottom edge instead of
   sitting centred. The media box carries the stone's aspect ratio and is pushed down by half its own
   height (translateY 50%), so its bottom half falls below the tile and only the top half shows; the
   hero's overflow:hidden clips the rest. `.hero__inner` is untouched — text runs over the stone's
   transparent left margin as before. Drop translateY toward ~33% to reveal more of the stone. */
.hero--photo .hero__media { inset: auto 0 0 auto; width: 50%; height: auto;
  aspect-ratio: 4 / 5; transform: translateY(33%); }
.hero--photo .hero__media img { object-fit: contain; object-position: center; }
/* The --photo specimen is a transparent cut-out, so the shared left→right scrim would paint a dark band
   with a hard edge at the media box and clash with the glow behind the stone — drop it at all widths. */
.hero--photo .hero__media::after { display: none; }
/* --cover (country/origin): the photo fills the whole tile (full-bleed) at every width, overriding
   the base right-column geometry. On desktop the shared dark left→right scrim (.hero--dark ::after)
   lifts the text; the mobile scrim is softened in the media query below. */
.hero--cover .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
.hero--cover .hero__media img { object-fit: cover; object-position: center; }
.hero--split .hero__inner { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: start; }
.hero--split .hero__aside { padding-top: 4px; }
.hero--dark .hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--hero-bg) 2%, transparent 65%); }
/* The hero image's credit line (2026-10-15, ui/_hero_credit.html): small at the image's bottom right,
   above the scrim — in the hero's media as in the figure of a locality page. */
.hero__credit { position: absolute; right: 10px; bottom: 6px; z-index: 2; max-width: 80%; margin: 0;
  font-size: 12px; line-height: 16px; text-align: right; color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.hero--dark .hero__eyebrow { color: #CBDB8A; }
.hero--light .hero__eyebrow { color: #37605D; }
/* The title stands on a headline step of the preset (tailwind.base.js), and the page's template names
   it: `font-serif text-hero` on the home page, `text-h1` on a context page, `text-h2` on a tile of
   the carousel. The step in the second rule is for a head whose markup names none (the seller's,
   the samples of the kitchen sink) and is written without weight (`:where`): a step named in the
   markup wins, although this sheet loads after the build. A step is smaller below 1024 by itself —
   no size per width here (it was 44 px, 32 on a phone, at a line of 1.08).
   `text-wrap: balance`: a title that needs two lines breaks into two of about one length instead
   of leaving its last word alone on the second. */
.hero__title { font-family: Baskervville, Georgia, serif; margin-top: 12px; text-wrap: balance; }
:where(.hero__title) { font-size: var(--mn-size-h1); line-height: var(--mn-line-h1); }
/* Follow heart sits inline beside the hero title, not pushed to the wide inner's right edge — with a
   cover/photo hero that edge is mid-page and detaches the heart from the (often shorter) text. The row
   carries the title's top gap so the heart stays vertically centred on the title. (FAVOURITES_PLAN §1c) */
.hero__follow-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.hero__follow-row .hero__title { margin-top: 0; min-width: 0; }
.hero__sub { margin-top: 12px; font-size: 15px; line-height: 22px; max-width: 30rem; }
.hero--dark .hero__sub { color: #F4F2EF; }
.hero--light .hero__sub { color: #5B5B5B; }
/* Clamp a long editorial/sale description so the hero doesn't grow into a wall of text (slot page, a
   dealer's page). A safety net, not a measure: about the same 250 characters at every width — six lines
   on a phone, four from 768. It was three everywhere, and a phone cut the fourth line of a sale's
   ordinary three-sentence text (user, 2026-10-17: "dann … gestalten sie etwas moderater"). */
.hero__sub--clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) {
  .hero__sub--clamp { -webkit-line-clamp: 4; }
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 9999px;
  font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.hero-pill svg { width: 14px; height: 14px; }
.hero-pill--light    { background: #F1EFEA; color: #1F1E1E; }

/* Meta row — label over value, thin vertical dividers between columns. The divider is drawn in the
   left column-gap via ::before; on a wrapped row (mobile) the leading item's rule sits at/left-of the
   meta's edge where overflow:hidden clips it — so dividers survive wrapping with no stray line. */
.hero-meta { display: flex; flex-wrap: wrap; overflow: hidden; column-gap: 44px; row-gap: 16px; margin-top: 22px; }
.hero-meta__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.hero-meta__item::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: -22px;
  border-left: 1px solid rgba(244,242,239,.28); }
.hero-meta__label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #F4F2EF; }
.hero-meta__label svg { width: 14px; height: 14px; }
.hero-meta__label--accent { color: #CBDB8A; }
.hero-meta__value { font-size: 14px; font-weight: 600; color: #FFFFFF; }
/* Light hero text keeps a soft dark halo — invisible over the solid-dark areas, lifts the text off
   the specimen photo where it shows through (mobile full-bleed background / desktop faded edge). */
.hero--dark .hero__eyebrow, .hero--dark .hero__title, .hero--dark .hero__sub,
.hero--dark .hero-meta__label, .hero--dark .hero-meta__value { text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* Countdown boxes (slot). */
.cd-boxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cd-box { min-width: 58px; padding: 10px 8px; border-radius: 6px; background: #423F3D; text-align: center; }
.cd-box__n { font-size: 28px; font-weight: 500; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.cd-box__l { margin-top: 5px; font-size: 12px; letter-spacing: .3px; color: #ADA9A4; }
.cd-ended { display: inline-block; margin-top: 22px; font-size: 14px; color: #ADA9A4; }

/* Locality chips (country). */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero-chip { padding: 6px 14px; border-radius: 9999px; border: 1px solid rgba(244,242,239,.28);
  color: #F4F2EF; font-size: 13px; text-decoration: none; transition: background .15s; }
.hero-chip:hover { background: rgba(244,242,239,.09); }

/* Seller hero: avatar + body + photo (grid), stats bar as an inset card at the bottom. */
.hero-seller { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: start; padding: 40px 40px 44px; }
.hero-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 104px;
  border-radius: 12px; background: #E6E3DE; color: #37605D; font-family: Baskervville, Georgia, serif; font-size: 44px;
  overflow: hidden; }
/* Dealer logo fills the avatar slot (Thumbor already square-crops it). */
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Photo fills the top block's height (matches the text column) so the stats bar sits cleanly below. */
.hero-seller__photo { width: 300px; max-width: 34vw; align-self: stretch; min-height: 190px; border-radius: 10px; overflow: hidden; }
.hero-seller__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-stats { display: flex; flex-wrap: wrap; background: #FFFFFF; margin: 0 20px 20px;
  border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.hero-stat { flex: 1 1 180px; padding: 18px 24px; }
.hero-stat + .hero-stat { border-left: 1px solid #ECEAE6; }
.hero-stat__label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8A8A8A; }
.hero-stat__label svg { width: 14px; height: 14px; }
.hero-stat__value { margin-top: 4px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: #4A4A4A; }
/* Tablet & down (≤ lg): a 4-across stats strip would wrap 3+1 — at 768 the page is 720 wide (the
   shell's grid; it was Tailwind's `container`, 720 across the whole band), and 4×180px doesn't fit
   beside the card's margins. Fall to a 2×2 grid with an inner
   divider cross (nth-child: col-2 gets a left border, row-2 gets a top border). Desktop keeps the
   4-across flex row with its left dividers (above). */
@media (max-width: 1023px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-stat + .hero-stat { border-left: 0; }
  .hero-stat:nth-child(2n) { border-left: 1px solid #ECEAE6; }
  .hero-stat:nth-child(n + 3) { border-top: 1px solid #ECEAE6; }
}

/* ---- Tablet & down (< lg, catches iPad portrait): the dark hero (slot/country) turns its side
   photo into a full-bleed BACKGROUND. Content stacks over a vertical dark→clear fade — near-black at
   the top for legibility, the specimen showing through and cropped at the bottom, the countdown
   sitting over it (matches Home-Mobile 412:1548). Also relaxes the desktop left inset so it isn't
   cramped on a tablet. ---- */
@media (max-width: 1023px) {
  .hero__inner, .hero--photo .hero__inner { max-width: none; padding: 36px 40px; }
  /* Cutout treatment: the tile background brightens toward the specimen (a warm glow low-centre),
     and the media is a transparent PNG cutout of the stone sitting in that glow — no cover-crop, no
     dark veil. Upload a stone-on-transparent PNG; a rectangular photo placeholder won't show it. */
  .hero--dark { background:
    radial-gradient(125% 60% at 50% 112%, color-mix(in srgb, var(--hero-glow) 55%, transparent) 0%, transparent 62%), var(--hero-bg); }
  /* Cutout pinned into the bottom-right corner, width-independent by construction: the media box is
     anchored to that corner and carries the stone's own aspect ratio (so `contain` fills it without
     extra letterboxing), then `translate(50%,50%)` shifts it by half its own size — putting the
     IMAGE CENTRE exactly on the container's bottom-right corner. Only the stone's top-left rises into
     the tile; the hero's overflow:hidden clips the rest. Size is the single `width:%` knob; because
     the framing is defined against the corner (not a fixed scale) it holds at every viewport width. */
  .hero--photo .hero__media { inset: auto 0 0 auto; width: 185%; height: auto;
    aspect-ratio: 4 / 5; transform: translate(50%, 50%); }
  .hero--photo .hero__media img { object-fit: contain; object-position: center; }
  /* Country (full-bleed): no mobile-specific scrim — the shared base .hero--dark .hero__media::after
     gradient already darkens the photo enough for the text. */
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 767px) {
  .hero__inner, .hero--photo .hero__inner { padding: 24px; }
  .hero-seller { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .hero-seller__photo { display: none; }
}

/* ---- A head as a BAND of the page (home, auction, country, mineral). The base .hero stays a rounded
   card, so it can be used as one (the slot tile, the seller's head, the samples of the kitchen sink).
   On these four pages it is a band of the shell's page grid instead: the page switches the grid's
   version with bands on (`shell-page--bands`), the head is marked `shell-band` and so runs from edge
   to edge of the window, and its content stands in a `shell-content` — on the same 1120 and behind
   the same side padding as the page below it and the header above it (the platform's shell.css).
   `.hero--band` is what the head itself changes for that: square corners, and no side padding of
   its own inside the grid's column. The taller padding above and below keeps the wide band from
   reading as a thin strip.
   (Until 2026-10-13 the head broke out of a centred container by itself: a full viewport width
   with a negative margin, the container's steps copied by hand, and a clip on the body against the
   scrollbar's width, which that unit counts in. All three are gone with the shell's grid.) ---- */
.hero--band { border-radius: 0; }
.hero--band .hero__inner { padding-inline: 0; padding-block: 64px; }
@media (max-width: 1023px) { .hero--band .hero__inner { padding-block: 48px; } }
@media (max-width: 767px)  { .hero--band .hero__inner { padding-block: 32px; } }
/* Home head: room below the button for the trust bar, which lies 34 over the band's lower edge (see
   .trust-bar below) — at every width the band's own padding plus 40. ⚠️ AFTER the three rules above,
   and with one class more than they carry: the rule for narrow widths used to stand later and took
   this room away again, so that on a phone the bar covered the lower edge of the button. */
.hero--band.hero--home .hero__inner { padding-bottom: 104px; }
@media (max-width: 1023px) { .hero--band.hero--home .hero__inner { padding-bottom: 88px; } }
@media (max-width: 767px)  { .hero--band.hero--home .hero__inner { padding-bottom: 72px; } }

/* ---- Home head with a turning stone (2026-10-17, index.html, `.hero__film`). The film is cut out onto
   black, so the band is black at every width (no glow); the film's edges fade out a little, so that
   where a browser draws the film's black a shade off the page's black, no edge shows. The stone stands
   at the right end of the content, on the band's lower edge, as tall as the band; the words lie over
   it (`.hero__inner` has a z-index) with a shadow where they cross the stone. Below 1024 the words
   keep to the left part; on a phone the stone comes in from the right edge, cut by it. The box has the
   amethyst's ratio (800 × 724); a wider film (fluorite, quartz) stands on its lower edge, the black
   above it is the band's. Like every head's picture, the film is the band's own child, before its
   `shell-content`; its right edge is that content's (1120 in the middle, or the shell's padding). ---- */
.hero--dark.hero--film { --hero-bg: #000; background: #000; }
.hero__film { position: absolute; right: max(var(--shell-pad), calc((100% - 1120px) / 2)); bottom: 0;
  height: 100%; aspect-ratio: 800 / 724; }
.hero__film video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent),
              linear-gradient(180deg, transparent, #000 5%);
  mask-composite: intersect; }
.hero--film .hero__title, .hero--film .hero__sub { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75); }
@media (max-width: 1023px) { .hero--film .hero__inner { max-width: 60%; } }
@media (max-width: 767px) {
  .hero--film .hero__inner { max-width: 74%; }
  .hero__film { right: 0; transform: translateX(34%); }
}

/* Warm glow behind the cut-out specimen on the --photo hero (mineral / slot-with-image). On mobile it
   already comes from the .hero--dark rule in the max-width block above; this brings the same glow to
   desktop, positioned behind the bottom-right stone instead of bottom-centre. */
@media (min-width: 1024px) {
  .hero--photo.hero--dark { background:
    radial-gradient(85% 120% at 77% 50%, color-mix(in srgb, var(--hero-glow) 50%, transparent) 0%, transparent 62%), var(--hero-bg); }
}

/* ---------- Home trust bar (P6c) — a white row of four reassurances under the home hero: two live
   counters (auctions / fixed-price offers) + two trust statements. Equal columns with hairline
   dividers; wraps to a 2×2 grid on narrow screens (dividers dropped there). ---------- */
/* Sits HALF over the home hero: pulled up by ~half its own height (hero has no bottom margin), lifted
   above the hero with position/z-index. The hero's extra bottom image (.hero--home) gives it room. */
.trust-bar { position: relative; z-index: 2; margin-top: -34px; display: flex; flex-wrap: wrap;
  background: #FBFAF8; border: 1px solid #ECEAE6; border-radius: var(--rounded-box);
  box-shadow: 0 10px 30px rgba(0,0,0,.08); overflow: hidden; }
.trust-item { flex: 1 1 220px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 24px; }
.trust-item + .trust-item { border-left: 1px solid #ECEAE6; }
.trust-item svg { width: 24px; height: 24px; color: #37605D; flex: none; }
.trust-item__text { font-size: 14px; color: #4A4A4A; line-height: 1.3; }
.trust-item__num { font-weight: 700; color: #1F1E1E; }
@media (max-width: 1023px) {
  .trust-item { flex-basis: 45%; justify-content: flex-start; }
  .trust-item + .trust-item { border-left: 0; }
}

/* ---------- Home slot carousel (P6d) — a horizontal snap-scrolling track of the currently-active
   auction slots; the next tile peeks at the edge. Each tile is a dark card with the 4-box countdown
   as the focus, linking to the slot page. ---------- */
/* overflow-x:auto also clips overflow-y, so the top/bottom padding gives the tiles' hover shadow room
   (else it's cut off a few px below the card). The section's own margin is trimmed to compensate. */
.slot-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 8px 0 32px; scrollbar-width: thin; }
/* Each tile IS the shared slot-hero card (.hero hero--dark [--photo]) at carousel scale — ~two product
   cards wide, the next peeking. Overrides trim the full-hero padding/type so it reads as a card. */
.slot-tile { scroll-snap-align: start; flex: 0 0 540px; max-width: 86vw; min-height: 240px;
  transition: box-shadow .15s; }
.slot-tile:hover { box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.slot-tile .hero__inner { padding: 26px 30px; }
/* The tile's title is a section's step (the template says `text-h2`; this is the step for a tile
   whose markup names none — see .hero__title; it was 26 px). */
.slot-tile .hero__title { margin-top: 8px; }
:where(.slot-tile .hero__title) { font-size: var(--mn-size-h2); line-height: var(--mn-line-h2); }
.slot-tile .cd-boxes, .slot-tile .hero-meta { margin-top: 16px; }
/* Compact countdown so all four boxes stay on one row inside the narrow --photo content column: the
   column is 242 wide (56 % of the tile's 540, less its padding), the row 239 — "Minutes" and
   "Seconds" are wider than the least width, and since their labels are 12 px instead of 11 a box
   has 4 beside its label instead of 6 (with 6 the fourth box went to a second row). */
.slot-tile .cd-box { min-width: 50px; padding: 8px 4px; }
.slot-tile .cd-box__n { font-size: 23px; }
/* Tiles frame the cut-out a touch higher than the full detail hero (translateY 20% vs 33%) and keep the
   desktop card geometry at every width — the mobile full-hero corner treatment (width 185%) would blow
   the stone up inside a card. The detail-page hero (auctions/slot.html) keeps its 33%. */
.slot-tile.hero--photo .hero__media { inset: auto 0 0 auto; width: 50%; height: auto; aspect-ratio: 4 / 5; transform: translateY(20%); }
.slot-tile.hero--photo .hero__inner { max-width: 56%; }
/* Pagination dots (P6e T2). Same look as the PDP gallery's .pdp-dot, but its own container so it stays
   visible at every width (the PDP one hides at lg). Pulled up into the track's 32px hover-shadow gutter. */
.slot-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: -16px; }
.slot-dot { width: 8px; height: 8px; border-radius: 9999px; background: #DCDAD6; transition: width .2s, background .2s; }
.slot-dot.is-active { width: 20px; background: #37605D; }

/* ---------- How bidding works (how_it_works.html; Figma 5619:9678 at 1440, 5619:9680 at 402, variant A
   "Liste", chosen 2026-10-17; auctions/docs/HOW_BIDDING_WORKS_PLAN.md). The auction rules in eight
   steps on the reading column of the platform's text pages (666, the magazine's `--mag-prose-column`):
   the number of each step in a ring, a line down to the next. From 1024 the rings hang in the margin
   left of the column, so that head, text, table and the box at the end begin on one line, and the
   column stands in the middle of the grid; below 1024 the rings stand in the flow and everything
   takes the grid's width. Built in "Stufe C": the step's title on the step of a section (`text-h2`
   in the markup), the running text 17/26 as on the text pages, 16/24 on a phone. ---------- */
.guide-head { background: var(--mn-gray-75); padding-top: 28px; padding-bottom: 28px; }
.guide-lead { margin-top: 8px; font-size: 17px; line-height: 26px; color: var(--mn-gray-700); }
.guide { --guide-mark: 32px; --guide-mark-gap: 14px; padding-top: 32px;
  font-size: 16px; line-height: 24px; color: var(--mn-gray-800); }
.guide a { color: var(--mn-green-500); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
.guide a:hover { color: var(--mn-green-700); }
.guide strong { font-weight: 600; color: var(--mn-gray-900); }
.guide-steps { list-style: none; margin: 0; padding: 0; }
.guide-step { display: grid; grid-template-columns: var(--guide-mark) minmax(0, 1fr); column-gap: var(--guide-mark-gap); }
.guide-step__mark { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.guide-step:not(:last-child) .guide-step__mark::after { content: ""; flex: 1; width: 1px; background: var(--mn-gray-300); }
.guide-step__number { display: grid; place-items: center; flex: none; width: var(--guide-mark); height: var(--guide-mark);
  border: 1.5px solid var(--mn-green-600); border-radius: 9999px; background: var(--mn-surface);
  color: var(--mn-green-700); font-size: 14px; line-height: 20px; font-weight: 600; }
.guide-step__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 2px; padding-bottom: 32px; }
.guide-step:last-child .guide-step__body { padding-bottom: 0; }
/* The increments: a table in a card, the increment right-aligned in figures of one width. */
.guide-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
  border: 1px solid var(--mn-border-card); border-radius: var(--rounded-box); background: var(--mn-surface); }
.guide-table th { padding: 10px 16px; background: var(--mn-gray-75); text-align: left;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--mn-gray-700); }
.guide-table td { padding: 11px 16px; border-top: 1px solid var(--mn-gray-200); }
.guide-table th:last-child, .guide-table td:last-child { text-align: right; white-space: nowrap; }
.guide-table td:last-child { font-weight: 600; color: var(--mn-gray-900); font-variant-numeric: tabular-nums; }
/* The example of step 4, set off in the green tint. Under its sentence the three amounts at a glance:
   on a phone three rows of one list, the last one (the bid for you) in green; from 640 three cards
   with an arrow between them. */
.guide-example { display: flex; flex-direction: column; gap: 16px; padding: 16px;
  background: var(--mn-green-50); border: 1px solid var(--mn-green-200); border-radius: var(--rounded-box); }
.guide-example__steps { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--mn-gray-300); border-radius: 8px; background: var(--mn-surface); }
.guide-example__arrow { display: none; }
.guide-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.guide-chip + .guide-example__arrow + .guide-chip { border-top: 1px solid var(--mn-gray-200); }
.guide-chip__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mn-gray-700); }
.guide-chip__amount { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--mn-gray-900); font-variant-numeric: tabular-nums; }
.guide-chip--you { background: var(--mn-green-600); }
.guide-chip--you .guide-chip__label { color: var(--mn-green-100); }
.guide-chip--you .guide-chip__amount { color: var(--mn-surface); }
/* The two marks of step 5, as the lot shows them. */
.guide-marks { display: flex; flex-wrap: wrap; gap: 8px; }
/* The box at the end: the rules themselves, and where to ask. */
.guide-rules { display: flex; gap: 12px; margin-top: 28px; padding: 16px; color: var(--mn-gray-800);
  background: var(--mn-gray-50); border: 1px solid var(--mn-border-card); border-radius: var(--rounded-box); }
.guide-rules > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--mn-gray-700); }
.guide-rules__mail { margin-top: 4px; color: var(--mn-gray-700); }
@media (min-width: 640px) {
  .guide-example { padding: 20px 24px; }
  .guide-example__steps { flex-direction: row; align-items: center; gap: 10px;
    overflow: visible; border: 0; border-radius: 0; background: none; }
  .guide-example__arrow { display: flex; color: var(--mn-gray-600); }
  .guide-example__arrow svg { width: 18px; height: 18px; }
  .guide-chip, .guide-chip + .guide-example__arrow + .guide-chip { flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 2px; width: 128px; padding: 10px 14px;
    border: 1px solid var(--mn-gray-300); border-radius: 8px; background: var(--mn-surface); }
  .guide-chip + .guide-example__arrow + .guide-chip.guide-chip--you { border-color: var(--mn-green-600); background: var(--mn-green-600); }
  .guide-chip__label { font-size: 12px; line-height: 16px; }
  .guide-chip__amount { font-size: 22px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .guide-head { padding-top: 40px; padding-bottom: 40px; }
  .guide-column { max-width: 666px; margin-left: auto; margin-right: auto; }
  .guide-lead { margin-top: 12px; font-size: 18px; line-height: 28px; }
  .guide { --guide-mark: 36px; --guide-mark-gap: 20px; padding-top: 48px; font-size: 17px; line-height: 26px; }
  .guide-steps { max-width: calc(666px + 2 * (var(--guide-mark) + var(--guide-mark-gap)));
    margin-left: auto; margin-right: auto; padding-right: calc(var(--guide-mark) + var(--guide-mark-gap)); }
  .guide-step__number { font-size: 15px; }
  .guide-step__body { gap: 14px; padding-bottom: 40px; }
  .guide-rules { max-width: 666px; margin: 40px auto 0; padding: 20px 24px; gap: 16px; font-size: 16px; line-height: 24px; }
  .guide-rules > svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   P7 · Cart + Checkout (Figma 319:520 / 319:736)
   Two-column pages: content left, a read-only Order Summary right. The summary,
   the yellow auction box and the trust list are shared between both screens.
   ========================================================================== */

/* Page grid — content + 360px summary; stacks below lg (summary drops under, R4). */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1024px) { .co-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } }

/* Title meta row: "4 Items · 2 Sellers · Auction Purchase" with vertical rules between items. */
.co-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: #6C717C;
  font-size: 14px; margin-top: 6px; }
.co-meta__item { display: inline-flex; align-items: center; gap: 8px; }
.co-meta__item + .co-meta__item { padding-left: 20px; border-left: 1px solid #DCD8D1; }
.co-meta__item svg { width: 16px; height: 16px; color: #8A8A8A; }

/* --- Cart: one card per (dealer, currency) group ------------------------- */
.co-group { background: #fff; border: 1px solid #E7E3DD; border-radius: var(--rounded-box); overflow: hidden; }
.co-group + .co-group { margin-top: 24px; }
.co-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; font-weight: 700; }
.co-group__head-title { display: inline-flex; align-items: center; gap: 10px; }
.co-group__head svg { width: 22px; height: 22px; color: #37605D; }
.co-group__count { font-weight: 400; font-size: 14px; color: #8A8A8A; }
.co-group__items { padding: 0 24px; }

/* Item row: image · pills+title+location · price+remove. */
.co-line { display: flex; gap: 16px; padding: 16px 0; align-items: flex-start; }
.co-line + .co-line { border-top: 1px solid #EFECE7; }
.co-line__img { width: 116px; height: 116px; flex: none; border-radius: 8px; object-fit: cover; background: #ECEAE6; }
.co-line__img-empty { display: flex; align-items: center; justify-content: center; color: #C3BEB5; }
.co-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.co-line__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.co-line__title { font-weight: 600; }
.co-line__loc { display: inline-flex; align-items: center; gap: 6px; color: #6C717C; font-size: 14px; min-width: 0; }
.co-line__loc svg { width: 16px; height: 16px; flex: none; }
.co-line__right { display: flex; align-items: center; gap: 12px; flex: none; }
.co-line__price { font-weight: 700; font-size: 18px; white-space: nowrap; }
.co-remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid #E2DED7; border-radius: 8px; color: #8A8A8A; background: #fff; transition: all .15s; }
.co-remove:hover { color: #A13E3E; border-color: #E7C4C4; background: #FCF3F3; }
.co-remove svg { width: 18px; height: 18px; }
/* Phones (P7e): image + body + price/remove can't share one row — the pill overflows onto the
   price. Reflow to a 2-row grid: image spans the left, body top-right, price+remove on their own
   row beneath the body (aligned with the title, not under the image). */
@media (max-width: 640px) {
  .co-line { display: grid; grid-template-columns: 88px 1fr;
    grid-template-areas: "img body" "img right"; column-gap: 16px; row-gap: 12px; align-items: start; }
  .co-line__img   { width: 88px; height: 88px; grid-area: img; }
  .co-line__body  { grid-area: body; }
  .co-line__right { grid-area: right; justify-content: space-between; }
}

/* Group footer (tinted): the group's own totals + its "check out these items only". */
.co-group__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; background: #F8F6F2; border-top: 1px solid #EFECE7; padding: 18px 24px; }

/* Totals block — shared by the group foot + the summary. */
.co-totals { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.co-total-row { display: flex; justify-content: space-between; gap: 24px; font-size: 14px; color: #4A4A4A; }
.co-total-row__label { display: inline-flex; align-items: center; gap: 6px; }
.co-total-row__label svg { width: 15px; height: 15px; color: #9A968E; }
.co-total-row--grand { margin-top: 8px; padding-top: 10px; border-top: 1px solid #E4E0D9;
  font-size: 16px; font-weight: 700; color: #1F1E1E; }
.co-total-row--grand .co-total-row__amount { font-family: 'Baskervville', serif; font-size: 20px; }
.co-terms { font-size: 12px; color: #9A968E; }

/* --- Order Summary (right column, both screens) ------------------------- */
.co-summary { background: #F8F6F2; border: 1px solid #EDEAE4; border-radius: var(--rounded-box);
  padding: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .co-summary { position: sticky; top: 24px; } }
.co-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* The box's title stands on the headline step of a card's title (h3), read from the preset's
   variables, so it is smaller below 1024 by itself. Until 2026-10-13 it was 22 px in a bold the
   serif does not have: one weight of it is loaded, the browser drew the rest. */
.co-summary__title { font-family: 'Baskervville', serif; font-size: var(--mn-size-h3); line-height: var(--mn-line-h3); }
.co-summary__from { font-size: 13px; color: #9A968E; }
.co-summary__counts { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #4A4A4A; }
.co-divider { border: 0; border-top: 1px solid #E4E0D9; margin: 0; }

/* Yellow auction-deadline box (warning 100). */
.co-auction-box { display: flex; align-items: center; gap: 12px; background: #F7E8C9; border-radius: 10px; padding: 14px 16px; }
.co-auction-box__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 9999px; background: rgba(255,255,255,.55); color: #9B7B2E; flex: none; }
.co-auction-box__icon svg { width: 20px; height: 20px; }
.co-auction-box__text { font-weight: 700; font-size: 14px; line-height: 1.3; color: #5B4A22; }

/* "Secure payment powered by Stripe" microcopy. */
.co-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #9A968E; }
.co-secure svg { width: 15px; height: 15px; }

/* Trust list (Secure Payment / Split Delivery / Auction Notice). */
.co-trust { display: flex; flex-direction: column; gap: 16px; }
.co-trust__item { display: flex; gap: 12px; }
.co-trust__icon { color: #6C717C; flex: none; }
.co-trust__icon svg { width: 22px; height: 22px; }
.co-trust__title { font-weight: 700; font-size: 14px; }
.co-trust__desc { font-size: 13px; color: #8A8A8A; line-height: 1.4; }

/* (The row of payment marks is gone with its markup, 2026-10-13: it named ways to pay that the
   checkout never offered.) */

/* Compact "ship to" country selector above the cart groups (drives per-group shipping). */
.co-shipto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 20px;
  font-size: 14px; color: #6C717C; }
/* Native <select> sizes to its widest option — "South Georgia and the South Sandwich Islands" pushed
   the control past the page edge. Cap it (compact inline control): the closed value truncates, the open
   dropdown still shows full names; max-width keeps it inside the container on narrow phones. */
.co-shipto select { width: 280px; max-width: 100%; }

/* --- Checkout: left-column form cards — the platform's .form-card / .form-field-* (the former
   .co-card / .co-field-*). ------------------------------------------------ */

/* Shipping (read-only) row. (The multi-seller note that stood here has had no markup since the
   cart was wired to the redesign; its rules are gone, 2026-10-13.) */
.co-ship-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.co-ship-row__price { font-weight: 700; font-size: 18px; }

/* Payment card body — placeholder for the Stripe Payment Element in the kitchen sink (the element
   itself only mounts on a real checkout). The boxes have the geometry static/checkout.js gives the
   element's fields: 48 high with the border, radius 10, 12 apart, the border in the colour of the
   platform's field. */
.co-pe-placeholder { border: 1px dashed #D8D4CC; border-radius: 10px; padding: 16px; background: #FCFBF9;
  display: flex; flex-direction: column; gap: 12px; }
.co-pe-tab { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px;
  border: 1.5px solid #37605D; border-radius: 8px; font-size: 13px; font-weight: 600; color: #37605D; }
.co-pe-field { height: 48px; border: 1px solid #DCDAD6; border-radius: 10px; background: #fff; }
.co-pe-hint { font-size: 12px; color: #9A968E; }

/* Checkout order-summary line items — one row per lot with its buy-type suffix (single-seller order). */
.co-sum-items { display: flex; flex-direction: column; gap: 10px; }
.co-sum-item { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.co-sum-item__name { color: #3A3A3A; min-width: 0; }
.co-sum-item__type { color: #9A968E; }
.co-sum-item__price { font-weight: 700; white-space: nowrap; }

/* (The checkout's own slim footer, E16, is gone with its markup, 2026-10-13: its links led nowhere.
   The legal links come with the footer of the site's shell.) */

/* ==========================================================================
   P8b · Chat / Messages (Figma 2152:8 board / 2152:12 desktop / 2161:* mobile)
   Buyer↔dealer messenger. DaisyUI .chat-* structural classes are KEPT (the align
   script + `#chat-messages .chat-end .offer-actions` hang off them); only their
   look is overridden. .msg-* covers the shell/list/composer/offer card/pills.
   ========================================================================== */

/* --- Message bubbles (override DaisyUI .chat-bubble; alignment stays DaisyUI) --- */
.chat-bubble { max-width: 78%; border-radius: 16px; padding: 12px 16px;
  font-size: 16px; line-height: 24px; font-weight: 400; min-height: 0; box-shadow: none; }
.chat-bubble::before { display: none; }            /* drop DaisyUI's speech tail */
.chat-start .chat-bubble { background: #F1EFEA; color: #3A3A3A; border-bottom-left-radius: 4px; }
.chat-end   .chat-bubble { background: #37605D; color: #FFFFFF; border-bottom-right-radius: 4px; }
.chat-footer { font-size: 12px; line-height: 18px; color: #9A968E; margin-top: 4px; }

/* --- System / event line (centred neutral pill; never a sided bubble) --- */
.msg-system { text-align: center; margin: 10px 0; }
.msg-system > span { display: inline-block; max-width: 90%; background: #F1EFEA; color: #5F6772;
  font-size: 12px; line-height: 18px; border-radius: 9999px; padding: 6px 14px; }

/* --- Price-offer card (an immutable record — bordered card, not the green bubble).
   Carries .chat-bubble so DaisyUI still aligns it; .chat .*.msg-offer wins on colour. --- */
.chat .chat-bubble.msg-offer { max-width: 340px; background: #F4F7F5; color: #3A3A3A;
  border: 1px solid #DDE7E2; border-radius: var(--rounded-box); padding: 16px 18px; }
.msg-offer__label { font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  font-weight: 600; color: #6C717C; }
.msg-offer__price { font-weight: 700; font-size: 28px; line-height: 1.15; color: #37605D; margin-top: 2px; }
.msg-offer__list { font-size: 13px; color: #8A8A8A; margin-top: 2px; }
.msg-offer__div { border: 0; border-top: 1px solid #DDE7E2; margin: 12px 0; }
.msg-offer__product { font-weight: 600; color: #37605D; text-decoration: underline; text-underline-offset: 2px; }

/* --- Offer action slot: terminal states are static labels (waiting = plain text, others = pills) --- */
.offer-actions { gap: 8px; align-items: center; }
.msg-slot-wait { font-size: 13px; color: #8A8A8A; display: inline-flex; align-items: center; gap: 6px; }
.msg-slot-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  border-radius: 9999px; padding: 4px 12px; }
.msg-slot-pill svg { width: 15px; height: 15px; flex: none; }
.msg-slot-pill--ok    { background: #DDEFE5; color: #046B5C; }
.msg-slot-pill--muted { background: #ECECEC; color: #5F6772; }

/* --- Thread header (avatar + name). A line under the name (location, "visit shop") and the
   locality line of an offer card were given rules and never markup; the rules are gone, 2026-10-13. --- */
.msg-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #EDEAE4; }
.msg-head__body { min-width: 0; }
.msg-head__name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Avatar (initials) --- */
.msg-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 9999px; background: #E6F0EE; color: #37605D;
  font-size: 14px; font-weight: 700; text-transform: uppercase; }

/* --- Composer + price-proposal bar --- */
.msg-composer { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid #EDEAE4; padding: 14px; }
.msg-composer textarea { flex: 1; resize: none; }
.msg-propose { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid #EDEAE4; background: #EAF1EF; padding: 12px 14px; }
.msg-propose__field { min-width: 0; flex: 1; }
.msg-propose__label { display: block; font-size: 12px; color: #4B5B55; margin-bottom: 4px; }

/* --- Live-connection status row (#sse-status keeps its .sse-dot/.sse-label the script writes) --- */
.msg-sse { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; color: #9A968E; }

/* --- Floating "open offer" jump pill (accent/yellow) — script toggles `hidden` --- */
.msg-jump { display: inline-flex; align-items: center; gap: 6px; background: #EDF3A0; color: #45471F;
  border: 1px solid #DBE291; border-radius: 9999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
/* components.css loads after tailwind.css, so this .msg-jump display would otherwise beat Tailwind's
   .hidden (same specificity, later file). Re-assert hidden with a higher-specificity rule so the
   script's `hidden` toggle actually hides the pill (else it shows its static default in every chat). */
.msg-jump.hidden { display: none; }

/* --- Inbox list (rows shared by buyer/seller inbox + the P8b-2 rail) --- */
.msg-list { display: flex; flex-direction: column; gap: 2px; }
.msg-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  transition: background .12s; }
.msg-row:hover { background: #F6F4F1; }
.msg-row.is-active { background: #EAF1EF; }
.msg-row__body { flex: 1; min-width: 0; }
.msg-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.msg-row__name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row__time { flex: none; font-size: 12px; color: #9A968E; }
.msg-row__preview { flex: 1; min-width: 0; margin-top: 2px; font-size: 14px; color: #8A8A8A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row__unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px;
  background: #37605D; color: #FFFFFF; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }

/* --- Two-column shell (P8b-2, Figma 2152:12): list rail + thread pane in one card.
   Navigation-based (E23): each conversation is its own URL. Mobile shows one pane.
   Its height is the window less what stands above and below it while the page is at its top: the
   bar of the site's shell (`--shell-bar` of shell.css: 56, from 1024 72; it scrolls away with the
   page, it does not stick), the page's padding (`py-m`: 24 above, 24 below), the title's line on the
   step of a page's title (`--mn-line-h1`: 32, from 1024 40) and the 24 under it — 72 in all beside
   the two names — and 8 to spare. The site's foot follows under the fold. Until D1 (2026-10-13) it
   was reckoned for the marketplace's own header of 81. --- */
.msg-shell { display: grid; grid-template-columns: 1fr; min-height: 460px;
  height: calc(100vh - var(--shell-bar) - var(--mn-line-h1) - 80px);
  background: #fff; border: 1px solid #E7E3DD; border-radius: var(--rounded-box); overflow: hidden; }
@media (min-width: 1024px) { .msg-shell { grid-template-columns: 340px 1fr; } }
.msg-shell__list { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid #EDEAE4; }
@media (min-width: 1024px) { .msg-shell__list { border-bottom: 0; border-right: 1px solid #EDEAE4; } }
.msg-shell__list-head { flex: none; padding: 16px; font-weight: 700; border-bottom: 1px solid #EDEAE4; }
.msg-shell__list-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.msg-shell__thread { display: flex; flex-direction: column; min-height: 0; position: relative; }
.msg-shell__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center; color: #B3AFA8; }
.msg-shell__empty svg { width: 40px; height: 40px; color: #D7D2CA; }
/* Mobile: show the list OR the open thread (never both). Desktop always shows both. */
@media (max-width: 1023px) {
  .msg-shell--thread .msg-shell__list { display: none; }
  .msg-shell:not(.msg-shell--thread) .msg-shell__thread { display: none; }
}