/* =========================================================
   TOKENS
   Typography rule per client request:
   - Mobile & tablet (<1025px): FIXED rem sizes (--fs-* defaults below)
   - Desktop (>=1025px): the same roles switch to clamp() so they
     breathe with viewport width, inside sane min/max bounds.
   ========================================================= */
:root{
  --brand:#0045E7;
  --brand-hover:#0300C1;
  --accent-red:#ED1C24;
  --gold:#8A6100;
  --gold-bg:#FFF8E7;
  --gold-line:#F0DFA0;
  --ink:#15171C;
  --stone:#6B6E76;
  --line:#E7E8EC;
  --paper:#FAFAFB;
  --paper-dim:#F1F2F5;
  --radius:10px;
  --container-w:70%;
  --header-w:80%;
  --header-h1:40px;
  --header-h2:76px;
  --header-h3:52px;
  --mobile-h1:56px;
  --mobile-h2:52px;
  --bottom-tab-h:60px;
  --ease: cubic-bezier(.4,0,.2,1);

  /* fixed (mobile/tablet default) type scale */
  --fs-eyebrow: 0.7rem;
  --fs-topbar: 0.78rem;
  --fs-logo: 1.25rem;
  --fs-input: 0.88rem;
  --fs-icon-label: 0.68rem;
  --fs-dropdown: 0.85rem;
  --fs-nav: 0.9rem;
  --fs-mega-head: 0.85rem;
  --fs-mega-link: 0.8rem;
  --fs-h2: 1.05rem;
  --fs-see-all: 0.8rem;
  --fs-cat-label: 0.85rem;
  --fs-product-name: 0.82rem;
  --fs-product-price: 0.88rem;
  --fs-price-strike: 0.74rem;
  --fs-article: 0.82rem;
  --fs-footer-h: 1rem;
  --fs-footer-p: 0.84rem;
  --fs-footer-bottom: 0.76rem;
  --fs-contact-item: 0.84rem;
}

@media (min-width:1025px){
  :root{
    --fs-eyebrow: clamp(0.66rem, 0.62vw, 0.74rem);
    --fs-topbar: clamp(0.74rem, 0.68vw, 0.85rem);
    --fs-logo: clamp(1.2rem, 1.5vw, 1.5rem);
    --fs-input: clamp(0.82rem, 0.78vw, 0.95rem);
    --fs-icon-label: clamp(0.66rem, 0.6vw, 0.75rem);
    --fs-dropdown: clamp(0.8rem, 0.75vw, 0.9rem);
    --fs-nav: clamp(0.85rem, 0.85vw, 0.98rem);
    --fs-mega-head: clamp(0.82rem, 0.78vw, 0.92rem);
    --fs-mega-link: clamp(0.76rem, 0.72vw, 0.86rem);
    --fs-h2: clamp(1rem, 1.15vw, 1.3rem);
    --fs-see-all: clamp(0.76rem, 0.72vw, 0.85rem);
    --fs-cat-label: clamp(0.82rem, 0.78vw, 0.92rem);
    --fs-product-name: clamp(0.78rem, 0.75vw, 0.88rem);
    --fs-product-price: clamp(0.84rem, 0.8vw, 0.95rem);
    --fs-price-strike: clamp(0.7rem, 0.68vw, 0.8rem);
    --fs-article: clamp(0.78rem, 0.75vw, 0.88rem);
    --fs-footer-h: clamp(0.95rem, 1vw, 1.15rem);
    --fs-footer-p: clamp(0.8rem, 0.78vw, 0.92rem);
    --fs-footer-bottom: clamp(0.72rem, 0.68vw, 0.8rem);
    --fs-contact-item: clamp(0.8rem, 0.75vw, 0.9rem);
  }
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Vazirmatn', sans-serif; line-height:1.7;
  padding-bottom:0;
}
img{ max-width:100%; height:auto; display:block; }

/* =========================================================
   IMAGE RULES (systemic — applies everywhere, not per-component)
   1) Base rule above already stops any image from stretching by
      default (no explicit height fights its own aspect ratio).
   2) Any element that must fill an EXACT frame uses object-fit:
      'cover' for photos (crops overflow, never distorts) — products,
      banners, category tiles, cart/mini-cart thumbnails, avatars.
      'contain' for logos/badges that must show in full, never cropped
      — the site logo, footer trust badges, contact-widget icons.
   ========================================================= */
.site-logo img{ max-height:44px; width:auto; max-width:200px; object-fit:contain; }
.trust-badge img{ max-width:70%; max-height:70%; width:auto; height:auto; object-fit:contain; }
.c-icon img{ width:100%; height:100%; object-fit:contain; }
.cat-img img,
.p-img img,
.cart-row-thumb img,
.mini-cart-thumb img,
.a-img img,
.gallery-main img,
.gallery-thumbs .thumb img,
.banner-side img,
.mini-banner img,
.ad-banner img{ width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3{ margin:0; font-weight:700; }
.note{
  background:#FFF3CD; border-bottom:1px dashed #E0C36B;
  text-align:center; font-size:0.78rem; padding:6px; color:#7A5C00;
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* =========================================================
   HEADER — desktop: 3 rows / mobile: 2 rows + bottom tab bar
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; }

/* row 1 — top bar */
.top-bar{ border-bottom:1px solid var(--line); }
.top-bar-inner{
  width:var(--header-w); margin:0 auto; height:var(--header-h1);
  display:flex; align-items:center; justify-content:flex-start; gap:1.6rem;
  font-size:var(--fs-topbar); color:var(--stone);
}
.top-bar-inner a{ position:relative; padding:2px 0; }
.top-bar-inner a::after{
  content:""; position:absolute; right:0; left:0; bottom:-2px; height:1px;
  background:var(--brand); transform:scaleX(0); transition:transform .2s var(--ease);
}
.top-bar-inner a:hover{ color:var(--brand); }
.top-bar-inner a:hover::after{ transform:scaleX(1); }

/* row 2 — logo / search / account / cart (right→left) */
.mid-header{ border-bottom:1px solid var(--line); }
.mid-header-inner{
  width:var(--header-w); margin:0 auto; height:var(--header-h2);
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem;
}
.site-logo{ flex:0 0 auto; font-weight:800; font-size:var(--fs-logo); color:var(--brand); white-space:nowrap; letter-spacing:-0.01em; position:relative; }
.site-logo span{ color:var(--ink); }
.site-logo a{ position:relative; display:inline-block; overflow:hidden; }
.site-logo a::after{
  content:""; position:absolute; top:0; bottom:0; width:35%;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.75) 50%, transparent 80%);
  transform:translateX(-160%) skewX(-20deg);
  animation:ds-logo-shine 3s linear infinite;
  pointer-events:none;
}
@keyframes ds-logo-shine{
  0%{ transform:translateX(-160%) skewX(-20deg); }
  100%{ transform:translateX(260%) skewX(-20deg); }
}

.search-box{ flex:0 0 50%; position:relative; }
.search-box input{ height:44px; padding-top:0; padding-bottom:0; }
.search-box input{
  width:100%; padding:10px 44px 10px 14px; border:1px solid var(--line);
  border-radius:8px; font-family:inherit; font-size:var(--fs-input); background:var(--paper-dim);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.search-box input:focus{ outline:none; border-color:var(--brand); background:#fff; }
.search-box .icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--stone); pointer-events:none; }
.search-suggest{
  position:absolute; top:calc(100% + 8px); right:0; left:0;
  background:#fff; border:1px solid var(--line); border-radius:10px; font-size:var(--fs-dropdown);
  padding:10px 14px; color:var(--stone); box-shadow:0 16px 32px rgba(0,0,0,0.08); z-index:45;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .2s var(--ease);
}

.header-icons{ display:flex; align-items:center; gap:1.5rem; flex-shrink:0; }
.icon-btn{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:var(--fs-icon-label); color:var(--ink); cursor:pointer;
}
.icon-btn svg{ transition:transform .2s var(--ease); }
.icon-btn:hover svg{ transform:translateY(-2px); }
.icon-btn:hover{ color:var(--brand); }
.icon-btn .cart-count{
  position:absolute; top:-6px; left:-9px; background:var(--accent-red); color:#fff;
  font-size:0.62rem; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* account dropdown — sits exactly under the account icon */
.account-wrap{ position:relative; }
.account-wrap::after{ content:""; position:absolute; top:100%; right:-30px; left:-30px; height:14px; }
.account-menu{
  position:absolute; top:calc(100% + 14px); right:50%; transform:translateX(50%) translateY(-6px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 16px 36px rgba(0,0,0,0.1); width:190px; padding:8px 0; z-index:45;
  opacity:0; visibility:hidden; transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.account-wrap:hover .account-menu{ opacity:1; visibility:visible; transform:translateX(50%) translateY(0); }
.account-menu a{ display:block; padding:9px 16px; font-size:var(--fs-dropdown); transition:background .15s ease; }
.account-menu a:hover{ background:var(--paper-dim); color:var(--brand); }

/* row 3 — mega nav: bar constrained to header width, panel bleeds full viewport */
.mega-nav{ background:#fff; border-bottom:1px solid var(--line); box-shadow:0 4px 14px rgba(21,23,28,0.05); }
.mega-nav-inner{
  width:var(--header-w); margin:0 auto; height:var(--header-h3);
  display:flex; align-items:center; justify-content:center; gap:2.3rem; flex-wrap:wrap; position:relative;
}
.mega-item{ position:relative; height:100%; display:flex; align-items:center; }
.mega-item > a{ font-size:var(--fs-nav); font-weight:500; padding:4px 0; position:relative; }
.mega-item > a::after{
  content:""; position:absolute; right:0; left:0; bottom:0; height:2px; background:var(--brand);
  transform:scaleX(0); transition:transform .2s var(--ease);
}
.mega-item:hover > a, .mega-item.active > a{ color:var(--brand); }
.mega-item:hover > a::after, .mega-item.active > a::after{ transform:scaleX(1); }

.mega-panel{
  position:fixed; top:calc(var(--header-total, 168px) + 10px); left:0; width:100vw;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 24px 48px rgba(0,0,0,0.08);
  display:flex; justify-content:center; gap:40px; padding:28px 0; z-index:40;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mega-item:hover .mega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-col h4{ margin:0 0 10px; }
.mega-col h4 a{ font-size:var(--fs-mega-head); font-weight:700; color:var(--ink); transition:color .15s ease; }
.mega-col h4 a:hover{ color:var(--brand); }
.mega-col a{ display:block; font-size:var(--fs-mega-link); color:var(--stone); padding:4px 0; transition:color .15s ease, transform .15s ease; }
.mega-col a:hover{ color:var(--brand); transform:translateX(-3px); }

.menu-toggle{
  display:none; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--line); border-radius:8px; flex-shrink:0;
}
.menu-toggle .bar{ display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:background .2s .1s; }
.menu-toggle .bar::before, .menu-toggle .bar::after{
  content:""; position:absolute; width:18px; height:2px; background:var(--ink); left:0; transition:transform .2s var(--ease), top .2s var(--ease);
}
.menu-toggle .bar::before{ top:-6px; }
.menu-toggle .bar::after{ top:6px; }
.menu-toggle.open .bar{ background:transparent; }
.menu-toggle.open .bar::before{ top:0; transform:rotate(45deg); }
.menu-toggle.open .bar::after{ top:0; transform:rotate(-45deg); }

/* =========================================================
   CART DRAWER (desktop) — slides in from the left
   ========================================================= */
.overlay{
  position:fixed; inset:0; background:rgba(15,17,20,0.45); z-index:70;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease);
}
.overlay.open{ opacity:1; visibility:visible; }
.cart-drawer{
  position:fixed; top:0; bottom:0; left:0; width:400px; max-width:88vw; background:#fff;
  z-index:75; box-shadow:24px 0 48px rgba(0,0,0,0.15); transform:translateX(-100%);
  transition:transform .3s var(--ease); display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.cart-drawer-head h3{ font-size:1rem; }
.cart-drawer-close{ font-size:1.3rem; color:var(--stone); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .15s ease; }
.cart-drawer-close:hover{ background:var(--paper-dim); }
.cart-drawer-items{ flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:14px; }
.cart-line{ display:flex; gap:12px; align-items:center; }
.cart-line .thumb{ width:60px; height:60px; border-radius:8px; background:var(--paper-dim); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:0.7rem; }
.cart-line .info{ flex:1; min-width:0; }
.cart-line .info .name{ font-size:0.85rem; margin-bottom:4px; display:block; }
.cart-line .info .qty{ font-size:0.75rem; color:var(--stone); }
.cart-line .price{ font-size:0.85rem; font-weight:600; color:var(--brand); white-space:nowrap; }
.cart-drawer-foot{ border-top:1px solid var(--line); padding:16px 20px 20px; }
.cart-subtotal{ display:flex; justify-content:space-between; font-size:0.92rem; margin-bottom:14px; }
.cart-subtotal b{ color:var(--brand); }
.cart-actions{ display:flex; gap:10px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:0.85rem; font-weight:600; padding:.85rem 1.2rem; border-radius:8px;
  border:1px solid var(--brand); background:var(--brand); color:#fff; flex:1;
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ background:var(--brand-hover); border-color:var(--brand-hover); transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,69,231,0.25); }
.btn.btn-outline{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn.btn-outline:hover{ background:var(--paper-dim); border-color:var(--line); box-shadow:none; }

/* =========================================================
   CONTAINER + SECTIONS
   ========================================================= */
.wrap{ width:var(--container-w); margin:0 auto; }
section{ margin-top:38px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.section-head h2{ font-size:var(--fs-h2); }
.section-head .see-all{ font-size:var(--fs-see-all); color:var(--brand); transition:color .15s ease; }
.section-head .see-all:hover{ color:var(--accent-red); }

/* fade-up reveal for sections as they enter viewport */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =========================================================
   HERO SLIDER — up to 7 slides, each with its own link,
   autoplay + arrows (same swapped-icon convention as sliders)
   ========================================================= */
.banner-row{
  display:flex; align-items:stretch; gap:14px;
  height:50vh; --side-square: calc((50vh - 14px) / 2);
}
.banner-row > .slider-wrap{ flex:1; min-width:0; height:100%; }
.hero-slider{ position:relative; border-radius:var(--radius); overflow:hidden; width:100%; height:100%; }
.banner-side-col{ display:flex; flex-direction:column; gap:14px; flex:0 0 var(--side-square); width:var(--side-square); }
.banner-side{ flex:none; width:var(--side-square); height:var(--side-square); border-radius:var(--radius); overflow:hidden; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.9rem; font-weight:500;
}
.hero-slide.active{ opacity:1; z-index:2; }
.hero-dots{ position:absolute; bottom:16px; right:50%; transform:translateX(50%); display:flex; gap:7px; z-index:6; }
.hero-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:background .2s ease, width .2s ease; }
.hero-dots span.active{ background:#fff; width:20px; border-radius:4px; }

.ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.85rem; font-weight:500; }
.ph-1{ background:linear-gradient(135deg,#0045E7,#3D6BFF); }
.ph-1b{ background:linear-gradient(135deg,#0300C1,#3D6BFF); }
.ph-1c{ background:linear-gradient(135deg,#001E9C,#5C82FF); }
.ph-2{ background:linear-gradient(135deg,#2B2F3A,#4B5163); }
.ph-3{ background:linear-gradient(135deg,#0300C1,#0045E7); }
.ph-ad{ background:linear-gradient(135deg,#1C1F26,#3A3F4D); }

/* generic slider arrow (mid-size sliders + hero) — icon meaning is
   swapped from the previous draft: the arrow sitting at the visual
   RIGHT edge now points left (‹ = advance, since RTL content flows
   right→left), the one at the LEFT edge points right (› = go back). */
.slider-wrap{ position:relative; }
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.1); font-size:1.05rem; color:var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.slider-arrow:hover{ background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-50%) scale(1.06); }
.slider-arrow.right{ right:-19px; }
.slider-arrow.left{ left:-19px; }
@media (max-width:900px){
  .slider-arrow{ width:32px; height:32px; font-size:0.95rem; }
  .slider-arrow.right{ right:2px; }
  .slider-arrow.left{ left:2px; }
}

/* hero banner arrows — sit inside the image, no circle/border, just an
   icon with a soft shadow so it reads on any background photo */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.5rem; background:none; border:none; cursor:pointer;
  text-shadow:0 2px 10px rgba(0,0,0,0.45); transition:transform .18s var(--ease), opacity .18s ease;
  opacity:0.85;
}
.hero-arrow:hover{ opacity:1; transform:translateY(-50%) scale(1.15); }
.hero-arrow.right{ right:10px; }
.hero-arrow.left{ left:10px; }


/* =========================================================
   CATEGORY ROW
   ========================================================= */
.cats-row{ display:flex; gap:14px; }
.cat-card{ flex:1; text-align:center; cursor:pointer; }
.cat-img{
  aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; margin-bottom:10px;
  background:var(--paper-dim); display:flex; align-items:center; justify-content:center;
  color:var(--stone); font-size:1.7rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-card:hover .cat-img{ transform:translateY(-6px) scale(1.02); box-shadow:0 16px 30px rgba(0,0,0,0.1); }
.cat-card span{ font-size:var(--fs-cat-label); font-weight:500; }

/* =========================================================
   PRODUCT SLIDERS
   ========================================================= */
.p-slider, .article-slider{
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.p-slider::-webkit-scrollbar, .article-slider::-webkit-scrollbar{ display:none; }
.p-card{
  flex:0 0 calc((100% - 4 * 14px) / 5); scroll-snap-align:start; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:#fff;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (max-width:900px){
  .p-card{ flex:0 0 45%; } /* mobile: ~2 per view, still swipeable + arrow-navigable */
}
.p-card:hover{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(0,0,0,0.08); }
.p-card .p-img{ aspect-ratio:1/1; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; color:var(--stone); overflow:hidden; position:relative; }
.badge{
  position:absolute; top:10px; left:10px; z-index:2; background:var(--accent-red); color:#fff;
  font-size:0.72rem; font-weight:700; padding:4px 9px; border-radius:6px;
}
.badge.sold-out{ background:var(--stone); }
.gold-section .badge, .archive-frame-gold .badge{ background:#B8860B; color:#fff; }
.p-card .p-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.p-card:hover .p-img img{ transform:scale(1.05); }
.p-card .p-body{ padding:12px; }
.p-card .p-name{ font-size:var(--fs-product-name); margin-bottom:6px; min-height:2.6em; }
.p-card .p-price{ font-size:var(--fs-product-price); font-weight:600; color:var(--brand); }
.p-card .p-price del{ color:var(--stone); font-weight:400; font-size:var(--fs-price-strike); margin-left:8px; }

/* gold offers */
.gold-section{ background:var(--gold-bg); border:1px solid var(--gold-line); border-radius:var(--radius); padding:24px; margin-top:38px; }
.gold-section .section-head h2{ color:var(--gold); display:flex; align-items:center; gap:8px; }
.timer{ display:flex; gap:8px; font-size:var(--fs-see-all); font-weight:600; color:var(--gold); }
.timer span{ background:#fff; border:1px solid var(--gold-line); border-radius:6px; padding:4px 9px; }
.gold-section .p-card{ border-color:var(--gold-line); }
.gold-section .p-price{ color:var(--gold); }
.archive-frame-gold{ background:var(--gold-bg); border-color:var(--gold-line); }
.archive-frame-gold .p-card{ border-color:var(--gold-line); }
.archive-frame-gold .p-price{ color:var(--gold); }
.archive-frame-gold .page-title{ color:var(--gold); }
/* point 8: regular price now shown first (struck), sale price after — same DOM order, gold price emphasized */

/* articles */
.a-card{
  flex:0 0 calc((100% - 4 * 14px) / 5); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:#fff; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (max-width:900px){
  .a-card{ flex:0 0 45%; }
}
.a-card:hover{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(0,0,0,0.08); }
.a-card .a-img{ aspect-ratio:16/10; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; color:var(--stone); }
.a-card .a-body{ padding:12px; font-size:var(--fs-article); }

.ad-banner{ width:100%; height:180px; border-radius:var(--radius); overflow:hidden; }

/* 4-banner row — plain linked images, no border/shadow/frame */
.mini-banner-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.mini-banner{ display:block; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; transition:opacity .2s ease; }
.mini-banner:hover{ opacity:0.92; }
@media (max-width:700px){
  .mini-banner-row{ grid-template-columns:repeat(2, 1fr); }
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{ margin-top:64px; border-top:1px solid var(--line); background:#fff; }
.footer-top{ width:var(--container-w); margin:0 auto; padding:36px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.footer-desc{ flex:1; min-width:0; }
.footer-desc h3{ font-size:var(--fs-footer-h); margin:0 0 10px; }
.footer-desc p{ font-size:var(--fs-footer-p); color:var(--stone); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.footer-desc.expanded p{ -webkit-line-clamp:unset; }
.more-btn{ font-size:var(--fs-see-all); color:var(--brand); margin-top:8px; display:inline-block; cursor:pointer; }
.trust-row{ flex:0 0 auto; display:grid; grid-template-columns:repeat(2,76px); gap:14px; }
.trust-badge{
  width:76px; height:76px; border:1px solid var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:0.68rem; text-align:center;
  transition:border-color .2s ease, transform .2s ease;
}
.trust-badge:hover{ border-color:var(--brand); transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid var(--line); }
.footer-bottom-inner{ width:var(--container-w); margin:0 auto; padding:14px 0; display:flex; justify-content:space-between; font-size:var(--fs-footer-bottom); color:var(--stone); }

/* contact widget */
.contact-widget{ position:fixed; bottom:26px; right:26px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; }
.contact-btn{
  display:flex; align-items:center; gap:9px; padding:14px 20px; border-radius:999px;
  background:var(--accent-red); color:#fff; cursor:pointer; white-space:nowrap;
  box-shadow:0 12px 28px rgba(237,28,36,0.32); position:relative;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  font-size:var(--fs-see-all); font-weight:600;
}
.contact-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(237,28,36,0.42); }
.contact-btn .c-ring{
  position:absolute; inset:-4px; border-radius:999px; border:1.5px solid var(--accent-red);
  opacity:0.5; animation:contact-pulse 2.4s ease-out infinite;
}
@keyframes contact-pulse{
  0%{ transform:scale(1); opacity:0.5; }
  100%{ transform:scale(1.12); opacity:0; }
}
.contact-btn svg{ flex-shrink:0; }
.contact-popup{
  position:absolute; bottom:calc(100% + 14px); right:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 24px 48px rgba(0,0,0,0.14); padding:10px; min-width:230px;
  display:flex; flex-direction:column; gap:6px; transform-origin:bottom left;
  opacity:0; transform:scale(0.85) translateY(12px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.contact-popup.open{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.contact-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:var(--fs-contact-item); cursor:pointer; transition:background .15s ease; }
.contact-item:hover{ background:var(--paper-dim); }
.c-icon{ width:32px; height:32px; border-radius:50%; background:var(--c, var(--brand)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }

/* =========================================================
   MOBILE BOTTOM TAB BAR
   ========================================================= */
.bottom-tabs{
  display:none; position:fixed; bottom:0; right:0; left:0; height:var(--bottom-tab-h);
  background:#fff; border-top:1px solid var(--line); z-index:55;
  align-items:stretch; justify-content:space-around;
  box-shadow:0 -6px 20px rgba(0,0,0,0.05);
}
.bottom-tabs a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:0.68rem; color:var(--stone); position:relative;
}
.bottom-tabs a.active{ color:var(--brand); }
.bottom-tabs .cart-count{
  position:absolute; top:2px; left:calc(50% + 4px); background:var(--accent-red); color:#fff;
  font-size:0.58rem; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* =========================================================
   OFF-CANVAS MOBILE MEGA MENU
   ========================================================= */
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; width:82%; max-width:340px; background:#fff; z-index:80;
  transform:translateX(100%); transition:transform .28s var(--ease); overflow-y:auto;
  box-shadow:-24px 0 48px rgba(0,0,0,0.15);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.mobile-menu-head strong{ font-size:1rem; }
.mobile-cat{ border-bottom:1px solid var(--line); }
.mobile-cat > summary{ list-style:none; padding:14px 18px; font-size:0.92rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.mobile-cat > summary::-webkit-details-marker{ display:none; }
.mobile-cat > summary::after{ content:"+"; color:var(--stone); font-weight:400; transition:transform .2s ease; }
.mobile-cat[open] > summary::after{ transform:rotate(45deg); }
.mobile-cat .sub{ padding:0 18px 14px 30px; display:flex; flex-direction:column; gap:9px; }
.mobile-cat .sub a{ font-size:0.85rem; color:var(--stone); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  :root{ --container-w:90%; --header-w:92%; }
}

@media (max-width:900px){
  body{ padding-bottom: calc(var(--bottom-tab-h) + 10px); }
  .top-bar, .mega-nav{ display:none; } /* point 1: top menu removed, mega menu becomes hamburger off-canvas */
  .mid-header-inner{ height:var(--mobile-h1); gap:0.8rem; }
  .menu-toggle{ display:flex; order:-1; }
  .site-logo{ order:0; flex:1; text-align:center; }
  .site-logo img{ max-height:34px; margin:0 auto; }
  .search-box{ display:none; } /* moved to its own row 2 below */
  .header-icons{ display:none; } /* account + cart hidden on mobile — both live in the bottom tab bar instead */

  .mobile-search-row{ display:block; border-bottom:1px solid var(--line); box-shadow:0 4px 14px rgba(21,23,28,0.05); }
  .mobile-search-row .search-box{ display:block; width:92%; margin:10px auto; }

  .banner-row{ flex-direction:column; height:auto; }
  .banner-row > .slider-wrap{ flex:none; height:auto; }
  .hero-slider{ aspect-ratio:16/9; width:100%; height:auto; }
  .banner-side-col{ flex-direction:row; width:100%; }
  .banner-side{ flex:1; width:auto; height:130px; }
  .cats-row{ flex-wrap:wrap; }
  .cat-card{ flex:0 0 30%; }
  .footer-top{ flex-direction:column; }
  .trust-row{ width:100%; justify-content:center; } /* 4: icons centered on mobile */
  .footer-bottom-inner{ flex-direction:column; align-items:center; gap:4px; text-align:center; padding:12px 0; } /* 5: credit line moves under copyright */
  .bottom-tabs{ display:flex; }
  .contact-widget{ bottom:calc(var(--bottom-tab-h) + 16px); } /* 1: clears the fixed bottom tab bar */
  .contact-btn{ padding:11px 16px; font-size:0.78rem; }
}

@media (max-width:480px){
  .cat-card{ flex:0 0 45%; }
  .contact-popup{ min-width:180px; }
}

@media (min-width:901px){
  .mobile-search-row, .mobile-menu, .bottom-tabs, .menu-toggle{ display:none; }
  .contact-widget{ right:70px; }
}


/* =========================================================
   SINGLE PRODUCT PAGE
   ========================================================= */
.breadcrumb{ display:flex; align-items:center; gap:8px; margin-top:20px; font-size:var(--fs-see-all); color:var(--stone); flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb span{ color:var(--line); }
.breadcrumb .current{ color:var(--ink); }

.product-main{
  display:grid; grid-template-columns:1.1fr 0.9fr 1fr; gap:28px; margin-top:22px; align-items:start;
}

/* =========================================================
   "کادر X" (frame-x) — the shared bordered/rounded white card
   used to separate a block of content from the page background:
   product gallery, product description+reviews, each of the 3
   homepage/product sliders (title included inside), the archive
   product grid, and the article slider.
   ========================================================= */
.frame-x{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;
}

/* col 1 — gallery */
.product-gallery{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; }
.product-gallery .gallery-main{
  aspect-ratio:1/1; border-radius:16px; overflow:hidden; margin-bottom:12px; position:relative;
}
.product-gallery .gallery-main img{ transition:transform .25s ease; cursor:zoom-in; }
.product-gallery .gallery-main:hover img{ transform:scale(2); }
.gallery-thumbs{ display:flex; gap:10px; }
.gallery-thumbs .thumb{
  width:64px; height:64px; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; transition:border-color .15s ease, transform .15s ease;
}
.gallery-thumbs .thumb:hover{ transform:translateY(-2px); }
.gallery-thumbs .thumb.active, .gallery-thumbs .thumb:hover{ border-color:var(--brand); }
.gallery-thumbs .thumb .ph{ font-size:0.75rem; }

/* modern card treatment for the short-desc + info columns */
.product-short-desc, .product-info{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  box-shadow:0 10px 30px rgba(21,23,28,0.05);
}

/* col 2 — short description (heading removed per request — just copy + points) */
.product-short-desc p{ font-size:var(--fs-footer-p); color:var(--stone); margin:0 0 16px; }
.short-desc-points{ display:flex; flex-direction:column; gap:11px; }
.short-desc-points li{ font-size:var(--fs-footer-p); color:var(--ink); position:relative; padding-right:20px; }
.short-desc-points li::before{
  content:""; position:absolute; right:0; top:7px; width:7px; height:7px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px rgba(0,69,231,0.12);
}

/* col 3 — info + buy (category eyebrow removed per request) */
.product-title{ font-size:clamp(1.3rem, 1.6vw, 1.7rem); margin:0 0 14px; line-height:1.35; }
.mobile-only-title{ display:none; }
.product-price{
  display:flex; align-items:baseline; gap:10px; font-size:1.35rem; font-weight:700; color:var(--brand);
  margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed var(--line);
}
.product-price del{ font-size:0.88rem; color:var(--stone); font-weight:400; }

.product-variants{ margin-bottom:22px; }
.variant-row{ margin-bottom:16px; }
.variant-label{ font-size:var(--fs-see-all); color:var(--stone); display:block; margin-bottom:9px; }
.swatches{ display:flex; gap:10px; }
.sr-only-select{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.variant-row:not(.variant-row-swatch) select{
  width:100%; font-family:inherit; font-size:0.88rem; padding:0.7rem 0.9rem;
  border:1px solid var(--line); border-radius:8px; background:var(--paper-dim);
}
.woocommerce-variation-price .price{ font-size:1.1rem; font-weight:700; color:var(--brand); margin:12px 0; display:block; }
.woocommerce-variation-availability .stock{ font-size:0.85rem; color:var(--stone); }
.reset_variations{ font-size:0.78rem; color:var(--stone); display:inline-block; margin-bottom:12px; }
.swatch{
  width:30px; height:30px; border-radius:50%; background:var(--sw); cursor:pointer;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line); transition:box-shadow .15s ease, transform .15s ease;
}
.swatch:hover{ transform:scale(1.1); }
.swatch.active{ box-shadow:0 0 0 2px var(--brand); transform:scale(1.05); }

.btn-add-cart{ width:100%; padding:1.05rem; font-size:0.92rem; border-radius:10px; }

.product-actions{ margin-bottom:22px; }
.product-actions form.cart:not(.variations_form){ display:flex; align-items:center; gap:12px; }
.woocommerce-variation-add-to-cart{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.product-actions .quantity{ display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-shrink:0; }
.product-actions .quantity .qty{
  width:44px; height:48px; text-align:center; border:none; font-family:inherit; font-size:0.95rem; background:#fff;
  -moz-appearance:textfield;
}
.product-actions .quantity .qty::-webkit-outer-spin-button,
.product-actions .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.product-actions .quantity .qty:focus{ outline:none; }
.product-actions .qty-btn{
  width:38px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-dim); color:var(--ink); font-size:1.1rem; flex-shrink:0; transition:background .15s ease;
}
.product-actions .qty-btn:hover{ background:var(--line); }
.product-actions button.single_add_to_cart_button,
.product-actions a.button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:0.9rem; font-weight:600; padding:1.05rem 1.2rem; border-radius:10px;
  border:1px solid var(--brand); background:var(--brand); color:#fff !important;
  transition:background .18s var(--ease), transform .18s var(--ease); cursor:pointer;
}
.product-actions button.single_add_to_cart_button:hover,
.product-actions a.button:hover{ background:var(--brand-hover); border-color:var(--brand-hover); transform:translateY(-1px); }
.product-actions button.single_add_to_cart_button.disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

.trust-mini-row{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:26px;
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.trust-mini{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  font-size:var(--fs-see-all); color:var(--stone); padding:18px 10px;
  border-inline-start:1px solid var(--line);
}
.trust-mini:first-child{ border-inline-start:none; }
.trust-mini i{ font-size:1.3rem; color:var(--brand); }
.trust-mini .mini-icon{
  width:30px; height:30px; border-radius:9px; background:var(--paper-dim);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0;
}

/* tabs */
.product-tabs{ margin-top:48px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; }
.tabs-head{ display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.tab-btn{
  padding:12px 2px; font-size:var(--fs-nav); font-weight:600; color:var(--stone);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease;
}
.tab-btn.active, .tab-btn:hover{ color:var(--brand); border-color:var(--brand); }
.tab-panel{ display:none; font-size:var(--fs-footer-p); color:var(--stone); line-height:1.9; }
.tab-panel.active{ display:block; }

.review-summary{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.review-score{ font-size:1.6rem; font-weight:700; color:var(--ink); }
.review-stars{ color:#F0B429; letter-spacing:2px; font-size:0.9rem; }
.review-count{ font-size:var(--fs-see-all); color:var(--stone); }
.review-item{ border-top:1px solid var(--line); padding:16px 0; }
.review-item-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; font-size:0.9rem; }
.review-item p{ margin:0; }

/* mobile sticky add-to-cart bar (replaces .bottom-tabs on this page) */
.mobile-add-bar{
  display:none; position:fixed; bottom:0; right:0; left:0; z-index:55;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,0.06);
  padding:12px 16px; align-items:center; justify-content:space-between; gap:14px;
}
.mobile-add-bar-price{ font-size:0.95rem; font-weight:700; color:var(--brand); white-space:nowrap; }
.mobile-add-bar-price del{ display:block; font-size:0.72rem; color:var(--stone); font-weight:400; }
.mobile-add-bar .btn-add-cart{ width:auto; flex:1; padding:0.8rem 1rem; }



/* =========================================================
   CART PAGE
   ========================================================= */
.cart-layout{ display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }

.cart-items-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px 26px;
  box-shadow:0 10px 30px rgba(21,23,28,0.05);
}
.cart-row{
  display:grid; grid-template-columns:76px 1.6fr 1fr 130px 1fr 34px;
  align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid var(--line);
}
.cart-row:last-of-type{ border-bottom:none; }
.cart-row-head{ color:var(--stone); font-size:var(--fs-see-all); padding:14px 0; }
.cart-row-thumb{ width:64px; height:64px; border-radius:10px; overflow:hidden; }
.cart-row-thumb .ph{ font-size:0.7rem; }
.cart-row-name{ font-size:0.92rem; margin-bottom:4px; }
.cart-row-meta{ font-size:0.78rem; color:var(--stone); }
.cart-row-price-mobile{ display:none; font-size:0.85rem; font-weight:600; color:var(--brand); margin-top:6px; }
.cart-row-price{ font-size:0.88rem; color:var(--stone); }
.cart-row-subtotal{ font-size:0.92rem; font-weight:700; color:var(--brand); }
.cart-row-remove{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--stone); font-size:0.85rem; transition:background .15s ease, color .15s ease;
}
.cart-row-remove:hover{ background:#FDECEC; color:var(--accent-red); }

.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; width:fit-content; }
.qty-stepper-label{ font-size:var(--fs-see-all); }
.qty-btn{ width:30px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:1rem; transition:background .15s ease; }
.qty-btn:hover{ background:var(--paper-dim); }
.qty-input{ width:36px; text-align:center; border:none; border-right:1px solid var(--line); border-left:1px solid var(--line); font-family:inherit; font-size:0.85rem; height:32px; }

.cart-coupon-row{ display:flex; align-items:center; gap:12px; padding:20px 0; flex-wrap:wrap; }
.coupon-input{
  flex:1; min-width:180px; padding:0.7rem 0.9rem; border:1px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:0.85rem; background:var(--paper-dim);
}
.coupon-input:focus{ outline:none; border-color:var(--brand); background:#fff; }
.cart-coupon-row .btn{ flex:0 0 auto; padding:0.7rem 1.2rem; }
.continue-shopping{ font-size:0.85rem; color:var(--brand); margin-right:auto; }

.cart-summary-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow:0 10px 30px rgba(21,23,28,0.05); position:sticky; top:200px;
}
.cart-summary-card h3{ font-size:1rem; margin:0 0 18px; }
.summary-line{ display:flex; justify-content:space-between; font-size:0.9rem; color:var(--stone); padding:10px 0; }
.summary-total{ border-top:1px dashed var(--line); margin-top:8px; font-size:1.05rem; font-weight:700; color:var(--ink); }
.summary-label{ font-size:0.82rem; color:var(--stone); display:block; margin:14px 0 10px; }
.shipping-methods{ border-top:1px solid var(--line); padding-top:6px; }
.shipping-option{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:8px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.shipping-option:has(input:checked){ border-color:var(--brand); background:#F3F6FF; }
.shipping-option input{ accent-color:var(--brand); }
.shipping-name{ flex:1; font-size:0.85rem; }
.shipping-cost{ font-size:0.82rem; font-weight:600; color:var(--ink); }
.btn-checkout{ width:100%; padding:1.05rem; font-size:0.92rem; border-radius:10px; margin-top:18px; }

@media (max-width:900px){
  .cart-layout{ grid-template-columns:1fr; }
  .cart-summary-card{ position:static; }
  .cart-row{ grid-template-columns:56px 1fr auto; grid-template-areas:"thumb info remove" "thumb qty subtotal"; row-gap:10px; }
  .cart-row-head{ display:none; }
  .cart-row-thumb{ grid-area:thumb; width:56px; height:56px; }
  .cart-row-info{ grid-area:info; }
  .cart-row-price{ display:none; }
  .cart-row-price-mobile{ display:block; }
  .qty-stepper{ grid-area:qty; }
  .cart-row-subtotal{ grid-area:subtotal; text-align:left; }
  .cart-row-remove{ grid-area:remove; }
}

/* =========================================================
   CHECKOUT PAGE
   ========================================================= */
.checkout-layout{ display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start; }

.checkout-form-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  box-shadow:0 10px 30px rgba(21,23,28,0.05);
}
.checkout-form-card h3{ font-size:1rem; margin:0 0 10px; }
.field-admin-note{
  font-size:0.76rem; color:var(--stone); background:var(--paper-dim); border-radius:8px;
  padding:10px 12px; margin-bottom:20px; line-height:1.7;
}
.form-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.field-half{ flex:1 1 calc(50% - 8px); min-width:200px; }
.field-full{ flex:1 1 100%; }
.form-field label{ font-size:0.82rem; color:var(--stone); display:flex; align-items:center; gap:6px; }
.form-field input, .form-field textarea{
  font-family:inherit; font-size:0.88rem; padding:0.75rem 0.9rem; border:1px solid var(--line);
  border-radius:8px; background:var(--paper-dim); resize:none;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--brand); background:#fff; }
.field-remove{
  width:16px; height:16px; border-radius:50%; background:var(--paper-dim); color:var(--stone);
  display:inline-flex; align-items:center; justify-content:center; font-size:0.6rem; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.field-remove:hover{ background:#FDECEC; color:var(--accent-red); }

.mini-cart-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.mini-cart-item{ display:flex; align-items:center; gap:12px; }
.mini-cart-thumb{ position:relative; width:44px; height:44px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.mini-cart-thumb .ph{ font-size:0.6rem; }
.mini-cart-qty{
  position:absolute; top:-6px; left:-6px; background:var(--stone); color:#fff; font-size:0.6rem;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.mini-cart-name{ flex:1; font-size:0.82rem; }
.mini-cart-price{ font-size:0.8rem; color:var(--stone); white-space:nowrap; }

.payment-methods{ border-top:1px solid var(--line); padding-top:6px; margin-top:6px; }

@media (max-width:900px){
  .checkout-layout{ grid-template-columns:1fr; }
  .field-half{ flex:1 1 100%; }
}

/* =========================================================
   MY ACCOUNT PAGE
   ========================================================= */
.preview-toggle{ margin:18px 0 8px; }
.preview-toggle .btn{ font-size:0.78rem; padding:0.6rem 1rem; }

/* --- logged-out: Digits phone + OTP auth card --- */
.auth-view{ display:flex; justify-content:center; padding:20px 0 40px; }
.auth-card{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:32px 28px; box-shadow:0 10px 30px rgba(21,23,28,0.05); text-align:center;
}
.auth-sub{ font-size:0.85rem; color:var(--stone); line-height:1.8; margin:0 0 24px; }
.auth-field{ text-align:right; margin-bottom:6px; }
.auth-field label{ font-size:0.82rem; color:var(--stone); display:block; margin-bottom:8px; }
.phone-input-row{ display:flex; gap:10px; }
.phone-input-row input{
  flex:1; font-family:inherit; font-size:0.95rem; padding:0.8rem 1rem; border:1px solid var(--line);
  border-radius:8px; background:var(--paper-dim); text-align:center;
}
.phone-input-row input:focus{ outline:none; border-color:var(--brand); background:#fff; }
.phone-input-row .btn{ flex:0 0 auto; padding:0.8rem 1.2rem; font-size:0.82rem; }
.otp-step{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.otp-input-row{ display:flex; gap:8px; justify-content:center; margin-bottom:10px; }
.otp-digit{
  width:44px; height:52px; text-align:center; font-size:1.2rem; font-family:var(--font, inherit);
  border:1px solid var(--line); border-radius:8px; background:var(--paper-dim);
}
.otp-digit:focus{ outline:none; border-color:var(--brand); background:#fff; }
.resend-otp{ display:block; font-size:0.78rem; color:var(--stone); margin-bottom:4px; }

/* --- logged-in: dashboard layout --- */
.account-layout{ display:grid; grid-template-columns:250px 1fr; gap:26px; margin:22px 0 50px; align-items:start; min-width:0; }

.account-sidebar{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow:0 10px 30px rgba(21,23,28,0.05); position:sticky; top:200px; min-width:0;
}
.account-user{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.account-avatar{
  width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; flex-shrink:0;
}
.account-user-info{ display:flex; flex-direction:column; font-size:0.85rem; min-width:0; }
.account-user span{ font-size:0.75rem; color:var(--stone); margin-top:2px; }
.account-nav{ display:flex; flex-direction:column; gap:2px; }
.account-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:8px;
  font-size:0.85rem; color:var(--stone); transition:background .15s ease, color .15s ease;
}
.account-nav a:hover{ background:var(--paper-dim); color:var(--ink); }
.account-nav a.active{ background:#F3F6FF; color:var(--brand); font-weight:600; }
.account-nav a.logout-link{ color:var(--accent-red); margin-top:8px; border-top:1px solid var(--line); padding-top:14px; border-radius:0; }

.account-content{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px;
  box-shadow:0 10px 30px rgba(21,23,28,0.05); min-width:0;
}
.account-panel{ display:none; }
.account-panel.active{ display:block; }
.account-panel h3{ font-size:1.05rem; margin:0 0 8px; }
.panel-sub{ font-size:0.85rem; color:var(--stone); margin:0 0 22px; }
.panel-subhead{ font-size:0.9rem; margin:26px 0 12px; }

.account-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.stat-card{
  background:var(--paper-dim); border-radius:12px; padding:18px; text-align:center;
  display:flex; flex-direction:column; gap:4px;
}
.stat-num{ font-size:1.5rem; font-weight:700; color:var(--brand); }
.stat-label{ font-size:0.78rem; color:var(--stone); }

.order-row{
  display:grid; grid-template-columns:1fr 1fr 1fr 1.2fr 0.8fr; align-items:center; gap:10px;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:0.85rem;
}
.order-row-head{ color:var(--stone); font-size:0.78rem; padding-bottom:10px; }
.order-view{ color:var(--brand); font-size:0.8rem; }
.order-status{ font-size:0.75rem; padding:4px 10px; border-radius:999px; width:fit-content; }
.status-pending, .status-on-hold{ background:#FFF3CD; color:#8A6100; }
.status-processing{ background:#E1EAFF; color:var(--brand-hover); }
.status-completed{ background:#E5F6EA; color:#1E7B34; }
.status-cancelled, .status-failed{ background:#FDECEC; color:var(--accent-red); }
.status-refunded{ background:var(--paper-dim); color:var(--stone); }

.address-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.address-card{ border:1px solid var(--line); border-radius:12px; padding:18px; }
.address-card-head{ display:flex; justify-content:space-between; font-size:0.9rem; margin-bottom:10px; }
.address-card-head a{ color:var(--brand); font-size:0.8rem; }
.address-card p{ font-size:0.85rem; color:var(--stone); line-height:2; margin:0; }

.verified-badge{ font-size:0.68rem; background:#E5F6EA; color:#1E7B34; padding:2px 8px; border-radius:999px; margin-right:6px; }

/* account-details tab reuses the same form-field pattern as checkout */
.form-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.field-half{ flex:1 1 calc(50% - 8px); min-width:200px; }
.field-full{ flex:1 1 100%; }
.form-field label{ font-size:0.82rem; color:var(--stone); display:flex; align-items:center; gap:6px; }
.form-field input, .form-field textarea{
  font-family:inherit; font-size:0.88rem; padding:0.75rem 0.9rem; border:1px solid var(--line);
  border-radius:8px; background:var(--paper-dim); resize:none; width:100%;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--brand); background:#fff; }
.form-field input:disabled{ color:var(--stone); cursor:not-allowed; }
@media (max-width:900px){
  .field-half{ flex:1 1 100%; }
}

@media (max-width:900px){
  .account-layout{ grid-template-columns:1fr; }
  .account-sidebar{ position:static; }
  .account-stats{ grid-template-columns:1fr; }
  .order-row{ grid-template-columns:1fr 1fr; grid-template-areas:"num status" "date total" "view view"; row-gap:6px; }
  .order-num{ grid-area:num; }
  .order-date{ grid-area:date; }
  .order-status{ grid-area:status; }
  .order-total{ grid-area:total; }
  .order-view{ grid-area:view; text-align:center; }
  .order-row-head{ display:none; }
  .address-grid{ grid-template-columns:1fr; }
}



/* =========================================================
   SHOP / CATEGORY ARCHIVE
   ========================================================= */
/* category description — same clamp+expand pattern as the footer;
   entirely absent (no gap either) when a category has no description */
.archive-desc{ margin-top:18px; }
.archive-desc-content{
  font-size:var(--fs-footer-p); color:var(--stone);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.archive-desc-content h1, .archive-desc-content h2, .archive-desc-content h3,
.archive-desc-content h4, .archive-desc-content h5, .archive-desc-content h6{
  color:var(--ink); font-size:1rem; margin:0 0 8px;
}
.archive-desc-content p{ margin:0 0 8px; }
.archive-desc.expanded .archive-desc-content{ -webkit-line-clamp:unset; }
.archive-desc .more-btn{ font-size:var(--fs-see-all); color:var(--brand); margin-top:8px; display:inline-block; cursor:pointer; }

.archive-toolbar{
  display:flex; align-items:center; justify-content:space-between; margin-top:24px; padding-bottom:16px;
  border-bottom:1px solid var(--line); font-size:var(--fs-see-all); color:var(--stone);
}
.archive-toolbar .woocommerce-result-count{ margin:0; font-size:var(--fs-see-all); color:var(--stone); }
.archive-toolbar .woocommerce-ordering{ margin:0; }
.archive-toolbar select.orderby{
  font-family:inherit; font-size:var(--fs-see-all); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:7px 32px 7px 10px; background:#fff; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3e%3cpath d='M1 1l4 4 4-4' stroke='%236B6E76' stroke-width='1.5' fill='none' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:left 10px center;
}

.archive-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:18px 14px; margin-top:24px;
}
.archive-grid-4col{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1024px){ .archive-grid-4col{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:700px){ .archive-grid-4col{ grid-template-columns:repeat(2, 1fr); } }

.archive-frame .page-title{ margin-top:0; }

.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:40px; }
.page-num, .page-arrow{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:var(--ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.page-num:hover, .page-arrow:hover{ border-color:var(--brand); color:var(--brand); }
.page-num.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.page-dots{ color:var(--stone); padding:0 4px; }

@media (max-width:1024px){
  .archive-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:700px){
  .archive-grid{ grid-template-columns:repeat(2, 1fr); }
  .archive-toolbar{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* =========================================================
   WOOCOMMERCE DEFAULT MARKUP RESKIN
   Targets WC core's own class names directly (not our mockup
   classes) so third-party output — e.g. Advanced Shipping for
   WooCommerce's method rows — inherits the same look without
   needing that plugin's HTML to match our markup exactly.
   ========================================================= */
.woocommerce-shipping-methods{ list-style:none; margin:0; padding:0; }
.woocommerce-shipping-methods li{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:8px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.woocommerce-shipping-methods li:has(input:checked){ border-color:var(--brand); background:#F3F6FF; }
.woocommerce-shipping-methods input[type="radio"]{ accent-color:var(--brand); }
.woocommerce-shipping-methods label{ flex:1; font-size:0.85rem; display:flex; justify-content:space-between; gap:8px; }
.shipping-calculator-button{ font-size:0.78rem; color:var(--brand); display:inline-block; margin-top:8px; }
#calc_shipping_form{ margin-top:10px; }
#calc_shipping_form p{ margin-bottom:8px; }
#calc_shipping_form select, #calc_shipping_form input[type="text"]{
  width:100%; padding:0.6rem 0.8rem; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:0.85rem;
}

.woocommerce-coupon-form{ display:none; } /* our own coupon-input row replaces this */

/* single-product variation price/stock messages */
.woocommerce-variation-availability .stock.in-stock{ color:#1E7B34; }
.woocommerce-variation-availability .stock.out-of-stock{ color:var(--accent-red); }

/* search results dropdown (real AJAX results, header search box) */
.search-suggest.open{ opacity:1; visibility:visible; transform:translateY(0); }
.search-result-row{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:8px; }
.search-result-row:hover{ background:var(--paper-dim); }
.search-result-row img{ width:36px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.search-result-row span{ flex:1; font-size:0.85rem; }
.search-result-row b{ font-size:0.8rem; color:var(--brand); font-weight:600; }
.search-suggest .no-results{ padding:10px 6px; color:var(--stone); font-size:0.85rem; }

/* checkout: WooCommerce's own payment-method box (core checkout/payment.php) */
ul.payment_methods{ list-style:none; margin:0; padding:0; }
ul.payment_methods li.wc_payment_method{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px;
}
ul.payment_methods li.wc_payment_method label{ font-size:0.85rem; display:flex; align-items:center; gap:8px; cursor:pointer; }
ul.payment_methods input[type="radio"]{ accent-color:var(--brand); }
ul.payment_methods .payment_box{ font-size:0.8rem; color:var(--stone); padding:10px 0 0; }
#payment .form-row.place-order{ margin-top:16px; }
#payment .terms{ font-size:0.8rem; color:var(--stone); margin-bottom:12px; }
#payment #place_order{
  width:100%; padding:1.05rem; font-size:0.92rem; border-radius:10px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:600; cursor:pointer; transition:background .18s ease;
}
#payment #place_order:hover{ background:var(--brand-hover); }

/* =========================================================
   ADDED-TO-CART POPUP (replaces WooCommerce's default notice)
   ========================================================= */
.added-popup-overlay{
  position:fixed; inset:0; background:rgba(15,17,20,0.45); z-index:90;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease);
}
.added-popup-overlay.open{ opacity:1; visibility:visible; }
.added-popup{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.85); z-index:95;
  background:#fff; border-radius:18px; padding:32px 28px; text-align:center; width:92%; max-width:340px;
  opacity:0; visibility:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.2);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.added-popup.open{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.added-popup-check{ width:64px; height:64px; margin:0 auto 16px; }
.added-popup-check svg{ width:100%; height:100%; }
.added-popup-check circle{ stroke:#1E7B34; stroke-width:2.5; stroke-dasharray:151; stroke-dashoffset:151; animation:ds-circle .5s ease-out forwards; }
.added-popup-check path{ stroke:#1E7B34; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:36; stroke-dashoffset:36; animation:ds-check .3s .5s ease-out forwards; }
@keyframes ds-circle{ to{ stroke-dashoffset:0; } }
@keyframes ds-check{ to{ stroke-dashoffset:0; } }
.added-popup p{ font-size:0.95rem; margin:0 0 20px; }
.added-popup-actions{ display:flex; gap:10px; }
.added-popup-actions .btn{ flex:1; padding:0.8rem; font-size:0.82rem; }

/* =========================================================
   SINGLE PRODUCT — MOBILE (this whole block was missing —
   the 3-column grid was rendering uncollapsed on phones)
   ========================================================= */
@media (max-width:900px){
  .product-main{ grid-template-columns:1fr; gap:18px; }
  .product-gallery, .product-tabs{ padding:14px; }
  .desktop-title{ display:none; }
  .mobile-only-title{ display:block; font-size:1.2rem; margin:2px 0 0; }
  .gallery-thumbs .thumb{ width:52px; height:52px; }
  .tabs-head{ gap:18px; overflow-x:auto; }
  .variant-row{ margin-bottom:12px; }
  .trust-mini-row{ grid-template-columns:repeat(2, 1fr); }
  .trust-mini{ border-inline-start:none; border-top:1px solid var(--line); }
  .trust-mini:nth-child(1), .trust-mini:nth-child(2){ border-top:none; }
  .trust-mini:nth-child(odd){ border-inline-end:1px solid var(--line); }
  .frame-x{ padding:14px; }
}

/* =========================================================
   COMMENTS / COMMENT FORM (WordPress default markup, restyled)
   ========================================================= */
.comments-frame{ margin-top:32px; padding-top:28px; border-top:1px solid var(--line); }
.comments-frame .comments-title, .comments-frame #reply-title{ font-size:1.05rem; margin:0 0 18px; }
.comments-frame ol.comment-list{ list-style:none; margin:0 0 24px; padding:0; }
.comments-frame .comment{ border-bottom:1px solid var(--line); padding:16px 0; }
.comments-frame .comment .comment-author{ font-size:0.9rem; font-weight:600; margin-bottom:4px; }
.comments-frame .comment .comment-author img{ display:none; }
.comments-frame .comment .comment-metadata{ font-size:0.75rem; color:var(--stone); margin-bottom:8px; }
.comments-frame .comment .comment-metadata a{ color:var(--stone); }
.comments-frame .comment p{ font-size:0.88rem; color:var(--ink); margin:0; }
.comments-frame ol.children{ list-style:none; margin-inline-start:32px; padding:0; }
.comments-frame .comment-form{ display:flex; flex-wrap:wrap; gap:14px; }
.comments-frame .comment-form p{ flex:1 1 100%; margin:0; }
.comments-frame .comment-form p.comment-form-author,
.comments-frame .comment-form p.comment-form-email{ flex:1 1 calc(50% - 7px); }
.comments-frame .comment-form label{ display:block; font-size:0.82rem; color:var(--stone); margin-bottom:6px; }
.comments-frame .comment-form input[type="text"],
.comments-frame .comment-form input[type="email"],
.comments-frame .comment-form input[type="url"],
.comments-frame .comment-form textarea{
  width:100%; font-family:inherit; font-size:0.88rem; padding:0.75rem 0.9rem;
  border:1px solid var(--line); border-radius:8px; background:var(--paper-dim); resize:vertical;
}
.comments-frame .comment-form input:focus, .comments-frame .comment-form textarea:focus{ outline:none; border-color:var(--brand); background:#fff; }
.comments-frame .comment-form .form-submit{ margin-top:4px; }
.comments-frame .comment-form .form-submit input{
  width:auto; padding:0.85rem 1.6rem; border:1px solid var(--brand); background:var(--brand); color:#fff;
  border-radius:8px; font-weight:600; cursor:pointer; transition:background .18s ease;
}
.comments-frame .comment-form .form-submit input:hover{ background:var(--brand-hover); }
.comments-frame .comment-notes, .comments-frame .comment-form-cookies-consent{ font-size:0.8rem; color:var(--stone); flex:1 1 100%; }
.comments-frame .comment-reply-link{ font-size:0.78rem; color:var(--brand); }

@media (max-width:700px){
  .comments-frame .comment-form p.comment-form-author,
  .comments-frame .comment-form p.comment-form-email{ flex:1 1 100%; }
}

/* WooCommerce's star-rating field inside the review form */
.comments-frame .comment-form-rating{ margin-bottom:14px; }
.comments-frame .comment-form-rating label{ display:block; font-size:0.82rem; color:var(--stone); margin-bottom:6px; }
.comments-frame p.stars{ display:flex; gap:4px; margin:0; }
.comments-frame p.stars a{ font-size:1.3rem; color:var(--line); line-height:1; }
.comments-frame p.stars a:hover, .comments-frame p.stars a.active{ color:#F0B429; }
.comments-frame p.stars select{ display:none; }

/* defensive: prevent any unexpectedly-wide content (long words, an
   unstyled 3rd-party element, etc.) from creating a horizontal scroll
   inside these frames — the same class of bug hit twice already */
.product-tabs, .comments-frame{ overflow-x:hidden; }

/* category + rating row above the short description */
.product-meta-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.product-cat-list{ font-size:var(--fs-see-all); color:var(--brand); }
.product-cat-list a{ color:var(--brand); }
.product-rating-inline .star-rating{ font-size:0.85rem; color:#F0B429; }
.product-rating-inline .woocommerce-review-link{ font-size:0.78rem; color:var(--stone); margin-right:6px; }