/* =========================================================
   MORAI layout v2
   Compact hero, category sidebar, order tracking, live support.
   Loaded after styles.css so these rules win.
   ========================================================= */

/* ---- hero is now one column and much shorter ---- */
.hero{padding:34px 0 26px}
.hero__in{display:block;max-width:760px}
.hero h1{font-size:clamp(34px,4.8vw,52px)}
.hero__lead{margin-top:16px;font-size:16px;max-width:62ch}
.search{margin-top:24px}
.hero__trust{margin-top:22px;gap:18px}

.nav__link--btn{
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  cursor:pointer;font-family:inherit;
}
.nav__link--btn:hover{border-color:var(--line-2)}

/* ---- shop: grid on the left, categories pinned right ---- */
.section--shop{padding-top:26px}
.shop{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:22px;align-items:start}
.shop__main{min-width:0}
.shop__side{display:flex;flex-direction:column;gap:14px;position:sticky;top:104px}

.side{
  padding:18px;border-radius:var(--r-xl);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:var(--shadow-sm);
}
.side__h{font-size:14.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:13px}
.side__p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:13px}
.side--promo{background:var(--grad-soft)}

/* vertical category list */
.catlist{display:flex;flex-direction:column;gap:5px}
.catlist .cat{padding:9px 11px;border-radius:12px;gap:10px;background:transparent;border-color:transparent}
.catlist .cat::after{display:none}
.catlist .cat:hover{transform:none;background:rgba(255,255,255,.06);border-color:var(--line);box-shadow:none}
.catlist .cat.is-active{background:rgba(124,92,255,.15);border-color:rgba(124,92,255,.5)}
.catlist .cat__icon{width:30px;height:30px;border-radius:9px;font-size:14px}
.catlist .cat__name{font-size:13px}
.catlist .cat__note{display:none}
.catlist .cat__meta{flex-direction:row;align-items:center;gap:6px}
.catlist .cat__n{min-width:22px;height:19px;font-size:11px;padding:0 6px}
.catlist .cat__from{display:none}

/* the grid lives in a narrower column now */
.section--shop .grid{grid-template-columns:repeat(3,1fr)}

/* ---- order tracking ---- */
.track__form{display:flex;gap:9px;margin:18px 0 6px}
.track__form .input{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.track__res{margin-top:16px}
.track__code{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:13px;background:rgba(255,255,255,.04);
  border:1px dashed var(--line-2);margin-bottom:14px;
}
.track__code b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;font-size:15px}
.pipe{display:flex;gap:6px;margin:16px 0}
.pipe__step{
  flex:1;text-align:center;padding:9px 6px;border-radius:11px;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted-2);
}
.pipe__step.is-on{background:rgba(74,222,128,.13);border-color:rgba(74,222,128,.35);color:var(--ok)}
.olist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.oline{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;
}
.oline b{margin-left:auto;font-weight:800}
.oline i{font-style:normal;color:var(--muted-2);font-size:12px}

.footer__btn{
  display:block;padding:6px 0;font-size:13.5px;color:var(--muted-2);
  background:none;border:0;cursor:pointer;text-align:left;transition:.18s;font-family:inherit;
}
.footer__btn:hover{color:var(--text);transform:translateX(3px)}

/* =========================================================
   Live support
   ========================================================= */
.support{
  position:fixed;right:22px;bottom:22px;z-index:110;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}

.support__fab{
  position:relative;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;order:2;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  box-shadow:0 16px 38px -14px rgba(124,92,255,1),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s;
}
.support__fab:hover{transform:scale(1.07)}
.support__fab svg{width:26px;height:26px}
.support__fabIcon,.support__fabClose{
  position:absolute;display:grid;place-items:center;
  transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.3,1);
}
.support__fabClose{font-size:20px;opacity:0;transform:rotate(-90deg) scale(.6)}
.support.is-open .support__fabIcon{opacity:0;transform:rotate(90deg) scale(.6)}
.support.is-open .support__fabClose{opacity:1;transform:none}

.support__ping{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(124,92,255,.55);animation:ping 2.4s infinite;
}
.support.is-open .support__ping{display:none}

.support__panel{
  order:1;width:min(374px,calc(100vw - 34px));height:min(540px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;border:1px solid var(--line-2);background:var(--bg-2);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.95);
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transform-origin:bottom right;
  transition:opacity .26s,transform .3s cubic-bezier(.2,.8,.3,1);
}
.support.is-open .support__panel{opacity:1;transform:none;pointer-events:auto}

.support__head{
  display:flex;align-items:center;gap:11px;padding:15px 16px;flex:none;
  background:var(--grad);color:#fff;
}
.support__avatar{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
}
.support__avatar svg{width:24px;height:24px}
.support__who{display:flex;flex-direction:column;min-width:0;flex:1}
.support__who b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.support__who i{font-style:normal;font-size:11.5px;opacity:.88;display:flex;align-items:center;gap:6px}
.support__who i::before{content:"";width:6px;height:6px;border-radius:50%;background:#86efac;flex:none}
.support__head .iconbtn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);color:#fff}
.support__head .iconbtn:hover{background:rgba(255,255,255,.28);color:#fff}

.support__log{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.028) 1px,transparent 1.4px) 0 0/22px 22px;
}
.msg{display:flex;gap:9px;max-width:88%;animation:fadeUp .3s cubic-bezier(.2,.8,.3,1)}
.msg__b{
  padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.55;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-bottom-left-radius:5px;
}
.msg--me{align-self:flex-end;flex-direction:row-reverse}
.msg--me .msg__b{
  background:var(--grad);color:#fff;border-color:transparent;
  border-bottom-left-radius:16px;border-bottom-right-radius:5px;
}
.msg__av{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(124,92,255,.16);border:1px solid var(--line);color:#b3a4ff;font-size:12px;font-weight:800;
}
.msg--me .msg__av{background:rgba(255,255,255,.07);color:var(--muted)}
.msg__time{display:block;margin-top:5px;font-size:10.5px;opacity:.6}

.typing{display:flex;gap:4px;padding:13px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.support__quick{display:flex;gap:6px;padding:0 16px 10px;flex-wrap:wrap;flex:none}
.qk{
  padding:7px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;
  background:rgba(124,92,255,.12);border:1px solid rgba(167,139,250,.3);color:#c7bdf5;transition:.18s;
}
.qk:hover{background:rgba(124,92,255,.22)}

.support__form{
  display:flex;align-items:flex-end;gap:8px;padding:12px 14px;flex:none;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02);
}
.support__form textarea{
  flex:1;resize:none;max-height:96px;padding:10px 13px;border-radius:14px;font-size:13.5px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);outline:none;line-height:1.5;
  font-family:inherit;color:inherit;
}
.support__form textarea:focus{border-color:rgba(124,92,255,.6);box-shadow:0 0 0 3px rgba(124,92,255,.13)}
.support__send{
  width:40px;height:40px;border-radius:13px;border:0;cursor:pointer;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;box-shadow:0 8px 20px -10px rgba(124,92,255,.95);transition:.2s;
}
.support__send:hover{transform:scale(1.06)}
.support__send svg{width:19px;height:19px}
.support__foot{padding:0 16px 12px;font-size:10.5px;color:var(--muted-2);text-align:center;flex:none}

/* ---- responsive ---- */
@media (max-width:1080px){
  .shop{grid-template-columns:1fr}
  .shop__side{position:static;flex-direction:row;flex-wrap:wrap}
  .shop__side .side{flex:1;min-width:260px}
  .catlist{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .section--shop .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .section--shop .grid{grid-template-columns:repeat(2,1fr)}
  .support{right:14px;bottom:14px}
  .support__panel{height:min(500px,calc(100vh - 120px))}
  .catlist{grid-template-columns:1fr}
}
@media (max-width:430px){
  .section--shop .grid{grid-template-columns:1fr}
}

/* logo tile variants: colour marks need a dark plate, not the violet one */
.logo__mark--dark{background:#0d0f1c;border:1px solid rgba(255,255,255,.12);box-shadow:none}
.logo__mark--bare{background:none;box-shadow:none}
.logo__mark--bare svg{width:38px;height:38px}
.logo__mark svg{width:24px;height:24px}

/* Same reason as in admin.css: .support sets display:flex, which would
   override the hidden attribute and show the widget even when it is off. */
[hidden]{display:none!important}

/* =========================================================
   v3: logo marquee above the headline, stats down the left
   ========================================================= */

.hero{padding:0 0 26px}

/* ---- the scrolling strip ---- */
.marquee{
  position:relative;overflow:hidden;padding:16px 0 18px;
  border-bottom:1px solid var(--line);margin-bottom:30px;
  /* fade both ends so items appear out of nothing */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:10px;width:max-content;
  animation:slide 70s linear infinite;
}
/* the track holds the list twice, so -50% lands exactly on the copy */
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

.mq{
  display:flex;align-items:center;gap:9px;flex:none;
  padding:8px 14px 8px 8px;border-radius:30px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:border-color .2s,background .2s;
}
.marquee:hover .mq{border-color:var(--line-2)}
.mq__art{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  overflow:hidden;
}
.mq__art img{width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1)}
.mq__art span{font-size:14px;line-height:1}
.mq__n{font-size:12.5px;font-weight:650;white-space:nowrap;color:var(--muted)}

/* ---- hero: stats column, then the copy ---- */
.hero__grid{
  display:grid;grid-template-columns:288px minmax(0,1fr);gap:34px;align-items:center;
  padding-bottom:6px;
}
.hero__stats{display:flex;flex-direction:column;gap:11px;min-width:0}
.hero__copy{min-width:0}

/* the cards are narrow now, so tighten everything inside them */
.hero__stats .stat{padding:15px 17px 13px;border-radius:var(--r-lg)}
.hero__stats .stat__top{margin-bottom:11px}
.hero__stats .stat__icon{width:38px;height:38px;border-radius:11px}
.hero__stats .stat__icon svg{width:19px;height:19px}
.hero__stats .stat__value{font-size:30px}
.hero__stats .stat__of{font-size:13px}
.hero__stats .stat__label{font-size:12.5px;margin-top:4px}
.hero__stats .stat__spark{height:24px;margin-top:10px}
.hero__stats .stat__trend{font-size:11px;padding:4px 9px}

.hero__copy h1{font-size:clamp(32px,4.4vw,50px)}
.hero__copy .hero__lead{max-width:56ch}
.hero__copy .search{max-width:540px}

@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__stats{flex-direction:row}
  .hero__stats .stat{flex:1;min-width:0}
}
@media (max-width:760px){
  .hero__stats{flex-direction:column}
  .marquee{margin-bottom:22px}
  .marquee__track{animation-duration:48s}
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
}

/* =========================================================
   v4: readable marquee logos, tighter hero
   ========================================================= */

/* Logos read as their real selves here: a light chip with the artwork in its
   own colours. Forcing them to a white silhouette turned most of the PNG
   favicons into unrecognisable blobs. */
.mq__art{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#eceef6);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.mq__art img{width:19px;height:19px;object-fit:contain;filter:none}
.mq__art span{font-size:15px}
.mq{padding:7px 15px 7px 7px}
.mq__n{color:var(--text);font-size:13px}

/* the track is driven from JS now, not by a CSS animation, so the
   reduced-motion rule in styles.css cannot freeze it */
.marquee__track{animation:none;will-change:transform}
.marquee{padding:13px 0 14px;margin-bottom:22px}

/* ---- hero pulled tight so the grid shows without scrolling ---- */
.wrap{max-width:1340px}
.hero{padding:0 0 18px}
.hero__grid{grid-template-columns:264px minmax(0,1fr);gap:30px;align-items:start}

.hero__stats{gap:9px;padding-top:4px}
.hero__stats .stat{padding:13px 15px 12px}
.hero__stats .stat__top{margin-bottom:8px}
.hero__stats .stat__icon{width:32px;height:32px;border-radius:10px}
.hero__stats .stat__icon svg{width:17px;height:17px}
.hero__stats .stat__value{font-size:27px}
.hero__stats .stat__label{font-size:12px;margin-top:2px}
.hero__stats .stat__trend{font-size:10.5px;padding:3px 8px}
/* the little charts were the tallest thing in a card and said the least */
.hero__stats .stat__spark{display:none}

.hero__copy .pill{margin-bottom:14px}
.hero__copy h1{font-size:clamp(30px,3.6vw,44px)}
.hero__copy .hero__lead{margin-top:12px;font-size:15px;max-width:60ch}
.hero__copy .search{margin-top:18px}
.hero__copy .hero__trust{margin-top:16px;font-size:13px}

.section--shop{padding-top:14px}
.section--shop .section__head{margin-bottom:18px}

@media (max-width:1080px){
  .hero__stats{flex-direction:row;padding-top:0}
  .hero__stats .stat{flex:1}
}
@media (max-width:640px){
  .hero__stats{flex-direction:column}
}

/* =========================================================
   v5: scrollable product detail, buy buttons everywhere
   ========================================================= */

/* The wide modal carried overflow:hidden, so a long description simply cut
   the buy row off with no way to reach it. The picture column stays put and
   the text column scrolls on its own, with the buy row pinned to its floor. */
.modal__box--wide{max-height:90vh;overflow:hidden}
.pd{max-height:90vh}
.pd__art{position:sticky;top:0;align-self:stretch}
.pd__info{
  max-height:90vh;overflow-y:auto;overscroll-behavior:contain;
  padding:30px 30px 0;
}
.pd__buy{
  position:sticky;bottom:0;z-index:2;margin-top:22px;
  padding:14px 0 26px;background:#0b0e1c;
  border-top:1px solid var(--line);
}
/* a short fade so text scrolling under the bar does not touch it hard */
.pd__buy::before{
  content:"";position:absolute;left:0;right:0;top:-22px;height:22px;
  background:linear-gradient(180deg,transparent,#0b0e1c);pointer-events:none;
}
.pd__info::-webkit-scrollbar{width:8px}
.pd__info::-webkit-scrollbar-thumb{background:#262b47;border-radius:20px}

.pd__buy .btn{white-space:nowrap}
.pd__add{flex:1}
.pd__now{flex:1.25}

/* stacked layout: let the whole sheet scroll instead */
@media (max-width:880px){
  .modal__box--wide{overflow-y:auto}
  .pd,.pd__info{max-height:none;overflow:visible}
  .pd__art{position:static}
  .pd__info{padding:24px 24px 0}
  .pd__buy{padding-bottom:22px}
}

/* ---- card actions ---- */
.card__buy{margin-top:12px}
.card__foot{padding-top:10px}

/* =========================================================
   v6: accounts and the checkout flow
   ========================================================= */

.authArea{display:flex;align-items:center;gap:10px}
.acct{
  display:flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:30px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);cursor:pointer;
  color:inherit;font-family:inherit;transition:.18s;
}
.acct:hover{background:rgba(255,255,255,.1);border-color:var(--line-2)}
.acct__av{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:13px;font-weight:800;
}
.acct__n{font-size:13.5px;font-weight:650;max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.tinylink{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:inherit;color:var(--brand-2);font-weight:650;text-decoration:underline;
}

/* ---- shell ---- */
.co{max-height:90vh;overflow-y:auto;padding:26px 28px 28px}
.co h3{font-size:20px;margin-bottom:14px}

.co__steps{display:flex;gap:8px;margin-bottom:22px}
.co__step{
  flex:1;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;
  font-size:12.5px;font-weight:650;color:var(--muted-2);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.co__step i{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-style:normal;font-size:11px;font-weight:800;
  background:rgba(255,255,255,.08);color:var(--muted-2);
}
.co__step.is-on{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.13);color:var(--text)}
.co__step.is-on i{background:var(--grad);color:#fff}
.co__step.is-done{color:var(--ok);border-color:rgba(74,222,128,.3)}
.co__step.is-done i{background:rgba(74,222,128,.18);color:var(--ok)}

.co__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.co__main{min-width:0}
.co__side{position:sticky;top:0}

.co__h{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-2);margin:22px 0 11px}
.co__note{font-size:12.5px;color:var(--muted-2);line-height:1.6;margin-top:9px}
.co__err{
  margin-top:12px;padding:10px 13px;border-radius:11px;font-size:13px;
  background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.32);color:#fca5a5;
}

/* ---- basket lines ---- */
.coitems{display:flex;flex-direction:column;gap:9px}
.coitem{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.coitem__art{
  width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  overflow:hidden;font-size:18px;
}
.coitem__art img{width:22px;height:22px;object-fit:contain;background:#fff;
  border-radius:6px;padding:3px;box-sizing:content-box}
.coitem__b{flex:1;min-width:0;display:flex;flex-direction:column}
.coitem__b b{font-size:13.5px;font-weight:650;line-height:1.3}
.coitem__b i{font-style:normal;font-size:11.5px;color:#c4b5fd;margin-top:2px}
.coitem__p{font-size:14px;font-weight:800;flex:none;min-width:64px;text-align:right}

.co__signed{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:13px;
  background:rgba(124,92,255,.1);border:1px solid rgba(167,139,250,.28);
}
.co__signed span{display:flex;flex-direction:column;min-width:0}
.co__signed b{font-size:13.5px}
.co__signed i{font-style:normal;font-size:12px;color:var(--muted)}
.co__signed .tinylink{margin-left:auto;font-size:12px}

/* ---- summary ---- */
.co__sum{
  padding:16px 17px;border-radius:var(--r-lg);margin-bottom:12px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--line);
}
.co__row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  padding:4px 0;color:var(--muted)}
.co__row b{color:var(--text);font-weight:700}
.co__row--muted{color:var(--muted-2)}
.co__row--off{color:var(--ok)}
.co__row--off b{color:var(--ok)}
.co__row--total{margin-top:9px;padding-top:11px;border-top:1px dashed var(--line-2);
  font-size:15px;color:var(--text);font-weight:700}
.co__row--total b{font-size:21px;font-weight:900;letter-spacing:-.03em}

.co__coupon{display:flex;gap:7px;margin-top:14px}
.co__coupon .input{padding:9px 12px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.05em}
.tinybtn2{
  padding:0 15px;border-radius:11px;font-size:12.5px;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--line-2);color:var(--text);
  font-family:inherit;transition:.16s;flex:none;
}
.tinybtn2:hover{background:rgba(124,92,255,.22);border-color:rgba(167,139,250,.5)}
.co__secure{margin-top:11px;text-align:center;font-size:11px;color:var(--muted-2)}

/* ---- payment methods ---- */
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
.pay{
  padding:13px;border-radius:14px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:inherit;
  font-family:inherit;transition:.18s;display:flex;flex-direction:column;gap:3px;
}
.pay:hover{border-color:var(--line-2);background:rgba(255,255,255,.08)}
.pay.is-on{border-color:rgba(167,139,250,.75);background:rgba(124,92,255,.14)}
.pay b{font-size:13.5px;font-weight:700}
.pay i{font-style:normal;font-size:11px;color:var(--muted-2)}

.cardform{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f2{display:flex;flex-direction:column;gap:6px}
.f2--wide{grid-column:1/-1}
.f2 label{font-size:12px;font-weight:650;color:var(--muted)}
.f2 .input{letter-spacing:.04em}

.coins{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.coin{
  padding:8px 14px;border-radius:20px;font-size:12.5px;font-weight:650;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);
  font-family:inherit;transition:.16s;
}
.coin:hover{color:var(--text);border-color:var(--line-2)}
.coin.is-on{background:var(--grad);border-color:transparent;color:#fff}
.addr{padding:15px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px dashed var(--line-2)}
.addr span{font-size:11.5px;color:var(--muted-2);display:block;margin-bottom:8px}
.addr code{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  word-break:break-all;color:#c4b5fd;line-height:1.6;
}

/* ---- done ---- */
.co__done{text-align:center;max-width:460px;margin:10px auto 0}
.co__doneBtns{display:flex;gap:10px;margin-top:20px}
.co__doneBtns .btn{flex:1}

.oline--btn{width:100%;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.oline--btn:hover{border-color:var(--line-2);background:rgba(255,255,255,.07)}

@media (max-width:820px){
  .co__body{grid-template-columns:1fr}
  .co__side{position:static}
  .pays{grid-template-columns:1fr}
  .cardform{grid-template-columns:1fr}
  .co{padding:22px 20px 24px}
  .co__steps{gap:5px}
  .co__step{padding:8px;font-size:11px;flex-direction:column;gap:5px;text-align:center}
}

/* =========================================================
   v7: the delivery block on the tracking screen

   Where the account, key or coupon is handed over. It is the one thing the
   buyer came back for, so it sits above the order lines, keeps whatever line
   breaks were typed on the phone, and can be copied in one press.
   ========================================================= */
.deliv{
  margin:14px 0 4px;
  border:1px solid rgba(124,92,255,.34);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(124,92,255,.14),rgba(124,92,255,.05));
  overflow:hidden;
}
.deliv__h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;
  border-bottom:1px solid rgba(124,92,255,.2);
}
.deliv__h span{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.deliv__b{
  margin:0;padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.65;
  color:var(--text);
  white-space:pre-wrap;      /* keep the line breaks typed in Telegram */
  word-break:break-word;
  max-height:220px;overflow:auto;
  -webkit-user-select:all;user-select:all;
}

/* ---------------------------------------------------------
   v7: accounts

   Google asks that its button keep its own look rather than being restyled
   into the page's palette, and shoppers read that white pill as "this really
   is Google". So it stays light in both themes.
   --------------------------------------------------------- */
.btn--google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f;
  border:1px solid #dadce0;
  font-weight:600;
}
.btn--google:hover{ background:#f7f8f8; border-color:#c6cacd; }
.btn--google:disabled{ opacity:.6; cursor:default; }
.gmark{ width:18px; height:18px; flex:0 0 18px; }

/* "or" with a rule either side */
.orline{
  display:flex; align-items:center; gap:12px;
  margin:14px 0;
  color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.orline::before, .orline::after{
  content:''; flex:1; height:1px; background:var(--line);
}

/* a quiet confirmation, the counterpart of .co__err */
.co__said{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:10px;
  background:color-mix(in srgb, var(--ok, #22c55e) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ok, #22c55e) 34%, transparent);
  color:var(--ok, #22c55e);
  font-size:13px; line-height:1.45;
}

.acct__av--img{ padding:0; object-fit:cover; }

/* ---------------------------------------------------------
   v8: real payment
   --------------------------------------------------------- */
.paycard{
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
  background:color-mix(in srgb, var(--brand) 6%, transparent);
}
.paycard__top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.paycard__ic{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--brand); color:#fff; font-size:17px;
}
.paycard__top b{ display:block; font-size:15px; }
.paycard__top i{ display:block; font-style:normal; font-size:12px; color:var(--muted); }
.paycard p{ margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--muted); }

.paycoins{ display:flex; flex-wrap:wrap; gap:6px; }
.paycoins span{
  font-size:11.5px; padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--muted);
}
.paycoins__more{ border-style:dashed !important; }

.paysteps{ margin:16px 0 0; padding:0 0 0 18px; }
.paysteps li{
  margin:0 0 7px;
  font-size:13px; line-height:1.6; color:var(--muted);
}
.paysteps b{ color:var(--ink); }

.success__ic--wait{
  background:color-mix(in srgb, var(--brand) 18%, transparent);
  color:var(--brand);
}