/* =====================================================================
   Buylance — shared design layer (v6: "Clear Blue")
   Light, cool-white pages, navy ink text, one bridge-blue accent.
   Soft shadows, quiet hover. Dark mode is a navy night version.
   Phone layout never needs zooming. Loaded after each page's own <style>.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:#0F1B2D;
  --paper:#F7F9FC;
  --surface:#FFFFFF;
  --sand:#EDF1F8;
  --slate:#5A667A;
  --line:rgba(15,27,45,0.11);
  --line-strong:rgba(15,27,45,0.28);
  --gold:#1747B8;
  --gold-text:#1747B8;
  --brick:#C0392B;
  --success:#2F7A4F;
  --grad:linear-gradient(135deg,#4C86FF 0%,#1D55E0 100%);
  --btn-bg:#1D55E0;
  --btn-fg:#FFFFFF;
  --btn-hover:#1747B8;
  --darksurface:#EAF1FF;
  --onaccent:#0F1B2D;
  --shadow-card:0 1px 2px rgba(15,27,45,0.05), 0 10px 26px -18px rgba(15,27,45,0.20);
  --shadow-lift:0 16px 36px -20px rgba(15,27,45,0.32);
  color-scheme:light;
}
html.dark{
  --ink:#E8EEF9;
  --paper:#0B1220;
  --surface:#111B2E;
  --sand:#172338;
  --slate:#93A1B8;
  --line:rgba(232,238,249,0.12);
  --line-strong:rgba(232,238,249,0.30);
  --gold:#7BA5FF;
  --gold-text:#9DBBFF;
  --brick:#E58F6B;
  --success:#6FBF8E;
  --grad:linear-gradient(135deg,#4C86FF 0%,#1D55E0 100%);
  --btn-bg:#3D7BFF;
  --btn-fg:#FFFFFF;
  --btn-hover:#5B90FF;
  --darksurface:#070D19;
  --onaccent:#E8EEF9;
  --shadow-card:0 1px 2px rgba(0,0,0,0.4), 0 10px 26px -18px rgba(0,0,0,0.8);
  --shadow-lift:0 16px 36px -20px rgba(0,0,0,0.9);
  color-scheme:dark;
}
/* the only always-dark surfaces: re-theme everything inside them in one go */
html.dark .scope-dark, html.dark footer.site-footer, html.dark .trust, html.dark .side, html.dark .trust-panel{
  --ink:#E8EEF9; --paper:#0B1220; --surface:#111B2E; --sand:#172338; --slate:#93A1B8;
  --line:rgba(232,238,249,0.14); --line-strong:rgba(232,238,249,0.30);
  --gold:#7BA5FF; --gold-text:#9DBBFF; --brick:#E58F6B; --darksurface:#070D19; --onaccent:#E8EEF9;
  --btn-bg:#1D55E0; --btn-fg:#FFFFFF; --btn-hover:#2F66F0;
  color:var(--ink); color-scheme:dark;
}

/* ---------- Safety: nothing may push the page wider than the screen ---------- */
html{overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{overflow-x:clip; max-width:100%;}
img,video,canvas{max-width:100%; height:auto;}
p,li,td,th,h1,h2,h3,.name,.sub{overflow-wrap:anywhere;}

/* ---------- Type ---------- */
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; text-rendering:optimizeLegibility;}
h1,h2,h3{font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:600; letter-spacing:-0.01em; font-variant-numeric:lining-nums;}
.logo{font-family:'Playfair Display',Georgia,serif !important; font-weight:700 !important; letter-spacing:-0.01em !important;}
::selection{background:#1D55E0; color:#FFFFFF;}
:focus-visible{outline:2px solid #1D55E0; outline-offset:2px;}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:#1D55E0 !important; box-shadow:0 0 0 3px rgba(29,85,224,0.22);
}
::-webkit-scrollbar-thumb{background:var(--line-strong) !important;}

/* ---------- Form controls & buttons never fall back to the browser's black-on-grey ---------- */
:where(button,input,select,textarea){font-family:inherit; color:inherit;}
:where(button){background-color:transparent;}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea){
  background-color:var(--surface); color:var(--ink);
}
:where(select option){background-color:var(--surface); color:var(--ink);}
:where(input, textarea)::placeholder{color:var(--slate); opacity:0.75;}

/* ---------- Header ---------- */
header{
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line) !important;
}
.searchbar{background:var(--surface) !important; border:1px solid var(--line-strong) !important;}
.searchbar input{color:var(--ink) !important;}

/* ---------- Buttons: ink on light surfaces, gold on dark ones. Flat, no glow. ---------- */
.btn-gold,.btn-primary,.chat-btn,.send-btn,.buy-now-btn,.login-gate a,.cat-pill.active,
.modal-actions .confirm,.load-more,.searchbar button,.chat-item .open-btn{
  background:var(--btn-bg) !important; color:var(--btn-fg) !important; border:0 !important;
  font-weight:700; box-shadow:none !important; transition:background .18s ease, transform .18s ease;
}
.btn-gold:hover,.btn-primary:hover,.chat-btn:hover,.send-btn:hover,.buy-now-btn:hover,
.modal-actions .confirm:hover,.searchbar button:hover,.chat-item .open-btn:hover{background:var(--btn-hover) !important;}
.btn-ghost,.btn-secondary,.quote-btn{
  border:1px solid var(--line-strong) !important; background:transparent; color:var(--ink);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.btn-ghost:hover,.btn-secondary:hover,.quote-btn:hover{border-color:#1D55E0 !important; color:var(--gold-text); background:rgba(29,85,224,0.07);}
.theme-toggle-btn{border:1px solid var(--line) !important; color:var(--ink); transition:border-color .18s ease !important;}
.theme-toggle-btn:hover{transform:none !important; border-color:#1D55E0 !important;}
.theme-toggle-btn svg{width:17px; height:17px; display:block;}
.follow-btn.following{background:var(--ink); color:var(--paper);}

/* avatars and your own chat bubbles keep a soft champagne fill */
.store-avatar,.chat-item .avatar,.chat-partner .avatar,.msg-row.mine .bubble{background:var(--grad) !important; color:#FFFFFF !important;}

/* ---------- Surfaces ---------- */
.prod-card,.cat-card,.stat-pill,.order-card,.chat-item,.spec-card,.seller-box,.review-box,.about-card,.filters{
  background:var(--surface); box-shadow:var(--shadow-card);
}
.prod-card,.order-card,.chat-item,.stat-pill,.spec-card,.filters{border:1px solid var(--line);}
.prod-card{border-radius:14px !important; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;}
.prod-card:hover{transform:translateY(-3px) !important; box-shadow:var(--shadow-lift) !important; border-color:var(--line-strong) !important;}
.prod-thumb img{transition:transform .5s ease !important;}
.prod-card:hover .prod-thumb img{transform:scale(1.03) !important;}
.stat-pill{transition:border-color .2s ease;}
.stat-pill:hover{border-color:var(--line-strong);}
.store-header-card{border:1px solid var(--line); border-radius:18px !important; box-shadow:var(--shadow-card) !important;}
.modal{border-radius:20px !important; box-shadow:0 30px 70px -34px rgba(0,0,0,0.55) !important; max-height:92vh; overflow-y:auto;}
.price,.price-row .price{color:var(--gold) !important;}
.price-row .price{font-size:19px !important;}
.prod-body .title{font-weight:700;}

/* product stage: a calm sand tile; photos fill it, placeholders sit quietly inside it */
.prod-thumb,.gallery-main{background:var(--sand) !important; color:var(--slate) !important; overflow:hidden;}
.prod-thumb{height:190px !important;}
.ph{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--slate); font:600 11px 'IBM Plex Mono',monospace; letter-spacing:0.14em; text-transform:uppercase; text-align:center; padding:0 12px;}
.ph svg{width:44px; height:44px; stroke-width:1.2; color:var(--gold); opacity:0.8;}
.gallery-main{border:1px solid var(--line); box-shadow:var(--shadow-card);}
.gallery-main .ph{gap:16px; font-size:12px;}
.gallery-main .ph svg{width:80px; height:80px;}
.prod-thumb .verified{background:var(--surface) !important; color:var(--gold-text) !important; border:1px solid var(--line);}
.prod-thumb .moq{background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--line) !important;}

/* section headings: a short champagne rule is the only flourish */
.block-head h2::after{content:''; display:block; width:40px; height:2px; border-radius:2px; background:var(--grad); margin-top:12px;}
.see-all{padding:9px 16px; border:1px solid var(--line-strong) !important; border-radius:999px; transition:all .2s ease;}
.see-all:hover{border-color:#1D55E0 !important; color:var(--gold-text);}

/* status badges: text deep enough to read on their tinted backgrounds, in both modes */
.badge.pending,.badge.resell,.verified-chip{color:#1747B8;}
.badge.confirmed,.badge.live,.badge.online{color:#1F6B3F;}
.badge.frozen,.badge.rejected{color:#8A2F1B;}
html.dark .badge.pending,html.dark .badge.resell,html.dark .verified-chip{color:#8FB3FF;}
html.dark .badge.confirmed,html.dark .badge.live,html.dark .badge.online{color:#86D6A5;}
html.dark .badge.frozen,html.dark .badge.rejected{color:#F0A38E;}

/* ---------- Motion: quiet ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.prod-card{animation:fadeUp .4s both;}
.rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.rv.rv-in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none;} .prod-card{animation:none;} *{scroll-behavior:auto !important;}
}

/* ---------- Icons ---------- */
.ico, .ic{color:var(--gold);}
.ico svg, .ic svg{display:block; margin:0 auto;}
.empty-note .ico, .empty-state .ico{display:block; margin-bottom:12px;}

/* ---------- Site footer ---------- */
footer.site-footer{background:var(--surface); border-top:1px solid var(--line); padding:0; text-align:left; margin-top:60px;}
.sf-inner{max-width:1280px; margin:0 auto; padding:60px 40px 36px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:36px;}
.sf-brand .logo{font-size:26px;}
.sf-brand p{color:var(--slate); font-size:13.5px; line-height:1.7; margin-top:14px; max-width:300px;}
.sf-col h4{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#1D55E0; font-weight:600; margin-bottom:16px;}
.sf-col a{display:block; font-size:13.5px; color:var(--ink); opacity:.82; margin-bottom:10px; transition:opacity .15s ease, color .15s ease;}
.sf-col a:hover{opacity:1; color:#1D55E0;}
.sf-base{max-width:1280px; margin:0 auto; padding:18px 40px 32px; border-top:1px solid var(--line); font-size:12.5px; color:var(--slate); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}

/* small captions on the always-black panels */
.trust-panel .trust-eyebrow,.trust-panel .trust-stat .num,.trust-panel .ic,.trust .trust-item .n{color:#1D55E0 !important;}
.side .foot-note,.side .stamp-item .d{color:var(--slate) !important;}
html.dark .side .foot-note,html.dark .side .stamp-item .d{color:rgba(232,238,249,0.72) !important;}
/* brand panels (login / seller sign-up side): deep blue with soft shapes */
html:not(.dark) .side,html:not(.dark) .trust-panel{
  background:radial-gradient(520px 340px at 105% -5%, rgba(255,255,255,0.20), transparent 62%),
             radial-gradient(420px 300px at -10% 105%, rgba(76,134,255,0.55), transparent 60%),
             linear-gradient(160deg,#1D55E0 0%,#123BA8 100%) !important;
  color:#FFFFFF !important; border-right:0;
}
html:not(.dark) .side .eyebrow,html:not(.dark) .trust-eyebrow{color:#BFD3FF !important;}
html:not(.dark) .side h1,html:not(.dark) .trust-panel h1,html:not(.dark) .trust-panel h4,html:not(.dark) .stamp-item .t,html:not(.dark) .trust-point .txt h4{color:#FFFFFF !important;}
html:not(.dark) .side .stamp-item .d,html:not(.dark) .trust-panel .lede,html:not(.dark) .trust-point .txt p,html:not(.dark) .trust-stat .lbl{color:rgba(255,255,255,0.78) !important;}
html:not(.dark) .side .foot-note{color:rgba(255,255,255,0.6) !important;}
html:not(.dark) .stamp-item .ico,html:not(.dark) .trust-point .ic{background:rgba(255,255,255,0.14) !important; border:1px solid rgba(255,255,255,0.35) !important; color:#FFFFFF !important;}
html:not(.dark) .stamp-item .ico svg,html:not(.dark) .trust-point .ic svg{color:#FFFFFF; stroke:#FFFFFF;}
html:not(.dark) .trust-panel .trust-stat .num,html:not(.dark) .trust-panel .trust-eyebrow{color:#FFFFFF !important;}
html:not(.dark) .crate-deco{border-color:rgba(255,255,255,0.35) !important;}
html:not(.dark) .trust-panel::before{background:radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%) !important;}

/* ---------- Phone bottom navigation (injected by ui.js) ---------- */
.mnav{display:none;}

/* =====================================================================
   PHONES — everything fits the screen width; no pinching, no zooming out
   ===================================================================== */
@media (max-width:760px){
  input,select,textarea{font-size:16px !important;}

  .topbar{padding:10px 14px !important; gap:10px !important; flex-wrap:wrap !important;}
  .topbar .logo{font-size:22px !important;}
  .topbar .searchbar{display:flex !important; order:10; flex:1 1 100% !important; max-width:none !important; padding:4px 4px 4px 14px !important;}
  .topbar .navactions{margin-left:auto; gap:8px !important; flex-wrap:nowrap !important;}
  .topbar .navactions .btn-ghost,.topbar .navactions > span{display:none !important;}
  .topbar .navactions .btn-gold{padding:8px 14px !important; font-size:12.5px !important;}
  .theme-toggle-btn{width:36px !important; height:36px !important;}

  .page-wrap,section.block,.sell-cta,.pillars,.hero{padding-left:16px !important; padding-right:16px !important;}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important;}
  .prod-body{padding:12px !important;}
  .prod-thumb{height:150px !important;}
  .stats-bar{grid-template-columns:repeat(2,minmax(0,1fr)) !important; padding-left:16px !important; padding-right:16px !important; gap:10px !important;}
  .store-header-wrap{padding-left:16px !important; padding-right:16px !important;}

  .modal-overlay{align-items:flex-end !important;}
  .modal{width:100% !important; max-width:100% !important; margin:0 !important; border-radius:20px 20px 0 0 !important; max-height:92vh; padding:24px 20px calc(24px + env(safe-area-inset-bottom)) !important;}

  .sf-inner{grid-template-columns:1fr 1fr; padding:40px 16px 24px; gap:28px;}
  .sf-brand{grid-column:1/-1;}
  .sf-base{padding:16px 16px 26px;}

  body.has-mnav{padding-bottom:calc(68px + env(safe-area-inset-bottom));}
  .mnav{
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--paper); background:color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mnav a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 0; font-size:10.5px; font-weight:700; letter-spacing:0.02em; color:var(--slate);}
  .mnav a svg{width:21px; height:21px;}
  .mnav a.on{color:var(--gold-text);}
}
@media (max-width:900px){
  .sf-inner{grid-template-columns:1fr 1fr; padding:40px 20px 24px;}
  .sf-brand{grid-column:1/-1;}
}
@media (max-width:420px){
  .topbar .logo{font-size:20px !important;}
  .prod-body .title{font-size:13px !important; min-height:34px !important;}
}
:root{accent-color:#1D55E0;}