/* LittSound Scope — the whole stylesheet.
   No fonts, no CDN, no framework. A customer in Yangon on a slow phone gets
   this file and nothing else. Keep it that way. */

:root{
  --ink:#14211f; --quiet:#5c6b68; --line:#e2e8e6; --bg:#ffffff; --panel:#f6f8f8;
  --brand:#0f766e; --brand-dark:#0b5b55; --warn:#b91c1c; --good:#15803d;
  --radius:14px; --gap:16px;
}
/* 🔴 5.23 — WHITE ONLY. Sky, 15 Oct: "most popular websites don't allow
   switching black and white mode.. so let's stick with white." No dark
   rules anywhere, and `only light` stops a phone's own "force dark" from
   repainting it (src/lib/html.js says the same in a <meta>). */
:root{color-scheme:only light}
*{box-sizing:border-box}
/* 🔴 The `hidden` attribute is only `display:none` from the browser's own
   stylesheet, so ANY class rule that sets `display` beats it. `.cart .totals
   {display:block}` did exactly that, and the live cart showed "Nothing in here
   yet" and a Total of 0 Ks at the same time. Force it, once, for everything. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
main{max-width:920px;margin:0 auto;padding:var(--gap)}
h1{font-size:1.5rem;margin:0 0 .6rem}
h2{font-size:1rem;margin:.5rem 0 .2rem;font-weight:600}
.quiet{color:var(--quiet);font-size:.88rem}
.empty{color:var(--quiet);padding:2rem 0;text-align:center}
.error{background:#fee2e2;color:#7f1d1d;padding:.7rem .9rem;border-radius:10px;margin:0 0 1rem}
.ok{background:#dcfce7;color:#14532d;padding:.7rem .9rem;border-radius:10px;margin:0 0 1rem}

/* ---- header ---- */
.top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem var(--gap);border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:5}
/* 🔴 The shop's name IS the shop. Sky asked for it taller and more dominant,
   in a serif — so it is Times/Georgia, bigger than anything else in the bar,
   and tightened up so the extra size costs as little width as possible.
   Georgia first: it is on every Mac and Android, reads better than Times at
   small sizes, and falls back to Times New Roman where it is not. */
.brand{font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:700;font-size:1.35rem;letter-spacing:-.01em;line-height:1.1;
  color:var(--ink);display:flex;align-items:center;gap:.5rem;min-width:0}
.brand:hover{text-decoration:none}
.brand .logo{width:44px;height:44px;border-radius:50%;background:#fff;flex:0 0 auto}
/* 🔴 The name stays beside the logo at EVERY width now. It used to be hidden
   below 460px because the bar also held Shop, Cart, a count, a login button
   and a language toggle and could not fit them; the Shop link is gone (the
   logo does the same thing) and the cart count moved onto the cart, so the
   name has the room. It shrinks with an ellipsis rather than vanishing. */
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* the login / profile button */
.me{border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;
  font-size:.85rem;color:var(--quiet);min-height:28px;display:inline-flex;
  align-items:center;white-space:nowrap}
.me:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.me.on-acct{font-size:1.1rem;padding:.15rem .5rem;border-color:var(--brand)}
.top nav{display:flex;gap:.7rem;align-items:center;flex:0 0 auto}
.top nav a.on{color:var(--brand);font-weight:600}
/* 🔴 The count sits ON the cart word, top-right, the way an unread badge sits
   on an app icon. It used to be a separate pill BESIDE it, which cost the
   width of a whole extra element in the one bar that has none to spare. */
.cartlink{position:relative;font-size:1.3rem;line-height:1;
  display:inline-flex;align-items:center;min-height:32px;
  filter:grayscale(.15)}
.cartlink:hover{text-decoration:none;filter:none}
.cartlink.on{filter:none}
.cartcount{position:absolute;top:-.45rem;right:-.6rem;
  background:var(--warn);color:#fff;border-radius:999px;
  min-width:1.15rem;height:1.15rem;padding:0 .25rem;
  font-size:.7rem;font-weight:700;line-height:1.15rem;text-align:center}
/* The language toggle. Quiet on purpose — it is for the few people who want
   it, not a thing to compete with Shop and Cart. */
.lang{color:var(--quiet);font-size:.85rem;border:1px solid var(--line);
  border-radius:999px;padding:.15rem .6rem}
.lang:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}

/* 🔴 THIS BLOCK MUST STAY BELOW THE RULES IT OVERRIDES.
   It sat ABOVE .me and .lang for a while and every override in it that those
   rules also set — their padding, their border — was silently discarded:
   same specificity, and the later rule wins. Nothing errored, the narrow
   layout simply never happened, and three rounds of measuring the bar on a
   real phone came out wrong for a reason that was not in the numbers.
   There is a test that this block comes last. */
/* 🔴 Every number below was measured on the live site at 375px, in BURMESE,
   which is the tight case: the Burmese words for Cart and English are far
   wider than the Latin ones and the shop name came out as "LittSound …".
   The bar needed 27px it did not have, and this is where they came from. */
/* 🔴 Every number below was measured on the live site at 375px, in BURMESE,
   which is the tight case: the Burmese word for English is far wider than the
   Latin one. The bar holds a 44px logo, a serif name at 1.2rem, a trolley, a
   log-in pill and a language pill — and it fits, with the name whole. */
@media (max-width:460px){
  /* 🔴 clamp, not a fixed size. Measured at 375px in Burmese, logged OUT —
     the widest the bar ever gets — the name has 170px and wants 162 at
     1.2rem. That is a 8px margin, and a 360px phone would eat it and start
     chopping letters off the shop's own name. 5.1vw tracks the width instead,
     so a narrower phone gets slightly smaller type rather than "LittSound Sc…"
     — and the ellipsis stays as the last resort under about 340px. */
  .brand{font-size:clamp(1rem,4.9vw,1.3rem);gap:.35rem}
  .brand .logo{width:38px;height:38px}
  .top{padding:.5rem 6px}
  .top nav{gap:.35rem}
  .me{padding:.25rem .45rem;font-size:.78rem}
  /* 🔴 The language toggle loses its pill on a phone and becomes plain text.
     It is the quietest control in the bar by design — it is for the few
     people who want it — and the border plus its padding cost 17px that the
     shop's own name needed more. It keeps its 28px tap height. */
  .lang{padding:.15rem .1rem;font-size:.78rem;border:0}
}

/* 🔴 Burmese needs more room between lines than Latin does — at 1.55 the
   stacked vowel marks touch the line above and it reads as a smudge. */
html[lang="my"] body{line-height:1.9}
html[lang="my"] h1,html[lang="my"] h2,html[lang="my"] .buy{line-height:1.6}
.announce{margin:0;padding:.6rem var(--gap);background:var(--panel);
  color:var(--quiet);font-size:.88rem;text-align:center}

/* ---- the hot picks row -------------------------------------------------
   🔴 It scrolls sideways, the way a food app does it. A grid of six would
   push every real section off a phone screen, and the whole point of this
   row is that it costs almost nothing to skip. Snap points so a flick lands
   on a card rather than halfway through one. */
.hot{margin-bottom:1.6rem}
.hot h2{font-size:1rem;margin:0 0 .6rem}
.hotrow{display:flex;gap:var(--gap);overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;padding-bottom:.4rem;scrollbar-width:none}
.hotrow::-webkit-scrollbar{display:none}
/* 🔴 38%, not 46%. At 46% exactly two cards filled the screen and the row
   looked like a finished grid — nothing said there was more to the right.
   At 38% the third card is half on screen, which is the only thing that
   actually tells somebody to swipe. */
.hotrow .card{flex:0 0 38%;max-width:170px;scroll-snap-align:start}
.hotrow .card h2{font-size:.82rem}
.hotrow .card .price{font-size:.95rem}
@media (min-width:600px){.hotrow .card{flex-basis:150px}}

/* ---- the type chips across the top of the shop -------------------------
   🔴 It SCROLLS sideways rather than wrapping. He has eight product types and
   counting; three rows of chips push the first stethoscope off a phone
   screen. `-webkit-overflow-scrolling` keeps the flick momentum on iOS. */
.chips{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:.2rem 0 .9rem;margin:0 0 .4rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:.45rem .9rem;border:1px solid var(--line);
  border-radius:999px;color:var(--quiet);font-size:.9rem;white-space:nowrap;
  min-height:32px;display:inline-flex;align-items:center}
.chip:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* ---- product grid ---- */
section{margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap);align-items:stretch}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg);display:block;color:inherit}
.card:hover{text-decoration:none;border-color:var(--brand)}
.shot{aspect-ratio:1;background:#fff;display:grid;place-items:center;padding:.5rem}
/* 🔴 max-width/max-height, NOT width:100%;height:100%. A portrait photo with
   height:100% grows past the square and the cards in a row stop lining up —
   measured on the real Case · Blue photo (416x500). */
.shot img{max-width:100%;max-height:100%;width:auto;height:auto}
.card{display:flex;flex-direction:column}
.card h2{padding:0 .7rem;font-size:.9rem;flex:1}
.price{padding:0 .7rem;margin:.1rem 0 .3rem;font-weight:700;color:var(--brand)}
.price.big{font-size:1.4rem;padding:0}
/* 🔴 A cut price. The old one is struck through and quiet; the new one is the
   loud one. Never the other way round — the number a customer has to read is
   the one they pay. */
.price.cut{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
.price.cut s{color:var(--quiet);font-weight:400;font-size:.85em;text-decoration-thickness:1px}
.price.cut b{color:var(--brand)}
.price.cut .save{flex-basis:100%;font-size:.72rem;font-weight:700;color:#fff;
  background:var(--warn);border-radius:6px;padding:.05rem .4rem;width:max-content}
.price.big.cut s{font-size:.6em}
.price.big.cut .save{font-size:.8rem}
.nophoto{color:var(--quiet);font-size:.8rem}
.tag{margin:0;padding:0 .7rem .7rem;font-size:.78rem}
.tag.in{color:var(--good)} .tag.to{color:var(--quiet)}
/* 🔴 Only ever 1 or 2, and only ever the real number. */
.tag.last{color:var(--warn);font-weight:700}

/* ---- one product ---- */
.product .shots{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-bottom:1rem;border-radius:var(--radius);background:#fff}
.product .shots img{flex:0 0 100%;aspect-ratio:1;object-fit:contain;scroll-snap-align:center}
.blurb{color:var(--quiet);white-space:pre-line}

/* What happens after Add to cart — an obvious next step, not a coloured word */
.added{background:var(--panel);border:1px solid var(--brand);border-radius:var(--radius);
  padding:1rem;margin:1rem 0;text-align:center}
.added .tick-small{margin:0 0 .6rem;font-weight:700;color:var(--brand)}
.added .buy{margin:0 0 .5rem}
.added .keep{display:inline-block;padding:.5rem;color:var(--quiet);font-size:.9rem}

/* ---- buttons ---- */
.buy{display:block;width:100%;border:0;border-radius:12px;background:var(--brand);
  color:#fff;font:inherit;font-weight:700;padding:.9rem;margin:1rem 0 .5rem;
  cursor:pointer;text-align:center}
.buy:hover{background:var(--brand-dark);text-decoration:none;color:#fff}
.buy.small{width:auto;padding:.5rem 1rem;margin:0;font-size:.9rem}
/* 🔴 The order is on its way. The button stops accepting taps and says so —
   a button that looks untouched after a tap gets tapped again, and on a slow
   connection that is several seconds of looking untouched. */
.buy.sending{display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--brand-dark);cursor:progress}
.buy:disabled{opacity:1}
.spinner{width:1.1em;height:1.1em;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 🔴 Someone who has asked their phone to stop animating gets a still ring
   and the words, which say the same thing. */
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.ghost{border:1px solid var(--line);background:none;color:var(--quiet);
  border-radius:12px;padding:.5rem 1rem;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;text-decoration:none}
a.ghost:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.link{border:0;background:none;color:var(--brand);font:inherit;cursor:pointer;padding:0}

/* ---- cart ---- */
.line{display:flex;gap:.8rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line)}
.line img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:8px;flex:0 0 auto}
.line .qty{display:flex;align-items:center;gap:.4rem}
.line .qty button{width:30px;height:30px;border:1px solid var(--line);background:none;
  color:inherit;border-radius:8px;font:inherit;cursor:pointer}
/* 🔴 The struck-through old price STACKS above the new one rather than
   sitting beside it. Side by side it needed 11em, which squeezed the product
   name into one word per line on a 375px phone. */
.line .amt{font-weight:700;min-width:5.5em;text-align:right;font-size:.92rem}
.line .amt s{display:block;font-weight:400;font-size:.8em;color:var(--quiet)}
.totals{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:1rem;font-size:1.15rem}
.totals b{color:var(--brand);font-size:1.3rem}
/* 🔴 On the cart the total and the Checkout button must NOT share a row —
   at 375px the price wraps onto three lines beside the button. */
.cart .totals{display:block;border-top:1px solid var(--line);padding-top:1rem}
.cart .totals p{display:flex;justify-content:space-between;align-items:baseline;margin:0}
.line .nm{flex:1;font-size:.92rem;min-width:0}
.summary{margin-bottom:1rem}

/* ---- forms ---- */
label{display:block;margin:.8rem 0}
label>span{display:block;font-size:.85rem;color:var(--quiet);margin-bottom:.25rem}
label i{font-style:normal;opacity:.7}
input,textarea,select{width:100%;padding:.7rem;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:var(--bg);color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
input[type=file]{padding:.4rem;border:1px dashed var(--line)}
.check{display:flex;align-items:center;gap:.5rem}
.check input{width:auto}
.check span{margin:0}

/* ---- thank you ---- */
.thanks{text-align:center;max-width:520px}
.thanks .tick{width:64px;height:64px;margin:1.5rem auto .5rem;border-radius:50%;
  background:var(--brand);color:#fff;font-size:2rem;line-height:64px}
.thanks .code{font-size:1.1rem}
.thanks .lines{list-style:none;padding:0;margin:1.5rem 0;text-align:left}
.thanks .lines li{display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.subline{display:flex;justify-content:space-between;color:var(--quiet);
  font-size:.92rem;margin:.2rem 0}
.thanks .tgfollow{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:1rem 0}
.thanks .tgfollow .buy{background:#229ED9;border-color:#229ED9}
.thanks .addr{background:var(--panel);padding:.8rem;border-radius:10px}
.state{display:inline-block;padding:.35rem 1rem;border-radius:999px;
  background:var(--panel);color:var(--quiet);font-weight:600;font-size:.9rem}
/* 🔴 Four live stages now, and they read as a journey rather than one green
   blob: waiting (amber) → confirmed (green) → being made (amber-deep) → gone
   (blue) → delivered (brand). A customer should be able to tell them apart at
   a glance without reading the sentence. */
.state.new{background:#fef3c7;color:#78350f}
.state.accepted{background:#dcfce7;color:#14532d}
.state.preparing{background:#fde68a;color:#78350f}
.state.shipped{background:#e0f2fe;color:#075985}
.state.done{background:var(--brand);color:#fff}
.state.declined{background:#fee2e2;color:#7f1d1d}
.find{max-width:420px}
.lost{max-width:420px;text-align:center;padding-top:3rem}

/* ---- footer ---- */
/* ---- the footer -------------------------------------------------------
   🔴 Rebuilt 22 Sep. It was one blob of free text, and iOS auto-linked the
   phone numbers inside it and coloured them — so it read as grey text with
   random teal numbers and one number stranded on its own line. Every piece is
   its own element now, and only the things you can actually tap are coloured. */
.foot{border-top:1px solid var(--line);margin-top:2.5rem;padding:1.8rem var(--gap) 2.2rem;
  text-align:center;color:var(--quiet);font-size:.88rem}
.foot p{margin:.3rem 0}
.foot-account{display:inline-block;padding:.5rem 1.1rem;border:1px solid var(--line);
  border-radius:999px;margin-bottom:1.2rem;font-weight:600}
.foot-account:hover{text-decoration:none;border-color:var(--brand)}
.reachtitle{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--quiet);margin:0 0 .5rem;font-weight:600}
.reach{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0 0 1.2rem}
.reach span{opacity:.4}
.reach a{padding:.4rem .2rem;min-height:24px;display:inline-block}

/* 🔴 ONE SHOP PER ROW. They were side by side and two Burmese addresses in
   two narrow columns read as one block of text you had to decode to see which
   number belonged to which city. Sky: "too ugly to see." */
.shops{display:flex;flex-direction:column;align-items:center;gap:1.1rem;margin-bottom:1rem}
.shop{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  max-width:24rem;line-height:1.6}
.shop b{color:var(--ink);font-size:.92rem}
.shop b::before{content:"📍 "}
/* 🔴 The address is NEVER a link. Only the phone number is, and it is the one
   thing in the block with any colour on it. */
.shop span{color:var(--quiet)}
.shop a{padding:.35rem 0;min-height:24px;display:inline-block;font-weight:600}

.foot .note{margin:1rem 0 0;line-height:1.7}
.foot .cod{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  color:var(--ink);font-weight:600}

.empty a,.added a,.thanks a{display:inline-block;padding:.45rem .3rem;min-height:24px}
.lang{min-height:28px;display:inline-flex;align-items:center}
.top nav a{min-height:28px;display:inline-flex;align-items:center}

/* Everything focusable says so, for anyone using a keyboard or a switch. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ==========================================================================
   The admin side. Same stylesheet on purpose — one file to keep consistent.
   ========================================================================== */
.adminbg{background:var(--panel)}
.admin{max-width:760px;margin:0 auto;background:var(--bg);min-height:100vh}
.atop{display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--gap);border-bottom:1px solid var(--line)}
.atop h1{margin:0;font-size:1.2rem}
.atabs{display:flex;gap:.3rem;padding:.6rem var(--gap);overflow-x:auto;
  border-bottom:1px solid var(--line)}
.atabs a{padding:.45rem .8rem;border-radius:999px;white-space:nowrap;
  color:var(--quiet);font-size:.92rem}
.atabs a.on{background:var(--brand);color:#fff}
.atabs a:hover{text-decoration:none}
/* six tabs since Pricing: on a phone Settings fell off the right edge unseen */
@media (max-width:480px){.atabs{gap:.15rem;padding-inline:.5rem}.atabs a{padding:.42rem .55rem;font-size:.84rem}}
.badge{background:#fff;color:var(--brand);border-radius:999px;
  padding:0 .4rem;font-size:.75rem;margin-left:.25rem}

.login{max-width:340px;margin:12vh auto;padding:2rem var(--gap)}
.login h1{text-align:center;margin-bottom:1.5rem}

/* ---- the order list ---- */
/* the seven-day picture at the top of the admin orders page */
.week{padding:1rem var(--gap);border-bottom:1px solid var(--line)}
.week h2{margin:0 0 .6rem;color:var(--quiet);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.6rem}
.tile{background:var(--panel);border-radius:12px;padding:.7rem .8rem}
.tile b{display:block;font-size:1.15rem;line-height:1.3}
.tile span{color:var(--quiet);font-size:.78rem}
.tile.hot{background:var(--brand);color:#fff}
.tile.hot span{color:#fff;opacity:.85}
.lowstock{margin:.8rem 0 0;color:#b45309;font-size:.9rem}

.orders{list-style:none;padding:0;margin:0}
.order{border-bottom:1px solid var(--line);padding:1rem var(--gap)}
.order.done,.order.declined{opacity:.55}
.order.failed{border-left:4px solid var(--warn);background:#fef2f2}
.order .head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ocode{font-size:1.1rem;letter-spacing:.06em}
.status{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  padding:.15rem .5rem;border-radius:999px;background:var(--panel);color:var(--quiet)}
.status.new{background:var(--brand);color:#fff}
.status.accepted{background:#dcfce7;color:#14532d}
.status.preparing{background:#fef3c7;color:#78350f}
.status.shipped{background:#e0f2fe;color:#075985}
.status.declined{background:#fee2e2;color:#7f1d1d}
.alarm{color:var(--warn);font-weight:600;font-size:.88rem;margin:.4rem 0}
.order .who{margin:.4rem 0 .1rem}
.order .addr,.order .note{margin:.1rem 0;color:var(--quiet);font-size:.9rem}
.order .total{font-weight:700;color:var(--brand);margin:.5rem 0}
.order .engrave{margin:.2rem 0;font-size:.92rem}
.order .pay{margin:.3rem 0;font-size:.85rem;color:var(--quiet)}
.order .usedpoints{margin:.2rem 0;font-size:.9rem;color:var(--brand);font-weight:600}
.order .pay.kpay{color:var(--good);font-weight:600}
.acts{display:flex;gap:.5rem;flex-wrap:wrap}
.fix{margin-top:.7rem}
.fix summary{cursor:pointer;color:var(--quiet);font-size:.85rem}
.fix summary:hover{color:var(--brand)}
.fix form{margin-top:.5rem}
.acts form{margin:0}

/* ---- the product editor ---- */
.newbox{margin:var(--gap);border:1px dashed var(--line);border-radius:var(--radius);
  padding:.8rem}
.newbox summary{cursor:pointer;font-weight:600;color:var(--brand)}
.types{list-style:none;padding:0;margin:.8rem 0}
.types li{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;
  border-bottom:1px solid var(--line)}
.types li span:first-child{flex:1;font-weight:600;font-size:.92rem}
/* the customers page */
.cpanel{padding:0 var(--gap) 1rem}
.ledger{list-style:none;padding:0;margin:.6rem 0}
.ledger li{display:flex;gap:.7rem;align-items:baseline;padding:.35rem 0;
  border-bottom:1px solid var(--line);font-size:.88rem}
.ledger b{min-width:2.5em}
.ledger b.up{color:var(--good)} .ledger b.down{color:var(--warn)}
.ledger li span:nth-child(2){flex:1}
.giveform{margin-top:.8rem}
.giveform .acts,.giveform button{margin-right:.5rem}
.types .ghost{padding:.3rem .7rem;font-size:.82rem}
.filter{padding:0 var(--gap) .6rem;display:flex;gap:.6rem;align-items:center}
.filter input{flex:1;margin:0}
.plist{list-style:none;padding:0;margin:0}
.plist>li{border-top:1px solid var(--line)}
/* one product per row, opening in place */
.prow>summary{display:flex;align-items:center;gap:.7rem;padding:.7rem var(--gap);
  cursor:pointer;list-style:none}
.prow>summary::-webkit-details-marker{display:none}
.prow>summary::after{content:"▸";margin-left:auto;color:var(--quiet);flex:0 0 auto}
.prow[open]>summary::after{content:"▾"}
.prow>summary:hover{background:var(--panel)}
.prow>summary img{width:40px;height:40px;object-fit:contain;background:#fff;
  border-radius:8px;flex:0 0 auto}
.prow>summary .nophoto{width:40px;height:40px;display:grid;place-items:center;
  background:var(--panel);border-radius:8px;flex:0 0 auto;font-size:.8rem}
.pname{font-weight:600;font-size:.95rem}
.pmeta{display:block;color:var(--quiet);font-size:.78rem}
.prow>summary>span:not(.nophoto){min-width:0}
.pedit{padding:1rem var(--gap)}
.pedit h3{margin:.3rem 0 .5rem;font-size:1rem}
.pedit .row{display:flex;gap:.6rem}
.pedit .row .cell{flex:1;margin:.5rem 0}
.shots.small{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 .6rem}
.shot-edit{margin:0;position:relative;width:64px}
.shot-edit img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:8px}
.shot-edit figcaption{font-size:.62rem;color:var(--brand);text-align:center;
  text-transform:uppercase;letter-spacing:.04em}
.shot-acts{display:flex;gap:.2rem;justify-content:center;margin-top:.15rem}
.shot-acts button{border:1px solid var(--line);background:var(--bg);color:var(--quiet);
  border-radius:6px;width:26px;height:26px;font-size:.85rem;line-height:1;cursor:pointer;padding:0}
.shot-acts button:hover{border-color:var(--brand);color:var(--brand)}
.shot-acts button.x:hover{border-color:var(--warn);color:var(--warn)}
.settings{padding:var(--gap)}

/* ---- the checkout's choices ------------------------------------------- */
/* one engraving block per stethoscope in the cart */
.itemfields{border:1px solid var(--line);border-radius:var(--radius);
  padding:.2rem 1rem 1rem;margin:.8rem 0;background:var(--panel)}
.itemfields h3{margin:.9rem 0 .2rem;font-size:.95rem}
.itemfields label{margin:.6rem 0}

.choose{border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem 1rem 1rem;margin:1.2rem 0}
.choose legend{padding:0 .4rem;font-size:.85rem;color:var(--quiet)}
.usepoints{border:1px solid var(--brand);border-radius:var(--radius);
  padding:.8rem 1rem;margin:1.2rem 0;background:var(--panel)}
/* 🔴 The pickup block and the transfer box are INDENTED under the choice
   that opened them, so it reads as "this belongs to that" rather than as a
   new question. They open downward and nothing above them moves. */
.pickup{margin:.2rem 0 .6rem 1.8rem;padding-left:.9rem;
  border-left:2px solid var(--line)}
.pickup .sub{margin:.9rem 0 .3rem;font-size:.85rem;color:var(--quiet);
  text-transform:uppercase;letter-spacing:.05em}
.kpay{margin-left:1.8rem}
.pickup .kpay{margin-left:0}
.kpay .amount{color:var(--brand);font-weight:700;font-size:1rem;margin:.2rem 0 .6rem}
.uploads{margin:.4rem 0 0;font-size:.85rem}
.uploads.busy{color:var(--quiet)}
.uploads.ok{color:var(--good);font-weight:600}
.uploads.bad{color:var(--warn);font-weight:600}
.hint[data-pickup-note]{margin:0 0 .6rem 1.8rem}

/* 🔴 The thank-you page's own blocks. It has no footer, so the contact row
   and the account explanation live here and have to carry themselves. */
.acctbox{border:1px solid var(--brand);border-radius:var(--radius);
  padding:1rem 1.1rem 1.2rem;margin:1.6rem 0;background:var(--panel)}
.acctbox h2{margin:0 0 .5rem;font-size:1.05rem;color:var(--brand)}
/* 🔴 The first box on the thank-you page, and the loud one: the points are
   the reason to come back. The account box under it is deliberately quieter. */
.points-first{border-width:2px}
.points-first .earn.big{margin:.2rem 0 .3rem;font-size:1.15rem}
.points-first .earn.big b{font-size:1.5rem;color:var(--brand)}
.acctbox p{margin:.5rem 0}
.acctbox .earn b{color:var(--brand)}
.acctbox .buy.small{display:inline-block;margin-top:.4rem}
.wrong{margin:1.4rem 0;color:var(--quiet);font-size:.92rem}
.wrong .reach{display:inline-flex;margin:0;gap:.4rem}
.wrong b{color:var(--ink)}

/* signing up, under the log-in form */
.signup{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.signup h2{font-size:1.05rem;margin:0 0 .3rem}

/* ---- the receipt, line by line ----------------------------------------
   🔴 Sky, 22 Sep: "you don't have to save space here.. cuz what we got is
   space.. and customers like more details on their receipt." Label left,
   value right, one per row, and the rows are allowed to be tall. */
.rbody{border:1px solid var(--line);border-radius:var(--radius);
  padding:.2rem 1rem 1rem;margin:1.2rem 0;text-align:left}
.ritem{padding:.9rem 0;border-bottom:1px solid var(--line)}
.ritem h3{margin:0 0 .5rem;font-size:1rem}
.rline{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin:.35rem 0;font-size:.92rem}
.rlabel{color:var(--quiet);flex:0 1 auto}
.rvalue{text-align:right;word-break:break-word}
.rline.cut .rvalue{color:var(--good)}
.rmoney{padding:.9rem 0;border-bottom:1px solid var(--line)}
.rline.grand{font-size:1.05rem;margin-top:.6rem}
.rline.grand .rlabel{color:var(--ink);font-weight:600}
.rline.grand .rvalue b{color:var(--brand);font-size:1.15rem}
.rmeta{padding:.9rem 0 .2rem}

/* the account page */
.account section{margin:1.6rem 0}
.acct-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.points{background:var(--panel);border-radius:var(--radius);padding:1.2rem;text-align:center}
.points .big{font-size:3rem;font-weight:800;color:var(--brand);margin:0;line-height:1}
.points .big span{font-size:1rem;font-weight:600;color:var(--ink);margin-left:.5rem}
.points .worth{margin:.4rem 0 0;color:var(--quiet)}
.steps{margin:.6rem 0 0;padding-left:1.3rem;color:var(--quiet);line-height:1.8}
.steps li{margin:.2rem 0}
.account h3{margin:1.2rem 0 0;font-size:.95rem}
.linkbox{display:flex;gap:.5rem}
.linkbox input{font-size:.85rem}
/* 🔴 One tap to send the link, with the message already written. The scheme
   worked and nobody used it, because using it meant select, copy, switch
   app, paste, then think of something to say. */
/* 🔴 The three share buttons that were here are gone. The Viber one opened
   Viber to "Request Unavailable" on his own phone — a button that opens an
   app to an error is worse than no button. A box with the link in it and a
   Copy beside it always works: every app on that phone takes a paste. */
.shareline{margin:.9rem 0 .4rem}
.copied{margin:.5rem 0 0;font-size:.85rem}
.myorders{list-style:none;padding:0;margin:0}
.myorder{border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem;margin:.7rem 0}
.myorder .head{display:flex;justify-content:space-between;align-items:baseline}
.myorder .what{list-style:none;padding:0;margin:.6rem 0;color:var(--quiet);font-size:.9rem}
.myorder .total{margin:0;font-weight:700;color:var(--brand)}
.login-inline{max-width:340px}
.pick{display:flex;align-items:center;gap:.6rem;margin:.5rem 0;cursor:pointer}
.pick input{width:auto;flex:0 0 auto;accent-color:var(--brand)}
.pick span{margin:0}
/* 🔴 A greyed choice with no reason next to it just looks broken. */
.pick.off{opacity:.45;cursor:not-allowed}
.hint{display:block;color:var(--quiet);font-size:.82rem;margin-top:.25rem}
.hint.blocked{color:#b45309;margin:0 0 .6rem 1.8rem}
.kpay{background:var(--panel);border-radius:10px;padding:.8rem;margin-top:.6rem}
.kpay p{margin:0 0 .4rem}
.kpay b{font-size:1.05rem;letter-spacing:.02em}

/* ---- Pricing tab ------------------------------------------------------- */
.pknobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem .9rem;align-items:end}
.pknobs label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--quiet)}
.pknobs input{padding:.45rem .5rem;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font-size:.95rem}
.pknobs button{grid-column:1/-1;justify-self:start}
.pgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.5rem;margin:.5rem 0}
.pgroup{display:flex;align-items:center;gap:.4rem;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:.4rem .5rem}
.pgroup .glab{font-size:.82rem;color:var(--quiet);white-space:nowrap}
.pgroup input{flex:1;min-width:0;padding:.35rem .45rem;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink)}
.papply{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.pcards{list-style:none;padding:0;margin:1rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gap)}
.pcard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.phead{display:flex;gap:.6rem;padding:.6rem}
.phead img{width:78px;height:78px;object-fit:contain;background:#fff;border-radius:10px;flex:0 0 auto}
.phead .nophoto{width:78px;height:78px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border-radius:10px;color:var(--quiet);flex:0 0 auto}
.pinfo{min-width:0}
.pname{font-weight:600;font-size:.95rem}
.pmkt{font-size:.78rem;color:var(--quiet);margin:.1rem 0 .3rem}
.pchips{display:flex;flex-wrap:wrap;gap:.3rem}
.pchip{font-size:.72rem;color:var(--quiet);border:1px solid var(--line);border-radius:7px;padding:.1rem .4rem}
.pchip.hi b{color:var(--warn)}.pchip.lo b{color:var(--good)}
.pflow{border-top:1px solid var(--line);padding:.55rem .7rem;font-size:.85rem}
.pflow .pr{display:flex;justify-content:space-between;gap:.6rem;margin:.18rem 0}
.pflow .pr span{color:var(--quiet)}
.pflow .cust b{color:var(--brand)}
.pflow .rec{color:var(--brand);font-size:1.05rem}
.pflow .neg{color:var(--warn)}
.pflow .psep{height:1px;background:var(--line);margin:.35rem 0}
.pflow .net b{font-size:1.05rem}
.pflow .net .pos{color:var(--good)}.pflow .net .neg{color:var(--warn)}
.pbrk{margin:.25rem 0}
.pbrk>summary{cursor:pointer;color:var(--quiet);font-size:.78rem}
.pbadge{display:inline-block;margin-top:.4rem;font-size:.72rem;padding:.1rem .5rem;border-radius:999px}
.b-good{background:rgba(21,128,61,.14);color:var(--good)}
.b-bad{background:rgba(185,28,28,.14);color:var(--warn)}
.b-warn{background:rgba(180,120,10,.16);color:#a1670a}
.b-neu{background:var(--panel);color:var(--quiet)}
.psave{border-top:1px solid var(--line);padding:.55rem .7rem;display:grid;gap:.45rem}
.prow2{display:flex;align-items:end;gap:.5rem}
.prow2 label{flex:1;display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--quiet)}
.prow2 input{padding:.45rem .5rem;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font-size:.95rem}
.psummary{font-size:.85rem;color:var(--quiet);margin:.4rem 0 .8rem}
.psummary b{color:var(--ink)}.psummary .neg b{color:var(--warn)}
.pdiff{width:100%;border-collapse:collapse;font-size:.9rem;margin:.6rem 0}
.pdiff td{padding:.4rem .3rem;border-bottom:1px solid var(--line)}.pdiff .num{text-align:right;white-space:nowrap}
.pbares{list-style:none;padding:0;margin:.5rem 0;display:grid;gap:.4rem}
.pbare{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem}
.pbare small{display:block;color:var(--quiet)}
.pbare form{display:flex;gap:.4rem;align-items:center}
.pbare input{width:6rem;padding:.35rem .45rem;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink)}
/* Admin → Chats (5.1) */
.chats{list-style:none;padding:0;margin:0}
.chatrow a{display:block;padding:.7rem .8rem;border:1px solid var(--line,#2a3331);border-radius:12px;margin:.5rem 0;color:inherit}
.chatrow a:hover{text-decoration:none;border-color:var(--brand)}
.chatrow .note{margin:.3rem 0}
.thread{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:85%;padding:.5rem .7rem;border-radius:12px;background:var(--panel)}
.msg p{margin:.2rem 0 0;white-space:pre-wrap;word-break:break-word}
.msg .who{font-size:.75rem;opacity:.7}
.msg.customer{align-self:flex-start}
.msg.bot,.msg.shop{align-self:flex-end;background:rgba(80,200,170,.15)}
.msg.shop{background:rgba(34,158,217,.18)}
/* "Message us on Messenger" (5.1) */
.messenger{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.6rem 0;
  padding:.75rem 1rem;border-radius:12px;background:#0084FF;color:#fff;font-weight:600}
.messenger:hover{text-decoration:none;color:#fff;background:#0070d8}
.msgbubble{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;
  background:#0084FF;color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:50}
.msgbubble:hover{text-decoration:none;background:#0070d8}
/* Photo dots under the product strip (12 Oct) — 24px tap targets, small dots. */
.product .dots{display:flex;justify-content:center;gap:2px;margin:.3rem 0 .2rem}
.product .dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.product .dots button::after{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--muted,#6b7a77);opacity:.5}
.product .dots button.on::after{background:var(--brand);opacity:1}
/* "Messenger didn't open? Chat in the browser →" — only ever on request (12 Oct) */
.noapp{position:fixed;left:16px;right:16px;bottom:84px;z-index:60;padding:.8rem 1rem;border-radius:12px;
  background:#1f2a28;color:#fff;border:1px solid #0084FF;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.noapp:hover{text-decoration:none;color:#fff}

/* ---- ☰ menu (5.6) — a checkbox is the switch, so it needs no JavaScript ---- */
.menubtn{font-size:1.35rem;line-height:1;padding:.3rem .45rem;cursor:pointer;color:var(--ink);
  border-radius:10px;user-select:none;min-width:36px;text-align:center}
.menubtn:hover{color:var(--brand)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px);z-index:80;background:var(--bg);
  border-left:1px solid var(--line);padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;
  transform:translateX(105%);transition:transform .22s ease;box-shadow:-8px 0 24px rgba(0,0,0,.25)}
.drawer a{display:block;padding:.75rem .5rem;border-radius:10px;color:var(--ink)}
.drawer a:hover{background:var(--panel);text-decoration:none}
.drawerclose{align-self:flex-end;padding:.4rem .6rem;cursor:pointer;color:var(--quiet)}
.drawerlang{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.4rem .5rem .8rem;
  border-bottom:1px solid var(--line);margin-bottom:.4rem}
.drawerlang span{width:100%;color:var(--quiet);font-size:.85rem}
.drawerlang a{display:inline-block;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px}
.drawerlang a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.scrim,.chatscrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:none}
.navtoggle:checked ~ .drawer{transform:none}
.navtoggle:checked ~ .scrim{display:block}

/* ---- "How can we help?" behind the blue bubble (5.6) ---- */
label.msgbubble{cursor:pointer}
.chatsheet{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--bg);border-radius:18px 18px 0 0;
  padding:1rem var(--gap) 1.4rem;transform:translateY(105%);transition:transform .22s ease;
  box-shadow:0 -8px 24px rgba(0,0,0,.3);max-width:560px;margin:0 auto}
.chattoggle:checked ~ .chatsheet{transform:none}
.chattoggle:checked ~ .chatscrim{display:block}
.sheethead{display:flex;justify-content:space-between;align-items:center;margin:0 0 .4rem;font-size:1.1rem}
.sheetclose{cursor:pointer;padding:.3rem .5rem;color:var(--quiet)}
.sheetsub{margin:.9rem 0 .4rem;color:var(--quiet);font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
.sheetbtn{display:block;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-align:center;font-weight:600}
.sheetbtn:hover{text-decoration:none;border-color:var(--brand)}
.sheetbtn.bot{background:#229ED9;border-color:#229ED9;color:#fff}
.sheetbtn.msg{background:#0084FF;border-color:#0084FF;color:#fff}
.sheetnote{margin:.35rem 0 0;font-size:.82rem}
.sheetgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* ---- /help (5.6) ---- */
.help h1{margin-bottom:.4rem}
.helpsec{padding:1rem 0;border-top:1px solid var(--line);scroll-margin-top:84px}  /* below the pinned header */
.helpsec h2{font-size:1.15rem;margin:.2rem 0 .5rem}
.helpsec li{margin:.35rem 0}
.helpsec .kpay{background:var(--panel);padding:.6rem .8rem;border-radius:10px;margin:.3rem 0}
.contactopts{max-width:480px}

/* ==========================================================================
   5.21 — THE CHECKOUT, rebuilt (14 Oct 2026).
   Sky: "that's where the process make customer doubt.. no shady design."
   Shaped like the big shops' checkouts: the order in its own card (beside the
   form on a wide screen, above it on a phone), numbered questions in cards,
   choices that are whole tappable cards with what they MEAN under them, the
   amount to transfer big, and one line that says what happens next.
   🔴 At the END of the file on purpose: these override older rules above
   (.choose, .pick, .pickup, .kpay, label>span) and a block above the rules it
   overrides does nothing at all — CLAUDE.md, 22 Sep.
   ========================================================================== */
:root{--tint:#ecf7f5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.checkout{max-width:1040px}
.checkout h1{margin:.2rem 0 .2rem}
.ck-assure{color:var(--quiet);font-size:.9rem;margin:0 0 1.1rem}
.ck-grid{display:flex;flex-direction:column;gap:1rem}
.ck-form{counter-reset:step}

/* the order */
.ck-summary{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem}
.ck-summary h2{font-size:1.05rem;margin:0 0 .2rem}
.ck-summary .summary{margin:0}
.ck-summary .line{padding:.6rem 0}
.ck-summary .line:last-child{border-bottom:0}
.ck-sums{border-top:1px solid var(--line);padding-top:.5rem}
.ck-sums p{display:flex;justify-content:space-between;gap:1rem;margin:.3rem 0;
  font-size:.92rem;color:var(--quiet)}
.ck-sums .free,.ck-sums .cut{color:var(--good);font-weight:600}
.ck-sums .ck-total{color:var(--ink);font-size:1.1rem;font-weight:600;align-items:baseline;
  border-top:1px solid var(--line);padding-top:.6rem;margin-top:.5rem}
.ck-sums .ck-total b{color:var(--brand);font-size:1.35rem}

/* the numbered questions */
.ck-step{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;
  margin:0 0 1rem;background:var(--bg)}
.ck-step>h2,.ck-step legend h2{font-size:1.05rem;margin:0 0 .7rem;display:flex;
  align-items:center;gap:.55rem;flex-wrap:wrap}
.ck-step>h2::before,.ck-step legend h2::before{counter-increment:step;content:counter(step);
  flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--brand);
  color:#fff;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center}
.badge{font-size:.72rem;font-weight:700;color:var(--brand);background:var(--tint);
  border-radius:999px;padding:.12rem .55rem}
.ck-step fieldset.choose,.ck-step .choose{border:0;padding:0;margin:0}
.ck-step legend{padding:0;width:100%}
.ck-step .ck-field{margin:.2rem 0 0}
.ck-step .hint{font-size:.84rem;margin:.45rem 0 0}
.ck-step .itemfields{margin:.7rem 0 0}

/* every choice is a whole card you can tap */
.ck-step label.pick,.ck-tiles .tile{border:1px solid var(--line);border-radius:12px;background:var(--bg);
  padding:.75rem .85rem;margin:.5rem 0;align-items:flex-start;gap:.7rem;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background .15s}
.ck-step label.pick>input,.ck-tiles .tile>input{width:1.15rem;height:1.15rem;margin:.15rem 0 0;
  flex:0 0 auto;accent-color:var(--brand)}
.ck-step label.pick>span,.ck-tiles .tile>span{display:flex;flex-direction:column;gap:.12rem;margin:0;
  font-size:.97rem;color:var(--ink);line-height:1.4}
.ck-step label.pick small,.ck-tiles .tile small{color:var(--quiet);font-size:.84rem;font-weight:400}
.ck-step label.pick.on,.ck-tiles .tile.on{border-color:var(--brand);background:var(--tint);
  box-shadow:inset 0 0 0 1px var(--brand)}
.ck-step label.pick.off{opacity:.5}
.ck-step .hint.blocked{margin:-.2rem 0 .6rem .3rem}
.ck-step .usepoints{border-color:var(--brand)}
.ck-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ck-tiles .tile{display:flex;margin:0}
.ck-tiles .tile b{font-size:1rem}

/* what each tile opens — UNDER both tiles, so nothing above the finger moves */
[data-address-box]{margin-top:.8rem}
.ck-step .pickup{margin:.8rem 0 0;padding:0;border:0}
.ck-step .pickup .sub{margin:.8rem 0 .2rem}

/* the transfer box: the amount first, big, then where, then the picture */
.ck-step .kpay{margin:.1rem 0 .8rem;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);padding:.9rem}
.kpay .amount{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;margin:0 0 .8rem}
.kpay .amount span{font-size:.78rem;font-weight:700;color:var(--quiet);
  text-transform:uppercase;letter-spacing:.05em}
.kpay .amount b{font-size:1.6rem;color:var(--ink);letter-spacing:0;line-height:1.2}
.kpay .amount small{font-size:.86rem;color:var(--quiet);font-weight:500}
.kpay-to{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:0 .8rem;margin:0 0 .8rem}
.kpay-to p{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0;padding:.55rem 0}
.kpay-to p+p{border-top:1px solid var(--line)}
.kpay-to span{flex:1 1 100%;color:var(--quiet);font-size:.8rem;margin-bottom:-.35rem}
.kpay-to b{font-size:1.1rem;letter-spacing:.03em}
.kpay-to .copy{margin-left:auto}
.ghost.copy{padding:.3rem .75rem;font-size:.85rem;border-radius:8px;color:var(--brand);
  border-color:var(--brand)}
.kpay label.ck-shot{margin:0}
.kpay input[type=file]{background:var(--bg);border:1px dashed var(--brand);padding:.55rem;font-size:.85rem}
.kpay input[type=file]::file-selector-button{border:0;background:var(--brand);color:#fff;
  border-radius:8px;padding:.45rem .8rem;margin-right:.7rem;font:inherit;font-weight:600;cursor:pointer}
.kpay .uploads.bad{background:#fee2e2;color:#7f1d1d;padding:.5rem .7rem;border-radius:8px}

/* what happens next — one sentence, true for the choice made */
.ck-next{border:1px dashed var(--line);border-radius:var(--radius);padding:.9rem 1rem;
  margin:0 0 .9rem;background:var(--panel)}
.ck-next.set{border-style:solid;border-color:var(--brand);background:var(--tint)}
.ck-next h2{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--quiet);margin:0 0 .3rem}
.ck-next p{margin:0;font-size:.95rem}
.buy.ck-place{font-size:1.05rem;padding:1rem;margin:.2rem 0 .6rem;
  box-shadow:0 6px 18px rgba(15,118,110,.25)}

/* a wide screen: the order beside the form and following it down */
@media (min-width:860px){
  .ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:1.5rem}
  .ck-summary{order:2;position:sticky;top:84px}
  .ck-form{order:1}
}

/* ---- 5.21 — the thank-you page: did it go through, what happens now ---- */
.thanks{max-width:560px}
.ty-head{margin-bottom:.4rem}
.ty-head h1{font-size:1.45rem}
.ty-placed{margin:.5rem 0 0}
.ty-steps,.ty-receipt,.ty-help{text-align:left;border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.1rem;margin:1.2rem 0;background:var(--bg)}
.ty-steps h2,.ty-receipt h2,.ty-help h2{font-size:1.05rem;margin:0 0 .8rem}
.ty-steps ol{list-style:none;margin:0;padding:0}
.ty-steps li{display:flex;gap:.8rem;position:relative;padding:0 0 1.1rem}
.ty-steps li:last-child{padding-bottom:0}
/* the line joining one step to the next — brand-coloured once it is behind them */
.ty-steps li:not(:last-child)::after{content:"";position:absolute;left:calc(.8rem - 1px);
  top:1.8rem;bottom:.15rem;width:2px;background:var(--line)}
.ty-steps li.done::after{background:var(--brand)}
.ty-steps .mark{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;
  border:2px solid var(--line);background:var(--bg);color:var(--quiet);
  display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.ty-steps li.done .mark{background:var(--brand);border-color:var(--brand);color:#fff}
.ty-steps li.now .mark{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px var(--tint)}
.ty-steps li>div{min-width:0}
.st-title{margin:.1rem 0 .15rem;font-weight:600}
.ty-steps li:not(.done):not(.now) .st-title{color:var(--quiet)}
.st-tag{font-size:.68rem;font-weight:700;color:var(--brand);background:var(--tint);
  border-radius:999px;padding:.1rem .5rem;margin-left:.3rem;vertical-align:middle}
.st-sub{margin:.15rem 0;color:var(--quiet);font-size:.9rem}
.ty-receipt .rbody{border:0;padding:0;margin:0}
.ty-receipt .ritem:first-child{padding-top:0}
.ty-help p{margin:.3rem 0}
.ty-help .reach{justify-content:flex-start;gap:.5rem;margin:.6rem 0}
.ty-help .reach a{border:1px solid var(--line);border-radius:999px;padding:.4rem .95rem;font-weight:600}
.ty-help .reach a:hover{border-color:var(--brand);text-decoration:none}
.ty-back{text-align:center}

/* ==========================================================================
   5.22 — browsing that keeps people, and the free name tag draw.
   Sky: "let customers browse better and make them stay longer or avoiding them
   to feel overwhelmed." Fewer words per card, a reason to go one step deeper
   at every dead end, and the facts a first-time buyer worries about said once.
   At the END of the file — these override older rules (CLAUDE.md, 22 Sep).
   ========================================================================== */

/* the four facts, as a quiet row that scrolls if it must */
.trust{list-style:none;margin:0 0 .9rem;padding:0;display:flex;gap:.45rem;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trust::-webkit-scrollbar{display:none}
.trust li{flex:0 0 auto;font-size:.8rem;color:var(--quiet);background:var(--panel);
  border-radius:999px;padding:.32rem .75rem;white-space:nowrap}
.product .trust,.cart .trust{flex-wrap:wrap;overflow:visible;margin:1rem 0}

/* cards: colour big, code small — the type is already the heading */
.card h2{margin:.55rem 0 0}
.card .code{padding:0 .7rem;margin:.05rem 0 0;font-size:.78rem;color:var(--quiet)}
.shot{background:linear-gradient(135deg,#fff,#f3f6f5)}
section h1 .count{font-size:.8rem;font-weight:500;color:var(--quiet);margin-left:.35rem}

/* the draw, one line on the shop front and the account page */
.drawbanner{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;margin:0 0 1.3rem;
  border-radius:var(--radius);background:linear-gradient(120deg,var(--tint),var(--panel));
  border:1px solid var(--brand);color:var(--ink);font-size:.92rem;line-height:1.35}
.drawbanner:hover{text-decoration:none;border-color:var(--brand-dark)}
.drawbanner .gift{font-size:1.5rem;flex:0 0 auto}
.drawbanner span:not(.gift){flex:1}
.drawbanner b{color:var(--brand);white-space:nowrap;font-size:.88rem}
.drawer a.drawerdraw{background:var(--tint);color:var(--brand);font-weight:600;margin:.2rem 0 .4rem}

/* the product page: more of the same type, to swipe */
.product .more{margin:1.6rem 0 1rem}
.product .more h2{font-size:1rem;margin:0 0 .6rem}

/* the cart: what it earns, and the way back */
.cart .earns{margin:.6rem 0 0;font-size:.88rem;color:var(--good);background:var(--panel);
  border-radius:10px;padding:.55rem .75rem}
.cart .keep{text-align:center;margin:.4rem 0 0}

/* the thank-you page: what an account is for; Telegram quieter, lower */
.acct-what{margin:.6rem 0 .2rem;font-weight:600}
.acct-why{list-style:none;margin:0 0 .6rem;padding:0;display:inline-block;text-align:left}
.acct-why li{position:relative;padding-left:1.4rem;margin:.3rem 0;font-size:.93rem}
.acct-why li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.thanks .tgfollow{border-top:1px solid var(--line);padding-top:1.1rem;margin:1.4rem 0}
.tglater{margin:0;font-weight:600}
.ghost.tgbtn{border-color:#229ED9;color:#1c8fc6;font-weight:600;padding:.55rem 1.1rem}

/* ---- /giveaway ---------------------------------------------------------- */
.giveaway{max-width:560px}
.gv-hero{text-align:center;margin:.4rem 0 1.4rem}
.gv-tag{width:min(300px,85%);height:auto;margin:.6rem auto .4rem;display:block;
  filter:drop-shadow(0 8px 16px rgba(15,60,55,.18))}
.gv-hero h1{font-size:1.45rem;line-height:1.3;margin:.6rem 0 .4rem}
.gv-hero .lead{color:var(--quiet);margin:0 auto 1rem;max-width:30rem}
.gv-clock{display:inline-block;min-width:16rem;border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem 1.2rem;background:var(--panel)}
.gv-clock p{margin:.1rem 0}
.gv-clock .lbl{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.gv-clock .when{font-weight:700;font-size:1.1rem}
.gv-clock .countdown{font-variant-numeric:tabular-nums;color:var(--brand);font-weight:700;font-size:1.25rem}
.gv-steps .st-sub{margin:.2rem 0 .5rem}
.gv-form{margin:.4rem 0 .2rem;max-width:340px}
.gv-form label{margin:.5rem 0}
.gv-form .buy{margin:.6rem 0 .2rem}
.gv-login{margin:.4rem 0 .2rem}
.gv-login summary{color:var(--brand);cursor:pointer;padding:.3rem 0;font-size:.92rem}
.buy.tgbuy{background:#229ED9;display:inline-block;width:auto;padding:.75rem 1.2rem;margin:.3rem 0}
.buy.ghostbuy{background:none;border:1px solid var(--brand);color:var(--brand)}
.gv-in,.gv-won,.gv-rules,.gv-winners{border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;margin:1.2rem 0}
.gv-in{border:2px solid var(--brand);background:var(--tint);text-align:center}
.gv-ok{margin:0;font-weight:700;color:var(--brand);font-size:1.1rem}
.gv-count{margin:.2rem 0 .3rem;font-size:1.6rem;font-weight:800}
.gv-why{list-style:none;padding:0;margin:0 0 .4rem;color:var(--quiet);font-size:.9rem}
.gv-more{text-align:left;border-top:1px solid var(--line);margin-top:.9rem;padding-top:.6rem}
.gv-more h2{font-size:1rem;margin:.3rem 0}
.gv-won{border:2px solid var(--brand)}
.gv-won h2{margin:0 0 .3rem;font-size:1.2rem}
.gv-won .sub{margin:.8rem 0 .2rem;font-weight:600}
.gv-won label.pick{border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;align-items:flex-start}
.gv-won label.pick>span{display:flex;flex-direction:column;color:var(--ink);font-size:.95rem}
.gv-won label.pick small{color:var(--quiet);font-size:.82rem}
.gv-rules h2,.gv-winners h2{font-size:1rem;margin:0 0 .5rem}
.gv-rules ul{margin:0;padding-left:1.2rem;color:var(--quiet);font-size:.92rem}
.gv-rules li{margin:.35rem 0}
.gv-winners ul{list-style:none;margin:0;padding:0}
.gv-winners li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;
  border-bottom:1px solid var(--line);font-size:.9rem}
.gv-winners li:last-child{border-bottom:0}
.gv-winners li span{color:var(--quiet)}
.daypick{display:flex;flex-wrap:wrap;gap:.3rem .9rem}
/* the name and its code sit together; the space goes under the code */
.card:has(.code) h2{flex:0 0 auto}
.card .code{flex:1 1 auto}