/* =========================================================
   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; }
.mobile-header-cart{
  display:none; position:relative; flex:0 0 38px; width:38px; height:38px;
  align-items:center; justify-content:center; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink); cursor:pointer;
  padding:0;
}
.mobile-header-cart .cart-count{
  position:absolute; top:-5px; left:-5px; background:var(--accent-red); color:#fff;
  font-size:0.6rem; min-width:17px; height:17px; padding:0 3px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.mobile-header-cart:active{ color:var(--brand); border-color:var(--brand); }
.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)
   ========================================================= */
/* Homepage hero: size the whole composition from the container width.
   The old implementation derived the side-column width from 50vh and
   used flex-shrink:0, which could make the row wider than its 70% wrapper
   on tall/narrow viewports and create horizontal page overflow. */
.banner-row{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
  gap:14px;
  width:100%;
  aspect-ratio:16 / 6;
  min-width:0;
}
.banner-row > .slider-wrap{ min-width:0; min-height:0; height:100%; }
.hero-slider{ position:relative; border-radius:var(--radius); overflow:hidden; width:100%; height:100%; }
.banner-side-col{
  display:grid;
  grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:14px;
  min-width:0;
  min-height:0;
}
.banner-side{
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  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:10px; }
.slider-arrow.left{ left:10px; }
@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:#B8860B; 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; min-width:0; }
  .site-logo img{ max-height:34px; margin:0 auto; }
  .mobile-header-cart{ display:flex; order:1; }
  .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{ display:grid; grid-template-columns:1fr; aspect-ratio:auto; height:auto; }
  .banner-row > .slider-wrap{ height:auto; }
  .hero-slider{ aspect-ratio:16/9; width:100%; height:auto; }
  .banner-side-col{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:1fr; width:100%; }
  .banner-side{ width:100%; height:auto; aspect-ratio:1/1; }
  .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 calc(50% - 7px); }
  .contact-popup{ min-width:180px; }
}

@media (min-width:901px){
  .mobile-search-row, .mobile-menu, .bottom-tabs, .menu-toggle, .mobile-header-cart{ 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; }

/* WooCommerce archive: keep every archive element inside the same frame.
   WooCommerce's default stylesheet is disabled in this theme, so the
   products list must be laid out explicitly rather than relying on WC CSS. */
.archive-frame > .archive-desc,
.archive-frame > .archive-toolbar,
.archive-frame > ul.products,
.archive-frame > .woocommerce-pagination{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.archive-frame > ul.products{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px 14px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}

.archive-frame > ul.products::before,
.archive-frame > ul.products::after{
  display:none;
}

.archive-frame > ul.products > li.product{
  width:auto;
  float:none;
  margin:0;
  padding:0;
  min-width:0;
  list-style:none;
}

.archive-frame > .woocommerce-pagination{
  margin-top:40px;
}

@media (max-width:1024px){
  .archive-frame > ul.products{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:700px){
  .archive-frame > ul.products{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 10px; }
}

.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; }

/* =========================================================
   v1.2 UX PATCH
   ========================================================= */

/* The homepage category row used 45% cards + a fixed gap on small
   screens, which made two cards wider than the row itself. Keep the
   intended two-column layout while accounting for the 14px gap. */
@media (max-width:480px){
  .cats-row{ width:100%; min-width:0; }
}

/* Never let a component's intrinsic minimum width expand the page.
   This is intentionally not overflow-x:hidden on body/html: the
   offending homepage flex row is fixed above, while these rules only
   constrain legitimate layout containers. */
.wrap, .woocommerce-page-wrap, .banner-row, .cats-row, .section-head,
.product-main, .archive-frame, .frame-x{ min-width:0; max-width:100%; }
.product-main > *, .archive-frame > *, .frame-x > *{ min-width:0; }

/* Logged-out WooCommerce / Digits forms */
.auth-view .woocommerce, .auth-view .woocommerce-form,
.auth-view form{ width:100%; max-width:100%; margin:0 auto; }
.auth-view .woocommerce form p,
.auth-view form p{ margin:0 0 14px; text-align:right; }
.auth-view label{ display:block; margin:0 0 6px; color:var(--stone); font-size:.82rem; }
.auth-view input[type="text"],
.auth-view input[type="email"],
.auth-view input[type="tel"],
.auth-view input[type="password"],
.auth-view input[type="number"]{
  width:100%; min-height:44px; box-sizing:border-box; padding:.72rem .9rem;
  border:1px solid var(--line); border-radius:8px; background:var(--paper-dim);
  color:var(--ink); font:inherit; outline:none;
}
.auth-view input:focus{ border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(0,69,231,.08); }
.auth-view button,
.auth-view input[type="submit"],
.auth-view .button{
  width:100%; min-height:44px; padding:.72rem 1rem; border:1px solid var(--brand);
  border-radius:8px; background:var(--brand); color:#fff; font:inherit; font-weight:600;
  cursor:pointer; transition:background .18s ease, border-color .18s ease;
}
.auth-view button:hover,
.auth-view input[type="submit"]:hover,
.auth-view .button:hover{ background:var(--brand-hover); border-color:var(--brand-hover); }
.auth-view .woocommerce-LostPassword,
.auth-view .woocommerce-form-login__rememberme{ font-size:.78rem; color:var(--stone); }
.auth-view .woocommerce-form-login__rememberme{ display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.auth-view .woocommerce-form-login__rememberme input{ width:auto; }
.auth-view .show-password-input{ width:auto; min-height:0; background:transparent; border:0; color:var(--stone); }
.auth-view .woocommerce-notices-wrapper,
.auth-view .woocommerce-error,
.auth-view .woocommerce-message,
.auth-view .woocommerce-info{ width:100%; }
@media (max-width:480px){
  .auth-card{ padding:24px 18px; border-radius:14px; }
}

/* Product gallery lightbox */
.ds-lightbox{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(10,12,16,.86); opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.ds-lightbox.open{ opacity:1; visibility:visible; }
.ds-lightbox img{
  display:block; max-width:min(92vw,1400px); max-height:88vh; width:auto; height:auto;
  object-fit:contain; border-radius:8px; box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.ds-lightbox-close,
.ds-lightbox-prev,
.ds-lightbox-next{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid rgba(255,255,255,.22); border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer; font-size:24px; line-height:1;
}
.ds-lightbox-close{ top:20px; right:20px; }
.ds-lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.ds-lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
.ds-lightbox-close:hover,
.ds-lightbox-prev:hover,
.ds-lightbox-next:hover{ background:rgba(255,255,255,.18); }
.ds-lightbox-counter{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  color:#fff; font-size:.78rem; background:rgba(0,0,0,.35); padding:4px 10px; border-radius:999px;
}
body.ds-lightbox-open{ overflow:hidden; }
@media (max-width:700px){
  .ds-lightbox{ padding:12px; }
  .ds-lightbox img{ max-width:96vw; max-height:82vh; }
  .ds-lightbox-prev{ left:8px; }
  .ds-lightbox-next{ right:8px; }
  .ds-lightbox-close{ top:10px; right:10px; }
}


/* overflow hotfix */
.slider-wrap{overflow:hidden;}
.banner-row,.banner-side-col,.banner-side{min-width:0;}
.cat-card{min-width:0;}