/* Slate + Copper + Teal — "modern gem dealer" palette (owner direction
 * 2026-05-22, second pass after the warm-brown theme read too literally
 * as cardboard). Neutral charcoal background so product photos pop;
 * copper accent for buttons/links with energy; teal pop accent for
 * highlights, badges, and trend deltas — reads as indicolite/aquamarine
 * and gives a cool counterpoint to the warm copper.
 *
 * Accessibility: warm white (#EDEAE5) on charcoal sits at ~14:1 contrast
 * (above WCAG AAA). Copper vs teal is parseable for every common
 * colorblind deficiency, and we already pair ▲/▼ arrows with text so
 * trend deltas never rely on color alone. */
:root {
  --bg:           #1a1d23;  /* dark charcoal — not brown, not navy */
  --surface:      #343944;  /* slate — bumped again for clearer tile lift */
  --surface-2:    #3d424e;  /* alt-row / hover — sits above surface */
  --border:       #5a6070;  /* bright neutral slate — visible against bg without competing with the copper accent for "active" semantics (owner 2026-05-22, after the full-copper version made tab active/inactive states indistinguishable) */
  --text:         #ffffff;  /* bright white (owner 2026-05-22 — was warm cream #edeae5) */
  --text-dim:     #9ca3af;  /* cool gray */
  --accent:       #c97d5e;  /* rose-copper — pulled back from screaming orange */
  --accent-hover: #d8927a;  /* lighter rose-copper for hover */
  --accent-dim:   rgba(201, 125, 94, 0.18);
  --pop:          #3abfb0;  /* teal — pop accent for highlights/badges */
  --pop-hover:    #5cd1c4;  /* lighter teal for hover */
  --pop-dim:      rgba(58, 191, 176, 0.15);
  --radius: 8px;
  --radius-lg: 12px;
  --max-width: 1200px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Global anchor color — keeps unscoped <a> tags (mailto, inline links in
 * paragraphs, etc.) from falling back to browser-default blue. Page-scoped
 * selectors below can still override for nav tabs, buttons, etc. */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

html { font-size: 16px; overflow-x: clip; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;        /* clip (not hidden) preserves sticky-header behavior on iOS Safari */
  max-width: 100vw;
}

/* Media never forces the viewport wider than the screen — the other half of
 * the horizontal-drift lock (paired with overflow-x: clip above). */
img, picture, video, canvas, svg { max-width: 100%; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* HEADER */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 15, 0.85);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Compact-on-scroll (owner feedback via Gene, ex-Grainger RM: pinned chrome
 * must be slim so the catalog scrolls under it, not behind it). search.js
 * toggles .hdr-compact past ~60px of scroll on every page. The brand size is
 * set INLINE on each page, hence the !important. */
.site-header { transition: padding 0.18s ease; }
.site-header .brand { transition: font-size 0.18s ease; }
.site-header.hdr-compact .header-inner { padding-top: 6px; padding-bottom: 6px; }
.site-header.hdr-compact .brand { font-size: 1.25rem !important; }
.site-header.hdr-compact .brand .brand-mark { font-size: 1rem; }
/* Logged-in auth chip wraps the header row to a second line, growing the
 * "compact" header to ~149px — which buries the breadcrumb pinned at 96px
 * behind it (owner hit this 2026-07-25). Every pinned offset on the site
 * (breadcrumb 6rem, toolbars 9.2rem, filters 13.5rem, digest thead) keys
 * off compact = 96px, so the chip must collapse when compact. Scroll up
 * for account actions — same tradeoff as mobile, where the chip is hidden
 * entirely. */
.site-header.hdr-compact .auth-chip { display: none; }

/* Breadcrumbs pin with the header (Gene: title + "back" always reachable).
 * The nav's own wrapper div is only as tall as the nav — no stick range — so
 * the WRAPPER pins via :has(). top clears the 96px compact header. */
@media (min-width: 700px) {
  /* Short div wrappers pin as a unit; where the breadcrumb sits directly in a
   * tall <main> (browse page), the nav itself pins — the other rule no-ops. */
  div.container:has(> .breadcrumb) { position: sticky; top: 6rem; z-index: 9; }
  .breadcrumb {
    position: sticky;
    top: 6rem;
    z-index: 9;
    background: rgba(16, 16, 22, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.45rem var(--space-md) !important;
  }
}

/* Mobile chrome — Grainger-app pattern (owner, 2026-07-04, supersedes the
 * earlier nothing-pins call): pinned chrome is fine on a phone ONLY when it
 * is slim. Top bar = brand + search, pinned. Bottom bar = primary nav
 * (.mob-tabbar, injected by search.js). Everything between scrolls. The
 * desktop compact-on-scroll never fires here — the bar is already slim. */
@media (max-width: 700px) {
  .site-header { position: sticky; top: 0; }
  .site-header .header-inner { padding-top: 6px; padding-bottom: 8px; }
  .site-header .brand { font-size: 1.2rem !important; }      /* inline sizes on pages */
  .site-header .brand .brand-mark { font-size: 0.95rem; }
  /* Tabs + auth buttons move to the bottom bar / Account; search stays. */
  .site-header .primary-nav { display: none; }
  .site-header .auth-chip { display: none; }  /* login/logout lives in the Account tab */
  .site-header .site-search { width: 100%; }
  .site-header .site-search input { width: 100%; }

  /* Room for the fixed bottom bar (56px + iOS home-indicator inset). */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* Bottom tab bar — injected on every public page by search.js; hidden on
 * desktop. Fixed, always visible, one tap to anywhere (Grainger pattern). */
.mob-tabbar { display: none; }
@media (max-width: 700px) {
  .mob-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;                        /* over content, under cart drawer (60) */
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10, 10, 15, 0.97);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.66rem;
    line-height: 1;
    min-height: 44px;
  }
  .mob-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .mob-tab.active { color: var(--accent); }
  .mob-tab:hover { color: var(--text); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 1.1rem;
}

.brand-mark {
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
}

/* NAV */
.primary-nav {
  display: flex;
  gap: var(--space-xs);
}

.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  outline: none;
  text-decoration: none;
}

/* Mouse focus stays clean; keyboard focus (:focus-visible) gets a real ring. */
.tab-btn:focus { outline: none; box-shadow: none; }
.tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

.tab-btn:hover { color: var(--text); background: var(--surface); }

.tab-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.tab-btn.coming-soon {
  color: var(--text-dim);
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  position: relative;
}
.tab-btn.coming-soon::after {
  content: 'Coming Soon';
  position: absolute;
  bottom: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  opacity: 0.7;
  white-space: nowrap;
}

/* MAIN */
main {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
  min-height: calc(100vh - 200px);
}

.tab-section { animation: fadeIn 0.2s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HERO */
.hero { margin-bottom: var(--space-lg); }

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

.hero .lede {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 60ch;
  margin-bottom: var(--space-sm);
}

/* Photo-backed heroes (shop + marketplace) */
.hero-photo {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  min-height: 220px;
  aspect-ratio: 21 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
}

.hero-photo h1 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-photo .lede {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  max-width: 56ch;
}

.hero-photo-shop {
  background-image: linear-gradient(rgba(10, 10, 15, 0.30), rgba(10, 10, 15, 0.65)), url('/assets/hero/shop-mountain.jpg');
  background-position: center 35%;
}

.hero-photo-marketplace {
  background-image: linear-gradient(rgba(10, 10, 15, 0.25), rgba(10, 10, 15, 0.65)), url('/assets/hero/marketplace-sunset.jpg');
}

/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

/* SPONSORED STORES (homepage section + storefront cards) */
.sponsored-stores { margin: var(--space-lg) 0; }
.sponsored-stores-head h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 var(--space-xs); }
.sponsored-stores-sub { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 var(--space-md); }
.sponsored-stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}
.sponsored-store-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sponsored-store-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.sponsored-store-banner {
  aspect-ratio: 3 / 1;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
}
.sponsored-store-body { padding: var(--space-sm); display: flex; flex-direction: column; gap: 4px; }
.sponsored-store-body strong { font-size: 1.05rem; }
.sponsored-store-tagline { color: var(--text-dim); font-size: 0.9rem; }
.sponsored-store-location { color: var(--text-dim); font-size: 0.82rem; }

/* ============================================================
   HOMEPAGE MARKETPLACE — three-column sidebars (desktop ≥1400px)
   Auction Block (left) + existing center content + Seller Stores
   (right). The sidebars fill the dead space OUTSIDE the centered
   content on wide monitors; the center column is capped at the
   original content width so nothing here shrinks. Below 1400px the
   grid collapses to one column, the sidebars hide, and the inline
   #sponsored-stores section above takes over as the fallback.
   ============================================================ */
.market-3col { display: block; }
.market-3col .auction-sidebar,
.market-3col .stores-sidebar { display: none; }

@media (min-width: 1400px) {
  .market-3col {
    display: grid;
    /* DEFAULT (before JS): single centered 1200px column — no rails. The rails
       are revealed additively only once sidebars.js confirms each is enabled
       via /api/config, so a disabled sidebar never flashes in and out. */
    grid-template-columns: minmax(0, 1200px);
    gap: var(--space-lg);
    align-items: start;
    justify-content: center;
    /* Break out of the centered 1200px .container to reclaim the outer dead
       space. The grid centers on the viewport with a small even inset; the
       side rails grow to fill the rest so the layout reads evenly on wide and
       ultrawide monitors. */
    width: min(100vw - 4rem, 2400px);
    margin-inline: calc(50% - min(50vw - 2rem, 1200px));
  }
  .market-3col .market-center { min-width: 0; }

  /* Revealed by sidebars.js: .show-auction / .show-stores add the rail and its
     column. A lone rail is capped (no runaway 1fr); both rails flex to fill. */
  .market-3col.show-auction.show-stores { grid-template-columns: minmax(300px, 1fr) minmax(0, 1200px) minmax(300px, 1fr); }
  .market-3col.show-auction:not(.show-stores) { grid-template-columns: minmax(300px, 560px) minmax(0, 1200px); }
  .market-3col.show-stores:not(.show-auction) { grid-template-columns: minmax(0, 1200px) minmax(300px, 560px); }
  .market-3col.show-auction .auction-sidebar { display: flex; }
  .market-3col.show-stores  .stores-sidebar { display: flex; }
}

/* SIDEBAR SHARED */
.auction-sidebar, .stores-sidebar {
  display: flex;
  flex-direction: column;
  background: #1a1c22;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  /* Sticky rail — stays in place while the center content scrolls. top clears
     the sticky header; min-height matches the hero block so the panel reads as
     a full-height column even when its content is short. */
  position: sticky;
  /* Clears the COMPACT header state (the header shrinks past 60px of scroll,
     which has always happened by the time a sticky rail matters). */
  top: 6.4rem;
  min-height: 400px;
  max-height: calc(100vh - 7.4rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.auction-sidebar::-webkit-scrollbar, .stores-sidebar::-webkit-scrollbar { width: 6px; }
.auction-sidebar::-webkit-scrollbar-thumb, .stores-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* Card containers grow to fill the rail; the stores upsell is pushed to the
   bottom, and sparse empty/"coming soon" states center themselves. */
#auction-cards, #store-cards { flex: 1 1 auto; min-height: 0; }
.auction-coming-soon, .sidebar-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sidebar-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #e8e8ec;
}
.sidebar-see-all { font-size: 0.72rem; color: var(--accent); text-decoration: none; }
.sidebar-see-all:hover { text-decoration: underline; }
.sidebar-empty { font-size: 0.8rem; color: #9ca3af; text-align: center; padding: var(--space-sm) 0; margin: 0; }

/* AUCTION CARDS */
.auction-card {
  display: block;
  text-decoration: none;
  color: #e8e8ec;
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin-bottom: 8px;
  border: 1px solid transparent;
  background: #22252e;
  transition: background 0.15s, border-color 0.15s;
}
.auction-card:last-child { margin-bottom: 0; }
.auction-card:hover { background: #282c36; border-color: #2a2d36; }
.auction-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  margin-bottom: 6px;
  position: relative;
}
.auction-card-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  color: #fff;
}
.auction-card-badge.hot { background: #c97a3a; }
.auction-card-badge.new-badge { background: #2563eb; }
.auction-card-badge.ended { background: rgba(0,0,0,0.6); }
.auction-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  color: #e8e8ec;
}
.auction-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}
.auction-card-bid { font-weight: 700; color: #22c55e; font-size: 0.82rem; }
.auction-card-bids { font-size: 0.68rem; color: #9ca3af; }
.auction-card-store { font-size: 0.68rem; color: var(--accent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auction-card-timer {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f59e0b;
  margin-top: 3px;
}
.auction-card-timer.urgent { color: #ef4444; }
.auction-card-cta {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 0;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.auction-card:hover .auction-card-cta { background: var(--accent-hover); border-color: var(--accent-hover); }
.auction-coming-soon { text-align: center; padding: var(--space-sm) 0; }
.auction-coming-soon p { font-size: 0.78rem; color: #9ca3af; margin: 0 0 6px; line-height: 1.5; }
.auction-coming-soon a { font-size: 0.78rem; color: var(--accent); text-decoration: none; font-weight: 600; }

/* STORE SIDEBAR CARDS */
.store-sidebar-card {
  display: block;
  text-decoration: none;
  color: #e8e8ec;
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin-bottom: 8px;
  border: 1px solid transparent;
  background: #22252e;
  transition: background 0.15s, border-color 0.15s;
}
.store-sidebar-card:last-child { margin-bottom: 0; }
.store-sidebar-card:hover { background: #282c36; border-color: #2a2d36; }
.store-sidebar-banner {
  width: 100%;
  aspect-ratio: 3/1;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: 14px;
}
.store-sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #1a1c22;
  position: absolute;
  bottom: -10px;
  left: 8px;
}
.store-sidebar-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e8e8ec;
}
.store-sidebar-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.store-sidebar-tagline { font-size: 0.72rem; color: #9ca3af; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-sidebar-location { font-size: 0.68rem; color: #6b7280; margin-top: 2px; }
.store-sidebar-visit {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 0;
  transition: background 0.15s, border-color 0.15s;
}
.store-sidebar-card:hover .store-sidebar-visit { background: var(--accent-hover); border-color: var(--accent-hover); }
.sidebar-upsell {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px dashed #2a2d36;
  border-radius: var(--radius);
  text-align: center;
}
.sidebar-upsell p { font-size: 0.72rem; color: #9ca3af; margin: 0 0 5px; line-height: 1.4; }
.sidebar-upsell a { font-size: 0.72rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.sidebar-upsell a:hover { text-decoration: underline; }

/* CARDS */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  /* 2px copper ring via box-shadow keeps the boundary visible against
   * bright tile images. Doesn't shift layout (border-width stays 1px). */
  box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.35);
}

.card-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card-body { padding: var(--space-sm); }
.card-body h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.card-body p { color: var(--text-dim); font-size: 0.9rem; }

.card-body .price,
.card-body .meta {
  margin-top: var(--space-xs);
  color: var(--accent);
  font-weight: 600;
}

.card.placeholder { opacity: 0.65; }

/* CTA */
.cta {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Explicit color on hover so the global a:hover rule doesn't override
 * .cta's white text — without this, hover turned the text the same
 * color as the new background and the label disappeared. */
.cta:hover { background: var(--accent-hover); color: #fff; }

/* STUDIO PREVIEW */
.studio-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 768px) {
  .studio-preview { grid-template-columns: 1fr; }
}

.preview-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.studio-features h3 { font-size: 1.2rem; margin-bottom: var(--space-sm); }

.studio-features ul {
  list-style: none;
  margin-bottom: var(--space-md);
}

.studio-features li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.studio-features li:last-of-type { border-bottom: none; }

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-md) 0;
  margin-top: var(--space-xl);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-nav { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer-nav a { color: var(--text-dim); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }

/* SHOP LANDING — hero CTAs, category tiles, filter chip */

.shop-section-head {
  font-size: 1.2rem;
  font-weight: 600;
  margin: var(--space-lg) 0 var(--space-sm);
  letter-spacing: -0.01em;
}

/* Section header row with an inline toggle group on the right
   (e.g. Shop By Species: Natural / Synthetic). */
.shop-section-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.shop-section-head-row .shop-section-head { margin-bottom: var(--space-sm); }

.species-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}
.species-toggle-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.species-toggle-btn:hover { color: var(--text); }
.species-toggle-btn.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

.shop-hero-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.hero-cta {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: block;
  padding: 0;
  font-family: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.hero-cta:hover {
  transform: translateY(-3px);
  /* Copper ring + depth shadow — same pattern as .card:hover. */
  box-shadow: 0 0 0 2px var(--accent), 0 8px 22px rgba(0, 0, 0, 0.45);
  border-color: var(--accent);
}

.hero-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero-featured .hero-cta-bg {
  background-color: #1e3a8a;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Logan_Sapphire_10956420_cropped.png/330px-Logan_Sapphire_10956420_cropped.png');
}
.hero-rough .hero-cta-bg {
  background-color: #047857;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/00/Kyanite_crystals.jpg');
  background-position: center 35%;
}
.hero-faceted .hero-cta-bg {
  background-color: #6d28d9;
  background-image: url('/assets/species/sapphire.webp');
}
.hero-marketplace .hero-cta-bg {
  background-color: #b91c1c;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Corundum-215330.jpg/330px-Corundum-215330.jpg');
}

.hero-cta-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: left;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  padding: 0.7rem 1rem;
  background: rgba(20, 20, 28, 0.88);
  letter-spacing: 0.01em;
}

@media (max-width: 1000px) {
  .shop-hero-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .shop-hero-row { grid-template-columns: 1fr; }
}

/* Contact section on the storefront. Always visible regardless of which
 * tab is active (sits inside <main> but outside the tab-section wrappers). */
.contact-section {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  scroll-margin-top: 80px;
}
.contact-section h2 { margin-bottom: var(--space-sm); font-size: 1.4rem; }
.contact-section p { color: var(--text-dim); max-width: 50ch; margin: 0 auto; }
.contact-email {
  margin-top: var(--space-md) !important;
}
.contact-email a {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.contact-email a:hover { text-decoration: underline; }

/* Species tiles — like gemrock auction's gemstone categories */
.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.species-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  display: block;
}

.species-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.35);
}

.species-tile.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* Species in the manifest but with no in-stock products. Tile is still
 * clickable (filter renders the empty-grid notice) but visually de-emphasized
 * so the owner can see at a glance which species need inventory. */
.species-tile.no-stock { opacity: 0.55; }
.species-tile.no-stock:hover { opacity: 0.85; }

.species-tile-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.species-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.85rem;
  background: rgba(20, 20, 28, 0.88);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  z-index: 1;
}

.species-tile-count {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Type tiles — 4 horizontal cards like the screenshot */
.type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

@media (max-width: 700px) {
  .type-grid { grid-template-columns: repeat(2, 1fr); }
}

.type-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: block;
}

.type-tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.35); }
.type-tile.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

.type-tile-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
}

.type-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 20, 28, 0.88);
  padding: 0.5rem 0.85rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
}

/* Cut/shape pills — abstract shape silhouettes, smaller */
.cut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cut-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: block;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cut-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.35);
}

.cut-tile.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.cut-tile-photo {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cut-tile-shape {
  width: 50%;
  height: 50%;
  background: var(--text-dim);
  display: block;
  transition: background 0.15s ease;
}

.cut-tile:hover .cut-tile-shape,
.cut-tile.active .cut-tile-shape { background: var(--accent); }

.cut-shape-round { border-radius: 50%; }
.cut-shape-oval { border-radius: 50%; transform: scaleX(0.7); }
.cut-shape-pear { clip-path: polygon(50% 0%, 90% 60%, 75% 100%, 25% 100%, 10% 60%); }
.cut-shape-emerald { border-radius: 4px; transform: scaleY(0.78); }
.cut-shape-cushion { border-radius: 30%; }
.cut-shape-trillion { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.cut-shape-heart { clip-path: path('M18,32 C0,18 0,8 9,4 C14,2 18,6 18,10 C18,6 22,2 27,4 C36,8 36,18 18,32 Z'); }
.cut-shape-marquise { border-radius: 50%; transform: scaleX(0.5) scaleY(1.1); }
.cut-shape-freeform { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
.cut-shape-rough { clip-path: polygon(20% 0%, 80% 5%, 100% 40%, 90% 90%, 50% 100%, 10% 80%, 0% 35%); }
.cut-shape-novelty { clip-path: polygon(50% 0%, 65% 30%, 100% 35%, 75% 60%, 85% 100%, 50% 80%, 15% 100%, 25% 60%, 0% 35%, 35% 30%); }

/* Color tiles — same standardized pattern */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.color-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: block;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.color-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(0, 0, 0, 0.35);
}

.color-tile.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.color-tile-photo {
  position: absolute;
  inset: 0;
}

.color-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 20, 28, 0.88);
  padding: 0.5rem 0.85rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  z-index: 1;
}

.color-tile-count {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
  z-index: 2;
}

.cut-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 20, 28, 0.88);
  padding: 0.5rem 0.85rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  z-index: 1;
}

/* Grid header with active filter chip */
.shop-grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.shop-grid-header .shop-section-head { margin: 0; }

.shop-grid-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.active-filter-chip {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.link-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  padding: 0;
}

.link-btn:hover { color: var(--accent-hover); }

/* SITE SEARCH (header) */
.site-search {
  position: relative;
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 320px;
}

.site-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 2.6rem 0.5rem 0.9rem;   /* right room for the submit button */
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Magnifying-glass submit button, injected by search.js and pinned to the
 * right edge of the input. Click or Enter both run submitSearch(). */
.site-search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease;
}
.site-search-btn:hover { background: var(--accent-hover); }

.site-search input::placeholder { color: var(--text-dim); }
.site-search input:hover { border-color: var(--accent); }
.site-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.site-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 40;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.site-search-results[hidden] { display: none; }

.search-section { padding: 0.25rem 0; border-bottom: 1px solid var(--border); }
.search-section:last-child { border-bottom: none; }

/* Auth chip is injected by public/search.js into .header-inner and uses
   inline styles — no global rules required here. */

.search-section-label {
  padding: 0.4rem var(--space-sm) 0.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
}

.search-result {
  display: flex;
  gap: var(--space-sm);
  padding: 0.5rem var(--space-sm);
  text-decoration: none;
  color: var(--text);
  align-items: center;
  cursor: pointer;
  transition: background 0.1s ease;
}

.search-result:hover { background: var(--surface-2); }

.search-result-thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.search-result-info { min-width: 0; flex: 1; }

.search-result-name {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Typeahead suggestion chips (search.js renders these for partial queries). */
.search-suggests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0.3rem var(--space-sm) 0.5rem;
}

.search-suggest {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.search-suggest:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* PRODUCT FOCUS (when arrived via search) */
.product-card.product-focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  animation: focusPulse 1.6s ease;
}

@keyframes focusPulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 127, 255, 0.6); }
  60% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 3px var(--accent-dim); }
}

/* CART TOGGLE (header button) */
.cart-toggle {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cart-toggle:hover { border-color: var(--accent); background: var(--surface); }

.cart-icon { font-size: 1.1rem; line-height: 1; }

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-badge[hidden] { display: none; }

@keyframes badgeFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.cart-badge.flash { animation: badgeFlash 0.35s ease; }

/* PRODUCT CARDS (add-to-cart) */
.product-card .card-body { display: flex; flex-direction: column; gap: 0.25rem; }

/* Card body + image are wrapped in a link to /shop/product.html?id=... */
.product-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.product-card-link:hover h3 { color: var(--accent, #5b8def); }

.product-card .card-footer {
  padding: 0 var(--space-sm) var(--space-sm);
}

.add-to-cart-btn {
  margin-top: var(--space-xs);
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  width: 100%;
}

.product-card.sold-out { opacity: 0.75; }
.product-card .sold-text {
  text-decoration: line-through;
  color: var(--text-dim);
}
.product-card .card-img { position: relative; }
.sold-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(194, 84, 80, 0.92);
  padding: 6px 22px;
  border: 2px solid #fff;
  border-radius: 4px;
  text-decoration: line-through;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.cta-secondary {
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: not-allowed;
}

/* CART OVERLAY */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 50;
}

.cart-overlay.visible { opacity: 1; visibility: visible; }

/* CART DRAWER */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 60;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}

.cart-drawer.open { transform: translateX(0); }

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
}

.cart-header h2 { font-size: 1.1rem; font-weight: 600; }

.cart-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.cart-close:hover { color: var(--text); }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
}

.cart-empty {
  color: var(--text-dim);
  text-align: center;
  padding: var(--space-lg) 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.cart-item:last-child { border-bottom: none; }

.cart-item-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.cart-item-info { min-width: 0; }
.cart-item-name { font-weight: 500; font-size: 0.95rem; line-height: 1.3; }
.cart-item-meta { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.15rem; }

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.qty-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.qty-btn:hover { border-color: var(--accent); }

.cart-item-controls .qty {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.remove-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  margin-left: 0.4rem;
  text-decoration: underline;
  font-family: inherit;
}

.remove-btn:hover { color: var(--accent); }

.cart-item-line-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.cart-note {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-bottom: var(--space-sm);
}

.cart-checkout-btn {
  width: 100%;
}

.cart-checkout-btn:disabled {
  background: var(--surface);
  color: var(--text-dim);
  cursor: not-allowed;
}

/* MARKET TICKER — landing page top-5 species snapshot from /api/digest. */
.market-ticker {
  margin: var(--space-md) 0;
}
.market-ticker-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.market-ticker-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pop);             /* teal section labels — "Gemstones" / "Precious Metals" */
  font-weight: 600;
}
.market-ticker-date {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.market-ticker-link {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}
.market-ticker-link:hover { color: var(--accent-hover); }

.market-ticker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}
.market-ticker-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 78px;
  transition: border-color 0.15s, transform 0.15s;
}
.market-ticker-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Gem ticker marquee — used only by the gemstones section (metals stays a grid
 * because spot prices are reference data, not a buying signal). Mirrors the
 * digest-page marquee. min-height reserves layout so first paint doesn't shift. */
.market-ticker-marquee {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 78px;
  display: flex;
  align-items: center;
}
.market-ticker-marquee::before,
.market-ticker-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 2;
}
.market-ticker-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--surface), transparent);
}
.market-ticker-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--surface), transparent);
}
.market-ticker-track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  animation: market-ticker-marquee 60s linear infinite;
  will-change: transform;
}
.market-ticker-marquee:hover .market-ticker-track {
  animation-play-state: paused;
}
@keyframes market-ticker-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.market-ticker-marquee .market-ticker-card {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
  min-height: 0;
  padding: 0 var(--space-md);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.market-ticker-marquee .market-ticker-card:hover {
  border-color: var(--border);
  transform: none;
}
.market-ticker-marquee .market-ticker-species {
  font-size: 0.78rem;
}
.market-ticker-marquee .market-ticker-price {
  font-size: 0.98rem;
}
.market-ticker-note {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
  opacity: 0.8;
}
/* The price marquee runs for everyone, including prefers-reduced-motion (owner
   direction — it's a functional ticker that should always scroll, not freeze).
   Intentionally no `animation: none` reduced-motion override here. The
   pause/play button below is the accessible stop mechanism (WCAG 2.2.2). */
.ticker-paused {
  animation-play-state: paused !important;
}
/* Pause/play toggle — injected by JS into both marquee frames (homepage
   .market-ticker-marquee and digest .digest-movers-strip). Absolute at the
   right edge, above the edge-fade gradients (z-index 2), ≥40px hit area. */
.ticker-pause-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  z-index: 3;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 28, 0.72);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ticker-pause-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.ticker-pause-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.market-ticker-species {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pop);             /* teal species labels in homepage ticker */
}
.market-ticker-price {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.market-ticker-wow {
  font-size: 0.85rem;
  font-weight: 500;
}
.market-ticker-wow.up   { color: #4ade80; }  /* bright green ▲ — uptrend */
.market-ticker-wow.down { color: #c97d5e; }  /* rose-copper ▼ — downtrend */
.market-ticker-wow.flat { color: var(--text-dim); }

/* Skeleton tiles are styled to look like a real (empty) card from first paint:
   same surface/border as .market-ticker-card, with dim placeholder lines that
   match the structure of the populated card. No animation — Lighthouse's
   Speed Index treats an animated shimmer as "not yet visually complete," so
   keeping the placeholder static lets SI mark the section complete on frame 1.
   The eventual JS swap just refines content within already-stable layout. */
.market-ticker-skel { gap: 6px; justify-content: center; }
.market-ticker-skel::before,
.market-ticker-skel::after {
  content: "";
  display: block;
  height: 0.72em;
  background: var(--surface-2);
  border-radius: 3px;
  opacity: 0.6;
}
.market-ticker-skel::before { width: 60%; }
.market-ticker-skel::after  { width: 40%; height: 1em; opacity: 0.8; }

@media (max-width: 768px) {
  .market-ticker-grid { grid-template-columns: repeat(3, 1fr); }
  .market-ticker-grid > :nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 480px) {
  .market-ticker-grid { grid-template-columns: repeat(2, 1fr); }
  .market-ticker-head { flex-wrap: wrap; }
  .market-ticker-link { margin-left: 0; flex-basis: 100%; }
}

/* Auth chip — header login state (rendered by search.js renderAuthChip).
 * Class-based so it can wrap responsively; no inline styles. */
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: var(--space-md);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.auth-chip-email {
  color: var(--text-dim);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-chip-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.auth-link {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.auth-link.auth-post,
.auth-link.auth-signup {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  /* Tighter gutters so full-bleed heroes + scroll rails have room. */
  .container { padding: 0 0.5rem; }

  /* Auth chip wraps to its own full-width row below the search bar; email
   * centered + smaller, action pills wrap centered so nothing clips. */
  .auth-chip {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: center;
    gap: 6px;
    row-gap: 4px;
  }
  .auth-chip-email {
    flex-basis: 100%;
    text-align: center;
    max-width: none;
    font-size: 0.78rem;
  }
  .auth-chip-actions { justify-content: center; gap: 4px; }
  .auth-link { padding: 5px 10px; font-size: 0.82rem; }

  /* Footer: stack + center so the nav links wrap onto multiple centered rows
   * instead of the last one running off the right edge and getting clipped. */
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-nav { justify-content: center; gap: var(--space-sm); row-gap: 0.4rem; }

  /* Header: brand on top, compact centered nav, search wraps to its own
   * full-width row beneath (flex: 1 1 100% forces the wrap). Works for both
   * the index #nav-row markup and the sub-page header-inner markup since the
   * rules target shared classes. */
  .header-inner { flex-direction: column; align-items: center; gap: var(--space-xs); }
  #nav-row { gap: 0.4rem; row-gap: 0.45rem; }
  .brand { justify-content: center; text-align: center; }
  .primary-nav { gap: 0.25rem; flex-wrap: wrap; justify-content: center; width: 100%; }
  /* width:100% (not just flex-basis) is required because on sub-pages .site-search
   * is a direct child of the COLUMN .header-inner — flex-basis controls height
   * there, so without width:100% the search bar renders at content width. */
  .site-search { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; }
  .tab-btn { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
  /* 16px floor stops iOS Safari from zooming the page on focus (which shoves
   * the sticky header off-screen). Keep the right padding for the button. */
  .site-search input { font-size: 16px; padding-right: 2.6rem; }

  /* Hero: shorter cap + full-bleed to both viewport edges. The negative
   * margins cancel the .container 0.5rem mobile padding above. */
  .hero-photo {
    aspect-ratio: 5 / 3;
    min-height: 0;
    max-height: 200px;
    padding: 0.85rem 0.75rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    margin-bottom: 0.75rem;
    width: calc(100% + 1rem);
  }
  .hero-photo h1 { font-size: 1.4rem; }
  .hero-photo .lede { font-size: 0.9rem; max-width: none; }

  /* Shop category rails become horizontal scroll-snap strips on mobile.
   * The mask fades the right edge to hint there's more off-screen. */
  .species-grid, .type-grid, .cut-grid, .color-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.6rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0 0.75rem;
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .species-grid > *, .type-grid > *, .cut-grid > *, .color-grid > * {
    flex: 0 0 38vw;
    max-width: 160px;
    scroll-snap-align: center;
  }

  /* Animated "scroll me" chevron after the heads of scrollable rails.
   * Suppressed on the All-Inventory head (it sits above a wrapping grid,
   * not a horizontal rail). */
  .shop-section-head::after {
    content: ' \203A\203A';
    color: var(--accent);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.06em;
    margin-left: 0.5rem;
    display: inline-block;
    line-height: 0.85;
    vertical-align: -2px;
    animation: scrollHint 1.4s ease-in-out infinite;
  }
  .shop-grid-header .shop-section-head::after { content: none; }
}

@keyframes scrollHint {
  0%, 100% { transform: translateX(0); opacity: 0.8; }
  50%      { transform: translateX(8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-section-head::after { animation: none; }
}