/* =============================================================================
   RepBox — box.css (box detail page, box.html?box=ID) — v3 real catalogue
   Page-only styles. Everything shared (shell, gallery, size picker, qty, grid cards,
   photo grid, sticky bar, toasts) comes from base.css; this file lays the page out
   and tunes the foundation components for the money page. One accent, no rarity.
   ---------------------------------------------------------------------------
   01 crumbs          the "All boxes" way back + position inside the theme
   02 hero (.bx)      gallery (RB.gallery) left, buy panel right (badges, name,
                      price, source, policy, picker, CTAs, trust)
   03 what could be inside   the seller's photos as a grid + the variant tiles
   04 how it ships    three steps from REPBOX.howItWorks
   05 more like this  three grid cards (snap scroller on phones)
   06 sticky bar      phone order bar
   07 reduced motion
   ============================================================================= */

.main { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .main { gap: 28px; } }
.main > section { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* small caps label used across the page */
.bx-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bx-label b { color: var(--text-2); font-weight: 700; }
.bx-label__hint { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--muted-2); font-size: 12px; text-align: right; }

/* ---------------------------------------------------------------------------
   01 CRUMBS
   --------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: -8px;
}
.crumbs__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.crumbs__back svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.crumbs__back:hover { text-decoration: none; color: var(--accent); }
@media (hover: hover) { .crumbs__back:hover svg { transform: translateX(-3px); } }
.crumbs__pos { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.crumbs__pos b { color: var(--text-2); }

/* ---------------------------------------------------------------------------
   02 HERO — .bx > .bx__gallery + .bx__buy
   Phone: gallery on top, buy panel under it. Desktop (>= 900): gallery left (sticky
   while the long picker scrolls), buy panel right.
   --------------------------------------------------------------------------- */
.bx {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'gallery' 'buy';
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* clip (not hidden): hidden would make the hero the scroll container for the sticky gallery */
  overflow: clip;
}
.bx::before {
  content: '';
  position: absolute; top: -1px; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .55);
  z-index: 1;
  pointer-events: none;
}
.bx__gallery { grid-area: gallery; padding: 14px 14px 0; min-width: 0; }
.bx__buy { grid-area: buy; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* head: badges, name, tagline */
.bx__head { display: flex; flex-direction: column; gap: 10px; }
.bx__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.bx__badges .badge { padding: 5px 9px; }
.bx__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 12vw, 4.5rem);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: break-word;
}
.bx__tagline { font-size: 16px; font-weight: 500; color: var(--text-2); line-height: 1.4; }

/* price: the big number follows the picked variant; the note carries the CNY + the KakoBuy price note */
.bx__price-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 14px; }
.bx__price-row .price--lg { font-size: clamp(2.75rem, 11vw, 3.75rem); }
.bx__price-row .price--lg small { font-size: .4em; letter-spacing: .06em; color: var(--muted); text-shadow: none; margin-right: 4px; }
.bx__price-note { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.35; min-width: 0; }
.bx__price-note b { color: var(--text-2); font-weight: 700; }
.bx__source { font-size: 13px; color: var(--muted); line-height: 1.5; }
.bx__source .bx__dot { color: var(--muted-2); padding-inline: 4px; }
.bx__source b { color: var(--text-2); font-weight: 600; }
.bx__source a { color: var(--text-2); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.bx__source a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* policy + seller details: short lines with a dot */
.bx__policy { display: grid; gap: 6px; list-style: none; padding: 12px 12px; margin: 0; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.bx__policy li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.bx__policy li::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.bx__policy li b { color: var(--text); font-weight: 700; }
.bx__policy li.bx__policy--details { color: var(--muted); }
.bx__policy li.bx__policy--details::before { background: var(--muted-2); box-shadow: none; }

/* form: picker, order CTA, qty + add row, trust */
.bx__form { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.bx__form .size-picker { gap: 16px; }
.bx__actions { display: flex; flex-direction: column; gap: 10px; }
.bx__order { width: 100%; font-size: 22px; gap: 10px; padding-inline: 18px; }
.bx__order .bx__ext { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.bx__cart-row { display: flex; align-items: center; gap: 10px; }
.bx__cart-row .qty { flex: 0 0 auto; }
.bx__add { flex: 1 1 auto; min-width: 0; padding-inline: 12px; }
.bx__add svg { width: 18px; height: 18px; }
/* "Added · View cart" for 2s after a successful add */
.btn.is-added { background: var(--surface-2); border-color: var(--accent-border); color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .2), 0 0 24px rgba(var(--accent-rgb), .18); }
.btn.is-added::before { display: none; }
.bx__cart-hint { font-size: 12px; line-height: 1.45; color: var(--muted-2); }
.bx__cart-hint b { color: var(--muted); font-weight: 600; }
.bx__trust { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.bx__trust li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.bx__trust svg { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.bx__trust b { color: var(--text-2); font-weight: 600; }

@media (min-width: 480px) {
  .bx__gallery { padding: 16px 16px 0; }
  .bx__buy { padding: 18px 16px 20px; }
  .bx__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .bx__trust li { align-items: flex-start; }
  .bx__trust svg { margin-top: 2px; }
}
@media (min-width: 900px) {
  .bx {
    grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
    grid-template-areas: 'gallery buy';
    align-items: start;
  }
  .bx__gallery { position: sticky; top: calc(var(--nav-h) + 12px); padding: 20px 0 20px 20px; }
  .bx__buy { padding: 22px 22px 24px; border-left: 1px solid var(--border); align-self: stretch; gap: 16px; }
  .bx__title { font-size: clamp(3rem, 4.4vw, 4.5rem); }
  .bx__order { font-size: 24px; }
}
@media (min-width: 1100px) {
  .bx__buy { padding: 24px 26px 26px; }
}
@media (min-width: 1300px) {
  .bx { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); }
  .bx__gallery { padding: 22px 0 22px 22px; }
}

/* ---------------------------------------------------------------------------
   03 WHAT COULD BE INSIDE — the seller's photos as a grid + the variant tiles
   --------------------------------------------------------------------------- */
.bx-inside { display: flex; flex-direction: column; gap: 14px; }
.bx-inside__head { display: flex; flex-direction: column; gap: 6px; }
.bx-inside__title { margin-top: 2px; font-size: clamp(2rem, 7vw, 3rem); }
.bx-inside__title b { font-weight: 400; color: var(--accent); text-shadow: var(--accent-text-glow); }
.bx-inside__sub { font-size: 14px; color: var(--muted); max-width: 60ch; line-height: 1.5; }
.bx-inside__sub b { color: var(--text-2); font-weight: 600; }
/* 3 photos per row at 375 (~106px), 6 in one row from 900px */
.bx-inside__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bx-inside__photos a { position: relative; }
.bx-inside__photos a::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  pointer-events: none;
}
@media (min-width: 600px) { .bx-inside__photos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }

/* variant tiles: one per box.variants.values entry; image on top when the seller has one */
.bx-variants { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.bx-variants[hidden] { display: none; }
.bx-variants__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bx-variant {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur), background-color var(--dur), color var(--dur), box-shadow var(--dur), transform .12s var(--ease-out);
}
.bx-variant__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-3); }
.bx-variant__body { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px 9px; min-width: 0; }
.bx-variant__text { font-family: var(--font-display); font-size: 16px; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: var(--text); overflow-wrap: anywhere; }
.bx-variant__price { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bx-variant__tick {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .55);
}
.bx-variant__tick svg { width: 12px; height: 12px; }
/* text-only variants (no seller thumbnail): a chip-like tile */
.bx-variant--text { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; min-height: 48px; }
.bx-variant--text .bx-variant__body { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0; flex: 1 1 auto; }
.bx-variant--text .bx-variant__tick { position: static; }
@media (hover: hover) { .bx-variant:hover { border-color: var(--border-hover); background: var(--surface-3); } }
.bx-variant:active { transform: scale(.97); }
.bx-variant.is-selected, .bx-variant[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 16px rgba(var(--accent-rgb), .22);
}
.bx-variant.is-selected .bx-variant__text, .bx-variant[aria-pressed="true"] .bx-variant__text { color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb), .45); }
.bx-variant.is-selected .bx-variant__price, .bx-variant[aria-pressed="true"] .bx-variant__price { color: var(--accent); }
.bx-variant.is-selected .bx-variant__tick, .bx-variant[aria-pressed="true"] .bx-variant__tick { display: inline-flex; }
.bx-variants__grid--text { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
@media (min-width: 480px) { .bx-variants__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) { .bx-variants { padding: 16px; } .bx-variants__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 900px) { .bx-variants__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); } }

/* ---------------------------------------------------------------------------
   04 HOW IT SHIPS — three steps (REPBOX.howItWorks)
   --------------------------------------------------------------------------- */
.ship-steps { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ship-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ship-step__num {
  grid-row: 1 / 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-dim);
  border: 1px solid rgba(var(--accent-rgb), .25);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  padding-top: 2px;
}
.ship-step__title { font-family: var(--font-display); font-size: 20px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--text); align-self: end; }
.ship-step__text { font-size: 13px; line-height: 1.45; color: var(--muted); }
.ship-step__text b { color: var(--text-2); font-weight: 600; }
.ship-step__pill { grid-column: 2; justify-self: start; margin-top: 6px; }
@media (min-width: 700px) {
  .ship-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ship-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 16px; }
  .ship-step__num { grid-row: auto; }
  .ship-step__title { font-size: 22px; }
  .ship-step__pill { grid-column: auto; margin-top: 2px; align-self: end; }
}

/* ---------------------------------------------------------------------------
   05 MORE LIKE THIS — three grid cards: a snap scroller on phones (two cards + a peek), a row from 768px
   --------------------------------------------------------------------------- */
.bx-more__grid.gcard-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--shell-pad));
  padding: 2px var(--shell-pad) 6px;
}
.bx-more__grid::-webkit-scrollbar { display: none; }
.bx-more__grid .gcard { flex: 0 0 calc(50% - 22px); min-width: 150px; max-width: 240px; scroll-snap-align: start; }
@media (min-width: 768px) {
  .bx-more__grid.gcard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; margin-inline: 0; padding: 0; }
  .bx-more__grid .gcard { flex: none; min-width: 0; max-width: none; }
}
@media (min-width: 1100px) { .bx-more__grid.gcard-grid { grid-template-columns: repeat(3, minmax(0, 300px)); } }

/* section heads on this page are tighter than the marketing sections */
.bx-section__head { margin-bottom: 12px; }
.bx-section__head .section__title { font-size: clamp(2rem, 7vw, 3rem); margin-top: 6px; }

/* ---------------------------------------------------------------------------
   06 STICKY BAR (phones) — the label carries the pick, the price follows the variant
   --------------------------------------------------------------------------- */
.sticky-bar .btn { min-width: 150px; padding-inline: 14px; }
.sticky-bar__price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-bar__price small { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-left: 8px; text-shadow: none; }
.sticky-bar__price small.sticky-bar__from { color: var(--muted); margin-left: 0; margin-right: 6px; }

/* ---------------------------------------------------------------------------
   07 MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .crumbs__back svg { transition: none; }
  .bx-variant { transition: none; }
}