/* ============================================================
   مای پیکسل — استایل اصلی فروشگاه
   ============================================================ */

:root{
  --black:#06070A;
  --surface:#0D1114;
  --surface-2:#11171B;
  --cyan:#2EE6F5;
  --cyan-deep:#0B7285;
  --cyan-glow:rgba(46,230,245,.35);
  --text-1:#F2FBFC;
  --text-2:#93AAAE;
  --text-3:#5D7176;
  --danger:#FF6B6B;
  --warn:#FFC94D;
  --ok:#4CE0A3;
  --glass-bg:var(--input-bg);
  --glass-border:rgba(255,255,255,.14);
  --radius:20px;
  --radius-sm:12px;
  --header-h:74px;

  /* لایه‌های شیشه‌ای و سایه — در تم روشن بازنویسی می‌شوند */
  --glass-hi:rgba(255,255,255,.5);
  --glass-edge:rgba(255,255,255,.8);
  --shadow-lg:0 30px 90px rgba(0,0,0,.6);
  --shadow-sm:0 8px 32px rgba(0,0,0,.1);
  --line:var(--line);
  --line-soft:var(--card-2);
  --scrim:rgba(4,6,9,.72);
  --card:var(--card);
  --card-2:var(--card-2);
  --input-bg:var(--input-bg);
  --hero-glow:rgba(46,230,245,.13);
}

/* ═══════════════════════════════════════════
   تم روشن
   ═══════════════════════════════════════════ */
html[data-theme="light"]{
  --black:#F4F7F8;
  --surface:#FFFFFF;
  --surface-2:#EDF3F5;
  --cyan:#0A8B9E;
  --cyan-deep:#076B7C;
  --cyan-glow:rgba(10,139,158,.22);
  --text-1:#0E1A1D;
  --text-2:#4A6169;
  --text-3:#7C9199;
  --danger:#D14343;
  --warn:#B87708;
  --ok:#1F9D6B;
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(14,26,29,.1);
  --glass-hi:rgba(255,255,255,.9);
  --glass-edge:rgba(255,255,255,1);
  --shadow-lg:0 24px 70px rgba(14,26,29,.16);
  --shadow-sm:0 6px 22px rgba(14,26,29,.07);
  --line:rgba(14,26,29,.1);
  --line-soft:rgba(14,26,29,.06);
  --scrim:rgba(20,32,36,.42);
  --card:rgba(14,26,29,.028);
  --card-2:rgba(14,26,29,.05);
  --input-bg:rgba(14,26,29,.035);
  --hero-glow:rgba(10,139,158,.1);
  color-scheme:light;
}
html[data-theme="dark"]{ color-scheme:dark; }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--text-1);
  font-family:'Estedad',Tahoma,sans-serif;
  line-height:1.8;
  overflow-x:hidden;
  min-height:100vh;
}
.en{font-family:'Estedad',sans-serif;}
svg{display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input,select,textarea{font-family:inherit;color:inherit;}
::selection{background:var(--cyan);color:#06070A;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button{-webkit-appearance:none; appearance:none; display:none;}
input[type="search"]::-ms-clear{display:none; width:0; height:0;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background:rgba(46,230,245,.35);}

.wrap{max-width:1220px;margin:0 auto;padding:0 24px;}

/* هنگام تعویض زبان همه‌ی ترنزیشن‌ها لحظه‌ای خاموش می‌شوند
   تا پنل‌ها از وسط صفحه رد نشوند */
html.lang-switching *,
html.lang-switching *::before,
html.lang-switching *::after{
  transition:none !important; animation:none !important;
}

/* ---------- شیشه ---------- */
.glass{
  /* overflow اینجا visible است تا فرزندان شناور (مثل نتایج جستجو) بریده نشوند.
     شبه‌المان‌های ::before و ::after داخل کادرند و نیازی به کلیپ ندارند. */
  position:relative; overflow:visible;
  background:var(--card-2);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:
    0 8px 32px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(255,255,255,.1),
    inset 0 0 0 0 rgba(255,255,255,0);
}
.glass::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
}
/* خط عمودی کناری حذف شد — فقط خط نورانی بالای کادر می‌ماند */
/* برای کارت‌هایی که محتوایشان باید داخل گوشه‌های گرد بریده شود */
.glass.glass-clip{overflow:hidden;}
/* روی پس‌زمینه‌های تیره‌تر کمی مات‌تر تا خوانا بماند */
.glass-solid{background:var(--card-2) , linear-gradient(rgba(8,11,14,.55),rgba(8,11,14,.55));}

/* ============================================================
   هدر
   ============================================================ */
header.nav{position:fixed; top:0; inset-inline:0; z-index:60; padding:14px 0; transition:padding .25s ease;}
header.nav.scrolled{padding:8px 0;}
.navbar{display:flex; align-items:center; gap:14px; width:100%; padding:10px 14px 10px 16px;}

.nav-side{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.nav-side.end{margin-inline-start:auto;}

.icon-btn{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:13px; background:var(--card-2); border:1px solid rgba(255,255,255,.1);
  color:var(--text-1); transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.icon-btn:hover{background:rgba(46,230,245,.12); border-color:rgba(46,230,245,.4); color:var(--cyan);}
.icon-btn:active{transform:scale(.94);}

/* برند */
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand-mark{width:38px;height:38px;flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-fa{font-size:1.06rem; font-weight:800; letter-spacing:-.01em;}
.brand-en{font-size:.58rem; font-weight:600; letter-spacing:.34em; color:var(--cyan); opacity:.85;}

/* برگر با انیمیشن */
.burger-lines{width:18px;height:14px;position:relative;}
.burger-lines span{
  position:absolute; inset-inline:0; height:2px; border-radius:2px; background:currentColor;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.burger-lines span:nth-child(1){top:0;}
.burger-lines span:nth-child(2){top:6px;}
.burger-lines span:nth-child(3){top:12px;}
.burger-btn.active .burger-lines span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger-btn.active .burger-lines span:nth-child(2){opacity:0;}
.burger-btn.active .burger-lines span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* جستجو — دسکتاپ */
.search-wrap{flex:1; max-width:440px; position:relative; margin-inline:auto;}
.search-box{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 14px; border-radius:14px;
  background:var(--input-bg); border:1px solid rgba(255,255,255,.1);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.search-box:focus-within{
  border-color:rgba(46,230,245,.5); background:rgba(46,230,245,.05);
  box-shadow:0 0 0 4px rgba(46,230,245,.08);
}
.search-box svg{color:var(--text-2); flex-shrink:0;}
.search-box:focus-within svg{color:var(--cyan);}
.search-box input{
  flex:1; background:none; border:none; outline:none; font-size:.9rem; min-width:0;
}
.search-box input::placeholder{color:var(--text-3);}
.search-clear{color:var(--text-3); display:none;}
.search-box.has-value .search-clear{display:block;}

/* نتایج جستجو */
.search-results{
  position:absolute; inset-inline:0; top:calc(100% + 10px); z-index:70;
  max-height:min(64vh,440px); overflow-y:auto; padding:8px;
  background:rgba(10,13,16,.96); backdrop-filter:blur(20px);
  border:1px solid var(--glass-border); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .2s, transform .2s;
}
.search-results.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.sr-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; transition:background .18s;}
.sr-item:hover,.sr-item.active{background:rgba(46,230,245,.1);}
.sr-thumb{width:42px;height:42px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(46,230,245,.18),transparent 70%); color:var(--cyan); overflow:hidden;}
.sr-thumb svg{width:22px;height:22px;}
.sr-thumb img{width:100%;height:100%;object-fit:cover;}
.sr-info{flex:1;min-width:0;}
.sr-info h5{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-info span{font-size:.74rem;color:var(--text-3);}
.sr-price{font-size:.82rem;color:var(--cyan);font-weight:600;white-space:nowrap;}
.sr-empty{padding:26px 14px;text-align:center;color:var(--text-2);font-size:.88rem;}
.sr-foot{padding:10px 12px;margin-top:4px;border-top:1px solid rgba(255,255,255,.07);
  text-align:center;font-size:.82rem;color:var(--cyan);}

/* دکمه زبان */
.lang-btn{
  display:flex; align-items:center; gap:8px; padding:0 13px; height:42px;
  border-radius:13px; font-size:.82rem; font-weight:700;
  background:var(--card-2); border:1px solid rgba(255,255,255,.1);
  transition:background .2s,border-color .2s;
}
.lang-btn:hover{background:rgba(46,230,245,.12); border-color:rgba(46,230,245,.4);}
.lang-flag{display:flex; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.22);}

/* حساب کاربری در هدر */
.account-btn{gap:8px; width:auto; padding:0 14px;}
.account-btn .label{font-size:.84rem;font-weight:600;}

/* سبد */
.cart-btn{position:relative; overflow:visible;}
.cart-count{
  position:absolute; top:-5px; inset-inline-end:-5px; background:var(--cyan); color:#04151A;
  font-size:.62rem; font-weight:800; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; transition:transform .2s;
  box-shadow:0 0 12px var(--cyan-glow);
}

.only-mobile{display:none !important;}
.only-desktop{display:flex;}

/* ============================================================
   پنل کشویی (همبرگری) — دسکتاپ و موبایل
   ============================================================ */
.panel-overlay{
  position:fixed; inset:0; z-index:79; background:rgba(3,4,6,.62);
  backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity .3s;
}
.panel-overlay.open{opacity:1; pointer-events:auto;}

.side-panel{
  position:fixed; top:0; bottom:0; inset-inline-start:0; z-index:80;
  width:min(330px,88vw); display:flex; flex-direction:column;
  background:rgba(9,12,15,.97); backdrop-filter:blur(24px);
  border-inline-end:1px solid var(--glass-border);
  transform:translateX(100%); transition:transform .38s cubic-bezier(.22,.8,.24,1);
}
html[dir="ltr"] .side-panel{transform:translateX(-100%);}
.side-panel.open{transform:translateX(0) !important;}

.panel-head{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.panel-quick{display:flex; gap:10px; padding:16px 20px 4px;}
.panel-quick .lang-btn,.panel-quick .panel-account{flex:1; justify-content:center;}
.panel-account{
  display:flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 14px;
  border-radius:13px; font-size:.84rem; font-weight:600;
  background:rgba(46,230,245,.1); border:1px solid rgba(46,230,245,.28); color:var(--cyan);
  transition:background .2s;
}
.panel-account:hover{background:rgba(46,230,245,.18);}

.panel-nav{flex:1; overflow-y:auto; padding:14px 14px 20px;}
.panel-label{font-size:.7rem; color:var(--text-3); font-weight:600; letter-spacing:.08em;
  padding:14px 10px 8px;}
.panel-link{
  display:flex; align-items:center; gap:13px; padding:12px 12px; border-radius:14px;
  font-size:.94rem; font-weight:500; color:var(--text-1);
  transition:background .2s, color .2s, padding-inline-start .2s;
}
.panel-link:hover{background:rgba(255,255,255,.055); padding-inline-start:16px;}
.panel-link.active{background:rgba(46,230,245,.12); color:var(--cyan);}
.panel-link .pi{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--card-2); color:var(--cyan);}
.panel-link .pi svg{width:17px;height:17px;}
.panel-link .chev{margin-inline-start:auto; color:var(--text-3); transition:transform .2s;}
.panel-link:hover .chev{transform:translateX(-3px);}
html[dir="ltr"] .panel-link:hover .chev{transform:translateX(3px) rotate(180deg);}
html[dir="ltr"] .panel-link .chev{transform:rotate(180deg);}
.panel-badge{margin-inline-start:auto; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:20px;
  background:rgba(46,230,245,.16); color:var(--cyan);}

.panel-foot{padding:16px 20px 22px; border-top:1px solid rgba(255,255,255,.07);}
.panel-socials{display:flex; gap:10px; margin-bottom:12px;}
.panel-socials a{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--card-2); color:var(--text-2); transition:color .2s,background .2s;}
.panel-socials a:hover{color:var(--cyan); background:rgba(46,230,245,.12);}
.panel-foot p{font-size:.74rem; color:var(--text-3);}

/* ============================================================
   دکمه‌ها
   ============================================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:14px; font-size:.92rem; font-weight:600; transition:filter .2s, transform .12s;}
.btn:active{transform:scale(.98);}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--cyan-deep)); color:#04151A; box-shadow:0 8px 24px var(--cyan-glow);}
.btn-primary:hover{filter:brightness(1.09);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed; box-shadow:none;}
.btn-ghost{background:var(--card-2); border:1px solid var(--glass-border); color:var(--text-1);}
.btn-ghost:hover{border-color:rgba(46,230,245,.45); color:var(--cyan);}
.btn-block{width:100%;}

/* ============================================================
   صفحات
   ============================================================ */
.page{display:none; padding-top:calc(var(--header-h) + 22px); padding-bottom:80px; min-height:100vh;}
#page-home{padding-top:0;}
.page.active{display:block; animation:pageIn .45s cubic-bezier(.2,.8,.2,1);}
@keyframes pageIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

.page-head{margin-bottom:34px;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--cyan); font-size:.78rem;
  font-weight:700; letter-spacing:.05em; margin-bottom:14px;}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--cyan);}
h1{font-size:clamp(2rem,5.4vw,3.6rem); font-weight:800; line-height:1.3;}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem); font-weight:700; margin-bottom:12px;}
.page-head p{color:var(--text-2); font-size:.98rem; max-width:620px;}

/* ---------- قهرمان صفحه اصلی ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--header-h) + 24px) 0 90px; overflow:hidden;}
.blob-field{position:absolute; inset:-60px 0 0; z-index:0; pointer-events:none;}
.blob{position:absolute; border-radius:50%; filter:blur(70px);
  background:radial-gradient(circle at 30% 30%,var(--cyan),transparent 70%); opacity:.4; animation:drift 16s ease-in-out infinite;}
.blob.b1{width:420px;height:420px;top:-90px;inset-inline-end:-70px;}
.blob.b2{width:320px;height:320px;bottom:-60px;inset-inline-start:6%;opacity:.24;animation-delay:-6s;}
.blob.b3{width:240px;height:240px;top:34%;inset-inline-start:-60px;opacity:.2;animation-delay:-11s;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-30px) scale(1.08);}}
.pixel{position:absolute; width:5px;height:5px; background:var(--cyan); box-shadow:0 0 6px var(--cyan);
  opacity:0; border-radius:1px; animation:rise linear infinite;}
@keyframes rise{0%{transform:translateY(0);opacity:0;}10%{opacity:.8;}90%{opacity:.4;}100%{transform:translateY(-420px);opacity:0;}}
.lens{position:absolute; inset-inline-end:5%; top:12%; width:min(44vw,440px); height:min(44vw,440px);
  border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.45),rgba(46,230,245,.16) 40%,rgba(6,7,10,.05) 72%);
  border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 0 60px rgba(46,230,245,.24),0 0 90px rgba(46,230,245,.16);
  animation:pulse 8s ease-in-out infinite; z-index:1;}
@keyframes pulse{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.04) rotate(3deg);}}
.hero-content{position:relative; z-index:2; max-width:600px;}
.hero p{color:var(--text-2); font-size:1.04rem; max-width:470px; margin:20px 0 32px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- بخش‌ها ---------- */
.block{padding:64px 0;}
.block-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap;}
.block-head p{color:var(--text-2); font-size:.94rem;}
.link-more{color:var(--cyan); font-size:.88rem; font-weight:600; display:inline-flex; align-items:center; gap:6px;}
.link-more:hover{gap:10px;}

/* ---------- کارت محصول ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:18px;}
.prod-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.prod-card:hover{transform:translateY(-5px); border-color:rgba(46,230,245,.35); box-shadow:0 18px 44px rgba(46,230,245,.12);}
.prod-visual{height:158px; display:flex; align-items:center; justify-content:center; position:relative;
  background:radial-gradient(circle at 50% 40%,rgba(46,230,245,.15),transparent 70%);
  border-bottom:1px solid var(--line); overflow:hidden;}
.prod-visual svg{width:54px;height:54px;color:var(--cyan);}
.prod-visual img{width:100%;height:100%;object-fit:cover;}
.prod-badges{position:absolute; top:10px; inset-inline-start:10px; display:flex; gap:6px; flex-wrap:wrap;}
.badge{font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:20px; backdrop-filter:blur(6px);}
.badge-cat{background:rgba(0,0,0,.45); border:1px solid var(--glass-border); color:var(--text-2);}
.badge-off{background:var(--danger); color:#fff;}
.badge-new{background:rgba(46,230,245,.9); color:#04151A;}
.badge-out{background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.2); color:var(--text-2);}
.prod-body{padding:15px 16px 16px; display:flex; flex-direction:column; flex:1;}
.prod-body h3{font-size:.95rem; font-weight:600; line-height:1.6; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3.05em;}
.prod-meta{font-size:.74rem; color:var(--text-3); margin-bottom:10px;}
.price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto; margin-bottom:12px; flex-wrap:wrap;}
.price{color:var(--cyan); font-weight:700; font-size:1rem;}
.price-old{color:var(--text-3); font-size:.8rem; text-decoration:line-through;}
.prod-actions{display:flex; gap:8px;}
.add-btn{flex:1; font-size:.82rem; padding:10px; border-radius:11px; font-weight:600;
  background:rgba(46,230,245,.1); border:1px solid rgba(46,230,245,.28); color:var(--cyan); transition:background .2s;}
.add-btn:hover{background:rgba(46,230,245,.2);}
.add-btn:disabled{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:var(--text-3); cursor:not-allowed;}

/* ---------- نوار فیلتر ---------- */
.filter-bar{padding:16px; border-radius:18px; margin-bottom:26px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.filter-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.filter-row + .filter-row{margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07);}
.chip-scroll{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; flex:1; scrollbar-width:none;}
.chip-scroll::-webkit-scrollbar{display:none;}
.chip{padding:8px 15px; border-radius:11px; font-size:.84rem; font-weight:600; white-space:nowrap;
  background:var(--card-2); border:1px solid rgba(255,255,255,.1); color:var(--text-2); transition:all .2s;}
.chip:hover{color:var(--text-1); border-color:rgba(46,230,245,.35);}
.chip.active{background:rgba(46,230,245,.16); border-color:rgba(46,230,245,.5); color:var(--cyan);}
.field{display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:11px;
  background:var(--card-2); border:1px solid rgba(255,255,255,.1); font-size:.85rem;}
.field select,.field input{background:none; border:none; outline:none; font-size:.85rem; min-width:0;}
.field select option{background:var(--surface-2); color:var(--text-1);}
.field label{color:var(--text-3); font-size:.8rem; white-space:nowrap;}
.result-count{font-size:.85rem; color:var(--text-2); margin-inline-start:auto; white-space:nowrap;}
.switch{display:inline-flex; align-items:center; gap:8px; font-size:.84rem; color:var(--text-2); cursor:pointer;}
.switch input{display:none;}
.switch .track{width:38px; height:21px; border-radius:20px; background:rgba(255,255,255,.12); position:relative; transition:background .2s;}
.switch .track::after{content:''; position:absolute; top:2.5px; inset-inline-start:2.5px; width:16px; height:16px;
  border-radius:50%; background:var(--text-2); transition:transform .22s, background .2s;}
.switch input:checked + .track{background:rgba(46,230,245,.35);}
.switch input:checked + .track::after{background:var(--cyan); transform:translateX(-17px);}
html[dir="ltr"] .switch input:checked + .track::after{transform:translateX(17px);}

/* ---------- کارت‌های دسته‌بندی (مستطیلی، زیر هم) ---------- */
.cat-list{display:flex; flex-direction:column; gap:14px;}
.cat-row{
  display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  transition:transform .28s ease, border-color .28s, box-shadow .28s; position:relative; overflow:hidden;
}
.cat-row::after{content:''; position:absolute; inset-inline-end:-40px; top:50%; transform:translateY(-50%);
  width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(46,230,245,.1),transparent 70%);
  pointer-events:none; opacity:0; transition:opacity .3s;}
.cat-row:hover{transform:translateX(-5px); border-color:rgba(46,230,245,.35); box-shadow:0 14px 40px rgba(46,230,245,.1);}
html[dir="ltr"] .cat-row:hover{transform:translateX(5px);}
.cat-row:hover::after{opacity:1;}
.cat-ico{width:62px; height:62px; flex-shrink:0; border-radius:17px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(46,230,245,.18),transparent 72%); border:1px solid rgba(46,230,245,.22); color:var(--cyan);}
.cat-ico svg{width:31px;height:31px;}
.cat-info{flex:1; min-width:0;}
.cat-info h3{font-size:1.12rem; font-weight:700; margin-bottom:3px;}
.cat-info p{font-size:.88rem; color:var(--text-2); line-height:1.7;}
.cat-count{font-size:.78rem; color:var(--cyan); font-weight:600; white-space:nowrap;
  padding:5px 12px; border-radius:20px; background:rgba(46,230,245,.1);}
.cat-arrow{color:var(--text-3); flex-shrink:0; transition:transform .25s, color .25s;}
.cat-row:hover .cat-arrow{color:var(--cyan); transform:translateX(-4px);}
html[dir="ltr"] .cat-arrow{transform:rotate(180deg);}
html[dir="ltr"] .cat-row:hover .cat-arrow{transform:rotate(180deg) translateX(-4px);}

/* ---------- پیگیری سفارش ---------- */
.track-form{display:flex; gap:10px; flex-wrap:wrap; max-width:540px; margin-bottom:28px;}
.track-form .field{flex:1; min-width:220px; padding:13px 16px;}
.track-form input{width:100%; font-size:.95rem; letter-spacing:.05em;}
.track-card{padding:24px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.track-top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line);}
.track-code{font-size:1.25rem; font-weight:800; color:var(--cyan); letter-spacing:.06em; direction:ltr;}
.status-pill{display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:20px;
  font-size:.84rem; font-weight:700;}
.status-pill::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor;}
.st-pending{background:rgba(255,201,77,.13); color:var(--warn);}
.st-paid,.st-processing,.st-packed{background:rgba(46,230,245,.13); color:var(--cyan);}
.st-shipped{background:rgba(147,170,174,.13); color:#B9CFD3;}
.st-delivered{background:rgba(76,224,163,.13); color:var(--ok);}
.st-cancelled,.st-refunded{background:rgba(255,107,107,.13); color:var(--danger);}

.timeline{position:relative; padding-inline-start:26px; margin-top:8px;}
.timeline::before{content:''; position:absolute; inset-inline-start:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(46,230,245,.12));}
.tl-item{position:relative; padding-bottom:20px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:''; position:absolute; inset-inline-start:-26px; top:7px; width:14px; height:14px;
  border-radius:50%; background:var(--black); border:2px solid var(--cyan); box-shadow:0 0 10px var(--cyan-glow);}
.tl-item.past::before{background:var(--cyan);}
.tl-title{font-size:.94rem; font-weight:600;}
.tl-meta{font-size:.78rem; color:var(--text-3); direction:ltr; display:inline-block;}
.tl-note{font-size:.85rem; color:var(--text-2); margin-top:2px;}

.summary-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px;}
.summary-cell{padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line);}
.summary-cell span{display:block; font-size:.75rem; color:var(--text-3); margin-bottom:3px;}
.summary-cell strong{font-size:.96rem; font-weight:700;}

/* ---------- سوالات متداول ---------- */
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:840px;}
.faq-item{border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); overflow:hidden;
  transition:border-color .25s;}
.faq-item.open{border-color:rgba(46,230,245,.3);}
.faq-q{width:100%; display:flex; align-items:center; gap:14px; padding:17px 20px; text-align:start;
  font-size:.96rem; font-weight:600; line-height:1.7;}
.faq-q .fi{width:28px;height:28px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(46,230,245,.12); color:var(--cyan); transition:transform .3s;}
.faq-item.open .faq-q .fi{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.2,.8,.2,1);}
.faq-a > div{padding:0 20px 18px 62px; color:var(--text-2); font-size:.91rem; line-height:1.9;}
html[dir="ltr"] .faq-a > div{padding:0 62px 18px 20px;}

/* ---------- اطلاعیه‌ها ---------- */
.ann-list{display:flex; flex-direction:column; gap:14px; max-width:840px;}
.ann-item{padding:20px 22px; border-radius:16px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); border-inline-start:3px solid var(--cyan);}
.ann-item.level-success{border-inline-start-color:var(--ok);}
.ann-item.level-warning{border-inline-start-color:var(--warn);}
.ann-head{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.ann-head h3{font-size:1.02rem; font-weight:700;}
.ann-date{font-size:.75rem; color:var(--text-3); margin-inline-start:auto;}
.ann-item p{color:var(--text-2); font-size:.91rem; line-height:1.9;}
.pin-tag{font-size:.66rem; font-weight:700; padding:2px 9px; border-radius:20px;
  background:rgba(46,230,245,.15); color:var(--cyan);}

/* ---------- درباره ما / پشتیبانی ---------- */
.about-lead{font-size:clamp(1.1rem,2.3vw,1.42rem); font-weight:500; line-height:1.95; max-width:760px; margin-bottom:34px;}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:34px;}
.info-card{padding:24px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.info-card .ii{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(46,230,245,.18),transparent 70%); color:var(--cyan); margin-bottom:16px;}
.info-card h3{font-size:1.02rem; font-weight:700; margin-bottom:7px;}
.info-card p{color:var(--text-2); font-size:.89rem; line-height:1.85;}
.about-text p{color:var(--text-2); margin-bottom:16px; max-width:760px; line-height:2;}

/* ---------- صفحه محصول ---------- */
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;}
.pd-visual{aspect-ratio:1; border-radius:22px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(46,230,245,.16),transparent 70%);
  border:1px solid rgba(255,255,255,.1); overflow:hidden;}
.pd-visual svg{width:130px;height:130px;color:var(--cyan);}
.pd-visual img{width:100%;height:100%;object-fit:cover;}
.pd-info h1{font-size:clamp(1.5rem,3.4vw,2.1rem); margin-bottom:12px;}
.pd-price{display:flex; align-items:baseline; gap:12px; margin:20px 0;}
.pd-price .price{font-size:1.7rem;}
.pd-desc{color:var(--text-2); line-height:2; margin-bottom:24px;}
.pd-actions{display:flex; gap:12px; flex-wrap:wrap;}
.pd-specs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.spec{font-size:.8rem; padding:6px 13px; border-radius:11px; background:var(--card-2);
  border:1px solid rgba(255,255,255,.1); color:var(--text-2);}

/* ---------- خالی / بارگذاری ---------- */
.empty-state{text-align:center; padding:70px 20px; color:var(--text-2);}
.empty-state .ei{width:62px;height:62px;margin:0 auto 18px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04); color:var(--text-3);}
.empty-state h3{font-size:1.05rem; color:var(--text-1); margin-bottom:8px; font-weight:600;}
.empty-state p{font-size:.9rem;}
.skeleton{border-radius:18px; height:250px; background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 70%);
  background-size:220% 100%; animation:shimmer 1.3s linear infinite;}
@keyframes shimmer{to{background-position:-220% 0;}}

/* ---------- صفحه‌بندی ---------- */
.pagination{display:flex; justify-content:center; gap:8px; margin-top:34px; flex-wrap:wrap;}
.pagination button{min-width:40px; height:40px; padding:0 12px; border-radius:12px; font-size:.88rem; font-weight:600;
  background:var(--card-2); border:1px solid rgba(255,255,255,.1); color:var(--text-2); transition:all .2s;}
.pagination button:hover:not(:disabled){color:var(--cyan); border-color:rgba(46,230,245,.4);}
.pagination button.active{background:rgba(46,230,245,.16); border-color:rgba(46,230,245,.5); color:var(--cyan);}
.pagination button:disabled{opacity:.35; cursor:not-allowed;}

/* ============================================================
   سبد خرید
   ============================================================ */
.drawer-overlay{position:fixed; inset:0; background:rgba(3,4,6,.62); backdrop-filter:blur(4px);
  z-index:89; opacity:0; pointer-events:none; transition:opacity .3s;}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
.cart-drawer{position:fixed; top:0; bottom:0; inset-inline-end:0; width:min(420px,92vw); z-index:90;
  transform:translateX(-100%); transition:transform .38s cubic-bezier(.22,.8,.24,1);
  display:flex; flex-direction:column; background:rgba(9,12,15,.97); backdrop-filter:blur(24px);
  border-inline-start:1px solid var(--glass-border);}
html[dir="ltr"] .cart-drawer{transform:translateX(100%);}
.cart-drawer.open{transform:translateX(0) !important;}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px;
  border-bottom:1px solid var(--line);}
.drawer-head h3{font-size:1.1rem; font-weight:700;}
.cart-items{flex:1; overflow-y:auto; padding:8px 22px;}
.cart-item{display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06);}
.ci-visual{width:52px;height:52px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(46,230,245,.18),transparent 70%); color:var(--cyan); overflow:hidden;}
.ci-visual svg{width:25px;height:25px;}
.ci-visual img{width:100%;height:100%;object-fit:cover;}
.ci-info{flex:1;min-width:0;}
.ci-info h4{font-size:.89rem;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ci-price{color:var(--cyan); font-size:.82rem;}
.ci-qty{display:flex; align-items:center; gap:4px; background:var(--card-2); border-radius:11px; padding:4px 6px; flex-shrink:0;}
.qty-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:.95rem;font-weight:700;}
.qty-btn:hover{background:rgba(46,230,245,.15); color:var(--cyan);}
.ci-qty span{min-width:20px; text-align:center; font-size:.86rem; font-weight:600;}
.ci-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--text-3);border-radius:8px;flex-shrink:0;}
.ci-remove:hover{color:var(--danger); background:rgba(255,107,107,.1);}
.drawer-foot{padding:18px 22px 24px; border-top:1px solid var(--line);}
.total-row{display:flex; justify-content:space-between; font-size:.93rem; margin-bottom:9px; color:var(--text-2);}
.total-row.grand{font-size:1.02rem; font-weight:700; color:var(--text-1); padding-top:10px; margin-bottom:16px;
  border-top:1px solid var(--line);}
.total-row.grand span:last-child{color:var(--cyan);}

/* ============================================================
   مودال حساب کاربری
   ============================================================ */
.modal-overlay{position:fixed; inset:0; background:rgba(3,4,6,.68); backdrop-filter:blur(6px);
  z-index:95; opacity:0; pointer-events:none; transition:opacity .28s;}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.account-modal{
  position:fixed; top:50%; inset-inline-start:50%; transform:translate(50%,-50%) scale(.94);
  width:min(348px,90vw); z-index:96; padding:22px 20px 20px; border-radius:20px;
  background:rgba(11,14,18,.98); backdrop-filter:blur(24px); border:1px solid var(--glass-border);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.2);
}
html[dir="ltr"] .account-modal{transform:translate(-50%,-50%) scale(.94);}
.account-modal.open{opacity:1; pointer-events:auto; transform:translate(50%,-50%) scale(1);}
html[dir="ltr"] .account-modal.open{transform:translate(-50%,-50%) scale(1);}
.modal-close{position:absolute; top:16px; inset-inline-end:16px; width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--card-2);color:var(--text-2);}
.modal-close:hover{background:rgba(255,107,107,.12); color:var(--danger);}
.modal-brand{display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:16px;}
.modal-brand svg{width:34px;height:34px;}
.modal-brand h3{font-size:.96rem; font-weight:700;}
.modal-brand p{font-size:.75rem; color:var(--text-3);}

/* تب‌ها با نشانگر متحرک */
.auth-tabs{position:relative; display:flex; background:var(--card-2); border-radius:12px; padding:4px; margin-bottom:16px;}
.auth-tabs .indicator{position:absolute; top:4px; bottom:4px; width:calc(50% - 4px); border-radius:9px;
  background:linear-gradient(135deg,rgba(46,230,245,.22),rgba(11,114,133,.28));
  border:1px solid rgba(46,230,245,.35); transition:transform .34s cubic-bezier(.4,1.3,.5,1); z-index:0;}
.auth-tabs[data-tab="login"] .indicator{transform:translateX(0);}
.auth-tabs[data-tab="register"] .indicator{transform:translateX(-100%);}
html[dir="ltr"] .auth-tabs[data-tab="register"] .indicator{transform:translateX(100%);}
.auth-tab{position:relative; z-index:1; flex:1; padding:10px; border-radius:10px; font-size:.9rem; font-weight:700;
  color:var(--text-2); transition:color .3s;}
.auth-tab.active{color:var(--cyan);}

/* اسلاید بین مرحله‌ها */
.auth-stage{position:relative; overflow:hidden;}
.auth-step{transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);}
.auth-step.hidden{display:none;}
.auth-step.slide-in{animation:slideIn .35s cubic-bezier(.2,.8,.2,1);}
@keyframes slideIn{from{opacity:0; transform:translateX(-22px);} to{opacity:1; transform:none;}}
html[dir="ltr"] .auth-step.slide-in{animation-name:slideInLtr;}
@keyframes slideInLtr{from{opacity:0; transform:translateX(22px);} to{opacity:1; transform:none;}}

.form-field{width:100%; padding:13px 16px; margin-bottom:12px; border-radius:13px; font-size:.92rem;
  background:var(--card-2); border:1px solid rgba(255,255,255,.12); outline:none; transition:border-color .2s, background .2s;}
.form-field::placeholder{color:var(--text-3);}
.form-field:focus{border-color:rgba(46,230,245,.5); background:rgba(46,230,245,.05);}
.form-row{display:flex; gap:10px;}
.form-row .form-field{margin-bottom:12px;}
.form-hint{font-size:.79rem; color:var(--text-3); margin-bottom:14px; line-height:1.75;}
.form-error{font-size:.82rem; color:var(--danger); margin-bottom:12px; display:none;}
.form-error.show{display:block;}

/* کد تایید */
.otp-row{display:flex; gap:9px; direction:ltr; justify-content:center; margin:6px 0 14px;}
.otp-box{width:46px; height:54px; text-align:center; font-size:1.3rem; font-weight:700; border-radius:13px;
  background:var(--card-2); border:1px solid rgba(255,255,255,.12); outline:none; transition:border-color .2s, background .2s;}
.otp-box:focus{border-color:var(--cyan); background:rgba(46,230,245,.07);}
.otp-box.filled{border-color:rgba(46,230,245,.4);}
.otp-meta{display:flex; align-items:center; justify-content:space-between; font-size:.82rem; margin-bottom:16px;}
.otp-timer{color:var(--text-3); direction:ltr;}
.otp-resend{color:var(--cyan); font-weight:600;}
.otp-resend:disabled{color:var(--text-3); cursor:not-allowed;}
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:.84rem; color:var(--text-2); margin-top:14px;}
.back-link:hover{color:var(--cyan);}

.divider{display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--text-3); font-size:.78rem;}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.1);}
.google-btn{width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px;
  border-radius:13px; font-size:.89rem; font-weight:600; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); transition:background .2s;}
.google-btn:hover{background:rgba(255,255,255,.12);}

/* حساب وارد شده */
.account-user{text-align:center;}
.account-avatar{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(46,230,245,.2),transparent 70%); border:1px solid rgba(46,230,245,.3); color:var(--cyan);}
.account-user h4{font-size:1.06rem; font-weight:700; margin-bottom:4px;}
.account-user .phone{font-size:.85rem; color:var(--text-3); direction:ltr; margin-bottom:20px;}
.account-links{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.account-links a{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:13px; font-size:.89rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); transition:background .2s;}
.account-links a:hover{background:rgba(46,230,245,.1); border-color:rgba(46,230,245,.3);}
.soon-tag{margin-inline-start:auto; font-size:.66rem; padding:2px 8px; border-radius:20px;
  background:rgba(255,255,255,.07); color:var(--text-3);}

/* ============================================================
   پاورقی و توست
   ============================================================ */
footer{padding:52px 0 36px; border-top:1px solid var(--line); margin-top:40px;}
.foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; margin-bottom:34px;}
.foot-links{display:flex; gap:56px; flex-wrap:wrap;}
.foot-col h4{font-size:.82rem; color:var(--text-3); margin-bottom:13px; font-weight:600;}
.foot-col a{display:block; color:var(--text-1); font-size:.9rem; margin-bottom:9px; opacity:.85; transition:color .2s;}
.foot-col a:hover{color:var(--cyan); opacity:1;}
.foot-bottom{display:flex; justify-content:space-between; color:var(--text-3); font-size:.8rem; flex-wrap:wrap; gap:10px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.06);}

.toast{position:fixed; bottom:24px; inset-inline-start:50%; transform:translateX(50%) translateY(16px);
  z-index:99; padding:13px 22px; border-radius:14px; font-size:.88rem; max-width:90vw; text-align:center;
  background:rgba(11,14,18,.97); border:1px solid var(--glass-border); backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transition:opacity .28s, transform .28s;}
html[dir="ltr"] .toast{transform:translateX(-50%) translateY(16px);}
.toast.show{opacity:1; transform:translateX(50%) translateY(0);}
html[dir="ltr"] .toast.show{transform:translateX(-50%) translateY(0);}
.toast.err{border-color:rgba(255,107,107,.4);}
.toast.ok{border-color:rgba(76,224,163,.4);}

/* ---------- جستجوی تمام‌صفحه موبایل ---------- */
.search-sheet{position:fixed; inset:0; z-index:85; background:rgba(6,8,10,.98); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s;}
.search-sheet.open{opacity:1; pointer-events:auto;}
.search-sheet-head{display:flex; align-items:center; gap:10px; padding:16px;
  border-bottom:1px solid var(--line);}
.search-sheet-head .search-box{flex:1;}
.search-sheet-body{flex:1; overflow-y:auto; padding:10px 12px;}
.search-sheet-body .sr-item{margin-bottom:2px;}

/* ============================================================
   واکنش‌گرا
   ============================================================ */
@media (max-width:980px){
  .pd-grid{grid-template-columns:1fr; gap:24px;}
  .foot-links{gap:34px;}
}
@media (max-width:820px){
  :root{--header-h:68px;}
  .only-desktop{display:none !important;}
  .only-mobile{display:flex !important;}
  .navbar{padding:9px 12px;}
  .brand-en{display:none;}
  .hero{min-height:100svh; padding:calc(var(--header-h) + 12px) 0 64px;}
  .lens{opacity:.5; width:74vw; height:74vw; top:auto; bottom:-18%; inset-inline-end:-22%;}
  .block{padding:44px 0;}
  .cat-row{padding:16px; gap:14px;}
  .cat-ico{width:52px;height:52px;border-radius:15px;}
  .cat-ico svg{width:26px;height:26px;}
  .cat-count{display:none;}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px;}
  .prod-visual{height:126px;}
  .prod-visual svg{width:44px;height:44px;}
  .prod-body{padding:12px 13px 13px;}
  .prod-body h3{font-size:.87rem;}
  .filter-bar{padding:13px;}
  .result-count{width:100%; margin:0;}
  .foot-top{flex-direction:column; gap:26px;}
  .wrap{padding:0 16px;}
}
@media (max-width:420px){
  .otp-box{width:42px; height:50px; font-size:1.15rem;}
  .prod-grid{grid-template-columns:1fr 1fr; gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  .blob,.pixel,.lens{animation:none !important;}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}