@font-face{
  font-family:'Vazirmatn';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

:root{
  --bg-1:#E4EEFF;
  --bg-2:#E0F2FE;
  --bg-3:#FFF4D9;
  --bg-4:#E3F3FF;
  --ink:#2B2138;
  --ink-soft:#76697F;
  --plum:#2563EB;
  --plum-deep:#1D4ED8;
  --rose:#0EA5E9;
  --gold:#F0B23B;
  --gold-deep:#B8860B;
  --coral:#F4685A;
  --radius-lg:28px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Vazirmatn', Tahoma, 'Segoe UI', Arial, sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(at 12% 18%, var(--bg-1) 0px, transparent 55%),
    radial-gradient(at 88% 8%, var(--bg-3) 0px, transparent 55%),
    radial-gradient(at 85% 85%, var(--bg-2) 0px, transparent 55%),
    radial-gradient(at 15% 92%, var(--bg-4) 0px, transparent 55%),
    #F4F8FF;
  overflow-x:hidden;
  line-height:1.5;
}

/* ===== Ambient liquid blobs ===== */
.bg-blobs{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(55px); opacity:.4; will-change:transform; animation: float 22s ease-in-out infinite alternate; }
.blob1{ width:420px; height:420px; background:var(--rose); top:-120px; right:-100px; }
.blob2{ width:360px; height:360px; background:var(--gold); bottom:5%; left:-100px; animation-delay:-8s; }
.blob3{ width:320px; height:320px; background:var(--plum); top:45%; right:25%; animation-delay:-15s; }
/* translate-only (no scale): the blurred layer is rasterized once and just
   composited each frame, instead of re-blurring on every scale step. */
@keyframes float{ from{ transform:translate(0,0); } to{ transform:translate(40px,-50px); } }
@media (prefers-reduced-motion: reduce){ .blob{ animation:none; } }

/* ===== Liquid glass utilities ===== */
.glass{
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.4));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(37,99,235,0.14), inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius: var(--radius-lg);
}
.glass-strong{
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.72));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow: 0 8px 32px rgba(37,99,235,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--plum-deep); outline-offset:2px;
}

/* ===== Navbar ===== */
.navbar-wrap{ position:sticky; top:0; z-index:1000; padding:16px 20px 0; }
.navbar{
  position:relative;
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 18px; border-radius:999px;
}
.navbar::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:999px; overflow:hidden;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  background-size:220% 100%;
  animation: shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{ 0%{ background-position:220% 0; } 100%{ background-position:-220% 0; } }
@media (prefers-reduced-motion: reduce){ .navbar::before{ animation:none; } }

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex-shrink:0; z-index:1; }
.logo-icon{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--plum),var(--rose),var(--gold)); display:flex; align-items:center; justify-content:center; }
.logo-icon svg{ width:20px; height:20px; }
.logo-text{ font-size:1.3rem; font-weight:900; letter-spacing:-.5px; }

.nav-links{ display:flex; gap:26px; z-index:1; }
.nav-links a{ color:var(--ink); text-decoration:none; font-weight:600; font-size:.92rem; position:relative; padding:4px 0; }
.nav-links a::after{ content:''; position:absolute; right:0; left:0; bottom:-4px; height:2px; background:var(--plum); border-radius:2px; transform:scaleX(0); transition:transform .25s; }
.nav-links a:hover::after{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:8px; z-index:1; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:none; flex-shrink:0;
  background:rgba(255,255,255,0.55); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative; transition:transform .2s, background .2s;
}
.icon-btn:hover{ background:rgba(255,255,255,0.9); transform:translateY(-1px); }
.icon-btn svg{ width:19px; height:19px; }
.icon-btn.wish-nav.active{ color:var(--coral); }
.menu-btn{ display:none; }
@media (max-width:880px){ .nav-links{ display:none; } .menu-btn{ display:flex; } }

.badge{
  position:absolute; top:-4px; left:-4px; min-width:18px; height:18px; padding:0 4px;
  background:var(--coral); color:#fff; font-size:.65rem; font-weight:800;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.9);
}
.badge[hidden]{ display:none; }

.search-bar{
  max-width:1200px; margin:12px auto 0; padding:14px 22px; border-radius:24px;
  display:flex; align-items:center; gap:12px;
}
.search-bar[hidden]{ display:none; }
.search-bar svg{ width:20px; height:20px; color:var(--ink-soft); flex-shrink:0; }
.search-bar input{ flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:1rem; color:var(--ink); }

.mobile-menu{
  max-width:1200px; margin:12px auto 0; padding:14px 22px; border-radius:24px;
  display:none; flex-direction:column; gap:6px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ color:var(--ink); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:12px; transition:background .2s; }
.mobile-menu a:hover{ background:rgba(37,99,235,.1); }
@media (min-width:881px){ .mobile-menu{ display:none !important; } }

/* ===== Layout helpers ===== */
.section{
  max-width:1200px; margin:0 auto; padding:54px 20px;
  content-visibility:auto;
  contain-intrinsic-size:1px 680px;
}
.section-head{ text-align:center; margin-bottom:36px; }
.section-head h2{ font-size:clamp(1.5rem,3vw,2.3rem); font-weight:800; margin-bottom:8px; }
.section-head p{ color:var(--ink-soft); font-size:.95rem; }

/* ===== Hero ===== */
.hero{
  max-width:1200px; margin:20px auto 0; padding:0 20px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:center;
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr; text-align:center; } }
.hero-card{ padding:44px; }
@media (max-width:600px){ .hero-card{ padding:30px 24px; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:999px;
  background:rgba(37,99,235,.12); color:var(--plum-deep); font-weight:700; font-size:.8rem; margin-bottom:18px;
}
.hero h1{ font-size:clamp(1.8rem,4.2vw,3rem); font-weight:900; line-height:1.45; margin-bottom:16px; }
.hero h1 .accent{ color:var(--plum-deep); }
.hero p{ color:var(--ink-soft); font-size:1rem; line-height:1.9; margin-bottom:26px; max-width:520px; }
@media (max-width:900px){ .hero p{ margin-inline:auto; } }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:900px){ .hero-actions{ justify-content:center; } }
.btn-primary{
  background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff; border:none;
  padding:14px 30px; border-radius:999px; font-weight:700; font-size:.95rem; font-family:inherit;
  cursor:pointer; box-shadow:0 10px 24px rgba(37,99,235,.35); transition:transform .2s, box-shadow .2s;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,99,235,.45); }
.btn-ghost{
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8); color:var(--ink);
  padding:14px 30px; border-radius:999px; font-weight:700; font-size:.95rem; font-family:inherit;
  cursor:pointer; backdrop-filter:blur(10px); transition:background .2s;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.btn-ghost:hover{ background:rgba(255,255,255,.8); }
.hero-stats{ display:flex; gap:26px; margin-top:32px; flex-wrap:wrap; }
@media (max-width:900px){ .hero-stats{ justify-content:center; } }
.hero-stat strong{ display:block; font-size:1.3rem; font-weight:800; color:var(--plum-deep); }
.hero-stat span{ color:var(--ink-soft); font-size:.8rem; }

.hero-visual{ position:relative; height:380px; display:flex; align-items:center; justify-content:center; }
@media (max-width:900px){ .hero-visual{ height:280px; margin-top:10px; } }
.hero-orb{
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.15) 45%, rgba(37,99,235,.22) 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 60px rgba(37,99,235,.25), inset 0 0 60px rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:900px){ .hero-orb{ width:220px; height:220px; } }
.hero-orb svg{ width:55%; height:55%; }
.float-chip{
  position:absolute; padding:10px 18px; border-radius:999px; display:flex; align-items:center; gap:6px;
  font-weight:700; font-size:.82rem; animation:floaty 6s ease-in-out infinite;
}
.chip-1{ top:6%; right:2%; animation-delay:0s; }
.chip-2{ bottom:10%; left:0; animation-delay:-3s; }
@media (max-width:900px){ .chip-1{ top:0; right:5%; } .chip-2{ bottom:2%; left:5%; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .float-chip{ animation:none; } }

@media (max-width:700px){
  .bg-blobs{ display:none; }
  .navbar::before, .float-chip{ animation:none; }
  .glass, .glass-strong, .hero-orb, .btn-ghost{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .hero-orb{
    box-shadow:0 14px 34px rgba(37,99,235,.18), inset 0 0 36px rgba(255,255,255,.45);
  }
}

/* ===== Categories ===== */
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
.cat-card{
  padding:26px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;
  cursor:pointer; transition:transform .25s, box-shadow .25s; border-radius:22px; border:none; font-family:inherit;
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(37,99,235,.2); }
.cat-icon{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; }
.cat-icon svg{ width:50%; height:50%; }
.cat-card span{ font-weight:700; font-size:.85rem; color:var(--ink); }

/* category color tokens */
.cat-1{ background:linear-gradient(135deg,#FBBF24,#D97706); }
.cat-2{ background:linear-gradient(135deg,#7DD3FC,#3B82F6); }
.cat-3{ background:linear-gradient(135deg,#99F6E4,#0EA5E9); }
.cat-4{ background:linear-gradient(135deg,#FDE68A,#B45309); }
.cat-5{ background:linear-gradient(135deg,#93C5FD,#1D4ED8); }
.cat-6{ background:linear-gradient(135deg,#6EE7B7,#059669); }

/* ===== Offer banner ===== */
.offer-banner{
  border-radius:32px; padding:36px 40px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:24px;
  background:
    linear-gradient(135deg, rgba(251,191,36,.22), rgba(14,165,233,.16)),
    linear-gradient(135deg, rgba(255,255,255,0.68), rgba(255,255,255,0.32));
}
.offer-text h3{ font-size:1.4rem; font-weight:800; margin-bottom:6px; }
.offer-text p{ color:var(--ink-soft); font-size:.92rem; }
.countdown{ display:flex; gap:10px; align-items:center; }
.countdown .box{
  background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.7);
  border-radius:14px; padding:10px 16px; text-align:center; min-width:62px;
}
.countdown .box strong{ display:block; font-size:1.3rem; font-weight:800; font-variant-numeric:tabular-nums; }
.countdown .box span{ font-size:.7rem; color:var(--ink-soft); font-weight:600; }

/* ===== Products ===== */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1024px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
.product-card{
  border-radius:24px; padding:14px; display:flex; flex-direction:column; position:relative;
  transition:transform .3s ease-out, box-shadow .3s ease-out;
  box-shadow:0 6px 18px rgba(80,50,140,.06);
}
/* Premium "lift & glow" hover — pointer devices only (no stuck hover on touch). */
@media (hover:hover) and (pointer:fine){
  .product-card:hover{
    transform:translateY(-8px);
    box-shadow:
      0 10px 25px rgba(64,224,208,.20),
      0 20px 50px rgba(0,191,255,.13),
      0 0 30px rgba(64,224,208,.15);
  }
  .product-card:hover .visual-photo{ transform:scale(1.04); filter:brightness(1.06) saturate(1.06) contrast(1.03); }
  .product-card:hover .product-name{ color:#0bb3c4; font-weight:800; }
  .product-card:hover .product-brand{ color:#0bb3c4; }
  .product-card:hover .product-rating{ animation:ratingShimmer 1.2s ease-in-out; }
  .product-card:hover .product-rating svg{ filter:drop-shadow(0 0 4px rgba(64,224,208,.65)); }
  .product-card:hover .discount-badge{ transform:scale(1.06); box-shadow:0 4px 14px rgba(255,90,120,.35); }
  .product-card:hover .product-visual::after{ animation:cardShine .9s ease-out; }
  .product-card:hover .quick-view{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
}
/* Touch: gentle tap feedback instead of hover. */
.product-card:active{ transform:scale(.985); box-shadow:0 8px 22px rgba(64,224,208,.18); }
@media (prefers-reduced-motion:reduce){
  .product-card, .visual-photo{ transition:none; }
  .product-card:hover{ transform:none; }
  .product-card:hover .product-visual::after{ animation:none; }
}
.product-visual{
  aspect-ratio:1/1; border-radius:18px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  /* Clean white photo tile, visually distinct from the glassy card body. */
  background:#ffffff;
  border:1px solid rgba(120,90,170,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 4px rgba(80,50,140,.05);
}
/* product mockups/photos sit on white with a little breathing room around them */
.product-visual .visual-photo{ object-fit:contain; padding:8%; box-sizing:border-box; }
.product-visual svg{ width:46%; height:46%; }
.discount-badge{
  position:absolute; top:10px; right:10px; background:var(--coral); color:#fff;
  font-weight:800; font-size:.72rem; padding:4px 10px; border-radius:999px;
}
.wish-btn{
  position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(255,255,255,.75); color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color .2s, background .2s;
}
.wish-btn svg{ width:15px; height:15px; }
.wish-btn.active{ color:var(--coral); background:#fff; }
.product-cat{ color:var(--plum-deep); font-size:.72rem; font-weight:700; margin-bottom:4px; }
.product-name{ font-weight:700; font-size:.92rem; line-height:1.6; margin-bottom:8px; min-height:44px; }
.product-rating{ display:flex; align-items:center; gap:4px; margin-bottom:10px; font-size:.78rem; font-weight:700; color:var(--gold-deep); }
.product-rating svg{ width:13px; height:13px; }
.product-rating .count{ color:var(--ink-soft); font-weight:500; }
.product-price{ display:flex; align-items:baseline; gap:8px; margin-top:auto; margin-bottom:12px; flex-wrap:wrap; }
.price-now{ font-size:1.05rem; font-weight:800; }
.price-old{ font-size:.78rem; color:var(--ink-soft); text-decoration:line-through; }
.product-stock{ font-size:.74rem; font-weight:700; margin:-4px 0 10px; }
.product-stock.in{ color:#1f9d63; }
.product-stock.out{ color:var(--coral); }
.add-to-cart{
  width:100%; padding:11px; border-radius:14px; border:none; font-family:inherit;
  background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff; font-weight:700; font-size:.85rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:transform .2s, filter .2s;
}
.add-to-cart:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.add-to-cart svg{ width:16px; height:16px; }

/* ---- Premium hover support: photo, light sweep, quick-view, brand ---- */
.visual-photo{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease-out, filter .35s ease-out; }
.product-visual::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform:translateX(-160%); opacity:0; }
.product-visual .wish-btn, .product-visual .discount-badge, .product-visual .quick-view{ z-index:2; }
@keyframes cardShine{ 0%{ transform:translateX(-160%); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateX(160%); opacity:0; } }
@keyframes ratingShimmer{ 0%,100%{ filter:none; } 50%{ filter:brightness(1.18); } }

.product-brand{ font-size:.7rem; font-weight:800; color:var(--ink-soft); letter-spacing:.2px; margin-bottom:2px; transition:color .3s; }

.quick-view{ position:absolute; bottom:10px; right:20px; transform:translate(-50%,16px); opacity:0; pointer-events:none;
  border:none; cursor:pointer; font-family:inherit; background:rgba(255,255,255,.94); color:#0a8fa0; font-weight:800; font-size:.74rem;
  padding:8px 15px; border-radius:999px; backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:opacity .3s ease-out, transform .3s ease-out; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.quick-view:hover{ background:#fff; }

/* ---- Quick-view modal ---- */
.qv-overlay{ position:fixed; inset:0; z-index:5200; background:rgba(15,10,30,.55); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s; }
.qv-overlay.show{ opacity:1; pointer-events:auto; }
.qv-card{ max-width:680px; width:100%; border-radius:22px; padding:20px; position:relative; animation:rewardIn .35s cubic-bezier(.3,1.3,.5,1); }
.qv-close{ position:absolute; top:14px; inset-inline-end:14px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(120,90,170,.1); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
.qv-close svg{ width:18px; height:18px; }
.qv-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:620px){ .qv-grid{ grid-template-columns:1fr 1fr; } }
.qv-visual{ position:relative; aspect-ratio:1/1; width:100%; max-width:260px; align-self:start; margin-inline:auto;
  border-radius:18px; overflow:hidden; background:#ffffff; border:1px solid rgba(120,90,170,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }
.qv-visual img, .qv-visual .visual-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:9%; box-sizing:border-box; pointer-events:none; }
.qv-visual svg{ position:absolute; inset:0; margin:auto; width:60%; height:60%; }
.qv-info{ display:flex; flex-direction:column; }
.qv-brand{ font-size:.74rem; font-weight:800; color:#0bb3c4; }
.qv-name{ font-size:1.15rem; font-weight:800; line-height:1.6; margin:4px 0 8px; }
.qv-rating{ display:flex; align-items:center; gap:4px; font-size:.82rem; font-weight:700; color:var(--gold-deep); margin-bottom:8px; }
.qv-rating svg{ width:14px; height:14px; fill:currentColor; }
.qv-desc{ font-size:.84rem; color:var(--ink-soft); line-height:1.9; margin-bottom:10px; }
.qv-price{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.qv-price .price-now{ font-size:1.3rem; font-weight:900; color:#2563EB; }
.qv-actions{ display:flex; gap:8px; margin-top:auto; align-items:center; }
.qv-actions .add-to-cart{ flex:1; width:auto; }
.qv-wish{ width:46px; height:46px; flex:0 0 auto; border-radius:14px; border:1px solid rgba(120,90,170,.25); background:rgba(255,255,255,.6); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.qv-wish svg{ width:20px; height:20px; }
.qv-wish.active{ color:var(--coral); border-color:var(--coral); }
.qv-full{ display:block; text-align:center; margin-top:12px; font-size:.82rem; font-weight:700; color:#2563EB; }

/* ===== Trust badges ===== */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:800px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
.trust-card{ padding:26px 20px; border-radius:20px; text-align:center; }
.trust-icon{
  width:48px; height:48px; margin:0 auto 14px; border-radius:14px;
  background:linear-gradient(135deg,var(--plum),var(--rose)); display:flex; align-items:center; justify-content:center;
}
.trust-icon svg{ width:24px; height:24px; color:#fff; }
.trust-card h4{ font-weight:800; font-size:.95rem; margin-bottom:6px; }
.trust-card p{ color:var(--ink-soft); font-size:.82rem; line-height:1.7; }

/* ===== Footer ===== */
footer{ max-width:1200px; margin:30px auto 0; padding:0 20px; }
.footer-glass{ border-radius:32px; padding:44px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:32px; }
@media (max-width:820px){ .footer-glass{ grid-template-columns:1fr 1fr; padding:32px; } .footer-brand{ grid-column:1/-1; } }
@media (max-width:520px){ .footer-glass{ grid-template-columns:1fr; } }
.footer-glass h4{ font-weight:800; font-size:.95rem; margin-bottom:16px; }
.footer-brand p{ color:var(--ink-soft); font-size:.88rem; line-height:1.8; margin:14px 0; max-width:320px; }
.footer-contact{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 16px; max-width:340px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:9px; color:var(--ink-soft); font-size:.86rem; line-height:1.7; }
.footer-contact svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--plum-deep); }
.footer-contact a{ color:var(--ink-soft); text-decoration:none; transition:color .2s; word-break:break-word; }
.footer-contact a:hover{ color:var(--plum-deep); }
.footer-glass ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-glass ul a{ color:var(--ink-soft); text-decoration:none; font-size:.88rem; transition:color .2s; }
.footer-glass ul a:hover{ color:var(--plum-deep); }
.newsletter-col p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:12px; }
.newsletter-input{ display:flex; gap:8px; }
.newsletter-input input{
  flex:1; min-width:0; padding:11px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.5); font-family:inherit; font-size:.85rem; outline:none; color:var(--ink);
}
.newsletter-input button{
  padding:11px 18px; border-radius:999px; border:none; font-family:inherit; font-weight:700; font-size:.85rem;
  background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff; cursor:pointer; flex-shrink:0;
}
.social-row{ display:flex; gap:10px; margin-top:6px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none; transition:.2s;
}
.social-row a svg{ width:17px; height:17px; }
.social-row a:hover{ background:var(--plum); color:#fff; }
.footer-bottom{ text-align:center; padding:22px 0 130px; color:var(--ink-soft); font-size:.82rem; }
@media (min-width:881px){ .footer-bottom{ padding-bottom:30px; } }

/* ===== Bottom tab bar (mobile liquid glass) ===== */
.tabbar{
  position:fixed; bottom:16px; right:20px; transform:none; z-index:1000;
  display:flex; gap:2px; padding:8px 10px; border-radius:999px;
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
  color:var(--ink-soft); font-size:.62rem; font-weight:700; padding:7px 14px; border-radius:16px;
  position:relative; transition:.2s;
}
.tabbar a.active{ color:var(--plum-deep); background:rgba(37,99,235,.14); }
.tabbar a svg{ width:21px; height:21px; }
.tab-badge{
  position:absolute; top:2px; left:10px; background:var(--coral); color:#fff;
  font-size:.6rem; min-width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; border:2px solid rgba(255,255,255,.9);
}
@media (min-width:881px){ .tabbar{ display:none; } }
@media (max-width:880px){ body{ padding-bottom:88px; } }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:185px; right:20px; transform:translateX(-50%) translateY(16px);
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:.88rem;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:2000;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (min-width:881px){ .toast{ bottom:28px; } }

/* ===== Cart & Wishlist Drawers ===== */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(43,33,56,.32);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .3s; z-index:2050;
}
.drawer-overlay.show{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; bottom:0; right:0; width:400px; max-width:92vw;
  z-index:2100; display:flex; flex-direction:column;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.22,.8,.2,1);
}
.drawer.open{ transform:translateX(0); }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid rgba(37,99,235,.14); flex-shrink:0;
}
.drawer-head h3{ font-size:1.15rem; font-weight:800; }
.drawer-close{
  width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
  transition:background .2s, color .2s;
}
.drawer-close:hover{ background:#fff; color:var(--coral); }
.drawer-close svg{ width:18px; height:18px; }

.drawer-body{ flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:12px; }

.drawer-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:60px 20px; color:var(--ink-soft); margin:auto;
}
.drawer-empty svg{ width:54px; height:54px; opacity:.35; }
.drawer-empty p{ font-weight:800; color:var(--ink); font-size:.95rem; }
.drawer-empty span{ font-size:.82rem; }

.cart-item, .wish-item{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7);
}
.cart-item-visual, .wish-item-visual{
  width:50px; height:50px; border-radius:14px; flex-shrink:0;
}
.cart-item-info, .wish-item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.cart-item-info h4, .wish-item-info h4{
  font-size:.85rem; font-weight:700; line-height:1.4;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.cart-item-price, .wish-item-price{ font-size:.82rem; font-weight:800; color:var(--plum-deep); }

.qty-control{
  display:flex; align-items:center; gap:10px; background:rgba(37,99,235,.1);
  border-radius:999px; padding:4px; width:fit-content;
}
.qty-btn{
  width:26px; height:26px; border-radius:50%; border:none; background:#fff; color:var(--plum-deep);
  font-weight:800; font-size:1rem; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s, color .15s; line-height:1;
}
.qty-btn:hover{ background:var(--plum); color:#fff; }
.qty-val{ font-weight:800; font-size:.85rem; min-width:18px; text-align:center; }

.cart-item-remove, .wish-item-remove{
  width:30px; height:30px; border-radius:50%; border:none; background:rgba(244,104,90,.12);
  color:var(--coral); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:background .2s, color .2s;
}
.cart-item-remove:hover, .wish-item-remove:hover{ background:var(--coral); color:#fff; }
.cart-item-remove svg, .wish-item-remove svg{ width:15px; height:15px; }

.wish-item-add{
  width:34px; height:34px; border-radius:50%; border:none; background:var(--plum); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s;
}
.wish-item-add:hover{ background:var(--plum-deep); }
.wish-item-add svg{ width:16px; height:16px; }

.drawer-footer{
  padding:18px 22px; border-top:1px solid rgba(37,99,235,.14); display:flex; flex-direction:column; gap:14px; flex-shrink:0;
}
.drawer-total{ display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.drawer-total strong{ font-size:1.15rem; color:var(--plum-deep); }
.checkout-btn{
  border:none; border-radius:999px; padding:14px; font-weight:800; font-size:.95rem; cursor:pointer;
  background:linear-gradient(135deg,var(--plum),var(--plum-deep)); color:#fff;
  box-shadow:0 8px 24px rgba(37,99,235,.35); transition:filter .2s, transform .2s;
}
.checkout-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

@media (max-width:480px){ .drawer{ width:100%; border-radius:0; } }


/* =====================================================================
   Shared additions for the full-stack app:
   auth pages, account menu, chat widgets, admin dashboard, alerts
   ===================================================================== */

/* ----- Generic form elements ----- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:.85rem; font-weight:700; color:var(--ink); }
.field input, .field select, .field textarea{
  padding:12px 16px; border-radius:14px; border:1px solid rgba(37,99,235,.18);
  background:rgba(255,255,255,.6); font-family:inherit; font-size:.92rem; color:var(--ink);
  outline:none; transition:border-color .2s, background .2s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--plum); background:rgba(255,255,255,.9);
}
.field textarea{ resize:vertical; min-height:80px; }
.field-hint{ font-size:.76rem; color:var(--ink-soft); }

.btn-block{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary[disabled], .btn-ghost[disabled]{ opacity:.6; cursor:not-allowed; }

.alert{
  padding:12px 16px; border-radius:14px; font-size:.85rem; font-weight:600; margin-bottom:14px;
  display:flex; align-items:flex-start; gap:8px; line-height:1.7;
}
.alert-error{ background:rgba(244,104,90,.12); color:#C0392B; border:1px solid rgba(244,104,90,.25); }
.alert-success{ background:rgba(110,231,183,.18); color:#057A55; border:1px solid rgba(5,122,85,.2); }
.alert[hidden]{ display:none; }

.spinner{
  width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(37,99,235,.25);
  border-top-color:var(--plum); animation:spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ----- Auth pages (login/register) ----- */
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{ width:100%; max-width:440px; padding:38px; }
.auth-card .logo{ justify-content:center; margin-bottom:22px; }
.auth-card h1{ font-size:1.4rem; font-weight:900; text-align:center; margin-bottom:6px; }
.auth-card .auth-sub{ text-align:center; color:var(--ink-soft); font-size:.86rem; margin-bottom:24px; }
.auth-switch{ text-align:center; font-size:.85rem; color:var(--ink-soft); margin-top:6px; }
.auth-switch a{ color:var(--plum-deep); font-weight:700; text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }
.auth-back{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); text-decoration:none; font-size:.85rem; font-weight:600; margin-bottom:14px; }
.auth-back svg{ width:16px; height:16px; }

/* ----- Account menu in navbar ----- */
.account-menu{ position:relative; }
.account-dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:190px; padding:10px;
  display:flex; flex-direction:column; gap:4px; z-index:1100;
}
.account-dropdown[hidden]{ display:none; }
.account-dropdown a, .account-dropdown button{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  border:none; background:transparent; color:var(--ink); text-decoration:none;
  font-family:inherit; font-weight:600; font-size:.85rem; cursor:pointer; text-align:right; width:100%;
  transition:background .2s;
}
.account-dropdown a:hover, .account-dropdown button:hover{ background:rgba(37,99,235,.1); }
.account-dropdown svg{ width:17px; height:17px; flex-shrink:0; }
.account-dropdown hr{ border:none; border-top:1px solid rgba(37,99,235,.14); margin:4px 0; }
.account-name{ font-weight:800; padding:8px 12px; font-size:.85rem; }
.account-phone{ padding:0 12px 6px; font-size:.75rem; color:var(--ink-soft); }

/* ----- Chat widgets (AI assistant + support chat) ----- */
.chat-fab-group{
  position:fixed; bottom:185px; right:20px; z-index:1900; display:flex; flex-direction:column; gap:12px;
}
@media (min-width:881px){ .chat-fab-group{ bottom:28px; } }
.chat-fab{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(37,99,235,.35);
  transition:transform .2s; position:relative;
}
.chat-fab.secondary{ background:linear-gradient(135deg,var(--gold),var(--coral)); }
.chat-fab:hover{ transform:translateY(-2px) scale(1.05); }
.chat-fab svg{ width:24px; height:24px; }

.chat-panel{
  position:fixed; bottom:0; left:0; right:0; z-index:2100; margin:0 auto;
  max-width:380px; width:calc(100% - 28px); max-height:70vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; display:flex; flex-direction:column;
  transform:translateY(120%); transition:transform .35s cubic-bezier(.22,.8,.2,1);
}
@media (min-width:540px){
  .chat-panel{ right:24px; left:auto; bottom:28px; border-radius:var(--radius-lg); max-height:560px; }
}
.chat-panel.open{ transform:translateY(0); }
.chat-panel .drawer-head{ flex-shrink:0; }
.chat-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ max-width:85%; padding:10px 14px; border-radius:16px; font-size:.85rem; line-height:1.8; white-space:pre-wrap; }
.chat-msg.from-user{ align-self:flex-end; background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff; border-radius:16px 16px 4px 16px; }
.chat-msg.from-assistant, .chat-msg.from-owner{ align-self:flex-start; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8); border-radius:16px 16px 16px 4px; }
.chat-msg.from-owner{ border-color:rgba(240,178,59,.4); }
.chat-msg .chat-meta{ display:block; font-size:.68rem; color:var(--ink-soft); margin-top:4px; }
.chat-input-row{ display:flex; gap:8px; padding:14px 16px; border-top:1px solid rgba(37,99,235,.14); flex-shrink:0; }
.chat-input-row input{
  flex:1; border:none; border-radius:999px; padding:11px 16px; background:rgba(255,255,255,.6);
  font-family:inherit; font-size:.85rem; outline:none; color:var(--ink);
}
.chat-input-row button{
  width:42px; height:42px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer;
  background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:filter .2s;
}
.chat-input-row button:hover{ filter:brightness(1.08); }
.chat-input-row button svg{ width:18px; height:18px; }
.chat-empty-hint{ text-align:center; color:var(--ink-soft); font-size:.8rem; padding:20px 10px; }

/* ===================================================================
   Admin dashboard
   =================================================================== */
.admin-body{ padding-bottom:30px; }
.admin-shell{ max-width:1300px; margin:0 auto; padding:20px; display:flex; gap:20px; align-items:flex-start; }
@media (max-width:880px){ .admin-shell{ flex-direction:column; } }

.admin-sidebar{ width:230px; flex-shrink:0; padding:20px 14px; display:flex; flex-direction:column; gap:6px; position:sticky; top:90px; }
@media (max-width:880px){ .admin-sidebar{ width:100%; position:static; flex-direction:row; overflow-x:auto; gap:8px; padding:12px; } }
.admin-nav-link{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  color:var(--ink); text-decoration:none; font-weight:700; font-size:.88rem; transition:background .2s;
  border:none; background:transparent; cursor:pointer; font-family:inherit; text-align:right; width:100%;
}
@media (max-width:880px){ .admin-nav-link{ width:auto; white-space:nowrap; } }
.admin-nav-link svg{ width:18px; height:18px; flex-shrink:0; }
.admin-nav-link:hover{ background:rgba(37,99,235,.1); }
.admin-nav-link.active{ background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff; }

.admin-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
.admin-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 24px; }
.admin-header h1{ font-size:1.2rem; font-weight:900; }
.admin-header p{ color:var(--ink-soft); font-size:.82rem; }

.admin-section{ padding:22px 24px; }
.admin-section h2{ font-size:1rem; font-weight:800; margin-bottom:14px; }
.admin-section-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.admin-section-head h2{ margin-bottom:0; }

.admin-view{ display:flex; flex-direction:column; gap:20px; }
.admin-view[hidden]{ display:none; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:880px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{ padding:20px 22px; display:flex; flex-direction:column; gap:6px; }
.stat-card .stat-label{ font-size:.78rem; color:var(--ink-soft); font-weight:700; }
.stat-card .stat-value{ font-size:1.35rem; font-weight:900; color:var(--plum-deep); }
.stat-card .stat-sub{ font-size:.74rem; color:var(--ink-soft); }

.chart-tabs{ display:flex; gap:8px; }
.chart-tab{
  padding:8px 18px; border-radius:999px; border:1px solid rgba(37,99,235,.18); background:rgba(255,255,255,.5);
  font-family:inherit; font-weight:700; font-size:.8rem; color:var(--ink); cursor:pointer; transition:.2s;
}
.chart-tab.active{ background:linear-gradient(135deg,var(--plum),var(--rose)); color:#fff; border-color:transparent; }
.chart-wrap{ position:relative; height:280px; }

.table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:560px; }
.admin-table th, .admin-table td{ padding:12px 10px; text-align:right; border-bottom:1px solid rgba(37,99,235,.1); white-space:nowrap; }
.admin-table th{ font-weight:800; color:var(--ink-soft); font-size:.78rem; }
.admin-table td.wrap{ white-space:normal; }
.admin-table tbody tr:hover{ background:rgba(37,99,235,.05); }

.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.74rem; font-weight:800; }
.status-pending{ background:rgba(240,178,59,.16); color:#B8860B; }
.status-paid{ background:rgba(110,231,183,.2); color:#057A55; }
.status-failed{ background:rgba(244,104,90,.14); color:#C0392B; }
.status-cancelled{ background:rgba(118,105,127,.14); color:var(--ink-soft); }
.status-delivered{ background:rgba(37,99,235,.14); color:var(--plum-deep); }

.icon-action{
  width:32px; height:32px; border-radius:10px; border:none; background:rgba(37,99,235,.1); color:var(--plum-deep);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; margin-inline-start:4px;
}
.icon-action:hover{ background:var(--plum); color:#fff; }
.icon-action svg{ width:15px; height:15px; }
.icon-action.danger{ background:rgba(244,104,90,.12); color:var(--coral); }
.icon-action.danger:hover{ background:var(--coral); color:#fff; }

.status-select{
  padding:6px 10px; border-radius:10px; border:1px solid rgba(37,99,235,.18); background:rgba(255,255,255,.6);
  font-family:inherit; font-size:.78rem; color:var(--ink); cursor:pointer;
}

.product-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:600px){ .product-form-grid{ grid-template-columns:1fr; } }
.product-form-grid .field.full{ grid-column:1/-1; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(43,33,56,.4); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:3000; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal-box{ width:100%; max-width:520px; max-height:90vh; overflow-y:auto; padding:26px; }
.modal-box h3{ font-size:1.05rem; font-weight:800; margin-bottom:16px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

.split-pane{ display:grid; grid-template-columns:280px 1fr; gap:18px; }
@media (max-width:760px){ .split-pane{ grid-template-columns:1fr; } }
.conv-list{ display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto; }
.conv-item{
  display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; cursor:pointer;
  border:1px solid transparent; transition:.2s;
}
.conv-item:hover{ background:rgba(37,99,235,.06); }
.conv-item.active{ background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.25); }
.conv-item .conv-name{ font-weight:800; font-size:.88rem; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.conv-item .conv-preview{ font-size:.78rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-unread{ background:var(--coral); color:#fff; font-size:.68rem; font-weight:800; min-width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; }
/* Customers waiting for a reply get a warm left border + a small pill. */
.conv-item.needs-reply{ border-color:rgba(240,178,59,.45); background:rgba(240,178,59,.07); }
.conv-item.needs-reply:hover{ background:rgba(240,178,59,.12); }
.needs-reply-pill{ display:inline-block; background:var(--gold,#F0B23B); color:#3a2a00; font-size:.64rem; font-weight:800; border-radius:999px; padding:1px 8px; vertical-align:middle; }
.conv-thread{ display:flex; flex-direction:column; gap:10px; max-height:440px; overflow-y:auto; padding:6px; }

.empty-hint{ text-align:center; color:var(--ink-soft); font-size:.85rem; padding:30px 10px; }

[hidden]{ display:none !important; }

/* =====================================================================
   Product Detail Page (PDP)
   ===================================================================== */
.pdp{ max-width:1100px; margin:0 auto; padding:90px 18px 80px; }
.pdp-back{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); font-weight:700; font-size:.85rem; margin-bottom:18px; }
.pdp-back svg{ width:18px; height:18px; }
.pdp-back:hover{ color:#2563EB; }

.pdp-top{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:860px){ .pdp-top{ grid-template-columns:1.05fr 1fr; align-items:start; } }

/* Gallery */
.pdp-gallery{ display:flex; flex-direction:column; gap:12px; }
.pdp-main{ position:relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:rgba(255,255,255,.5);
  box-shadow:0 12px 40px rgba(80,50,140,.12); display:flex; align-items:center; justify-content:center; }
.pdp-main-photo{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:transform .15s ease-out; }
.pdp-main-gradient{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.pdp-main-gradient svg{ width:42%; height:42%; }
.pdp-discount{ position:absolute; top:14px; inset-inline-end:14px; }
.pdp-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,.75); backdrop-filter:blur(6px); font-size:1.5rem; line-height:1; cursor:pointer;
  color:#5b4b86; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.pdp-arrow.prev{ inset-inline-start:10px; } .pdp-arrow.next{ inset-inline-end:10px; }
.pdp-thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.pdp-thumb{ width:64px; height:64px; border-radius:14px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; background:#fff; }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb.active{ border-color:#2563EB; }

/* Info column */
.pdp-info{ padding:22px; border-radius:20px; }
.pdp-name{ font-size:1.5rem; font-weight:800; margin:8px 0 12px; line-height:1.5; }
.pdp-rating-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.pdp-rating-num{ font-weight:800; } .pdp-rating-link{ color:var(--ink-soft); font-size:.82rem; }
.pdp-desc{ color:var(--ink-soft); font-size:.9rem; line-height:2; margin-bottom:16px; }
.pdp-price-box{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.pdp-price-main{ display:flex; align-items:center; gap:10px; }
.pdp-price-main .price-now{ font-size:1.6rem; font-weight:900; color:#2563EB; }
.pdp-stock{ display:inline-block; font-size:.85rem; font-weight:700; margin-bottom:16px; }
.pdp-stock.in{ color:#1f9d63; } .pdp-stock.out{ color:var(--coral,#ef4d6b); }
.pdp-actions{ display:flex; gap:10px; align-items:center; }
.pdp-add{ flex:1; }
.pdp-wish{ width:50px; height:50px; flex:0 0 auto; }
.pdp-wish.active{ color:var(--coral,#ef4d6b); border-color:var(--coral,#ef4d6b); }

/* Sections */
.pdp-section{ margin-top:22px; padding:22px; border-radius:20px; }
.pdp-section h2{ font-size:1.15rem; font-weight:800; margin-bottom:14px; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{ text-align:start; padding:11px 12px; font-size:.88rem; border-bottom:1px solid rgba(120,90,170,.12); }
.spec-table th{ width:38%; color:var(--ink-soft); font-weight:700; }
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:0; }
.usage-text{ line-height:2.1; font-size:.92rem; color:var(--ink); }
.pdp-price-meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-soft); margin-bottom:10px; }

/* Stars */
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.stars .star{ width:var(--star-size,16px); height:var(--star-size,16px); fill:#d9d3e8; }
.stars .star.on{ fill:#F0B23B; }

/* Reviews */
.reviews-summary{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid rgba(120,90,170,.12); }
.reviews-avg{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:120px; }
.reviews-avg strong{ font-size:2.4rem; font-weight:900; color:#2563EB; line-height:1; }
.reviews-avg span{ font-size:.78rem; color:var(--ink-soft); }
.reviews-dist{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:5px; }
.dist-row{ display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--ink-soft); }
.dist-bar{ flex:1; height:8px; border-radius:99px; background:rgba(120,90,170,.12); overflow:hidden; }
.dist-fill{ height:100%; background:linear-gradient(90deg,#2563EB,#0EA5E9); border-radius:99px; }
.dist-count{ min-width:24px; text-align:start; }

.reviews-list{ display:flex; flex-direction:column; gap:14px; }
.review-card{ padding:16px; border-radius:16px; background:rgba(255,255,255,.5); border:1px solid rgba(120,90,170,.1); }
.review-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.review-author{ font-weight:800; font-size:.9rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.verified-tag{ background:rgba(31,157,99,.12); color:#1f9d63; font-size:.64rem; font-weight:800; border-radius:99px; padding:2px 8px; }
.me-tag{ background:rgba(37,99,235,.14); color:#2563EB; font-size:.64rem; font-weight:800; border-radius:99px; padding:2px 8px; }
.review-date{ font-size:.72rem; color:var(--ink-soft); }
.review-title{ font-size:.92rem; font-weight:800; margin:8px 0 4px; }
.review-body{ font-size:.88rem; line-height:1.9; color:var(--ink); }
.review-points{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:4px; }
.review-points .pro{ color:#1f9d63; font-size:.82rem; }
.review-points .con{ color:var(--coral,#ef4d6b); font-size:.82rem; }
.review-photos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.review-photo{ width:72px; height:72px; object-fit:cover; border-radius:10px; cursor:zoom-in; }

.review-cta{ margin-top:18px; padding:18px; border-radius:16px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.review-cta .btn-primary{ display:inline-block; }

.review-form{ margin-top:20px; padding:20px; border-radius:18px; }
.review-form h3{ font-size:1rem; font-weight:800; margin-bottom:14px; }
.review-form .field{ margin-bottom:14px; }
.form-2col{ display:grid; grid-template-columns:1fr; gap:0 14px; }
@media(min-width:620px){ .form-2col{ grid-template-columns:1fr 1fr; } }
.star-picker{ display:inline-flex; gap:5px; cursor:pointer; }
.star-picker .star{ width:30px; height:30px; fill:#d9d3e8; transition:.15s; }
.star-picker .star.on{ fill:#F0B23B; }
.star-picker .star:hover{ transform:scale(1.12); }
.rv-previews{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.rv-preview{ width:60px; height:60px; object-fit:cover; border-radius:10px; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:5000; background:rgba(15,10,30,.86); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:18px; inset-inline-end:18px; width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.16); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-close svg{ width:22px; height:22px; }

/* Admin product form: dynamic specs + gallery */
.specs-rows{ display:flex; flex-direction:column; gap:8px; }
.spec-row{ display:flex; gap:8px; align-items:center; }
.spec-row input{ flex:1; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid rgba(120,90,170,.25); background:rgba(255,255,255,.6); font-family:inherit; font-size:.82rem; }
.spec-row .spec-remove{ flex:0 0 auto; width:34px; height:34px; }
.gallery-previews{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.gallery-preview{ width:64px; height:64px; object-fit:cover; border-radius:10px; cursor:pointer; border:1px solid rgba(120,90,170,.18); transition:.15s; }
.gallery-preview:hover{ outline:2px solid var(--coral,#ef4d6b); opacity:.85; }

/* Order tracking timeline */
.track-timeline{ display:flex; align-items:flex-start; justify-content:space-between; margin:14px 0 18px; overflow-x:auto; padding-bottom:6px; }
.track-step{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; width:76px; text-align:center; }
.track-node{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:rgba(120,90,170,.12); transition:.25s; }
.track-label{ font-size:.68rem; color:var(--ink-soft); line-height:1.5; font-weight:700; }
.track-step.done .track-node{ background:linear-gradient(135deg,#2563EB,#0EA5E9); }
.track-step.done .track-label{ color:var(--ink); }
.track-step.active .track-node{ background:linear-gradient(135deg,#F0B23B,#0EA5E9); animation:trackPulse 1.5s infinite; }
.track-step.active .track-label{ color:#2563EB; }
.track-line{ flex:1; min-width:16px; height:3px; background:rgba(120,90,170,.18); margin-top:23px; border-radius:2px; }
.track-line.done{ background:linear-gradient(90deg,#2563EB,#0EA5E9); }
@keyframes trackPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(14,165,233,.45); } 50%{ box-shadow:0 0 0 9px rgba(14,165,233,0); } }
.track-status-now{ text-align:center; font-size:.9rem; margin-bottom:14px; }
.track-courier{ display:flex; gap:16px; flex-wrap:wrap; background:rgba(37,99,235,.08); border-radius:12px; padding:10px 14px; font-size:.84rem; margin-bottom:10px; }
.track-courier.muted{ color:var(--ink-soft); }
.track-ship{ display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--ink-soft); margin-bottom:14px; }
.track-history-title{ font-size:.9rem; font-weight:800; margin:6px 0 8px; }
.track-history{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.track-history li{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; }
.ev-dot{ width:10px; height:10px; border-radius:50%; background:#2563EB; margin-top:5px; flex:0 0 auto; }
.ev-note{ color:var(--ink-soft); font-size:.78rem; margin-top:2px; }
.ev-time{ color:var(--ink-soft); font-size:.72rem; margin-top:2px; }

/* Horizontal product scroller (recommended / related) */
.hscroll{ display:flex; gap:16px; overflow-x:auto; overflow-y:visible; padding:12px 4px 16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.hscroll::-webkit-scrollbar{ height:8px; }
.hscroll::-webkit-scrollbar-thumb{ background:rgba(37,99,235,.3); border-radius:99px; }
.hscroll > .product-card{ flex:0 0 230px; scroll-snap-align:start; }

/* Compact related cards on the product page */
.rel-card{ flex:0 0 162px; scroll-snap-align:start; display:flex; flex-direction:column; gap:8px;
  background:rgba(255,255,255,.55); border:1px solid rgba(120,90,170,.12); border-radius:16px; padding:10px; transition:.2s; }
.rel-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(80,50,140,.14); }
.rel-visual{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; }
.rel-visual img{ width:100%; height:100%; object-fit:cover; }
.rel-grad{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.rel-grad svg{ width:42%; height:42%; }
.rel-name{ font-size:.8rem; font-weight:700; line-height:1.55; height:2.5em; overflow:hidden; }
.rel-price{ font-size:.84rem; font-weight:800; color:#2563EB; }

/* Info / customer-service page tabs */
.info-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.info-tabs a{ padding:8px 16px; border-radius:999px; font-size:.82rem; font-weight:700; color:var(--ink-soft);
  background:rgba(255,255,255,.5); border:1px solid rgba(120,90,170,.12); }
.info-tabs a.active{ background:linear-gradient(135deg,#2563EB,#0EA5E9); color:#fff; }
#infoContent h2{ font-size:1.2rem; font-weight:800; margin-bottom:12px; }
#infoContent h3{ font-size:.95rem; font-weight:800; margin:16px 0 4px; }
#infoContent p{ font-size:.9rem; line-height:2; color:var(--ink); }

/* =====================================================================
   Advanced product filter panel
   ===================================================================== */
.shop-layout{ display:block; }
@media(min-width:1100px){
  .shop-layout{ display:grid; grid-template-columns:290px 1fr; gap:24px; align-items:start; }
}

/* Toolbar above the grid */
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-radius:16px; margin-bottom:14px; }
.result-count{ font-weight:800; font-size:.9rem; }
.sort-wrap{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft); }
.sort-wrap select{ padding:8px 12px; border-radius:10px; border:1px solid rgba(120,90,170,.25); background:rgba(255,255,255,.7); font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }

/* Filter panel (sidebar / drawer) */
.filter-panel{ padding:18px; border-radius:20px; }
.filter-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.filter-panel-head h3{ font-size:1.05rem; font-weight:800; margin-inline-end:auto; }
.filter-clear-all{ background:none; border:0; color:var(--coral,#ef4d6b); font-weight:800; font-size:.78rem; cursor:pointer; font-family:inherit; }
.filter-drawer-close{ background:rgba(120,90,170,.1); border:0; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.filter-drawer-close svg{ width:18px; height:18px; }
@media(min-width:1100px){
  .filter-panel{ position:sticky; top:86px; max-height:calc(100vh - 104px); overflow-y:auto; }
  .filter-drawer-close{ display:none; }
}
@media(max-width:1099px){
  .filter-panel{ position:fixed; top:0; bottom:0; right:0; width:88%; max-width:350px; z-index:4500;
    border-radius:0; overflow-y:auto; transform:translateX(110%); transition:transform .3s ease;
    box-shadow:-12px 0 44px rgba(0,0,0,.22); padding:18px 18px 40px; }
  .filter-panel.open{ transform:translateX(0); }
}
/* The mobile drawer above is position:fixed, but it is the only fixed panel
   that lives *inside* a .section — and .section sets content-visibility:auto,
   which applies layout+paint containment. A contained element becomes the
   containing block for its fixed descendants, so the drawer anchored itself
   to #products instead of the viewport and slid in far above the visible
   area: the overlay dimmed but no panel appeared. Opt this one section out
   of containment. (The other drawers sit at body level, hence unaffected.) */
#products{ content-visibility:visible; contain-intrinsic-size:none; }

/* =====================================================================
   Narrow-phone layout fixes
   ---------------------------------------------------------------------
   Measured on the real page: the header needs 415px to lay out (logo 107
   + five 40px buttons with 8px gaps = 339, plus 36px navbar padding and
   40px wrapper padding). Every phone narrower than that pushed
   .nav-actions past the start edge — at 360px the hamburger sat at
   left:-34px and at 320px at left:-74px, entirely off-screen. Because
   body has overflow-x:hidden there was no way to scroll it back into
   view, so the menu button simply could not be tapped.

   The buttons are the functional part, so they keep their size and the
   logo absorbs the squeeze instead.
   ===================================================================== */
@media (max-width:430px){
  .navbar-wrap{ padding-inline:10px; }
  .navbar{ padding:8px 12px; gap:8px; }

  .nav-actions{ gap:4px; flex-shrink:0; }
  .icon-btn{ width:36px; height:36px; }
  .icon-btn svg{ width:17px; height:17px; }

  /* Overrides .logo's flex-shrink:0 — this is the element that gives way. */
  .logo{ flex-shrink:1; min-width:0; }
  .logo-icon{ width:32px; height:32px; flex-shrink:0; }
  .logo-icon svg{ width:17px; height:17px; }
  .logo-text{ font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ---------------------------------------------------------------------
   Bottom tab bar: it was anchored with right:20px only, so its width came
   from its content (~344px) rather than the screen. On a 360px phone that
   put its start edge at left:-4px and on a 320px phone at left:-44px, so
   "حساب من" hung off the side. Pinning both edges makes it span the
   viewport and share the space evenly between the five tabs.

   Keeping the labels on one line also matters for the floating buttons
   below: when the tabs wrapped, the bar grew from 70px to 85px tall and
   swallowed the filter button that sits just above it.
   --------------------------------------------------------------------- */
@media (max-width:880px){
  .tabbar{
    left:20px; right:20px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    justify-content:space-between; gap:0; padding:8px 6px;
  }
  .tabbar a{ flex:1 1 0; min-width:0; padding:7px 2px; white-space:nowrap; }
  /* Badges are positioned against the tab, which is now narrower. */
  .tab-badge{ left:auto; inset-inline-start:calc(50% + 4px); }
}
@media (max-width:360px){
  .tabbar a{ font-size:.55rem; }
  .tabbar a svg{ width:19px; height:19px; }
}

/* ---------------------------------------------------------------------
   Footer: grid and flex items default to min-width:auto, so they refuse to
   shrink below their longest unbreakable run of text — the contact details
   held the single column at 293px on a 320px screen and pushed the page
   26px wider than the viewport. Let the items shrink and let long values
   (email, address) wrap instead.
   --------------------------------------------------------------------- */
@media (max-width:520px){
  .footer-glass{ padding:24px; }
  .footer-glass > *{ min-width:0; }
  .footer-contact li{ min-width:0; }
  .footer-contact li > *{ min-width:0; }
  .footer-contact a, .footer-contact li{ overflow-wrap:anywhere; }
}

/* Float the filter button clear of the tab bar rather than on top of it.
   Expressed from the bar's own offset + height so the two cannot drift
   apart; the fallbacks cover ≥881px where the tab bar is hidden. */
@media (max-width:1099px){
  .filter-fab{
    bottom:calc(16px + 66px + 14px + env(safe-area-inset-bottom, 0px));
  }
}


/* Filter groups (collapsible) */
.filter-group{ border-top:1px solid rgba(120,90,170,.12); padding:6px 0; }
.filter-group-head{ width:100%; background:none; border:0; display:flex; align-items:center; justify-content:space-between;
  padding:10px 2px; font-family:inherit; font-weight:800; font-size:.9rem; cursor:pointer; color:var(--ink); }
.fg-arrow{ transition:transform .2s; color:var(--ink-soft); }
.filter-group.collapsed .fg-arrow{ transform:rotate(-90deg); }
.filter-group-body{ padding:4px 2px 12px; display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
.filter-group.collapsed .filter-group-body{ display:none; }

.filter-check, .filter-radio{ display:flex; align-items:center; gap:9px; font-size:.84rem; cursor:pointer; }
.filter-check input, .filter-radio input{ width:17px; height:17px; cursor:pointer; flex:0 0 auto; accent-color:#2563EB; }
.filter-check > span:first-of-type, .filter-radio > span{ flex:1; }
.f-count{ color:var(--ink-soft); font-size:.74rem; background:rgba(120,90,170,.1); border-radius:99px; padding:1px 8px; }
.f-empty{ color:var(--ink-soft); font-size:.8rem; }
.stars-mini{ color:#F0B23B; letter-spacing:1px; }

.filter-search{ width:100%; padding:8px 12px; border-radius:10px; border:1px solid rgba(120,90,170,.25);
  background:rgba(255,255,255,.7); font-family:inherit; font-size:.82rem; margin-bottom:6px; }
.filter-check-list{ display:flex; flex-direction:column; gap:8px; max-height:200px; overflow-y:auto; }

/* Price range */
.price-inputs{ display:flex; align-items:center; gap:8px; }
.price-inputs input{ width:100%; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid rgba(120,90,170,.25);
  background:rgba(255,255,255,.7); font-family:inherit; font-size:.8rem; }
.price-slider{ position:relative; height:34px; margin-top:8px; }
.price-slider input[type=range]{ position:absolute; top:0; left:0; width:100%; margin:0; height:34px; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none; }
.price-slider input[type=range]::-webkit-slider-runnable-track{ height:4px; background:rgba(120,90,170,.22); border-radius:4px; margin-top:15px; }
.price-slider input[type=range]::-moz-range-track{ height:4px; background:rgba(120,90,170,.22); border-radius:4px; }
.price-slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#2563EB; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer; margin-top:-7px; }
.price-slider input[type=range]::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#2563EB; border:2px solid #fff; cursor:pointer; }
.price-readout{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--ink-soft); margin-top:6px; font-weight:700; }

/* Active filter chips */
.active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(37,99,235,.1); color:#1D4ED8; border:1px solid rgba(37,99,235,.2);
  border-radius:999px; padding:6px 12px; font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit; }
.chip:hover{ background:rgba(37,99,235,.18); }
.chip-x{ font-size:.72rem; opacity:.8; }
.chip-clear{ background:rgba(239,77,107,.1); color:var(--coral,#ef4d6b); border-color:rgba(239,77,107,.2); }

/* Floating filter button (mobile) + overlay */
.filter-fab{ display:none; }
.filter-overlay{ position:fixed; inset:0; background:rgba(15,10,30,.5); backdrop-filter:blur(3px); z-index:4400; opacity:0; pointer-events:none; transition:.3s; }
.filter-overlay.show{ opacity:1; pointer-events:auto; }
@media(min-width:1100px){ .filter-overlay{ display:none !important; } }
@media(max-width:1099px){
  .filter-fab{ display:inline-flex; align-items:center; gap:7px; position:fixed; bottom:90px; right:20px; transform:none;
    z-index:3400; border:0; cursor:pointer; border-radius:999px; padding:12px 22px; font-family:inherit; font-weight:800; font-size:.85rem;
    color:#fff; background:linear-gradient(135deg,#2563EB,#0EA5E9); box-shadow:0 8px 24px rgba(37,99,235,.4); }
  .filter-fab svg{ width:18px; height:18px; }
  .filter-fab-count{ background:#fff; color:#2563EB; font-size:.7rem; min-width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; }
}

/* Empty state */
.empty-state{ padding:30px 16px; }
.empty-state-inner{ text-align:center; max-width:360px; margin:0 auto; }
.empty-icon{ font-size:3rem; margin-bottom:10px; }
.empty-state-inner h3{ font-size:1.15rem; font-weight:800; margin-bottom:8px; }
.empty-state-inner p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:8px; }
.empty-state-inner ul{ text-align:start; display:inline-block; color:var(--ink-soft); font-size:.84rem; line-height:2; margin-bottom:16px; }
.empty-state-inner .btn-primary{ display:inline-block; }

/* Loading skeleton cards */
.skeleton-card{ pointer-events:none; }
.sk{ background:linear-gradient(90deg, rgba(120,90,170,.08), rgba(120,90,170,.18), rgba(120,90,170,.08));
  background-size:200% 100%; animation:skshimmer 1.2s infinite linear; border-radius:10px; }
@keyframes skshimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.sk-visual{ aspect-ratio:1/1; border-radius:16px; margin-bottom:12px; }
.sk-line{ height:12px; margin:9px 0; }
.sk-line.short{ width:60%; }

/* =====================================================================
   Gamified "Beauty Experience" rating
   ===================================================================== */
.social-proof{ background:rgba(37,99,235,.06); border-radius:14px; padding:12px 16px; margin-bottom:16px; }
.sp-count{ font-weight:800; font-size:.86rem; }
.sp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center; }
.sp-title{ font-size:.78rem; color:var(--ink-soft); }
.sp-tag{ font-size:.74rem; background:rgba(31,157,99,.1); color:#1f9d63; border-radius:99px; padding:3px 10px; font-weight:700; }

.gamify-empty{ margin-top:20px; padding:26px 20px; border-radius:18px; text-align:center; }
.ge-emoji{ font-size:2.6rem; margin-bottom:8px; }
.gamify-empty h3{ font-size:1.05rem; font-weight:800; margin-bottom:6px; }
.gamify-empty p{ color:var(--ink-soft); font-size:.86rem; margin-bottom:14px; }
.gamify-empty .btn-primary{ display:inline-block; }

.gamify-panel{ margin-top:20px; padding:20px; border-radius:18px; }
.gp-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
.gp-head h3{ font-size:1.05rem; font-weight:800; }
.engage-msg{ font-size:.82rem; color:#2563EB; font-weight:700; transition:opacity .2s; min-height:1.2em; }
.gp-section{ margin:16px 0; }
.gp-q{ display:block; font-size:.86rem; font-weight:800; margin-bottom:10px; }
.gp-submit{ width:100%; margin-top:6px; }

.exp-meter{ display:flex; align-items:center; gap:10px; margin:8px 0 14px; }
.exp-meter-track{ flex:1; height:10px; border-radius:99px; background:rgba(120,90,170,.14); overflow:hidden; }
.exp-meter-fill{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#2563EB,#0EA5E9,#F0B23B); transition:width .5s cubic-bezier(.4,1.3,.5,1); }
.exp-meter-fill.full{ animation:meterCelebrate .6s ease; }
@keyframes meterCelebrate{ 50%{ filter:brightness(1.35); } }
.exp-meter-label{ font-size:.78rem; font-weight:800; color:#2563EB; min-width:42px; text-align:end; }

.feelings{ display:flex; gap:10px; flex-wrap:wrap; }
.feeling{ flex:1; min-width:84px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:16px; border:2px solid transparent; background:rgba(255,255,255,.5); cursor:pointer; transition:.2s; font-family:inherit; }
.feeling:hover{ transform:translateY(-3px); background:rgba(37,99,235,.08); }
.feeling .fe-emoji{ font-size:1.9rem; transition:transform .2s; }
.feeling:hover .fe-emoji{ transform:scale(1.2); }
.feeling.sel{ border-color:#2563EB; background:rgba(37,99,235,.12); }
.feeling .fe-label{ font-size:.74rem; font-weight:700; color:var(--ink-soft); }
.feeling.sel .fe-label{ color:#2563EB; }
.feeling.burst .fe-emoji{ animation:feelBurst .45s ease; }
@keyframes feelBurst{ 0%{ transform:scale(1); } 40%{ transform:scale(1.5) rotate(8deg); } 100%{ transform:scale(1); } }

.aspects{ display:flex; flex-direction:column; gap:10px; }
.aspect-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.aspect-label{ font-size:.86rem; font-weight:600; }
.aspect-stars{ display:inline-flex; gap:3px; }
.astar{ width:24px; height:24px; fill:#d9d3e8; cursor:pointer; transition:.15s; }
.astar.on{ fill:#F0B23B; }
.astar:hover{ transform:scale(1.15); }
.astar.pop{ animation:starPop .4s ease; }
@keyframes starPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.5); } 100%{ transform:scale(1); } }

.ai-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ai-chip{ background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.2); color:#1D4ED8; border-radius:999px; padding:7px 13px; font-size:.78rem; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; }
.ai-chip:hover{ background:rgba(37,99,235,.16); }
.ai-chip.active{ background:linear-gradient(135deg,#2563EB,#0EA5E9); color:#fff; border-color:transparent; }

.gp-done{ text-align:center; margin-bottom:14px; }
.gp-done-emoji{ font-size:2.4rem; }
.gp-done h3{ font-size:1.02rem; font-weight:800; margin-top:6px; }
.gp-points{ text-align:center; font-size:.9rem; margin:12px 0; }

.community-box{ background:rgba(37,99,235,.06); border-radius:16px; padding:14px; margin-bottom:12px; }
.cb-scores{ display:flex; gap:12px; }
.cb-cell{ flex:1; text-align:center; background:rgba(255,255,255,.5); border-radius:12px; padding:10px; }
.cb-cell.mine{ background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(14,165,233,.15)); }
.cb-label{ display:block; font-size:.72rem; color:var(--ink-soft); margin-bottom:4px; }
.cb-cell strong{ font-size:1.5rem; font-weight:900; color:#2563EB; }
.cb-percentile{ text-align:center; font-size:.84rem; margin:12px 0 8px; }
.cb-bar{ height:8px; border-radius:99px; background:rgba(120,90,170,.14); overflow:hidden; }
.cb-bar-fill{ height:100%; background:linear-gradient(90deg,#2563EB,#0EA5E9); border-radius:99px; transition:width .8s ease; }

.badges-strip{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:12px 0; }
.badge-chip{ display:flex; flex-direction:column; align-items:center; gap:3px; width:78px; padding:8px 4px; border-radius:12px; background:rgba(120,90,170,.06); opacity:.45; filter:grayscale(.6); transition:.2s; }
.badge-chip.earned{ opacity:1; filter:none; background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(240,178,59,.14)); }
.bc-icon{ font-size:1.5rem; }
.badge-chip small{ font-size:.62rem; font-weight:700; text-align:center; color:var(--ink-soft); }

.r-aspects{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.r-aspect{ font-size:.7rem; background:rgba(37,99,235,.08); color:#1D4ED8; border-radius:8px; padding:3px 8px; }

/* Reward overlay + confetti */
.reward-overlay{ position:fixed; inset:0; z-index:5500; background:rgba(15,10,30,.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; }
.reward-card{ max-width:360px; width:100%; text-align:center; padding:28px 24px; border-radius:22px; animation:rewardIn .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes rewardIn{ 0%{ transform:scale(.7); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.reward-emoji{ font-size:3rem; }
.reward-card h3{ font-size:1.2rem; font-weight:800; margin:6px 0; }
.reward-points{ font-size:1.3rem; font-weight:900; color:#F0B23B; margin:10px 0; }
.reward-badge{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0; }
.badge-pop{ font-size:2.6rem; animation:badgePop .7s ease; }
@keyframes badgePop{ 0%{ transform:scale(0) rotate(-30deg); } 60%{ transform:scale(1.4) rotate(10deg); } 100%{ transform:scale(1) rotate(0); } }
.reward-badge span{ font-size:.86rem; font-weight:700; }
.reward-total{ font-size:.84rem; color:var(--ink-soft); margin:10px 0 16px; }
.reward-card .btn-primary{ width:100%; }

.confetti-wrap{ position:fixed; inset:0; pointer-events:none; z-index:6000; overflow:hidden; }
.confetti-piece{ position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; opacity:.92; animation:confettiFall 2.4s ease-in forwards; }
@keyframes confettiFall{ to{ transform:translateY(110vh) rotate(720deg); opacity:.35; } }

/* ===== Post-delivery rating prompt (account page) ===== */
.rate-prompt{ padding:22px 24px; border-radius:22px; margin-bottom:22px; }
.rate-prompt[hidden]{ display:none; }
.rate-prompt h2{ font-size:1.05rem; font-weight:800; margin-bottom:4px; }
.rate-prompt .rate-sub{ color:var(--ink-soft); font-size:.85rem; margin-bottom:8px; }
.rate-item{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 0; border-top:1px solid rgba(37,99,235,.1); }
.rate-item:first-child{ border-top:none; }
.rate-item-name{ font-weight:700; font-size:.9rem; margin-bottom:3px; }
.rate-full-link{ font-size:.75rem; color:var(--ink-soft); text-decoration:none; }
.rate-full-link:hover{ color:var(--plum-deep); }
.rate-stars{ display:inline-flex; gap:4px; direction:ltr; flex-shrink:0; }
.rate-stars button{ background:none; border:none; padding:0; cursor:pointer; font-size:1.6rem; line-height:1;
  color:#d7dbe6; transition:transform .15s, color .15s; }
.rate-stars button:hover, .rate-stars button.hot{ color:var(--gold); transform:scale(1.15); }
.rate-done{ color:var(--plum-deep); font-weight:800; font-size:.85rem; white-space:nowrap; }
.rate-actions{ margin-top:14px; display:flex; justify-content:flex-end; }
.rate-later{ background:none; border:none; color:var(--ink-soft); font-size:.8rem; cursor:pointer; font-family:inherit; }
.rate-later:hover{ color:var(--plum-deep); text-decoration:underline; }

/* =====================================================================
   Frosted glass on phones
   ---------------------------------------------------------------------
   The ≤700px block above switches backdrop-filter off for every .glass
   surface. That is worth keeping for the scrolling content (six category
   cards, four trust cards, the hero and the footer all repaint while you
   scroll, and blurring each one is expensive), but it also stripped the
   frost from the fixed chrome — so the bars were merely see-through and
   page content read straight through them, and the filter drawer looked
   hazy instead of solid.

   Blur is restored only for the small, mostly-static surfaces: bars,
   drawers, menus and dialogs. The scrolling cards stay unblurred.
   ===================================================================== */
@media (max-width:700px){
  .navbar,
  .tabbar,
  .search-bar,
  .mobile-menu,
  .account-dropdown,
  .toast,
  .modal-box,
  .drawer,
  .chat-panel,
  .filter-panel{
    backdrop-filter:blur(20px) saturate(170%);
    -webkit-backdrop-filter:blur(20px) saturate(170%);
  }
}

/* The bars read as frosted rather than transparent: a touch more white
   behind the blur so text on them keeps its contrast over any content. */
.navbar, .search-bar{
  background:linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,255,255,0.62));
}
.tabbar{
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.76));
}

/* ---------------------------------------------------------------------
   Filter drawer: blur what is *behind* it, not the panel itself.
   The panel was inheriting .glass's translucent fill, so the page showed
   through it and the whole thing looked out of focus. Making the panel
   near-opaque keeps its own text crisp, while the overlay does the
   blurring — which is what should be soft.
   --------------------------------------------------------------------- */
.filter-overlay{
  background:rgba(15,10,30,.42);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.drawer-overlay{
  background:rgba(43,33,56,.4);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
@media (max-width:1099px){
  .filter-panel{
    background:linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,255,255,0.92));
    box-shadow:-12px 0 44px rgba(15,10,30,.3);
  }
}
.drawer{
  background:linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,255,255,0.92));
}

/* =====================================================================
   Admin panel on phones
   ---------------------------------------------------------------------
   .admin-shell is a row flex container with align-items:flex-start, and
   the ≤880px rule flips it to flex-direction:column without revisiting
   that alignment. In a column container the cross axis is horizontal, so
   flex-start shrink-wraps every item to its own max-content width instead
   of stretching it to the container. .admin-main therefore grew to 857px
   inside a 360px phone and dragged the whole document 517px wider than the
   screen — every admin view scrolled sideways and the tables ran off.
   (flex:1 on .admin-main cannot help: in a column container it governs
   height, not width.)
   ===================================================================== */
@media (max-width:880px){
  .admin-shell{ align-items:stretch; padding:14px; gap:14px; }
  .admin-main{ width:100%; min-width:0; }

  .admin-header{ padding:14px 16px; }
  .admin-header h1{ font-size:1.05rem; }
  .admin-section{ padding:16px 14px; }

  /* Section headings stack, and their action button spans the width so it
     is a comfortable tap target rather than a sliver in the corner. */
  .admin-section-head{ gap:10px; }
  .admin-section-head .btn-primary{ width:100%; justify-content:center; }

  .chart-wrap{ height:220px; }
  .chart-tabs{ overflow-x:auto; padding-bottom:2px; }
  .chart-tab{ white-space:nowrap; flex:0 0 auto; }

  /* Tables stay tabular but scroll inside their own card, edge to edge, so
     the page itself never scrolls sideways. */
  .table-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-inline:-14px; padding-inline:14px;
  }
  .admin-table{ min-width:520px; font-size:.78rem; }
  .admin-table th, .admin-table td{ padding:9px 8px; }

  .modal-overlay{ padding:12px; }
  .modal-box{ padding:20px 16px; }
  .conv-list{ max-height:280px; }
}

/* =====================================================================
   Support chat — plain-language redesign
   ---------------------------------------------------------------------
   The old entry point was an unlabelled orange circle, the panel opened
   on a grey one-liner, and the only way forward was an empty text box.
   People who are not comfortable with chat widgets had nothing to act on.
   Now the button says what it is, the panel greets you, and four tappable
   questions give a first message without typing anything.
   ===================================================================== */

/* Labelled entry point: a pill instead of a mystery circle. */
.chat-fab{ width:auto; min-width:56px; height:56px; border-radius:999px; padding:0 18px; gap:9px; }
.chat-fab-label{ font-family:inherit; font-weight:800; font-size:.85rem; white-space:nowrap; }
.chat-fab svg{ flex:0 0 auto; }
/* Below this the pill would crowd the filter button, so it goes back to a
   circle — but keeps its aria-label for screen readers. */
@media (max-width:420px){
  .chat-fab{ width:56px; min-width:0; padding:0; }
  .chat-fab-label{ display:none; }
}

/* Friendly header: who you are talking to, and that a reply is coming. */
.chat-head{
  display:flex; align-items:center; gap:11px; padding:14px 16px; flex-shrink:0;
  border-bottom:1px solid rgba(37,99,235,.14);
}
.chat-head-avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto; color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--coral));
  display:flex; align-items:center; justify-content:center;
}
.chat-head-avatar svg{ width:20px; height:20px; }
.chat-head-text{ margin-inline-end:auto; min-width:0; }
.chat-head-text h3{ font-size:.98rem; font-weight:800; line-height:1.4; }
.chat-head-status{
  display:flex; align-items:center; gap:5px;
  font-size:.72rem; color:var(--ink-soft); font-weight:700;
}
.chat-head-status::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:#22c55e; flex:0 0 auto;
}

/* Welcome state — warm and readable instead of a small grey paragraph. */
.chat-welcome{ text-align:center; padding:22px 16px 8px; margin:auto 0; }
.chat-welcome-icon{ font-size:2.2rem; line-height:1; margin-bottom:10px; }
.chat-welcome-title{ font-size:.98rem; font-weight:800; color:var(--ink); margin-bottom:6px; }
.chat-welcome-sub{ font-size:.82rem; line-height:1.9; color:var(--ink-soft); max-width:270px; margin:0 auto; }

/* Suggested openers. Horizontally scrollable so they never wrap into a
   wall of buttons on a narrow phone. */
.chat-quick{
  display:flex; gap:8px; padding:10px 16px 0; flex-shrink:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chat-quick::-webkit-scrollbar{ display:none; }
.chat-quick-chip{
  flex:0 0 auto; cursor:pointer; font-family:inherit;
  padding:8px 14px; border-radius:999px; white-space:nowrap;
  font-size:.78rem; font-weight:700; color:var(--plum-deep);
  background:rgba(37,99,235,.09); border:1px solid rgba(37,99,235,.22);
  transition:background .2s, transform .15s;
}
.chat-quick-chip:hover{ background:rgba(37,99,235,.18); }
.chat-quick-chip:active{ transform:scale(.97); }

/* Roomier input: 16px on the field stops iOS zooming in on focus. */
.chat-input-row{ padding:12px 16px 14px; gap:10px; }
.chat-input-row input{ font-size:16px; padding:12px 16px; }
.chat-input-row button{ width:46px; height:46px; }

/* The chat panel sat at z-index 2100, below the filter button's 3400, so an
   open conversation had a floating blue pill stamped across its suggested
   questions. A dialog the user just opened belongs above the page's
   floating controls. */
.chat-panel{ z-index:4600; }
/* Where :has() is supported, also take the button out of the way entirely
   rather than just covering it. Older engines simply keep the z-order fix. */
body:has(.chat-panel.open) .filter-fab{ opacity:0; pointer-events:none; }