/* ========================================================
   DP Store — Global Styles
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --bg-card:#ffffff;
  --text:#0f172a;
  --text-soft:#4b5768;
  --text-faint:#8592a6;
  --border:#e3e9f2;
  --primary:#2F6FED;
  --primary-dark:#1b4fc7;
  --primary-soft:#e9f0ff;
  --cyan:#0ea5c4;
  --cyan-soft:#e3f8fc;
  --ink:#0b1220;
  --ink-soft:#1e293b;
  --accent:#0b1220;
  --success:#16a34a;
  --success-soft:#e9f9ef;
  --warning:#c2790a;
  --warning-soft:#fdf1de;
  --danger:#dc2626;
  --danger-soft:#fdeaea;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 8px rgba(15,23,42,.05);
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 20px 50px rgba(15,23,42,.14);
  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#080b12;
  --bg-soft:#0f1420;
  --bg-card:#131a28;
  --text:#eef2f8;
  --text-soft:#aab4c4;
  --text-faint:#707c8f;
  --border:#232c3d;
  --primary:#5B93FF;
  --primary-dark:#2F6FED;
  --primary-soft:#132038;
  --cyan:#33c8e8;
  --cyan-soft:#0e2530;
  --ink:#eef2f8;
  --ink-soft:#cbd3e0;
  --accent:#eef2f8;
  --success:#34d399;
  --success-soft:#123023;
  --warning:#f0883e;
  --warning-soft:#332008;
  --danger:#f37171;
  --danger-soft:#3a1414;
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 20px 50px rgba(0,0,0,.55);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  direction:rtl;
  transition:background .25s ease,color .25s ease;
  min-height:100vh;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;border:none;font-weight:700;font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, opacity .2s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(47,111,237,.35);}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 10px 26px rgba(47,111,237,.5);}
.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--ink);background:var(--primary-soft);}
.btn-soft{background:var(--primary-soft);color:var(--ink);}
.btn-soft:hover{filter:brightness(.97);}
.btn-dark{background:var(--ink);color:var(--bg);}
.btn-dark:hover{opacity:.88;}
.btn-block{width:100%;}
.btn-lg{padding:16px 30px;font-size:16px;}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-success{background:var(--success);color:#fff;}
.btn-danger{background:transparent;color:var(--danger);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;gap:24px;height:74px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;}
.logo-badge{
  width:38px;height:38px;border-radius:11px;
  background:var(--ink);
  color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.logo span.sub{color:var(--text-faint);font-weight:500;font-size:12px;display:block;}
.main-nav{display:flex;align-items:center;gap:6px;margin-inline-end:auto;}
.main-nav a{
  padding:10px 16px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--text-soft);
  transition:all .2s ease;
}
.main-nav a:hover,.main-nav a.active{background:var(--primary-soft);color:var(--primary-dark);}
.header-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;color:var(--text);
  transition:border-color .2s ease, color .2s ease;
}
.icon-btn:hover{border-color:var(--primary);color:var(--primary);}
.cart-count{
  position:absolute;top:-4px;left:-4px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;
  min-width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}
.menu-toggle{display:none;}

/* mobile nav */
@media (max-width:860px){
  .main-nav{
    position:fixed;inset-inline:16px;top:80px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch;
    padding:10px;gap:4px;display:none;margin:0;
  }
  .main-nav.open{display:flex;}
  .main-nav a{width:100%;text-align:center;}
  .menu-toggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  padding:76px 0 64px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(47,111,237,.20), transparent 60%),
    radial-gradient(ellipse 700px 420px at 100% 10%, rgba(14,165,196,.16), transparent 55%),
    linear-gradient(160deg,#070a10 0%,#0e1420 55%,#070a10 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 40%, transparent 100%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;text-align:center;}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:rgba(47,111,237,.14);color:#6fa0ff;
  border:1px solid rgba(47,111,237,.4);
  padding:8px 16px;border-radius:999px;font-weight:800;font-size:13px;margin-bottom:18px;
}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.25;font-weight:900;margin:0 0 18px;color:#fdfdfb;}
.hero h1 .accent-text{background:linear-gradient(90deg,#6fa0ff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:18px;color:#aeb8c9;line-height:1.8;margin:0 0 28px;max-width:540px;}
@media (max-width:900px){.hero p.lead{margin-inline:auto;}}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
@media (max-width:900px){.hero-cta{justify-content:center;}}
.hero .btn-outline{border-color:rgba(255,255,255,.25);color:#fdfdfb;}
.hero .btn-outline:hover{border-color:#6fa0ff;color:#6fa0ff;background:rgba(47,111,237,.12);}
.trust-row{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;}
@media (max-width:900px){.trust-row{justify-content:center;}}
.trust-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#aeb8c9;font-weight:700;}
.trust-item .ic{color:var(--cyan);font-size:17px;}

.hero-art{
  position:relative;height:380px;border-radius:28px;
  background:linear-gradient(150deg,#101a2c 0%,#0a0f18 60%,#000 100%);
  border:1px solid rgba(47,111,237,.3);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 60px rgba(47,111,237,.08);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hero-art::after{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(14,165,196,.4), transparent 70%);
  filter:blur(20px);
}
.hero-art .float-card{
  position:absolute;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);
  border:1px solid rgba(47,111,237,.35);border-radius:16px;padding:14px 18px;color:#fdfdfb;font-weight:800;
  font-size:13.5px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero-art .fc1{top:14%;right:8%;animation:floatY 4s ease-in-out infinite;}
.hero-art .fc2{bottom:16%;left:8%;animation:floatY 4.5s ease-in-out infinite .5s;}
.hero-art .fc3{top:48%;right:38%;animation:floatY 5s ease-in-out infinite 1s;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.hero-art .center-emoji{position:relative;font-size:70px;filter:drop-shadow(0 10px 25px rgba(14,165,196,.5));}

/* ---------- Section headers ---------- */
.section{padding:56px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px;gap:16px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin:0 0 6px;}
.section-head p{color:var(--text-soft);margin:0;font-size:15px;}
.section-head .view-all{font-weight:800;color:var(--primary);font-size:14px;white-space:nowrap;}

/* ---------- Category cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:760px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;display:flex;flex-direction:column;gap:14px;transition:transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.cat-card .cat-ic{
  width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;
}
.cat-card h3{margin:0;font-size:19px;font-weight:800;}
.cat-card p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.7;}
.cat-card .cat-count{font-size:12.5px;font-weight:800;color:var(--primary);}

/* ---------- Product grid & cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:1080px){.product-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.product-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media (max-width:460px){.product-grid{grid-template-columns:1fr;}}

.product-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;position:relative;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.product-thumb{
  height:150px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;color:#fff;
}
.thumb-logo{width:48px;height:48px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.3));}
.thumb-emoji-fallback{display:none;}
.product-gallery .thumb-logo{width:100px;height:100px;}
.product-badge{
  position:absolute;top:10px;inset-inline-start:10px;background:var(--accent);color:#fff;font-size:11px;
  font-weight:800;padding:5px 11px;border-radius:999px;
}
.product-cat-tag{
  position:absolute;top:10px;inset-inline-end:10px;background:rgba(255,255,255,.85);color:#111;font-size:10.5px;
  font-weight:800;padding:4px 10px;border-radius:999px;
}
.product-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-body h3{margin:0;font-size:15.5px;font-weight:800;line-height:1.4;}
.product-body .p-desc{font-size:12.5px;color:var(--text-soft);line-height:1.6;flex:1;}
.price-row{display:flex;align-items:center;gap:8px;margin-top:4px;}
.price-now{font-size:17px;font-weight:900;color:var(--primary-dark);}
.price-old{font-size:13px;color:var(--text-faint);text-decoration:line-through;}
.rating{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--warning);font-weight:700;}
.product-actions{display:flex;gap:8px;margin-top:6px;}

/* Thumb gradient palette classes */
.thumb-1{background:linear-gradient(135deg,#0f1c30,#233a5e);}
.thumb-2{background:linear-gradient(135deg,#2F6FED,#1b4fc7);}
.thumb-3{background:linear-gradient(135deg,#0a0f1a,#000000);}
.thumb-4{background:linear-gradient(135deg,#334155,#0f172a);}
.thumb-5{background:linear-gradient(135deg,#22d3ee,#0ea5c4);color:#04222b;}
.thumb-6{background:linear-gradient(135deg,#0b1220,#2F6FED 140%);}
.thumb-7{background:linear-gradient(135deg,#475569,#0f172a);}
.thumb-8{background:linear-gradient(135deg,#0a0f1a,#0e2530);}

/* ---------- Filters bar (shop page) ---------- */
.filters-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px;padding:14px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);
}
.filter-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.filter-tab{
  padding:9px 16px;border-radius:999px;font-weight:700;font-size:13.5px;border:1px solid var(--border);
  background:var(--bg-card);color:var(--text-soft);
}
.filter-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.search-box{
  margin-inline-start:auto;display:flex;align-items:center;gap:8px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:999px;padding:9px 16px;min-width:220px;
}
.search-box input{border:none;background:transparent;outline:none;color:var(--text);width:100%;font-size:13.5px;}
@media (max-width:760px){.search-box{margin-inline-start:0;width:100%;}}

/* ---------- Features / Why us ---------- */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.features-grid{grid-template-columns:1fr;}}
.feature-card{text-align:center;padding:26px 16px;border-radius:var(--radius);background:var(--bg-soft);}
.feature-card .f-ic{
  width:56px;height:56px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px;
}
.feature-card h4{margin:0 0 8px;font-size:15.5px;font-weight:800;}
.feature-card p{margin:0;font-size:13px;color:var(--text-soft);line-height:1.7;}

/* ---------- Payment methods strip ---------- */
.pay-strip{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.pay-chip{
  display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);
  padding:12px 20px;border-radius:999px;font-weight:800;font-size:13.5px;
}
.pay-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--success);}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:860px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.testi-card .stars{color:var(--warning);margin-bottom:10px;font-size:14px;}
.testi-card p.txt{color:var(--text-soft);font-size:14px;line-height:1.8;margin:0 0 16px;}
.testi-user{display:flex;align-items:center;gap:10px;}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;
}
.testi-user strong{display:block;font-size:13.5px;}
.testi-user span{font-size:11.5px;color:var(--text-faint);}

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(ellipse 500px 260px at 85% 0%, rgba(47,111,237,.22), transparent 60%),
    radial-gradient(ellipse 400px 220px at 5% 100%, rgba(14,165,196,.14), transparent 60%),
    linear-gradient(135deg,#0a0e16,#000000);
  border:1px solid rgba(47,111,237,.3);
  border-radius:var(--radius-lg);
  padding:46px 30px;text-align:center;color:#fdfdfb;position:relative;overflow:hidden;
}
.cta-band h2{font-size:clamp(22px,3vw,30px);margin:0 0 10px;font-weight:900;}
.cta-band p{margin:0 0 24px;color:#aeb8c9;font-size:15px;}
.cta-band .btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(47,111,237,.4);}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-soft);border-top:1px solid var(--border);margin-top:40px;padding:50px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{font-size:14.5px;font-weight:800;margin:0 0 14px;}
.footer-grid p{color:var(--text-soft);font-size:13.5px;line-height:1.8;margin:0 0 14px;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid ul a{color:var(--text-soft);font-size:13.5px;}
.footer-grid ul a:hover{color:var(--primary);}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--text-faint);
}
.social-row{display:flex;gap:10px;}
.social-row a{
  width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}

/* ---------- WhatsApp float button ---------- */
.wa-float{
  position:fixed;bottom:22px;left:22px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 10px 24px rgba(37,211,102,.5);
  z-index:200;
}

/* ---------- AI Assistant widget ---------- */
.ai-fab{
  position:fixed;bottom:22px;right:22px;width:60px;height:60px;border-radius:50%;
  background:var(--ink);color:var(--primary);border:2px solid var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:26px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);z-index:210;transition:transform .2s ease;
}
.ai-fab:hover{transform:scale(1.06);}
.ai-panel{
  position:fixed;bottom:96px;right:22px;width:360px;max-width:calc(100vw - 32px);height:480px;max-height:70vh;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;z-index:210;
  transform:translateY(16px) scale(.97);opacity:0;pointer-events:none;transition:all .2s ease;
}
.ai-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.ai-panel-header{
  background:var(--ink);color:#fdfdfb;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;
}
.ai-panel-title{font-weight:800;font-size:14.5px;color:var(--primary);}
.ai-panel-close{background:none;border:none;color:#fdfdfb;font-size:16px;padding:4px 8px;border-radius:6px;}
.ai-panel-close:hover{background:rgba(255,255,255,.1);}
.ai-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg-soft);}
.ai-bubble{max-width:82%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.7;}
.ai-bubble a{color:inherit;text-decoration:underline;font-weight:800;}
.ai-bubble-bot{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border);border-start-start-radius:4px;}
.ai-bubble-user{align-self:flex-end;background:var(--primary);color:#fff;font-weight:600;border-start-end-radius:4px;}
.ai-typing{display:flex;gap:4px;align-items:center;padding:14px;}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-faint);animation:aiBlink 1.2s infinite ease-in-out;}
.ai-typing span:nth-child(2){animation-delay:.2s;}
.ai-typing span:nth-child(3){animation-delay:.4s;}
@keyframes aiBlink{0%,80%,100%{opacity:.3;}40%{opacity:1;}}
.ai-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--bg-card);}
.ai-input-row input{
  flex:1;padding:11px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-soft);
  color:var(--text);font-size:13.5px;outline:none;
}
.ai-input-row input:focus{border-color:var(--primary);}
.ai-send-btn{
  width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:15px;flex:none;
}
@media (max-width:480px){
  .ai-panel{right:16px;bottom:90px;}
  .ai-fab{right:16px;}
}

/* ============ Product page ============ */
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-faint);margin-bottom:22px;flex-wrap:wrap;}
.breadcrumb a{color:var(--text-soft);font-weight:700;}
.breadcrumb a:hover{color:var(--primary);}
.product-view{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;}
@media (max-width:900px){.product-view{grid-template-columns:1fr;}}
.product-gallery{
  height:340px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  font-size:90px;color:#fff;box-shadow:var(--shadow);position:relative;
}
.product-info h1{font-size:clamp(24px,3vw,32px);font-weight:900;margin:0 0 10px;}
.meta-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.sold-count{font-size:13px;color:var(--text-faint);}
.price-block{
  display:flex;align-items:center;gap:14px;padding:18px;background:var(--bg-soft);border-radius:var(--radius);
  margin-bottom:20px;flex-wrap:wrap;
}
.price-block .price-now{font-size:26px;}
.discount-badge{background:var(--success-soft);color:var(--success);font-weight:800;font-size:12.5px;padding:5px 12px;border-radius:999px;}
.variant-block{margin-bottom:20px;}
.variant-block h4{font-size:14px;font-weight:800;margin:0 0 10px;}
.variant-options{display:flex;gap:10px;flex-wrap:wrap;}
.variant-opt{
  padding:11px 18px;border:2px solid var(--border);border-radius:var(--radius-sm);font-weight:700;font-size:13.5px;
  background:var(--bg-card);color:var(--text-soft);text-align:center;min-width:100px;
}
.variant-opt.active{border-color:var(--primary);color:var(--primary-dark);background:var(--primary-soft);}
.variant-opt small{display:block;font-weight:900;color:var(--text);font-size:13px;margin-top:3px;}
.buy-actions{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
.info-box{
  display:flex;gap:12px;padding:16px;border-radius:var(--radius);background:var(--warning-soft);color:var(--warning);
  font-size:13.5px;line-height:1.8;margin-bottom:20px;font-weight:600;
}
.info-box.success{background:var(--success-soft);color:var(--success);}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tab-btn{padding:12px 18px;font-weight:800;font-size:14px;color:var(--text-faint);border-bottom:3px solid transparent;background:none;border-top:none;border-inline:none;}
.tab-btn.active{color:var(--primary-dark);border-color:var(--primary);}
.tab-panel{display:none;color:var(--text-soft);font-size:14.5px;line-height:1.9;}
.tab-panel.active{display:block;}
.feature-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.feature-list li .ck{color:var(--success);font-weight:900;}

/* ============ Checkout page ============ */
.checkout-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:flex-start;}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr;}}
.summary-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  position:sticky;top:96px;
}
.summary-card h3{margin:0 0 16px;font-size:16px;font-weight:900;}
.summary-item{display:flex;gap:12px;align-items:center;margin-bottom:16px;}
.summary-thumb{width:56px;height:56px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;}
.summary-item .si-name{font-weight:800;font-size:13.5px;margin:0 0 3px;}
.summary-item .si-variant{font-size:12px;color:var(--text-faint);}
.summary-line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text-soft);padding:8px 0;border-top:1px dashed var(--border);}
.summary-line.total{font-weight:900;font-size:16px;color:var(--text);border-top:1px solid var(--border);padding-top:14px;margin-top:6px;}
.promo-row{display:flex;gap:8px;margin:14px 0;}
.promo-row input{flex:1;padding:11px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-soft);color:var(--text);}

.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:800;font-size:13.5px;margin-bottom:8px;}
.form-group input{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:14px;outline:none;
}
.form-group input:focus{border-color:var(--primary);}
.form-hint{font-size:12px;color:var(--text-faint);margin-top:6px;}

.pay-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;}
@media (max-width:640px){.pay-methods{grid-template-columns:repeat(2,1fr);}}
.pay-method{
  border:2px solid var(--border);border-radius:var(--radius);padding:16px 10px;text-align:center;
  background:var(--bg-card);display:flex;flex-direction:column;align-items:center;gap:8px;
}
.pay-method .pm-ic{font-size:26px;display:inline-flex;align-items:center;justify-content:center;}
.pay-method .pm-ic .thumb-logo{
  width:26px;height:26px;padding:5px;border-radius:8px;background:var(--ink);box-sizing:content-box;
}
.pay-method .pm-ic .thumb-emoji-fallback{font-size:26px;}
.pay-method span{font-size:12.5px;font-weight:800;}
.pay-method.active{border-color:var(--primary);background:var(--primary-soft);}

.pay-panel{display:none;border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--bg-soft);}
.pay-panel.active{display:block;}
.account-row{
  display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:10px;
}
.account-row .lbl{font-size:12px;color:var(--text-faint);display:block;margin-bottom:3px;}
.account-row .val{font-weight:900;font-size:15px;letter-spacing:.5px;}
.copy-btn{border:1px solid var(--border);background:var(--bg-card);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:800;}
.copy-btn.copied{background:var(--success-soft);color:var(--success);border-color:var(--success);}
.step-list{margin:14px 0;padding-inline-start:20px;list-style:decimal;color:var(--text-soft);font-size:13.5px;line-height:2;}

.order-success{text-align:center;padding:40px 20px;}
.order-success .ok-circle{
  width:80px;height:80px;border-radius:50%;background:var(--success-soft);color:var(--success);font-size:40px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.order-success h2{margin:0 0 10px;font-size:22px;font-weight:900;}
.order-success p{color:var(--text-soft);margin:0 0 24px;}
.order-id-box{
  display:inline-flex;align-items:center;gap:10px;background:var(--bg-soft);border:1px dashed var(--border);
  padding:10px 18px;border-radius:999px;font-weight:800;font-size:13.5px;margin-bottom:24px;
}

/* ============ Orders page ============ */
.order-lookup{max-width:480px;margin:0 auto 40px;text-align:center;}
.order-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;flex-wrap:wrap;
}
.status-pill{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;}
.status-pending{background:var(--warning-soft);color:var(--warning);}
.status-done{background:var(--success-soft);color:var(--success);}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-faint);}
.empty-state .e-ic{font-size:50px;margin-bottom:16px;}

/* ---------- Page header banner (shop/product/checkout) ---------- */
.page-banner{padding:36px 0 10px;}
.page-banner h1{font-size:clamp(22px,3vw,30px);font-weight:900;margin:0 0 6px;}
.page-banner p{color:var(--text-soft);margin:0;}

/* ============ Admin dashboard ============ */
.admin-login-overlay{
  position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;
}
.admin-login-card{
  width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;text-align:center;box-shadow:var(--shadow-lg);
}
.admin-login-card .logo-badge{margin:0 auto 16px;}
.admin-login-card h2{margin:0 0 6px;font-size:19px;font-weight:900;}
.admin-login-card p{color:var(--text-soft);font-size:13.5px;margin:0 0 20px;}
.admin-login-card input{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:14px;margin-bottom:14px;text-align:center;
}
.admin-login-error{color:var(--danger);font-size:12.5px;margin-bottom:10px;min-height:16px;}

.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.admin-topbar h1{margin:0;font-size:22px;font-weight:900;}
.config-chips{display:flex;gap:8px;flex-wrap:wrap;}
.config-chip{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;
  border:1px solid var(--border);
}
.config-chip.ok{background:var(--success-soft);color:var(--success);border-color:transparent;}
.config-chip.off{background:var(--warning-soft);color:var(--warning);border-color:transparent;}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.kpi-grid{grid-template-columns:1fr;}}
.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.kpi-card .kpi-label{font-size:12.5px;color:var(--text-faint);font-weight:700;margin-bottom:8px;}
.kpi-card .kpi-value{font-size:26px;font-weight:900;}
.kpi-card .kpi-sub{font-size:12px;color:var(--text-soft);margin-top:6px;}

.dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-bottom:18px;align-items:stretch;}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr;}}
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.chart-card h3{margin:0 0 4px;font-size:15px;font-weight:900;}
.chart-card .chart-sub{color:var(--text-faint);font-size:12.5px;margin:0 0 18px;}

/* horizontal bar chart (top products / funnel) */
.bar-row{margin-bottom:14px;}
.bar-row:last-child{margin-bottom:0;}
.bar-row-head{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:6px;}
.bar-row-head .bv{color:var(--text-faint);font-weight:800;}
.bar-track{height:10px;background:var(--bg-soft);border-radius:999px;overflow:hidden;position:relative;}
.bar-fill{
  height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary-dark),var(--primary));
  min-width:4px;transition:width .4s ease;position:relative;
}
.bar-row.is-top .bar-fill{background:linear-gradient(90deg,var(--ink),var(--ink-soft));}
.bar-row.is-top .bar-row-head{color:var(--ink);}

/* funnel */
.funnel-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.funnel-label{width:118px;flex:none;font-size:12.5px;font-weight:700;color:var(--text-soft);}
.funnel-track{flex:1;height:30px;background:var(--bg-soft);border-radius:8px;overflow:hidden;}
.funnel-fill{
  height:100%;border-radius:8px;background:linear-gradient(90deg,var(--primary-dark),var(--primary));
  display:flex;align-items:center;justify-content:flex-end;padding-inline-end:10px;color:#fff;font-weight:900;
  font-size:12.5px;min-width:34px;transition:width .4s ease;
}
.funnel-conv{width:58px;flex:none;text-align:center;font-size:11.5px;font-weight:800;color:var(--text-faint);}

/* status stacked bar */
.status-stack{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--bg-soft);margin-bottom:14px;}
.status-seg{height:100%;transition:width .4s ease;}
.status-seg + .status-seg{margin-inline-start:2px;}
.status-legend{display:flex;gap:16px;flex-wrap:wrap;}
.status-legend-item{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--text-soft);}
.status-legend-dot{width:9px;height:9px;border-radius:50%;flex:none;}

/* revenue trend (sparkline) */
.trend-wrap{position:relative;}
.trend-svg{width:100%;height:150px;display:block;overflow:visible;}
.trend-tooltip{
  position:absolute;background:var(--ink);color:#fdfdfb;font-size:11.5px;font-weight:700;padding:6px 10px;
  border-radius:8px;pointer-events:none;transform:translate(-50%,-120%);white-space:nowrap;opacity:0;transition:opacity .1s;
  z-index:5;
}
.trend-tooltip.show{opacity:1;}
.trend-dot{fill:var(--primary);stroke:var(--bg-card);stroke-width:2;}

/* admin table */
.admin-table-wrap{overflow-x:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);}
table.admin-table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px;}
table.admin-table th{
  text-align:right;padding:14px 16px;background:var(--bg-soft);font-weight:800;color:var(--text-soft);
  font-size:12px;border-bottom:1px solid var(--border);white-space:nowrap;
}
table.admin-table td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.admin-table tr:last-child td{border-bottom:none;}
.admin-table select{
  padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);
  font-size:12.5px;font-weight:700;
}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.badge-soft{background:var(--primary-soft);color:var(--primary-dark);padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;}