/* xgaigu – Gian hàng (storefront, product page, checkout, seller centre) */
:root{--gold:#f6c86b}
.shopx{--acc:#ff2e7e;--acc2:color-mix(in srgb,var(--acc) 70%,#ff8a3d);--gold:#f6c86b;--card:#160d1f;--card2:#1e1329;--hair:rgba(255,255,255,.08)}
.shopx .wrap{padding:22px 0 60px}
.shopx .wrap.narrow{max-width:860px}
.si{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
.si svg{width:100%;height:100%}
.si.big{width:56px;height:56px;color:var(--acc);opacity:.9}
.shopx .btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 10px 30px color-mix(in srgb,var(--acc) 40%,transparent)}
.shopx .card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--hair);border-radius:20px}
.sh-pre{white-space:pre-line}
.linkbtn{background:none;border:0;color:var(--acc);font-weight:600;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:6px}
.linkbtn svg.i{width:16px;height:16px}

/* ---------- storefront header ---------- */
.sh-head{position:relative;border-radius:26px;overflow:hidden;background:var(--card);border:1px solid var(--hair);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sh-cover{height:clamp(150px,26vw,280px);background:center/cover no-repeat;position:relative}
.sh-cover.plain{background:radial-gradient(600px 260px at 15% 20%,color-mix(in srgb,var(--acc) 55%,transparent),transparent 70%),radial-gradient(700px 300px at 90% 0%,rgba(246,200,107,.35),transparent 70%),linear-gradient(135deg,#2a0f35,#12081a)}
.sh-cover.plain::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='none' stroke='rgba(255,255,255,.05)'/%3E%3C/svg%3E")}
.sh-cover-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(13,7,19,.92))}
.sh-id{display:flex;align-items:flex-end;gap:20px;padding:0 28px;margin-top:-58px;position:relative;flex-wrap:wrap}
.sh-logo{width:112px;height:112px;border-radius:28px;overflow:hidden;background:var(--card2);border:3px solid transparent;background-clip:padding-box;box-shadow:0 0 0 3px var(--gold),0 16px 40px rgba(0,0,0,.5);display:grid;place-items:center;flex:none}
.sh-logo img{width:100%;height:100%;object-fit:cover}
.sh-logo .si{width:48px;height:48px;color:var(--gold)}
.sh-name{flex:1;min-width:220px;padding-bottom:4px}
.sh-mall{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#1b0f05;background:linear-gradient(135deg,#ffe3a3,var(--gold) 55%,#c9973c);padding:4px 10px;border-radius:6px}
.sh-mall .si{width:14px;height:14px}
.sh-name h1{font-size:clamp(24px,3.2vw,34px);font-weight:800;margin:8px 0 2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sh-slogan{color:var(--muted);font-size:15px}
.sh-closed{margin-top:8px;display:inline-block;background:rgba(251,191,36,.14);color:var(--warn);border:1px solid rgba(251,191,36,.35);padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600}
.sh-act{display:flex;gap:10px;padding-bottom:6px;flex-wrap:wrap}
.sh-act .btn.on{background:rgba(255,255,255,.1);box-shadow:none}
.sh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--hair);margin:22px 28px 0;border-radius:16px;overflow:hidden;border:1px solid var(--hair)}
.sh-stat{background:var(--card);padding:14px 10px;text-align:center}
.sh-stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.sh-stat b em{font-style:normal;color:var(--gold)}
.sh-stat span{font-size:12.5px;color:var(--muted)}
.sh-pol{list-style:none;padding:16px 28px 22px;display:flex;gap:10px 22px;flex-wrap:wrap}
.sh-pol li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#e5d9ef}
.sh-pol .si{color:var(--gold);width:18px;height:18px}
.sh-tabs{display:flex;gap:4px;margin:22px 0 14px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.sh-tabs button{background:none;border:0;padding:12px 18px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:6px;align-items:center}
.sh-tabs button small{font-size:12px;background:rgba(255,255,255,.08);padding:1px 8px;border-radius:999px}
.sh-tabs button.on{color:#fff;border-color:var(--acc)}
.sh-about{padding:26px}
.sh-about h3{margin-bottom:10px}
.sh-about dl{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;margin-top:18px;font-size:14px}
.sh-about dt{color:var(--muted)}

/* ---------- toolbar ---------- */
.sh-tools{display:grid;gap:12px;margin-bottom:18px}
.sh-search{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--hair);border-radius:14px;padding:0 14px;height:48px}
.sh-search input{flex:1;background:none;border:0;outline:0;height:100%;font-size:15px}
.sh-search svg.i{color:var(--muted)}
.sh-sorts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.sh-sorts button,.sh-cats button{flex:none;border:1px solid var(--hair);background:rgba(255,255,255,.04);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:#d8cbe4;cursor:pointer;transition:.2s}
.sh-sorts button.on,.sh-cats button.on{background:color-mix(in srgb,var(--acc) 22%,transparent);border-color:color-mix(in srgb,var(--acc) 70%,transparent);color:#fff}
.sh-cats{display:flex;gap:8px;flex-wrap:wrap}
.sh-cats:empty{display:none}
.sh-cats button small{margin-left:6px;background:var(--acc);color:#fff;border-radius:999px;padding:0 7px;font-size:11px}

/* ---------- product grid & card ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
@media (max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr);gap:10px}}
.pc{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--hair);border-radius:18px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.pc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.pc-img{position:relative;aspect-ratio:1;background:#241830;display:grid;place-items:center;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pc:hover .pc-img img{transform:scale(1.05)}
.pc-img>.si{width:44px;height:44px;color:var(--muted)}
.pc-off{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#ffe3a3,var(--gold));color:#3a1d00;font-weight:800;font-size:12px;padding:4px 8px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.pc-out{position:absolute;inset:auto 0 0;background:rgba(0,0,0,.7);text-align:center;font-weight:700;font-size:13px;padding:6px}
.pc-body{padding:12px 12px 14px;display:grid;gap:6px}
.pc-title{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.pc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pc-price b{font-size:18px;font-weight:800;color:color-mix(in srgb,var(--acc) 75%,#fff)}
.pc-price s,.pbox s,.vprod s{color:var(--muted);font-size:13px}
.pc-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.pc-rate{color:var(--gold);font-weight:700}
.pc-seller{display:flex;align-items:center;gap:6px;font-size:12px;color:#cdbfdb;border-top:1px solid var(--hair);padding-top:8px}
.pc-seller .si{width:15px;height:15px;color:var(--gold)}
.pc-seller span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-tick{font-style:normal;background:#1d6bff;color:#fff;width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:800;flex:none}
.pc.skel{pointer-events:none}
.pc.skel .pc-img,.pc.skel i{background:linear-gradient(90deg,#1f1429 25%,#2b1e37 50%,#1f1429 75%);background-size:200% 100%;animation:skel 1.2s infinite}
.pc.skel i{display:block;height:12px;border-radius:6px}.pc.skel i:last-child{width:60%}
@keyframes skel{to{background-position:-200% 0}}
.sh-empty{grid-column:1/-1;text-align:center;padding:50px 20px;display:grid;justify-items:center;gap:10px;color:var(--muted)}
.sh-empty h3{color:var(--text)}
.sh-empty .btn{margin-top:6px}
.sh-vgrid{margin-top:4px}

/* ---------- marketplace hero ---------- */
.mall-hero{position:relative;overflow:hidden;border-radius:26px;padding:clamp(24px,4vw,46px);margin-bottom:22px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center;
  background:radial-gradient(500px 260px at 0% 0%,color-mix(in srgb,var(--acc) 45%,transparent),transparent 70%),radial-gradient(500px 300px at 100% 100%,rgba(246,200,107,.28),transparent 70%),linear-gradient(135deg,#25102f,#110818);border:1px solid var(--hair)}
.mall-hero h1{font-size:clamp(26px,4vw,42px);font-weight:800;margin:12px 0 10px;max-width:16ch}
.mall-hero p{color:#d6c8e2;max-width:52ch;margin-bottom:18px}
.mall-kicker{display:inline-flex;gap:8px;align-items:center;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--gold)}
.mall-perks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mall-perks li{background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:16px;padding:16px;display:grid;gap:8px;font-weight:600;font-size:14px;backdrop-filter:blur(6px)}
.mall-perks .si{color:var(--gold);width:26px;height:26px}
@media (max-width:760px){.mall-hero{grid-template-columns:1fr}}

/* ---------- product page ---------- */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px;display:flex;gap:4px;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.pdp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;padding:22px}
@media (max-width:860px){.pdp-top{grid-template-columns:1fr;padding:0;gap:0;overflow:hidden}.pinfo{padding:18px}}
.gal{position:sticky;top:calc(var(--nav-h) + 14px);align-self:start}
@media (max-width:860px){.gal{position:static}}
.gal-main{position:relative;border-radius:18px;overflow:hidden;background:#211629}
@media (max-width:860px){.gal-main{border-radius:0}}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:1}
.gal-track::-webkit-scrollbar{display:none}
.gal-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;cursor:zoom-in}
.gal-count{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.gal-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
@media (max-width:860px){.gal-thumbs{padding:0 12px}}
.gal-thumbs button{flex:0 0 64px;height:64px;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;background:none;cursor:pointer;opacity:.6;transition:.2s}
.gal-thumbs button.on{border-color:var(--acc);opacity:1}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.zoom-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;max-height:80vh}
.zoom-track img{flex:0 0 100%;object-fit:contain;max-height:80vh;scroll-snap-align:start}
.pinfo{display:grid;gap:14px;align-content:start}
.pcat{justify-self:start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.ptitle{font-size:clamp(21px,2.6vw,28px);font-weight:700;line-height:1.3}
.pline{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:#cfc2dc;align-items:center}
.pline>span+span{padding-left:16px;border-left:1px solid var(--hair)}
.pline-r{display:flex;gap:6px;align-items:center}.pline-r b{color:var(--gold);text-decoration:underline}
.stars{font-size:14px;letter-spacing:1px;background:linear-gradient(90deg,var(--gold) calc(var(--r)/5*100%),rgba(255,255,255,.18) 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.stars.big{font-size:20px}
.pbox{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 18%,transparent),rgba(246,200,107,.08));border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.pbox b{font-size:clamp(28px,3.4vw,36px);font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--acc) 50%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.pbox-off{background:var(--acc);color:#fff;font-weight:800;font-size:12px;padding:3px 8px;border-radius:6px}
.buybox{display:grid;gap:16px}
.bb-row{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.bb-l{color:var(--muted);font-size:14px}
@media (max-width:480px){.bb-row{grid-template-columns:1fr;gap:8px}}
.vars{display:flex;gap:8px;flex-wrap:wrap}
.vars button{border:1px solid var(--hair);background:rgba(255,255,255,.04);border-radius:10px;padding:8px 14px;font-size:14px;cursor:pointer;transition:.15s}
.vars button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent);color:#fff;box-shadow:inset 0 0 0 1px var(--acc)}
.vars.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.qty{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.qty button{width:40px;height:40px;background:rgba(255,255,255,.05);border:0;font-size:20px;cursor:pointer}
.qty input{width:52px;height:40px;text-align:center;background:none;border:0;border-left:1px solid var(--hair);border-right:1px solid var(--hair);-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.bb-btns{display:grid;grid-template-columns:1fr 1.3fr;gap:12px}
.bb-btns .btn{width:100%}
.bb-btns>a.btn{grid-column:1/-1}
.buybox.compact .bb-btns .btn.lg{min-height:50px;font-size:16px}
.trust{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px dashed var(--hair)}
.trust li{display:flex;gap:8px;align-items:center;font-size:13px;color:#d9cde5}
.trust .si{color:var(--ok);width:18px;height:18px}
@media (max-width:480px){.trust{grid-template-columns:1fr}}
.psec{padding:22px;margin-top:18px}
.psec h2,.sh-h2{font-size:19px;margin-bottom:14px}
.psec h2 small{color:var(--muted);font-weight:500}
.desc{line-height:1.75;color:#e6dcef}
.desc.clamp{max-height:13em;overflow:hidden;-webkit-mask:linear-gradient(#000 70%,transparent)}
.shopcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.shopcard-logo{width:64px;height:64px;border-radius:18px;overflow:hidden;background:var(--card2);display:grid;place-items:center;box-shadow:0 0 0 2px var(--gold)}
.shopcard-logo img{width:100%;height:100%;object-fit:cover}
.shopcard-logo .si{color:var(--gold)}
.shopcard-info{flex:1;min-width:180px}
.shopcard-name{font-weight:800;font-size:17px;display:flex;align-items:center;gap:6px}
.shopcard-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:4px}
.shopcard-stats b{color:var(--text)}
.rv-sum{display:flex;gap:26px;align-items:center;padding:16px 18px;border-radius:16px;background:rgba(246,200,107,.06);border:1px solid rgba(246,200,107,.2);margin-bottom:12px;flex-wrap:wrap}
.rv-avg{display:grid;justify-items:center}
.rv-avg b{font-size:40px;color:var(--gold);line-height:1}
.rv-avg span{font-size:12px;color:var(--muted);margin-bottom:4px}
.rv-bars{flex:1;min-width:200px;display:grid;gap:5px}
.rv-bar{display:grid;grid-template-columns:30px 1fr 30px;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.rv-bar i{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.rv-bar u{display:block;height:100%;background:var(--gold)}
.rv{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--hair)}
.rv-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rv p{margin-top:4px;font-size:14.5px}
.pdp-bar{display:none}
@media (max-width:860px){
  .pdp .wrap{padding-bottom:110px}
  .pdp-bar{display:flex;position:fixed;left:0;right:0;bottom:var(--tab-h);z-index:45;background:rgba(15,8,21,.94);backdrop-filter:blur(14px);border-top:1px solid var(--hair);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px) * 0);gap:8px;align-items:center}
  .pdp-ic{display:grid;justify-items:center;gap:2px;font-size:11px;color:#d9cde5;background:none;border:0;min-width:52px;cursor:pointer}
  .pdp-bar .btn{flex:1;min-height:48px}
}
.notice.warnbox{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:var(--warn);padding:10px 14px;border-radius:12px;font-size:14px}

/* ---------- product strip on a video ---------- */
.vprod{display:flex;align-items:center;gap:10px;max-width:min(340px,100%);margin:6px 0 8px;padding:6px 6px 6px 6px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(20,10,28,.62);backdrop-filter:blur(10px);color:#fff;cursor:pointer;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35);animation:vprodIn .5s var(--ease) both}
@keyframes vprodIn{from{opacity:0;transform:translateY(8px)}}
.vprod-img{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none;background:#2a1c36;display:grid;place-items:center}
.vprod-img img{width:100%;height:100%;object-fit:cover}
.vprod-txt{flex:1;min-width:0;display:grid;gap:2px}
.vprod-txt b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vprod-txt span{display:flex;gap:6px;align-items:baseline;font-size:12px}
.vprod-txt em{font-style:normal;font-weight:800;font-size:14.5px;color:#ffd27a}
.vprod-buy{display:flex;align-items:center;gap:4px;background:linear-gradient(135deg,#ffcf5c,#ff9f1c);color:#2a1400;font-weight:800;font-size:13px;padding:8px 12px;border-radius:10px;flex:none}
.vprod-buy .si{width:16px;height:16px}
.qv{display:grid;gap:16px}
.qv-top{display:flex;gap:14px;align-items:flex-start;padding-right:36px}
.qv-top>img{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:none}
.qv-top h3{font-size:16px;margin-bottom:8px;line-height:1.35}
.qv .pbox{padding:8px 12px;margin-bottom:4px}.qv .pbox b{font-size:24px}
.qv-shop{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:10px 0;border-block:1px solid var(--hair)}
.qv-shop>span{display:flex;gap:6px;align-items:center;font-weight:600}
.qv-shop .si{color:var(--gold)}

/* ---------- checkout ---------- */
.co{display:grid;gap:16px}
.co h3{font-size:20px}
.co-item,.oitem{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--hair)}
.co-item img,.oitem img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;background:#2a1c36}
.co-item>div,.oitem>div{display:grid;gap:2px;flex:1;min-width:0}
.co-item small,.oitem small{color:var(--muted);font-size:13px}
.oitem b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oitem-t{font-weight:800;color:color-mix(in srgb,var(--acc) 70%,#fff)}
.co-sec{display:grid;gap:4px}
.co-sec h4{display:flex;gap:8px;align-items:center;font-size:15px;margin-bottom:8px}
.co-sec h4 .si{color:var(--acc)}
.payopts{display:grid;gap:10px}
.payopt{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;border:1px solid var(--hair);cursor:pointer;transition:.15s}
.payopt:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.payopt input{accent-color:var(--acc);width:18px;height:18px}
.payopt>.si{color:var(--gold)}
.payopt span{display:grid}.payopt small{color:var(--muted);font-size:12.5px}
.co-sum{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);font-size:14px}
.co-sum>div{display:flex;justify-content:space-between;gap:10px}
.co-total{padding-top:10px;border-top:1px dashed var(--hair);font-weight:700}
.co-total b{font-size:22px;color:color-mix(in srgb,var(--acc) 70%,#fff)}
.co-fine{font-size:12px;text-align:center}
.co-done{text-align:center;display:grid;gap:12px;justify-items:center;padding:16px 0}
.co-done .si.ok{width:72px;height:72px;color:var(--ok);animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.1)}}
.bankbox{width:100%;text-align:left;padding:14px 16px;border-radius:14px;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.3);display:grid;gap:4px;font-size:14px}
.bankbox small{color:var(--muted)}

/* ---------- orders ---------- */
.sh-title{display:flex;gap:10px;align-items:center;font-size:clamp(22px,3vw,30px);margin-bottom:18px}
.sh-title .si{color:var(--acc);width:28px;height:28px}
.otabs{margin-bottom:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.olist{display:grid;gap:14px}
.ocard{padding:16px;display:grid;gap:12px}
.ocard header,.ocard footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.oshop,.obuyer{display:flex;gap:8px;align-items:center;font-weight:700}
.oshop .si{color:var(--gold)}
.opill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.opill.new{background:rgba(251,191,36,.15);color:var(--warn)}
.opill.confirmed{background:rgba(14,165,233,.15);color:#7dd3fc}
.opill.shipping{background:rgba(139,92,246,.18);color:#c4b5fd}
.opill.done{background:rgba(52,211,153,.15);color:var(--ok)}
.opill.cancelled{background:rgba(255,59,78,.13);color:#fda4af}
.osteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;font-size:12px;color:var(--muted)}
.osteps li{display:grid;justify-items:center;gap:6px;position:relative;text-align:center}
.osteps li i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12);position:relative;z-index:1}
.osteps li+li::before{content:"";position:absolute;top:6px;right:50%;width:100%;height:2px;background:rgba(255,255,255,.1)}
.osteps li.on{color:#fff}
.osteps li.on i{background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent)}
.osteps li.on+li.on::before,.osteps li.on::before{background:var(--acc)}
.osteps.cancel{display:block;color:#fda4af;font-size:13px}
.oship{display:grid;gap:8px;font-size:14px;padding:12px;border-radius:12px;background:rgba(255,255,255,.03)}
.oship>div{display:flex;gap:10px;align-items:flex-start}
.oship .si{color:var(--gold);margin-top:2px}
.oship a{color:var(--acc);font-weight:600}
.onote{font-size:14px;padding:10px 12px;border-radius:12px;background:rgba(14,165,233,.08)}
.rate-pick{display:flex;gap:6px;justify-content:center;margin:14px 0}
.rate-pick button{font-size:38px;background:none;border:0;color:rgba(255,255,255,.18);cursor:pointer;transition:transform .15s}
.rate-pick button.on{color:var(--gold)}
.rate-pick button:hover{transform:scale(1.15)}

/* ---------- seller centre ---------- */
.sc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sc-head .grow{flex:1}
.sc-head small{color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.sc-head h1{font-size:clamp(20px,2.6vw,28px)}
.sc-logo{width:54px;height:54px;border-radius:16px;overflow:hidden;background:var(--card2);display:grid;place-items:center;box-shadow:0 0 0 2px var(--gold)}
.sc-logo img{width:100%;height:100%;object-fit:cover}.sc-logo .si{color:var(--gold)}
.sc-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.sc-nav{display:grid;gap:4px;position:sticky;top:calc(var(--nav-h) + 14px);background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:8px}
.sc-nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;font-weight:600;color:#cfc2dc}
.sc-nav a:hover{background:rgba(255,255,255,.05)}
.sc-nav a.on{background:color-mix(in srgb,var(--acc) 18%,transparent);color:#fff}
.sc-nav a.on .si{color:var(--acc)}
.sc-nav em{margin-left:auto;font-style:normal;background:var(--acc);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px}
@media (max-width:820px){.sc-grid{grid-template-columns:1fr}.sc-nav{position:static;display:flex;overflow-x:auto;scrollbar-width:none}.sc-nav a{flex:none}}
.sc-body{display:grid;gap:16px;min-width:0}
.sc-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sc-bar h2{font-size:21px}
.sc-card{padding:22px}
.sc-card h3{display:flex;gap:8px;align-items:center;margin:4px 0 12px}
.sc-card h3 .si{color:var(--gold)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.kpi{position:relative;display:grid;gap:4px;padding:18px;border-radius:18px;background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--hair);overflow:hidden;transition:.2s}
a.kpi:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent);transform:translateY(-2px)}
.kpi>.si{width:38px;height:38px;padding:8px;border-radius:12px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);margin-bottom:6px}
.kpi span{color:var(--muted);font-size:13px}
.kpi b{font-size:24px;font-weight:800;letter-spacing:-.02em}
.kpi small{color:var(--muted);font-size:12px}
.checklist{list-style:none;display:grid;gap:10px}
.checklist li{display:flex;gap:12px;align-items:center}
.checklist i{width:24px;height:24px;border-radius:50%;border:2px solid var(--hair);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;flex:none}
.checklist li.ok i{background:var(--ok);border-color:var(--ok);color:#062016}
.checklist li.ok a{color:var(--muted);text-decoration:line-through}
.checklist a:hover{color:var(--acc)}
.copyrow{display:flex;gap:10px}
.copyrow input{flex:1;min-width:0}
.sc-plist{display:grid;gap:10px}
.sc-prow{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--hair);flex-wrap:wrap}
.sc-prow.dim{opacity:.7}
.sc-prow>img{width:72px;height:72px;border-radius:12px;object-fit:cover;background:#2a1c36;flex:none}
.sc-pinfo{flex:1;min-width:200px;display:grid;gap:4px}
.sc-pinfo>a{font-weight:700}
.sc-pinfo>a:hover{color:var(--acc)}
.sc-pmeta{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted);align-items:baseline}
.sc-pmeta b{color:var(--text);font-size:15px}
.sc-pact{display:flex;gap:8px;flex-wrap:wrap}
.sc-pact svg.i{width:16px;height:16px}
.pform{display:grid;gap:2px}
.pform h3{font-size:20px;margin-bottom:12px}
.flabel{display:flex;gap:6px;align-items:center;margin-bottom:8px;font-size:14px;font-weight:600}
.imgstrip{display:flex;gap:10px;flex-wrap:wrap}
.imgcell,.imgadd{position:relative;width:96px;height:96px;border-radius:14px;overflow:hidden;flex:none}
.imgcell img{width:100%;height:100%;object-fit:cover}
.imgcover{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--acc),var(--acc2));font-size:11px;font-weight:700;text-align:center;padding:2px}
.imgtools{position:absolute;top:4px;right:4px;display:flex;gap:3px}
.imgtools button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;font-size:13px;line-height:1}
.imgadd{border:2px dashed color-mix(in srgb,var(--acc) 50%,transparent);display:grid;place-content:center;justify-items:center;cursor:pointer;color:#e6d9f0;background:color-mix(in srgb,var(--acc) 6%,transparent)}
.imgadd b{font-size:26px;line-height:1;color:var(--acc)}
.imgadd span{font-size:12px;font-weight:600}.imgadd small{font-size:11px;color:var(--muted)}
.imgpick-wrap{display:flex;gap:12px;align-items:center;cursor:pointer}
.imgpick{background:#2a1c36 center/cover no-repeat;border:1px dashed var(--hair);display:grid;place-items:center;color:var(--muted);font-size:12px;flex:none}
.imgpick.logo{width:84px;height:84px;border-radius:22px}
.imgpick.banner{width:min(260px,100%);height:84px;border-radius:14px;flex:1}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;background:rgba(255,255,255,.08);font-size:10px;color:var(--muted)}
.sw:first-child{width:auto;border-radius:999px;padding:0 12px}
.sw.on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.pick-prod{padding:14px;border-radius:14px;border:1px dashed rgba(246,200,107,.4);background:rgba(246,200,107,.05);margin-bottom:16px}
.pick-prod .flabel .si{color:var(--gold)}
.pick-prod small a{color:#ffd27a}
.shopbtn .si{color:var(--gold)}
.acct-shop{margin-bottom:20px}

/* top bar: more links fit, the row scrolls instead of pushing the page wider */
.nav .links{min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.nav .links::-webkit-scrollbar{display:none}
.nav .links a{white-space:nowrap;padding:9px 11px;font-size:14.5px}
@media (min-width:861px){.nav-actions{flex:none}}
@media (max-width:1320px){.nav .btn.hide-m{display:none}}
@media (max-width:420px){.nav{gap:8px;padding:0 12px}.nav-actions{gap:6px}.nav-actions .iconbtn{width:38px;height:38px}.nav .logo{font-size:19px}}