/* ==========================================================================
   SCT store — storefront, cart, checkout and share page.
   Loaded only by store pages (store_styles()); tokens come from sct.css.
   ========================================================================== */

/* --------------------------------------------------------- category bar */

.store-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.store-bar a {
  flex: none; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.store-bar a:hover { background: var(--bg-soft); text-decoration: none; }
.store-bar a.is-active { background: var(--crimson); border-color: var(--crimson); color: #fff; }

.store-search { display: flex; gap: 8px; flex: 1 1 260px; }
.store-search .input { flex: 1; }

/* seller ribbon set by /s/<username> */
.ref-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px;
  border: 1px solid var(--gold); background: var(--gold-bg); border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}
.ref-banner img { width: 34px; height: 34px; border-radius: var(--r-pill); object-fit: cover; }

/* ------------------------------------------------------ editorial header */
/* Two columns: copy + search on the left, a three-photo cluster (manifest covers,
   3:4) on the right. Below 860 px it stacks and the cluster becomes a 3-up strip. */

.store-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px 48px; align-items: center; padding: 40px 44px; margin-bottom: 28px;
  border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden;
  background:
    radial-gradient(70% 90% at 90% 40%, var(--gold-bg) 0%, transparent 70%),
    linear-gradient(160deg, var(--surface) 0%, var(--bg-soft) 100%);
}
.store-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson);
}
.store-hero .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold); }
.store-hero h1 {
  margin: 0 0 10px; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.08;
  letter-spacing: -.025em; max-width: 16ch;
}
.store-hero .sub { margin: 0 0 22px; font-size: var(--fs-md); line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
.store-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.store-hero-actions .store-search { flex: 1 1 280px; max-width: 460px; }
.store-hero-cluster { display: grid; grid-template-columns: 1fr 1.28fr 1fr; gap: 12px; align-items: center; }
.store-hero-cluster figure {
  margin: 0; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-soft); box-shadow: var(--sh-2);
}
.store-hero-cluster figure:nth-child(2) { border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.store-hero-cluster img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .store-hero { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px 20px; border-radius: var(--r-lg); }
  .store-hero h1 { max-width: none; }
  .store-hero-cluster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .store-hero-cluster figure, .store-hero-cluster figure:nth-child(2) { border-radius: var(--r); box-shadow: var(--sh-1); }
}
/* phones: the search keeps its row, the cart button becomes its own full-width row
   instead of wrapping as an orphan */
@media (max-width: 560px) {
  .store-hero-actions .store-search { flex-basis: 100%; max-width: none; }
  .store-hero-actions > .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------- product grid */

.pgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
@media (max-width: 560px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Card: the cover is a 3:4 portrait (the library is 720×960). The hover lift is
   transform-only; the shadow lives on a pseudo-element so only its opacity animates. */
.pcard {
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text);
  transition: transform var(--dur) var(--ease-out);
}
.pcard::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: var(--sh-3); opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.pcard:hover, .pcard:focus-visible { transform: translateY(-4px); text-decoration: none; }
.pcard:hover::after, .pcard:focus-visible::after { opacity: 1; }
.pcard.is-out { opacity: .62; }
.pcard-img {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; background: var(--bg-soft);
}
.pcard-img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 300ms var(--ease-out);
}
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-off, .pcard-out {
  position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; line-height: 1.2;
}
.pcard-off { background: var(--crimson); color: var(--paper); }
.pcard-out { background: var(--ink); color: var(--paper); opacity: .88; }
.pcard-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.pcard-name {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-price { font-size: var(--fs-md); font-weight: 700; color: var(--crimson); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pcard-price s { color: var(--text-muted); font-weight: 400; font-size: var(--fs-sm); margin-left: 2px; }
.pcard-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

/* PV is the one chip that matters to a member, so it is the one in (quiet) gold;
   CV stays neutral and Blitz keeps the crimson tint. */
.chip {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase;
}
.chip-pv {
  background: var(--gold-bg); color: color-mix(in srgb, var(--gold) 55%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
}
:root[data-theme="dark"] .chip-pv { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-pv { color: var(--gold); } }
.chip-cv { background: var(--bg-soft); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
.chip-bz { background: var(--err-bg); color: var(--crimson); }

/* ---------------------------------------------------------- product page */

.pdetail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
/* min-width: 0 — the thumb rail's min-content width must never prop the column open */
.pdetail-gallery { position: sticky; top: calc(var(--topbar-h) + 20px); min-width: 0; }
@media (max-width: 860px) {
  .pdetail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pdetail-gallery { position: static; }
}

.pgallery-main {
  aspect-ratio: 3 / 4; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-1);
}
.pgallery-main img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Thumb rail: one horizontal scroller with snap; the active thumb wears a crimson ring.
   The padding leaves room for the ring and the focus outline inside the scroll box. */
.pgallery-thumbs {
  display: flex; gap: 10px; margin-top: 12px; padding: 6px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.pgallery-thumbs button {
  flex: 0 0 64px; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--r-sm);
  overflow: hidden; background: var(--bg-soft); cursor: pointer; scroll-snap-align: start;
  box-shadow: 0 0 0 1px var(--border); opacity: .72;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.pgallery-thumbs button:hover { opacity: 1; }
.pgallery-thumbs button:active { transform: scale(.97); }
.pgallery-thumbs button.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--crimson); }
.pgallery-thumbs button:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.pgallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.price-now { font-size: var(--fs-3xl); font-weight: 700; color: var(--crimson); letter-spacing: -.02em; }
.price-srp { color: var(--text-muted); text-decoration: line-through; }
.price-off { background: var(--crimson); color: #fff; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }

/* --------------------------------------------------------------- qty box */

.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.qty button {
  width: 38px; border: 0; background: var(--surface); color: var(--text); font-size: var(--fs-lg);
  line-height: 1; cursor: pointer; transition: background var(--dur) var(--ease-out);
}
.qty button:hover { background: var(--bg-soft); }
.qty button:disabled { opacity: .4; cursor: default; }
.qty input {
  width: 58px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; font: inherit; font-variant-numeric: tabular-nums; background: var(--surface);
  color: var(--text); padding: 8px 0;
}
.qty input:focus { outline: none; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.qty-sm button { width: 30px; font-size: var(--fs-md); }
.qty-sm input { width: 46px; padding: 5px 0; font-size: var(--fs-sm); }

/* --------------------------------------------------------- cart + totals */

.cart-line-img { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg-soft); }
.totals { display: grid; gap: 10px; }
.totals .row-between { gap: 24px; }
.totals .grand { font-size: var(--fs-xl); font-weight: 700; color: var(--crimson); }
.totals-sep { border-top: 1px solid var(--border); padding-top: 10px; }

.pay-option { display: block; border: 1px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 10px; cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.pay-option:hover { background: var(--surface-2); }
.pay-option.is-picked { border-color: var(--crimson); background: var(--err-bg); }
.pay-option .row { gap: 10px; align-items: flex-start; }
.pay-body { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.pay-option.is-picked .pay-body { display: block; }

/* ------------------------------------------------------------ share page */

.share-hero {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 28px; border-radius: var(--r-xl); border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface), var(--bg-soft));
}
.share-avatar {
  width: 92px; height: 92px; border-radius: var(--r-pill); object-fit: cover;
  background: var(--bg-soft); border: 2px solid var(--gold);
}
.share-avatar-fallback {
  width: 92px; height: 92px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--crimson); color: #fff; font-size: var(--fs-2xl); font-weight: 700; border: 2px solid var(--gold);
}
.qr { width: 190px; height: 190px; border-radius: var(--r); border: 1px solid var(--border); background: #fff; }

.copy-row { display: flex; gap: 8px; }
.copy-row .input { flex: 1; font-size: var(--fs-sm); }

/* ------------------------------------------------------------- admin bits */

.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-tabs a {
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500;
}
.admin-tabs a:hover { background: var(--bg-soft); text-decoration: none; }
.admin-tabs a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
:root[data-theme="dark"] .admin-tabs a.is-active { background: var(--crimson); border-color: var(--crimson); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin-bottom: 0; }
.filters .input, .filters .select { min-width: 150px; }

.thumb-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb-card { width: 108px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.thumb-card img { width: 100%; height: 92px; object-fit: cover; }
.thumb-card .row { gap: 4px; padding: 5px; justify-content: center; }
.thumb-card.is-cover { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

/* receipt (order_print.php) */
.receipt { max-width: 720px; margin: 0 auto; }
@media print {
  .no-print, .topbar, .sidebar, .sidebar-scrim { display: none !important; }
  .portal-main { margin: 0 !important; padding: 0 !important; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard::after, .pcard-img img, .store-bar a, .qty button, .pay-option, .pgallery-thumbs button { transition: none; }
  .pcard:hover, .pcard:focus-visible { transform: none; }
  .pcard:hover .pcard-img img { transform: none; }
}

/* cart / checkout two-column layout */
.cart-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

/* the cart row keeps its thumbnail inside the product cell so the line total
   still fits on a 390 px screen */
.cart-line { display: flex; gap: 10px; align-items: center; }
.cart-line > span { min-width: 0; }
/* below 560 px the cart stops being a table and becomes one card per line, so the
   line total never scrolls out of view */
@media (max-width: 560px) {
  .cart-line-img { width: 44px; height: 44px; }
  .cart-layout .table thead { display: none; }
  .cart-layout .table tbody tr {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 8px 12px; padding: 14px 12px; border-bottom: 1px solid var(--border);
  }
  .cart-layout .table tbody tr:hover { background: transparent; }
  .cart-layout .table tbody td { display: block; border: 0; padding: 0; }
  .cart-layout .table tbody td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .cart-layout .table tbody td:nth-child(2) { grid-area: 2 / 1 / 3 / 2; text-align: left; color: var(--text-muted); }
  .cart-layout .table tbody td:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
  .cart-layout .table tbody td:nth-child(4) { grid-area: 3 / 2 / 4 / 3; text-align: right; font-size: var(--fs-md); }
  .cart-layout .table tbody td:nth-child(5) { grid-area: 1 / 2 / 2 / 3; text-align: right; }
}