/* ==========================================================================
   Panah Market — Noir & Gold design system (radman layout, luxury dark)
   Palette: gold #D4AF37 | light gold #E9C763 | black #0A0A0C | card #14141A
   ========================================================================== */
@font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root {
  --gold: #D4AF37;
  --gold-soft: #E9C763;
  --gold-deep: #8F6E1D;
  --pink: #D4AF37;            /* legacy alias → gold */
  --pink-dark: #E5BE4F;
  --purple: #D4AF37;          /* legacy alias → gold */
  --purple-dark: #E3C058;
  --purple-soft: #E9C763;
  --mint: #1B1B22;            /* legacy alias → dark panel */
  --mint-soft: #17171D;
  --lav: #202028;             /* legacy alias → dark chip */
  --black: #0A0A0C;
  --card: #14141A;
  --card-2: #191920;
  --ink: #F2EDE3;
  --ink-soft: #B0A893;
  --line: #2A2A33;
  --white: #0A0A0C;           /* legacy alias → base bg */
  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --grad-hero: radial-gradient(1100px 540px at 82% -12%, rgba(212,175,55,.30), transparent 62%),
               linear-gradient(115deg, #0A0A0C 0%, #120E05 42%, #2A2008 74%, #4A3A0D 100%);
  --grad-gold: linear-gradient(135deg, #F3D573 0%, #D4AF37 46%, #A9821F 100%);
  --grad-pink: var(--grad-gold);  /* legacy alias */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Vazirmatn', Tahoma, sans-serif;
  color:var(--ink);
  background:var(--black);
  line-height:1.9;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--gold); text-decoration:none; }
.container { width:min(1160px, 92%); margin-inline:auto; }
.site-main { min-height:60vh; padding-bottom:96px; } /* clearance for call-fab */

/* ---------- background deco blobs (gold glow) ---------- */
.bg-deco { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.b1 { width:420px; height:420px; background:rgba(212,175,55,.14); top:-120px; left:-100px; }
.b2 { width:360px; height:360px; background:rgba(212,175,55,.10); bottom:-120px; right:-80px; }
.b3 { width:260px; height:260px; background:rgba(233,199,99,.08); top:40%; right:-120px; }

/* ---------- flash ---------- */
.flash-wrap { margin-top:86px; }
.flash { padding:12px 18px; border-radius:14px; margin-bottom:10px; font-weight:600; box-shadow:var(--shadow); }
.flash-success { background:rgba(18,146,90,.14); color:#4ADE97; border:1px solid rgba(74,222,151,.3); }
.flash-error   { background:rgba(197,30,116,.14); color:#FF7AB0; border:1px solid rgba(255,122,176,.3); }
.flash-info    { background:rgba(212,175,55,.12); color:var(--gold-soft); border:1px solid rgba(212,175,55,.35); }

/* ==========================================================================
   HEADER — floating black pill with gold edge
   ========================================================================== */
.site-header {
  position:fixed; top:14px; left:0; right:0; z-index:100;
  padding:0 16px;
  transition:box-shadow .25s ease, top .25s ease;
}
.header-inner {
  width:min(1240px, 96%); margin-inline:auto;
  background:rgba(10,10,13,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(212,175,55,.26);
  border-radius:999px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  display:flex; align-items:center; gap:18px;
  padding:10px 22px;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo { width:44px; height:44px; border-radius:14px; object-fit:cover; }
.brand-name { font-weight:800; font-size:1.15rem; color:var(--gold-soft); white-space:nowrap; }
.main-nav { display:flex; flex-wrap:nowrap; gap:4px; margin-inline-start:8px; min-width:0; }
.main-nav a {
  padding:8px 14px; border-radius:999px; font-weight:600; font-size:.95rem;
  color:var(--ink-soft); transition:all .2s ease; white-space:nowrap;
}
.main-nav a:hover { color:var(--gold-soft); background:rgba(212,175,55,.10); }
.main-nav a.active { color:#171204; background:var(--grad-gold); box-shadow:0 6px 16px rgba(212,175,55,.35); }
.header-actions { display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.head-search {
  display:flex; align-items:center; background:var(--mint-soft);
  border:1.5px solid var(--line); border-radius:999px; padding:4px 6px 4px 4px;
}
.head-search input { border:0; outline:0; background:transparent; width:150px; font:inherit; font-size:.9rem; padding:2px 8px; color:var(--ink); }
.head-search input::placeholder { color:#7C766A; }
.head-search button { border:0; cursor:pointer; color:var(--gold); background:transparent; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; }
.head-search button:hover { background:rgba(212,175,55,.15); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font:inherit; font-weight:700;
  border-radius:999px; padding:10px 22px; transition:all .22s ease;
  position:relative; overflow:hidden;
}
.btn-pink { background:var(--grad-gold); color:#171204; box-shadow:0 8px 20px rgba(212,175,55,.32); }
.btn-pink:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(212,175,55,.45); }
.btn-purple { background:var(--grad-gold); color:#171204; box-shadow:0 8px 20px rgba(143,110,29,.35); background:linear-gradient(135deg,#8F6E1D,#E9C763); }
.btn-purple:hover { transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--gold-soft); border:1.5px solid var(--line); }
.btn-ghost:hover { border-color:var(--gold); }
.btn-cart { background:var(--lav); color:var(--gold-soft); width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(212,175,55,.22); }
.btn-cart.has-items { background:rgba(212,175,55,.16); border-color:var(--gold); }
/* count badge sits DEAD-CENTER on the cart icon (user request) — fully inside
   the 44px button so overflow:hidden on .btn can never clip it */
.cart-badge {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--grad-gold); color:#171204; font-size:.82rem; font-weight:800;
  min-width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  border:2.5px solid #0A0A0C; padding:0 4px; z-index:3; pointer-events:none;
  box-shadow:0 3px 14px rgba(212,175,55,.8);
  line-height:1;
}
/* mobile search (inside nav dropdown) */
.m-search {
  display:none; align-items:center; gap:6px;
  background:#101015; border:1.5px solid var(--line); border-radius:999px; padding:4px 6px; margin-bottom:8px;
}
.m-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:.92rem; padding:6px 12px; color:var(--ink); }
.m-search input::placeholder { color:#7C766A; }
.m-search button { border:0; cursor:pointer; color:var(--gold); background:rgba(212,175,55,.12); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.nav-toggle { display:none; background:transparent; border:0; cursor:pointer; width:40px; height:40px; border-radius:12px; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span { width:20px; height:2.4px; background:var(--gold); border-radius:2px; transition:.25s; }

/* ==========================================================================
   HERO — noir with diagonal gold fire
   ========================================================================== */
.hero {
  position:relative;
  background:var(--grad-hero);
  color:#fff;
  padding:150px 0 130px;
  overflow:hidden;
  clip-path:ellipse(120% 100% at 50% 0%);
  border-bottom:1px solid rgba(212,175,55,.35);
}
.hero::before, .hero::after {
  content:''; position:absolute; border-radius:32px; transform:rotate(-24deg);
  background:rgba(212,175,55,.07);
}
.hero::before { width:340px; height:340px; top:-60px; left:-80px; }
.hero::after { width:260px; height:260px; bottom:-40px; left:32%; background:rgba(212,175,55,.05); }
.hero-inner { position:relative; z-index:2; text-align:center; max-width:720px; margin-inline:auto; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.4); color:var(--gold-soft);
  padding:6px 16px; border-radius:999px; font-size:.85rem; font-weight:600;
  backdrop-filter:blur(6px); margin-bottom:18px;
}
.hero h1 { font-size:clamp(1.9rem, 4.4vw, 3rem); font-weight:800; line-height:1.5; text-shadow:0 4px 24px rgba(0,0,0,.5); }
.hero h1 .gold, .hero .gold-text { color:var(--gold-soft); }
.hero p.sub { margin-top:10px; font-size:1.05rem; opacity:.92; color:#D8D2C4; }
.hero-search {
  margin:28px auto 0; display:flex; background:#14141A; border:1px solid rgba(212,175,55,.35); border-radius:999px;
  padding:6px; max-width:520px; box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.hero-search input { flex:1; border:0; outline:0; font:inherit; padding:8px 16px; color:var(--ink); font-size:.95rem; background:transparent; }
.hero-search input::placeholder { color:#7C766A; }
.hero-search .btn { border-radius:999px; padding:10px 26px; }
.hero-stats { display:flex; justify-content:center; gap:34px; margin-top:30px; flex-wrap:wrap; }
.hero-stat { text-align:center; }
.hero-stat b { display:block; font-size:1.35rem; font-weight:800; color:var(--gold-soft); }
.hero-stat span { font-size:.82rem; opacity:.85; color:#C9C2B2; }
/* floating product cards in hero */
.hero-cards { position:absolute; z-index:1; display:flex; flex-direction:column; gap:16px; }
.hero-cards.left { left:4%; top:24%; animation:floaty 6s ease-in-out infinite; }
.hero-cards.right { right:4%; top:30%; animation:floaty 7s ease-in-out infinite reverse; }
.hero-card {
  width:150px; border-radius:20px; background:rgba(20,20,26,.94);
  border:1px solid rgba(212,175,55,.3);
  padding:10px; box-shadow:0 20px 44px rgba(0,0,0,.55);
  transform:perspective(600px) rotateY(-14deg) rotateX(6deg);
}
.hero-cards.right .hero-card { transform:perspective(600px) rotateY(14deg) rotateX(6deg); }
.hero-card img { border-radius:14px; height:110px; width:100%; object-fit:cover; }
.hero-card span { display:block; text-align:center; font-size:.78rem; font-weight:700; color:var(--ink); margin-top:6px; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }
@media (max-width:1100px){ .hero-cards { display:none; } }

/* ==========================================================================
   CATEGORY CARDS overlapping hero
   ========================================================================== */
.cats-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-top:-70px; position:relative; z-index:5; }
.cat-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px;
  box-shadow:var(--shadow-lg); text-align:center;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  transform-style:preserve-3d;
}
.cat-card:hover { transform:translateY(-8px) rotateX(4deg); box-shadow:0 30px 60px rgba(0,0,0,.6); border-color:rgba(212,175,55,.55); }
.cat-card img { width:100%; height:120px; object-fit:cover; border-radius:var(--radius); }
.cat-card h3 { font-size:.92rem; font-weight:700; line-height:1.7; margin-top:12px; color:var(--ink); }
.cat-card h3 a { color:inherit; }

/* ==========================================================================
   SECTION shells
   ========================================================================== */
.section { padding:70px 0; }
.section.mint { background:linear-gradient(180deg, #14141A, #101016); border:1px solid var(--line); border-bottom:0; border-radius:44px 44px 0 0; margin-top:60px; }
.section-title { text-align:center; font-size:1.6rem; font-weight:800; color:var(--gold-soft); margin-bottom:8px; }
.section-sub { text-align:center; color:var(--ink-soft); margin-bottom:36px; font-size:.95rem; }
.title-underline { width:64px; height:4px; background:var(--grad-gold); border-radius:4px; margin:12px auto 0; }

/* about strip */
.about-strip { background:linear-gradient(180deg, #121218 0%, #0E0E13 100%); }
.about-box { max-width:860px; margin-inline:auto; text-align:center; }
.about-box p { margin-top:14px; color:var(--ink-soft); }

/* why us chips */
.why-wrap { background:var(--card-2); border:1px solid var(--line); border-radius:40px; padding:48px 34px; box-shadow:var(--shadow); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.why-chip {
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--line); border-radius:18px; padding:16px 18px;
  background:#131318; transition:all .25s ease;
}
.why-chip:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.5); }
.why-ic {
  /* آیکون‌ها تک‌رنگ (سفید روی زمینهٔ مشکی) — با هاور به سفید/مشکی معکوس می‌شوند */
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#FFFFFF;
  background:#0D0D12; border:1.5px solid rgba(255,255,255,.16); flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.why-chip:hover .why-ic {
  background:#FFFFFF; color:#0A0A0C; border-color:#FFFFFF;
  transform:rotate(-6deg) scale(1.06);
}
.why-chip b { display:block; font-size:.98rem; }
.why-chip span { font-size:.83rem; color:var(--ink-soft); }

/* ==========================================================================
   PRODUCTS
   ========================================================================== */
.products-section { background:linear-gradient(180deg, #0E0E12 0%, #0A0A0E 100%); }
.product-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.p-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  transform-style:preserve-3d; position:relative;
}
.p-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(212,175,55,.5); }
.p-img { position:relative; display:block; overflow:hidden; }
.p-img img { width:100%; height:210px; object-fit:cover; transition:transform .5s ease; }
.p-card:hover .p-img img { transform:scale(1.06); }
.p-cat {
  position:absolute; top:12px; inset-inline-start:12px;
  background:var(--grad-gold); color:#171204; font-size:.72rem; font-weight:800;
  padding:4px 12px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.p-off {
  position:absolute; top:12px; inset-inline-end:12px;
  background:#0F0F13; color:var(--gold-soft); border:1px solid rgba(212,175,55,.45); font-size:.72rem; font-weight:800;
  padding:4px 10px; border-radius:999px;
}
.p-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.p-title { font-size:1.02rem; font-weight:700; color:var(--gold-soft); }
.p-title a { color:inherit; }
.p-title a:hover { color:var(--gold); }
.p-desc { font-size:.85rem; color:var(--ink-soft); flex:1; }
.p-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.p-price b { font-size:1.05rem; color:var(--ink); }
.p-price s { display:block; font-size:.8rem; color:#6E6858; }
.p-add { padding:8px 18px; font-size:.88rem; }
.empty-note { text-align:center; padding:50px 0; color:var(--ink-soft); }

/* products page toolbar */
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); padding:14px 18px; border-radius:18px; box-shadow:var(--shadow); margin-bottom:26px; }
.toolbar select, .toolbar input {
  font:inherit; font-size:.9rem; padding:8px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:#101015; color:var(--ink); outline:0;
}
.toolbar select:focus { border-color:var(--gold-soft); }
.chip { padding:7px 16px; border-radius:999px; background:var(--lav); color:var(--gold-soft); font-weight:600; font-size:.85rem; border:1.5px solid transparent; }
.chip.active { background:var(--grad-gold); color:#171204; border-color:transparent; }
.pagination { display:flex; gap:8px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.pagination a, .pagination span {
  min-width:40px; height:40px; display:grid; place-items:center; padding:0 12px;
  border-radius:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); font-weight:700; font-size:.9rem;
}
.pagination .cur { background:var(--grad-gold); color:#171204; border-color:transparent; }

/* ==========================================================================
   PRODUCT SINGLE
   ========================================================================== */
.breadcrumb { display:flex; gap:8px; font-size:.85rem; color:var(--ink-soft); margin:26px 0; flex-wrap:wrap; }
.breadcrumb a { color:var(--gold); }
.single-wrap { display:grid; grid-template-columns:440px 1fr; gap:34px; align-items:start; }
.single-media { position:sticky; top:100px; }
.single-media .single-img { position:static; }
.p-thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.p-thumb { width:74px; height:74px; padding:0; border:2px solid rgba(212,175,55,.25); border-radius:14px; overflow:hidden; background:var(--card); cursor:pointer; transition:border-color .25s, transform .25s; }
.p-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.p-thumb:hover { transform:translateY(-3px); border-color:rgba(212,175,55,.7); }
.p-thumb.on { border-color:var(--gold); box-shadow:0 6px 18px rgba(212,175,55,.25); }
@media (max-width:860px){ .single-media { position:static; } .p-thumb { width:62px; height:62px; } }
.single-img { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:sticky; top:100px; transform:perspective(900px) rotateY(4deg); transition:transform .4s ease; border:1px solid rgba(212,175,55,.3); }
.single-img:hover { transform:perspective(900px) rotateY(0deg); }
.single-img img { width:100%; object-fit:cover; }
.single-info h1 { font-size:1.5rem; font-weight:800; color:var(--ink); }
.single-meta { display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; }
.meta-pill { background:var(--lav); color:var(--gold-soft); border:1px solid rgba(212,175,55,.25); border-radius:999px; padding:6px 14px; font-size:.82rem; font-weight:600; }
.single-price { display:flex; align-items:baseline; gap:12px; margin:16px 0; }
.single-price b { font-size:1.7rem; color:var(--gold-soft); }
.single-price s { color:#6E6858; font-size:1rem; }
.single-actions { display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.qty-box { display:flex; align-items:center; border:1.5px solid rgba(212,175,55,.4); border-radius:999px; overflow:hidden; background:var(--card); }
.qty-box button { width:42px; height:46px; border:0; background:var(--lav); color:var(--gold); font-size:1.3rem; cursor:pointer; font-weight:800; }
.qty-box button:hover { background:rgba(212,175,55,.2); }
.qty-box input { width:56px; text-align:center; border:0; font:inherit; font-weight:800; font-size:1.05rem; outline:0; background:#0D0D12; color:var(--gold-soft); }
.single-desc { margin-top:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; box-shadow:var(--shadow); }
.single-desc h2 { font-size:1.1rem; color:var(--gold-soft); margin-bottom:10px; }

/* ==========================================================================
   CART / CHECKOUT
   ========================================================================== */
/* cart rows — responsive cards (no table => no overlap on mobile) */
.cart-list { display:flex; flex-direction:column; gap:12px; }
.cart-row {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:14px 16px; box-shadow:var(--shadow);
}
.cart-prod { display:flex; align-items:center; gap:12px; flex:1 1 260px; min-width:220px; }
.cart-prod img { width:66px; height:66px; border-radius:14px; object-fit:cover; flex-shrink:0; border:1px solid var(--line); }
.cart-p-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cart-p-info a { font-weight:700; color:var(--gold-soft); font-size:.98rem; }
.cart-p-info a:hover { color:var(--gold); }
.cart-p-price { font-size:.84rem; color:var(--ink-soft); }
.cart-cell { display:flex; align-items:center; gap:10px; }
.cart-lbl { display:none; font-size:.78rem; color:var(--ink-soft); }
.cart-line b { font-weight:800; color:var(--ink); white-space:nowrap; }
.btn-del { color:#FF8FAE; border-color:rgba(255,122,176,.35); padding:7px 18px; font-size:.86rem; }
.btn-del:hover { border-color:#FF7AB0; background:rgba(197,30,116,.1); }
@media (max-width:700px){
  .cart-row { display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center; }
  .cart-prod { grid-column:1 / -1; }
  .cart-lbl { display:inline; }
  .cart-qty { justify-self:start; }
  .cart-line { justify-self:end; }
  .cart-del { grid-column:1 / -1; }
  .cart-del .btn { width:100%; }
}
.cart-total-box { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow); margin-top:20px; }
.cart-total-row { display:flex; justify-content:space-between; padding:8px 0; }
.cart-total-row.grand { border-top:2px dashed var(--line); margin-top:8px; padding-top:16px; font-weight:800; font-size:1.1rem; }
.cart-total-row.grand b { color:var(--gold-soft); }
.form-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full { grid-column:1 / -1; }
.fgroup label { display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; }
.fgroup input, .fgroup textarea, .fgroup select {
  width:100%; font:inherit; font-size:.93rem; padding:11px 16px;
  border:1.5px solid var(--line); border-radius:14px; outline:0; background:#101015; color:var(--ink);
  transition:border-color .2s;
}
.fgroup input::placeholder, .fgroup textarea::placeholder { color:#7C766A; }
.fgroup input:focus, .fgroup textarea:focus, .fgroup select:focus { border-color:var(--gold); background:#0D0D11; }
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.pay-opt { border:2px solid var(--line); border-radius:16px; padding:14px 16px; cursor:pointer; display:flex; gap:10px; align-items:center; transition:all .2s; background:var(--card-2); }
.pay-opt:hover { border-color:var(--gold); }
.pay-opt input { accent-color:var(--gold); }
.pay-opt.sel { border-color:var(--gold); background:rgba(212,175,55,.09); }
.pay-opt b { font-size:.92rem; display:block; }
.pay-opt span { font-size:.78rem; color:var(--ink-soft); }

/* ==========================================================================
   STEPS TIMELINE
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEAL + STEP MOTION (کلاس‌ها را main.js اضافه می‌کند)
   ========================================================================== */
.reveal-pending { opacity:0; transform:translateY(28px); }
.reveal-pending.step { transform:translateY(34px) scale(.985); }
.reveal-in {
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
@keyframes stepDotPop {
  0%   { transform:scale(.5) rotate(-24deg); }
  55%  { transform:scale(1.2) rotate(9deg); }
  78%  { transform:scale(.94) rotate(-4deg); }
  100% { transform:scale(1) rotate(0deg); }
}
@keyframes stepDotFloat {
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
@keyframes stepCardIn {
  0%   { opacity:0; transform:translateY(18px) translateX(14px); }
  100% { opacity:1; transform:translateY(0) translateX(0); }
}
@keyframes cardNudge {
  0%, 100% { transform:translateX(0); }
  22%      { transform:translateX(-6px); }
  48%      { transform:translateX(5px); }
  74%      { transform:translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity:1; transform:none; }
  .step.is-in .step-dot, .step.is-in .step-card, .step-card:hover { animation:none; }
}

.steps-section { position:relative; }
.timeline { position:relative; max-width:760px; margin-inline:auto; }
.timeline::before {
  content:''; position:absolute; top:0; bottom:0; right:50%;
  border-right:2px dashed #6B5A22; transform:translateX(50%);
}
.step { display:flex; margin-bottom:26px; position:relative; align-items:center; }
.step.is-in .step-card { animation: stepCardIn .7s cubic-bezier(.22,1,.36,1) both; }
.step.is-in .step-dot { animation: stepDotPop .75s cubic-bezier(.34,1.56,.64,1) both, stepDotFloat 3.4s ease-in-out .8s infinite; }
.step:nth-child(odd) { flex-direction:row-reverse; }
.step-dot {
  /* پیش از ورود به صفحه: خاکستری مات — با اسکرول رنگ و حرکت می‌گیرد */
  width:44px; height:44px; border-radius:50%; flex-shrink:0; z-index:2;
  background:#26262E; color:#8D8D99; display:grid; place-items:center;
  font-weight:800; box-shadow:0 6px 16px rgba(0,0,0,.45);
  margin:0 16px; border:4px solid #0A0A0C;
  transition:background .45s ease, color .45s ease, box-shadow .45s ease;
}
/* شماره مراحل فرد → طلایی، زوج → سفید/مشکی (هماهنگ با آیکون‌های تک‌رنگ) */
.step.is-in .step-dot { background:var(--grad-gold); color:#171204; box-shadow:0 8px 22px rgba(212,175,55,.45); }
.step.is-in:nth-child(even) .step-dot { background:linear-gradient(135deg,#FFFFFF 0%,#D8D8DE 100%); color:#0A0A0C; box-shadow:0 8px 22px rgba(255,255,255,.22); }
.step-card { cursor:default; }
.step-card:hover { border-color:var(--gold); box-shadow:0 16px 38px rgba(0,0,0,.55); animation: cardNudge .5s ease; }
.step-card {
  flex:1; background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:16px 20px;
  box-shadow:var(--shadow);
}
.step:nth-child(even) .step-card { background:var(--mint-soft); }
.step-card b { color:var(--gold-soft); display:block; margin-bottom:4px; }
.step-card span { font-size:.88rem; color:var(--ink-soft); }
@media (max-width:640px){
  .timeline::before { right:22px; transform:none; }
  .step { flex-direction:row !important; }
}

/* ==========================================================================
   MANAGER CARD + CONTACT
   ========================================================================== */
.manager-card { text-align:center; max-width:420px; margin-inline:auto; }
.manager-avatar {
  width:110px; height:110px; border-radius:50%; margin:0 auto 14px;
  background:var(--grad-gold); display:grid; place-items:center; color:#171204;
  font-size:2.2rem; font-weight:800; box-shadow:0 16px 36px rgba(212,175,55,.35);
  border:5px solid #0A0A0C;
}
.manager-card h3 { color:var(--gold-soft); font-size:1.2rem; }
.manager-card .phone-link { font-size:1.35rem; font-weight:800; color:var(--ink); letter-spacing:1px; }
.contact-hero {
  background:linear-gradient(135deg, #16120A 0%, #3A2E0B 50%, #6B5310 100%);
  border:1px solid rgba(212,175,55,.4);
  border-radius:36px; padding:26px; position:relative; overflow:hidden;
}
.contact-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(212,175,55,.25), transparent 45%); }
.contact-card { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:var(--shadow-lg); max-width:640px; margin-inline:auto; position:relative; }

/* success page */
.pay-success { text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:50px 26px; box-shadow:var(--shadow); }
.pay-success .big-ic { width:90px; height:90px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; background:rgba(18,146,90,.15); color:#3ECF8E; }
.pay-success .big-ic.fail { background:rgba(197,30,116,.15); color:#FF6EA9; }

/* ==========================================================================
   FOOTER — noir with gold seam
   ========================================================================== */
.site-footer {
  background:linear-gradient(180deg, #0D0D11 0%, #070709 100%);
  border-top:1px solid rgba(212,175,55,.35);
  border-radius:44px 44px 0 0; margin-top:70px; padding:50px 0 0;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.4fr 1fr; gap:34px; }
.f-title { color:var(--gold-soft); font-weight:800; margin-bottom:10px; }
.f-title-sm { color:var(--gold-soft); font-weight:700; margin-bottom:14px; font-size:1rem; }
.f-text { font-size:.9rem; color:var(--ink-soft); margin-bottom:16px; }
.f-search { display:flex; background:#14141A; border:1px solid var(--line); border-radius:999px; padding:5px; box-shadow:var(--shadow); }
.f-search input { flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:.9rem; padding:6px 14px; color:var(--ink); }
.f-search input::placeholder { color:#7C766A; }
.f-links { list-style:none; }
.f-links li a { display:block; padding:5px 0; color:var(--ink-soft); font-weight:600; font-size:.9rem; transition:.2s; }
.f-links li a:hover { color:var(--gold-soft); transform:translateX(-4px); }
.f-contact { list-style:none; }
.f-contact li { display:flex; gap:10px; align-items:flex-start; padding:6px 0; color:var(--ink-soft); font-size:.9rem; }
.f-contact svg { color:var(--gold); flex-shrink:0; margin-top:4px; }
.enamad-box { display:flex; justify-content:center; }
.enamad-placeholder img { margin-inline:auto; opacity:.9; }
.footer-social { display:flex; justify-content:center; gap:14px; padding:30px 0 12px; }
.footer-social a {
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#15151B; color:var(--gold-soft); border:1px solid rgba(212,175,55,.3); box-shadow:var(--shadow); transition:all .25s ease;
}
.footer-social a:hover { background:var(--grad-gold); color:#171204; transform:translateY(-4px) rotate(6deg); }
.footer-bottom { border-top:1px solid rgba(212,175,55,.16); padding:16px 0; text-align:center; font-size:.85rem; color:var(--ink-soft); }
.copy { opacity:.75; font-size:.8rem; }

.call-fab {
  position:fixed; bottom:22px; inset-inline-start:22px; z-index:90;
  width:56px; height:56px; border-radius:50%; background:var(--grad-gold);
  color:#171204; display:grid; place-items:center; box-shadow:0 14px 30px rgba(212,175,55,.4);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(212,175,55,.4); } 50% { box-shadow:0 0 0 14px rgba(212,175,55,0); } }

/* ==========================================================================
   AUTH / ACCOUNT
   ========================================================================== */
.auth-wrap { max-width:440px; margin:60px auto; }
.auth-card { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:34px; box-shadow:var(--shadow-lg); }
.auth-card h1 { font-size:1.3rem; color:var(--gold-soft); text-align:center; margin-bottom:20px; }
.auth-alt { text-align:center; margin-top:16px; font-size:.88rem; color:var(--ink-soft); }
.table-wrap { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow-x:auto; }
.table { width:100%; border-collapse:collapse; min-width:640px; }
.table th { background:var(--lav); color:var(--gold-soft); font-size:.85rem; padding:12px 14px; text-align:right; }
.table td { padding:12px 14px; border-top:1px solid var(--line); font-size:.9rem; }
.status-pill { padding:4px 12px; border-radius:999px; font-size:.78rem; font-weight:700; }
.st-pending   { background:rgba(212,175,55,.15); color:#F0D070; }
.st-paid      { background:rgba(18,146,90,.16); color:#4ADE97; }
.st-cod       { background:rgba(233,199,99,.12); color:#E9C763; }
.st-failed    { background:rgba(197,30,116,.16); color:#FF7AB0; }
.st-shipped   { background:rgba(45,108,223,.16); color:#6FB7F2; }
.st-delivered { background:rgba(14,107,65,.2); color:#3ECF8E; }
.st-canceled  { background:rgba(255,255,255,.08); color:#999; }

/* ==========================================================================
   ADMIN
   ========================================================================== */
.admin-body { background:#0B0B0F; min-height:100vh; --a-side-w:270px; }
.admin-side {
  position:fixed; top:0; bottom:0; right:0; width:var(--a-side-w); z-index:220;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#060608,#141008); color:#fff;
  border-left:1px solid rgba(212,175,55,.25);
  box-shadow:-14px 0 40px rgba(0,0,0,.45);
  transition:width .22s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
}
.a-nav {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:12px; display:flex; flex-direction:column; gap:6px; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(212,175,55,.3) transparent;
}
.a-nav::-webkit-scrollbar { width:8px; }
.a-nav::-webkit-scrollbar-track { background:transparent; }
.a-nav::-webkit-scrollbar-thumb { background:rgba(212,175,55,.25); border-radius:8px; }
.a-nav::-webkit-scrollbar-thumb:hover { background:rgba(212,175,55,.45); }
.a-side-foot {
  padding:10px 12px 14px; border-top:1px solid rgba(212,175,55,.14);
  background:rgba(0,0,0,.28); display:flex; flex-direction:column; gap:6px;
}
.a-side-user { display:flex; align-items:center; gap:9px; padding:2px 8px 8px; color:#8F8878; font-size:.78rem; }
.a-side-user .dot { width:8px; height:8px; border-radius:50%; background:#3ECF8E; box-shadow:0 0 0 3px rgba(62,207,142,.15); flex-shrink:0; }
.admin-side .a-logo {
  display:flex; align-items:center; gap:11px; padding:18px 16px 15px;
  border-bottom:1px solid rgba(212,175,55,.14); flex-shrink:0;
}
.admin-side .a-logo img { width:40px; height:40px; border-radius:12px; object-fit:contain; flex-shrink:0; }
.admin-side .a-logo b { font-size:1rem; color:var(--gold-soft); }
.admin-side a.a-link {
  position:relative; display:flex; align-items:center; gap:11px; color:#C8BFA8; padding:11px 14px;
  border-radius:14px; font-weight:600; font-size:.92rem; white-space:nowrap;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.admin-side a.a-link > span:first-child { width:22px; text-align:center; font-size:1.05rem; flex-shrink:0; }
.admin-side a.a-link:hover { background:rgba(212,175,55,.12); color:#F2EDE3; }
.admin-side a.a-link.on { background:var(--grad-gold); color:#171204; box-shadow:0 8px 18px rgba(212,175,55,.35); }
.admin-side a.a-link:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.a-caret { margin-inline-start:auto; font-size:.7rem; opacity:.6; transition:transform .2s ease; }
.a-group.open > a.a-link .a-caret { transform:rotate(180deg); }
.a-group > a.a-link.on + .a-sub { border-inline-start-color:rgba(212,175,55,.5); }
.a-sub {
  display:none; flex-direction:column; gap:2px; margin:2px 0 6px;
  padding-inline-start:26px; border-inline-start:1px solid rgba(212,175,55,.18);
  margin-inline-start:20px;
}
.a-group.open > .a-sub { display:flex; animation:aSubIn .18s ease; }
@keyframes aSubIn { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.admin-side a.a-sublink {
  display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:11px;
  color:#A9A18E; font-size:.855rem; font-weight:600; white-space:nowrap; transition:.16s ease;
}
.admin-side a.a-sublink > span:first-child { width:18px; text-align:center; font-size:.9rem; opacity:.85; flex-shrink:0; }
.admin-side a.a-sublink:hover { background:rgba(212,175,55,.10); color:#F2EDE3; }
.admin-side a.a-sublink.on { background:rgba(212,175,55,.16); color:var(--gold-soft); }

/* --- sticky top bar (breadcrumb + actions) --- */
.a-topbar {
  position:sticky; top:0; z-index:180; margin-inline-start:var(--a-side-w);
  display:flex; align-items:center; gap:12px; padding:11px 26px;
  background:rgba(11,11,15,.93); border-bottom:1px solid rgba(212,175,55,.2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:margin .22s cubic-bezier(.4,0,.2,1);
}
.a-crumb { display:flex; align-items:center; gap:8px; color:#8F8878; font-size:.85rem; min-width:0; }
.a-crumb b { color:var(--gold-soft); font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-crumb .sep { opacity:.45; }
.a-top-actions { margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.a-top-btn {
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:12px;
  font-size:.84rem; font-weight:600; color:#C8BFA8; white-space:nowrap;
  background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.25); transition:.18s ease;
}
.a-top-btn:hover { color:#F2EDE3; background:rgba(212,175,55,.18); }
.a-icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; cursor:pointer; flex-shrink:0; color:var(--gold-soft);
  background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.3); transition:.18s ease;
}
.a-icon-btn:hover { background:rgba(212,175,55,.2); }
.a-icon-btn:active { transform:scale(.95); }
.a-icon-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.a-burger { display:none; flex-direction:column; gap:4.5px; }
.a-burger span { display:block; width:18px; height:2.2px; background:var(--gold); border-radius:2px; }
.a-collapse { display:none; }
.a-collapse svg { transition:transform .22s ease; }
.a-backdrop {
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.62);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.a-backdrop.show { opacity:1; pointer-events:auto; }
.admin-main { margin-inline-start:var(--a-side-w); padding:22px 26px 44px; transition:margin .22s cubic-bezier(.4,0,.2,1); }
.admin-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap; }
.admin-top h1 { font-size:1.35rem; color:var(--gold-soft); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.stat-card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:var(--shadow); display:flex; gap:14px; align-items:center; }
.stat-card .ic { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; color:#171204; background:var(--grad-gold); flex-shrink:0; }
.stat-card:nth-child(2) .ic { background:linear-gradient(135deg,#8F6E1D,#C9A227); }
.stat-card:nth-child(3) .ic { background:linear-gradient(135deg,#3E3410,#8A6B14); }
.stat-card:nth-child(4) .ic { background:linear-gradient(135deg,#5C4A12,#B8912B); }
.stat-card b { font-size:1.3rem; display:block; }
.stat-card span { font-size:.82rem; color:var(--ink-soft); }
.a-panel { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:var(--shadow); margin-bottom:22px; }
.a-panel h2 { font-size:1.08rem; color:var(--gold-soft); margin-bottom:16px; }
.a-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(212,175,55,.14); color:var(--gold-soft); }
.settings-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.thumb { width:64px; height:64px; border-radius:14px; object-fit:cover; }
.logo-up-box {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:#101015; border:1.5px dashed rgba(212,175,55,.4);
  border-radius:18px; padding:16px 18px;
}
.logo-up-box .logo-preview {
  width:72px; height:72px; border-radius:16px; object-fit:contain;
  background:#0A0A0C; border:1px solid var(--line); padding:6px; flex-shrink:0;
}
.logo-up-form { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.logo-up-form input[type=file] {
  font:inherit; font-size:.85rem; color:var(--ink-soft); max-width:260px;
  background:#0D0D12; border:1.5px solid var(--line); border-radius:12px; padding:8px 12px; cursor:pointer;
}
.logo-up-form input[type=file]::file-selector-button {
  font:inherit; font-size:.82rem; font-weight:700; border:0; cursor:pointer;
  background:rgba(212,175,55,.16); color:var(--gold-soft); border-radius:9px; padding:6px 12px; margin-inline-end:10px;
}
.logo-hint { font-size:.78rem; color:var(--ink-soft); width:100%; }
.switch { position:relative; width:46px; height:26px; }
.switch input { opacity:0; width:0; height:0; }
.switch i { position:absolute; inset:0; background:#2A2A33; border-radius:999px; cursor:pointer; transition:.2s; }
.switch i::before { content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#8B8578; top:3px; inset-inline-start:3px; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.switch input:checked + i { background:var(--grad-gold); }
.switch input:checked + i::before { transform:translateX(-20px); background:#171204; }
.toast-zone { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:999; }

/* ---- admin responsive: collapsible rail (desktop) & drawer (mobile) ---- */
@media (min-width:1025px) {
  .admin-body.side-mini { --a-side-w:80px; }
  .admin-body.side-mini .admin-side .a-brand-text,
  .admin-body.side-mini .admin-side a.a-link > span:not(:first-child),
  .admin-body.side-mini .a-side-user span:not(.dot) { display:none; }
  .admin-body.side-mini .admin-side .a-logo { justify-content:center; padding:18px 8px 15px; }
  .admin-body.side-mini .admin-side a.a-link { justify-content:center; padding:12px 0; }
  .admin-body.side-mini .a-sub { display:none !important; }
  .admin-body.side-mini .a-caret { display:none; }
  .admin-body.side-mini .admin-side .a-group { display:flex; flex-direction:column; gap:6px; }
  .admin-body.side-mini .admin-side a.a-link .badge {
    position:absolute; top:7px; right:9px; width:9px; height:9px; padding:0;
    font-size:0; border-radius:50%; background:#D4AF37; color:transparent; box-shadow:0 0 0 2px #0d0c09;
  }
  .admin-body.side-mini .a-side-user { justify-content:center; padding:2px 0 8px; }
  .admin-body.side-mini .a-collapse svg { transform:rotate(180deg); }
  .a-collapse { display:inline-flex; }
}
@media (max-width:1024px) {
  .admin-body { --a-side-w:0px; }
  .admin-side {
    width:min(82vw,300px); transform:translateX(104%);
    box-shadow:-20px 0 60px rgba(0,0,0,.6);
  }
  .admin-body.nav-open .admin-side { transform:none; }
  .admin-body.nav-open { overflow:hidden; }
  .a-burger { display:inline-flex; }
  .a-topbar { padding:10px 14px; gap:10px; }
  .a-topbar .hide-sm,
  .a-topbar .a-top-btn span:not(:first-child) { display:none; }
  .admin-main { padding:16px 14px 34px; }
}
@media (max-width:520px) {
  .a-topbar { padding:9px 12px; }
  .a-icon-btn { width:38px; height:38px; }
  .a-crumb { font-size:.8rem; }
}

/* login page (admin) */
.admin-login-bg {
  min-height:100vh; display:grid; place-items:center; padding:20px;
  background:var(--grad-hero); position:relative; overflow:hidden;
}
.admin-login-bg::before { content:''; position:absolute; width:480px; height:480px; border-radius:50%; background:rgba(212,175,55,.08); top:-160px; right:-140px; }
.admin-login-card { background:var(--card); border:1px solid rgba(212,175,55,.3); border-radius:28px; padding:38px 34px; width:min(420px,100%); box-shadow:0 30px 80px rgba(0,0,0,.6); position:relative; z-index:2; }
.admin-login-card img { margin:0 auto 14px; width:72px; height:72px; object-fit:contain; }
.admin-login-card h1 { text-align:center; color:var(--gold-soft); font-size:1.25rem; margin-bottom:20px; }

/* responsive */
@media (max-width:1020px){
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .cats-row { grid-template-columns:repeat(3,1fr); }
  .single-wrap { grid-template-columns:1fr; }
  .single-img { position:static; transform:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}

/* منوی اصلی در همهٔ عرض‌ها یک‌خطی می‌ماند (جمع‌شدن تدریجی فاصله‌ها و اندازهٔ فونت) */
@media (max-width:1240px){
  .main-nav a { font-size:.88rem; padding:8px 11px; }
  .head-search input { width:140px; }
}
@media (max-width:1140px){
  .brand-name { display:none; }
  .main-nav a { font-size:.85rem; padding:7px 10px; }
  .head-search input { width:118px; }
}
@media (max-width:980px){
  .head-search { display:none; }
  .m-search { display:flex; width:172px; margin-bottom:0; flex-shrink:0; }
  .main-nav a { font-size:.8rem; padding:7px 9px; }
}
@media (max-width:860px){
  .main-nav {
    position:fixed; top:76px; right:4%; left:4%;
    background:rgba(11,11,15,.98); border:1px solid rgba(212,175,55,.25); border-radius:24px; box-shadow:var(--shadow-lg);
    flex-direction:column; padding:14px; gap:2px;
    opacity:0; pointer-events:none; transform:translateY(-12px);
    transition:all .25s ease; z-index:99;
  }
  .main-nav.open { opacity:1; pointer-events:auto; transform:none; }
  .main-nav a { padding:11px 16px; font-size:1rem; }
  .m-search { display:flex; width:100%; margin-bottom:8px; }
  .nav-toggle { display:flex; }
  .head-search { display:none; }
  .brand-name { display:none; }
  .btn-login { padding:9px 16px; }
}
@media (max-width:640px){
  .product-grid { grid-template-columns:1fr; }
  .cats-row { grid-template-columns:repeat(2,1fr); gap:12px; margin-top:-50px; }
  .why-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .pay-methods { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero { padding:120px 0 84px; }
  .hero-stats { gap:20px; }
  .hero-stat b { font-size:1.15rem; }
  .hero-search { flex-direction:column; border-radius:24px; padding:10px; }
  .hero-search input { padding:10px 14px; text-align:center; }
  .hero-search .btn { width:100%; }
  .section { padding:48px 0; }
  .section-title { font-size:1.35rem; }
  .btn { padding:9px 18px; font-size:.92rem; }
  .single-price b { font-size:1.4rem; }
  .cart-prod img { width:56px; height:56px; }
  .step-dot { margin:0 10px; width:38px; height:38px; }
  .timeline::before { right:19px; transform:none; }
  .btn-login span { display:none; }
  .stat-grid { grid-template-columns:1fr; }
  .admin-main { padding:14px 12px 26px; }
  .a-panel { padding:16px; }
  .site-footer { padding:36px 0 0; margin-top:44px; }
}
@media (max-width:400px){
  .container { width:94%; }
  .header-inner { padding:8px 12px; gap:10px; }
  .brand-logo { width:38px; height:38px; border-radius:11px; }
  .site-header { top:8px; padding:0 10px; }
  .main-nav { top:66px; }
  .cats-row { margin-top:-40px; }
  .cat-card img { height:110px; }
  .p-img img { height:180px; }
  .cart-prod img { width:50px; height:50px; }
  .cart-row { padding:12px; }
  .qty-box button { width:38px; height:42px; }
  .qty-box input { width:46px; }
  .single-info h1 { font-size:1.25rem; }
  .toolbar { padding:12px; }
  .toolbar select, .toolbar input { max-width:100%; }
  .f-search { flex-direction:column; border-radius:18px; }
  .f-search .btn { width:100%; }
  .call-fab { width:50px; height:50px; bottom:16px; inset-inline-start:14px; }
}