/* =========================================================
   Hackiee Official — Clean white UI with smooth motion
   ========================================================= */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f8fd;
  --card:#ffffff;
  --ink:#0d1220;
  --ink-soft:#5b647a;
  --ink-faint:#949cb0;
  --line:#e9edf5;
  --line-soft:#f2f5fb;
  --accent:#4361ee;
  --accent-2:#7c5cfc;
  --accent-3:#e94fd0;
  --accent-grad:linear-gradient(135deg,#4361ee,#7c5cfc);
  --accent-grad-3:linear-gradient(120deg,#4361ee,#7c5cfc 55%,#e94fd0);
  --ok:#0caf79;
  --warn:#f59f00;
  --danger:#f0455a;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 4px 12px rgba(29,41,82,.05);
  --shadow-md:0 10px 26px rgba(29,41,82,.07);
  --shadow-lg:0 22px 50px rgba(29,41,82,.1);
  --shadow-accent:0 10px 26px rgba(67,97,238,.28);
  --font:'Inter','Segoe UI',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg,video{max-width:100%}
/* prevent long unbroken strings (URLs, codes) from causing horizontal overflow */
body{overflow-wrap:break-word}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 12px 0;font-weight:700;box-shadow:var(--shadow-md)}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Sticky mobile checkout bar */
.mobile-checkout-bar{display:none}
body{
  font-family:var(--font);color:var(--ink);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(139,92,246,.07), transparent 60%),
    radial-gradient(900px 460px at -6% 3%, rgba(59,108,255,.07), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;min-height:100vh;overflow-x:hidden;
}
h1,h2,h3,h4{letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1280px,95%);margin-inline:auto}
.section{padding:22px 0}
.center{text-align:center}
.muted{color:var(--ink-soft)}
::selection{background:rgba(59,108,255,.15)}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  padding:.82rem 1.5rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  font-weight:600;font-size:.95rem;font-family:inherit;background:var(--card);color:var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s;
  box-shadow:var(--shadow-xs);overflow:hidden;white-space:nowrap;
}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.5),transparent 45%);opacity:0;transition:opacity .4s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:transparent}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--accent-grad);color:#fff;border:none;box-shadow:var(--shadow-accent)}
.btn-primary:hover{box-shadow:0 22px 48px rgba(59,108,255,.38)}
.btn-ghost{background:#fff}
.btn-sm{padding:.55rem 1rem;font-size:.85rem}
.btn-lg{padding:1rem 1.9rem;font-size:1.05rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand .logo{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:var(--accent-grad);box-shadow:var(--shadow-accent);font-weight:900;
  transition:transform .3s var(--ease)
}
.brand:hover .logo{transform:rotate(-8deg) scale(1.05)}
.brand .logo-img{width:40px;height:40px;border-radius:11px;object-fit:cover;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease);background:#fff}
.brand:hover .logo-img{transform:rotate(-6deg) scale(1.05)}
.nav-links{display:flex;gap:.15rem;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav-links a{position:relative;padding:.5rem .85rem;border-radius:999px;font-weight:600;color:var(--ink-soft);font-size:.92rem;transition:color .2s,background .2s}
.nav-links a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:2px;background:var(--accent-grad);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ink)}
.cart-badge{background:var(--accent);color:#fff;border-radius:999px;padding:0 .45rem;font-size:.72rem;margin-left:.2rem;font-weight:700}
.pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--bg-soft);border:1px solid var(--line);padding:.4rem .7rem;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.lang-switch{display:flex;gap:.15rem;background:var(--bg-soft);padding:.25rem;border-radius:999px;border:1px solid var(--line)}
.lang-switch a{padding:.28rem .6rem;border-radius:999px;font-size:.8rem;color:var(--ink-soft);font-weight:600;transition:.2s}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.active{background:var(--accent-grad);color:#fff;box-shadow:var(--shadow-accent)}
.nav-toggle{display:none;margin-left:auto;background:var(--bg-soft);border:1px solid var(--line);border-radius:11px;padding:.5rem .7rem;cursor:pointer;font-size:1.15rem}

/* ---------- Hero ---------- */
.hero{position:relative;padding:30px 0 18px;overflow:hidden}
.hero .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;animation:float 12s ease-in-out infinite}
.hero .orb.a{width:420px;height:420px;background:radial-gradient(circle,#c9d8ff,transparent 70%);top:-120px;right:-80px}
.hero .orb.b{width:360px;height:360px;background:radial-gradient(circle,#e6d8ff,transparent 70%);bottom:-140px;left:-100px;animation-delay:-4s}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.5vw,4.4rem);line-height:1.03;letter-spacing:-.035em;font-weight:900}
.hero h1 .grad{background:var(--accent-grad-3);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s ease infinite}
@keyframes gradShift{0%,100%{background-position:0% center}50%{background-position:100% center}}
.hero p.lead{font-size:1.12rem;color:var(--ink-soft);margin:.9rem 0 1.4rem;max-width:42ch}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2rem;margin-top:1.6rem;flex-wrap:wrap}
.hero-stats .s .n{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.hero-stats .s .l{font-size:.82rem;color:var(--ink-faint);font-weight:600}

/* Hero visual: floating product-style cards (CSS only, no gimmick) */
.hero-visual{position:relative;height:440px}
.float-card{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:1.1rem 1.2rem;width:230px;animation:floatY 6s ease-in-out infinite;
}
.float-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;background:var(--bg-soft);margin-bottom:.6rem}
.float-card .t{font-weight:700;font-size:.98rem}
.float-card .p{font-weight:800;font-size:1.1rem;margin-top:.2rem}
.float-card .p small{color:var(--ink-faint);text-decoration:line-through;font-weight:600;font-size:.78rem;margin-left:.3rem}
.float-card .off{position:absolute;top:-10px;right:-10px;background:var(--accent-grad);color:#fff;font-size:.72rem;font-weight:800;padding:.25rem .55rem;border-radius:999px;box-shadow:var(--shadow-accent)}
.float-card.c1{top:20px;left:0;animation-delay:0s}
.float-card.c2{top:150px;right:0;animation-delay:-2s}
.float-card.c3{bottom:20px;left:40px;animation-delay:-4s}

/* ---------- Trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.6rem}
.trust .t{display:flex;align-items:center;gap:.7rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem 1rem;font-weight:700;font-size:.9rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.trust .t:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);background:#fff}
.trust .t .ic{font-size:1.3rem}

/* ---------- Section head ---------- */
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.3rem;flex-wrap:wrap;gap:1rem}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.03em;font-weight:800}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:800;color:var(--accent);background:rgba(59,108,255,.08);padding:.36rem .75rem;border-radius:999px;margin-bottom:.7rem}

/* ---------- Grid / cards ---------- */
.grid{display:grid;gap:1.1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;
  box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;background:var(--accent-grad-3);opacity:0;transition:opacity .3s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{opacity:1}
.product-card{display:flex;flex-direction:column}
.product-card .thumb{
  position:relative;height:150px;border-radius:var(--radius-sm);margin-bottom:1rem;overflow:hidden;
  background:
    radial-gradient(120px 120px at 30% 25%, rgba(139,92,246,.14), transparent 70%),
    radial-gradient(140px 140px at 80% 80%, rgba(59,108,255,.14), transparent 70%),
    linear-gradient(135deg,#eef3ff,#f6f0ff);
  display:grid;place-items:center;font-size:2.6rem;transition:transform .35s var(--ease);
}
.product-card:hover .thumb .thumb-emoji{transform:scale(1.12) rotate(-3deg)}
.product-card .thumb .thumb-emoji{display:inline-block;transition:transform .35s var(--ease)}
.product-card .thumb .off{position:absolute;top:10px;left:10px;background:var(--danger);color:#fff;font-size:.72rem;font-weight:800;padding:.25rem .55rem;border-radius:999px}
.product-card h3{font-size:1.06rem;letter-spacing:-.01em;line-height:1.3}
.product-card .price{font-size:1.4rem;font-weight:800;margin:.5rem 0;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.product-card .price .was{font-size:.85rem;color:var(--ink-faint);text-decoration:line-through;font-weight:600}
.product-card .price small{font-size:.78rem;color:var(--ink-faint);font-weight:600}
.product-card .thumb img{width:100%;height:100%;object-fit:cover}
.product-card .thumb .thumb-emoji{font-size:2.6rem}
.product-card h3 a{color:inherit;transition:color .2s}
.product-card h3 a:hover{color:var(--accent)}
.product-card .actions{margin-top:auto;display:flex;gap:.5rem;padding-top:.8rem}

/* Breadcrumbs */
.crumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--ink-faint);margin-bottom:1.2rem}
.crumbs a{color:var(--ink-soft);transition:color .2s}
.crumbs a:hover{color:var(--accent)}
.crumbs .cur{color:var(--ink);font-weight:600}

/* Product detail view */
.pv-thumb{height:340px;border-radius:16px;background:linear-gradient(135deg,#eef3ff,#f5efff);display:grid;place-items:center;font-size:5rem;overflow:hidden}
.pv-thumb img{width:100%;height:100%;object-fit:cover}
.pv-chips{display:flex;gap:.5rem;align-items:center;margin-bottom:.6rem;flex-wrap:wrap}
.pv-title{font-size:1.9rem;letter-spacing:-.02em;line-height:1.15;margin:.2rem 0 .6rem}
.pv-price{font-size:1.9rem;font-weight:800;margin-bottom:.4rem;display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}
.pv-price small{font-size:1rem;font-weight:600;color:var(--ink-faint)}
.pv-price .was{font-size:1.05rem;text-decoration:line-through;color:var(--ink-faint);font-weight:600}
.pv-desc{margin:1rem 0;line-height:1.7}
.pv-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:nowrap;margin-top:.4rem}
.pv-actions .stepper{flex:0 0 auto}
.pv-actions .btn{flex:1 1 0;min-width:0;white-space:nowrap}
.chip{display:inline-block;padding:.28rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;background:#eef3ff;color:var(--accent)}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;background:#eef3ff;color:var(--accent)}
.badge-ok{background:#e6fcf5;color:var(--ok)}
.badge-warn{background:#fff4e6;color:#e8590c}
.badge-danger{background:#fff0f0;color:var(--danger)}

/* store toolbar */
.store-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.sort-form{display:flex;align-items:center;gap:.5rem;flex-shrink:0}

/* category pills */
.cat-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.cat-pills a{padding:.5rem .95rem;border-radius:999px;font-size:.86rem;font-weight:600;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-soft);transition:.2s}
.cat-pills a:hover{color:var(--ink);transform:translateY(-2px)}
.cat-pills a.active{background:var(--accent-grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-accent)}

/* how it works steps */
.how-step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.how-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.how-step .how-n{width:44px;height:44px;margin:0 auto .8rem;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--accent-grad);box-shadow:var(--shadow-accent)}
.how-step h3{font-size:1.05rem;margin-bottom:.4rem}

/* category showcase tiles */
.cat-tile{display:flex;flex-direction:column;justify-content:space-between;min-height:130px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);background:#fff}
.cat-tile .ic{font-size:1.8rem}
.cat-tile .n{font-weight:800;font-size:1.05rem}
.cat-tile .m{color:var(--ink-faint);font-size:.82rem}

/* ---------- Panels / forms ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.3rem}
.panel-narrow{max-width:460px;margin-inline:auto}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.input,select,textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.95rem;background:#fff;transition:border-color .2s,box-shadow .2s;
}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(59,108,255,.12)}
.alert{padding:.9rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;border:1px solid transparent}
.alert-error{background:#fff5f5;color:#c92a2a;border-color:#ffe3e3}
.alert-ok{background:#ebfbf4;color:#087f5b;border-color:#c3fae8}
.alert-info{background:#eef3ff;color:#1c4ed8;border-color:#dbe4ff}

/* payment method radio cards */
.pay-opt{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:.2s;background:#fff}
.pay-opt:hover{border-color:var(--accent)}
.pay-opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 4px rgba(59,108,255,.1);background:#fbfcff}

/* pay amount / details box */
.pay-detail{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:1.1rem;margin-top:.4rem}
.pay-detail .note{color:var(--ink-soft);font-size:.9rem;margin-bottom:.9rem}
.amount-box{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,#f2f6ff,#f7f2ff);border:1px solid #e3ebff;border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin-bottom:.9rem;flex-wrap:wrap}
.amount-box .lbl{font-size:.8rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.amount-box .big{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;line-height:1}
.amount-box .sub{font-size:.85rem;color:var(--ink-faint);font-weight:600}
.pay-row{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.pay-qr{border:1px solid var(--line);border-radius:14px;background:#fff;padding:8px}
.copyfield{display:flex;align-items:center;gap:.5rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;font-family:monospace;font-size:.9rem;word-break:break-all;flex-wrap:wrap}
.amount-box .big{word-break:break-word}
.copy-btn{border:none;background:var(--accent-grad);color:#fff;border-radius:8px;padding:.35rem .7rem;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.2s}
.copy-btn:hover{transform:translateY(-1px)}
.copy-btn.done{background:var(--ok)}

/* ---------- Quantity stepper ---------- */
.stepper{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;box-shadow:var(--shadow-xs)}
.stepper .st-btn{width:34px;height:34px;border:none;background:var(--bg-soft);border-radius:50%;font-size:1.15rem;font-weight:700;color:var(--ink);cursor:pointer;display:grid;place-items:center;line-height:1;transition:.18s;user-select:none}
.stepper .st-btn:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.stepper .st-btn:active{transform:scale(.9)}
.stepper .st-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;background:var(--bg-soft);color:var(--ink)}
.stepper .st-input{width:44px;border:none;text-align:center;font-weight:800;font-size:1rem;font-family:inherit;background:transparent;color:var(--ink);-moz-appearance:textfield}
.stepper .st-input::-webkit-outer-spin-button,.stepper .st-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper .st-input:focus{outline:none}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:1.6rem;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:1rem}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:1.1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow-xs);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.cart-item:hover{box-shadow:var(--shadow-md)}
.ci-thumb{width:72px;height:72px;border-radius:14px;background:linear-gradient(135deg,#eef3ff,#f5efff);display:grid;place-items:center;font-size:2rem;overflow:hidden}
.ci-thumb img{width:100%;height:100%;object-fit:cover}
.ci-info h3{font-size:1.02rem;letter-spacing:-.01em;margin-bottom:.2rem}
.ci-info .meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--ink-soft)}
.ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;min-width:150px}
.ci-line{font-weight:800;font-size:1.15rem}
.ci-controls{display:flex;align-items:center;gap:.8rem}
.ci-remove{border:none;background:none;color:var(--ink-faint);cursor:pointer;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem;transition:color .2s;padding:.3rem}
.ci-remove:hover{color:var(--danger)}

.cart-summary{position:sticky;top:90px}
.cart-summary h3{font-size:1.1rem;margin-bottom:1rem}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;font-size:.95rem;color:var(--ink-soft)}
.sum-row.saving{color:var(--ok);font-weight:600}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:.9rem;margin-top:.4rem;border-top:1px dashed var(--line)}
.sum-total .lbl{font-weight:700}
.sum-total .val{font-size:1.7rem;font-weight:900;letter-spacing:-.02em}
.cart-empty{text-align:center;padding:3.5rem 1rem}
.cart-empty .em{font-size:3.4rem;margin-bottom:.6rem}
.secure-note{display:flex;align-items:center;gap:.5rem;justify-content:center;color:var(--ink-faint);font-size:.82rem;margin-top:1rem}

@media(max-width:900px){
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
  /* On mobile the summary panel's own checkout button is redundant with the sticky bar */
  .cart-summary .btn-lg{display:none}
  .mobile-checkout-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;
    background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(16,24,40,.1);
    animation:fadeUp .35s var(--ease) both;
  }
  .mobile-checkout-bar .btn{flex:0 0 auto;padding:.75rem 1.3rem}
  .page-cart{padding-bottom:78px}          /* clear the fixed bar */
  .page-cart .tg-float{bottom:88px}          /* lift Telegram button above the bar */
}
@media(max-width:680px){
  .cart-item{grid-template-columns:46px 1fr;grid-template-areas:"thumb info" "ctrl ctrl";gap:.6rem .7rem;padding:.7rem .8rem}
  .ci-thumb{width:46px;height:46px;grid-area:thumb;font-size:1.2rem}
  .ci-info{grid-area:info}
  .ci-info h3{font-size:.9rem}
  .ci-info .meta{font-size:.72rem;gap:.3rem}
  .ci-right{grid-area:ctrl;flex-direction:row;justify-content:space-between;align-items:center;width:100%;min-width:0;margin-top:.3rem;padding-top:.5rem;border-top:1px solid var(--line-soft)}
  .ci-line{font-size:.95rem}
}

/* ---------- Bulk pricing table (product page) ---------- */
.bulk-table{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin:1.2rem 0}
.bulk-head{background:var(--bg-soft);padding:.7rem 1rem;font-weight:700;font-size:.9rem;border-bottom:1px solid var(--line)}
.bulk-rows{display:flex;flex-direction:column}
.bulk-row{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-bottom:1px solid var(--line-soft);transition:background .15s}
.bulk-row:last-child{border-bottom:none}
.bulk-row:hover{background:#fafbff}
.bulk-row .q{font-weight:600}
.bulk-row .pr{font-weight:800}
.bulk-row .pr small{color:var(--ink-faint);font-weight:600;font-size:.78rem}

/* ---------- Tables ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft)}
th{background:#fafbfe;font-weight:700;color:var(--ink-soft);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
tbody tr{transition:background .15s}
tbody tr:hover{background:#fafbff}
tbody tr:last-child td{border-bottom:none}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:1.8rem 0 1.2rem;margin-top:30px;color:var(--ink-soft);font-size:.9rem;background:var(--bg-soft)}
.footer-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.footer-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:.8rem}
.footer-col a{display:block;padding:.28rem 0;color:var(--ink-soft);font-size:.9rem;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.4rem;flex-wrap:wrap}
.footer-note{text-align:center;font-size:.8rem;color:var(--ink-faint);padding-top:.9rem;margin-top:.4rem;border-top:1px solid var(--line-soft)}
.footer-note a{color:var(--ink-soft);text-decoration:underline}
.footer-note a:hover{color:var(--accent)}

/* ---------- Flash toasts ---------- */
.flash-wrap{position:fixed;top:76px;right:20px;z-index:90;display:flex;flex-direction:column;gap:.5rem;max-width:calc(100% - 40px)}
.flash{padding:.8rem 1.1rem;border-radius:12px;box-shadow:var(--shadow-lg);font-weight:600;font-size:.9rem;animation:flashIn .4s var(--ease) both, flashOut .4s var(--ease) 3.2s forwards;background:#fff;border:1px solid var(--line)}
.flash-ok{background:#ebfbf4;border-color:#c3fae8;color:#087f5b}
.flash-error{background:#fff5f5;border-color:#ffe3e3;color:#c92a2a}
.flash-info{background:#eef3ff;border-color:#dbe4ff;color:#1c4ed8}
@keyframes flashIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes flashOut{to{opacity:0;transform:translateX(30px)}}

/* ---------- Store search ---------- */
.store-search{display:flex;gap:.5rem;align-items:center}
.store-search .input{max-width:280px;padding:.6rem .9rem}

/* ---------- Admin ---------- */
.admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.admin-side{background:#fff;border-right:1px solid var(--line);padding:1rem;position:sticky;top:0;height:100vh;overflow:auto}
.admin-side .brand{margin-bottom:1.6rem}
.admin-nav a{display:block;padding:.7rem .9rem;border-radius:12px;color:var(--ink-soft);font-weight:600;margin-bottom:.2rem;transition:.2s}
.admin-nav a:hover{background:var(--bg-soft);color:var(--ink)}
.admin-nav a.active{background:var(--accent-grad);color:#fff;box-shadow:var(--shadow-accent)}
.admin-main{padding:1.2rem 1.4rem;background:var(--bg-soft);min-height:100vh}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.3rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.stat .n{font-size:1.9rem;font-weight:800}
.stat .l{color:var(--ink-soft);font-size:.85rem}

/* settings sections + field hints */
.set-section{padding-bottom:1.1rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line-soft)}
.set-section:last-of-type{border-bottom:none}
.set-section-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.9rem;font-weight:800}
.field-hint{font-size:.8rem;color:var(--ink-faint);margin:-.15rem 0 .45rem}

/* analytics */
.analytics-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media(max-width:820px){.analytics-2col{grid-template-columns:1fr}}
.chart-bars{display:flex;align-items:flex-end;gap:.4rem;height:150px}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.cbar-fill{width:100%;max-width:34px;background:var(--accent-grad);border-radius:6px 6px 0 0;display:flex;align-items:flex-start;justify-content:center;transition:height .4s var(--ease);position:relative}
.cbar-num{font-size:.65rem;font-weight:800;color:var(--accent);position:absolute;top:-16px}
.cbar-lbl{font-size:.64rem;color:var(--ink-faint);margin-top:.35rem;font-weight:600;white-space:nowrap}
.bar-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.bar-label{font-size:.86rem;font-weight:600;min-width:90px}
.bar-track{flex:1;height:8px;background:var(--bg-soft);border-radius:999px;overflow:hidden}
.bar-val{height:100%;background:var(--accent-grad);border-radius:999px;transition:width .4s var(--ease)}
.bar-num{font-size:.82rem;font-weight:800;color:var(--ink-soft);min-width:44px;text-align:right}

/* clean visitor feed (simple analytics) */
.visitor-feed{display:flex;flex-direction:column}
.vfeed-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .5rem;border-bottom:1px solid var(--line-soft);color:inherit;border-radius:8px;transition:background .15s}
.vfeed-row:hover{background:var(--bg-soft)}
.vfeed-row:last-child{border-bottom:none}
.vfeed-flag{font-size:1.4rem;flex:0 0 auto;width:34px;text-align:center}
.vfeed-main{flex:1;min-width:0}
.vfeed-loc{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.vfeed-sub{font-size:.8rem;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vfeed-time{flex:0 0 auto;font-size:.78rem;color:var(--ink-faint);font-weight:600;white-space:nowrap}
.delta{font-size:.7rem;font-weight:800;vertical-align:middle;margin-left:.3rem}
.delta-up{color:var(--ok)}
.delta-down{color:var(--danger)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#12b886;margin-right:.15rem;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(18,184,134,.5)}50%{box-shadow:0 0 0 5px rgba(18,184,134,0)}}

/* admin quick actions (dashboard) */
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.6rem}
.quick-action{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem 1rem;font-weight:700;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.quick-action:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.quick-action .qa-ic{font-size:1.3rem}
.quick-action .qa-sub{display:block;font-size:.74rem;color:var(--ink-faint);font-weight:600}

/* ---------- Floating Telegram button ---------- */
.tg-float{
  position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:0;
  background:linear-gradient(135deg,#2aabee,#229ed9);color:#fff;border-radius:999px;
  padding:14px;box-shadow:0 12px 30px rgba(34,158,217,.45);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),gap .3s var(--ease),padding .3s var(--ease);
  overflow:hidden;white-space:nowrap;animation:tgPulse 2.6s ease-in-out infinite;
}
.tg-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 40px rgba(34,158,217,.55);gap:.55rem;padding:14px 20px 14px 16px}
.tg-float .tg-label{max-width:0;opacity:0;font-weight:700;font-size:.92rem;transition:max-width .35s var(--ease),opacity .3s}
.tg-float:hover .tg-label{max-width:180px;opacity:1}
@keyframes tgPulse{0%,100%{box-shadow:0 12px 30px rgba(34,158,217,.45)}50%{box-shadow:0 12px 30px rgba(34,158,217,.45),0 0 0 12px rgba(34,158,217,.12)}}
@media(max-width:640px){.tg-float{right:16px;bottom:16px}}

/* ---------- Animations ---------- */
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-24px)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

.reveal{opacity:0}
.reveal.in{animation:fadeUp .7s var(--ease) forwards}
.reveal[data-d="1"].in{animation-delay:.08s}
.reveal[data-d="2"].in{animation-delay:.16s}
.reveal[data-d="3"].in{animation-delay:.24s}
.reveal[data-d="4"].in{animation-delay:.32s}
.hero h1,.hero p.lead,.hero-cta,.hero-stats{animation:fadeUp .8s var(--ease) both}
.hero p.lead{animation-delay:.1s}.hero-cta{animation-delay:.2s}.hero-stats{animation-delay:.3s}
.float-card{animation:floatY 6s ease-in-out infinite, pop .7s var(--ease) both}
.float-card.c1{animation-delay:0s,.15s}.float-card.c2{animation-delay:-2s,.3s}.float-card.c3{animation-delay:-4s,.45s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1}
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  .hero{padding:56px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero-visual{height:320px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .product-view{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;height:auto}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}

/* Collapse the navbar into a clean dropdown well before it can crowd/overlap */
@media(max-width:900px){
  .nav-toggle{display:grid;place-items:center}
  .nav{position:relative}
  .nav-links{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
    flex-direction:column;align-items:stretch;gap:.1rem;margin:0;
    background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:.6rem;box-shadow:var(--shadow-lg);
  }
  .nav-links.open{display:flex;animation:fadeUp .25s var(--ease)}
  .nav-links > a{padding:.75rem .9rem;border-radius:10px}
  .nav-links > a::after{display:none}
  .nav-links > a:hover,.nav-links > a.active{background:var(--bg-soft)}
  .nav-links .pill{justify-content:center;margin:.35rem 0 .1rem}
  .nav-links .lang-switch{justify-content:center}
  /* keep the active language pill readable (blue gradient + white text) */
  .nav-links .lang-switch a.active{background:var(--accent-grad);color:#fff}
}

@media(max-width:720px){
  .hero-visual{display:none}          /* decorative cards off on phones */
  .hero{padding:26px 0 16px}
  .hero p.lead{margin:.8rem 0 1.1rem}
  .hero-stats{gap:1.2rem;margin-top:1.1rem}
  .hero-cta{gap:.6rem}
  .hero-cta .btn{flex:1;min-width:140px}
  .section{padding:20px 0}
  .section-head{margin-bottom:1.1rem}
  .panel{padding:1.1rem}
  .footer-top{grid-template-columns:1fr 1fr;gap:1.4rem}
  .store-search{width:100%}
  .store-search .input{max-width:none;flex:1}
  .section-head{flex-direction:column;align-items:stretch}
  .flash-wrap{top:auto;bottom:20px;right:12px;left:12px}
}

@media(max-width:600px){
  /* tighter rhythm + smaller type */
  body{font-size:15px;line-height:1.5}
  .section{padding:16px 0}
  .container{width:92%}
  .nav{padding:.65rem 0}
  .section-head{margin-bottom:.8rem}
  .section-head h2{font-size:1.25rem}
  .section-head h2::after{bottom:-4px;width:34px;height:2px}
  .eyebrow{font-size:.64rem;letter-spacing:.12em;margin-bottom:.5rem;padding:.28rem .6rem}
  .panel{padding:.9rem;border-radius:14px}
  .btn{padding:.66rem 1rem;font-size:.88rem}
  .btn-lg{padding:.76rem 1.15rem;font-size:.92rem}

  /* TWO products / categories per row */
  .grid-3,.grid-4{grid-template-columns:1fr 1fr;gap:.7rem}
  .grid-2{grid-template-columns:1fr}

  /* compact product cards */
  .product-card{padding:.55rem}
  .product-card .thumb{height:84px;margin-bottom:.45rem;border-radius:10px}
  .product-card .thumb .thumb-emoji{font-size:1.5rem}
  .product-card .thumb .off{top:6px;left:6px;font-size:.6rem;padding:.12rem .38rem}
  .chip{font-size:.6rem;padding:.14rem .42rem}
  .product-card h3{font-size:.8rem;line-height:1.25;margin:.35rem 0 .1rem}
  .pc-desc{display:none}
  .product-card .price{font-size:.95rem;margin:.3rem 0;gap:.25rem}
  .product-card .price small,.product-card .price .was{font-size:.66rem}
  .product-card .actions{padding-top:.45rem}
  .product-card .actions .pc-view{display:none}
  .product-card .actions .btn{padding:.48rem .5rem;font-size:.76rem}

  /* compact category tiles */
  .cat-tile{min-height:auto;padding:.8rem;border-radius:14px}
  .cat-tile .ic{font-size:1.4rem}
  .cat-tile .n{font-size:.88rem}
  .cat-tile .m{font-size:.72rem}

  /* trust / stats */
  .trust{grid-template-columns:1fr 1fr;gap:.55rem}
  .trust .t{padding:.6rem .65rem;font-size:.76rem}
  .trust .t .ic{font-size:1.05rem}
  .stat-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .stat{padding:1rem}
  .stat .n{font-size:1.5rem}

  /* header/brand */
  .brand{font-size:1rem}
  .brand .logo,.brand .logo-img{width:30px;height:30px}
  .hero-stats .s .n{font-size:1.3rem}
  .hero h1{font-size:clamp(1.9rem,8vw,2.4rem)}

  /* compact cart */
  .stepper{padding:3px}
  .stepper .st-btn{width:28px;height:28px;font-size:1rem}
  .stepper .st-input{width:32px;font-size:.9rem}
  .cart-summary{padding:1rem}
  .sum-total .val{font-size:1.4rem}
  .ci-remove{font-size:.72rem}

  /* compact product detail */
  .pv-thumb{height:180px;font-size:3rem}
  .pv-title{font-size:1.3rem}
  .pv-price{font-size:1.5rem}
  .pv-price small{font-size:.82rem}
  .pv-desc{font-size:.9rem;margin:.8rem 0}
  .pv-actions{gap:.4rem}
  .pv-actions .btn{padding:.6rem .4rem;font-size:.8rem}
  .pv-actions .stepper{padding:2px}
  .pv-actions .stepper .st-btn{width:26px;height:26px;font-size:.95rem}
  .pv-actions .stepper .st-input{width:26px;font-size:.85rem}
  .ci-remove .rm-txt{display:none}
  .bulk-head{font-size:.82rem;padding:.6rem .8rem}
  .bulk-row{padding:.6rem .8rem}

  /* footer */
  .footer-top{grid-template-columns:1fr 1fr;gap:1rem;text-align:left}
  .footer-bottom{flex-direction:column;text-align:center;gap:.6rem}
  .tg-float{padding:11px}
  .tg-float:hover .tg-label{max-width:0;opacity:0}
}

@media(max-width:380px){
  .product-card .thumb{height:74px}
  .product-card h3{font-size:.76rem}
}

/* =========================================================
   UI POLISH PASS — cohesive refinements across all pages
   (additive; layered at the end so it wins the cascade)
   ========================================================= */

/* ---- Custom scrollbar ---- */
html{scrollbar-width:thin;scrollbar-color:#cbd5ec transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d3dcf0;border:3px solid #fff;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#b3c0e0}

/* ---- Buttons: gradient sheen + tactile press ---- */
.btn-primary{
  background-image:var(--accent-grad);background-size:180% 180%;background-position:0 0;
  border-color:transparent;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),background-position .55s var(--ease);
}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px)}
.btn-ghost{transition:transform .2s var(--ease),box-shadow .25s var(--ease),border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0) scale(.98)}

/* ---- Panels & cards: smoother depth ---- */
.panel{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.panel:hover{box-shadow:var(--shadow-md)}
.admin-main .panel:hover{transform:none}   /* keep admin calm, no lift */

/* ---- Stat cards: accent cap + subtle sheen ---- */
.stat{position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent-grad)}
.stat::after{content:"";position:absolute;top:-40%;right:-30%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(59,108,255,.08),transparent 70%);pointer-events:none}

/* ---- Tables: rounded head, cleaner zebra, comfy rows ---- */
.table-wrap{box-shadow:var(--shadow-xs)}
thead th:first-child{border-top-left-radius:var(--radius)}
thead th:last-child{border-top-right-radius:var(--radius)}
tbody tr:nth-child(even){background:#fcfdff}
tbody tr:hover{background:#f4f7ff}

/* ---- Inputs: hover cue + softer rest state ---- */
.input:hover,select:hover,textarea:hover{border-color:#cdd6ea}
.input,select,textarea{background:#fdfdff}
.input:focus,select:focus,textarea:focus{background:#fff}

/* ---- Badges & pills: crisper ---- */
.badge{letter-spacing:.02em;line-height:1.4}
.pill{transition:transform .2s var(--ease),border-color .2s,background .2s}

/* ---- Admin sidebar: soft gradient + refined nav ---- */
.admin-side{background:linear-gradient(180deg,#ffffff, #fafcff)}
.admin-nav a{position:relative;display:flex;align-items:center;gap:.1rem}
.admin-nav a:not(.active)::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:60%;border-radius:0 3px 3px 0;background:var(--accent);transition:transform .2s var(--ease);
}
.admin-nav a:not(.active):hover::before{transform:translateY(-50%) scaleY(1)}
.admin-nav a.active{transform:translateX(2px)}

/* ---- Section headings: gradient underline accent ---- */
.section-head .eyebrow{display:block;width:max-content;max-width:100%}
.section-head h2{position:relative;padding-bottom:.4rem}
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;border-radius:3px;background:var(--accent-grad)}
/* Centered section heads (e.g. How it works): center the eyebrow + underline */
.section-head.center .eyebrow{margin-left:auto;margin-right:auto}
.section-head.center h2::after{left:50%;transform:translateX(-50%)}

/* ---- Gentle page-load fade for main content areas ---- */
main{animation:pageIn .45s var(--ease) both}
.admin-main{animation:pageIn .4s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Links inside content get a subtle underline grow ---- */
.admin-nav a, .nav-links a{ -webkit-tap-highlight-color:transparent }

/* ---- Product & category cards: crisper hover ---- */
.product-card:hover,.cat-tile:hover,.how-step:hover{box-shadow:var(--shadow-md)}

/* ---- Focus polish for keyboard users ---- */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- Mobile: keep the polish tidy ---- */
@media(max-width:600px){
  .stat::after{display:none}
  main,.admin-main{animation-duration:.3s}
  ::-webkit-scrollbar{width:8px;height:8px}
}
@media(prefers-reduced-motion:reduce){
  main,.admin-main{animation:none}
}

/* =========================================================
   COMPACT PASS — tighter, better-fitted layout (esp. mobile)
   ========================================================= */

/* Desktop: slightly tighter card/grid rhythm */
.grid{gap:1rem}
.hero-stats{margin-top:1.3rem}

/* Tablet & below: compact admin shell */
@media(max-width:960px){
  .admin-main{padding:1rem}
  .admin-side{padding:.8rem 1rem}
  .admin-side .brand{margin-bottom:.8rem}
  .admin-nav{display:flex;flex-wrap:wrap;gap:.35rem}
  .admin-nav a{margin-bottom:0;padding:.5rem .75rem;font-size:.88rem;border-radius:10px}
  .admin-nav a:not(.active)::before{display:none}
}

/* Phones: fit content edge-to-edge, trim wasted space */
@media(max-width:600px){
  h1{font-size:1.5rem}
  .admin-main{padding:.8rem}
  .admin-main h1{font-size:1.35rem}
  .stat-grid{gap:.6rem;margin-bottom:1rem}
  .stat{padding:.85rem}
  .stat .n{font-size:1.35rem}
  .stat .l{font-size:.76rem}
  .quick-actions{grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:1rem}
  .quick-action{padding:.7rem .8rem;font-size:.86rem}
  .quick-action .qa-ic{font-size:1.1rem}
  /* dense tables that still fit */
  table{font-size:.82rem}
  th,td{padding:.55rem .6rem}
  th{font-size:.64rem}
  /* analytics charts fit small screens */
  .chart-bars{height:120px;gap:.25rem}
  .cbar-lbl{font-size:.56rem}
  .bar-label{min-width:70px;font-size:.8rem}
  /* settings + forms breathe less */
  .field{margin-bottom:.85rem}
  .set-section{padding-bottom:.9rem;margin-bottom:1rem}
  .input,select,textarea{padding:.72rem .85rem;font-size:.92rem}
  /* footer compact */
  .site-footer{padding:1.4rem 0 1rem;margin-top:22px}
  .footer-col a{padding:.2rem 0;font-size:.86rem}
}

/* Very small phones: single-column products for readability */
@media(max-width:400px){
  .stat-grid,.quick-actions{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
}

/* =========================================================
   ADMIN SIMPLIFY — consistent headers, help boxes, sections
   ========================================================= */
.ph{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.ph .ph-ic{font-size:1.5rem;flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
.ph h1{margin:0;font-size:1.5rem;line-height:1.1}
.ph p{margin:.2rem 0 0;color:var(--ink-soft);font-size:.9rem}

.help-box{background:linear-gradient(135deg,#f2f6ff,#faf5ff);border:1px solid #e3ebff;border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-bottom:1.3rem;font-size:.9rem;color:var(--ink-soft)}
.help-box b{color:var(--ink)}
.help-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;margin-top:.8rem}
.help-step-mini{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.help-step-mini .num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--accent-grad);color:#fff;font-weight:800;font-size:.78rem;display:grid;place-items:center}
.help-step-mini .txt{font-size:.83rem;line-height:1.45;color:var(--ink-soft)}
.help-step-mini .txt b{color:var(--ink)}
.help-step-mini .txt b:first-child{display:block;margin-bottom:.15rem}

.form-section-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);font-weight:800;margin:1.3rem 0 .8rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
.form-section-label:first-child{margin-top:0;padding-top:0;border-top:none}

details.adv{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:1rem;background:#fcfdff}
details.adv>summary{cursor:pointer;padding:.8rem 1rem;font-weight:700;font-size:.9rem;list-style:none;display:flex;align-items:center;gap:.5rem;user-select:none}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"▸";color:var(--accent);transition:transform .2s var(--ease)}
details.adv[open]>summary::before{transform:rotate(90deg)}
details.adv[open]>summary{border-bottom:1px solid var(--line-soft)}
details.adv .adv-body{padding:1rem}

/* status meaning legend */
.status-legend{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.status-legend .sl{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem}

/* ---- Checkout: payment confirmation checkbox ---- */
.confirm-pay{display:flex;align-items:flex-start;gap:.6rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .9rem;margin:1rem 0;font-size:.88rem;color:var(--ink-soft);cursor:pointer}
.confirm-pay input{margin-top:.15rem;flex:0 0 auto;width:18px;height:18px;accent-color:var(--accent)}

/* ---- Dashboard: first-time setup checklist ---- */
.setup-card{border:1px solid #e3ebff;background:linear-gradient(135deg,#f5f8ff,#faf6ff);border-radius:var(--radius);padding:1.2rem 1.3rem;margin-bottom:1.4rem}
.setup-card h3{margin:0 0 .2rem;font-size:1.1rem}
.setup-progress{height:9px;background:#e6ecfb;border-radius:999px;overflow:hidden;margin:.7rem 0 1rem}
.setup-progress .fill{height:100%;background:var(--accent-grad);border-radius:999px;transition:width .6s var(--ease)}
.check-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.6)}
.check-item:last-child{border-bottom:none}
.check-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:0 0 auto}
.check-mark.done{background:#e6fcf5;color:var(--ok)}
.check-mark.todo{background:#fff;color:var(--ink-faint);border:1px dashed #c7d0e6}
.check-item .ci-main{flex:1;min-width:0}
.check-item .ci-main .t{font-weight:700;font-size:.92rem}
.check-item.is-done .ci-main .t{text-decoration:line-through;color:var(--ink-faint)}
.check-item .ci-main .d{font-size:.8rem;color:var(--ink-faint)}
.check-item .ci-cta{flex:0 0 auto}
.setup-done{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ok)}

/* =========================================================
   MOTION & FEEL — storefront micro-animations
   ========================================================= */

/* Scroll progress bar (injected by JS) */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--accent-grad);box-shadow:0 0 10px rgba(59,108,255,.5);transition:width .12s linear}

/* Staggered entrance for grid items (cards, tiles) */
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.grid > *{animation:cardIn .5s var(--ease) both}
.grid > *:nth-child(2){animation-delay:.05s}
.grid > *:nth-child(3){animation-delay:.10s}
.grid > *:nth-child(4){animation-delay:.15s}
.grid > *:nth-child(5){animation-delay:.20s}
.grid > *:nth-child(6){animation-delay:.25s}
.grid > *:nth-child(7){animation-delay:.30s}
.grid > *:nth-child(8){animation-delay:.35s}
.grid > *:nth-child(n+9){animation-delay:.4s}

/* Cart badge pop when it appears */
@keyframes badgePop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
.cart-badge{animation:badgePop .45s var(--ease)}

/* Product thumb shine on hover */
.product-card .thumb{position:relative}
.product-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease);pointer-events:none}
.product-card:hover .thumb::after{transform:translateX(120%)}

/* Add-to-cart button gets a little life */
.pc-view + form .btn-primary:active,.product-card .btn-primary:active{transform:scale(.96)}

/* Smooth image fade-in */
.product-card .thumb img,.pv-thumb img,.ci-thumb img{animation:imgIn .5s var(--ease) both}
@keyframes imgIn{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .grid > *{animation:none}
  .cart-badge{animation:none}
  .scroll-progress{display:none}
  .product-card .thumb::after{display:none}
}

/* =========================================================
   LAYOUT SAFETY — never overflow the viewport horizontally
   ========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
.container { max-width: 100%; }
img, video, table, iframe, canvas, svg { max-width: 100%; }
/* Allow flex/grid children to shrink instead of forcing overflow */
.nav-links, .hero-cta, .pv-actions, .product-card .actions, .store-toolbar, .cat-pills, .footer-top, .footer-bottom { min-width: 0; }
.nav-links a, .btn { max-width: 100%; }
/* Long code/reference strings wrap instead of stretching the page */
code, .copyfield { overflow-wrap: anywhere; word-break: break-word; }

/* =========================================================
   "How it works" — always 3 across on one line (compact on mobile)
   ========================================================= */
.grid.how-grid { grid-template-columns: repeat(3, 1fr); }
@media(max-width:600px){
  .grid.how-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .grid.how-grid .how-step { padding: .7rem .45rem; border-radius: 14px; }
  .grid.how-grid .how-n { width: 28px; height: 28px; font-size: .8rem; margin-bottom: .45rem; }
  .grid.how-grid .how-step h3 { font-size: .78rem; line-height: 1.2; margin-bottom: .25rem; }
  .grid.how-grid .how-step p { font-size: .66rem; line-height: 1.35; }
}
@media(max-width:360px){
  .grid.how-grid .how-step h3 { font-size: .72rem; }
  .grid.how-grid .how-step p { font-size: .62rem; }
}

/* =========================================================
   FRESH LOOK — compact, sleek refinement (layered last)
   ========================================================= */

/* Slightly tighter global scale on desktop for a compact feel */
@media(min-width:601px){ html { font-size: 15.5px; } }

/* Buttons: modern rounded-rectangles instead of bulky pills */
.btn{ padding: .6rem 1.15rem; font-size: .9rem; font-weight: 600; border-radius: 11px; }
.btn-sm{ padding: .44rem .8rem; font-size: .82rem; border-radius: 9px; }
.btn-lg{ padding: .8rem 1.5rem; font-size: .98rem; border-radius: 12px; }
.btn-primary{ box-shadow: var(--shadow-accent); }
.btn-primary:hover{ box-shadow: 0 14px 30px rgba(67,97,238,.34); }

/* Cards & panels: tighter, cleaner */
.card{ padding: 1.05rem; }
.panel{ padding: 1.15rem; border-radius: var(--radius); }
.product-card .thumb{ height: 132px; border-radius: 11px; }

/* Header / nav: slimmer */
.nav{ padding: .6rem 0; }
.brand{ font-size: 1.08rem; }
.nav-links a{ font-size: .9rem; padding: .45rem .72rem; }
.pill{ padding: .34rem .62rem; font-size: .8rem; }

/* Hero: compact + crisp */
.hero{ padding: 34px 0 20px; }
.hero h1{ font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; }
.hero p.lead{ font-size: 1.04rem; margin: .7rem 0 1.1rem; max-width: 44ch; }
.hero-stats .s .n{ font-size: 1.6rem; }

/* Section headings */
.section-head{ margin-bottom: 1.1rem; }
.section-head h2{ font-size: clamp(1.4rem, 2.6vw, 2rem); }

/* Inputs: slimmer, consistent radius */
.input, select, textarea{ padding: .68rem .9rem; border-radius: 10px; font-size: .92rem; }

/* Product card: sleeker type */
.product-card h3{ font-size: 1rem; }
.product-card .price{ font-size: 1.28rem; margin: .4rem 0; }
.chip, .badge{ border-radius: 8px; }

/* Category tiles + how steps: tighter */
.cat-tile{ padding: 1rem; }
.how-step{ padding: 1.1rem; }

/* Admin: a touch tighter */
.admin-main{ padding: 1.15rem 1.3rem; }
.stat{ padding: 1rem 1.1rem; }
.stat .n{ font-size: 1.7rem; }

/* Footer: compact */
.site-footer{ padding: 1.6rem 0 1.1rem; margin-top: 26px; }

/* =========================================================
   ADMIN — extra compact & sleek (dense, minimal padding)
   ========================================================= */
.admin-side{ padding: .75rem; }
.admin-side .brand{ margin-bottom: .9rem; font-size: 1rem; }
.admin-nav a{ padding: .5rem .7rem; margin-bottom: .12rem; font-size: .9rem; border-radius: 9px; }
.admin-main{ padding: .95rem 1.05rem; }
.admin-main h1{ font-size: 1.35rem; }
.admin-main .ph{ margin-bottom: .8rem; gap: .7rem; }
.admin-main .ph .ph-ic{ width: 40px; height: 40px; font-size: 1.2rem; border-radius: 11px; }
.admin-main .ph p{ font-size: .85rem; }
.admin-main .help-box{ padding: .8rem .9rem; margin-bottom: 1rem; font-size: .85rem; }
.admin-main .help-steps{ gap: .55rem; margin-top: .6rem; }
.admin-main .help-step-mini{ padding: .6rem .7rem; }
.admin-main .panel{ padding: .9rem 1rem; margin-bottom: 1rem; }
.admin-main .panel h3{ font-size: 1rem; }
.stat-grid{ gap: .65rem; margin-bottom: 1rem; }
.stat{ padding: .7rem .85rem; border-radius: 12px; }
.stat .n{ font-size: 1.45rem; }
.stat .l{ font-size: .74rem; }
.admin-main th, .admin-main td{ padding: .5rem .7rem; font-size: .85rem; }
.admin-main th{ font-size: .66rem; }
.quick-actions{ gap: .6rem; margin-bottom: 1rem; }
.quick-action{ padding: .65rem .75rem; }
.analytics-2col{ gap: 1rem; }
/* tighter forms in admin */
.admin-main .field{ margin-bottom: .8rem; }
.admin-main .input, .admin-main select, .admin-main textarea{ padding: .6rem .8rem; }

/* live-updated number pulse */
@keyframes pulseOnce{0%{color:var(--accent)}100%{}}
.pulse-once{animation:pulseOnce .8s var(--ease)}

/* =========================================================
   MOBILE UI PASS — clean, properly aligned admin + store
   ========================================================= */
@media(max-width:600px){
  /* Admin: tight, tidy */
  .admin-main{ padding: .7rem .75rem; }
  .admin-main .ph{ gap: .6rem; margin-bottom: .7rem; }
  .admin-main .ph .ph-ic{ width: 34px; height: 34px; font-size: 1.05rem; border-radius: 10px; }
  .admin-main .ph h1{ font-size: 1.15rem; }
  .admin-main .ph p{ font-size: .8rem; }
  .admin-main .help-box{ font-size: .8rem; padding: .7rem .8rem; line-height: 1.5; }
  .admin-main .help-steps{ grid-template-columns: 1fr; }
  .admin-main .panel{ padding: .8rem; }
  .admin-main .panel h3{ font-size: .95rem; }

  /* Admin top nav (horizontal pills) — neat wrap, no crowding */
  .admin-shell .admin-nav{ display: flex; flex-wrap: wrap; gap: .35rem; }
  .admin-shell .admin-nav a{ font-size: .8rem; padding: .4rem .6rem; border-radius: 8px; }

  /* Stat cards: 2 per row, compact */
  .stat-grid{ grid-template-columns: 1fr 1fr; gap: .55rem; }
  .stat{ padding: .65rem .7rem; }
  .stat .n{ font-size: 1.3rem; }
  .stat .l{ font-size: .7rem; }

  /* Tables never overflow the screen — scroll inside their box */
  .table-wrap{ -webkit-overflow-scrolling: touch; }
  .admin-main table{ font-size: .8rem; min-width: 0; }
  .admin-main th, .admin-main td{ padding: .45rem .55rem; }

  /* Visitor feed rows: compact + aligned */
  .vfeed-row{ gap: .6rem; padding: .55rem .35rem; }
  .vfeed-flag{ font-size: 1.15rem; width: 24px; }
  .vfeed-loc{ font-size: .82rem; }
  .vfeed-sub{ font-size: .72rem; }
  .vfeed-time{ font-size: .68rem; }

  /* Charts fit */
  .chart-bars{ height: 100px !important; gap: .2rem; }
  .cbar-lbl{ font-size: .58rem; }

  /* Toolbars / button rows wrap cleanly, full-width where it helps */
  .store-toolbar{ gap: .6rem; }
  .sort-form{ width: 100%; }
  .sort-form select{ flex: 1; }
}

/* Tiny phones */
@media(max-width:380px){
  .stat .n{ font-size: 1.15rem; }
  .admin-main .ph h1{ font-size: 1.05rem; }
}

/* =========================================================
   CRITICAL OVERFLOW FIX — nothing may stretch past the screen
   (grid/flex items default to min-width:auto, which lets wide
    tables push the whole layout wider than the viewport)
   ========================================================= */
.admin-shell{ max-width: 100vw; overflow-x: hidden; }
.admin-side, .admin-main{ min-width: 0; }
.panel, .card{ min-width: 0; }
.grid > *, .analytics-2col > *, .cart-layout > *, .hero-grid > *, .footer-top > *{ min-width: 0; }
.table-wrap{ overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table{ max-width: 100%; }

/* On phones, wide tables scroll neatly INSIDE their box (page never moves sideways) */
@media(max-width:700px){
  .admin-main .table-wrap table{ min-width: 440px; }
  .admin-main .table-wrap{ border-radius: 12px; }
}

/* Admin sidebar becomes a clean top bar on mobile — never cut off */
@media(max-width:960px){
  .admin-shell{ display: block; }
  .admin-side{ position: static; height: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .admin-side .brand{ margin-bottom: .7rem; }
  .admin-nav{ display: flex; flex-wrap: wrap; gap: .35rem; }
  .admin-nav a{ margin: 0; }
  .admin-nav a::before{ display: none; }
}

/* =========================================================
   MOBILE TAP TARGETS — make small text links easier to tap
   ========================================================= */
@media(max-width:700px){
  .crumbs a{ display:inline-block; padding:.25rem 0; }
  .footer-note a{ display:inline-block; padding:.3rem .1rem; }
  .footer-col a{ padding:.35rem 0; }
  /* "Sign in / Sign up" and similar inline links inside narrow panels */
  .panel-narrow p a, .center a{ display:inline-block; padding:.25rem .15rem; }
  .lang-switch a{ padding:.4rem .6rem; }
}