/* ==========================================================================
   هورفیکس — Design System
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --primary: #b8915b;
  --primary-dark: #96733f;
  --primary-light: #e9d9bf;
  --secondary: #6b3a4a;
  --dark: #201a15;
  --light: #f8f9fa;
  --cream: #faf6ef;
  --gray-50: #faf9f7;
  --gray-100: #f1ede6;
  --gray-200: #e4ddd1;
  --gray-400: #b3a99a;
  --gray-600: #7a6f60;
  --gray-800: #3a3229;
  --success: #2f7d4f;
  --danger: #c0392b;
  --warning: #d38b1f;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(32,26,21,.06);
  --shadow: 0 10px 30px rgba(32,26,21,.08);
  --shadow-lg: 0 20px 50px rgba(32,26,21,.14);
  --ease: cubic-bezier(.4,0,.2,1);
  --header-h: 114px;
}
@media (max-width:1024px){ :root{ --header-h: 76px; } }

html{ scroll-behavior:smooth; }
body{
  font-family:'Vazirmatn','Segoe UI',sans-serif;
  background:var(--cream);
  color:var(--dark);
  line-height:1.8;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top:var(--header-h);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
input, textarea, select{ font-family:inherit; font-size:1rem; }
main{ flex:1; }

.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
.section{ padding:64px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.section-title{ font-size:1.7rem; font-weight:700; position:relative; padding-inline-start:16px; }
.section-title::before{ content:''; position:absolute; inset-inline-start:0; top:6px; bottom:6px; width:5px; border-radius:4px; background:linear-gradient(180deg,var(--primary),var(--secondary)); }
.section-sub{ color:var(--gray-600); font-size:.95rem; margin-top:6px; }
.eyebrow{ display:inline-block; color:var(--primary-dark); background:var(--primary-light); font-size:.78rem; font-weight:700; padding:5px 14px; border-radius:99px; margin-bottom:10px; letter-spacing:.02em; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:99px; font-weight:600; font-size:.95rem; transition:all .25s var(--ease); white-space:nowrap; }
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 8px 20px rgba(184,145,91,.35); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(184,145,91,.45); }
.btn-secondary{ background:var(--secondary); color:#fff; }
.btn-secondary:hover{ background:#582c3a; }
.btn-outline{ border:1.5px solid var(--gray-200); color:var(--dark); background:#fff; }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary-dark); }
.btn-ghost{ color:var(--primary-dark); }
.btn-ghost:hover{ background:var(--primary-light); }
.btn-danger{ background:#fdeceb; color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn-lg{ padding:16px 34px; font-size:1.05rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
.btn-icon{ width:42px; height:42px; padding:0; border-radius:50%; background:#fff; border:1.5px solid var(--gray-200); }
.btn-icon:hover{ border-color:var(--primary); color:var(--primary-dark); }

/* ---------- Cards / surfaces ---------- */
.card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--gray-100); }
.card-pad{ padding:28px; }

/* ---------- Badges & Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:99px; font-size:.78rem; font-weight:600; }
.chip-success{ background:#e6f5eb; color:var(--success); }
.chip-warning{ background:#fdf1de; color:var(--warning); }
.chip-danger{ background:#fdeceb; color:var(--danger); }
.chip-gray{ background:var(--gray-100); color:var(--gray-600); }
.chip-info{ background:var(--primary-light); color:var(--primary-dark); }
.count-badge{ position:absolute; top:-6px; left:-6px; min-width:19px; height:19px; padding:0 4px; border-radius:99px; background:var(--secondary); color:#fff; font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:8px; color:var(--gray-800); }
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=tel],.field input[type=number],.field input[type=file],
.field textarea, .field select{
  width:100%; padding:13px 16px; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
  background:#fff; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-light); }
.field small.hint{ display:block; margin-top:6px; color:var(--gray-600); font-size:.78rem; }
.field-error{ color:var(--danger); font-size:.8rem; margin-top:6px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.checkbox-row{ display:flex; align-items:center; gap:9px; font-size:.88rem; }
.checkbox-row input{ width:18px; height:18px; accent-color:var(--primary); }

/* ---------- Skeleton loading ---------- */
.skeleton{ position:relative; overflow:hidden; background:var(--gray-100); border-radius:var(--radius-sm); }
.skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(-100%); } }
.page-loader{ position:fixed; inset:0; background:var(--cream); z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .4s var(--ease), visibility .4s; }
.page-loader.hide{ opacity:0; visibility:hidden; }
.loader-ring{ width:46px; height:46px; border-radius:50%; border:3px solid var(--gray-200); border-top-color:var(--primary); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Toasts ---------- */
.toast-wrap{ position:fixed; top:calc(var(--header-h) + 16px); left:50%; transform:translateX(-50%); z-index:9998; display:flex; flex-direction:column; gap:10px; width:min(92vw,380px); }
.toast{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:14px 18px; font-size:.9rem; font-weight:600; border-inline-start:4px solid var(--primary); animation:toast-in .35s var(--ease); }
.toast.success{ border-color:var(--success); } .toast.success i{ color:var(--success); }
.toast.error{ border-color:var(--danger); } .toast.error i{ color:var(--danger); }
.toast.info{ border-color:var(--primary); } .toast.info i{ color:var(--primary); }
.toast.out{ animation:toast-out .3s var(--ease) forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-14px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(-10px) scale(.96); } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- SPA-like page transitions ---------- */
.pjax-bar{ position:fixed; top:0; inset-inline:0; height:3px; z-index:10000; background:linear-gradient(90deg,var(--primary),var(--secondary)); width:0%; opacity:0; transition:width .3s var(--ease), opacity .2s; }
.pjax-bar.on{ opacity:1; }
main{ transition:opacity .22s var(--ease), transform .22s var(--ease); }
main.pjax-out{ opacity:0; transform:translateY(8px); }

/* ---------- Button shine ---------- */
.btn{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-secondary::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-120%); transition:transform .6s; }
.btn-primary:hover::after, .btn-secondary:hover::after{ transform:translateX(120%); }

/* ==========================================================================
   Header
   ========================================================================== */
.header-wrap{ position:fixed; inset-inline:0; top:0; z-index:1000; }
.top-bar{ background:var(--dark); color:#cfc3b3; height:38px; overflow:hidden; }
.top-bar-inner{ max-width:1240px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; font-size:.78rem; }
.top-bar-links{ display:flex; align-items:center; gap:22px; }
.top-bar-links a{ color:#cfc3b3; transition:color .2s; }
.top-bar-links a:hover{ color:var(--primary); }
.top-bar-promo{ display:flex; align-items:center; gap:8px; color:var(--primary); font-weight:600; }
.site-header{ position:relative; height:76px; background:rgba(250,246,239,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--gray-100); transition:box-shadow .3s; }
.header-wrap.scrolled .site-header{ box-shadow:var(--shadow-sm); }
.header-inner{ max-width:1240px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
@media (max-width:1024px){ .top-bar{ display:none; } }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.35rem; color:var(--secondary); flex-shrink:0; }
.logo .logo-mark{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav a{ padding:10px 16px; border-radius:99px; font-weight:600; font-size:.92rem; color:var(--gray-800); transition:all .2s; position:relative; }
.main-nav a:hover, .main-nav a.active{ background:var(--primary-light); color:var(--primary-dark); }
.header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-icon{ position:relative; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gray-800); transition:all .2s; }
.header-icon:hover{ background:var(--gray-100); color:var(--primary-dark); }
.search-toggle-wrap{ position:relative; }
.header-search{ position:absolute; top:56px; left:50%; transform:translateX(-50%) translateY(-8px); width:min(90vw,420px); background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px; opacity:0; pointer-events:none; transition:all .25s var(--ease); }
.header-search.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.header-search input{ width:100%; border:none; padding:12px 14px; border-radius:var(--radius-sm); background:var(--gray-50); }

.account-menu{ position:relative; }
.account-dropdown{ position:absolute; top:56px; left:0; width:220px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:8px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:all .2s var(--ease); z-index:50; }
.account-menu.open .account-dropdown{ opacity:1; pointer-events:auto; transform:none; }
.account-dropdown a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600; color:var(--gray-800); }
.account-dropdown a:hover{ background:var(--gray-50); color:var(--primary-dark); }
.account-dropdown hr{ border:none; border-top:1px solid var(--gray-100); margin:6px 0; }

.mobile-toggle{ display:none; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; font-size:1.2rem; }

/* Mobile drawer */
.mobile-drawer{ position:fixed; inset:0; z-index:1100; visibility:hidden; }
.mobile-drawer.open{ visibility:visible; }
.mobile-drawer-backdrop{ position:absolute; inset:0; background:rgba(32,26,21,.5); opacity:0; transition:opacity .3s; }
.mobile-drawer.open .mobile-drawer-backdrop{ opacity:1; }
.mobile-drawer-panel{ position:absolute; top:0; bottom:0; right:0; width:min(82vw,320px); background:#fff; padding:24px; transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; }
.mobile-drawer.open .mobile-drawer-panel{ transform:none; }
.mobile-drawer-panel a{ display:flex; align-items:center; gap:12px; padding:13px 6px; font-weight:600; border-bottom:1px solid var(--gray-100); }

/* Bottom nav (mobile) */
.bottom-nav{ display:none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--dark); color:#e9e2d6; margin-top:80px; }
.footer-top{ padding:56px 0 36px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:32px; }
.footer-brand p{ color:#b8ab97; font-size:.9rem; margin-top:12px; line-height:1.9; }
.footer-col h4{ font-size:1rem; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#b8ab97; font-size:.9rem; transition:color .2s; }
.footer-col a:hover{ color:var(--primary); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--primary); color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; text-align:center; color:#8a7d6c; font-size:.82rem; }

/* ==========================================================================
   Product grid & cards
   ========================================================================== */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.product-card{
  background:#fff; border-radius:20px; overflow:hidden; position:relative;
  box-shadow:0 1px 3px rgba(32,26,21,.05), 0 1px 2px rgba(32,26,21,.04);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  opacity:0; transform:translateY(28px) scale(.98);
  animation:card-in .6s var(--ease) forwards;
}
@keyframes card-in{ to{ opacity:1; transform:none; } }
.product-grid .product-card:nth-child(1), .bento-grid .product-card:nth-child(1){ animation-delay:.02s; } .product-grid .product-card:nth-child(2), .bento-grid .product-card:nth-child(2){ animation-delay:.08s; }
.product-grid .product-card:nth-child(3), .bento-grid .product-card:nth-child(3){ animation-delay:.14s; } .product-grid .product-card:nth-child(4), .bento-grid .product-card:nth-child(4){ animation-delay:.20s; }
.product-grid .product-card:nth-child(5), .bento-grid .product-card:nth-child(5){ animation-delay:.26s; } .product-grid .product-card:nth-child(6), .bento-grid .product-card:nth-child(6){ animation-delay:.32s; }
.product-grid .product-card:nth-child(n+7), .bento-grid .product-card:nth-child(n+7){ animation-delay:.36s; }
.product-card:hover{ transform:translateY(-8px); box-shadow:0 24px 40px -12px rgba(32,26,21,.18); }
.product-thumb{ position:relative; aspect-ratio:1/1; background:linear-gradient(150deg,var(--gray-50),var(--gray-100)); overflow:hidden; display:block; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.product-card:hover .product-thumb img{ transform:scale(1.08) rotate(-.4deg); }
.product-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(32,26,21,.35),transparent 45%); opacity:0; transition:opacity .35s var(--ease); }
.product-card:hover .product-thumb::after{ opacity:1; }
.product-tags{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.product-tags .chip{ box-shadow:0 4px 10px rgba(0,0,0,.12); }
.fav-btn{ position:absolute; top:12px; left:12px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:var(--gray-600); transition:all .25s var(--ease); z-index:2; }
.fav-btn:hover{ transform:scale(1.1); } .fav-btn:hover, .fav-btn.active{ color:#e0455f; background:#fff; }
.quick-add{
  position:absolute; left:12px; bottom:-46px; width:calc(100% - 24px); z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:99px; background:var(--dark); color:#fff; font-weight:700; font-size:.82rem;
  transition:bottom .35s var(--ease), background .2s;
}
.product-card:hover .quick-add{ bottom:12px; }
.quick-add:hover{ background:var(--primary-dark); }
.product-body{ padding:16px 18px 18px; }
.product-cat{ color:var(--primary-dark); font-size:.72rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.product-name{ font-weight:700; margin:6px 0 8px; font-size:.96rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em; }
.product-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px dashed var(--gray-200); }
.price-old{ text-decoration:line-through; color:var(--gray-400); font-size:.78rem; }
.price-new{ font-weight:800; color:var(--secondary); font-size:1.08rem; }
.rating{ display:flex; align-items:center; gap:4px; color:var(--warning); font-size:.8rem; }
.stock-off{ position:absolute; inset:0; background:rgba(250,246,239,.8); backdrop-filter:blur(1px); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--danger); z-index:3; }

/* ==========================================================================
   Square overlay product card (pc-overlay) — image + all info on one square,
   used on homepage featured products & product list/shop grid
   ========================================================================== */
.product-card.pc-overlay{ aspect-ratio:1/1; }
.pc-overlay .product-thumb{ width:100%; height:100%; aspect-ratio:auto; }
.pc-overlay .product-overlay{
  position:absolute; inset-inline:0; bottom:0; z-index:2; padding:14px 14px 16px;
  background:linear-gradient(to top, rgba(20,15,10,.94) 0%, rgba(20,15,10,.78) 50%, rgba(20,15,10,0) 100%);
  color:#fff;
}
.pc-overlay .product-overlay .product-cat{ color:var(--primary-light); font-size:.68rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.pc-overlay .product-overlay .product-name{
  color:#fff; font-weight:700; margin:4px 0 6px; font-size:.9rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:auto;
}
.pc-overlay .product-overlay .pc-price{ display:flex; align-items:center; gap:8px; }
.pc-overlay .product-overlay .price-old{ text-decoration:line-through; color:rgba(255,255,255,.55); font-size:.72rem; }
.pc-overlay .product-overlay .price-new{ font-weight:800; color:#fff; font-size:1.02rem; }
.quick-add-fab{
  position:absolute; bottom:12px; left:12px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(184,145,91,.5);
  transition:transform .2s var(--ease), background .2s;
}
.quick-add-fab:hover{ background:var(--primary-dark); transform:scale(1.08); }
.quick-add-fab button{ all:unset; width:100%; height:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; }

@media (max-width:520px){
  .pc-overlay .product-overlay{ padding:10px 10px 12px; }
  .pc-overlay .product-overlay .product-name{ font-size:.82rem; margin:3px 0 5px; }
  .pc-overlay .product-overlay .price-new{ font-size:.92rem; }
  .quick-add-fab{ width:34px; height:34px; font-size:.85rem; bottom:8px; left:8px; }
}

/* ==========================================================================
/* ==========================================================================
   Hero (متنی — دیگر استفاده نمی‌شود، برای رفرنس نگه‌داری شده)
   ========================================================================== */
.hero{ position:relative; padding:64px 0 100px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.hero h1{ font-size:clamp(2.1rem,4.2vw,3.4rem); font-weight:800; line-height:1.32; margin-bottom:18px; animation:fade-up .8s var(--ease) both; }
.hero h1 span{ background:linear-gradient(100deg,var(--primary-dark),var(--secondary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p{ color:var(--gray-600); font-size:1.05rem; margin-bottom:28px; max-width:520px; animation:fade-up .8s .1s var(--ease) both; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; animation:fade-up .8s .2s var(--ease) both; }
.hero-visual{ position:relative; border-radius:28px; overflow:hidden; box-shadow:0 30px 60px -16px rgba(32,26,21,.28); aspect-ratio:4/3; animation:fade-up .9s .15s var(--ease) both; }
.hero-visual img{ width:100%; height:100%; object-fit:cover; transition:transform 8s linear; }
.hero:hover .hero-visual img{ transform:scale(1.12); }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.4; z-index:-1; animation:blob-float 9s ease-in-out infinite; }
@keyframes blob-float{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(18px,-24px) scale(1.08); } }
@keyframes fade-up{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.hero-stats{ display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; animation:fade-up .8s .3s var(--ease) both; }
.hero-stat b{ display:block; font-size:1.5rem; color:var(--secondary); }
.hero-stat span{ color:var(--gray-600); font-size:.82rem; }
.hero-float-badge{ position:absolute; bottom:18px; right:18px; background:#fff; border-radius:16px; padding:12px 16px; box-shadow:0 16px 30px rgba(32,26,21,.18); display:flex; align-items:center; gap:10px; animation:fade-up 1s .5s var(--ease) both, blob-float 6s ease-in-out infinite 1.5s; }
.hero-float-badge i{ color:var(--success); font-size:1.3rem; }
.hero-float-badge b{ display:block; font-size:.85rem; } .hero-float-badge span{ font-size:.72rem; color:var(--gray-600); }

.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat-card{ background:#fff; border-radius:var(--radius); padding:26px 16px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--gray-100); transition:all .3s var(--ease); }
.cat-card:hover{ transform:translateY(-6px); border-color:var(--primary-light); box-shadow:0 20px 34px -14px rgba(32,26,21,.2); }
.cat-card i{ font-size:1.7rem; color:var(--primary-dark); margin-bottom:10px; display:inline-block; transition:transform .3s var(--ease); }
.cat-card:hover i{ transform:scale(1.18) rotate(-6deg); }
.cat-card span{ display:block; font-weight:700; font-size:.9rem; }

.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-item{ display:flex; align-items:center; gap:14px; }
.trust-item i{ width:52px; height:52px; border-radius:50%; background:var(--primary-light); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; transition:transform .3s var(--ease); }
.trust-item:hover i{ transform:scale(1.1) rotate(6deg); }
.trust-item b{ display:block; font-size:.92rem; }
.trust-item p{ color:var(--gray-600); font-size:.8rem; }

.cta-banner{ background:linear-gradient(120deg,var(--secondary),#4a2432); border-radius:var(--radius-lg); padding:50px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-banner h3{ font-size:1.5rem; margin-bottom:8px; }
.cta-banner p{ color:#e6cfd6; }

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty-state{ text-align:center; padding:70px 20px; }
.empty-state i{ font-size:3rem; color:var(--gray-400); margin-bottom:16px; }
.empty-state h3{ font-size:1.15rem; margin-bottom:8px; }
.empty-state p{ color:var(--gray-600); margin-bottom:22px; }

/* ==========================================================================
   Product list / filters
   NOTE: layout/positioning CSS specific to the products list page (filter
   drawer, pill bar, toolbar, price inputs, etc.) now lives inline inside
   index/templates/products/product_list.html (extra_head block) so it only
   loads on that page. Only the rules shared with OTHER templates stay here:
   .product-grid-4 (used on the homepage too) and .swatch/.swatches (used on
   the product detail page too).
   ========================================================================== */
.product-grid-4{ grid-template-columns:repeat(4,1fr); }
.swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--gray-200); cursor:pointer; }
.swatch.active{ box-shadow:0 0 0 2px var(--primary); }

/* ==========================================================================
   Product Detail
   ========================================================================== */
.pd-layout{ display:grid; grid-template-columns:100px 1fr 1fr; gap:20px; align-items:start; }
.pd-layout.no-thumbs{ grid-template-columns:1fr 1fr; }
.pd-thumbs{ display:flex; flex-direction:column; gap:10px; position:sticky; top:calc(var(--header-h) + 16px); }
.pd-thumbs img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-sm); cursor:pointer; border:2px solid transparent; opacity:.65; transition:all .2s; }
.pd-thumbs img.active, .pd-thumbs img:hover{ border-color:var(--primary); opacity:1; }
.pd-gallery-main{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1; background:var(--gray-50); box-shadow:var(--shadow-sm); position:sticky; top:calc(var(--header-h) + 16px); }
.pd-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.pd-info{ position:static; }
.pd-info .cat-link{ color:var(--primary-dark); font-weight:700; font-size:.82rem; }
.pd-info h1{ font-size:1.6rem; font-weight:800; margin:10px 0 12px; }
.pd-meta{ display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; color:var(--gray-600); font-size:.85rem; }
.pd-price-box{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.pd-price-box .price-new{ font-size:1.7rem; }
.pd-price-box .price-old{ font-size:1rem; }
.pd-options{ margin-bottom:20px; }
.pd-options h6{ font-size:.85rem; font-weight:700; margin-bottom:10px; }
.size-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:40px; padding:0 12px; border-radius:99px; border:1.5px solid var(--gray-200); font-weight:600; font-size:.85rem; cursor:pointer; margin-inline-end:8px; margin-bottom:8px; }
.size-list-wrap{ display:flex; flex-wrap:wrap; max-height:190px; overflow-y:auto; overflow-x:hidden; padding:4px 4px 0 0; }
.size-list-wrap::-webkit-scrollbar{ width:6px; }
.size-list-wrap::-webkit-scrollbar-thumb{ background:var(--gray-200); border-radius:99px; }
.size-pill.disabled{ opacity:.4; text-decoration:line-through; pointer-events:none; }
input[type=radio].opt-radio{ display:none; }
.opt-radio:checked + .swatch{ box-shadow:0 0 0 2px var(--primary); }
.opt-radio:checked + .size-pill{ background:var(--primary); color:#fff; border-color:var(--primary); }
.qty-selector{ display:inline-flex; align-items:center; border:1.5px solid var(--gray-200); border-radius:99px; overflow:hidden; }
.qty-selector button{ width:42px; height:42px; font-size:1.1rem; }
.qty-selector input{ width:48px; text-align:center; border:none; font-weight:700; }
.pd-add-row{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.pd-tabs{ margin-top:56px; }
.pd-tab-nav{ display:flex; gap:8px; border-bottom:1.5px solid var(--gray-100); margin-bottom:24px; flex-wrap:wrap; }
.pd-tab-nav button{ padding:14px 20px; font-weight:700; color:var(--gray-600); border-bottom:2.5px solid transparent; margin-bottom:-2px; }
.pd-tab-nav button.active{ color:var(--primary-dark); border-color:var(--primary); }
.pd-tab-pane{ display:none; }
.pd-tab-pane.active{ display:block; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--gray-100); }
.spec-table td{ padding:13px 6px; font-size:.9rem; }
.spec-table td:first-child{ color:var(--gray-600); width:40%; }
.review-item{ padding:18px 0; border-bottom:1px solid var(--gray-100); }
.review-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.review-user{ display:flex; align-items:center; gap:10px; font-weight:700; }
.avatar-circle{ width:36px; height:36px; border-radius:50%; background:var(--primary-light); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; }
.star-input{ display:flex; flex-direction:row-reverse; gap:6px; justify-content:flex-end; font-size:1.4rem; color:var(--gray-200); }
.star-input input{ display:none; }
.star-input label{ cursor:pointer; transition:color .15s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label{ color:var(--warning); }

/* ==========================================================================
   Cart / checkout
   ========================================================================== */
.checkout-steps{ display:flex; justify-content:center; gap:8px; margin-bottom:36px; flex-wrap:wrap; }
.checkout-steps .step{ display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:99px; background:#fff; border:1.5px solid var(--gray-200); font-size:.82rem; font-weight:700; color:var(--gray-600); }
.checkout-steps .step.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.checkout-steps .step.done{ color:var(--success); border-color:var(--success); }
.cart-layout{ display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
.cart-row{ display:flex; gap:16px; align-items:center; padding:18px; border-bottom:1px solid var(--gray-100); }
.cart-row:last-child{ border-bottom:none; }
.cart-row img{ width:84px; height:84px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.cart-row-info{ flex:1; min-width:0; }
.cart-row-info h4{ font-size:.95rem; margin-bottom:4px; }
.cart-row-meta{ display:flex; gap:10px; color:var(--gray-600); font-size:.8rem; flex-wrap:wrap; }
.summary-row{ display:flex; justify-content:space-between; font-size:.9rem; padding:10px 0; color:var(--gray-600); }
.summary-row.total{ border-top:1.5px solid var(--gray-100); margin-top:8px; padding-top:16px; font-size:1.1rem; font-weight:800; color:var(--dark); }
.address-card{ position:relative; padding:18px; border:1.5px solid var(--gray-200); border-radius:var(--radius); cursor:pointer; transition:all .2s; }
.address-card.selected{ border-color:var(--primary); background:var(--primary-light); }
.address-card.default::after{ content:'پیش‌فرض'; position:absolute; top:14px; left:14px; background:var(--success); color:#fff; font-size:.68rem; padding:3px 10px; border-radius:99px; }

/* Order status timeline */
.order-timeline{ display:flex; justify-content:space-between; position:relative; margin:36px 0; }
.order-timeline::before{ content:''; position:absolute; top:18px; inset-inline:6%; height:3px; background:var(--gray-200); z-index:0; }
.order-timeline .tl-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; text-align:center; }
.order-timeline .tl-dot{ width:38px; height:38px; border-radius:50%; background:#fff; border:3px solid var(--gray-200); display:flex; align-items:center; justify-content:center; color:var(--gray-400); }
.order-timeline .tl-step.done .tl-dot{ border-color:var(--success); background:var(--success); color:#fff; }
.order-timeline .tl-step.canceled .tl-dot{ border-color:var(--danger); background:var(--danger); color:#fff; }
.order-timeline span{ font-size:.78rem; font-weight:700; color:var(--gray-600); }

.order-card{ display:flex; align-items:center; justify-content:space-between; padding:20px; gap:16px; flex-wrap:wrap; }
.status-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.status-tabs a{ padding:9px 18px; border-radius:99px; font-size:.85rem; font-weight:700; background:#fff; border:1.5px solid var(--gray-200); color:var(--gray-600); }
.status-tabs a.active{ background:var(--dark); border-color:var(--dark); color:#fff; }

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-wrap{ min-height:calc(100vh - var(--header-h)); display:grid; grid-template-columns:1fr 1fr; }
.auth-visual{ background:linear-gradient(150deg,var(--secondary),var(--dark)); position:relative; display:flex; align-items:center; justify-content:center; padding:50px; color:#fff; overflow:hidden; }
.auth-visual h2{ font-size:1.8rem; margin-bottom:14px; }
.auth-visual p{ color:#dcc9bf; max-width:380px; }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:50px 24px; }
.auth-box{ width:100%; max-width:400px; }
.auth-box h1{ font-size:1.6rem; font-weight:800; margin-bottom:8px; }
.auth-box > p{ color:var(--gray-600); margin-bottom:28px; font-size:.9rem; }
.auth-switch{ text-align:center; margin-top:20px; font-size:.88rem; color:var(--gray-600); }
.auth-switch a{ color:var(--primary-dark); font-weight:700; }

/* ==========================================================================
   Dashboard (merged profile + account)
   ========================================================================== */
.dash-layout{ display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start; }
.dash-side{ position:sticky; top:calc(var(--header-h) + 16px); text-align:center; padding:28px 18px; }
.dash-avatar{ width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 14px; border:3px solid var(--primary-light); }
.dash-nav{ text-align:right; margin-top:20px; }
.dash-nav button{ width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); font-weight:700; font-size:.88rem; color:var(--gray-800); margin-bottom:4px; transition:all .2s; }
.dash-nav button:hover{ background:var(--gray-50); }
.dash-nav button.active{ background:var(--primary-light); color:var(--primary-dark); }
.dash-nav button.danger{ color:var(--danger); }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.stat-card{ padding:22px; text-align:center; }
.stat-card b{ display:block; font-size:1.7rem; color:var(--secondary); }
.stat-card span{ color:var(--gray-600); font-size:.82rem; }
.dash-pane{ display:none; }
.dash-pane.active{ display:block; }
.avatar-upload{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.avatar-upload img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }

/* ==========================================================================
   Contact / About
   ========================================================================== */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.info-card{ display:flex; gap:14px; padding:18px; align-items:flex-start; }
.info-card i{ width:44px; height:44px; border-radius:50%; background:var(--primary-light); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.about-block{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-bottom:60px; }
.about-block.reverse{ direction:ltr; }
.about-block.reverse > *{ direction:rtl; }
.about-block img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover; }

/* ---------- About / Contact redesign ---------- */
.about-page{ max-width:1060px; }
.about-header{ text-align:center; max-width:760px; margin:0 auto 34px; }
.about-header .section-title{ display:inline-block; margin-bottom:8px; }
.about-flow{ margin-top:8px; }
.about-flow-section{ display:block; overflow:hidden; margin-bottom:38px; }
.about-flow-image{ float:right; width:min(46%,520px); aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); margin:0 0 22px 38px; }
.about-flow-copy{ direction:rtl; }
.about-flow-copy h2{ font-size:1.55rem; font-weight:800; line-height:1.5; margin:6px 0 14px; }
.about-flow-text{ color:var(--gray-700); font-size:.98rem; line-height:2.18; text-align:justify; }
.about-flow-text p{ margin:0 0 12px; }
.about-flow-section::after{ content:""; display:block; clear:both; }
.about-flow-extra{ padding-top:4px; border-top:1px solid var(--gray-100); }
.contact-section-head{ text-align:center; max-width:760px; margin:56px auto 28px; }
.contact-section-head .section-title{ display:inline-block; margin-bottom:8px; }
.contact-panels{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.contact-form-card, .contact-map-card{ min-height:470px; }
.contact-form-card{ padding:26px; }
.contact-form-compact{ display:flex; flex-direction:column; gap:12px; height:100%; }
.contact-form-compact .form-row{ gap:12px; }
.contact-form-compact .field{ margin-bottom:0; }
.contact-form-compact .field textarea{ min-height:84px; }
.contact-form-compact .btn{ margin-top:auto; }
.contact-map-card{ padding:16px; display:flex; flex-direction:column; overflow:hidden; }
.contact-map-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 8px 14px; }
.contact-map-head .eyebrow{ margin-bottom:3px; }
.contact-map-head h3{ margin:0; font-size:1.12rem; font-weight:800; }
.map-status{ display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:999px; background:var(--primary-light); color:var(--primary-dark); font-size:.78rem; font-weight:700; white-space:nowrap; }
.contact-map-frame{ flex:1; min-height:380px; border-radius:var(--radius); overflow:hidden; background:var(--gray-100); border:1px solid var(--gray-100); }
.contact-map-frame iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; }
.contact-info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px; margin-top:22px; }
.contact-info-grid .info-card{ background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px; }
.contact-info-grid .info-card p{ color:var(--gray-600); font-size:.88rem; margin:4px 0 0; line-height:1.8; }

/* ==========================================================================
   Invoice (print friendly)
   ========================================================================== */
.invoice-sheet{ max-width:800px; margin:0 auto; background:#fff; padding:44px; border-radius:var(--radius); box-shadow:var(--shadow); }
.invoice-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--gray-100); padding-bottom:24px; margin-bottom:24px; }
.invoice-table{ width:100%; border-collapse:collapse; margin:20px 0; }
.invoice-table th{ background:var(--gray-50); text-align:right; padding:12px; font-size:.82rem; }
.invoice-table td{ padding:12px; border-bottom:1px solid var(--gray-100); font-size:.88rem; }
@media print{ .header-wrap,.site-footer,.no-print{ display:none !important; } body{ padding-top:0; } }

/* ==========================================================================
   404
   ========================================================================== */
.error-page{ min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 20px; }
.error-page .code{ font-size:6rem; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .main-nav, .header-search-desktop-only{ display:none; }
  .mobile-toggle{ display:flex; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .product-grid-4{ grid-template-columns:repeat(3,1fr); }
  .pd-layout{ grid-template-columns:1fr; gap:14px; }
  .pd-thumbs{ position:static; flex-direction:row; overflow-x:auto; order:2; }
  .pd-thumbs img{ width:64px; height:64px; flex-shrink:0; aspect-ratio:auto; }
  .pd-gallery-main{ position:static; order:1; }
  .pd-info{ order:3; }
  .cart-layout{ grid-template-columns:1fr; }
  .dash-layout{ grid-template-columns:1fr; }
  .dash-side{ position:static; }
  .about-block, .about-block.reverse{ grid-template-columns:1fr; direction:rtl; }
  .contact-layout{ grid-template-columns:1fr; }
  .about-flow-image{ width:48%; margin-left:24px; }
  .contact-panels{ gap:18px; }
  .auth-visual{ display:none; }
  .auth-wrap{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-strip{ grid-template-columns:repeat(2,1fr); }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  body{ padding-bottom:64px; }
  .bottom-nav{ display:flex; position:fixed; bottom:0; inset-inline:0; height:60px; background:#fff; border-top:1px solid var(--gray-100); z-index:900; box-shadow:0 -4px 16px rgba(0,0,0,.05); }
  .bottom-nav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:.66rem; color:var(--gray-600); position:relative; }
  .bottom-nav a.active{ color:var(--primary-dark); }
  .bottom-nav a i{ font-size:1.1rem; }
}
@media (max-width:520px){
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .container{ padding:0 16px; }
  .section{ padding:44px 0; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .cta-banner{ padding:32px 22px; flex-direction:column; text-align:center; }
  .footer-top{ grid-template-columns:1fr; padding:40px 0 20px; gap:26px; }
  .size-list-wrap{ max-height:150px; }
  .pd-price-box{ flex-wrap:wrap; row-gap:6px; }
}

/* ==========================================================================
   Homepage v2 — full-bleed hero / bento featured / image category tiles
   ========================================================================== */
.hero-full{ position:relative; min-height:600px; display:flex; align-items:center; overflow:hidden; clip-path:polygon(0 0,100% 0,100% 92%,0 100%); margin-bottom:-40px; }
.hero-full .hero-bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(135deg,var(--dark),#3a2a1f); }
.hero-full .hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform 10s linear; }
.hero-full:hover .hero-bg img{ transform:scale(1.1); }
.hero-full .hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(32,26,21,.94) 8%, rgba(32,26,21,.72) 45%, rgba(32,26,21,.25) 90%); }
.hero-full .container{ position:relative; z-index:1; padding-top:80px; padding-bottom:110px; }
.hero-full .hero-inner{ max-width:600px; color:#fff; }
.hero-full .eyebrow{ background:rgba(255,255,255,.12); color:var(--primary); backdrop-filter:blur(6px); }
.hero-full h1{ font-size:clamp(2.2rem,4.4vw,3.5rem); font-weight:800; line-height:1.32; margin-bottom:18px; color:#fff; animation:fade-up .8s var(--ease) both; }
.hero-full h1 span{ background:linear-gradient(100deg,var(--primary),#e8c48f); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-full p{ color:#d9cfc0; font-size:1.05rem; margin-bottom:30px; max-width:480px; animation:fade-up .8s .1s var(--ease) both; }
.hero-full .hero-actions{ animation:fade-up .8s .2s var(--ease) both; }
.hero-full .hero-stats{ margin-top:38px; animation:fade-up .8s .3s var(--ease) both; }
.hero-full .hero-stat b{ color:#fff; } .hero-full .hero-stat span{ color:#b3a596; }
.hero-full .hero-stat{ position:relative; padding-inline-start:16px; }
.hero-full .hero-stat::before{ content:''; position:absolute; inset-inline-start:0; top:4px; bottom:4px; width:2px; background:var(--primary); }

.bento-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:20px; }
.bento-grid .product-card{ display:flex; flex-direction:column; }
.bento-grid .product-card.big{ grid-column:span 2; grid-row:span 3; }
.bento-grid .product-card.big .product-thumb{ flex:1; aspect-ratio:auto; }
.bento-grid .product-card:not(.big){ grid-column:span 2; grid-row:span 3; }
@media (min-width:900px){ .bento-grid .product-card:not(.big){ grid-column:span 1; } }
.bento-grid .product-card .product-body{ margin-top:auto; }

.cat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:18px; }
.cat-tile{ position:relative; border-radius:20px; overflow:hidden; display:flex; align-items:flex-end; padding:20px; color:#fff; font-weight:800; font-size:1.05rem; transition:transform .4s var(--ease); }
.cat-tile:hover{ transform:translateY(-6px); }
.cat-tile.large{ grid-column:span 2; grid-row:span 2; font-size:1.3rem; }
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); z-index:0; }
.cat-tile:hover img{ transform:scale(1.08); }
.cat-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(32,26,21,.85),rgba(32,26,21,.05) 60%); z-index:1; }
.cat-tile span{ position:relative; z-index:2; display:flex; align-items:center; gap:10px; }
.cat-tile span i{ color:var(--primary); }

.trust-banner{ background:var(--dark); border-radius:0; }
.trust-banner .container{ padding:40px 24px; }
.trust-banner .trust-strip{ }
.trust-banner .trust-item i{ background:rgba(255,255,255,.08); color:var(--primary); }
.trust-banner .trust-item b{ color:#fff; } .trust-banner .trust-item p{ color:#b3a596; }

@media (max-width:1024px){
  .hero-full{ clip-path:none; margin-bottom:0; }
  .bento-grid{ grid-template-columns:repeat(2,1fr); }
  .bento-grid .product-card.big{ grid-column:span 2; grid-row:span 2; }
  .cat-tiles{ grid-template-columns:repeat(2,1fr); }
  .cat-tile.large{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:560px){
  .bento-grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .bento-grid .product-card, .bento-grid .product-card.big{ grid-column:span 1; grid-row:span 2; }
}
/* ===================== بنر «به سبد اضافه شد» ===================== */
.cart-banner{
  position:fixed; top:calc(var(--header-h, 72px) + 10px); right:16px; left:16px; z-index:2100;
  max-width:460px; margin:0 auto;
  display:flex; align-items:stretch; gap:0;
  background:#fff; border-radius:14px; box-shadow:var(--shadow-lg);
  border:1px solid var(--gray-100);
  transform:translateY(-140%); opacity:0; pointer-events:none;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.cart-banner.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cart-banner-main{
  flex:1; display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:none; border:none; cursor:pointer; text-align:right; font-family:inherit;
}
.cart-banner-main i.fa-circle-check{ color:var(--success); font-size:1.2rem; }
.cart-banner-main span:first-of-type{ font-weight:700; font-size:.85rem; color:var(--dark); flex:1; }
.cart-banner-cta{ display:flex; align-items:center; gap:6px; color:var(--primary-dark); font-size:.8rem; font-weight:700; white-space:nowrap; }
.cart-banner-dismiss{
  width:44px; flex-shrink:0; background:none; border:none; border-inline-start:1px solid var(--gray-100);
  color:var(--gray-500); cursor:pointer; font-size:1rem;
}
.cart-banner-dismiss:hover{ color:var(--danger); }

/* ===================== مودال تکمیل خرید سریع ===================== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,16,12,.55); z-index:2200;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); backdrop-filter:blur(2px);
}
.modal-backdrop.open{ opacity:1; pointer-events:auto; }
.quick-checkout-modal{
  position:fixed; z-index:2210; top:50%; left:50%;
  transform:translate(-50%,-46%) scale(.97); width:min(94vw,480px); max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:18px; box-shadow:var(--shadow-lg); padding:22px;
  opacity:0; pointer-events:none; transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.quick-checkout-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.qc-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.qc-modal-head h3{ font-size:1.15rem; font-weight:800; display:flex; align-items:center; gap:8px; }
.qc-modal-note{ background:var(--primary-light); color:var(--primary-dark); border-radius:10px; padding:10px 14px; font-size:.82rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.qc-modal-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .qc-modal-form .form-row{ grid-template-columns:1fr; } }

/* سایز با قیمت دقیق */
.size-pill small{ font-weight:500; opacity:.85; margin-inline-start:2px; }

/* آیکون پیگیری در نوار شناور موبایل */
.float-track i{ }

/* ===================== پنل مدیریت اختصاصی — لینک‌های منو با آیکون بج ===================== */
.dash-nav a{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); font-weight:700; font-size:.88rem; color:var(--gray-800); margin-bottom:4px; transition:all .2s; }
.dash-nav a:hover{ background:var(--gray-50); }
.dash-nav a.active{ background:var(--primary-light); color:var(--primary-dark); }
.nav-badge{
  margin-inline-start:auto; background:var(--danger); color:#fff; font-size:.7rem; font-weight:800;
  border-radius:999px; padding:2px 8px; min-width:20px; text-align:center; line-height:1.5;
}

/* ===================== پاسخ مدیریت زیر نظر کاربر ===================== */
.admin-reply-box{
  background:var(--primary-light); border-radius:10px; padding:12px 16px; margin-top:10px;
  border-inline-start:3px solid var(--primary);
}
.admin-reply-box b{ color:var(--primary-dark); font-size:.82rem; display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.admin-reply-box p{ color:var(--gray-800); font-size:.86rem; line-height:1.8; margin:0; }

/* ===================== جعبه‌های اطلاع‌رسانی (alert) ===================== */
.alert{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:12px; font-size:.86rem; }
.alert-info{ background:var(--primary-light); color:var(--primary-dark); font-weight:600; }

/* ===================== گفتگوی تیکت پشتیبانی ===================== */
.ticket-thread{ display:flex; flex-direction:column; gap:14px; max-height:520px; overflow-y:auto; }
.ticket-msg{ max-width:82%; padding:12px 16px; border-radius:14px; background:var(--gray-50); }
.ticket-msg.user{ align-self:flex-end; background:var(--gray-50); }
.ticket-msg.admin{ align-self:flex-start; background:var(--primary-light); }
.ticket-msg-head{ display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:.78rem; }
.ticket-msg-head b{ color:var(--dark); }
.ticket-msg-head span{ color:var(--gray-500); }
.ticket-msg p{ color:var(--gray-800); font-size:.88rem; line-height:1.8; margin:0; }
@media (max-width:640px){ .ticket-msg{ max-width:100%; } }

/* ===================== استپر عددی (+ / -) برای فیلدهای عددی ===================== */
.stepper-input{ display:flex; align-items:center; gap:8px; }
.stepper-input input[type=number]{ text-align:center; -moz-appearance:textfield; }
.stepper-input input[type=number]::-webkit-outer-spin-button,
.stepper-input input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper-btn{
  flex-shrink:0; width:38px; height:38px; border-radius:8px; border:1.5px solid var(--gray-200);
  background:#fff; color:var(--primary-dark); font-size:1.1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1; transition:.15s;
}
.stepper-btn:hover{ background:var(--primary-light); border-color:var(--primary); }
.stepper-btn:active{ transform:scale(.92); }

/* ===================== ردیف‌های قابل افزودن/حذف در فرم‌های ادمین (رنگ/سایز/عکس/مشخصات) ===================== */
.formset-row{ position:relative; }
.formset-row.will-remove{ opacity:.45; }
.formset-add-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:10px 18px;
  border-radius:var(--radius-sm); border:1.5px dashed var(--primary); background:var(--primary-light);
  color:var(--primary-dark); font-weight:700; font-size:.85rem; cursor:pointer; transition:.15s;
}
.formset-add-btn:hover{ background:var(--primary); color:#fff; }
.formset-row-remove-btn{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--danger);
  background:#fdeceb; color:var(--danger); font-size:1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.formset-row-remove-btn:hover{ background:var(--danger); color:#fff; }
.discount-percent-box{ display:flex; align-items:center; gap:6px; }
.discount-percent-box input{ width:80px !important; }

/* --- fix: shop toolbar sticky --- */
.shop-toolbar{ position:-webkit-sticky; position:sticky; top:var(--header-h); z-index:50; }

/* ===================== صفحه اصلی (Home) ===================== */
/* ---------- Bento Hero ---------- */
.hero-bento{ padding:28px 0 48px; }
.bento-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; height:560px; animation:fade-up .8s var(--ease) both; }
.bento-item{ position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden; background:var(--gray-100); box-shadow:var(--shadow); }
.bento-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.bento-item:hover img{ transform:scale(1.06); }
.bento-item:empty, .bento-item:not(:has(img)){ display:flex; align-items:center; justify-content:center; }
.bento-item:not(:has(img))::after{ content:'\f542'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:2.2rem; color:var(--primary-dark); opacity:.5; }
.bento-1{ grid-column:1; grid-row:1 / span 2; }
.bento-2{ grid-column:2; grid-row:1; }
.bento-3{ grid-column:3; grid-row:1; }
.bento-4{ grid-column:2 / span 2; grid-row:2; }
@media (max-width:768px){
    .hero-bento{ padding:16px 0 32px; }
    .bento-grid{ height:auto; grid-template-columns:1fr 1fr; grid-template-rows:none; gap:10px; }
    .bento-1{ grid-column:1 / -1; grid-row:auto; height:220px; }
    .bento-2, .bento-3{ grid-column:span 1; grid-row:auto; height:150px; }
    .bento-4{ grid-column:1 / -1; grid-row:auto; height:170px; }
}

/* ---------- Trust strip → کارت‌های شیک ---------- */
.trust-strip{ grid-template-columns:repeat(4,1fr); gap:18px; }
.trust-item{ background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius); padding:20px 18px; box-shadow:var(--shadow-sm); transition:all .3s var(--ease); }
.trust-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--primary-light); }
@media (max-width:576px){ .trust-item{ padding:16px; } }

/* ---------- امتیاز روی کارت محصول ---------- */
.pc-rating{ display:flex; align-items:center; gap:5px; font-size:.74rem; color:#fff; margin-bottom:5px; }
.pc-rating i{ color:#ffb52e; font-size:.68rem; }
.pc-rating span{ color:rgba(255,255,255,.6); }

/* ---------- بخش «چرا هورفیکس» ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat-card{ background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:28px 18px; text-align:center; box-shadow:var(--shadow-sm); transition:all .3s var(--ease); }
.stat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--primary-light); }
.stat-card i{ font-size:1.6rem; color:var(--primary-dark); margin-bottom:12px; display:inline-block; }
.stat-card b{ display:block; font-size:1.9rem; font-weight:800; color:var(--secondary); margin-bottom:4px; }
.stat-card span{ color:var(--gray-600); font-size:.84rem; }
@media (max-width:768px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- دسته‌بندی‌ها با عکس واقعی ---------- */
.cat-grid-v2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; }
.cat-card-v2{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:block; background:var(--gray-100); transition:all .3s var(--ease); }
.cat-card-v2:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cat-card-v2 img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.cat-card-v2:hover img{ transform:scale(1.08); }
.cat-card-v2-empty{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--primary-light); }
.cat-card-v2-empty i{ font-size:2rem; color:var(--primary-dark); }
.cat-card-v2-info{ position:absolute; inset:auto 0 0 0; padding:14px 14px 12px; background:linear-gradient(0deg, rgba(32,26,21,.88), rgba(32,26,21,0) 80%); color:#fff; }
.cat-card-v2-info span{ display:block; font-weight:700; font-size:.94rem; }
.cat-card-v2-info small{ color:rgba(255,255,255,.72); font-size:.72rem; }

/* ---------- بنر CTA جذاب‌تر ---------- */
.cta-banner{ position:relative; overflow:hidden; }
.cta-banner::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 88% 15%, rgba(255,255,255,.14), transparent 55%); pointer-events:none; }
.cta-banner .cta-icon{ position:absolute; left:26px; top:50%; transform:translateY(-50%); font-size:2.8rem; opacity:.16; }
@media (max-width:768px){ .cta-banner .cta-icon{ display:none; } }

/* ---------- اسلایدر نظرات مشتریان ---------- */
.testimonial-track{ display:flex; gap:18px; overflow-x:auto; padding:4px 4px 12px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.testimonial-card{ scroll-snap-align:start; flex:0 0 300px; background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }
.testimonial-stars{ color:#ffb52e; font-size:.82rem; margin-bottom:12px; }
.testimonial-stars .fa-regular{ color:var(--gray-200); }
.testimonial-comment{ color:var(--gray-800); font-size:.88rem; line-height:1.9; margin-bottom:16px; min-height:76px; }
.testimonial-author b{ display:block; font-size:.86rem; }
.testimonial-author span{ color:var(--gray-600); font-size:.75rem; }

/* ==========================================================================
   Product list / filters — shared because product listing can be PJAX-loaded
   ========================================================================== */
/* ==========================================================================
   Product list / filters — CSS مخصوص همین صفحه
   ========================================================================== */
.shop-hero{ background:linear-gradient(120deg,var(--dark),#3a2a1f); padding:44px 0; margin-bottom:0; }
.cat-pillbar{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:22px; scrollbar-width:none; }
.cat-pillbar::-webkit-scrollbar{ display:none; }
.pill{ flex-shrink:0; padding:10px 20px; border-radius:99px; background:#fff; border:1.5px solid var(--gray-200); font-weight:700; font-size:.85rem; color:var(--gray-800); transition:all .2s var(--ease); }
.pill:hover{ border-color:var(--primary); color:var(--primary-dark); }
.pill.active{ background:var(--dark); border-color:var(--dark); color:#fff; }

.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
.shop-toolbar select{ padding:11px 16px; border-radius:99px; border:1.5px solid var(--gray-200); background:#fff; font-weight:600; font-size:.85rem; }
.mobile-filter-btn{ display:none; }

.filter-card{ position:fixed; inset-inline-start:12px; top:12px; bottom:12px; width:min(85vw,340px); z-index:1200; border-radius:var(--radius-lg); transform:translateX(110%); transition:transform .35s var(--ease); overflow-y:auto; overflow-x:hidden; box-shadow:var(--shadow-lg); scrollbar-width:none; -ms-overflow-style:none; }
.filter-card::-webkit-scrollbar{ display:none; width:0; height:0; }
.filter-card.open{ transform:none; }
.filter-backdrop{ position:fixed; inset:0; background:rgba(32,26,21,.5); z-index:1199; opacity:0; pointer-events:none; transition:opacity .3s; }
.filter-backdrop.open{ opacity:1; pointer-events:auto; }

.filter-group{ padding:18px 20px; border-bottom:1px solid var(--gray-100); }
.filter-group:last-child{ border-bottom:none; }
.filter-group h5{ font-size:.88rem; font-weight:700; margin-bottom:14px; }
.filter-option{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.87rem; color:var(--gray-800); cursor:pointer; }
.filter-option input[type="radio"]{
    -webkit-appearance:none; appearance:none;
    width:17px; height:17px; min-width:17px; margin:0;
    border-radius:50%; border:1.5px solid var(--gray-200);
    position:relative; cursor:pointer; transition:border-color .15s;
}
.filter-option input[type="radio"]:checked{ border-color:var(--primary); }
.filter-option input[type="radio"]:checked::after{
    content:""; position:absolute; inset:3px; border-radius:50%; background:var(--primary);
}

/* رنگ‌ها داخل این پنل کمی بزرگتر و با فاصله‌ی بهتر از هم، تا واضح دیده بشن */
.filter-card .swatches{ gap:12px; }
.filter-card .swatch{ width:28px; height:28px; box-shadow:0 0 0 1.5px rgba(32,26,21,.18); }
.filter-card .swatch.active{ box-shadow:0 0 0 2px var(--primary); }

.price-range-inputs{ display:flex; gap:10px; }
.price-range-inputs input{ width:100%; padding:9px; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm); font-size:.82rem; }

.collapsible-item[hidden]{ display:none !important; }
.show-more-btn{ margin-top:10px; width:100%; }
.show-more-btn[hidden]{ display:none !important; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
.pagination a, .pagination span{ min-width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:700; font-size:.88rem; border:1.5px solid var(--gray-200); }
.pagination .current{ background:var(--primary); border-color:var(--primary); color:#fff; }
.pagination a:hover{ border-color:var(--primary); color:var(--primary-dark); }

/* ---------- فیلتر به‌صورت پنل ثابت (position:fixed) کنار لیست محصولات — فقط در دسکتاپ ----------
   زیر ۱۰۲۵px همون رفتار قبلی (کشوی روی صفحه با دکمه‌ی «فیلتر بیشتر») حفظ می‌شه. */
@media (min-width:1025px){
    /* عرض کارت 280 + 24 فاصله از لبه‌ی کانتینر + 32 فاصله‌ی واقعی از محصولات = 336 */
    .shop-container{ padding-right:336px; }
    .shop-container .product-grid-4{ grid-template-columns:repeat(3,1fr); }
    .shop-toolbar [data-open-filter]{ display:none; }
    .filter-backdrop{ display:none; }
    .filter-card{
        transform:none;
        inset-inline-start:auto;
        right:max(24px, calc((100vw - 1240px) / 2 + 24px));
        top:calc(var(--header-h) + (var(--float-gap) * 2) + 24px);
        bottom:24px;
        width:280px;
        border-radius:var(--radius-lg);
    }
    .filter-card [data-close-filter]{ display:none; }
}

/* ============================================================================
   MOBILE RESPONSIVE HARDENING — نسخه موبایل پایدار و بدون overflow
   ============================================================================ */
@media (max-width: 820px){
  html, body{ width:100%; max-width:100%; overflow-x:hidden; }
  body{ min-width:0; padding-top:84px !important; padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important; }
  main, main > *{ min-width:0; }
  .container{ width:100%; max-width:100%; padding-inline:16px; }
  .section{ padding-block:40px; }
  .shop-toolbar{
    position:relative !important;
    top:auto !important;
    z-index:10 !important;
  }
  .cat-pillbar{
    margin-inline:-4px;
    padding-inline:4px;
  }

  /* هدر شناور موبایل */
  .header-wrap{
    top:10px;
    left:10px;
    right:10px;
    inset-inline:10px;
  }
  .site-header{
    height:64px;
    border-radius:22px;
    overflow:hidden;
  }
  .header-inner{
    min-width:0;
    padding:0 10px;
    gap:8px;
  }
  .logo{ min-width:0; max-width:34%; gap:7px; font-size:1rem; }
  .logo .logo-mark{ width:34px; height:34px; border-radius:10px; font-size:.9rem; }
  .logo .logo-img{ width:auto; height:32px; max-width:120px; }
  .mobile-header-search{ min-width:0; margin:0 4px 0 6px; }
  .mobile-header-search input{ min-width:0; height:42px; padding:9px 12px; font-size:.82rem; }
  .mobile-header-search button{ width:32px; height:32px; margin-inline-start:7px; margin-inline-end:0; }

  /* نوار ناوبری شناور، چهار طرف گرد */
  .mobile-bottom-nav{
    display:flex;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto;
    height:66px;
    padding:5px;
    border:1px solid var(--gray-200);
    border-radius:22px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 12px 34px rgba(32,26,21,.15);
    gap:3px;
    justify-content:stretch;
  }
  .mobile-bottom-nav .nav-item{
    flex:1 1 0;
    min-width:0;
    height:56px;
    padding:4px 3px;
    border-radius:17px;
    gap:1px;
    font-size:.64rem;
    font-weight:600;
  }
  .mobile-bottom-nav .nav-item i{ font-size:1.18rem; }
  .mobile-bottom-nav .nav-item.active{
    background:var(--primary-light);
    color:var(--primary-dark);
  }
  .mobile-bottom-nav .nav-item:active{ transform:scale(.97); }
  .mobile-bottom-nav .nav-item .cart-badge{
    top:3px;
    right:50%;
    transform:translateX(18px);
    min-width:17px;
    height:17px;
    font-size:.57rem;
  }

  /* جلوگیری از بیرون زدن گریدها و پنل‌ها */
  .product-grid,
  .product-grid-4,
  .cat-grid,
  .cat-grid-v2,
  .trust-strip,
  .stats-grid,
  .stat-grid,
  .hero-grid,
  .contact-layout,
  .about-block,
  .dash-layout,
  .cart-layout,
  .auth-wrap,
  .pd-layout{
    width:100%;
    min-width:0;
  }
  .product-grid > *,
  .product-grid-4 > *,
  .cat-grid > *,
  .cat-grid-v2 > *,
  .trust-strip > *,
  .stats-grid > *,
  .stat-grid > *,
  .hero-grid > *,
  .contact-layout > *,
  .about-block > *,
  .dash-layout > *,
  .cart-layout > *,
  .auth-wrap > *,
  .pd-layout > *{ min-width:0; max-width:100%; }

  .section-head{
    align-items:flex-start;
    margin-bottom:22px;
  }
  .section-title{ font-size:1.35rem; }
  .section-sub{ font-size:.82rem; }
  .section-head .btn{ width:auto; max-width:100%; }

  /* کارت‌های آماری */
  .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat-card{ padding:18px 10px; border-radius:18px; }
  .stat-card b{ font-size:1.55rem; }

  /* هیرو و بنـتو */
  .hero-bento{ padding:8px 0 24px; }
  .bento-grid{ width:100%; max-width:100%; gap:9px; }
  .bento-1{ height:200px; }
  .bento-2, .bento-3{ height:128px; }
  .bento-4{ height:150px; }

  /* فرم‌ها */
  .form-row{ grid-template-columns:minmax(0,1fr); }
  .field, .field > *, .field input, .field textarea, .field select{ max-width:100%; }
  .btn{ max-width:100%; }

  /* کارت‌های سفارش / داشبورد */
  .order-card{ align-items:flex-start; }
  .dash-layout{ gap:14px; }
  .dash-side, .dash-pane, .card-pad{ min-width:0; }

  /* جدول‌ها روی موبایل اسکرول افقی کنترل‌شده داشته باشند */
  table{ max-width:100%; }
  .card:has(table){ overflow-x:auto; }
  .card:has(table) table{ min-width:620px; }

  /* تصاویر و ورودی‌های انتخاب فایل */
  img, video, iframe{ max-width:100%; }
  input, textarea, select, button{ max-width:100%; }
}

@media (max-width:520px){
  .container{ padding-inline:12px; }
  .section{ padding-block:34px; }
  .section-head .btn{ font-size:.78rem; padding:9px 14px; }
  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-body{ padding:12px 11px 13px; }
  .product-name{ font-size:.84rem; }
  .price-new{ font-size:.95rem; }
  .product-card.pc-overlay .product-overlay{ padding:9px 9px 10px; }
  .product-card.pc-overlay .product-overlay .product-name{ font-size:.78rem; }
  .product-card.pc-overlay .product-overlay .price-new{ font-size:.86rem; }
  .quick-add-fab{ width:32px; height:32px; bottom:7px; left:7px; font-size:.78rem; }

  .trust-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .trust-item{ padding:14px 10px; }
  .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .cat-grid-v2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }

  .hero-full{ min-height:470px; margin-bottom:-20px; clip-path:polygon(0 0,100% 0,100% 96%,0 100%); }
  .hero-full .container{ padding-top:46px; padding-bottom:76px; }
  .hero-full h1{ font-size:clamp(1.8rem,8vw,2.35rem); }
  .hero-full p{ font-size:.9rem; }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 0; min-width:0; }

  .pd-layout{ gap:10px; }
  .pd-gallery-main img{ border-radius:16px; }
  .invoice-sheet{ padding:20px 12px; }

  .mobile-bottom-nav{ left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); border-radius:20px; height:64px; padding:4px; }
  .mobile-bottom-nav .nav-item{ height:54px; border-radius:16px; font-size:.6rem; }
  .mobile-bottom-nav .nav-item i{ font-size:1.1rem; }
}

@media (max-width:360px){
  body{ padding-top:80px !important; padding-bottom:calc(86px + env(safe-area-inset-bottom)) !important; }
  .header-wrap{ left:8px; right:8px; inset-inline:8px; }
  .site-header{ height:60px; border-radius:20px; }
  .header-inner{ padding:0 8px; }
  .logo{ max-width:30%; }
  .logo .logo-img{ max-width:92px; height:28px; }
  .mobile-header-search input{ font-size:.76rem; padding-inline:10px; }
  .mobile-bottom-nav{ left:7px; right:7px; bottom:calc(7px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav .nav-item span{ font-size:.58rem; }
}

@media (max-width:640px){
  .about-header{ margin-bottom:26px; }
  .about-flow-image{ width:44%; margin:0 0 18px 18px; }
  .about-flow-copy h2{ font-size:1.28rem; }
  .about-flow-text{ font-size:.92rem; line-height:2.02; }
  .contact-section-head{ margin-top:42px; }
  .contact-panels{ grid-template-columns:1fr; }
  .contact-form-card, .contact-map-card{ min-height:0; }
  .contact-form-card{ padding:20px; }
  .contact-map-frame, .contact-map-frame iframe{ min-height:300px; }
  .contact-info-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Public order tracking — search + visual timeline
   ========================================================================== */
.track-page-wrap{ max-width:980px; }
.track-search-card{ padding:28px; overflow:hidden; }
.track-search-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.track-search-head h1{ font-size:1.45rem; margin:5px 0 7px; font-weight:800; }
.track-search-head p{ margin:0; color:var(--gray-600); font-size:.9rem; }
.track-search-icon{ width:54px; height:54px; flex:0 0 54px; border-radius:17px; display:flex; align-items:center; justify-content:center; background:var(--primary-light); color:var(--primary-dark); font-size:1.25rem; }
.track-search-form{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:end; }
.track-search-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.track-search-fields .field{ margin-bottom:0; }
.track-search-btn{ min-width:170px; height:48px; }
.track-form-error{ grid-column:1/-1; margin-top:-2px; }
.track-result-card{ margin-top:22px; padding:28px; }
.track-result-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--gray-100); }
.track-result-head h2{ margin:4px 0 5px; font-size:1.25rem; }
.track-result-head p{ margin:0; color:var(--gray-600); font-size:.83rem; }
.public-order-timeline{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:relative; margin:38px 0 34px; }
.public-tl-line{ position:absolute; top:20px; right:10%; left:10%; height:3px; background:var(--gray-200); z-index:0; }
.public-tl-step{ position:relative; z-index:1; display:flex; align-items:center; flex-direction:column; gap:7px; text-align:center; min-width:0; }
.public-tl-dot{ width:42px; height:42px; border-radius:50%; background:#fff; border:3px solid var(--gray-200); color:var(--gray-400); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 5px #fff; }
.public-tl-step b{ font-size:.8rem; color:var(--gray-700); }
.public-tl-step span{ font-size:.71rem; color:var(--gray-500); }
.public-tl-step.done .public-tl-dot{ border-color:var(--success); background:var(--success); color:#fff; }
.public-tl-step.current .public-tl-dot{ border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark); box-shadow:0 0 0 5px #fff,0 0 0 8px rgba(197,145,59,.12); }
.public-tl-step.current b{ color:var(--primary-dark); }
.track-details-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.track-details-grid > div{ background:var(--gray-50); border:1px solid var(--gray-100); border-radius:15px; padding:13px 14px; min-width:0; }
.track-details-grid span{ display:block; color:var(--gray-500); font-size:.73rem; margin-bottom:5px; }
.track-details-grid b{ display:block; color:var(--gray-800); font-size:.82rem; overflow-wrap:anywhere; }
.track-canceled-box{ display:flex; align-items:center; gap:12px; padding:18px; margin:24px 0; border-radius:16px; background:rgba(220,53,69,.07); color:var(--danger); }
.track-canceled-box i{ font-size:1.25rem; }
.track-canceled-box div{ display:flex; flex-direction:column; gap:3px; }
.track-canceled-box span{ color:var(--gray-600); font-size:.8rem; }
.track-multi-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin:38px 2px 16px; }
.track-multi-head h2{ font-size:1.15rem; margin:4px 0 0; }
.track-count{ background:var(--gray-100); color:var(--gray-700); border-radius:999px; padding:8px 12px; font-size:.76rem; font-weight:700; white-space:nowrap; }
.track-orders-list{ display:grid; gap:12px; }
.track-order-card{ padding:18px 20px; }
.track-order-top,.track-order-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.track-order-top > div{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.track-order-top b{ font-size:.92rem; }
.track-order-top span{ font-size:.76rem; color:var(--gray-500); }
.mini-timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; position:relative; align-items:center; margin:17px 5px 14px; }
.mini-timeline::before{ content:""; position:absolute; right:8px; left:8px; top:50%; height:2px; background:var(--gray-200); transform:translateY(-50%); }
.mini-timeline span,.mini-timeline i{ width:10px; height:10px; border-radius:50%; background:var(--gray-200); display:block; justify-self:center; position:relative; z-index:1; }
.mini-timeline .done{ background:var(--success); }
.track-order-bottom b{ color:var(--secondary); font-size:.88rem; }
.track-order-bottom span{ color:var(--gray-500); font-size:.76rem; }
.track-empty{ text-align:center; margin-top:22px; padding:50px 20px; }
.track-empty i{ font-size:2rem; color:var(--gray-400); margin-bottom:14px; }
.track-empty h3{ margin:0 0 8px; font-size:1.05rem; }
.track-empty p{ margin:0; color:var(--gray-500); font-size:.83rem; }

@media (max-width:820px){
  .track-page-wrap{ max-width:100%; }
  .track-search-card,.track-result-card{ padding:20px; }
  .track-search-form{ grid-template-columns:1fr; }
  .track-search-btn{ width:100%; }
  .track-details-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:520px){
  .track-search-head{ gap:12px; }
  .track-search-head h1{ font-size:1.17rem; }
  .track-search-head p{ font-size:.78rem; }
  .track-search-icon{ width:46px; height:46px; flex-basis:46px; border-radius:14px; }
  /* دو ورودی عمداً کنار هم می‌مانند */
  .track-search-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .track-search-fields label{ font-size:.7rem; }
  .track-search-fields input{ min-width:0; padding-inline:9px; font-size:.72rem; }
  .track-search-fields input::placeholder{ font-size:.66rem; }
  .public-order-timeline{ margin:30px -3px 26px; }
  .public-tl-line{ right:7%; left:7%; }
  .public-tl-dot{ width:34px; height:34px; font-size:.72rem; }
  .public-tl-step b{ font-size:.68rem; }
  .public-tl-step span{ font-size:.61rem; }
  .track-details-grid{ gap:8px; }
  .track-details-grid > div{ padding:11px 10px; }
  .track-multi-head{ align-items:flex-start; margin-top:30px; }
  .track-order-card{ padding:15px; }
  .track-order-bottom{ align-items:flex-start; flex-direction:column; }
}


/* Product list: search, capped category/options lists, rounded mobile menu */
.product-list-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0 0 16px;align-items:center}
.product-list-search-input{min-width:0;height:48px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1.5px solid var(--gray-200);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.product-list-search-input>i{color:var(--gray-500)}
.product-list-search-input input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:.88rem}
.product-list-search-input a{color:var(--gray-500);display:flex}
.product-list-search>.btn{height:48px;min-width:104px}
.category-pills-list{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.cat-pillbar>[data-show-more]{width:auto;margin:0}
.filter-option-search{display:flex;align-items:center;gap:8px;margin:-2px 0 9px;padding:8px 10px;border:1px solid var(--gray-200);border-radius:12px;background:var(--gray-50)}
.filter-option-search i{color:var(--gray-500);font-size:.78rem}
.filter-option-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:.78rem}
.mobile-drawer-panel{top:12px;bottom:12px;right:12px;border-radius:24px;box-shadow:var(--shadow-lg)}
@media(max-width:820px){.product-list-search{grid-template-columns:minmax(0,1fr) auto}.product-list-search>.btn{min-width:88px;padding-inline:14px}.mobile-drawer-panel{top:10px;bottom:10px;right:10px;width:min(84vw,320px);border-radius:22px}}
@media(max-width:520px){.product-list-search{gap:7px}.product-list-search-input{height:44px;border-radius:14px;padding-inline:10px}.product-list-search-input input{font-size:.78rem}.product-list-search>.btn{height:44px;min-width:70px;font-size:.74rem;padding-inline:9px}.mobile-drawer-panel{top:8px;bottom:8px;right:8px;border-radius:20px}}


/* Product detail v3 — product-first layout */
.pd-page-section{padding-top:28px}.pd-page-wrap{max-width:1180px}.pd-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--gray-500);font-size:.78rem;margin-bottom:18px;overflow:auto;white-space:nowrap}.pd-breadcrumb a{color:var(--gray-600)}.pd-breadcrumb i{font-size:.6rem;color:var(--gray-400)}.pd-hero-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:28px;align-items:start}.pd-gallery-area{min-width:0}.pd-main-image-wrap{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:var(--gray-50);box-shadow:var(--shadow);border:1px solid var(--gray-100)}.pd-main-image-wrap img{width:100%;height:100%;display:block;object-fit:cover}.pd-image-discount{position:absolute;top:16px;right:16px;background:var(--danger);color:#fff;padding:8px 12px;border-radius:999px;font-size:.72rem;font-weight:800}.pd-image-zoom{position:absolute;left:14px;bottom:14px;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--gray-700)}.pd-thumbs-row{display:flex;gap:9px;overflow-x:auto;padding:12px 2px 3px}.pd-thumb{flex:0 0 74px;width:74px;height:74px;border-radius:14px;overflow:hidden;border:2px solid transparent;background:var(--gray-50);padding:0}.pd-thumb img{width:100%;height:100%;object-fit:cover;opacity:.65}.pd-thumb.active{border-color:var(--primary)}.pd-thumb.active img,.pd-thumb:hover img{opacity:1}.pd-buy-card{background:#fff;border:1px solid var(--gray-100);border-radius:24px;padding:26px;box-shadow:var(--shadow);position:sticky;top:calc(var(--header-h) + 18px)}.pd-buy-card .cat-link{font-size:.78rem;font-weight:800;color:var(--primary-dark)}.pd-buy-card h1{font-size:clamp(1.55rem,2.8vw,2.1rem);line-height:1.45;margin:8px 0 10px;font-weight:850}.pd-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--gray-500);font-size:.76rem;margin-bottom:16px}.pd-meta .rating{color:var(--primary-dark);display:inline-flex;align-items:center;gap:2px}.pd-short-description{color:var(--gray-600);font-size:.86rem;line-height:2;margin:0 0 18px}.pd-buy-price{display:flex;align-items:baseline;gap:12px;padding:18px 0;border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);margin-bottom:16px}.pd-buy-price .price-new{font-size:1.95rem;font-weight:900}.pd-buy-price .price-old{text-decoration:line-through;color:var(--gray-400);font-size:.9rem}.pd-stock{display:flex;align-items:center;gap:7px;font-size:.78rem;padding:10px 12px;border-radius:12px;margin-bottom:18px}.pd-stock.ok{color:var(--success);background:rgba(25,135,84,.07)}.pd-stock.bad{color:var(--danger);background:rgba(220,53,69,.07)}.pd-stock span{color:var(--gray-600);margin-right:auto}.pd-purchase-form{display:grid;gap:16px}.pd-select-block{display:grid;gap:10px}.pd-select-label{display:flex;align-items:center;justify-content:space-between;font-size:.82rem}.pd-select-label span{color:var(--gray-400);font-size:.7rem}.pd-swatches{gap:9px}.pd-swatches .swatch{width:32px;height:32px}.pd-size-grid{display:flex;flex-wrap:wrap;gap:8px}.pd-size-grid label{margin:0}.pd-size-btn{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:40px;padding:0 13px;border:1.5px solid var(--gray-200);border-radius:12px;font-size:.8rem;font-weight:700;cursor:pointer}.opt-radio:checked+.pd-size-btn{background:var(--primary);border-color:var(--primary);color:#fff}.pd-size-btn.disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}.pd-buy-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:end}.pd-qty-wrap{display:grid;gap:7px;font-size:.72rem;color:var(--gray-500)}.pd-buy-btn{min-height:50px}.pd-favorite-form{margin-top:10px}.pd-content-nav{display:flex;gap:6px;margin-top:56px;border-bottom:1px solid var(--gray-100);overflow:auto}.pd-content-nav button{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:15px 18px;color:var(--gray-500);font-weight:800;font-size:.82rem;border-bottom:2px solid transparent}.pd-content-nav button.active{color:var(--primary-dark);border-color:var(--primary)}.pd-content-card{background:#fff;border:1px solid var(--gray-100);border-radius:20px;padding:28px;margin-top:16px;box-shadow:var(--shadow-sm)}.pd-description{color:var(--gray-700);line-height:2.25;font-size:.92rem}.pd-description p{margin:0 0 14px}.pd-info-row{padding:16px 0;border-bottom:1px solid var(--gray-100)}.pd-info-row:last-child{border-bottom:0}.pd-info-row h6{font-weight:800;margin:0 0 7px}.pd-info-row p{margin:0;color:var(--gray-600);font-size:.88rem;line-height:2}.pd-related-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:58px 0 18px}.pd-related-head h2{margin:4px 0 0;font-size:1.3rem}.pd-related-grid{margin-bottom:30px}.pd-review-form{box-shadow:none;border:1px solid var(--gray-100);margin-bottom:22px}
@media(max-width:900px){.pd-hero-layout{grid-template-columns:1fr}.pd-buy-card{position:static}.pd-gallery-area{order:1}.pd-buy-card{order:2}}
@media(max-width:560px){.pd-page-section{padding-top:18px}.pd-breadcrumb{margin-bottom:12px;font-size:.7rem}.pd-main-image-wrap{border-radius:20px}.pd-thumb{flex-basis:60px;width:60px;height:60px}.pd-buy-card{padding:19px;border-radius:20px}.pd-buy-card h1{font-size:1.35rem}.pd-buy-price .price-new{font-size:1.55rem}.pd-buy-row{grid-template-columns:1fr;}.pd-qty-wrap{display:flex;align-items:center;justify-content:space-between}.pd-buy-btn{width:100%}.pd-content-nav{margin-top:35px}.pd-content-nav button{padding:13px 12px;font-size:.74rem}.pd-content-card{padding:18px}.pd-related-head{margin-top:40px}.pd-related-head .btn{display:none}}


/* Product gallery lightbox — click to enlarge, swipe/drag between images */
.pd-lightbox{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;direction:ltr}.pd-lightbox.open{display:flex}.pd-lightbox-backdrop{position:absolute;inset:0;background:rgba(8,8,10,.86);backdrop-filter:blur(6px)}.pd-lightbox-stage{position:relative;width:min(94vw,1180px);height:min(92vh,900px);display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none}.pd-lightbox-image{display:block;max-width:calc(100% - 120px);max-height:calc(100% - 70px);width:auto;height:auto;object-fit:contain;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.35);cursor:grab}.pd-lightbox-image:active{cursor:grabbing}.pd-lightbox-close,.pd-lightbox-arrow{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);cursor:pointer}.pd-lightbox-close{top:10px;right:10px;width:44px;height:44px;border-radius:14px;font-size:1rem}.pd-lightbox-arrow{top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;font-size:.9rem}.pd-lightbox-prev{right:12px}.pd-lightbox-next{left:12px}.pd-lightbox-counter{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:7px 11px;border-radius:999px;background:rgba(0,0,0,.42);color:#fff;font-size:.74rem;z-index:2}.pd-lightbox-hint{position:absolute;bottom:10px;right:18px;color:rgba(255,255,255,.6);font-size:.68rem}.pd-lightbox-arrow[hidden]{display:none!important}.pd-lightbox-open{overflow:hidden}
@media(max-width:700px){.pd-lightbox-stage{width:100vw;height:100vh}.pd-lightbox-image{max-width:88vw;max-height:78vh;border-radius:12px}.pd-lightbox-close{top:18px;right:16px}.pd-lightbox-arrow{width:40px;height:40px}.pd-lightbox-prev{right:10px}.pd-lightbox-next{left:10px}.pd-lightbox-hint{display:none}.pd-lightbox-counter{bottom:20px}}


/* Live search + compact mobile UI */
.live-search-wrap{ position:relative; }
.live-search-results{ position:absolute; top:calc(100% + 8px); right:0; width:min(420px,90vw); max-height:420px; overflow:auto; background:#fff; border:1px solid var(--gray-100); border-radius:18px; box-shadow:var(--shadow-lg); padding:8px; display:none; z-index:1300; }
.live-search-results.open{ display:block; }
.live-search-item{ display:flex; align-items:center; gap:10px; padding:9px; border-radius:13px; color:var(--gray-800); text-decoration:none; }
.live-search-item:hover{ background:var(--gray-50); }
.live-search-item img,.live-search-placeholder{ width:44px; height:44px; border-radius:11px; object-fit:cover; flex:none; background:var(--gray-100); display:flex; align-items:center; justify-content:center; }
.live-search-item span:not(.live-search-placeholder){ display:grid; gap:3px; min-width:0; }
.live-search-item b{ font-size:.79rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-search-item small{ color:var(--primary-dark); font-size:.71rem; }
.live-search-empty{ padding:18px 12px; text-align:center; color:var(--gray-500); font-size:.82rem; }
.live-search-all{ width:100%; border:0; background:var(--gray-50); color:var(--primary-dark); border-radius:12px; padding:10px; font-size:.78rem; font-weight:700; cursor:pointer; }
@media(max-width:820px){
  body{ padding-top:64px !important; }
  .header-wrap{ top:8px !important; left:8px !important; right:8px !important; inset-inline:8px !important; }
  .site-header{ height:52px !important; border-radius:18px !important; }
  .header-inner{ height:52px !important; padding:0 8px !important; gap:6px !important; }
  .logo{ max-width:40px !important; width:40px !important; gap:0 !important; font-size:0 !important; }
  .logo .logo-text{ display:none !important; }
  .logo .logo-mark{ width:34px !important; height:34px !important; border-radius:10px !important; font-size:.82rem !important; }
  .logo .logo-img{ height:30px !important; max-width:34px !important; }
  .mobile-header-search{ margin:0 !important; min-width:0 !important; gap:5px !important; flex:1 !important; }
  .mobile-header-search input{ height:36px !important; min-width:0 !important; padding:7px 11px !important; border-radius:12px !important; font-size:.76rem !important; background:var(--gray-50) !important; }
  .mobile-header-search button{ width:30px !important; height:30px !important; margin:0 !important; font-size:.75rem !important; }
  .mobile-header-search .live-search-results{ position:fixed; top:66px; right:8px; left:8px; width:auto; max-height:55vh; border-radius:18px; }
  .mobile-bottom-nav{ left:8px !important; right:8px !important; bottom:calc(8px + env(safe-area-inset-bottom)) !important; height:56px !important; padding:3px !important; border-radius:18px !important; border:1px solid var(--gray-100) !important; box-shadow:0 10px 28px rgba(32,26,21,.14) !important; background:rgba(255,255,255,.96) !important; }
  .mobile-bottom-nav .nav-item{ height:48px !important; min-width:0 !important; padding:2px 4px !important; border-radius:14px !important; font-size:.56rem !important; gap:1px !important; }
  .mobile-bottom-nav .nav-item i{ font-size:1rem !important; }
  .mobile-bottom-nav .nav-item .cart-badge{ min-width:15px !important; height:15px !important; font-size:.5rem !important; }
  .cat-pillbar{ display:none !important; }
  .product-list-search{ margin-bottom:10px !important; }
  .shop-toolbar{ position:sticky !important; top:58px !important; margin:0 -2px 16px !important; padding:7px 2px !important; background:rgba(250,246,239,.96) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .shop-toolbar > span{ display:none !important; }
  .shop-toolbar > div{ width:100% !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; }
  .shop-toolbar [data-open-filter]{ display:flex !important; width:100% !important; justify-content:center !important; }
  .shop-toolbar select{ width:100% !important; height:40px !important; padding:7px 10px !important; font-size:.72rem !important; border-radius:12px !important; }
  .shop-toolbar .btn{ height:40px !important; padding:7px 10px !important; font-size:.72rem !important; border-radius:12px !important; }
}
@media(max-width:520px){
  body{ padding-top:62px !important; }
  .header-wrap{ top:6px !important; left:6px !important; right:6px !important; inset-inline:6px !important; }
  .site-header,.header-inner{ height:50px !important; }
  .logo{ width:34px !important; max-width:34px !important; }
  .logo .logo-mark{ width:32px !important; height:32px !important; }
  .mobile-header-search input{ height:34px !important; font-size:.72rem !important; }
  .mobile-header-search button{ width:28px !important; height:28px !important; }
  .shop-toolbar{ top:56px !important; }
}


/* Growth features */
.compare-fab{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:var(--gray-700);box-shadow:var(--shadow-sm);z-index:3}.compare-fab:hover{color:var(--primary-dark);background:var(--primary-light)}
.notification-list{display:grid;gap:10px}.notification-card{display:flex;gap:13px;padding:17px;border:1px solid var(--gray-100);border-radius:16px;background:#fff;color:inherit;text-decoration:none;box-shadow:var(--shadow-sm)}.notification-card.unread{border-right:3px solid var(--primary);background:var(--primary-light)}.notification-card>i{width:40px;height:40px;border-radius:12px;background:var(--gray-50);display:flex;align-items:center;justify-content:center;color:var(--primary-dark);flex:none}.notification-card p{margin:4px 0;color:var(--gray-600);font-size:.84rem;line-height:1.9}.notification-card small{color:var(--gray-400);font-size:.7rem}.compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.compare-card{padding:16px;min-width:0}.compare-image{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--gray-50);margin-bottom:12px}.compare-image img{width:100%;height:100%;object-fit:cover}.compare-card h3{font-size:.9rem;margin:0 0 8px}.compare-card strong{color:var(--secondary);display:block;margin-bottom:14px}.compare-spec{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);margin-bottom:12px}.compare-spec span{color:var(--gray-500);font-size:.72rem}.compare-spec b{font-size:.76rem}.compare-card .btn{width:100%}
@media(max-width:820px){.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-fab{width:30px;height:30px;top:8px;left:8px}}


/* Growth modules */
.cart-recommendations{margin-top:48px}.admin-analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.admin-analytics-grid h3{font-size:.95rem;margin-bottom:10px}.admin-mini-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--gray-100);font-size:.78rem}.admin-mini-row:last-child{border-bottom:0}.admin-mini-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-mini-row b{color:var(--primary-dark);white-space:nowrap}@media(max-width:820px){.admin-analytics-grid{grid-template-columns:1fr}.cart-recommendations{margin-top:34px}}

.header-notification-icon{overflow:visible}.header-notification-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}.cart-recommendations .product-card{min-width:0}.cart-recommendations .product-body{padding-bottom:14px}


/* ---------------------------------------------------------------
   مدیریت کاربران و دسترسی‌های پنل
   --------------------------------------------------------------- */
.permission-layout { display:grid; grid-template-columns:minmax(280px,.82fr) minmax(0,1.45fr); gap:20px; align-items:start; }
.permission-user { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid var(--gray-200); border-radius:16px; color:inherit; text-decoration:none; transition:.18s ease; margin-bottom:9px; }
.permission-user:hover, .permission-user.active { border-color:var(--secondary); transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.05); }
.permission-user small { display:block; color:var(--gray-600); margin-top:3px; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.permission-card { border:1px solid var(--gray-200); border-radius:18px; padding:16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:.18s ease; background:#fff; }
.permission-card:hover { border-color:var(--secondary); }
.permission-card input { width:19px; height:19px; accent-color:var(--secondary); flex:0 0 auto; }
.permission-card strong { display:block; font-size:.92rem; }
.permission-card small { display:block; color:var(--gray-600); margin-top:3px; font-size:.75rem; }
.permission-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.permission-chip { padding:7px 11px; border-radius:999px; background:var(--gray-100); color:var(--gray-700); font-size:.75rem; font-weight:700; }
@media (max-width: 900px) { .permission-layout { grid-template-columns:1fr; } .permission-grid { grid-template-columns:1fr; } }