/* 3dnegar — shared component classes
   Values transcribed verbatim from the literal .dc.html source (not the README's
   prose summary, where the two ever disagree -- e.g. the homepage's own services/
   why-us/process numbering uses var(--accent-soft), while sub-pages' index numbers
   (order types, case-study steps, about timeline, b2b cards) use var(--accent3),
   confirmed by reading each file's actual markup). */

/* ---- Section header pattern ---- */
.section-kicker {
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--accent-tint);
  font-weight: 600;
  margin-bottom: 14px;
}
.section-heading {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 32px;
}
.section-heading.hero-heading { font-size: clamp(36px, 5vw, 60px); line-height: 1.1; }

/* ---- Section divider ---- */
.section-divider-wrap { display: flex; justify-content: center; }
.section-divider {
  width: 36px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
}

/* ---- Glass surfaces ---- */
.glass-panel {
  background: rgba(var(--ink), 0.04);
  border: 1px solid rgba(var(--ink), 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Structural / data cards: sharper corners + brighter top edge highlight */
.glass-card {
  background: rgba(var(--ink), 0.04);
  border: 1px solid rgba(var(--ink), 0.1);
  border-top: 1px solid rgba(var(--ink), 0.2);
  box-shadow: inset 0 1px 0 rgba(var(--ink), 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 10px;
}

/* ---- CTA buttons ---- */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  padding: 15px 30px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(var(--accent1-rgb), 0.4);
  transition: transform .3s, box-shadow .3s;
  border: none; cursor: pointer; font-family: inherit;
}
.btn-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 40px rgba(var(--accent1-rgb), 0.55); color: #fff; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--fg);
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.18);
  padding: 15px 30px; border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .3s, background .3s;
  cursor: pointer; font-family: inherit;
}
.btn-secondary:hover { transform: translateY(-3px); background: rgba(var(--ink), 0.14); color: var(--fg); }
.btn-cta-sm {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(var(--accent1-rgb), 0.4);
  transition: transform .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn-cta-sm:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 22px rgba(var(--accent1-rgb), 0.55); color: #fff; }

/* ---- Second-hero product video cards (3 across, index.html) ----
   Distinct from .s3d-product-card (the plain #products grid, which has no
   price/buttons): these are the highlight strip right under the pinned
   video hero, each a real looping product video with its own mini storefront
   card underneath -- title, sample price, add-to-cart + product-page CTAs. */
.s3d-hero-product-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 26px; overflow: hidden;
  background: rgba(var(--ink), 0.04); border: 1px solid rgba(var(--ink), 0.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.s3d-hero-product-card:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(0,0,0,0.32); }
/* 9:16, not 4:5 -- the existing Batman clip is already 720x1280 (9:16),
   and it's the most universally supported "portrait" preset across AI
   video tools, so every future asset request stays a plain "9:16
   portrait" with no cropping needed on delivery. */
.s3d-hero-product-media { position: relative; aspect-ratio: 9/16; overflow: hidden; background: rgba(var(--ink), 0.06); }
.s3d-hero-product-media video, .s3d-hero-product-media image-slot, .s3d-hero-product-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s3d-hero-product-badge {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(10,10,14,0.6); border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(10px);
}
/* Discount pill -- same red gradient Beauty Market uses on its own
   product cards/detail page, so a "٪N تخفیف"-style badge reads as the
   same signal sitewide rather than a locally-invented red. Sits inline
   next to the struck-through old price (its own line above the bold new
   price), not as a corner overlay on the video -- the badge is about the
   PRICE, so it reads clearer living next to the price text than floating
   on the thumbnail. */
.s3d-hero-product-price-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.s3d-hero-product-discount-badge {
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-size: 11px; font-weight: 800;
  color: #fff; line-height: 1; padding: 5px 9px; border-radius: 999px;
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 2px 8px rgba(220,38,38,0.4);
}
.s3d-hero-product-info { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.s3d-hero-product-title { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 16.5px; margin: 0; }
.s3d-hero-product-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.s3d-hero-product-oldprice { position: relative; font-size: 12px; color: rgba(var(--ink), 0.45); }
.s3d-hero-product-oldprice::after {
  content: ''; position: absolute; inset-inline: -2px; top: 48%; height: 1.5px;
  background: rgba(220,38,38,0.65); border-radius: 2px;
}
.s3d-hero-product-price { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 18px; color: var(--fg); }
.s3d-hero-product-price small { font-size: 11.5px; font-weight: 600; color: rgba(var(--ink), 0.5); margin-inline-start: 4px; }
.s3d-hero-product-actions { display: flex; gap: 8px; margin-top: auto; }
.btn-cta-xs, .btn-secondary-xs {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; padding: 10px 10px; border-radius: 999px;
  cursor: pointer; font-family: inherit; border: none; white-space: nowrap;
  transition: transform .25s, box-shadow .25s, background .25s; text-decoration: none;
}
.btn-cta-xs { color: #fff; background: linear-gradient(135deg, var(--accent1), var(--accent2)); box-shadow: 0 4px 14px rgba(var(--accent1-rgb), 0.35); }
.btn-cta-xs:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--accent1-rgb), 0.5); color: #fff; }
.btn-secondary-xs { color: var(--fg); background: rgba(var(--ink), 0.07); border: 1px solid rgba(var(--ink), 0.16); }
.btn-secondary-xs:hover { transform: translateY(-2px); background: rgba(var(--ink), 0.14); color: var(--fg); }

/* ---- Print simulator (js/print-simulator.js) ---- */
.s3d-slicer {
  position: relative; border-radius: 26px; overflow: hidden;
  background: rgba(var(--ink), 0.04); border: 1px solid rgba(var(--ink), 0.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.s3d-slicer-stage { position: relative; height: 380px; }
.s3d-slicer-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.s3d-slicer-hud {
  position: absolute; top: 14px; inset-inline-start: 16px; pointer-events: none;
  display: flex; flex-direction: column; gap: 4px;
}
.s3d-slicer-hud-title {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--accent-tint);
}
.s3d-slicer-hud-layer { font-size: 12.5px; color: rgba(var(--ink), 0.62); }
.s3d-slicer-hud-layer b { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; color: var(--fg); font-size: 15px; }
.s3d-slicer-hint {
  position: absolute; bottom: 12px; inset-inline-start: 16px;
  font-size: 10.5px; color: rgba(var(--ink), 0.4); pointer-events: none;
}
.s3d-slicer-preview-badge {
  position: absolute; top: 14px; inset-inline-end: 16px; pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; color: rgba(var(--ink), 0.7);
  background: rgba(var(--bg-rgb), 0.55); border: 1px solid rgba(var(--ink), 0.14);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.s3d-slicer-preview-badge svg { flex-shrink: 0; color: var(--accent-soft); opacity: 0.85; }
@media (max-width: 480px) {
  .s3d-slicer-preview-badge { font-size: 9.5px; padding: 5px 9px; gap: 4px; }
}
.s3d-slicer-controls {
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid rgba(var(--ink), 0.1);
}
.s3d-slicer-row { display: flex; align-items: center; gap: 10px; }
.s3d-slicer-label { font-size: 12.5px; color: rgba(var(--ink), 0.6); flex-shrink: 0; min-width: 62px; }
.s3d-slicer-unit { font-size: 11px; color: rgba(var(--ink), 0.4); flex-shrink: 0; }
.s3d-slicer-value {
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 12.5px;
  color: var(--fg); flex-shrink: 0; min-width: 42px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.s3d-slicer-models { display: flex; gap: 6px; flex-wrap: wrap; }
.s3d-slicer-models .s3d-seg { flex: 1 1 auto; }
.s3d-seg-group { display: flex; gap: 4px; }
.s3d-swatches { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.s3d-swatch {
  width: 21px; height: 21px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw); border: 1px solid rgba(var(--ink), 0.25);
  transition: transform .2s, box-shadow .2s;
}
.s3d-swatch:hover { transform: scale(1.15); }
.s3d-swatch.is-on {
  box-shadow: 0 0 0 2px rgba(var(--bg-rgb), 1), 0 0 0 4px var(--accent2);
  transform: scale(1.1);
}
.s3d-seg {
  flex: 1; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 8px 10px; border-radius: 999px; white-space: nowrap;
  color: rgba(var(--ink), 0.62); background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.1); transition: all .25s;
}
.s3d-seg:hover { background: rgba(var(--ink), 0.1); color: var(--fg); }
.s3d-seg.is-on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 4px 14px rgba(var(--accent1-rgb), 0.35);
}
.s3d-slicer-play {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border: none; box-shadow: 0 4px 14px rgba(var(--accent1-rgb), 0.35);
  transition: transform .25s;
}
.s3d-slicer-play:hover { transform: scale(1.08); }
.s3d-range {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: rgba(var(--ink), 0.14); cursor: pointer; outline: none; min-width: 0;
}
.s3d-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 2px 8px rgba(var(--accent1-rgb), 0.5); cursor: pointer;
}
.s3d-range::-moz-range-thumb {
  width: 15px; height: 15px; border: none; border-radius: 50%;
  background: var(--accent2); box-shadow: 0 2px 8px rgba(var(--accent1-rgb), 0.5); cursor: pointer;
}
.s3d-range:focus-visible { box-shadow: 0 0 0 3px rgba(var(--accent1-rgb), 0.3); }
.s3d-slicer-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 0 2px; border-top: 1px solid rgba(var(--ink), 0.1);
}
.s3d-slicer-stats > div { display: flex; flex-direction: column; gap: 3px; }
.s3d-slicer-stats span { font-size: 10.5px; color: rgba(var(--ink), 0.45); }
.s3d-slicer-stats b {
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.s3d-slicer-note {
  font-size: 10.5px; line-height: 1.6; color: rgba(var(--ink), 0.42);
  margin: 2px 0 0; text-align: center;
}
.s3d-slicer-cta { margin-top: 4px; }
@media (max-width: 520px) {
  .s3d-slicer-stage { height: 260px; }
  .s3d-slicer-label { min-width: 52px; font-size: 11.5px; }
  .s3d-seg { font-size: 11px; padding: 7px 8px; }
}

/* ---- Red "Modernist" index numbering (sub-pages) ---- */
.idx-num-red {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: var(--accent3);
  margin-bottom: 8px;
}

/* ---- Pills / tags ---- */
.pill-tag {
  font-size: 13px; color: rgba(var(--ink), 0.8);
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.12);
  padding: 8px 16px; border-radius: 999px;
}

/* ---- Forms ---- */
.field-label { display: block; font-size: 13px; color: rgba(var(--ink), 0.6); margin-bottom: 8px; }
.field-input, .field-select, .field-textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(var(--ink), 0.06);
  border: 1.5px solid rgba(var(--ink), 0.14);
  border-radius: 12px; color: var(--fg);
  font-family: inherit; font-size: 14px;
  transition: border-color .25s, box-shadow .25s;
}
.field-input:hover, .field-select:hover, .field-textarea:hover { border-color: rgba(var(--accent1-rgb), 0.4); }
.field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--accent1); box-shadow: 0 0 0 3px rgba(var(--accent1-rgb), 0.15); outline: none; }
.field-textarea { min-height: 70px; resize: vertical; }
.field-select option { background: #1c1c22; color: #fff; }

/* ---- Header / rail shared surface ---- */
.site-header {
  position: fixed; top: 0; z-index: 46;
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(var(--ink), 0.14);
  transition: inset-inline-start .45s cubic-bezier(.16,1,.3,1);
}
@media (max-width: 760px) { #s3d-status-chip { display: none !important; } }
.site-rail {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 50;
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
.site-rail-inner {
  position: relative; height: 100%;
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  display: flex; flex-direction: column; gap: 2px;
  padding: 76px 8px 20px; overflow-y: auto; overflow-x: hidden;
}

/* Services mega-menu (js/home-nav.js): slides in/out from the rail's own
   physical edge (translateX is always physical, so positive = toward the
   right-docked rail regardless of RTL) instead of a generic center pop --
   and the "out" keyframes give the close an actual exit instead of an
   instant removal. */
@keyframes s3dServicesMenuIn { from { opacity: 0; transform: translateX(22px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes s3dServicesMenuOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(16px) scale(.97); } }
@keyframes s3dServicesBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes s3dServicesBackdropOut { from { opacity: 1; } to { opacity: 0; } }

/* Hero video scene captions (js/page-home.js): one caption per video scene,
   typed in, held, then swapped for the next -- crossfade+blur+lift matches
   the fadeUp motion language used sitewide (tokens.css), not a generic pop.
   The exit keyframe duration here (.38s) and the JS swap timer that follows
   it (390ms, in page-home.js) are deliberately kept in sync -- a mismatch
   previously cut the exit animation off ~40ms before it finished, which is
   why it read as "no disappear animation" rather than a real fade-out. */
.s3d-hero-caret {
  display: inline-block; width: 3px; height: 0.8em; background: #fff;
  vertical-align: -0.05em; margin-inline-start: 3px; border-radius: 2px;
  animation: blinkCaret .85s step-end infinite;
}
#s3d-hero-caption { transition: opacity .3s ease; }
#s3d-hero-caption.s3d-caption-in { animation: s3dCaptionIn .6s cubic-bezier(.16,1,.3,1) both; }
#s3d-hero-caption.s3d-caption-out { animation: s3dCaptionOut .38s ease both; }
@keyframes s3dCaptionIn { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes s3dCaptionOut { from { opacity: 1; transform: translateY(0); filter: blur(0); } to { opacity: 0; transform: translateY(-14px); filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) {
  .s3d-hero-caret { animation: none; }
  #s3d-hero-caption.s3d-caption-in, #s3d-hero-caption.s3d-caption-out { animation: none; }
}
.rail-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: 14px; transition: background .3s;
  white-space: nowrap;
}
.rail-link-bar {
  position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent1), var(--accent2));
  transition: opacity .25s;
}
.rail-link-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rail-link-label { font-size: 13px; transition: opacity .25s; }

.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.1);
  color: var(--fg); cursor: pointer; flex-shrink: 0;
  transition: transform .3s, background .3s;
}
.icon-btn:hover { background: rgba(var(--ink), 0.14); transform: rotate(20deg); }

/* ---- Interactive logo (header + footer) ----
   Real logo image (assets/logo-icon.png -- the emblem cropped out of the
   owner's actual logo file via corner-seeded flood-fill background removal,
   NOT a naive near-white color threshold: a plain threshold also caught the
   character's own silver specular highlights as "background" and punched
   transparent holes through her face/hair, which read as solid black on the
   dark theme -- flood fill only removes the background pixels actually
   CONNECTED to the image edges, so highlights enclosed by her dark outline
   strokes are never touched). Text uses the logo's own two-tone coloring
   (violet "3D" + ink "Negar") instead of an invented gradient -- "Negar"
   uses var(--fg) rather than the photo's literal dark navy, since that
   literal color is unreadable on the dark theme's near-black background;
   this is the same ink token every other heading on the site already uses,
   so it stays legible in both themes instead of matching the photo exactly
   in one and vanishing in the other.

   Hover is a real mouse-tracked 3D tilt (perspective rotateX/rotateY driven
   by cursor position, wired in dc-shim.js's initLogoFx) plus a holographic
   sheen overlay that shifts with the same tilt values -- a genuinely
   different mechanism from a canned CSS-only hover, and literal to the "3D"
   in the brand name. Idle state stays a calm ambient glow pulse. */
.logo-link {
  display: flex;
  align-items: center;
  gap: 6px; /* footer (10px, larger mark) reads correctly; header was pushed
    all the way to 0 chasing a pixel-perfect "touching" look the circular
    mark's own tapered edge fights against. Matching the footer's proportion
    at the smaller header size instead of insisting on literal zero. */
  flex-shrink: 0;
}
.logo-mark-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto; /* was a fixed 48px square -- the image's own portrait aspect
    ratio (~0.89) renders narrower than that at any given height, so a fixed
    square box centered a narrower image inside it, adding a few more
    avoidable pixels of dead space on top of the gap already removed above */
  height: 48px;
  perspective: 500px;
  --logo-rx: 0deg;
  --logo-ry: 0deg;
}
.logo-mark-wrap.logo-mark-wrap--lg { width: auto; height: 60px; }
.logo-glow {
  /* This was the ACTUAL source of "the gap" everyone kept reporting: inset:-10px
     plus a 6px blur made the glow's visible halo extend well beyond the icon's
     own edge on every side, INCLUDING the side facing the text -- so even with
     the real flex gap at 0 (boxes genuinely touching), the soft purple aura
     visually read as empty space before the "real" character began. Confirmed
     by zooming into an actual pixel-level render, not guessed. Pulled the inset
     and blur way in so the glow hugs the artwork instead of surrounding it with
     a moat. */
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent2-rgb), 0.55), rgba(var(--accent1-rgb), 0.25) 55%, transparent 75%);
  opacity: 0.28;
  filter: blur(2px);
  transform: scale(0.94);
  transition: opacity .35s ease, transform .35s ease;
  animation: logoGlowPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes logoGlowPulse {
  0%, 100% { opacity: 0.22; transform: scale(0.94); }
  50% { opacity: 0.34; transform: scale(1); }
}
.logo-mark {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
  transform: perspective(500px) rotateX(var(--logo-rx)) rotateY(var(--logo-ry)) scale(1);
  transition: transform .12s ease-out, filter .3s ease;
  transform-style: preserve-3d;
}
.logo-link:hover .logo-mark {
  filter: drop-shadow(0 6px 18px rgba(var(--accent2-rgb),0.55));
}
.logo-link.logo-tilting .logo-mark { transform: perspective(500px) rotateX(var(--logo-rx)) rotateY(var(--logo-ry)) scale(1.1); }
.logo-link:hover .logo-glow { opacity: 0.75; transform: scale(1.2); animation-play-state: paused; }

/* Holographic sheen: a low-opacity iridescent gradient masked to the mark's
   own alpha, whose angle/position tracks the same tilt values so it visibly
   shifts as the cursor moves across it -- a foil-card effect. */
.logo-holo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: color-dodge;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background: linear-gradient(
    calc(135deg + var(--logo-ry) * 2),
    transparent 15%,
    rgba(255, 100, 220, 0.55) 30%,
    rgba(120, 140, 255, 0.55) 45%,
    rgba(120, 255, 220, 0.5) 60%,
    transparent 80%
  );
  background-size: 220% 220%;
  background-position: calc(50% + var(--logo-ry) * 4%) calc(50% + var(--logo-rx) * -4%);
  transition: opacity .25s ease;
}
.logo-link:hover .logo-holo { opacity: 0.85; }

.logo-text-wrap {
  display: flex;
  flex-direction: column;
  /* THE actual root cause of the whole "gap next to 3D Negar" saga, found by
     measuring exact pixel boxes: for a flex-direction:column container,
     align-items:flex-start/flex-end resolve against the CROSS axis, which
     for column direction is the INLINE axis -- so on this RTL page,
     flex-start = right and flex-end = LEFT (the opposite of block-level
     "start/end" intuition). flex-end was therefore aligning every line to
     the LEFT, not the right: the widest line (the tagline) happened to
     stretch far enough right to look "close" to the icon by coincidence of
     its own width, while the short "3D Negar" line sat flush-left with a
     large, real, measured gap (56px in a test render) between its own right
     edge and the icon. flex-start is the correct value for right-alignment
     here. */
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
  white-space: nowrap;
}
.logo-text-main {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Fixed brand purple sampled directly from the logo file's own "3D" glyph and
   ring (RGB ~118,63,225 / ~108,64,209 -- effectively the same ink), used
   literally instead of the site's --accent2 token so it reads identical to
   the source photo in both themes, not a theme-shifted approximation. The
   "Negar"/"نگار" half stays var(--fg) -- the literal photo ink (#252d37) is
   close to var(--fg) on the light theme already, and only var(--fg) stays
   legible when the theme flips dark. Same purple/ink split is applied to
   the Persian name (سه‌بعدی = purple, نگار = ink) so the two scripts read as
   one consistent brand mark rather than two different treatments. */
.logo-3d, .logo-3d-fa { color: #7c3fe0; transition: text-shadow .3s ease; }
.logo-negar, .logo-negar-fa { color: var(--fg); transition: color .3s ease; }
.logo-link:hover .logo-3d, .logo-link:hover .logo-3d-fa { text-shadow: 0 0 14px rgba(124,63,224,0.65); }
.logo-link:hover .logo-negar, .logo-link:hover .logo-negar-fa { color: var(--accent-tint); }
.logo-fa-line {
  font-family: 'Vazirmatn', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
}
.logo-tagline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(var(--ink), 0.4);
  margin-top: 1px;
}
.logo-text-lg .logo-text-main { font-size: 24px; }
.logo-text-lg .logo-fa-line { font-size: 18px; margin-top: 2px; }
.logo-link.logo-text-lg { gap: 10px; } /* the compact header lockup wants the
  mark and text touching (gap:0, above); this standalone footer lockup is
  bigger and reads better with real breathing room between them */

/* Narrow phones: the 3-line header lockup (wordmark + Persian name + tagline)
   plus the hamburger/theme-toggle buttons on the other side of the header
   didn't leave enough width for the two text lines that survive the
   <520px tagline hide (home-nav.js), overflowing past the viewport edge
   and getting clipped by body's overflow-x:hidden. Shrink the mark and
   text at this width instead of relying on the tagline hide alone. */
@media (max-width: 480px) {
  .site-header .logo-mark-wrap:not(.logo-mark-wrap--lg) { width: auto; height: 34px; }
  .site-header .logo-text-main { font-size: 14px !important; }
  .site-header .logo-fa-line { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-glow { animation: none; opacity: 0.3; }
  .logo-mark, .logo-holo, .logo-3d, .logo-negar, .logo-3d-fa, .logo-negar-fa { transition-duration: .01ms; }
}

/* Utility */
.hidden { display: none !important; }
[dir] .flip-x { transform: scaleX(-1); }

/* ---- Before/after compare slider ----
   #design-before is a full-size image-slot clipped via clip-path to
   whatever fraction the pointer is currently hovering (page-home.js's
   setPos() updates the clip on every mousemove -- this isn't a fixed 50/50
   split), so its empty-state icon/caption can't be centered with a fixed
   50% offset: that only looked right exactly at the midpoint, and drifted
   away from the actually-visible sliver everywhere else the pointer moved.
   setPos() also writes the same live fraction to --s3d-before-pct, so the
   caption's flex box tracks the real clip boundary instead of a constant. */
#s3d-compare-before image-slot::part(empty),
#s3d-compare-before image-slot::part(attribution-error) {
  padding-inline-end: calc(100% - var(--s3d-before-pct, 50%));
}

/* ---- Product detail page (product-detail/<slug>/index.html) ----
   Structure and interaction ported from a real e-commerce reference's
   product page (SaleBox price zone, spec table with dotted leaders, tab
   bar with an animated underline, description expand/collapse) -- but
   recolored to this site's own purple/violet accent (var(--accent1/2))
   instead of that reference's gold, so it reads as part of THIS site's
   system rather than a foreign palette. The one exception is the
   discount badge and strike-through, which stay red on purpose: that's
   a universal "this is a sale" signal, already used the same way on the
   homepage's own product cards. */
.s3d-pd-gallery {
  position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3/4;
  background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.1);
}
.s3d-pd-gallery.is-photo { aspect-ratio: 4/3; }
.s3d-pd-gallery video { display: block; width: 100%; height: 100%; object-fit: cover; }
.s3d-pd-gallery img { display: block; width: 100%; height: 100%; object-fit: contain; background: rgba(var(--ink), 0.03); }
.s3d-pd-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.s3d-pd-thumbs button {
  padding: 0; border-radius: 14px; overflow: hidden; width: 84px; height: 84px;
  border: 2px solid transparent; background: rgba(var(--ink), 0.06); cursor: pointer; flex-shrink: 0; transition: border-color .15s;
}
.s3d-pd-thumbs button.is-on { border-color: var(--accent-soft); }
.s3d-pd-thumbs button:hover { border-color: rgba(var(--accent2-rgb), 0.4); }
.s3d-pd-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zoom magnifier: a circular lens that follows the cursor over the main
   gallery image on hover-capable (desktop) pointers, sampling the same
   image at 2.2x so nothing is cropped or re-fetched at a different crop. */
.s3d-pd-maingrid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(400px,1fr); gap: 64px; align-items: start; }
@media (max-width: 980px) { .s3d-pd-maingrid { grid-template-columns: 1fr; gap: 32px; } }

.s3d-pd-gallery { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .s3d-pd-gallery.is-photo { cursor: zoom-in; }
}
.s3d-pd-lens {
  position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 0 0 1px rgba(var(--accent2-rgb),0.5), 0 12px 34px -10px rgba(0,0,0,0.55);
  background-repeat: no-repeat; opacity: 0; transition: opacity .12s; z-index: 3;
}
.s3d-pd-lens.is-on { opacity: 1; }
.s3d-pd-gallery-badge {
  position: absolute; top: 16px; inset-inline-start: 16px; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(10,10,14,0.6); border: 1px solid rgba(255,255,255,0.2);
  padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(10px);
}

.s3d-pd-perklist { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 28px; }
.s3d-pd-perklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.7; color: rgba(var(--ink), 0.72); list-style: none; }
.s3d-pd-perklist svg { flex-shrink: 0; margin-top: 3px; color: var(--accent-soft); }

/* SaleBox */
.s3d-pd-salebox {
  position: relative; overflow: hidden; border-radius: 24px;
  border: 1px solid rgba(var(--accent2-rgb), 0.22);
  background: rgba(var(--ink), 0.035);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.45), 0 0 70px -26px rgba(var(--accent2-rgb), 0.4);
  padding: 28px;
  margin-top: 22px;
}

/* Rating badge pill, shown right under the title (real data via
   Shayan3DReviews — honest empty state when there are zero reviews). */
.s3d-pd-rating-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 4px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(var(--ink), 0.12);
  background: rgba(var(--ink), 0.04); backdrop-filter: blur(10px); font-size: 12.5px;
}
.s3d-pd-rating-badge .s3d-rating-stars { display: inline-flex; gap: 1px; }
.s3d-pd-rating-badge-sep { width: 1px; height: 13px; background: rgba(var(--ink), 0.16); }
.s3d-pd-rating-badge-count { font-weight: 700; color: rgba(var(--ink), 0.72); }
.s3d-pd-rating-badge a { color: inherit; }

/* Sticky bottom add-to-cart bar (mounted by page-product-rich.js) */
.s3d-pd-stickybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
  border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(to top, rgba(8,6,18,0.98) 0%, rgba(16,10,34,0.94) 100%);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 -20px 50px -18px rgba(0,0,0,0.55);
}
:root[data-theme="light"] .s3d-pd-stickybar {
  background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%);
  border-top-color: rgba(0,0,0,0.08);
}
.s3d-pd-stickybar.is-on { transform: translateY(0); }
.s3d-pd-stickybar::before {
  content: ''; position: absolute; inset-inline: 5% 5%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb), 0.65), rgba(var(--accent1-rgb),0.4), transparent);
}
.s3d-pd-stickybar-inner {
  max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(16px,4vw,64px); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
.s3d-pd-stickybar-inner img { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: rgba(var(--ink), 0.06); border: 1px solid rgba(255,255,255,0.1); }
.s3d-pd-stickybar-info { flex: 1; min-width: 0; }
.s3d-pd-stickybar-title { font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3d-pd-stickybar-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.s3d-pd-stickybar-oldprice { font-size: 11.5px; color: rgba(var(--ink), 0.4); text-decoration: line-through; }
.s3d-pd-stickybar-discount { font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f87171, #dc2626); padding: 2px 8px; border-radius: 999px; }
.s3d-pd-stickybar-price { font-size: 16px; font-weight: 800; color: var(--accent-tint); margin: 0; }
.s3d-pd-stickybar-price small { font-size: 11.5px; font-weight: 600; color: rgba(var(--ink), 0.5); }
.s3d-pd-stickybar-qty { flex-shrink: 0; }
.s3d-pd-stickybar-qty button { width: 34px; height: 40px; font-size: 15px; }
.s3d-pd-stickybar-qtyval { display: inline-block; width: 28px; text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s3d-pd-stickybar-wish { flex-shrink: 0; }
.s3d-pd-stickybar-add { flex-shrink: 0; padding: 13px 26px; font-size: 14px; }
@media (max-width: 640px) { .s3d-pd-stickybar-title { display: none; } .s3d-pd-stickybar-qty { display: none; } }
@media (max-width: 420px) { .s3d-pd-stickybar-wish { display: none; } }
body.has-pd-stickybar { padding-bottom: 92px; transition: padding-bottom .3s; }
.s3d-pd-salebox::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb), 0.55), transparent);
}
.s3d-pd-price-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.s3d-pd-oldprice { position: relative; font-size: 15px; color: rgba(var(--ink), 0.45); }
.s3d-pd-oldprice::after { content: ''; position: absolute; inset-inline: -2px; top: 50%; height: 2px; background: rgba(220,38,38,0.6); border-radius: 2px; }
.s3d-pd-discount-badge {
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 13px; color: #fff;
  padding: 6px 13px; border-radius: 999px; line-height: 1;
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 3px 10px rgba(220,38,38,0.4);
}
.s3d-pd-price-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.s3d-pd-price-main b { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -.01em; color: var(--fg); }
.s3d-pd-price-main b small { font-size: 15px; font-weight: 600; color: rgba(var(--ink), 0.5); margin-inline-start: 6px; }
.s3d-pd-savings {
  font-size: 12.5px; font-weight: 700; color: #4ADE80;
  background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.28);
  padding: 5px 12px; border-radius: 999px;
}
.s3d-pd-divider { height: 1px; background: rgba(var(--ink), 0.1); margin: 18px 0; }
.s3d-pd-action-row { display: flex; align-items: center; gap: 10px; }
.s3d-pd-qty {
  display: flex; align-items: center; flex-shrink: 0; border-radius: 16px;
  border: 1px solid rgba(var(--ink), 0.14); background: rgba(var(--ink), 0.03);
}
.s3d-pd-qty button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 48px;
  background: none; border: none; cursor: pointer; color: var(--fg); font-size: 19px; font-family: inherit;
}
.s3d-pd-qty span { width: 36px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s3d-pd-delivery { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(var(--ink), 0.55); margin-top: 14px; }
.s3d-pd-delivery svg { flex-shrink: 0; color: var(--accent-soft); }
.s3d-pd-perks { display: flex; align-items: stretch; }
.s3d-pd-perks > div { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; }
.s3d-pd-perks > div + div { border-inline-start: 1px solid rgba(var(--ink), 0.1); }
.s3d-pd-perk-icon {
  display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--accent1-rgb),0.22), rgba(var(--accent2-rgb),0.14));
  border: 1px solid rgba(var(--accent2-rgb), 0.35); color: var(--accent-soft);
}
.s3d-pd-perk-text p:first-child { font-size: 11px; font-weight: 800; color: var(--fg); margin: 0; }
.s3d-pd-perk-text p:last-child { font-size: 10px; font-weight: 500; color: rgba(var(--ink), 0.5); margin: 2px 0 0; }

/* Unified tab section: توضیحات / مشخصات / ارسال و مرجوعی / نظرات خریداران */
.s3d-pd-tabsection {
  margin-top: 56px; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(var(--accent2-rgb), 0.16);
  background: rgba(var(--ink), 0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.s3d-pd-tabbar { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid rgba(var(--ink), 0.1); padding: 10px 16px 0; }
.s3d-pd-tabbar button {
  position: relative; flex-shrink: 0; white-space: nowrap; padding: 12px 16px; margin-bottom: -1px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: rgba(var(--ink), 0.5);
  background: none; border: none; cursor: pointer; transition: color .25s;
}
.s3d-pd-tabbar button:hover { color: rgba(var(--ink), 0.8); }
.s3d-pd-tabbar button.is-on { color: var(--fg); }
.s3d-pd-tabbar button.is-on::after {
  content: ''; position: absolute; inset-inline: 14px; bottom: -1px; height: 2.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
}
.s3d-pd-tabpanel { display: none; padding: 26px 22px; }
.s3d-pd-tabpanel.is-on { display: block; }

/* مشخصات: dotted-leader spec rows, 2-column on wider screens */
.s3d-pd-spec-grid { display: grid; gap: 4px 40px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .s3d-pd-spec-grid { grid-template-columns: 1fr 1fr; } }
.s3d-pd-spec-row { display: flex; align-items: baseline; gap: 10px; padding: 12px 2px; }
.s3d-pd-spec-row + .s3d-pd-spec-row { border-top: 1px solid rgba(var(--ink), 0.06); }
@media (min-width: 640px) { .s3d-pd-spec-row { border-top: none !important; } }
.s3d-pd-spec-row span:first-child { flex-shrink: 0; font-size: 13.5px; color: rgba(var(--ink), 0.55); }
.s3d-pd-spec-leader { flex: 1; align-self: center; border-bottom: 1px dotted rgba(var(--accent2-rgb), 0.35); min-width: 16px; }
.s3d-pd-spec-row span:last-child { flex-shrink: 0; font-size: 13.5px; font-weight: 700; color: var(--fg); }

/* توضیحات: prose + expand/collapse */
.s3d-pd-desc { line-height: 2; color: rgba(var(--ink), 0.7); font-size: 14.5px; }
.s3d-pd-desc p { margin: 0 0 16px; text-align: justify; }
.s3d-pd-desc p:last-child { margin-bottom: 0; }
.s3d-pd-desc-wrap { position: relative; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1); }
.s3d-pd-desc-fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 90px; pointer-events: none;
  background: linear-gradient(to top, var(--page-bg), transparent);
}
.s3d-pd-desc-toggle {
  display: flex; align-items: center; gap: 6px; margin: 18px auto 0; width: fit-content;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-soft);
  background: none; border: 1px solid rgba(var(--accent2-rgb), 0.35); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: background .25s;
}
.s3d-pd-desc-toggle:hover { background: rgba(var(--accent2-rgb), 0.08); }
.s3d-pd-desc-toggle svg { transition: transform .3s; }
.s3d-pd-desc-toggle.is-open svg { transform: rotate(180deg); }

/* ارسال و مرجوعی */
.s3d-pd-shiplist { display: flex; flex-direction: column; gap: 16px; }
.s3d-pd-shiplist li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--fg); list-style: none; }
.s3d-pd-shiplist svg { flex-shrink: 0; color: #4ADE80; }
.s3d-pd-shiplist li[data-tone="info"] svg { color: var(--accent-soft); }

/* نظرات خریداران: honest empty state (no fabricated reviews) */
.s3d-pd-review-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 30px 10px; }
.s3d-pd-review-empty svg { color: rgba(var(--ink), 0.25); }
.s3d-pd-review-empty p:first-of-type { font-size: 15px; font-weight: 700; color: var(--fg); margin: 0; }
.s3d-pd-review-empty p:last-of-type { font-size: 13px; color: rgba(var(--ink), 0.5); margin: 0; max-width: 40ch; }

/* ---- Print breakdown widget (product page) ----
   Premium display of the real slicer output for a multi-color/multi-part
   print: plate count, print time, layer height, total weight, then a
   per-color material chip for every filament colour actually used. Built
   as its own standalone card so it reads as a genuine "here is exactly
   what this print costs to make" panel, not a buried spec-table row. */
.s3d-pd-printcard {
  position: relative; overflow: hidden; border-radius: 20px; margin-top: 28px;
  border: 1px solid rgba(var(--accent2-rgb), 0.22);
  background: linear-gradient(160deg, rgba(var(--ink),0.05), rgba(var(--ink),0.015));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 46px -20px rgba(0,0,0,0.4);
  padding: 22px;
}
.s3d-pd-printcard::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb), 0.55), transparent);
}
.s3d-pd-printcard-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--accent-tint); letter-spacing: .02em;
  margin: 0 0 18px;
}
.s3d-pd-printcard-title svg { flex-shrink: 0; }
.s3d-pd-printstats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 20px;
}
@media (min-width: 480px) { .s3d-pd-printstats { grid-template-columns: repeat(4, 1fr); } }
.s3d-pd-stat {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 14px 8px; border-radius: 14px;
  background: rgba(var(--ink), 0.035); border: 1px solid rgba(var(--ink), 0.08);
}
.s3d-pd-stat-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--accent1-rgb),0.24), rgba(var(--accent2-rgb),0.14));
  border: 1px solid rgba(var(--accent2-rgb), 0.35); color: var(--accent-soft);
}
.s3d-pd-stat b { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-size: 15px; font-weight: 800; color: var(--fg); }
.s3d-pd-stat span { font-size: 10.5px; color: rgba(var(--ink), 0.5); }
.s3d-pd-material-label { font-size: 11.5px; font-weight: 700; color: rgba(var(--ink), 0.55); margin: 0 0 10px; }
.s3d-pd-material-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s3d-pd-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-size: 11.5px; font-weight: 700;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  background: rgba(var(--ink), 0.045); border: 1px solid rgba(var(--ink), 0.1); color: var(--fg);
}
.s3d-pd-chip-swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--chip-color); border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* ---- Auth (sign in / phone+OTP) ----
   A deep-glass dark stage between the light header/footer, matching how
   Webniva's own /login treats auth as its own visual register. Two columns
   (brand/perks + form) on desktop, single column with the form first on
   mobile. Phone+OTP is one unified flow -- no login/signup tab split, since
   the backend upserts the user on first successful verify. */
.s3d-auth-stage {
  position: relative; overflow: hidden; z-index: 1;
  min-height: calc(100vh - 0px);
  display: flex; align-items: center;
  padding: 150px clamp(20px,5vw,64px) 100px;
  background: radial-gradient(120% 140% at 85% -10%, #241f3d 0%, #14162a 45%, #07070a 100%);
}
:root[data-theme="light"] .s3d-auth-stage {
  background: radial-gradient(120% 140% at 85% -10%, #eef0f7 0%, #e4e6f3 55%, #dfe1ef 100%);
}
.s3d-auth-glow-a, .s3d-auth-glow-b {
  position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none;
}
.s3d-auth-glow-a { inset-inline-start: -8rem; top: 22%; width: 22rem; height: 22rem; background: rgba(var(--accent2-rgb), 0.28); }
.s3d-auth-glow-b { inset-inline-end: -6rem; bottom: 0; width: 18rem; height: 18rem; background: rgba(var(--accent1-rgb), 0.16); }

.s3d-auth-grid {
  position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 1200px;
  display: grid; gap: 56px; align-items: center;
  grid-template-columns: 1.05fr 0.95fr;
}
@media (max-width: 900px) {
  .s3d-auth-grid { grid-template-columns: 1fr; gap: 40px; }
  .s3d-auth-brand { order: 2; }
  .s3d-auth-formcol { order: 1; }
}

.s3d-auth-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--accent-tint);
  border: 1px solid rgba(var(--accent2-rgb), 0.35); background: rgba(var(--accent2-rgb), 0.12);
  padding: 7px 15px; border-radius: 999px;
}
.s3d-auth-title {
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.8vw, 38px); line-height: 1.25; margin: 20px 0 12px; text-wrap: balance;
}
.s3d-auth-title span {
  display: block; background: linear-gradient(110deg, var(--accent-tint), var(--accent2) 55%, var(--accent1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s3d-auth-sub { font-size: 14.5px; line-height: 1.9; color: rgba(var(--ink), 0.65); max-width: 420px; margin: 0; }

.s3d-auth-perks { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.s3d-auth-perk {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--ink), 0.035); backdrop-filter: blur(8px);
}
.s3d-auth-perk-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent2-rgb), 0.16); color: var(--accent-tint); border: 1px solid rgba(var(--accent2-rgb), 0.3);
}
.s3d-auth-perk-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--fg); }
.s3d-auth-perk-text { display: block; margin-top: 3px; font-size: 12px; line-height: 1.8; color: rgba(var(--ink), 0.55); }

.s3d-auth-card {
  margin: 0 auto; width: 100%; max-width: 440px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(165deg, rgba(var(--ink),0.06), rgba(var(--ink),0.02));
  border: 1px solid rgba(var(--accent2-rgb), 0.22);
  box-shadow: 0 32px 80px -28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(140%);
}
.s3d-auth-card-head { padding: 26px 26px 4px; text-align: center; }
.s3d-auth-card-head h2 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 19px; margin: 0 0 6px; }
.s3d-auth-card-head p { font-size: 12.5px; color: rgba(var(--ink), 0.55); margin: 0; }
.s3d-auth-form { display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 26px; }

.s3d-auth-field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: rgba(var(--ink), 0.65); }
.s3d-auth-input {
  width: 100%; height: 48px; border-radius: 12px; padding: 0 16px; font-size: 15px;
  border: 1px solid rgba(var(--ink), 0.14); background: rgba(var(--ink), 0.04); color: var(--fg);
  text-align: center; direction: ltr; font-family: 'Archivo', 'Vazirmatn', sans-serif; letter-spacing: 0.02em;
  transition: border-color .2s, background .2s;
}
.s3d-auth-input:focus { outline: none; border-color: var(--accent2); background: rgba(var(--ink), 0.06); }
.s3d-auth-input.s3d-auth-otp { font-size: 22px; letter-spacing: 0.5em; padding-inline-start: 0.5em; }
.s3d-auth-hint { margin: 7px 2px 0; font-size: 11px; color: rgba(var(--ink), 0.5); }

.s3d-auth-submit {
  margin-top: 4px; width: 100%; padding: 15px; border: none; border-radius: 14px; cursor: pointer;
  font-family: 'Vazirmatn', sans-serif; font-size: 14.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent1), var(--accent2)); transition: filter .2s, opacity .2s;
  box-shadow: 0 14px 30px -12px rgba(var(--accent2-rgb), 0.55);
}
.s3d-auth-submit:hover { filter: brightness(1.08); }
.s3d-auth-submit:disabled { opacity: 0.6; cursor: default; filter: none; }

.s3d-auth-alert { border-radius: 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.7; }
.s3d-auth-alert.is-error { border: 1px solid rgba(var(--accent3-rgb), 0.35); background: rgba(var(--accent3-rgb), 0.1); color: var(--accent3); }
.s3d-auth-alert.is-notice { border: 1px solid rgba(52,211,153,0.35); background: rgba(52,211,153,0.1); color: #34d399; }

.s3d-auth-resend { text-align: center; font-size: 12px; color: rgba(var(--ink), 0.55); }
.s3d-auth-resend button { background: none; border: none; padding: 0; font: inherit; color: var(--accent-tint); font-weight: 700; cursor: pointer; }
.s3d-auth-resend button:disabled { color: rgba(var(--ink), 0.4); cursor: default; }

.s3d-auth-legal { text-align: center; font-size: 10.5px; line-height: 1.7; color: rgba(var(--ink), 0.4); margin: 2px 4px 0; }
.s3d-auth-legal a { color: rgba(var(--ink), 0.55); text-decoration: underline; }

.s3d-auth-success { padding: 40px 26px 34px; text-align: center; }
.s3d-auth-success-icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52,211,153,0.14); border: 1px solid rgba(52,211,153,0.35); color: #34d399;
}
.s3d-auth-success h2 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.s3d-auth-success p { font-size: 13px; color: rgba(var(--ink), 0.6); margin: 0 0 22px; }

/* ---- Cart badge (rail icon) ---- */
.s3d-cart-badge {
  position: absolute; top: -6px; inset-inline-end: -8px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent3); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-family: 'Archivo', 'Vazirmatn', sans-serif; box-shadow: 0 0 0 2px var(--page-bg);
}

/* ---- Cart page ---- */
.s3d-cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .s3d-cart-layout { grid-template-columns: 1fr; } }
.s3d-cart-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  padding: 18px; border-radius: 18px; border: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--ink), 0.03);
  margin-bottom: 12px;
}
.s3d-cart-item-thumb { width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: rgba(var(--ink), 0.06); flex-shrink: 0; }
.s3d-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s3d-cart-item-title { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 14.5px; margin: 0 0 6px; }
.s3d-cart-item-price { font-size: 13px; color: rgba(var(--ink), 0.6); }
.s3d-cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.s3d-cart-item-remove { background: none; border: none; color: rgba(var(--ink), 0.4); font-size: 12px; cursor: pointer; padding: 2px; }
.s3d-cart-item-remove:hover { color: var(--accent3); }
.s3d-cart-empty { text-align: center; padding: 70px 20px; }
.s3d-cart-empty svg { color: rgba(var(--ink), 0.25); margin-bottom: 18px; }
.s3d-cart-empty p { font-size: 14px; color: rgba(var(--ink), 0.55); margin: 0 0 22px; }

.s3d-cart-summary {
  position: sticky; top: 100px; border-radius: 20px; padding: 24px;
  border: 1px solid rgba(var(--accent2-rgb), 0.2); background: rgba(var(--ink), 0.035); backdrop-filter: blur(14px);
}
.s3d-cart-summary h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 16px; margin: 0 0 18px; }
.s3d-cart-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; color: rgba(var(--ink), 0.6); padding: 8px 0; }
.s3d-cart-summary-row.is-total { border-top: 1px solid rgba(var(--ink), 0.1); margin-top: 8px; padding-top: 14px; font-weight: 800; font-size: 16px; color: var(--fg); }
.s3d-cart-summary-row.is-total b { font-family: 'Archivo', 'Vazirmatn', sans-serif; }

/* ---- Checkout page ---- */
.s3d-checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .s3d-checkout-layout { grid-template-columns: 1fr; } }
.s3d-checkout-card {
  border-radius: 20px; padding: 26px; margin-bottom: 20px;
  border: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--ink), 0.03);
}
.s3d-checkout-card h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 15.5px; margin: 0 0 18px; }
.s3d-checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .s3d-checkout-grid { grid-template-columns: 1fr; } }
.s3d-checkout-grid .s3d-auth-field { grid-column: span 1; }
.s3d-checkout-grid .is-full { grid-column: 1 / -1; }
.s3d-checkout-addr-radio {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(var(--ink), 0.1); margin-bottom: 10px; cursor: pointer;
}
.s3d-checkout-addr-radio.is-selected { border-color: var(--accent2); background: rgba(var(--accent2-rgb), 0.06); }
.s3d-checkout-success { text-align: center; padding: 70px 20px; }
.s3d-checkout-success svg { color: #34d399; margin-bottom: 18px; }

/* ---- Checkout: shipping method rows ---- */
.s3d-ship-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(var(--ink), 0.1); margin-bottom: 10px; cursor: pointer;
}
.s3d-ship-row.is-selected { border-color: var(--accent2); background: rgba(var(--accent2-rgb), 0.06); }
.s3d-ship-row.is-locked { opacity: .45; cursor: not-allowed; }
.s3d-ship-row-name { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.s3d-ship-row-price { font-size: 13px; font-weight: 700; color: rgba(var(--ink), 0.7); }
.s3d-ship-row-locked-tag { font-size: 10.5px; color: rgba(var(--ink), 0.45); background: rgba(var(--ink), 0.06); padding: 3px 9px; border-radius: 999px; }

/* ---- Checkout: payment provider cards ---- */
.s3d-pay-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border-radius: 16px;
  border: 1px solid rgba(var(--ink), 0.1); cursor: pointer; text-align: center; position: relative;
}
.s3d-pay-card.is-selected { border-color: var(--accent2); background: rgba(var(--accent2-rgb), 0.06); box-shadow: 0 0 0 1px var(--accent2); }
.s3d-pay-card.is-disabled { opacity: .5; cursor: not-allowed; }
.s3d-pay-card-logo { width: 52px; height: 52px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; color: #333; font-weight: 800; font-size: 11px; }
.s3d-pay-card-label { font-size: 12.5px; font-weight: 700; }
.s3d-pay-card-tag { position: absolute; top: -8px; inset-inline-end: 10px; font-size: 9.5px; font-weight: 700; background: var(--accent2); color: #fff; padding: 2px 8px; border-radius: 999px; }
.s3d-pay-card-soon { font-size: 10px; color: rgba(var(--ink), 0.45); }

/* ---- Account dashboard ---- */
.s3d-acct-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
@media (max-width: 780px) { .s3d-acct-layout { grid-template-columns: 1fr; } }
.s3d-acct-side {
  border-radius: 20px; padding: 22px; border: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--ink), 0.03);
  display: flex; flex-direction: column; gap: 4px;
}
.s3d-acct-avatar {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff;
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 18px;
}
.s3d-acct-phone { font-size: 13px; color: rgba(var(--ink), 0.55); direction: ltr; text-align: right; margin: 0 0 16px; }
.s3d-acct-navlink {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: rgba(var(--ink), 0.65); cursor: pointer; border: none; background: none; text-align: right; width: 100%;
}
.s3d-acct-navlink.is-on { background: rgba(var(--accent1-rgb), 0.12); color: var(--fg); }
.s3d-acct-navlink svg { flex-shrink: 0; }
.s3d-acct-logout { margin-top: 10px; color: var(--accent3) !important; }

.s3d-acct-panel { display: none; }
.s3d-acct-panel.is-on { display: block; }

.s3d-acct-order {
  border-radius: 16px; border: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--ink), 0.03);
  padding: 16px 18px; margin-bottom: 12px; cursor: pointer;
}
.s3d-acct-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s3d-acct-order-id { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 14px; }
.s3d-acct-order-date { font-size: 11.5px; color: rgba(var(--ink), 0.5); margin-inline-start: 8px; }
.s3d-acct-order-total { font-weight: 700; font-size: 13.5px; }
.s3d-acct-status {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.s3d-acct-status.is-pending { background: rgba(217, 119, 6, 0.14); color: #d97706; }
.s3d-acct-status.is-shipped { background: rgba(var(--accent1-rgb), 0.14); color: var(--accent1); }
.s3d-acct-status.is-delivered { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.s3d-acct-status.is-cancelled { background: rgba(var(--accent3-rgb), 0.14); color: var(--accent3); }
.s3d-acct-order-items { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(var(--ink), 0.08); display: none; }
.s3d-acct-order.is-open .s3d-acct-order-items { display: block; }
.s3d-acct-order-item-row { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(var(--ink), 0.6); padding: 4px 0; }
.s3d-acct-empty { text-align: center; padding: 40px 20px; font-size: 13.5px; color: rgba(var(--ink), 0.5); }

/* ---- Legal document pages (Terms of Service / Privacy Policy) ----
   Hero band + last-updated pill, then a sticky scroll-spy table of
   contents beside real numbered sections -- numbering here is honest
   (section 3 really does follow section 2 in a document meant to be read
   in order), unlike a decorative 01/02/03 on non-sequential content. */
.s3d-legal-hero {
  position: relative; overflow: hidden; padding: 150px clamp(20px,5vw,64px) 60px; text-align: center;
  border-bottom: 1px solid rgba(var(--ink), 0.08);
}
.s3d-legal-hero h1 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: clamp(28px,3.6vw,40px); margin: 16px 0 14px; text-wrap: balance; }
.s3d-legal-hero p { max-width: 60ch; margin: 0 auto; font-size: 14.5px; line-height: 1.9; color: rgba(var(--ink), 0.6); }
.s3d-legal-updated {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 11.5px; font-weight: 600;
  color: rgba(var(--ink), 0.6); border: 1px solid rgba(var(--ink), 0.12); background: rgba(var(--ink), 0.04);
  padding: 7px 16px; border-radius: 999px;
}
.s3d-legal-updated span.dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }

.s3d-legal-body { max-width: var(--s3d-wrap-w); margin: 0 auto; padding: 50px clamp(20px,5vw,64px) 100px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .s3d-legal-body { grid-template-columns: 1fr; } }
.s3d-legal-toc { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 2px; border-inline-end: 1px solid rgba(var(--ink), 0.1); padding-inline-end: 18px; }
@media (max-width: 900px) { .s3d-legal-toc { display: none; } }
.s3d-legal-toc a {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12.5px; font-weight: 600;
  color: rgba(var(--ink), 0.5); border-inline-start: 2px solid transparent; padding-inline-start: 10px; margin-inline-start: -12px;
}
.s3d-legal-toc a.is-active { color: var(--fg); border-inline-start-color: var(--accent2); }
.s3d-legal-toc a .num { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-size: 10.5px; color: rgba(var(--ink), 0.4); }

.s3d-legal-section {
  display: flex; gap: 16px; padding: 24px; border-radius: 18px; margin-bottom: 16px;
  border: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--ink), 0.025);
}
.s3d-legal-section .num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent2-rgb), 0.14); color: var(--accent-tint); font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 13px;
}
.s3d-legal-section h2 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 16.5px; margin: 4px 0 10px; }
.s3d-legal-section p, .s3d-legal-section li { font-size: 13.5px; line-height: 1.9; color: rgba(var(--ink), 0.65); }
.s3d-legal-section ul { margin: 8px 0; padding-inline-start: 20px; }
.s3d-legal-section a { text-decoration: underline; }

/* ---- FAQ page ---- */
.s3d-faq-search { max-width: 560px; margin: 0 auto 40px; position: relative; }
.s3d-faq-search input {
  width: 100%; height: 52px; border-radius: 16px; padding: 0 50px 0 20px; font-size: 14px;
  border: 1px solid rgba(var(--ink), 0.14); background: rgba(var(--ink), 0.04); color: var(--fg);
}
.s3d-faq-search input:focus { outline: none; border-color: var(--accent2); }
.s3d-faq-search svg { position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); color: rgba(var(--ink), 0.4); pointer-events: none; }
.s3d-faq-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.s3d-faq-cat {
  font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--ink), 0.12); background: rgba(var(--ink), 0.03); color: rgba(var(--ink), 0.65);
}
.s3d-faq-cat.is-on { background: linear-gradient(135deg, var(--accent1), var(--accent2)); border-color: transparent; color: #fff; }
.s3d-faq-list { max-width: 820px; margin: 0 auto; }
.s3d-faq-item { border: 1px solid rgba(var(--ink), 0.1); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.s3d-faq-q {
  width: 100%; text-align: start; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; font-size: 14px; font-weight: 700; background: rgba(var(--ink), 0.02); border: none; color: var(--fg); cursor: pointer;
}
.s3d-faq-q svg { flex-shrink: 0; transition: transform .25s; color: rgba(var(--ink), 0.5); }
.s3d-faq-item.is-open .s3d-faq-q svg { transform: rotate(180deg); }
.s3d-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.s3d-faq-item.is-open .s3d-faq-a { max-height: 400px; }
.s3d-faq-a p { padding: 0 20px 18px; font-size: 13.5px; line-height: 1.9; color: rgba(var(--ink), 0.62); margin: 0; }
.s3d-faq-empty { text-align: center; padding: 50px 20px; font-size: 13.5px; color: rgba(var(--ink), 0.5); }

/* ---- Magazine ---- */
.s3d-mag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.s3d-mag-card {
  display: block; border-radius: 20px; overflow: hidden; color: inherit;
  border: 1px solid rgba(var(--ink), 0.1); background: rgba(var(--ink), 0.03);
  transition: transform .3s, box-shadow .3s;
}
.s3d-mag-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.2); }
.s3d-mag-card-cover { aspect-ratio: 16/10; }
.s3d-mag-card-body { padding: 20px; }
.s3d-mag-card-cat {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent-tint);
  background: rgba(var(--accent2-rgb), 0.12); border: 1px solid rgba(var(--accent2-rgb), 0.3);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.s3d-mag-card h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 8px; line-height: 1.6; }
.s3d-mag-card p { font-size: 13px; line-height: 1.8; color: rgba(var(--ink), 0.6); margin: 0 0 14px; }
.s3d-mag-card-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: rgba(var(--ink), 0.45); }
.s3d-mag-card-meta span::before { content: '·'; margin-inline-end: 10px; }
.s3d-mag-card-meta span:first-child::before { content: none; margin: 0; }

.s3d-mag-article { max-width: 760px; margin: 0 auto; padding: 150px clamp(20px,5vw,64px) 100px; position: relative; z-index: 1; }
.s3d-mag-article-cat { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--accent-tint); background: rgba(var(--accent2-rgb), 0.12); border: 1px solid rgba(var(--accent2-rgb), 0.3); padding: 6px 14px; border-radius: 999px; }
.s3d-mag-article h1 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: clamp(26px,3.4vw,36px); margin: 18px 0 14px; text-wrap: balance; }
.s3d-mag-article-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(var(--ink), 0.5); margin-bottom: 34px; }
.s3d-mag-article-meta span::before { content: '·'; margin-inline-end: 10px; }
.s3d-mag-article-meta span:first-child::before { content: none; margin: 0; }
.s3d-mag-article-cover { aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; margin-bottom: 34px; }
.s3d-mag-body { font-size: 15px; line-height: 2; color: rgba(var(--ink), 0.72); }
.s3d-mag-body h2 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 19px; color: var(--fg); margin: 36px 0 14px; }
.s3d-mag-body p { margin: 0 0 18px; }
.s3d-mag-body ul, .s3d-mag-body ol { margin: 0 0 18px; padding-inline-start: 22px; }
.s3d-mag-body li { margin-bottom: 8px; }
.s3d-mag-body a { text-decoration: underline; }
.s3d-mag-cta { margin-top: 44px; padding: 26px; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--accent1-rgb),0.1), rgba(var(--accent2-rgb),0.1)); border: 1px solid rgba(var(--accent2-rgb), 0.25); text-align: center; }
.s3d-mag-cta p { font-size: 14px; margin: 0 0 16px; color: var(--fg); }
.s3d-mag-related { margin-top: 50px; padding-top: 34px; border-top: 1px solid rgba(var(--ink), 0.1); }
.s3d-mag-related h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 15px; margin: 0 0 18px; }

/* ---- Landing pages: shop / category / service hubs ---- */
.s3d-lp-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px,5vw,64px) 100px; position: relative; z-index: 1; }
.s3d-lp-wrap.is-wide { max-width: var(--s3d-wrap-w); padding-top: 40px; }
.s3d-lp-crumbs { font-size: 12px; color: rgba(var(--ink), 0.5); margin: 0 0 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s3d-lp-crumbs a { color: rgba(var(--ink), 0.55); }
.s3d-lp-crumbs a:hover { color: var(--fg); }
.s3d-lp-crumbs span.sep { color: rgba(var(--ink), 0.3); }
.s3d-lp-body { font-size: 15px; line-height: 2; color: rgba(var(--ink), 0.72); }
.s3d-lp-body h2 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 20px; color: var(--fg); margin: 40px 0 14px; text-wrap: balance; }
.s3d-lp-body h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 16px; color: var(--fg); margin: 26px 0 10px; }
.s3d-lp-body p { margin: 0 0 18px; }
.s3d-lp-body ul, .s3d-lp-body ol { margin: 0 0 18px; padding-inline-start: 22px; }
.s3d-lp-body li { margin-bottom: 8px; }
.s3d-lp-body strong { color: var(--fg); font-weight: 700; }
.s3d-lp-body a { text-decoration: underline; }

.s3d-lp-table-wrap { overflow-x: auto; margin: 24px 0 30px; border-radius: 16px; border: 1px solid rgba(var(--ink), 0.1); }
.s3d-lp-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.s3d-lp-table th, .s3d-lp-table td { padding: 12px 16px; text-align: start; border-bottom: 1px solid rgba(var(--ink), 0.08); }
.s3d-lp-table thead th { background: rgba(var(--ink), 0.045); font-weight: 800; color: var(--fg); font-family: 'Archivo', 'Vazirmatn', sans-serif; }
.s3d-lp-table tbody tr:last-child td { border-bottom: none; }
.s3d-lp-table tbody tr:hover { background: rgba(var(--ink), 0.025); }
.s3d-lp-table td.is-accent { color: var(--accent-tint); font-weight: 700; }
.s3d-lp-table .is-check { color: #34d399; }
.s3d-lp-table .is-cross { color: rgba(var(--ink), 0.3); }

.s3d-lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 24px 0 10px; }
.s3d-lp-card {
  display: block; border-radius: 20px; padding: 22px; border: 1px solid rgba(var(--ink), 0.1); background: rgba(var(--ink), 0.03);
  color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.s3d-lp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -14px rgba(0,0,0,0.2); border-color: rgba(var(--accent2-rgb), 0.3); }
.s3d-lp-card-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--accent1-rgb),0.16), rgba(var(--accent2-rgb),0.1)); color: var(--accent-tint); margin-bottom: 14px; }
.s3d-lp-card h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 15px; margin: 0 0 8px; }
.s3d-lp-card p { font-size: 13px; line-height: 1.85; color: rgba(var(--ink), 0.6); margin: 0 0 12px; }
.s3d-lp-card-meta { font-size: 11.5px; font-weight: 700; color: var(--accent-tint); }
.s3d-lp-card-img { width: 100%; aspect-ratio: 4/3; border-radius: 14px; object-fit: cover; margin-bottom: 14px; background: rgba(var(--ink), 0.06); }

.s3d-lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 28px 0; }
.s3d-lp-stat { text-align: center; padding: 20px 12px; border-radius: 16px; background: rgba(var(--ink), 0.03); border: 1px solid rgba(var(--ink), 0.08); }
.s3d-lp-stat b { display: block; font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 22px; background: linear-gradient(135deg, var(--accent1), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; }
.s3d-lp-stat span { font-size: 11.5px; color: rgba(var(--ink), 0.55); }

.s3d-lp-steps { counter-reset: s3d-lp-step; margin: 24px 0; }
.s3d-lp-step { position: relative; padding-inline-start: 46px; margin-bottom: 22px; }
.s3d-lp-step::before {
  counter-increment: s3d-lp-step; content: counter(s3d-lp-step); position: absolute; inset-inline-start: 0; top: 0;
  width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: 'Archivo', 'Vazirmatn', sans-serif; font-size: 14px;
}
.s3d-lp-step h4 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 14.5px; margin: 4px 0 6px; }
.s3d-lp-step p { font-size: 13.5px; color: rgba(var(--ink), 0.62); margin: 0; line-height: 1.85; }

.s3d-lp-cta { margin: 44px 0; padding: 30px 26px; border-radius: 20px; background: linear-gradient(135deg, rgba(var(--accent1-rgb),0.1), rgba(var(--accent2-rgb),0.1)); border: 1px solid rgba(var(--accent2-rgb), 0.25); text-align: center; }
.s3d-lp-cta h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 17px; margin: 0 0 8px; }
.s3d-lp-cta p { font-size: 13.5px; color: rgba(var(--ink), 0.62); margin: 0 0 18px; }
.s3d-lp-cta-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ---- Shop page: hero search + filter sidebar + product grid ----
   Structural pattern (glass filter sections, chip filters, sort select,
   sticky sidebar, responsive grid, empty state) ported from a real
   e-commerce category/listing page; colors use this project's own
   accent1/accent2 tokens rather than borrowing a foreign brand palette. */
.s3d-shop-hero-search {
  max-width: 480px; margin: 22px auto 0; position: relative; display: flex; align-items: center;
  border-radius: 999px; background: rgba(var(--ink), 0.08); border: 1px solid rgba(var(--ink), 0.14);
  backdrop-filter: blur(14px);
}
.s3d-shop-hero-search input {
  flex: 1; background: none; border: none; outline: none; padding: 14px 46px 14px 18px; font-size: 13.5px; color: var(--fg); font-family: inherit;
}
.s3d-shop-hero-search input::placeholder { color: rgba(var(--ink), 0.4); }
.s3d-shop-hero-search svg { position: absolute; inset-inline-end: 16px; color: rgba(var(--ink), 0.45); pointer-events: none; }

.s3d-shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .s3d-shop-layout { grid-template-columns: 1fr; } }
.s3d-shop-filters-col { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 120px); overflow-y: auto; }
@media (max-width: 900px) { .s3d-shop-filters-col { display: none; } }

.s3d-shop-filter-section {
  position: relative; overflow: hidden; border-radius: 22px; padding: 18px;
  border: 1px solid rgba(var(--ink), 0.1); background: rgba(var(--ink), 0.045);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 12px 30px -20px rgba(0,0,0,0.35);
}
.s3d-shop-filter-section::before {
  content: ''; position: absolute; inset-inline: 20px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb), 0.35), transparent);
}
.s3d-shop-filter-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--fg); margin: 0 0 13px; }
.s3d-shop-filter-label i { width: 3px; height: 13px; border-radius: 999px; background: linear-gradient(180deg, var(--accent1), var(--accent2)); display: block; }
.s3d-shop-chip-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s3d-shop-price-list { grid-template-columns: 1fr; }
.s3d-shop-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: start;
  min-height: 40px; padding: 9px 12px; border-radius: 13px; border: 1px solid rgba(var(--ink), 0.1);
  background: rgba(var(--ink), 0.03); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; color: rgba(var(--ink), 0.68); cursor: pointer; transition: all .18s; font-family: inherit;
}
.s3d-shop-chip:hover { background: rgba(var(--ink), 0.08); color: var(--fg); }
.s3d-shop-chip.is-active {
  border-color: rgba(var(--accent2-rgb), 0.45);
  background: linear-gradient(180deg, rgba(var(--accent1-rgb),0.28), rgba(var(--accent2-rgb),0.16));
  color: var(--accent-tint); font-weight: 700;
  box-shadow: 0 4px 14px -6px rgba(var(--accent2-rgb), 0.5), inset 0 1px 0 rgba(255,255,255,0.12);
}
.s3d-shop-chip-count { font-size: 10.5px; color: rgba(var(--ink), 0.4); }
.s3d-shop-chip.is-active .s3d-shop-chip-count { color: var(--accent-tint); }
.s3d-shop-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s3d-shop-switch-row span { font-size: 12.5px; font-weight: 600; color: rgba(var(--ink), 0.7); }
.s3d-shop-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; border: none; cursor: pointer; background: rgba(var(--ink), 0.15); flex-shrink: 0; transition: background .2s; }
.s3d-shop-switch::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: inset-inline-start .2s; }
.s3d-shop-switch.is-on { background: linear-gradient(135deg, var(--accent1), var(--accent2)); }
.s3d-shop-switch.is-on::after { inset-inline-start: 18px; }
.s3d-shop-clear-btn { width: 100%; text-align: center; padding: 9px; border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--accent3); background: rgba(var(--accent3-rgb), 0.1); border: 1px solid rgba(var(--accent3-rgb), 0.25); cursor: pointer; }

.s3d-shop-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.s3d-shop-topbar-left { display: flex; align-items: center; gap: 10px; }
.s3d-shop-filter-trigger { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(var(--ink), 0.14); background: rgba(var(--ink), 0.05); font-size: 12.5px; font-weight: 700; color: var(--fg); cursor: pointer; position: relative; font-family: inherit; }
@media (max-width: 900px) { .s3d-shop-filter-trigger { display: flex; } }
.s3d-shop-filter-badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--accent3); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.s3d-shop-result-count { font-size: 12.5px; color: rgba(var(--ink), 0.55); }
.s3d-shop-sort-select { min-width: 160px; }

.s3d-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .s3d-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .s3d-shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
.s3d-shop-card {
  position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(var(--ink), 0.1);
  background: rgba(var(--ink), 0.03); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.s3d-shop-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -18px rgba(0,0,0,0.35); }
.s3d-shop-card-media { position: relative; aspect-ratio: 1; background: rgba(var(--ink), 0.06); overflow: hidden; }
.s3d-shop-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.s3d-shop-card:hover .s3d-shop-card-media img { transform: scale(1.06); }
.s3d-shop-card-badge { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--accent3); padding: 3px 10px; border-radius: 999px; }
.s3d-shop-card-wish { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.s3d-shop-card:hover .s3d-shop-card-wish, .s3d-shop-card-wish.is-on { opacity: 1; transform: translateY(0); }
.s3d-shop-card-wish.is-on svg { fill: var(--accent3); color: var(--accent3); }
.s3d-shop-card-body { padding: 14px; }
.s3d-shop-card-cat { font-size: 10.5px; color: var(--accent-tint); font-weight: 700; margin: 0 0 5px; }
.s3d-shop-card-title { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 13.5px; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.s3d-shop-card-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.s3d-shop-card-price { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 14px; color: var(--fg); }
.s3d-shop-card-oldprice { font-size: 11.5px; color: rgba(var(--ink), 0.4); text-decoration: line-through; }
.s3d-shop-card-addbtn { width: 100%; padding: 9px; border-radius: 11px; font-size: 12px; font-weight: 700; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff; transition: transform .15s, opacity .15s; }
.s3d-shop-card-addbtn:hover { transform: translateY(-1px); }
.s3d-shop-card-addbtn:disabled { opacity: .7; cursor: default; }

.s3d-shop-empty { grid-column: 1 / -1; text-align: center; padding: 64px 24px; border-radius: 20px; background: rgba(var(--ink), 0.03); border: 1px dashed rgba(var(--ink), 0.15); }
.s3d-shop-empty svg { color: rgba(var(--ink), 0.22); margin-bottom: 14px; }
.s3d-shop-empty p { font-size: 13px; color: rgba(var(--ink), 0.5); margin: 0 0 14px; }

.s3d-shop-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; flex-wrap: wrap; }
.s3d-shop-page-btn {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(var(--ink), 0.12);
  background: rgba(var(--ink), 0.03); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s; display: flex; align-items: center; justify-content: center;
}
.s3d-shop-page-btn:hover:not(:disabled) { background: rgba(var(--ink), 0.08); }
.s3d-shop-page-btn.is-active { background: var(--accent-soft); border-color: var(--accent-soft); color: #fff; }
.s3d-shop-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.s3d-shop-page-ellipsis { padding: 0 4px; color: rgba(var(--ink), 0.4); font-size: 13px; }

.s3d-shop-sheet-backdrop { position: fixed; inset: 0; z-index: 210; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.s3d-shop-sheet-backdrop.is-open { opacity: 1; visibility: visible; }
.s3d-shop-sheet {
  position: fixed; z-index: 211; inset-inline-start: 0; top: 0; bottom: 0; width: min(320px, 86vw);
  background: rgba(var(--bg-rgb), 0.99); backdrop-filter: blur(24px); border-inline-end: 1px solid rgba(var(--ink), 0.1);
  padding: 20px; overflow-y: auto; transform: translateX(-104%); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
:root[dir="rtl"] .s3d-shop-sheet, .s3d-shop-sheet { transform: translateX(104%); }
.s3d-shop-sheet.is-open { transform: translateX(0); }
.s3d-shop-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.s3d-shop-sheet-head h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 15px; margin: 0; }
.s3d-shop-sheet-close { width: 32px; height: 32px; border-radius: 10px; border: none; background: rgba(var(--ink), 0.08); color: var(--fg); cursor: pointer; }
.s3d-shop-sheet .s3d-shop-filters-col { display: flex; position: static; max-height: none; overflow: visible; }

/* ---- Header glass action cluster (search / notifications / cart / account) ----
   Each icon is its own frosted-glass capsule (iOS Control-Center style),
   not just a plain hover state on the shared header pill -- per explicit
   design direction, distinct from Beauty Market's own container-level glass. */
.s3d-hglass-cluster { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.s3d-search-bar-trigger {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--ink), 0.055); border: 1px solid rgba(var(--ink), 0.12); color: rgba(var(--ink), 0.55);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 10px rgba(0,0,0,0.06);
  transition: background .2s, transform .2s; font-size: 13px; width: 190px;
}
.s3d-search-bar-trigger:hover { background: rgba(var(--ink), 0.1); transform: translateY(-1px); }
.s3d-search-bar-trigger .placeholder { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3d-search-bar-trigger .kbd {
  font-size: 10.5px; font-weight: 700; color: rgba(var(--ink), 0.45); border: 1px solid rgba(var(--ink), 0.16);
  border-radius: 6px; padding: 2px 6px; font-family: 'Archivo', sans-serif; flex-shrink: 0;
}
@media (max-width: 900px) {
  .s3d-search-bar-trigger { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; }
  .s3d-search-bar-trigger .placeholder, .s3d-search-bar-trigger .kbd { display: none; }
}
.s3d-hglass-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; cursor: pointer;
  color: var(--fg); background: rgba(var(--ink), 0.055); border: 1px solid rgba(var(--ink), 0.12);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 10px rgba(0,0,0,0.06);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.s3d-hglass-btn:hover { background: rgba(var(--ink), 0.1); transform: translateY(-1px); }
.s3d-hglass-btn:active { transform: translateY(0); }
@media (max-width: 640px) { .s3d-hglass-btn { width: 36px; height: 36px; border-radius: 12px; } }
.s3d-hglass-badge {
  position: absolute; top: -5px; inset-inline-end: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; font-family: 'Archivo', 'Vazirmatn', sans-serif;
  background: linear-gradient(135deg, var(--accent3), #c22617); box-shadow: 0 0 0 2px var(--page-bg), 0 0 8px 1px rgba(var(--accent3-rgb),0.5);
}
.s3d-hglass-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(var(--accent2-rgb), 0.55); }

/* ---- Signed-in header chip (name + avatar + status dot) ----
   Pattern: [name] [avatar w/ pulsing status dot], collapsing to just the
   avatar on narrow screens. No plan-tier badge -- this project has no
   subscription tiers to attach one to. */
.s3d-hchip {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 6px 0 14px; border-radius: 999px;
  background: rgba(var(--ink), 0.055); border: 1px solid rgba(var(--ink), 0.12); color: var(--fg);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 10px rgba(0,0,0,0.06);
  transition: background .2s, transform .2s;
}
.s3d-hchip:hover { background: rgba(var(--ink), 0.1); transform: translateY(-1px); }
.s3d-hchip-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
@media (max-width: 720px) { .s3d-hchip-name { display: none; } .s3d-hchip { padding: 0; width: 40px; height: 40px; justify-content: center; } }
.s3d-hchip-avatar-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; }
.s3d-hchip-dot {
  position: absolute; bottom: -1px; inset-inline-end: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 2px var(--page-bg), 0 0 6px #34d399; animation: dotPulse 2.5s ease-in-out infinite;
}

/* ---- Footer contact row (single-row pill chips, replaces the old
   stacked list) -- DOM order is always [text, icon] regardless of content
   language, so in this RTL page the icon consistently lands on the visual
   left of every chip with no per-item dir="ltr" special-casing. ---- */
.s3d-footer-contact-row { display: flex; flex-wrap: wrap; gap: 10px; }
.s3d-footer-contact-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px;
  border: 1px solid rgba(var(--ink), 0.1); background: rgba(var(--ink), 0.03); color: rgba(var(--ink), 0.75);
  font-size: 13px; transition: border-color .25s, color .25s;
}
.s3d-footer-contact-chip:hover { border-color: rgba(var(--accent1-rgb), 0.35); color: var(--fg); }
.s3d-footer-contact-chip .icn {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(var(--accent1-rgb),0.18), rgba(var(--accent2-rgb),0.1)); border: 1px solid rgba(var(--accent1-rgb),0.22);
}
.s3d-footer-contact-chip.is-iconOnly { padding: 8px; }

/* ---- Footer bottom bar (scroll-to-top + theme toggle + legal links + copyright) ---- */
.s3d-footer-bottombar {
  border-top: 1px solid rgba(var(--ink), 0.08); margin-top: 28px; padding-top: 18px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 11.5px; color: rgba(var(--ink), 0.4);
}
.s3d-footer-bottombar-links { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; color: rgba(var(--ink), 0.6); }
.s3d-footer-bottombar-links a { color: inherit; }
.s3d-footer-bottombar-links a:hover { color: var(--fg); }
.s3d-footer-bottombar-controls { display: flex; align-items: center; gap: 12px; }
.s3d-footer-bottombar-divider { width: 1px; height: 16px; background: rgba(var(--ink), 0.12); }
.s3d-footer-scrolltop {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(var(--accent2-rgb), 0.35); background: rgba(var(--accent2-rgb), 0.1); color: var(--accent-tint);
  cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.s3d-footer-scrolltop:hover { transform: translateY(-3px); box-shadow: 0 8px 18px -6px rgba(var(--accent2-rgb),0.5); }
.s3d-footer-theme-pill {
  position: relative; width: 52px; height: 28px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--accent2-rgb), 0.35); background: rgba(var(--accent2-rgb), 0.08);
}
.s3d-footer-theme-pill svg { position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--accent-tint); }
.s3d-footer-theme-pill .sun { inset-inline-start: 7px; }
.s3d-footer-theme-pill .moon { inset-inline-end: 7px; }
.s3d-footer-theme-knob {
  position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent2);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: inset-inline-start .25s;
}

/* ---- Search modal ---- */
.s3d-search-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.s3d-search-dialog {
  position: fixed; inset-inline: 16px; top: 10dvh; z-index: 201; max-width: 560px; margin: 0 auto;
  border-radius: 20px; overflow: hidden; color: #f2f0ff;
  border: 1px solid rgba(var(--accent2-rgb), 0.35);
  background: linear-gradient(150deg, rgba(24,18,36,0.97), rgba(10,8,15,0.98));
  box-shadow: 0 32px 80px -20px rgba(0,0,0,0.6);
  backdrop-filter: blur(26px) saturate(160%);
}
.s3d-search-hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb),0.7), rgba(var(--accent-tint-rgb,201,169,255),0.8), rgba(var(--accent2-rgb),0.7), transparent); }
.s3d-search-input-row { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.s3d-search-icon-chip { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(var(--accent2-rgb),0.16); border: 1px solid rgba(var(--accent2-rgb),0.3); color: var(--accent-tint); }
.s3d-search-input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 15px; font-family: 'Vazirmatn', sans-serif; }
.s3d-search-input::placeholder { color: rgba(255,255,255,0.35); }
.s3d-search-close { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); cursor: pointer; flex-shrink: 0; }
.s3d-search-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.s3d-search-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; color: inherit; }
.s3d-search-row:hover { background: rgba(255,255,255,0.06); }
.s3d-search-row-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.06); }
.s3d-search-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s3d-search-row-title { font-size: 13.5px; font-weight: 700; margin: 0 0 3px; }
.s3d-search-row-price { font-size: 12px; color: rgba(255,255,255,0.5); }
.s3d-search-empty { padding: 40px 20px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.4); }
.s3d-search-hint { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px; color: rgba(255,255,255,0.35); text-align: center; }
.s3d-search-section-label { padding: 4px 10px 10px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4); }
.s3d-search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 16px; }
.s3d-search-chip {
  font-size: 12px; font-weight: 600; padding: 7px 15px; border-radius: 999px; cursor: pointer; color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
}
.s3d-search-chip:hover { background: rgba(var(--accent2-rgb),0.18); border-color: rgba(var(--accent2-rgb),0.4); color: #fff; }
.s3d-search-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 10px 12px; }

/* ---- Notifications dropdown ---- */
.s3d-notif-wrap { position: relative; }
.s3d-notif-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: min(360px, 88vw); max-height: 440px;
  overflow-y: auto; border-radius: 18px; z-index: 120;
  border: 1px solid rgba(var(--ink), 0.1); background: rgba(var(--bg-rgb), 0.98);
  backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 28px 60px -12px rgba(0,0,0,0.3);
}
.s3d-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid rgba(var(--ink),0.08); }
.s3d-notif-head h4 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 14px; margin: 0; }
.s3d-notif-head button { background: none; border: none; color: var(--accent-tint); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.s3d-notif-item { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(var(--ink), 0.05); cursor: pointer; }
.s3d-notif-item:last-child { border-bottom: none; }
.s3d-notif-item:hover { background: rgba(var(--ink), 0.03); }
.s3d-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); flex-shrink: 0; margin-top: 6px; }
.s3d-notif-item.is-read .s3d-notif-dot { background: transparent; }
.s3d-notif-title { font-size: 13px; font-weight: 700; margin: 0 0 4px; color: var(--fg); }
.s3d-notif-body { font-size: 12px; line-height: 1.7; color: rgba(var(--ink), 0.55); margin: 0 0 6px; }
.s3d-notif-time { font-size: 10.5px; color: rgba(var(--ink), 0.4); }
.s3d-notif-empty { padding: 46px 20px; text-align: center; font-size: 12.5px; color: rgba(var(--ink), 0.45); }

/* ---- Avatar picker (profile panel) ---- */
.s3d-avpick-current { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.s3d-avpick-current-img {
  width: 74px; height: 74px; border-radius: 50%; object-fit: cover; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(var(--accent2-rgb),0.5), 0 12px 28px -10px rgba(var(--accent2-rgb),0.5);
  transition: transform .25s;
}
.s3d-avpick-current-img:hover { transform: scale(1.05) rotate(-2deg); }
.s3d-avpick-change-btn {
  font-size: 12.5px; font-weight: 700; color: #fff; cursor: pointer; border: none;
  background: linear-gradient(135deg, var(--accent1), var(--accent2)); padding: 10px 20px; border-radius: 999px;
}
.s3d-avpick-modal-backdrop { position: fixed; inset: 0; z-index: 210; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
.s3d-avpick-modal {
  position: fixed; inset-inline: 16px; top: 6dvh; bottom: 6dvh; z-index: 211; max-width: 640px; margin: 0 auto;
  border-radius: 26px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid rgba(var(--accent2-rgb), 0.3);
  background: linear-gradient(160deg, rgba(var(--ink),0.06), rgba(var(--ink),0.02));
  backdrop-filter: blur(26px) saturate(160%); box-shadow: 0 40px 90px -20px rgba(0,0,0,0.5);
}
.s3d-avpick-modal-head { padding: 24px 26px 18px; text-align: center; position: relative; }
.s3d-avpick-modal-head h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.s3d-avpick-modal-head p { font-size: 12.5px; color: rgba(var(--ink), 0.55); margin: 0; }
.s3d-avpick-modal-close { position: absolute; top: 20px; inset-inline-end: 22px; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(var(--ink),0.06); border: 1px solid rgba(var(--ink),0.12); color: var(--fg); cursor: pointer; }
.s3d-avpick-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 26px 22px; }
.s3d-avpick-preview-img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px rgba(var(--accent2-rgb),0.5), 0 18px 40px -14px rgba(var(--accent2-rgb),0.55);
  transition: box-shadow .3s;
  animation: s3dAvatarPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes s3dAvatarPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.s3d-avpick-grid { flex: 1; overflow-y: auto; padding: 6px 22px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; }
.s3d-avpick-cell {
  position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; cursor: pointer; padding: 0; border: none;
  background: rgba(var(--ink), 0.05); transition: transform .2s, box-shadow .2s;
}
.s3d-avpick-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s; }
.s3d-avpick-cell:hover { transform: translateY(-3px) scale(1.05); z-index: 2; }
.s3d-avpick-cell:hover img { filter: brightness(1.08); }
.s3d-avpick-cell.is-selected { box-shadow: 0 0 0 3px var(--accent2), 0 10px 24px -8px rgba(var(--accent2-rgb),0.6); }
.s3d-avpick-cell.is-selected::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; background: rgba(var(--accent2-rgb), 0.22);
  display: flex; align-items: center; justify-content: center;
}
.s3d-avpick-check {
  position: absolute; bottom: 4px; inset-inline-end: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent2); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 1;
}
.s3d-avpick-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 26px; border-top: 1px solid rgba(var(--ink), 0.08); }
.s3d-avpick-shuffle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: rgba(var(--ink),0.65); background: rgba(var(--ink),0.05); border: 1px solid rgba(var(--ink),0.12); padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.s3d-avpick-shuffle:hover { color: var(--fg); }

/* ---- Magazine hero (glass "dynamic island" card, ambient orbs) ---- */
.s3d-mag-hero-wrap { position: relative; overflow: hidden; padding: 150px 20px 30px; text-align: center; }
.s3d-mag-hero-orb { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .55; z-index: 0; }
.s3d-mag-hero-orb.o1 { width: 22rem; height: 22rem; top: 8%; inset-inline-start: -6rem; background: rgba(var(--accent2-rgb), 0.28); }
.s3d-mag-hero-orb.o2 { width: 18rem; height: 18rem; top: 30%; inset-inline-end: -5rem; background: rgba(var(--accent1-rgb), 0.2); }
.s3d-mag-hero-card {
  position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 30px 34px;
  border-radius: 34px; border: 1px solid rgba(var(--ink), 0.08);
  background: rgba(var(--ink), 0.035); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.s3d-mag-hero-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.s3d-mag-hero-dots span { width: 5px; height: 5px; border-radius: 50%; }
.s3d-mag-hero-dots span:nth-child(1) { background: var(--accent1); }
.s3d-mag-hero-dots span:nth-child(2) { background: var(--accent2); }
.s3d-mag-hero-dots span:nth-child(3) { background: var(--accent3); }
.s3d-mag-hero-dots i { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ink),0.2)); }
.s3d-mag-hero-dots i.r { background: linear-gradient(90deg, rgba(var(--ink),0.2), transparent); }
.s3d-mag-hero-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--accent-tint);
  background: rgba(var(--accent2-rgb), 0.12); border: 1px solid rgba(var(--accent2-rgb), 0.28); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.s3d-mag-hero-card h1 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: clamp(26px,3.6vw,38px); line-height: 1.2; margin: 0 0 14px; }
:root[data-theme="light"] .s3d-mag-hero-card h1 { color: var(--fg); }
:root:not([data-theme="light"]) .s3d-mag-hero-card h1 span { background: linear-gradient(180deg, #fff, rgba(255,255,255,0.6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3d-mag-hero-card p { font-size: 14px; line-height: 1.9; color: rgba(var(--ink), 0.6); max-width: 46ch; margin: 0 auto; }

/* ---- Mini-cart hover panel (hover OR click the cart icon, glassy
   iPhone-style, opens/closes with a real spring-eased fade+scale) ---- */
.s3d-minicart-wrap { position: relative; }
.s3d-minicart-panel {
  position: absolute; top: calc(100% + 14px); inset-inline-end: 0; width: min(400px, 92vw); max-height: 560px;
  overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; z-index: 120;
  border: 1px solid rgba(var(--ink), 0.1); background: rgba(var(--bg-rgb), 0.98);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 30px 70px -16px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.1);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.95); transform-origin: top right;
  transition: opacity .32s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
}
.s3d-minicart-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.s3d-minicart-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px 13px; flex-shrink: 0; border-bottom: 1px solid rgba(var(--ink), 0.06); }
.s3d-minicart-head h4 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 14.5px; margin: 0; display: flex; align-items: center; gap: 8px; }
.s3d-minicart-count-chip { font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent1), var(--accent2)); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.s3d-minicart-clear { font-size: 11px; font-weight: 700; color: rgba(var(--ink), 0.45); background: none; border: none; cursor: pointer; transition: color .15s; }
.s3d-minicart-clear:hover { color: var(--accent3); }
.s3d-minicart-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; max-height: 340px; overflow-y: auto; }
.s3d-minicart-row {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; transition: background .15s;
  opacity: 0; transform: translateY(6px); animation: s3dMiniRowIn .34s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes s3dMiniRowIn { to { opacity: 1; transform: translateY(0); } }
.s3d-minicart-row:hover { background: rgba(var(--ink), 0.045); }
.s3d-minicart-row.is-removing { animation: s3dMiniRowOut .22s ease forwards; }
@keyframes s3dMiniRowOut { to { opacity: 0; transform: translateX(14px) scale(.92); } }
.s3d-minicart-img-wrap { position: relative; flex-shrink: 0; }
.s3d-minicart-img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; background: rgba(var(--ink),0.06); display: block; }
.s3d-minicart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.s3d-minicart-title { font-size: 12.5px; font-weight: 700; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3d-minicart-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s3d-minicart-price { font-size: 12px; font-weight: 700; color: var(--accent-tint); font-family: 'Archivo', 'Vazirmatn', sans-serif; }
.s3d-minicart-unit { font-size: 10.5px; color: rgba(var(--ink), 0.4); font-weight: 400; margin-inline-start: 5px; }
.s3d-minicart-qty { display: flex; align-items: center; gap: 2px; background: rgba(var(--ink), 0.05); border-radius: 9px; padding: 2px; }
.s3d-minicart-qty button {
  width: 20px; height: 20px; border-radius: 6px; border: none; background: none; color: var(--fg); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: background .15s;
}
.s3d-minicart-qty button:hover:not(:disabled) { background: rgba(var(--ink), 0.1); }
.s3d-minicart-qty button:disabled { opacity: .35; cursor: not-allowed; }
.s3d-minicart-qty span { min-width: 18px; text-align: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s3d-minicart-remove {
  width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0; border: none; background: rgba(var(--ink), 0.05);
  color: rgba(var(--ink), 0.4); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, color .15s, transform .15s; align-self: flex-start;
}
.s3d-minicart-remove:hover { background: rgba(var(--accent3-rgb), 0.14); color: var(--accent3); transform: scale(1.08); }
.s3d-minicart-empty { padding: 50px 24px; text-align: center; }
.s3d-minicart-empty svg { color: rgba(var(--ink), 0.25); margin-bottom: 14px; }
.s3d-minicart-empty p { font-size: 12.5px; color: rgba(var(--ink), 0.45); margin: 0 0 16px; }
.s3d-minicart-empty a { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent1), var(--accent2)); padding: 9px 20px; border-radius: 999px; }
.s3d-minicart-skel-row { display: flex; align-items: center; gap: 12px; padding: 10px; }
.s3d-minicart-skel-box { border-radius: 14px; background: linear-gradient(90deg, rgba(var(--ink),0.06) 25%, rgba(var(--ink),0.1) 37%, rgba(var(--ink),0.06) 63%); background-size: 400% 100%; animation: s3dMiniShimmer 1.4s ease infinite; }
@keyframes s3dMiniShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.s3d-minicart-foot { padding: 14px 18px 16px; border-top: 1px solid rgba(var(--ink), 0.08); margin-top: 4px; flex-shrink: 0; }
.s3d-minicart-total { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 12px; }
.s3d-minicart-total b { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 16px; }
.s3d-minicart-actions { display: flex; gap: 8px; }
.s3d-minicart-btn { flex: 1; text-align: center; padding: 11px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; }
.s3d-minicart-btn.is-outline { background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.14); color: var(--fg); }
.s3d-minicart-btn.is-solid { background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff; box-shadow: 0 6px 18px -6px rgba(var(--accent1-rgb), 0.6); }
.s3d-minicart-btn:hover { transform: translateY(-1px); }

/* ---- Wishlist heart toggle (product cards / product-detail buy row) ---- */
.s3d-wish-btn {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--ink), 0.055); border: 1px solid rgba(var(--ink), 0.12); color: rgba(var(--ink), 0.55); cursor: pointer;
  transition: transform .18s, background .18s, color .18s;
}
.s3d-wish-btn svg { transition: fill .18s; }
.s3d-wish-btn:hover { transform: translateY(-1px); color: var(--accent3); }
.s3d-wish-btn.is-on { color: var(--accent3); background: rgba(var(--accent3-rgb), 0.12); border-color: rgba(var(--accent3-rgb), 0.3); }
.s3d-wish-btn.is-on svg { fill: var(--accent3); }
.s3d-wish-btn.is-anim svg { animation: s3dWishPop .4s cubic-bezier(.34,1.56,.64,1); }
.s3d-wish-btn.is-sm { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
@keyframes s3dWishPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---- Hero "see products" pill: gentle down-arrow bounce ---- */
@keyframes s3dArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---- Wishlist tab (account dashboard) ---- */
.s3d-wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.s3d-wish-card { border-radius: 16px; border: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--ink), 0.03); overflow: hidden; position: relative; }
.s3d-wish-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: rgba(var(--ink),0.06); }
.s3d-wish-card-body { padding: 12px; }
.s3d-wish-card-title { font-size: 12.5px; font-weight: 700; margin: 0 0 6px; display: block; }
.s3d-wish-card-price { font-size: 12px; color: rgba(var(--ink), 0.6); }
.s3d-wish-card-remove { position: absolute; top: 8px; inset-inline-start: 8px; width: 30px; height: 30px; border-radius: 9px; border: none; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); }

/* ---- Jalali (Persian) date picker ---- */
.s3d-jal-input-row { position: relative; }
.s3d-jal-trigger { width: 100%; text-align: start; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s3d-jal-panel {
  position: fixed; z-index: 300; width: 300px; border-radius: 20px; padding: 14px;
  border: 1px solid rgba(var(--ink), 0.1); background: rgba(var(--bg-rgb), 0.99);
  backdrop-filter: blur(26px) saturate(170%); box-shadow: 0 30px 70px -16px rgba(0,0,0,0.35);
  animation: s3dJalPop .18s ease both;
}
@keyframes s3dJalPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.s3d-jal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.s3d-jal-nav { width: 30px; height: 30px; border-radius: 9px; border: none; background: rgba(var(--ink),0.06); color: var(--fg); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.s3d-jal-nav:hover { background: rgba(var(--ink), 0.1); }
.s3d-jal-title { background: none; border: none; font-weight: 800; font-size: 13.5px; color: var(--fg); cursor: pointer; font-family: 'Archivo', 'Vazirmatn', sans-serif; }
.s3d-jal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.s3d-jal-weekdays span { text-align: center; font-size: 10.5px; color: rgba(var(--ink), 0.45); padding: 4px 0; }
.s3d-jal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.s3d-jal-cell { aspect-ratio: 1; border-radius: 10px; border: none; background: none; color: var(--fg); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.s3d-jal-cell:hover { background: rgba(var(--ink), 0.08); }
.s3d-jal-cell.is-empty { pointer-events: none; }
.s3d-jal-cell.is-selected { background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff; font-weight: 800; }
.s3d-jal-grid-month, .s3d-jal-grid-year { grid-template-columns: repeat(3, 1fr); max-height: 240px; overflow-y: auto; }
.s3d-jal-cell-wide { aspect-ratio: unset; padding: 12px 4px; }

/* ---- Gender pills (profile form) ---- */
.s3d-gender-pills { display: flex; gap: 8px; }
.s3d-gender-pill {
  flex: 1; padding: 11px 10px; border-radius: 12px; border: 1px solid rgba(var(--ink), 0.14); background: rgba(var(--ink), 0.04);
  color: rgba(var(--ink), 0.65); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.s3d-gender-pill:hover { background: rgba(var(--ink), 0.08); }
.s3d-gender-pill.is-on { background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff; border-color: transparent; }

/* ---- Account sidebar badge + VIP/support tiles ---- */
.s3d-acct-navlink { position: relative; }
.s3d-acct-navlink-badge {
  margin-inline-start: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent2); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.s3d-acct-vip-card {
  border-radius: 18px; padding: 26px 22px; text-align: center; border: 1px solid rgba(var(--accent2-rgb), 0.25);
  background: linear-gradient(160deg, rgba(var(--accent2-rgb),0.1), rgba(var(--accent1-rgb),0.05));
}
.s3d-acct-vip-card h3 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 16px; margin: 0 0 8px; }
.s3d-acct-vip-card p { font-size: 13px; color: rgba(var(--ink), 0.6); margin: 0; line-height: 1.8; }
.s3d-acct-vip-soon { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 700; color: var(--accent-tint); background: rgba(var(--accent2-rgb), 0.14); padding: 6px 16px; border-radius: 999px; }

/* ---- Footer sitemap grid: fixed column count so "تماس" always sits in
   the same row as the other columns instead of wrapping onto its own row
   underneath (auto-fit + a 200px minimum could not fit all 6 columns). ---- */
.s3d-footer-grid { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 28px; }
@media (max-width: 900px) { .s3d-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .s3d-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .s3d-footer-grid { grid-template-columns: 1fr; } }

/* ---- Custom select (province/city etc.): theme-aware, animated ---- */
.s3d-csel-wrap { position: relative; }
.s3d-csel-native-hidden { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden; }
.s3d-csel-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: start; cursor: pointer; font-family: inherit; font-size: 13.5px; color: var(--fg);
  padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(var(--ink), 0.14); background: rgba(var(--ink), 0.04);
  transition: border-color .18s, background .18s;
}
.s3d-csel-trigger:hover { background: rgba(var(--ink), 0.07); }
.s3d-csel-trigger.is-disabled { opacity: .5; cursor: not-allowed; }
.s3d-csel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3d-csel-label.is-placeholder { color: rgba(var(--ink), 0.4); }
.s3d-csel-chevron { flex-shrink: 0; color: rgba(var(--ink), 0.5); transition: transform .2s; }
.s3d-csel-trigger[aria-expanded="true"] .s3d-csel-chevron { transform: rotate(180deg); }
.s3d-csel-panel {
  position: fixed; z-index: 260; max-height: 280px; overflow-y: auto; padding: 6px;
  border-radius: 14px; border: 1px solid rgba(var(--ink), 0.12); background: rgba(var(--bg-rgb), 0.99);
  backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 24px 60px -14px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .16s ease, transform .16s ease;
}
.s3d-csel-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.s3d-csel-opt {
  display: block; width: 100%; text-align: start; padding: 9px 12px; border-radius: 9px; border: none; background: none;
  color: var(--fg); font-size: 13px; font-family: inherit; cursor: pointer; transition: background .12s;
}
.s3d-csel-opt:hover { background: rgba(var(--ink), 0.07); }
.s3d-csel-opt.is-selected { background: rgba(var(--accent2-rgb), 0.14); color: var(--accent-tint); font-weight: 700; }
.s3d-csel-opt.is-disabled { opacity: .4; cursor: not-allowed; }

/* ---- Shop hero v2: full-bleed gradient banner (structural pattern
   ported from a real e-commerce hero -- diagonal light streaks, radial
   glow, top hairline, eyebrow pill, centered search -- using this
   project's own accent1/accent2 gradient, not a borrowed brand color) ---- */
.s3d-shop-hero2 {
  position: relative; overflow: hidden; padding: 156px 20px 96px; text-align: center;
  background: linear-gradient(155deg, var(--hero-a, var(--accent1)) 0%, var(--hero-b, var(--accent2)) 65%, var(--hero-c, #2a1f5c) 100%);
}
.s3d-shop-hero2::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
}
.s3d-shop-hero2::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 46px);
}
.s3d-shop-hero2-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.s3d-shop-hero2-glow.g1 { width: 24rem; height: 24rem; top: -8rem; inset-inline-end: -6rem; background: rgba(255,255,255,0.18); }
.s3d-shop-hero2-glow.g2 { width: 18rem; height: 18rem; bottom: -9rem; inset-inline-start: -4rem; background: rgba(var(--accent3-rgb), 0.22); }
.s3d-shop-hero2-content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.s3d-shop-hero2-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); padding: 7px 16px; border-radius: 999px;
  backdrop-filter: blur(8px); margin-bottom: 20px;
}
.s3d-shop-hero2 h1 {
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: clamp(28px,4vw,42px); line-height: 1.25;
  color: #fff; margin: 0 0 14px; text-wrap: balance;
}
.s3d-shop-hero2 p { font-size: 14.5px; line-height: 1.9; color: rgba(255,255,255,0.82); max-width: 50ch; margin: 0 auto; }
.s3d-shop-hero2-search {
  max-width: 480px; margin: 26px auto 0; position: relative; display: flex; align-items: center;
  border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(16px); box-shadow: 0 16px 40px -14px rgba(0,0,0,0.35);
}
.s3d-shop-hero2-search input { flex: 1; background: none; border: none; outline: none; padding: 15px 48px 15px 20px; font-size: 13.5px; color: #fff; font-family: inherit; }
.s3d-shop-hero2-search input::placeholder { color: rgba(255,255,255,0.65); }
.s3d-shop-hero2-search svg { position: absolute; inset-inline-end: 17px; color: rgba(255,255,255,0.75); pointer-events: none; }
.s3d-shop-hero2-stats { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.s3d-shop-hero2-stat { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 8px 14px; border-radius: 999px; }
.s3d-shop-hero2-stat b { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; color: #fff; font-size: 13.5px; }

/* ---- Shop product card v2 (structural pattern ported from a real
   e-commerce product card: badge, hover wishlist+quick-view, category
   row with icon avatar, price block, full-width add-to-cart -- star
   ratings/stock-count/loyalty-points omitted since this shop has no real
   review, inventory-count, or loyalty data to show honestly) ---- */
.s3d-pcard {
  position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(var(--ink), 0.09);
  background: var(--page-bg, rgba(var(--ink),0.02));
  background-image: linear-gradient(160deg, rgba(var(--ink),0.035), transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 0 22px -16px rgba(var(--accent2-rgb), 0.5);
  transition: transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s;
}
.s3d-pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(0,0,0,0.3), 0 0 26px -12px rgba(var(--accent2-rgb), 0.55); }
.s3d-pcard-media { display: block; position: relative; aspect-ratio: 1/1; background: rgba(var(--ink), 0.06); overflow: hidden; }
.s3d-pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.s3d-pcard:hover .s3d-pcard-media img { transform: scale(1.06); }
.s3d-pcard-badge { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 10px; font-weight: 800; color: #fff; background: var(--accent3); padding: 3px 10px; border-radius: 999px; z-index: 1; }
.s3d-pcard-actions { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.s3d-pcard:hover .s3d-pcard-actions, .s3d-pcard-actions.is-touch-visible { opacity: 1; transform: translateY(0); }
.s3d-pcard-action-btn {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.42); backdrop-filter: blur(6px);
  color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s;
}
.s3d-pcard-action-btn:hover { background: rgba(0,0,0,0.6); }
.s3d-pcard-action-btn.is-on svg { fill: var(--accent3); color: var(--accent3); }
@media (hover: none) { .s3d-pcard-actions { opacity: 1; transform: none; } }
.s3d-pcard-body { padding: 16px 17px 17px; display: flex; flex-direction: column; }
.s3d-pcard-cat-row { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.s3d-pcard-cat-avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--accent1), var(--accent2)); flex-shrink: 0; }
.s3d-pcard-cat-label { font-size: 11.5px; font-weight: 700; color: rgba(var(--ink), 0.5); }
.s3d-pcard-title { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; color: var(--fg); }
.s3d-pcard-discount-row { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 4px; }
.s3d-pcard-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 13px; flex-wrap: wrap; margin-top: auto; }
.s3d-pcard-price { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 18px; color: var(--fg); }
.s3d-pcard-oldprice { font-size: 12.5px; color: rgba(var(--ink), 0.4); text-decoration: line-through; }
.s3d-pcard-addbtn { width: 100%; padding: 11px; border-radius: 11px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff; transition: transform .15s, opacity .15s; }
.s3d-pcard-addbtn:hover { transform: translateY(-1px); }
.s3d-pcard-addbtn:disabled { opacity: .7; cursor: default; }

/* ---- Quick view modal ---- */
.s3d-qv-backdrop { position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,0.62); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.s3d-qv-backdrop.is-open { opacity: 1; visibility: visible; }
.s3d-qv-modal {
  position: fixed; z-index: 261; inset-inline: 16px; top: 50%; max-width: 640px; margin-inline: auto;
  border-radius: 24px; overflow: hidden; border: 1px solid rgba(var(--ink), 0.1);
  background: rgba(var(--bg-rgb), 0.99); backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.95); transition: opacity .22s, transform .22s, visibility .22s;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .s3d-qv-modal { grid-template-columns: 1fr; max-height: 86vh; overflow-y: auto; } }
.s3d-qv-modal.is-open { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.s3d-qv-media { aspect-ratio: 4/5; background: rgba(var(--ink), 0.06); }
.s3d-qv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s3d-qv-body { padding: 26px; position: relative; display: flex; flex-direction: column; }
.s3d-qv-close { position: absolute; top: 16px; inset-inline-end: 16px; width: 32px; height: 32px; border-radius: 10px; background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.12); color: var(--fg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.s3d-qv-cat { font-size: 11px; font-weight: 700; color: var(--accent-tint); margin: 0 0 8px; }
.s3d-qv-title { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 18px; margin: 0 0 14px; }
.s3d-qv-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.s3d-qv-price { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 20px; }
.s3d-qv-oldprice { font-size: 13px; color: rgba(var(--ink), 0.4); text-decoration: line-through; }
.s3d-qv-qty { display: flex; align-items: center; gap: 10px; background: rgba(var(--ink), 0.05); border-radius: 12px; padding: 4px; width: fit-content; margin-bottom: 18px; }
.s3d-qv-qty button { width: 32px; height: 32px; border-radius: 9px; border: none; background: none; color: var(--fg); font-size: 16px; font-weight: 700; cursor: pointer; }
.s3d-qv-qty button:hover { background: rgba(var(--ink), 0.08); }
.s3d-qv-qty span { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.s3d-qv-actions { display: flex; gap: 10px; margin-top: auto; }
.s3d-qv-actions .s3d-pcard-addbtn { flex: 1; padding: 12px; }
.s3d-qv-link { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(var(--ink), 0.16); color: var(--fg); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ---- Star rating badge (shop cards, quick view, product-detail) ---- */
.s3d-rating-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; margin-bottom: 6px; }
.s3d-rating-badge.is-empty { color: rgba(var(--ink), 0.4); font-size: 10.5px; }
.s3d-rating-stars { display: flex; align-items: center; gap: 1px; color: #f5a623; }
.s3d-rating-stars svg:nth-child(n) { flex-shrink: 0; }
.s3d-rating-num { font-weight: 700; color: var(--fg); font-family: 'Archivo', 'Vazirmatn', sans-serif; }
.s3d-rating-count { color: rgba(var(--ink), 0.45); }

/* ---- Review list + submission form (product-detail pages) ---- */
.s3d-review-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(var(--ink), 0.08); }
.s3d-review-summary-num { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 32px; }
.s3d-review-summary-stars { display: flex; gap: 2px; color: #f5a623; margin: 4px 0; }
.s3d-review-summary-count { font-size: 12px; color: rgba(var(--ink), 0.5); }
.s3d-review-item { padding: 16px 0; border-bottom: 1px solid rgba(var(--ink), 0.07); }
.s3d-review-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.s3d-review-item-author { font-weight: 700; font-size: 13px; }
.s3d-review-item-date { font-size: 11px; color: rgba(var(--ink), 0.4); }
.s3d-review-item-stars { display: flex; gap: 1px; color: #f5a623; margin-bottom: 6px; }
.s3d-review-item-comment { font-size: 13px; line-height: 1.85; color: rgba(var(--ink), 0.65); margin: 0; }
.s3d-review-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(var(--ink), 0.08); }
.s3d-review-form h4 { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: 14px; margin: 0 0 14px; }
.s3d-review-star-picker { display: flex; gap: 4px; margin-bottom: 14px; }
.s3d-review-star-picker button { background: none; border: none; padding: 2px; cursor: pointer; color: rgba(var(--ink), 0.25); }
.s3d-review-star-picker button svg { width: 24px; height: 24px; }
.s3d-review-star-picker button.is-active { color: #f5a623; }

/* Category showcase slider (homepage) -- full-bleed auto-advancing banner,
   4 category teasers, real photos to be swapped in for the image-slot
   placeholders later. Structural pattern (edge arrows, dot pagination,
   right-aligned content over a gradient) referenced from a real e-commerce
   category slider; colors use this site's own accent tokens. */
.s3d-catslider {
  position: relative; direction: ltr; border-radius: 26px; overflow: hidden;
  aspect-ratio: 21/9; background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.1);
}
@media (max-width: 700px) { .s3d-catslider { aspect-ratio: 4/5; } }
.s3d-catslider-track { display: flex; direction: ltr; width: 400%; height: 100%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.s3d-catslider-slide { position: relative; flex: 0 0 25%; width: 25%; height: 100%; direction: ltr; }
.s3d-catslider-slide image-slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.s3d-catslider-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(10,8,20,0.8) 0%, rgba(10,8,20,0.4) 40%, rgba(10,8,20,0.05) 70%);
}
:root[data-theme="light"] .s3d-catslider-slide::after {
  background: linear-gradient(270deg, rgba(20,16,40,0.6) 0%, rgba(20,16,40,0.25) 40%, rgba(20,16,40,0.02) 70%);
}
.s3d-catslider-slide.is-text-left::after {
  background: linear-gradient(90deg, rgba(10,8,20,0.8) 0%, rgba(10,8,20,0.4) 40%, rgba(10,8,20,0.05) 70%);
}
:root[data-theme="light"] .s3d-catslider-slide.is-text-left::after {
  background: linear-gradient(90deg, rgba(20,16,40,0.6) 0%, rgba(20,16,40,0.25) 40%, rgba(20,16,40,0.02) 70%);
}
.s3d-catslider-content {
  position: absolute; z-index: 1; inset-inline-start: clamp(20px,5vw,64px); top: 50%; transform: translateY(-50%);
  max-width: 46ch; direction: rtl; text-align: right;
}
.s3d-catslider-content.is-left { inset-inline-start: auto; inset-inline-end: clamp(20px,5vw,64px); }
.s3d-catslider-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(8px); margin-bottom: 14px; }
.s3d-catslider-title { font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; font-size: clamp(22px,3vw,32px); color: #fff; line-height: 1.35; margin: 0 0 12px; text-wrap: balance; }
.s3d-catslider-subtext { font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,0.78); margin: 0 0 20px; max-width: 42ch; }
.s3d-catslider-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.s3d-catslider-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
.s3d-catslider-badge svg { flex-shrink: 0; color: #ffd43b; }
.s3d-catslider-title em { font-style: normal; background: linear-gradient(100deg, var(--accent-hl-a, #ff8a3d), var(--accent-hl-b, #ff3d6e)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3d-catslider-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1a1a24; background: #fff; padding: 12px 22px; border-radius: 999px; text-decoration: none; transition: transform .2s; }
.s3d-catslider-btn:hover { transform: translateY(-2px); color: #1a1a24; }
.s3d-catslider-arrow {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px);
  color: #fff; cursor: pointer; transition: background .2s;
}
.s3d-catslider-arrow:hover { background: rgba(255,255,255,0.26); }
.s3d-catslider-arrow.is-prev { left: 18px; }
.s3d-catslider-arrow.is-next { right: 18px; }
.s3d-catslider-dots { position: absolute; z-index: 2; bottom: 20px; inset-inline: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.s3d-catslider-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; transition: width .3s, background .3s; }
.s3d-catslider-dot.is-on { width: 26px; background: #fff; }

/* ---- Fandom Worlds grid (homepage): 4 franchise categories, each with a
   themed atmospheric effect + hover/tap-revealed sub-group pills, so
   browsing a world's sub-groups never needs its own landing page --
   only the final destination (a real category, pre-filtered) does. ---- */
.s3d-fw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .s3d-fw-grid { grid-template-columns: 1fr; } }
.s3d-fw-card {
  position: relative; aspect-ratio: 4/3; border-radius: 26px; overflow: hidden;
  cursor: pointer; background: #0c0c14; isolation: isolate;
}
.s3d-fw-media { position: absolute; inset: 0; z-index: 0; }
.s3d-fw-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.1) 34%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.86) 100%);
  transition: background .4s ease;
}
.s3d-fw-card.is-open .s3d-fw-scrim, .s3d-fw-card:hover .s3d-fw-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.92) 100%);
}
.s3d-fw-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.s3d-fw-content {
  position: absolute; z-index: 3; top: 22px; inset-inline-start: 22px; max-width: 72%;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.s3d-fw-card.is-open .s3d-fw-content, .s3d-fw-card:hover .s3d-fw-content { transform: translateY(-6px); }
.s3d-fw-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: rgba(255,255,255,0.75); margin-bottom: 10px;
}
.s3d-fw-title {
  font-family: 'Archivo', 'Vazirmatn', sans-serif; font-weight: 800; color: #fff;
  font-size: clamp(25px,3.4vw,36px); margin: 0 0 8px; text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.s3d-fw-sub-text {
  font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0; max-width: 34ch;
  transition: opacity .3s ease, max-height .3s ease; overflow: hidden;
}
.s3d-fw-sub-text em, .s3d-fw-title em {
  font-style: normal; font-weight: 800;
  background: linear-gradient(100deg, var(--fw-hl-a, #ffb066), var(--fw-hl-b, #ff5e5e));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s3d-fw-card.is-got { --fw-hl-a: #ffb066; --fw-hl-b: #e74c3c; }
.s3d-fw-card.is-hp { --fw-hl-a: #ffe8a3; --fw-hl-b: #caa53d; }
.s3d-fw-card.is-lotr { --fw-hl-a: #e8d488; --fw-hl-b: #7c9473; }
.s3d-fw-card.is-heroes { --fw-hl-a: #60a5fa; --fw-hl-b: #ef4444; }
.s3d-fw-card.is-open .s3d-fw-sub-text, .s3d-fw-card:hover .s3d-fw-sub-text { opacity: 0; max-height: 0; margin: 0; }
.s3d-fw-subs {
  position: absolute; z-index: 3; inset-inline: 20px; bottom: 20px;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease .05s;
}
.s3d-fw-card.is-open .s3d-fw-subs, .s3d-fw-card:hover .s3d-fw-subs {
  max-height: 120px; opacity: 1; pointer-events: auto;
}
.s3d-fw-sub-pill {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(8px); text-decoration: none;
  transition: background .2s, transform .2s;
}
.s3d-fw-sub-pill:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }
.s3d-fw-sub-pill.is-all { background: transparent; border-style: dashed; color: rgba(255,255,255,0.85); }
.s3d-fw-tap-hint {
  position: absolute; z-index: 3; top: 16px; inset-inline-end: 16px; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(6px);
  transition: transform .3s;
}
.s3d-fw-card.is-open .s3d-fw-tap-hint { transform: rotate(45deg); }
@media (hover: hover) { .s3d-fw-tap-hint { display: none; } }

/* Per-world atmospheric effects -- fx::before is a soft ambient wash
   (fog/glow), fx::after is a particle layer (embers/sparkles/bokeh),
   built from stacked radial-gradients + box-shadow dots so no extra
   images or markup are needed per particle. Motion is opacity/transform
   only (cheap to composite) and respects reduced-motion globally. */
.s3d-fw-card.is-got .s3d-fw-fx::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(140,150,170,0.4), transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(90,20,20,0.35), transparent 70%);
  filter: blur(18px); animation: s3dFwFogDrift 14s ease-in-out infinite;
}
.s3d-fw-card.is-got .s3d-fw-fx::after {
  content: ''; position: absolute; inset: 0; opacity: .8;
  background-image:
    radial-gradient(circle 3px at 15% 85%, #ff9f4d, transparent 100%),
    radial-gradient(circle 2px at 30% 92%, #ff7a3d, transparent 100%),
    radial-gradient(circle 3px at 55% 88%, #ffb066, transparent 100%),
    radial-gradient(circle 2px at 72% 94%, #ff8a3d, transparent 100%),
    radial-gradient(circle 3px at 88% 86%, #ffa855, transparent 100%);
  animation: s3dFwEmberRise 5s ease-in infinite;
}
.s3d-fw-card.is-hp .s3d-fw-fx::before {
  content: ''; position: absolute; inset: -20%;
  background: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(212,175,55,0.28), transparent 72%);
  filter: blur(20px); animation: s3dFwGlowPulse 6s ease-in-out infinite;
}
.s3d-fw-card.is-hp .s3d-fw-fx::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 2px at 12% 25%, #ffe8a3, transparent 100%),
    radial-gradient(circle 1.5px at 25% 55%, #fff3c9, transparent 100%),
    radial-gradient(circle 2px at 40% 20%, #ffdf85, transparent 100%),
    radial-gradient(circle 1.5px at 62% 40%, #fff3c9, transparent 100%),
    radial-gradient(circle 2px at 78% 22%, #ffe8a3, transparent 100%),
    radial-gradient(circle 1.5px at 88% 50%, #ffdf85, transparent 100%),
    radial-gradient(circle 2px at 50% 65%, #fff3c9, transparent 100%);
  animation: s3dFwTwinkle 3.2s ease-in-out infinite;
}
.s3d-fw-card.is-lotr .s3d-fw-fx::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(circle 90px at 50% 45%, rgba(214,178,90,0.3), transparent 70%),
    radial-gradient(ellipse 65% 40% at 30% 80%, rgba(120,140,120,0.32), transparent 70%);
  filter: blur(20px); animation: s3dFwRingPulse 5s ease-in-out infinite;
}
.s3d-fw-card.is-lotr .s3d-fw-fx::after {
  content: ''; position: absolute; inset: -10% -20%;
  background:
    radial-gradient(ellipse 40% 25% at 20% 60%, rgba(200,205,195,0.22), transparent 75%),
    radial-gradient(ellipse 35% 22% at 75% 70%, rgba(200,205,195,0.18), transparent 75%);
  filter: blur(10px); animation: s3dFwFogDrift 18s ease-in-out infinite reverse;
}
.s3d-fw-card.is-heroes .s3d-fw-fx::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 55% 40% at 25% 30%, rgba(37,99,235,0.38), transparent 70%),
    radial-gradient(ellipse 55% 40% at 78% 72%, rgba(220,38,38,0.34), transparent 70%);
  filter: blur(18px); animation: s3dFwGlowPulse 5s ease-in-out infinite;
}
.s3d-fw-card.is-heroes .s3d-fw-fx::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 3px at 20% 25%, #93c5fd, transparent 100%),
    radial-gradient(circle 2px at 38% 60%, #fca5a5, transparent 100%),
    radial-gradient(circle 3px at 58% 20%, #ffffff, transparent 100%),
    radial-gradient(circle 2px at 72% 50%, #93c5fd, transparent 100%),
    radial-gradient(circle 3px at 85% 30%, #fca5a5, transparent 100%),
    radial-gradient(circle 2px at 90% 65%, #ffffff, transparent 100%);
  animation: s3dFwTwinkle 3s ease-in-out infinite;
}
@keyframes s3dFwFogDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3%, -2%); }
}
@keyframes s3dFwEmberRise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .85; }
  85% { opacity: .3; }
  100% { transform: translateY(-46px); opacity: 0; }
}
@keyframes s3dFwGlowPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes s3dFwTwinkle {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes s3dFwRingPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .s3d-fw-fx::before, .s3d-fw-fx::after { animation: none !important; }
}