/* ============================================================
   FRONT.CSS — fan storefront + register checkout UX
   Loads AFTER style.css (via {% block head %}) on:
   tour_store, shop, sell, board, scan, guide, handoff.
   Owns: editable cart lines in the fan checkout sheet, the
   phone/iPad register cart sheet + floating checkout button,
   and the 2x brand mark in seller topbars.
   ============================================================ */

/* ---- brand mark in seller topbars ----------------------------------------
   The bird carries the band name, so it earns ~2x the old square
   mark and the "MERCH TABLE" text spans are gone from the templates. */
.wordmark .mklogo-cream { height: 56px; width: 56px; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 700px) {
  .wordmark .mklogo-cream { height: 46px; width: 46px; }
}

/* ---- register: selling off the trailer -----------------------------------
   Shown above the grid when nobody has counted in yet and the tour ledger
   is standing in. Informational, not a warning — the register works. */
.trailerbar {
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* ---- fan checkout sheet: editable order lines ----------------------------
   Register-style rows in the dark sheetcard: product + size, − qty +,
   a live line total. Dropping a line to zero removes it. Shared by the
   tour store sheet and the single-show cartbar (shop.html). */
.sheetkick {
  font-size: 11px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 2px solid var(--line-2); padding-bottom: 6px;
}
.sheetline {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px dashed var(--line-2);
}
.sheetline .nm {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 900;
  text-transform: uppercase; font-stretch: 92%; line-height: 1.25;
}
.sheetline .nm small {
  display: block; font-family: var(--mono); color: var(--muted);
  font-weight: 500; font-size: 11px; text-transform: none;
}
.sqty {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  background: var(--surface-2); border: 2px solid var(--line-2);
  color: var(--text); font-size: 17px; font-weight: 900;
  display: grid; place-items: center;
  transition: transform .18s var(--spring);
}
.sqty:active {
  background: var(--pink); border-color: var(--pink); color: #21020f;
  transform: scale(.9);
}
.sheetline .q {
  flex: none; min-width: 20px; text-align: center; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sheetline .amt {
  flex: none; font-family: var(--mono); font-weight: 700; font-size: 13.5px;
  min-width: 54px; text-align: right; font-variant-numeric: tabular-nums;
}
.sheet-empty {
  color: var(--faint); text-align: center; padding: 18px 8px;
  font-size: 12px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .1em; border-bottom: 1px dashed var(--line-2);
}

/* shop.html: the lines live inside the fixed cartbar — cap and scroll */
.cartbar .fanlines {
  flex: 1 1 100%; max-height: 34dvh; overflow-y: auto;
  margin-bottom: 2px;
}
.cartbar .fanlines .sheetline:first-child { border-top: 2px solid var(--line-2); }

/* ---- one-size products: the whole tile is the button ---------------------
   Applied by renderTiles only when a product has a single variant; the
   pressed state echoes .sizechip:active, scaled for a full tile. */
.tile.tile-tap { cursor: pointer; }
.tile.tile-tap:active { transform: scale(.97); }

/* ---- register: floating checkout button (≤1100px) ------------------------ */
.cartfab {
  position: fixed; 
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  display: none; align-items: center; gap: 10px;
  min-height: 58px; padding: 0 24px;
  background: var(--pink); color: #21020f;
  border-radius: 999px;
  font-size: 15px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .07em; font-stretch: 92%;
  box-shadow: 0 8px 30px rgba(255, 79, 160, .45), 0 4px 16px rgba(0, 0, 0, .45);
  transition: transform .18s var(--spring), opacity .18s ease;
 left: 50%; transform: translateX(-50%);}
.cartfab:active { transform: translateX(-50%) scale(.94); }
.cartfab .fabcount {
  position: absolute; top: -7px; right: -5px;
  min-width: 25px; height: 25px; padding: 0 7px;
  border-radius: 999px;
  background: var(--cyan); color: #062330;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--bg);
  font-variant-numeric: tabular-nums;
}
.cartfab .fabcount[hidden] { display: none !important; }

/* backdrop behind the phone cart sheet */
.cartback {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(6, 5, 10, .62);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  display: none;
}

/* close control inside the rail — only exists as UI below 1101px */
.cartclose {
  position: absolute; left: 10px; top: 8px; width: 38px; height: 38px;
  border-radius: 999px; background: none; border: 0; color: #9891a3;
  font-size: 20px; line-height: 1; display: none; place-items: center;
}
.cartclose:active { background: var(--ink); color: var(--paper); }

/* ---- register: phones ≤700px ---------------------------------------------
   Grid takes the full width; the cart rail becomes a slide-up sheet. */
@media (max-width: 700px) {
  body.page-sell .console { flex-direction: row; }
  body.page-sell .gridwrap { padding-bottom: 110px; } /* room past the fab */
  body.page-sell .cartrail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-height: 84dvh;
    border-left: 0; border-top: 3px solid var(--pink);
    border-radius: 18px 18px 0 0;
    z-index: 70;
    transform: translateY(108%);
    transition: transform .38s var(--spring);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.page-sell.cart-open .cartrail { transform: translateY(0); }
  body.page-sell .cartback { display: block; }
  body.page-sell.cart-open .cartback { opacity: 1; pointer-events: auto; }
}

/* ---- register: iPads / mid 701–1100px ------------------------------------
   Full-width grid by default; opening checkout slides the rail in from
   the right and the products compress to make room (the desktop view). */
@media (min-width: 701px) and (max-width: 1100px) {
  body.page-sell .console { flex-direction: row; overflow: hidden; }
  body.page-sell .cartrail {
    width: 344px; max-height: none;
    border-top: 0; border-left: 2px solid var(--line-2);
    margin-right: -346px;
    transition: margin-right .38s var(--spring);
  }
  body.page-sell.cart-open .cartrail { margin-right: 0; }
}

/* fab + close control live below 1101px only */
@media (max-width: 1100px) {
  body.page-sell .cartfab { display: inline-flex; }
  body.page-sell.cart-open .cartfab {
    opacity: 0; pointer-events: none; transform: translateY(16px);
  }
  body.page-sell .cartrail .cartclose { display: grid; }
  /* the clear-× keeps its corner; the header text stays centred between them */
  body.page-sell .cartrail header { padding-left: 44px; padding-right: 44px; }
}

/* desktop >1100px: the always-visible side-by-side layout, untouched */
@media (min-width: 1101px) {
  body.page-sell .cartfab, body.page-sell .cartback { display: none; }
}

/* the x hides the register (items are removed line by line, so no clear-all);
   on desktop the rail never hides, so no x at all */
@media (min-width: 1101px) {
  body.page-sell .hidex { display: none; }
}


/* ---- the pending rail: in-flight QR sales, living in the cart aside ---- */
.pendrail { margin-top: 14px; border-top: 2px solid var(--line-2); padding-top: 10px; }
.pendrail header { font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pendchip { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px;
  border: 1.5px solid var(--line-2); border-radius: 12px; margin-bottom: 8px;
  font-size: 13px; cursor: default; }
.pendchip b { font-family: var(--mono); letter-spacing: .12em; }
.pendchip span { font-family: var(--mono); }
.pendchip em { font-style: normal; color: var(--muted); font-size: 11.5px;
  margin-left: auto; }
.pendchip i { font-style: normal; color: var(--muted); cursor: pointer;
  padding: 0 2px; font-size: 15px; }
.pendchip.pending em { animation: pendpulse 1.6s ease-in-out infinite; }
.pendchip.paid { border-color: var(--paid, #1c9d5b); cursor: pointer;
  box-shadow: 0 0 0 1px var(--paid, #1c9d5b) inset; }
.pendchip.paid em { color: var(--paid, #1c9d5b); font-weight: 800; }
@keyframes pendpulse { 50% { opacity: .35; } }


/* the register answers every tap */
.justadded { animation: addblink .5s ease; }
@keyframes addblink {
  0% { box-shadow: 0 0 0 4px #f272ac; background: rgba(242, 114, 172, .28); }
  100% { box-shadow: 0 0 0 0 rgba(242, 114, 172, 0); }
}
.carttotal.bump { animation: totbump .4s ease; }
@keyframes totbump {
  30% { transform: scale(1.05); color: #f272ac; }
}
.pendchip.pending { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .justadded, .carttotal.bump { animation: none; }
}


/* lane options: colored, unmissable, a soft drop-in under the charge button */
.lanemore { width: 100%; background: none; border: 1px dashed var(--line-2, #3a3644);
  color: var(--muted, #a29bb0); font-size: 13px; font-weight: 700;
  padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.laneopts { display: grid; gap: 8px; max-height: 0; overflow: hidden;
  transition: max-height .28s ease; }
.laneopts.open { max-height: 240px; }
.laneopt { width: 100%; padding: 13px 14px; border-radius: 12px; font-size: 15px;
  font-weight: 800; cursor: pointer; border: 2px solid transparent; color: #16151c;
  animation: lanein .3s ease backwards; }
.laneopt:disabled { opacity: .45; cursor: default; }
.laneopts.open .laneopt:nth-child(2) { animation-delay: .06s; }
.laneopts.open .laneopt:nth-child(3) { animation-delay: .12s; }
@keyframes lanein { from { opacity: 0; transform: translateY(-8px); } }
.laneopt.lane-qr { background: #f272ac; }
.laneopt.lane-reader { background: #4fbe8b; }
.laneopt.lane-keyed { background: #e0ac5b; }

/* the payment-landed banner: visible over everything, cart sheet closed or not */
.paidtoast { position: fixed; top: 0; left: 50%; transform: translate(-50%, -110%);
  z-index: 120; background: #197a4e; color: #fff; font-size: 16px; font-weight: 700;
  padding: 14px 22px calc(14px + env(safe-area-inset-top, 0px)); border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,.5); cursor: pointer; white-space: nowrap;
  transition: transform .3s ease; }
.paidtoast.show { transform: translate(-50%, 0); }
.paidtoast b { letter-spacing: .08em; margin-right: 8px; }

/* the cart is out for payment */
.pendbanner { background: rgba(242,114,172,.14); border: 1px solid #f272ac;
  color: #f8b8d6; font-size: 13px; font-weight: 600; border-radius: 10px;
  padding: 9px 12px; }

/* the rail breathes: no dead air between the lines and the buttons, and
   Waiting for payment stays reachable — the whole column scrolls instead */
body.page-sell .cartrail { display: flex; flex-direction: column; overflow-y: auto; }
body.page-sell .cartrail .cartlines { flex: 0 0 auto; min-height: 44px; }
body.page-sell .cartrail .cartactions { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .laneopt, .paidtoast { animation: none; transition: none; }
}


/* delivered: one green breath, then the register */
.deliverdone { position: fixed; inset: 0; z-index: 200; background: #197a4e;
  color: #fff; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; animation: donein .25s ease; }
.deliverdone .check { font-size: 84px; line-height: 1; }
.deliverdone .big { font-size: 30px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; }
.deliverdone .who { font-size: 17px; opacity: .85;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
@keyframes donein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .deliverdone { animation: none; } }


/* screen controls never reach the paper */
@media print { .noprint { display: none !important; } }

/* one-time hint when the browser asks for the camera on every visit */
.camtip { margin-top: 12px; padding: 10px 14px; border: 1px dashed var(--line-2);
  border-radius: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.camtip button { margin-left: 8px; background: none; border: 1px solid var(--line-2);
  border-radius: 999px; color: var(--text); font-size: 12px; padding: 3px 12px;
  cursor: pointer; }


/* an order from another night: loud, unmissable, and an instruction —
   this bag is not in the pre-packed pile */
.othershow { background: #e0ac5b; color: #1d1520; border-radius: 10px;
  padding: 12px 14px; margin-top: 8px; font-weight: 900; font-size: 15px;
  letter-spacing: .02em; }
.othershow span { font-weight: 600; font-size: 13.5px; display: inline-block;
  margin-top: 4px; }


/* more orders under this person: as loud as the different-show banner */
.samename { background: #f272ac; color: #1d0713; border-radius: 10px;
  padding: 11px 14px; margin-top: 10px; font-weight: 900; font-size: 14px; }
.samename button { font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; background: #1d0713; color: #f8b8d6; border: 0;
  border-radius: 7px; padding: 6px 10px; margin: 0 3px; cursor: pointer; }
.samename span { font-weight: 600; }

/* ---- the product page sheet: deluxe when there's a story, tight when
   there isn't. The photo is the door; sizes still add in one tap. ---- */
.thumb-link { cursor: pointer; }
.prodcard { max-width: 720px; }
.prodwrap { display: flex; flex-direction: column; gap: 16px; }
.prodmedia { display: flex; flex-direction: column; gap: 8px; }
.prodhero {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px;
  background: #fff; display: block;
}
div.prodhero { display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 900; color: #fff; }
.prodthumbs { display: flex; gap: 8px; }
.prodthumb {
  width: 56px; height: 56px; padding: 0; border-radius: 9px; overflow: hidden;
  border: 2px solid var(--line-2); background: #fff; cursor: pointer; flex: none;
}
.prodthumb.on { border-color: var(--pink); }
.prodthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prodkick {
  font: 700 10.5px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 6px;
}
.prodname { font-size: 24px; font-weight: 900; line-height: 1.15; margin: 0 0 6px; }
.prodprice { font: 700 20px/1 var(--mono); margin-bottom: 12px; }
.proddesc { color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 52ch; }
.proddesc p { margin: 0 0 10px; }
.prodsizes-kick {
  font: 700 10.5px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin: 12px 0 8px;
}
.prodsizes { margin-bottom: 6px; }
.sizechip-lg { padding: 11px 16px; font-size: 14px; }
.scarce {
  color: var(--warn, #e0ac5b); font-size: 13px; margin-top: 6px;
}
.scarce::before { content: "⚡ "; }
.paircard {
  margin-top: 14px; border: 1.5px dashed var(--line-2); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; line-height: 1.6;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.pairkick {
  font: 700 10px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--pink);
}
.pairsave {
  color: var(--paid, #4fbe8b); font-weight: 800; white-space: nowrap; margin-left: 4px;
}
.pairnote { color: var(--faint); font-size: 12px; }
.prodtrust {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2);
  color: var(--faint); font-size: 12.5px; line-height: 1.6;
}
/* deluxe goes two-up where there's room; slim stays a single tight column */
@media (min-width: 700px) {
  .prodwrap.deluxe { flex-direction: row; gap: 22px; }
  .prodwrap.deluxe .prodmedia { flex: 0 0 46%; }
  .prodwrap.deluxe .prodinfo { flex: 1; min-width: 0; }
  .prodwrap:not(.deluxe) { max-width: 400px; margin: 0 auto; }
}

/* full-window photo view: tap the hero, tap anywhere to come back */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(8, 6, 12, .93);
  display: none; align-items: center; justify-content: center; cursor: zoom-out;
  padding: 18px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px;
  background: #fff;
}
.prodhero { cursor: zoom-in; }

/* the border, unmissable (per Stu): the COUNTRY is the headline — the
   flag + COUNTRY DATES take the ticket-name slot, and the tour title
   demotes to a quiet line beneath it */
.fp-ticket-tour {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #6e6579;
  margin-top: 5px;
}