/* Bistoun storefront — dark only, RTL, Vazirmatn. Mobile-first. */

@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Shared, non-palette tokens (identical in light and dark). */
:root {
  --radius: 12px;
  --radius-sm: 8px;
  --hdr-h: 60px;
}

/* Dark palette. Also applies to a bare :root so the store shows before the
   inline theme script sets data-theme, and it is the only palette a store gets
   until it enables its light one. Per-store overrides target this same selector
   (see the store theme). --bg-rgb is the raw canvas triple behind the
   translucent chrome (header, overlays, mobile bars) so those track the canvas;
   --on-primary is the ink for text/icons sitting on the accent, and
   --on-primary-bold its white-leaning twin a skin may opt into for bold labels
   (white wherever it still clears 3:1; theme.go derives both per store). */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --bg-rgb: 13, 17, 23;
  --surface: #151b22;
  --surface-2: #1b232c;
  --surface-3: #222c37;
  --border: #2a3540;
  --border-strong: #3a4753;
  --text: #f3efe7;
  --text-2: #9fabb5;
  --text-3: #6b7884;
  --primary: #00A8B5;
  --primary-strong: #008a94;
  --primary-deep: #00545b;
  --primary-dim: rgba(0, 168, 181, 0.12);
  --on-primary: #04252a;
  --on-primary-bold: #04252a;
  --amber: #f5b04b;
  --red: #f0635c;
  --red-dim: rgba(240, 99, 92, 0.13);
  --green: #4ade80;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Light palette — shipped only when the store enables its light theme; the
   customer toggle flips :root[data-theme] to it. Neutrals sit on an off-white
   canvas, the accent is darkened so it reads as both a button fill and link
   text, and the status hues + shadow are tuned so nothing washes out on white.
   Per-store overrides target this same selector. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f4;
  --bg-rgb: 245, 246, 244;
  --surface: #ffffff;
  --surface-2: #eef0ec;
  --surface-3: #e4e7e2;
  --border: #dcdfda;
  --border-strong: #c5c9c2;
  --text: #2b2f33;
  --text-2: #5c6773;
  --text-3: #838d97;
  --primary: #1e3a5f;
  --primary-strong: #182f4e;
  --primary-deep: #0f1d30;
  --primary-dim: rgba(30, 58, 95, 0.10);
  --on-primary: #ffffff;
  --on-primary-bold: #ffffff;
  --amber: #b45309;
  --red: #dc2626;
  --red-dim: rgba(220, 38, 38, 0.10);
  --green: #16a34a;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
}

/* Status hues on the light canvas. The alerts, tags and order-status badges
   below bake in light-on-dark colors, so restate them dark-on-light where they
   would otherwise wash out. The attribute selector outranks the base rules, so
   these win regardless of source order. */
:root[data-theme="light"] .alert.err { border-color: #f0a9a9; background: rgba(220, 38, 38, 0.08); color: #b42318; }
:root[data-theme="light"] .alert.ok { border-color: #a6dcc1; background: rgba(22, 163, 74, 0.08); color: #15803d; }
:root[data-theme="light"] .alert.warn { border-color: #e6cf8f; background: rgba(217, 119, 6, 0.1); color: #b45309; }
:root[data-theme="light"] .tag.err { background: rgba(220, 38, 38, 0.12); color: #b42318; }
:root[data-theme="light"] .tag.warn { background: rgba(217, 119, 6, 0.16); color: #b45309; }
:root[data-theme="light"] .btn.danger { color: #dc2626; }
:root[data-theme="light"] .btn.danger:hover { border-color: #dc2626; color: #b42318; }
:root[data-theme="light"] .st-paid,
:root[data-theme="light"] .st-processing,
:root[data-theme="light"] .st-shipped { background: rgba(22, 163, 74, 0.12); color: #15803d; }
:root[data-theme="light"] .st-delivered { background: rgba(22, 163, 74, 0.2); color: #166534; }
:root[data-theme="light"] .st-awaiting_payment,
:root[data-theme="light"] .st-needs_review { background: rgba(217, 119, 6, 0.14); color: #b45309; }
:root[data-theme="light"] .st-cancelled,
:root[data-theme="light"] .st-returned { background: rgba(220, 38, 38, 0.12); color: #b42318; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Vazirmatn", "Tahoma", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--primary-dim); }

h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 22px; }
p { margin: 0.4em 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
/* The digikala skin's wider page. Scoped with :where() and kept up here, not in
   the skin block, so every narrower cap a page sets on its .wrap below
   (.hero-in, .builder-form, the article measure) still wins. */
:where(:root[data-store-theme="digikala"]) .wrap { max-width: 1366px; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.ltr-inline { direction: ltr; unicode-bidi: embed; }
.unit { font-size: 11px; color: var(--text-3); }

.skip-link {
  position: absolute; top: -48px; right: 8px; z-index: 200;
  background: var(--primary-strong); color: var(--on-primary); padding: 8px 14px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 8px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-weight: 500; transition: 0.15s;
}
.btn:hover { border-color: var(--primary-strong); color: var(--primary); }
.btn.primary {
  background: linear-gradient(145deg, var(--primary), var(--primary-strong));
  border-color: transparent; color: var(--on-primary); font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.08); color: var(--on-primary); }
.btn.primary:disabled { filter: grayscale(0.6); opacity: 0.6; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn.full { width: 100%; }

/* ---------- header ---------- */

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--bg-rgb), 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.hdr-row {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--hdr-h); flex-wrap: wrap; padding-block: 8px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; flex-shrink: 0; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--primary-strong), var(--primary-deep));
  display: grid; place-items: center; color: var(--on-primary); overflow: hidden;
}
.brand-logo { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; }
.brand-mark.big { width: 64px; height: 64px; margin-inline: auto; color: var(--on-primary); }

.search { position: relative; flex: 1 1 320px; min-width: 200px; order: 3; }
.search-ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search input {
  width: 100%; padding: 10px 38px 10px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); outline: none;
}
.search input:focus { border-color: var(--primary-strong); background: var(--surface); }
.search input::placeholder { color: var(--text-3); }

.suggest {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 120;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.suggest-group { padding: 7px 14px 3px; font-size: 11px; color: var(--text-3); }
.suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border);
}
.suggest-item:hover { background: var(--surface-3); }
.suggest-item img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; flex-shrink: 0; }
.suggest-item .si-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.suggest-item .si-price { font-size: 12px; color: var(--primary); flex-shrink: 0; }
.suggest-item .si-oos { font-size: 12px; color: var(--text-3); flex-shrink: 0; }

/* Light/dark toggle: shows the icon of the palette currently active. */
.theme-toggle {
  order: 2; display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--text-2); transition: 0.15s;
}
.theme-toggle:hover { color: var(--primary); border-color: var(--primary-strong); }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: none; }

.cart-link { position: relative; display: flex; align-items: center; gap: 8px; color: var(--text-2); order: 2; margin-inline-start: auto; }
.cart-link:hover { color: var(--primary); }
.cart-label { font-size: 13px; }
.cart-badge {
  position: absolute; top: -7px; inset-inline-start: 12px;
  min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 9px;
  background: var(--primary-strong); color: var(--on-primary); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
/* store.js hides the badge for an empty cart; `display: grid` above would
   otherwise win over the hidden attribute and show «۰». */
.cart-badge[hidden] { display: none; }

.catnav { border-top: 1px solid var(--border); }
.catnav-row {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 0;
}
.catnav-row::-webkit-scrollbar { display: none; }
.catnav-row a {
  padding: 9px 13px; color: var(--text-2); font-size: 13px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.catnav-row a:hover { color: var(--primary); }
.catnav-all { color: var(--primary) !important; font-weight: 500; }
/* A store-defined header menu with dropdowns (<details>): the row must not
   clip the open menu, so it wraps instead of scrolling. */
.catnav-row:has(.catnav-drop) { overflow: visible; flex-wrap: wrap; }
.catnav-drop { position: relative; }
.catnav-drop > summary {
  list-style: none; cursor: pointer; padding: 9px 13px; color: var(--text-2); font-size: 13px; white-space: nowrap;
}
.catnav-drop > summary::-webkit-details-marker { display: none; }
.catnav-drop > summary::after { content: " ▾"; font-size: 10px; }
.catnav-drop[open] > summary, .catnav-drop > summary:hover { color: var(--primary); }
.catnav-drop-menu {
  position: absolute; inset-inline-start: 0; top: 100%; z-index: 30; min-width: 180px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.catnav-drop-menu a { border-bottom: 0; padding: 8px 10px; border-radius: 6px; }
.catnav-drop-menu a:hover { background: var(--surface-2, rgba(127, 127, 127, .08)); }

/* ---------- hero & home ---------- */

.hero {
  background:
    radial-gradient(1100px 380px at 80% -120px, var(--primary-dim), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg));
  border-bottom: 1px solid var(--border);
}
.hero-in { padding-block: 44px; max-width: 720px; }
.hero h1 { font-size: 26px; line-height: 1.5; }
.hero p { color: var(--text-2); font-size: 15px; }
.hero-cta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.home-sec { margin-block: 34px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sec-title { font-size: 17px; position: relative; padding-inline-start: 12px; }
.sec-title::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px;
  width: 4px; border-radius: 2px; background: var(--primary-strong);
}
.sec-more { color: var(--primary); font-size: 13px; }
.home-sec > .sec-title { margin-bottom: 14px; }

.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  text-align: center; transition: 0.15s;
}
.cat-tile:hover { border-color: var(--primary-strong); transform: translateY(-2px); }
.cat-tile img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; }
.cat-tile-ic {
  width: 52px; height: 52px; border-radius: 12px; background: var(--primary-dim); color: var(--primary);
  display: grid; place-items: center;
}
.cat-tile-name { font-size: 13px; font-weight: 500; }

.empty-home { padding-block: 60px; text-align: center; color: var(--text-2); }

.home-builder-hero {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--bg));
}
.home-builder-hero.hero-accent {
  background:
    radial-gradient(900px 320px at 78% -80px, rgba(245, 176, 75, 0.16), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg));
}
.home-builder-hero.hero-light {
  background: #f6f4ef;
  color: #172026;
}
.home-builder-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 440px);
  gap: 28px;
  align-items: center;
  min-height: 360px;
  padding-block: 34px;
}
.home-builder-hero-copy { max-width: 720px; }
.home-builder-hero-copy h1 { font-size: 30px; line-height: 1.45; }
.home-builder-hero-copy p { color: var(--text-2); font-size: 15px; max-width: 640px; }
.hero-light .home-builder-hero-copy p { color: #56616b; }
.home-builder-hero-media {
  align-self: stretch;
  min-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}
.home-builder-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.builder-eyebrow {
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.builder-subtitle {
  color: var(--text-2);
  margin: -6px 0 14px;
  max-width: 760px;
}
.builder-banner {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.builder-banner.banner-accent { border-color: rgba(245, 176, 75, 0.5); background: rgba(245, 176, 75, 0.08); }
.builder-banner.banner-light { background: #f6f4ef; color: #172026; }
.builder-banner-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.builder-banner-copy strong { font-size: 21px; line-height: 1.5; }
.builder-banner-copy span { color: var(--text-2); }
.banner-light .builder-banner-copy span { color: #56616b; }
.builder-banner-copy em,
.builder-slide-copy em {
  color: var(--primary);
  font-style: normal;
  font-size: 13px;
  margin-top: 6px;
}
.builder-banner img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: #fff;
}

/* Banner: content alignment (RTL-aware), height presets, and the full-width
   hero layout where the image is the background and copy overlays it. */
.banner-align-center { text-align: center; }
.banner-align-center .builder-banner-copy { align-items: center; }
.banner-align-end { text-align: end; }
.banner-align-end .builder-banner-copy { align-items: flex-end; }
.banner-h-compact { min-height: 120px; }
.banner-h-tall { min-height: 340px; }
.banner-h-full { min-height: 80vh; }

.builder-banner.banner-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  padding: 34px;
  color: #fff;
}
.builder-banner.banner-full.banner-align-center { justify-content: center; }
.builder-banner.banner-full.banner-align-end { justify-content: flex-end; }
.banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  z-index: 0;
}
.banner-overlay { position: absolute; inset: 0; z-index: 1; }
/* Default readability scrim when the author sets no explicit overlay. */
.builder-banner.banner-full:not(:has(.banner-overlay))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.12));
  pointer-events: none;
}
.builder-banner.banner-full .builder-banner-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  gap: 10px;
}
.builder-banner.banner-full .builder-banner-copy strong { font-size: 28px; line-height: 1.4; }
.banner-btn { align-self: flex-start; margin-top: 10px; }
.banner-align-center .banner-btn { align-self: center; }
.banner-align-end .banner-btn { align-self: flex-end; }

/* Full-width hero: image background + overlaid copy (shares .banner-bg/.banner-overlay). */
.home-builder-hero.hero-full {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  color: #fff;
}
.home-builder-hero.hero-full:not(:has(.banner-overlay))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12));
  pointer-events: none;
}
.home-builder-hero.hero-full .home-builder-hero-in { position: relative; z-index: 2; grid-template-columns: minmax(0, 1fr); }
.home-builder-hero.hero-full .home-builder-hero-copy p { color: rgba(255, 255, 255, 0.85); max-width: 620px; }
.home-builder-hero.hero-full.banner-align-center { text-align: center; }
.home-builder-hero.hero-full.banner-align-center .home-builder-hero-copy { margin-inline: auto; }
.home-builder-hero.hero-full.banner-align-end { text-align: end; }
.home-builder-hero.hero-full.banner-align-end .home-builder-hero-copy { margin-inline-start: auto; }

/* Offer detail page: the "back to all offers" link. */
.offer-detail-head { padding-block: 16px 0; }

/* Special Offers: campaign banner + live countdown + discounted product cards. */
.offer-block { display: flex; flex-direction: column; gap: 16px; }
.offer-banner { position: relative; overflow: hidden; border-radius: var(--radius); }
.offer-banner-copy { gap: 8px; }
.offer-eyebrow { color: var(--amber); font-size: 12px; font-weight: 700; }
.banner-full .offer-eyebrow { color: #ffd479; }
.offer-title { font-size: 24px; line-height: 1.45; }
.offer-subtitle { color: var(--text-2); }
.banner-full .offer-subtitle,
.banner-full .offer-promo { color: rgba(255, 255, 255, 0.85); }
.offer-promo { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.offer-banner-img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; border-radius: var(--radius-sm); }
.offer-cta { align-self: flex-start; margin-top: 10px; }
.banner-align-center .offer-cta { align-self: center; }
.banner-align-end .offer-cta { align-self: flex-end; }

.offer-countdown { margin-top: 6px; }
.offer-countdown-fallback { color: var(--amber); font-weight: 700; font-size: 13px; }
.offer-countdown-timer { display: inline-flex; gap: 8px; }
.offer-countdown-timer .cd-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.builder-banner:not(.banner-full) .offer-countdown-timer .cd-seg {
  background: rgba(127, 127, 127, 0.08);
  border-color: var(--border);
}
.offer-countdown-timer .cd-seg b { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1; }
.offer-countdown-timer .cd-seg small { font-size: 10px; color: var(--text-2); }
.banner-full .offer-countdown-timer .cd-seg small { color: rgba(255, 255, 255, 0.75); }
.offer-countdown-ended { color: var(--text-2); font-weight: 600; }

/* Compact campaign countdown used by the React cart/checkout island, where a
   four-segment clock would swamp the line. Same wording, chip-sized. */
.offer-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--amber);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offer-timer.ended { color: var(--text-2); font-weight: 600; }
.oi-row .offer-timer { font-size: 11.5px; margin-inline-start: 8px; }
/* Coupon entry on the checkout island. */
.coupon-form { display: flex; gap: 8px; align-items: center; }
.coupon-form input { flex: 1; min-width: 0; }
.coupon-applied { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.coupon-applied .tag.ok { background: rgba(16, 185, 129, 0.14); color: var(--green, #10b981); }
.coupon-applied .btn.ghost { margin-inline-start: auto; }

.sum-offer {
  margin-block: 6px 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(127, 127, 127, 0.08);
  border: 1px solid var(--border);
  font-size: 12px;
  text-align: center;
}

.offers-page { padding-block: 8px 32px; }
.offers-head { padding-block: 20px 4px; }
.offers-head h1 { font-size: 24px; }
.offers-empty {
  text-align: center;
  padding-block: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.builder-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 410px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.builder-slide {
  min-height: 210px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  scroll-snap-align: start;
}
.builder-slide img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  opacity: 0.72;
}
.builder-slide-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), 0.92));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.builder-slide-copy strong { font-size: 17px; }
.builder-slide-copy span { color: var(--text-2); }
/* Carousel chrome. A slider block is a plain scroll-snap row; when a design
   skin turns it into a one-slide-per-view carousel (track-wide slides and
   scroll-snap-type: x mandatory, as the digikala skin does), store.js wraps it
   in .carousel and adds these arrows and dots. Styled here, not per skin, so
   any skin can opt in from CSS alone. Keyboard users get the dots as buttons. */
.carousel { position: relative; }
.carousel-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); opacity: 0.92; transition: 0.15s;
}
.carousel-arrow:hover { opacity: 1; color: var(--primary); border-color: var(--primary); }
.carousel-arrow.prev { inset-inline-start: 14px; }
.carousel-arrow.next { inset-inline-end: 14px; }
.carousel-dots {
  position: absolute; bottom: 4px; inset-inline: 0; z-index: 2;
  display: flex; justify-content: center; pointer-events: none;
}
/* The dot is drawn by ::before; the button around it is a 24px-tall, gapless
   hit box, so a tap that just misses a dot on a phone (where there are no
   arrows) still lands on a dot rather than on the slide's link beneath. */
.carousel-dot {
  display: grid; place-items: center; width: 18px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer; pointer-events: auto; transition: width 0.2s;
}
.carousel-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); transition: 0.2s;
}
.carousel-dot.on { width: 32px; }
.carousel-dot.on::before { width: 22px; background: var(--primary); }
@media (max-width: 768px) {
  .carousel-arrow { display: none; }
}

.builder-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--home-cols, 3), minmax(0, 1fr));
  gap: 12px;
}
.builder-info-card {
  min-height: 150px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: 0.15s;
}
.builder-info-card:hover { border-color: var(--primary-strong); }
.builder-info-card img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: #fff;
}
.builder-info-card span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.builder-info-card small { color: var(--amber); font-size: 11px; }
.builder-info-card strong { font-size: 15px; line-height: 1.6; }
.builder-info-card em { color: var(--text-2); font-style: normal; font-size: 12.5px; }
.builder-rich {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.builder-rich.rich-accent { border-color: rgba(0, 168, 181, 0.45); background: var(--primary-dim); }

/* ---------- content blocks (schema v2: heading/image/button/gallery/spacer/divider) ---------- */
.builder-heading-t { font-size: 22px; line-height: 1.5; }
.builder-heading h3.builder-heading-t { font-size: 18px; }
.builder-heading h4.builder-heading-t { font-size: 15px; }
.builder-image { margin: 0; }
.builder-image img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.builder-image figcaption { color: var(--text-2); font-size: 12.5px; margin-top: 8px; text-align: center; }
.builder-btn { display: flex; }
.builder-gallery {
  display: grid;
  grid-template-columns: repeat(var(--home-cols, 3), minmax(0, 1fr));
  gap: 12px;
}
.builder-gallery-item { margin: 0; }
.builder-gallery-item img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff;
}
.builder-gallery-item figcaption { color: var(--text-2); font-size: 12px; margin-top: 6px; text-align: center; }
.builder-spacer { height: 24px; }
.builder-spacer.spacer-sm { height: 12px; }
.builder-spacer.spacer-md { height: 24px; }
.builder-spacer.spacer-lg { height: 48px; }
.builder-divider { border: none; border-top: 1px solid var(--border); margin-block: 8px; }
@media (max-width: 640px) {
  .builder-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.builder-rich.rich-light { background: #f6f4ef; color: #172026; }
.builder-rich > h2 { font-size: 20px; }
/* rich_text body: sanitized author HTML rendered with storefront typography. */
.builder-rich .rich-body { color: var(--text-2); max-width: 860px; line-height: 1.95; }
.builder-rich.rich-light .rich-body { color: #56616b; }
.builder-rich .rich-body > :first-child { margin-top: 0; }
.builder-rich .rich-body > :last-child { margin-bottom: 0; }
.builder-rich .rich-body h2 { font-size: 19px; margin: 22px 0 10px; color: var(--text); }
.builder-rich .rich-body h3 { font-size: 16.5px; margin: 18px 0 8px; color: var(--text); }
.builder-rich .rich-body h4 { font-size: 15px; margin: 16px 0 8px; color: var(--text); }
.builder-rich.rich-light .rich-body h2,
.builder-rich.rich-light .rich-body h3,
.builder-rich.rich-light .rich-body h4 { color: #172026; }
.builder-rich .rich-body p,
.builder-rich .rich-body div { margin: 0 0 12px; }
.builder-rich .rich-body strong, .builder-rich .rich-body b { color: var(--text); font-weight: 600; }
.builder-rich .rich-body ul,
.builder-rich .rich-body ol { margin: 0 0 12px; padding-inline-start: 22px; }
.builder-rich .rich-body li { margin: 4px 0; }
.builder-rich .rich-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.builder-rich .rich-body blockquote {
  margin: 14px 0; padding: 6px 14px;
  border-inline-start: 3px solid var(--primary);
  color: var(--text); background: rgba(255, 255, 255, 0.02);
}
.builder-rich .rich-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 5px;
  direction: ltr; unicode-bidi: embed;
}
.builder-rich .rich-body pre {
  margin: 12px 0; padding: 12px 14px; overflow: auto; direction: ltr;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.builder-rich .rich-body pre code { background: none; padding: 0; }
.builder-rich .btn { margin-top: 12px; }

/* ---------- product cards ---------- */

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: 0.15s;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.card-link { display: flex; flex-direction: column; flex: 1; }
.card-img {
  position: relative; aspect-ratio: 1; background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-img .noimg { color: #c9ccd1; }
.card.oos .card-img { filter: grayscale(0.85); opacity: 0.8; }
.badge-off {
  position: absolute; top: 8px; inset-inline-start: 8px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
}
.badge-digital {
  position: absolute; bottom: 8px; inset-inline-start: 8px;
  background: rgba(var(--bg-rgb), 0.85); color: var(--primary); font-size: 10px;
  padding: 2px 7px; border-radius: 20px; border: 1px solid var(--primary-strong);
}
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.card-meta { font-size: 11px; color: var(--text-3); min-height: 1.4em; }
.card-title {
  font-size: 13px; font-weight: 500; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 3.4em;
}
.card-price { margin-top: auto; }
.price-col { display: flex; flex-direction: column; align-items: flex-end; }
.price-old { color: var(--text-3); font-size: 12px; }
.price b { font-size: 15px; }
.oos-label { color: var(--text-3); font-size: 13px; }
.card-add {
  margin: 0 12px 12px; padding: 8px; border-radius: var(--radius-sm);
  background: var(--primary-dim); border: 1px solid transparent; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500;
  transition: 0.15s;
}
.card-add:hover { border-color: var(--primary-strong); }
.card-wish {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(var(--bg-rgb), 0.55); border: 1px solid var(--border-strong);
  color: var(--text-2); backdrop-filter: blur(2px); transition: 0.15s;
}
.card-wish:hover { color: var(--red); border-color: var(--red); }
.card-wish.on { color: var(--red); border-color: var(--red); background: var(--red-dim); }
.card-wish.on svg { fill: currentColor; }

/* product-page wishlist toggle */
.p-wish { margin-top: 10px; color: var(--text-2); }
.p-wish:hover { color: var(--red); border-color: var(--red); }
.p-wish.on { color: var(--red); border-color: var(--red); }
.p-wish.on svg { fill: currentColor; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.cards-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 186px; gap: 12px;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.cards-row .card { scroll-snap-align: start; }

/* ---------- listing ---------- */

.crumbs { font-size: 12px; color: var(--text-3); padding-block: 12px; }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { margin-inline: 6px; }

.list-head { margin-block: 8px 18px; }
.list-head .muted { font-size: 13px; max-width: 760px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  padding: 5px 13px; border-radius: 20px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.chip:hover { border-color: var(--primary-strong); color: var(--primary); }

.list-layout { display: grid; grid-template-columns: 256px 1fr; gap: 20px; align-items: start; padding-bottom: 40px; }

.filters {
  position: sticky; top: calc(var(--hdr-h) + 52px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
}
.fgroup { padding-block: 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.fgroup-title { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.check { display: flex; align-items: center; gap: 8px; padding-block: 4px; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--primary-strong); width: 16px; height: 16px; }
.check .cnt { color: var(--text-3); font-size: 11px; }
.price-range { display: flex; gap: 8px; }
.price-range .in {
  width: 100%; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); outline: none;
}
.price-range .in:focus { border-color: var(--primary-strong); }
.filters .btn { margin-top: 10px; }

.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .result-count { font-size: 13px; }
.sort { color: var(--text-2); font-size: 13px; margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.sort select {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px; outline: none;
}
.filters-toggle { display: none; padding: 8px 14px; font-size: 13px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-block: 26px; }

.seo-text {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--text-2); font-size: 13px; white-space: pre-line; max-width: 860px;
}

.empty-state {
  padding: 56px 16px; text-align: center; color: var(--text-2);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

/* ---------- categories board ---------- */

.cat-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding-bottom: 40px; }
.cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.cat-card-head { display: flex; align-items: center; gap: 12px; }
.cat-card-head img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
.cat-card-head h2 { font-size: 15px; }
.cat-card-head:hover h2 { color: var(--primary); }
.cat-card-children { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cat-card-children a { color: var(--text-2); font-size: 13px; display: block; padding: 4px 0; }
.cat-card-children a:hover { color: var(--primary); }

/* ---------- product page ---------- */

.product { padding-bottom: 60px; }
.p-grid { display: grid; grid-template-columns: 400px 1fr 300px; gap: 24px; align-items: start; }

.p-gallery { position: sticky; top: calc(var(--hdr-h) + 60px); }
.p-main-img {
  aspect-ratio: 1; background: #fff; border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border);
}
.p-main-img img { width: 100%; height: 100%; object-fit: contain; }
.p-main-img .noimg { color: #c9ccd1; }
.p-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.p-thumb {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; overflow: hidden; padding: 0; opacity: 0.7;
}
.p-thumb img { width: 100%; height: 100%; object-fit: contain; }
.p-thumb.on, .p-thumb:hover { border-color: var(--primary-strong); opacity: 1; }

.p-brand { color: var(--primary); font-size: 13px; }
.p-title { font-size: 20px; line-height: 1.7; margin-block: 6px 4px; }
.p-model { font-size: 13px; }

.key-specs { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.key-specs li {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.ks-name { font-size: 11px; color: var(--text-3); }
.ks-value { font-size: 13px; font-weight: 500; }

.p-short { color: var(--text-2); font-size: 13.5px; }

.p-buy {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: calc(var(--hdr-h) + 60px);
}
.buy-row { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13px; }
.buy-row svg { color: var(--primary); flex-shrink: 0; }
.buy-row.digital { color: var(--primary); }
.buy-price { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; text-align: end; }
.price-old-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--text-3); }
.price-row b { font-size: 24px; }
.price-row .unit { font-size: 12px; }
.oos-big { font-size: 18px; color: var(--text-3); text-align: center; padding-block: 8px; }
.stock-warn { color: var(--amber); font-size: 12.5px; text-align: end; }
.buy-btn { width: 100%; padding-block: 12px; font-size: 15px; }
.buy-note { font-size: 12px; text-align: center; }

.buybar {
  display: none; position: fixed; bottom: 56px; inset-inline: 0; z-index: 90;
  background: rgba(var(--bg-rgb), 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); padding: 10px 16px;
  align-items: center; justify-content: space-between; gap: 14px;
}
.buybar-price b { font-size: 17px; }

/* Cart control (product page): the add button becomes a quantity stepper once
   the line is in the cart — store.js toggles .in-cart. The buy box shows the
   stepper with «در سبد شما · مشاهده سبد · حذف همه»; the phone's buy bar a
   compact one with a way to the cart. */
.cart-ctl-live { display: none; }
.cart-ctl.in-cart [data-add] { display: none; }
.cart-ctl.in-cart .cart-ctl-live { display: flex; }
.cart-ctl-live { flex-direction: column; align-items: stretch; gap: 10px; }
.qty-stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1.5px solid var(--primary-strong); border-radius: var(--radius-sm); padding: 4px; background: var(--surface);
}
.qs-btn {
  width: 44px; height: 40px; display: grid; place-items: center; flex-shrink: 0;
  border: 0; border-radius: calc(var(--radius-sm) - 2px); background: var(--primary-dim); color: var(--primary); cursor: pointer;
  transition: background 0.15s;
}
.qs-btn:hover:not(:disabled) { background: var(--primary-strong); color: var(--on-primary); }
.qs-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qs-btn .qs-trash { display: none; }
.qs-btn.is-remove .qs-minus { display: none; }
.qs-btn.is-remove .qs-trash { display: block; }
.qs-btn.is-remove { color: var(--red); background: var(--red-dim); }
.qs-btn.is-remove:hover { background: var(--red); color: #fff; }
.qs-qty { flex: 1; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-ctl-meta { display: flex; align-items: center; justify-content: center; gap: 6px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.cart-ctl-meta a { color: var(--primary); font-weight: 700; }
.cart-ctl-meta .linklike { background: none; border: 0; padding: 0; color: var(--text-3); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.cart-ctl-meta .linklike:hover { color: var(--red); }
.cart-ctl-max { margin: 8px 0 0; font-size: 12px; color: var(--amber); text-align: center; }
.cart-ctl.compact.in-cart .cart-ctl-live { flex-direction: row; align-items: center; gap: 10px; }
.cart-ctl.compact .qty-stepper { min-width: 132px; }
.cart-ctl.compact .qs-btn { width: 38px; height: 36px; }
.cart-ctl-go { font-size: 12.5px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* The header count jumps when the cart changes. */
.cart-badge.bump { animation: badge-bump 0.4s ease-out; }
@keyframes badge-bump { 40% { transform: scale(1.35); } }

/* «Added to cart»: a bottom sheet on a phone, a non-blocking card in the
   corner on a wide screen (store.js openAddedSheet). */
.atc { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
.atc[hidden] { display: none; }
.atc-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.2s; }
.atc.open .atc-backdrop { opacity: 1; }
.atc-panel {
  position: relative; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface);
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(100%); transition: transform 0.22s ease-out;
}
.atc-panel::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin-top: -6px; }
.atc.open .atc-panel { transform: none; }
.atc-head { display: flex; align-items: center; gap: 10px; }
.atc-head b { flex: 1; font-size: 15px; }
.atc-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; flex-shrink: 0; }
.atc-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.atc-item { display: flex; align-items: center; gap: 12px; }
.atc-img { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-sm); background: #fff; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border); }
.atc-img img { width: 100%; height: 100%; object-fit: contain; }
.atc-img img[hidden] { display: none; }
.atc-img:has(img[hidden]) { display: none; }
.atc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.atc-info b { font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atc-variant { color: var(--text-2); font-size: 12px; }
.atc-variant:empty, .atc-price:empty { display: none; }
.atc-price { font-weight: 700; }
.atc-sum { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.atc-sum span:last-child { color: var(--text); font-weight: 700; }
.atc-actions { display: flex; flex-direction: column; gap: 8px; }
.atc-actions .btn.primary { min-height: 48px; font-size: 15px; }
.atc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.atc-lock { overflow: hidden; }
/* Wide screens: a card in the bottom corner on the cart's side. Under the
   header it would sit on the buy box (in RTL both are on the left) and hide
   the stepper the customer reaches for next. */
@media (min-width: 769px) {
  .atc { inset: auto; bottom: 24px; inset-inline-end: 24px; align-items: flex-end; }
  .atc-backdrop { display: none; }
  .atc-panel {
    width: 360px; border-radius: var(--radius); border: 1px solid var(--border); padding: 16px;
    box-shadow: var(--shadow, 0 12px 32px rgba(0, 0, 0, 0.18)); transform: translateY(12px); opacity: 0;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  }
  .atc-panel::before { display: none; }
  .atc.open .atc-panel { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .atc-panel, .atc-backdrop { transition: none; }
  .cart-badge.bump { animation: none; }
}

.p-specs, .p-desc { margin-top: 40px; max-width: 900px; }
.spec-group { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 12px; overflow: hidden; }
.spec-group summary {
  cursor: pointer; padding: 12px 16px; background: var(--surface); font-weight: 500; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.spec-group summary::-webkit-details-marker { display: none; }
.spec-group summary::after { content: "▾"; color: var(--text-3); transition: 0.15s; }
.spec-group[open] summary::after { transform: rotate(180deg); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 13px; text-align: start; vertical-align: top; }
.spec-table th { width: 220px; color: var(--text-3); font-weight: 400; background: rgba(255, 255, 255, 0.015); }

/* ---------- cart ---------- */

.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; padding-bottom: 50px; }
.cart-items { display: flex; flex-direction: column; gap: 10px; }
.cart-item {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
}
.cart-item img, .cart-item .noimg-box {
  width: 76px; height: 76px; object-fit: contain; background: #fff; border-radius: var(--radius-sm);
}
.cart-item .noimg-box { display: grid; place-items: center; color: #c9ccd1; }
.ci-title { font-size: 13.5px; font-weight: 500; }
.ci-flags { font-size: 11.5px; color: var(--text-3); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.ci-flags .warn { color: var(--amber); }
.ci-flags .err { color: var(--red); }
.ci-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ci-price b { font-size: 15px; }
.qty-ctl { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.qty-ctl button {
  width: 32px; height: 32px; background: var(--surface-2); border: none; color: var(--primary);
  font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.qty-ctl button:disabled { color: var(--text-3); cursor: not-allowed; }
.qty-ctl .qv { min-width: 34px; text-align: center; font-weight: 700; }
.ci-remove { background: none; border: none; color: var(--text-3); font-size: 12px; padding: 2px 4px; }
.ci-remove:hover { color: var(--red); }

.cart-summary {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--hdr-h) + 60px);
}
.sum-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); }
.sum-row.total { border-top: 1px solid var(--border); padding-top: 10px; color: var(--text); font-size: 15px; }
.sum-row.discount { color: var(--green); }
.cart-empty { grid-column: 1 / -1; }

/* ---------- footer & bottom nav ---------- */

.ftr { border-top: 1px solid var(--border); background: var(--surface); margin-top: 50px; }
.trust-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  padding-block: 22px; border-bottom: 1px solid var(--border);
}
.trust { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 12.5px; justify-content: center; }
.trust svg { color: var(--primary); flex-shrink: 0; }
.trust-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.ftr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; padding-block: 26px; }
.ftr-col h3 { font-size: 14px; margin-bottom: 10px; }
.ftr-col ul { list-style: none; margin: 0; padding: 0; }
.ftr-col li a { color: var(--text-2); font-size: 13px; display: block; padding-block: 3px; }
.ftr-col li a:hover { color: var(--primary); }
.ftr-col p { font-size: 13px; color: var(--text-2); }
.ftr-col a { color: var(--primary); }
.socials { display: flex; gap: 14px; margin-top: 10px; }
.ftr-bottom {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-block: 14px; border-top: 1px solid var(--border); font-size: 12px;
}

.bottomnav {
  display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 100;
  background: rgba(var(--bg-rgb), 0.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); height: 56px;
}
.bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--text-3); font-size: 10.5px; position: relative;
}
.bottomnav a.on, .bottomnav a:hover { color: var(--primary); }
.bn-badge { inset-inline-start: calc(50% - 22px); top: 4px; }

/* ---------- toast ---------- */

.toast-stack { position: fixed; bottom: 70px; inset-inline-start: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-3); border: 1px solid var(--primary-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow);
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast a { margin-inline-start: auto; color: var(--primary); font-weight: 700; white-space: nowrap; }

/* ---------- misc pages ---------- */

.center-page { padding-block: 80px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.center-page .hero-cta { justify-content: center; }
.big-emoji { font-size: 56px; font-weight: 800; color: var(--primary); }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .p-grid { grid-template-columns: 360px 1fr; }
  .p-buy { grid-column: 1 / -1; position: static; }
}

@media (max-width: 768px) {
  body { padding-bottom: 56px; }
  .cart-label { display: none; }
  .brand-name { font-size: 15px; }

  .list-layout { grid-template-columns: 1fr; }
  .filters-toggle { display: inline-flex; }
  .filters {
    display: none; position: fixed; inset: auto 0 56px 0; z-index: 150; max-height: 72vh; overflow-y: auto;
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; box-shadow: var(--shadow);
  }
  .filters.open { display: block; }

  .p-grid { grid-template-columns: 1fr; gap: 18px; }
  .p-gallery { position: static; }
  .p-buy { position: static; }
  .buybar { display: flex; }
  .product { padding-bottom: 120px; }

  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-item { grid-template-columns: 64px 1fr; }
  .cart-item img, .cart-item .noimg-box { width: 64px; height: 64px; }
  .ci-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }

  .bottomnav { display: flex; }
  .toast-stack { bottom: 120px; }
  .hero-in { padding-block: 30px; }
  .hero h1 { font-size: 21px; }
  .home-builder-hero-in { grid-template-columns: 1fr; min-height: 0; padding-block: 28px; }
  .home-builder-hero-copy h1 { font-size: 22px; }
  .home-builder-hero-media { min-height: 190px; order: -1; }
  .builder-banner { grid-template-columns: 1fr; padding: 16px; }
  .builder-banner img { height: 180px; order: -1; }
  .builder-banner.banner-full { padding: 22px; min-height: 300px; }
  .builder-banner.banner-full .builder-banner-copy strong { font-size: 22px; }
  .banner-bg { height: 100%; order: 0; }
  .banner-h-full { min-height: 88vh; }
  .offer-countdown-timer .cd-seg { min-width: 46px; }
  .builder-slider { grid-auto-columns: minmax(240px, 84vw); }
  .builder-card-grid { grid-template-columns: 1fr !important; }
  .builder-info-card { grid-template-columns: 76px 1fr; min-height: 120px; }
  .builder-info-card img { width: 76px; height: 76px; }
  .builder-rich { padding: 18px; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
  .cards-row { grid-auto-columns: 168px; }
}

/* ---------- phase 2: auth, account, checkout ---------- */

.acct-link { display: flex; align-items: center; gap: 8px; color: var(--text-2); order: 2; margin-inline-start: auto; }
.acct-link:hover { color: var(--primary); }
.acct-link + .cart-link { margin-inline-start: 0; }
.acct-link .cart-label { max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.auth-wrap { display: flex; justify-content: center; padding-block: 48px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h1 { font-size: 19px; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card .resend-form { margin-top: -4px; }
.otp-input { letter-spacing: 8px; text-align: center; font-size: 20px; direction: ltr; }
/* The login form outside its auth card: inline on checkout. */
.login-form, .login-form form { display: flex; flex-direction: column; gap: 12px; }
.checkout-login .login-form { max-width: 420px; }
.auth-card.sandbox { border-color: var(--warn, #d9a431); }
.pay-amount { font-size: 22px; }

.alert { border-radius: 10px; padding: 10px 14px; font-size: 13px; border: 1px solid var(--border); margin-block: 10px; }
.alert.err { border-color: #a23b3b; background: rgba(162, 59, 59, 0.12); color: #f1b9b9; }
.alert.ok { border-color: #2f7d5c; background: rgba(47, 125, 92, 0.12); color: #a8e6c9; }
.alert.warn { border-color: #9a7b2d; background: rgba(154, 123, 45, 0.12); color: #ecd9a0; }
/* Neutral on purpose: a theme whose accent is red would make news read as an error. */
.alert.info { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.alert a { color: inherit; text-decoration: underline; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.field span { color: var(--text-2); }
.field input, .field textarea, textarea[name="customer_note"] {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 10px 12px; font: inherit;
}
.field input:focus, .field textarea:focus, textarea[name="customer_note"]:focus { border-color: var(--primary-strong); outline: none; }
.field input:disabled { opacity: 0.6; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.form-card h2 { font-size: 15px; }

.acct-layout { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding-block: 24px; align-items: start; }
.acct-nav { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px; position: sticky; top: 16px; }
.acct-nav a, .acct-nav .linklike { padding: 9px 12px; border-radius: 9px; color: var(--text-2); font-size: 13px; text-align: start; background: none; border: none; }
.acct-nav a:hover, .acct-nav .linklike:hover { background: var(--surface-3); color: var(--text); }
.acct-nav a.on { background: var(--surface-3); color: var(--primary); font-weight: 600; }
.acct-main h1 { font-size: 19px; margin-bottom: 14px; }

.addr-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.addr-card { display: flex; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.addr-card.default { border-color: var(--primary-strong); }
.addr-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.addr-edit summary { list-style: none; display: inline-flex; }
.addr-edit summary::-webkit-details-marker { display: none; }
.addr-edit[open] { min-width: min(520px, 100%); }
.addr-edit[open] summary { margin-bottom: 8px; }
.addr-new summary { list-style: none; display: inline-flex; }
.addr-new summary::-webkit-details-marker { display: none; }
.addr-new[open] summary { margin-bottom: 12px; }
.tag { display: inline-block; background: var(--surface-3); color: var(--text-2); border-radius: 99px; padding: 2px 9px; font-size: 11px; margin-inline-start: 6px; }
.tag.err { background: rgba(162, 59, 59, 0.2); color: #f1b9b9; }
.tag.warn { background: rgba(154, 123, 45, 0.2); color: #ecd9a0; }
.btn.danger { color: #e88; }
.btn.danger:hover { border-color: #a23b3b; color: #f1b9b9; }
.linklike { cursor: pointer; font: inherit; }

.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; flex-wrap: wrap; }
.order-card:hover { border-color: var(--border-strong); }
.order-card > div { display: flex; flex-direction: column; gap: 4px; }
.order-meta { flex-direction: row !important; align-items: center; gap: 14px !important; flex-wrap: wrap; }
.status { display: inline-block; border-radius: 99px; padding: 3px 10px; font-size: 12px; background: var(--surface-3); color: var(--text-2); }
.st-paid, .st-processing, .st-shipped { background: rgba(47, 125, 92, 0.15); color: #a8e6c9; }
.st-delivered { background: rgba(47, 125, 92, 0.3); color: #c9f3de; }
.st-awaiting_payment, .st-needs_review { background: rgba(154, 123, 45, 0.18); color: #ecd9a0; }
.st-cancelled, .st-returned { background: rgba(162, 59, 59, 0.15); color: #f1b9b9; }

.order-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.order-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.order-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.oi-row { display: flex; justify-content: space-between; gap: 10px; padding-block: 8px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.oi-row.problem { opacity: 0.75; }
.oi-nums { display: flex; align-items: center; gap: 12px; }
.timeline { display: flex; flex-direction: column; gap: 10px; padding-inline-start: 16px; }
.timeline li { position: relative; }
.timeline li::marker { color: var(--primary); }
.timeline .small { display: inline-block; margin-inline-start: 8px; }

.checkout-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; padding-bottom: 32px; }
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--primary-strong); }
.radio-card input { margin-top: 4px; accent-color: var(--primary); }
.radio-card span { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.policy p { white-space: pre-line; }

.invoice-wrap { padding-block: 24px; }
.invoice-card { max-width: 760px; margin-inline: auto; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table th, .inv-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: start; }
.inv-table th { background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.inv-sums { max-width: 320px; margin-inline-start: auto; display: flex; flex-direction: column; gap: 6px; }

@media print {
  .hdr, .ftr, .bottomnav, .no-print, .toast-stack, .catnav { display: none !important; }
  body { background: #fff; color: #000; }
  .form-card, .inv-table th, .inv-table td { border-color: #999; background: #fff; color: #000; }
  .invoice-card { border: none; }
  .muted, .unit { color: #444; }
}

@media (max-width: 860px) {
  .acct-layout { grid-template-columns: 1fr; }
  .acct-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .order-grid { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-layout .cart-summary { position: static; }
}

/* ---------- product variant selector ---------- */
.p-variants { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.vgroup-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; font-size: 14px; }
.vg-name { font-weight: 600; }
.vg-chosen { color: var(--text-2); font-size: 13px; }
.vopts { display: flex; flex-wrap: wrap; gap: 8px; }
.vopt {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px;
  cursor: pointer; transition: border-color .15s, background .15s, opacity .15s;
}
.vopt:hover { border-color: var(--primary); }
.vopt.on { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); box-shadow: 0 0 0 1px var(--primary-strong) inset; }
.vopt.swatch { padding: 6px 12px 6px 8px; }
.vopt .sw {
  width: 20px; height: 20px; border-radius: 50%; background-size: cover; background-position: center;
  border: 1px solid var(--border-strong); box-shadow: 0 0 0 2px var(--surface-2) inset;
}
.vopt.on .sw { box-shadow: 0 0 0 2px var(--surface-2) inset, 0 0 0 2px var(--primary); }
.vopt.disabled, .vopt:disabled {
  opacity: 0.4; cursor: not-allowed; position: relative;
  background:
    linear-gradient(to top left, transparent calc(50% - 1px), var(--border-strong), transparent calc(50% + 1px));
}
.vopt.disabled:hover, .vopt:disabled:hover { border-color: var(--border-strong); }
.buy-sku { font-size: 13px; margin: 4px 0 10px; }
.buy-btn.disabled, .buy-btn:disabled { filter: grayscale(0.6); opacity: 0.6; cursor: not-allowed; }
.ci-variant { color: var(--primary); }

/* ---------- React commerce island ---------- */
/* Shell loading state shown by app.gohtml until the bundle mounts #store-app. */
.app-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50vh; }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border-strong); border-top-color: var(--primary);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

/* Address map (Leaflet / OpenStreetMap) on the checkout & account address forms. */
.map-picker { display: flex; flex-direction: column; gap: 8px; }
/* isolation keeps Leaflet's own z-indexes (panes 400, controls 1000) inside the
   map, so it scrolls under the header, bottom nav and checkout bar. */
.map-canvas { height: 260px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); isolation: isolate; }
.map-loading { display: flex; align-items: center; justify-content: center; }
.map-hint { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.leaflet-container { font: inherit; background: var(--surface-2); }
.map-pin-icon { background: none; border: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.addr-form { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.addr-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Map-first address step: the pin is fixed over the map's center (its tip on
   the exact middle) and the map moves under it. */
.addr-step-title { font-size: 14px; }
.map-frame { position: relative; }
.addr-map-step .map-canvas { height: min(52vh, 420px); }
.map-center-pin {
  position: absolute; top: 50%; left: 50%; z-index: 1; pointer-events: none;
  width: 34px; height: 34px; transform: translate(-50%, -91%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.map-center-pin svg { display: block; }
.map-search { display: flex; gap: 8px; }
.map-search input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 9px 12px; font: inherit;
}
.map-search input:focus { border-color: var(--primary-strong); outline: none; }
.map-results {
  list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 220px; overflow-y: auto;
}
.map-results li { padding: 6px 8px; }
.map-results button {
  width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: start;
  background: none; border: 0; color: var(--text); padding: 4px 2px; font: inherit; cursor: pointer;
}
.map-results button:hover b { color: var(--primary); }
.map-preview {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13px; line-height: 1.8; min-height: 44px;
}
.pin-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--primary-dim); font-size: 13px;
}
.pin-summary .linklike { background: none; border: 0; color: var(--primary); font-weight: 700; padding: 0; }
.addr-door { grid-template-columns: 1fr 1fr 2fr; }
@media (max-width: 520px) {
  .addr-door { grid-template-columns: 1fr 1fr; }
  .addr-door .field-wrap:last-child { grid-column: 1 / -1; }
}
.addr-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.addr-label .chip { cursor: pointer; font: inherit; font-size: 12px; }
.addr-label .chip.on { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }
.field select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 10px 12px; font: inherit;
}
.field select:focus { border-color: var(--primary-strong); outline: none; }
.field-wrap.has-error .field select { border-color: var(--red); }

/* ---------- island forms: field messages, checkout steps, phone action bar ---------- */

/* A field's error or hint sits under it, outside the <label>, so it describes
   the control without becoming part of its name. */
.field-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-msg { font-size: 12px; line-height: 1.7; margin: 0; }
.field-msg.err { color: var(--red); }
.field-msg.hint { color: var(--text-3); }
.field-msg .linklike { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.field-wrap.has-error .field input,
.field-wrap.has-error .field textarea { border-color: var(--red); }
.field-wrap.has-error .field input:focus,
.field-wrap.has-error .field textarea:focus { box-shadow: 0 0 0 3px var(--red-dim); }
.recipient-me small { font-size: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Cart → login → delivery → payment. Each step draws the connector back to the
   one before it; inline-start is "the step before" in RTL and LTR alike. */
.steps { margin-block: 2px 18px; max-width: 640px; margin-inline: auto; }
.steps ol { list-style: none; margin: 0; padding: 0; display: flex; }
.step {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-3); text-align: center;
}
.step a { display: contents; color: inherit; }
.step a:hover .step-label { color: var(--primary); }
.step + .step::before {
  content: ""; position: absolute; top: 13px; inset-inline-start: -50%; width: 100%; height: 2px;
  background: var(--border);
}
.step:is(.done, .current) + .step:is(.done, .current)::before { background: var(--primary-strong); }
.step-dot {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-2);
}
.step.done .step-dot { background: var(--primary-strong); border-color: var(--primary-strong); color: var(--on-primary); }
.step.current { color: var(--text); font-weight: 600; }
.step.current .step-dot { background: var(--surface); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-dim); }
.auth-wrap.with-steps { flex-direction: column; align-items: center; padding-top: 24px; }
/* The order page's tracker reuses the checkout steps, plus a pending payment
   (card-to-card awaiting the shop) and a stop (cancelled / returned). */
.track-steps { max-width: none; margin-block: 4px; }
.step.pending .step-dot { border-color: var(--amber); color: var(--amber); background: var(--surface); }
.step.pending { color: var(--text); font-weight: 600; }
.step.stopped .step-dot { border-color: var(--red); background: var(--red); color: #fff; }
.step.stopped { color: var(--red); font-weight: 600; }
.step:is(.done, .current) + .step.pending::before { background: var(--primary-strong); }
.step-note { font-size: 11px; color: var(--amber); font-weight: 400; }
.step-at { font-size: 11px; color: var(--text-3); font-weight: 400; }
.tracking-code {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.tracking-code b { font-size: 15px; letter-spacing: 1px; }
.btn.small { padding: 6px 12px; font-size: 12px; }
.auth-wrap.with-steps .steps { width: 100%; max-width: 400px; }

/* The total and the next step, pinned above the bottom nav on a phone (the
   product page's buy bar does the same). Hidden elsewhere; see StickyCta.tsx. */
.sticky-cta { display: none; }
@media (max-width: 768px) {
  .has-sticky-cta { padding-bottom: 76px; }
  .has-sticky-cta .summary-cta { display: none; }
  .sticky-cta {
    display: flex; position: fixed; bottom: 56px; inset-inline: 0; z-index: 90;
    background: rgba(var(--bg-rgb), 0.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); padding: 10px 16px;
    align-items: center; justify-content: space-between; gap: 14px;
  }
  .sticky-cta-sum { display: flex; flex-direction: column; gap: 2px; }
  .sticky-cta-sum b { font-size: 16px; }
  .sticky-cta .btn { flex-shrink: 0; min-height: 44px; padding-inline: 20px; display: inline-flex; align-items: center; justify-content: center; }
  /* A focused field means the on-screen keyboard is up: step out of its way. */
  .has-sticky-cta:has(input:focus, textarea:focus) .sticky-cta { display: none; }
  .step { font-size: 11px; }
}

/* CMS form block (builder-form) — accessible server-rendered form embedded in a
   managed page; mirrors the panel's inputs but with the storefront's tokens. */
.builder-form { max-width: 640px; margin-inline: auto; }
.builder-form-title { margin: 0 0 6px; }
.builder-form-intro { margin: 0 0 14px; color: var(--text-2); }
.managed-form { display: flex; flex-direction: column; gap: 14px; }
.managed-field { display: flex; flex-direction: column; gap: 6px; }
.managed-label { font-weight: 500; font-size: 0.95rem; }
.managed-form input[type="text"], .managed-form input[type="email"],
.managed-form input[type="number"], .managed-form input[type="date"],
.managed-form textarea, .managed-form select {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; outline: none;
}
.managed-form input:focus, .managed-form textarea:focus, .managed-form select:focus {
  border-color: var(--primary-strong); background: var(--surface);
}
.managed-form .req { color: var(--red); }
.managed-hint { margin: 0; font-size: 0.8rem; color: var(--text-3); }
.managed-form .check-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.managed-form .check-inline { display: inline-flex; align-items: center; gap: 6px; }
.managed-form > .btn.primary { align-self: flex-start; }

/* ---------- card-to-card (کارت‌به‌کارت) ---------- */

/* Payment-method choice at checkout, shown only when the store offers both. */
.pay-methods { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-block: 12px; }
.pay-methods legend { padding-inline: 4px; }
.pay-methods label { display: flex; align-items: center; gap: 8px; padding-block: 4px; cursor: pointer; }

/* Card-to-card payment page (templates/c2c.gohtml): three step cards — the
   exact amount, the card to pay, the receipt — beside a sticky summary on a
   wide screen, stacked on a phone. */
.c2c-page { padding-block: 18px 40px; }
.c2c-page .steps { margin-bottom: 16px; }
.c2c-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.c2c-head h1 { font-size: 20px; margin: 0; }
.c2c-head p { margin: 2px 0 0; }
.c2c-timer {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2);
}
.c2c-timer svg { color: var(--amber); flex-shrink: 0; }
.c2c-timer b { color: var(--text); font-variant-numeric: tabular-nums; }
.c2c-timer.late { border-color: var(--red); color: var(--red); }
.c2c-timer.late svg { color: var(--red); }

.c2c-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.c2c-main, .c2c-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.c2c-main > .alert { margin: 0; }
.c2c-side { position: sticky; top: calc(var(--hdr-h) + 60px); }
.c2c-card-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.c2c-card-box h2 { font-size: 15px; margin: 0; }
.c2c-step { display: flex; align-items: center; gap: 10px; }
.c2c-step-no {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--primary-dim); color: var(--primary); font-size: 13px; font-weight: 700;
}
.c2c-note {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 12.5px; line-height: 1.9; color: var(--text-2);
}
.c2c-copy { display: inline-flex; align-items: center; gap: 6px; }
.c2c-copy.copied { border-color: var(--green); color: var(--green); }
.btn.primary.c2c-copy.copied { background: var(--green); border-color: var(--green); color: #fff; filter: none; }

/* The exact amount is the single most important number on the page: an exact
   match is what lets a bank deposit be recognised without a human. */
.c2c-amount {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px dashed var(--border-strong);
}
.c2c-amount-value { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.c2c-amount-value strong { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.c2c-amount-value .muted { flex-basis: 100%; }

/* The destination, drawn as the bank card it is. Grouped in fours and pinned
   LTR: a card number reads left-to-right even on an RTL page. */
.c2c-dests { display: grid; gap: 16px; }
.c2c-dests.many { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.c2c-dest { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.c2c-bankcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 380px; aspect-ratio: 1.586; padding: 18px 20px; border-radius: 16px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--primary-strong), var(--primary-deep));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.c2c-bankcard::before {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  inset-inline-end: -70px; top: -90px; background: rgba(255, 255, 255, 0.08); pointer-events: none;
}
.c2c-bankcard-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.c2c-bank { font-weight: 700; font-size: 15px; }
.c2c-chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #f6d98b, #c49a3f); flex-shrink: 0; }
.c2c-cardno {
  display: flex; justify-content: space-between; gap: 6px; direction: ltr;
  font-size: clamp(17px, 5.2vw, 23px); font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums;
}
.c2c-holder { font-size: 13px; opacity: 0.92; }
.c2c-picked {
  display: none; position: absolute; top: 12px; inset-inline-start: 50%; transform: translateX(50%);
  width: 24px; height: 24px; border-radius: 50%; place-items: center; background: #fff; color: var(--primary-strong);
  font-size: 13px; font-weight: 800;
}
.c2c-dests.many .c2c-dest:has(input:checked) .c2c-picked { display: grid; }
.c2c-dests.many .c2c-dest:not(:has(input:checked)) .c2c-bankcard { opacity: 0.55; filter: saturate(0.6); }
.c2c-dest:has(input:focus-visible) .c2c-bankcard { outline: 2px solid var(--primary); outline-offset: 3px; }
.c2c-dest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 380px; }
.c2c-iban { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.c2c-iban-no { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.c2c-ref {
  background: var(--surface-3); border: 1px dashed var(--border-strong); border-radius: 6px; padding: 1px 8px;
  color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.c2c-ref.copied { border-color: var(--green); color: var(--green); }

/* Receipt: a drop zone that also takes a pasted screenshot (store.js). */
.c2c-drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 22px 16px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2);
  color: var(--text-2); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.c2c-drop-zone svg { color: var(--primary); }
.c2c-drop-zone b { color: var(--text); }
.c2c-drop-zone:hover, .c2c-drop.over .c2c-drop-zone, .c2c-drop-zone:focus-within { border-color: var(--primary); background: var(--primary-dim); }
.c2c-drop.has-file .c2c-drop-zone { display: none; }
.c2c-drop-file { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--green); border-radius: var(--radius-sm); background: var(--surface-2); }
.c2c-drop-file[hidden] { display: none; }
.c2c-drop-file img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; background: #fff; flex-shrink: 0; }
.c2c-drop-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.c2c-drop-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.c2c-or { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; }
.c2c-or::before, .c2c-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.c2c-submit { min-height: 48px; font-size: 15px; }

.c2c-done { align-items: center; text-align: center; padding-block: 28px; }
.c2c-done p { margin: 0; max-width: 460px; line-height: 1.9; }
.c2c-done-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(22, 163, 74, 0.14); color: var(--green); }
.c2c-facts { margin: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.c2c-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.c2c-facts dt { color: var(--text-2); }
.c2c-facts dd { margin: 0; }
.c2c-done .c2c-facts { max-width: 360px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.c2c-help { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.8; }

@media (max-width: 900px) {
  .c2c-layout { grid-template-columns: 1fr; }
  .c2c-side { position: static; }
}
@media (max-width: 480px) {
  .c2c-card-box { padding: 14px; }
  .c2c-amount-value strong { font-size: 22px; }
  .c2c-amount .c2c-copy { width: 100%; justify-content: center; }
  .c2c-bankcard { padding: 16px; }
}

/* =====================================================================
   Design themes (طرح ظاهری فروشگاه)
   ---------------------------------------------------------------------
   A store picks ONE design skin, independent of its color palette. The
   default ("" — no data-store-theme attribute) is the modern look defined
   above; each skin below re-shapes the storefront's silhouette — corner
   radius, elevation, and the button / card / section-title treatment —
   while inheriting whatever accent + canvas the store chose, so colors
   stay the store's. Every rule carries the [data-store-theme] attribute on
   :root, so it outranks the matching base component rule regardless of
   source order. Keep the slugs in sync with theme.go's storeThemes and the
   migration's CHECK.
   ===================================================================== */

/* Coherence: the attribute is present only for a non-default skin, so this
   retextures the account / checkout / form surfaces that hardcode a radius —
   keeping the chosen skin consistent sitewide, not just on the shopping pages.
   The per-skin blocks below are same-specificity and come later, so they still
   win wherever they set a specific shape. */
:root[data-store-theme] .auth-card,
:root[data-store-theme] .form-card,
:root[data-store-theme] .acct-nav,
:root[data-store-theme] .addr-card,
:root[data-store-theme] .order-card { border-radius: var(--radius); }
:root[data-store-theme] .acct-nav a,
:root[data-store-theme] .acct-nav .linklike,
:root[data-store-theme] .field input,
:root[data-store-theme] .field textarea,
:root[data-store-theme] .field select,
:root[data-store-theme] textarea[name="customer_note"],
:root[data-store-theme] .search input,
:root[data-store-theme] .theme-toggle,
:root[data-store-theme] .radio-card,
:root[data-store-theme] .pay-methods,
:root[data-store-theme] .alert,
:root[data-store-theme] .c2c-amount,
:root[data-store-theme] .c2c-dest { border-radius: var(--radius-sm); }

/* ---- مینیمال — flat, airy, hairline. No gradients, no elevation, lighter
   weights: the product image carries the page, the chrome gets out of the
   way. ---- */
:root[data-store-theme="minimal"] {
  --radius: 4px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
:root[data-store-theme="minimal"] h1,
:root[data-store-theme="minimal"] h2,
:root[data-store-theme="minimal"] h3 { font-weight: 600; }
:root[data-store-theme="minimal"] .btn { font-weight: 500; }
:root[data-store-theme="minimal"] .btn.primary { background: var(--primary); font-weight: 600; }
:root[data-store-theme="minimal"] .btn.primary:hover { filter: brightness(1.06); }
:root[data-store-theme="minimal"] .card:hover { box-shadow: none; border-color: var(--primary-strong); }
:root[data-store-theme="minimal"] .card-add { background: transparent; border-color: var(--border); }
:root[data-store-theme="minimal"] .chip { border-radius: var(--radius-sm); }
:root[data-store-theme="minimal"] .sec-title { padding-inline-start: 0; font-weight: 600; }
:root[data-store-theme="minimal"] .sec-title::before { display: none; }
:root[data-store-theme="minimal"] .hero { background: linear-gradient(180deg, var(--surface), var(--bg)); }

/* ---- دوستانه — rounded and warm. Pill buttons, deep soft shadows, and a
   dot section-marker instead of a bar: approachable, friendly, playful. ---- */
:root[data-store-theme="soft"] {
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
}
:root[data-store-theme="soft"] .btn { border-radius: 999px; }
:root[data-store-theme="soft"] .card-add { border-radius: 999px; }
:root[data-store-theme="soft"] .search input { border-radius: 999px; }
:root[data-store-theme="soft"] .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
:root[data-store-theme="soft"] .cat-tile:hover { transform: translateY(-3px); }
:root[data-store-theme="soft"] .sec-title { padding-inline-start: 16px; }
:root[data-store-theme="soft"] .sec-title::before {
  top: 6px; bottom: auto; width: 9px; height: 9px; border-radius: 50%;
}

/* ---- پرانرژی — big, punchy commerce. Generous radius, strong elevation,
   heavy gradient buttons and larger prices: built to push the sale. ---- */
:root[data-store-theme="bold"] {
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
}
:root[data-store-theme="bold"] .btn { padding: 12px 22px; }
:root[data-store-theme="bold"] .btn.primary { font-weight: 800; box-shadow: 0 8px 22px var(--primary-dim); }
:root[data-store-theme="bold"] .card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary-strong);
}
:root[data-store-theme="bold"] .card-add { font-weight: 700; }
:root[data-store-theme="bold"] .sec-title { font-size: 19px; font-weight: 800; }
:root[data-store-theme="bold"] .sec-title::before { width: 5px; }
:root[data-store-theme="bold"] .price b { font-size: 16px; }
:root[data-store-theme="bold"] .price-row b { font-size: 26px; }
:root[data-store-theme="bold"] .badge-off { font-size: 12px; padding: 3px 9px; }

/* ---- کلاسیک — refined boutique. Near-square corners, hairline borders,
   letter-spaced headings, and an underline section-marker rather than a
   colored bar: quiet, editorial, high-end. ---- */
:root[data-store-theme="classic"] {
  --radius: 2px;
  --radius-sm: 2px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
:root[data-store-theme="classic"] h1,
:root[data-store-theme="classic"] h2,
:root[data-store-theme="classic"] .p-title { letter-spacing: 0.01em; }
:root[data-store-theme="classic"] .btn { letter-spacing: 0.04em; font-weight: 500; }
:root[data-store-theme="classic"] .btn.primary { background: var(--primary); font-weight: 600; }
:root[data-store-theme="classic"] .card:hover { box-shadow: none; border-color: var(--text-3); }
:root[data-store-theme="classic"] .chip { border-radius: 0; }
:root[data-store-theme="classic"] .sec-title {
  padding-inline-start: 0; padding-bottom: 8px; letter-spacing: 0.06em; font-weight: 700;
}
:root[data-store-theme="classic"] .sec-title::before {
  inset-inline: 0; top: auto; bottom: 0; width: auto; height: 2px; border-radius: 0;
}

/* ---- دیجی‌کالا — the layout Iranian shoppers know best, after digikala.com.
   White chrome: a solid header with one big grey search box and a two-row nav,
   a full-width rounded slider, circular category tiles, the red «شگفت‌انگیز»
   strip, four-up banner tiles, product rows and grids separated by hairlines
   instead of card borders, flat red buttons with white ink, a bordered buy box
   and a Digikala-style trust row in the footer. Radii are 8px for controls and
   16px for bands, as on the site. It is the one skin that is also a layout, so
   it is meant to arrive through the theme of the same name (themes.go). ---- */
:root[data-store-theme="digikala"] {
  --radius: 8px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
/* Digikala is white-on-red. On its red, theme.go's contrast rule picks a dark
   ink by a hair, so the skin takes the white-leaning --on-primary-bold, which
   still falls back to dark ink on a light accent; [data-theme] on the selector
   outranks the per-store override in <head>, which targets :root[data-theme=…]. */
:root[data-store-theme="digikala"][data-theme] { --on-primary: var(--on-primary-bold); }
/* On the light palette Digikala's "paper" is the canvas itself — white cards
   on a white page, kept apart by hairlines — with the page grey (--surface-2)
   reserved for the search box and filled chips. Both point back into the
   derived ramp, so a merchant's own light canvas still carries through. */
:root[data-store-theme="digikala"][data-theme="light"] {
  --surface: var(--bg);
  --border: var(--surface-3);
}
:root[data-store-theme="digikala"] .chip { border-radius: 8px; background: var(--bg); }
:root[data-store-theme="digikala"] .chip:hover { border-color: var(--text-3); color: var(--text); }
:root[data-store-theme="digikala"] .tag { border-radius: 8px; }
:root[data-store-theme="digikala"] .toast {
  background: #333; color: #fff; border: 0; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* buttons: flat, red, white ink */
:root[data-store-theme="digikala"] .btn { font-weight: 500; background: var(--bg); border-color: var(--border); }
:root[data-store-theme="digikala"] .btn:hover { border-color: var(--border-strong); color: var(--text); }
:root[data-store-theme="digikala"] .btn.primary {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700;
}
:root[data-store-theme="digikala"] .btn.primary:hover { filter: brightness(0.94); color: var(--on-primary); }
:root[data-store-theme="digikala"] .btn.ghost { background: transparent; }

/* header: solid white bar, one big grey search box, outlined account button,
   a divider and the cart icon at the end; second row is the category nav */
:root[data-store-theme="digikala"] .hdr {
  background: var(--bg); backdrop-filter: none; border-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
}
:root[data-store-theme="digikala"] .hdr-row { gap: 14px; min-height: 72px; padding-block: 12px 4px; }
:root[data-store-theme="digikala"] .brand { font-size: 20px; gap: 10px; }
:root[data-store-theme="digikala"] .brand-mark { background: var(--primary); color: #fff; border-radius: 8px; }
:root[data-store-theme="digikala"] .search { order: 1; flex: 1 1 420px; max-width: 820px; min-width: 0; }
:root[data-store-theme="digikala"] .search input {
  height: 48px; padding: 0 44px 0 14px; border: 0; border-radius: 8px;
  background: var(--surface-2); font-size: 14px;
}
:root[data-store-theme="digikala"] .search input:focus {
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong);
}
:root[data-store-theme="digikala"] .search-ic { inset-inline-start: 14px; width: 22px; height: 22px; }
:root[data-store-theme="digikala"] .suggest { border-radius: 8px; border-color: var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
:root[data-store-theme="digikala"] .theme-toggle { order: 2; margin-inline-start: auto; width: 40px; height: 40px; border-radius: 8px; }
:root[data-store-theme="digikala"] .acct-link {
  order: 2; margin-inline-start: 0; height: 40px; padding: 0 12px; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px;
}
:root[data-store-theme="digikala"] .theme-toggle:not(:hover) + .acct-link { margin-inline-start: 0; }
:root[data-store-theme="digikala"] .search + .acct-link { margin-inline-start: auto; }
:root[data-store-theme="digikala"] .acct-link:hover { border-color: var(--border-strong); color: var(--text); }
:root[data-store-theme="digikala"] .acct-link .cart-label { font-weight: 500; }
:root[data-store-theme="digikala"] .cart-link {
  order: 3; margin-inline-start: 0; color: var(--text); height: 28px;
  padding-inline-start: 14px; border-inline-start: 1px solid var(--border);
}
:root[data-store-theme="digikala"] .cart-link:hover { color: var(--primary); }
:root[data-store-theme="digikala"] .cart-link .cart-label { display: none; }
:root[data-store-theme="digikala"] .cart-badge { background: var(--primary); color: #fff; top: -8px; inset-inline-start: 22px; }
:root[data-store-theme="digikala"] .catnav { border-top: 0; }
:root[data-store-theme="digikala"] .catnav-row { gap: 0; }
:root[data-store-theme="digikala"] .catnav-row a { padding: 10px 11px 12px; font-size: 13px; font-weight: 500; color: var(--text-2); }
:root[data-store-theme="digikala"] .catnav-row a:hover { color: var(--text); border-bottom-color: var(--primary); }
:root[data-store-theme="digikala"] .catnav-row .catnav-all {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  color: var(--text) !important; font-weight: 700; padding-inline-end: 16px; margin-inline-end: 6px;
}
:root[data-store-theme="digikala"] .catnav-all::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-store-theme="digikala"] .catnav-all::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 11px; bottom: 13px; width: 1px; background: var(--border);
}
:root[data-store-theme="digikala"] .catnav-row .catnav-all:hover { border-bottom-color: transparent; }

/* section bands: plain bold titles, «مشاهده همه» as a small outlined pill
   with a chevron, no coloured marker bar */
:root[data-store-theme="digikala"] .home-sec { margin-block: 28px; }
:root[data-store-theme="digikala"] .sec-head { align-items: center; margin-bottom: 12px; }
:root[data-store-theme="digikala"] .sec-title { padding-inline-start: 0; font-size: 17px; font-weight: 700; }
:root[data-store-theme="digikala"] .sec-title::before { display: none; }
:root[data-store-theme="digikala"] .sec-more {
  display: inline-flex; align-items: center; gap: 2px; padding: 5px 10px 5px 6px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 12px; font-weight: 700;
  transition: 0.15s;
}
:root[data-store-theme="digikala"] .sec-more::after,
:root[data-store-theme="digikala"] .offer-cta::after {
  content: ""; width: 16px; height: 16px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-store-theme="digikala"] .sec-more:hover { border-color: var(--primary); color: var(--primary); }
:root[data-store-theme="digikala"] .offer-detail-head .sec-more::after { content: none; }

/* main slider: one slide per view, rounded, snapping — the carousel script
   (store.js) reads `scroll-snap-type: x mandatory` as the cue to add arrows,
   dots and autoplay. Slides without an image are gradient tiles so the theme
   looks finished before the merchant uploads banners. */
:root[data-store-theme="digikala"] .builder-slider {
  grid-auto-columns: 100%; gap: 0; padding-bottom: 0; border-radius: var(--radius-lg);
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
:root[data-store-theme="digikala"] .builder-slider::-webkit-scrollbar { display: none; }
:root[data-store-theme="digikala"] .builder-slide {
  min-height: 0; aspect-ratio: 3.2 / 1; border: 0; border-radius: 0;
  background: linear-gradient(120deg, var(--primary-dim) 0%, var(--surface-2) 55%, var(--surface-3) 100%);
}
:root[data-store-theme="digikala"] .builder-slide img { min-height: 0; height: 100%; opacity: 1; }
:root[data-store-theme="digikala"] .builder-slide-copy {
  inset: 0; justify-content: center; gap: 6px; max-width: 58%; padding: 24px 44px; background: none;
}
:root[data-store-theme="digikala"] .builder-slide:has(img) .builder-slide-copy {
  color: #fff; background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.18) 60%, transparent);
  max-width: 100%;
}
:root[data-store-theme="digikala"] .builder-slide:has(img) .builder-slide-copy span,
:root[data-store-theme="digikala"] .builder-slide:has(img) .builder-eyebrow { color: rgba(255, 255, 255, 0.9); }
:root[data-store-theme="digikala"] .builder-slide-copy strong { font-size: clamp(18px, 2.6vw, 30px); font-weight: 800; line-height: 1.5; }
:root[data-store-theme="digikala"] .builder-slide-copy span { font-size: clamp(13px, 1.3vw, 15px); }
:root[data-store-theme="digikala"] .builder-slide-copy em {
  display: inline-flex; align-self: flex-start; margin-top: 10px; padding: 8px 22px;
  background: var(--primary); color: var(--on-primary); border-radius: 8px; font-size: 13px; font-weight: 700;
}
:root[data-store-theme="digikala"] .carousel-dots { bottom: 2px; }

/* category row: circular tiles in a centred, scrollable strip */
:root[data-store-theme="digikala"] .cat-tiles {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px;
  justify-content: flex-start; justify-content: safe center;
}
:root[data-store-theme="digikala"] .cat-tiles::-webkit-scrollbar { display: none; }
:root[data-store-theme="digikala"] .cat-tile { flex: 0 0 108px; gap: 10px; padding: 6px 2px; background: transparent; border: 0; }
:root[data-store-theme="digikala"] .cat-tile:hover { transform: none; }
:root[data-store-theme="digikala"] .cat-tile:hover .cat-tile-name { color: var(--primary); }
:root[data-store-theme="digikala"] .cat-tile img,
:root[data-store-theme="digikala"] .cat-tile-ic {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
:root[data-store-theme="digikala"] .cat-tile-name { font-size: 12.5px; font-weight: 500; line-height: 1.6; }

/* four-up banner tiles: the image is the tile, the copy sits on it. The tile
   keeps overflow visible and min-height auto, which lets a ratio box grow
   past its ratio when the copy needs the room (instead of clipping it on a
   phone), so the image and the caption round their own corners. */
:root[data-store-theme="digikala"] .builder-card-grid { gap: 16px; }
:root[data-store-theme="digikala"] .builder-info-card {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0;
  aspect-ratio: 314 / 240; min-height: auto; border: 0; border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
}
:root[data-store-theme="digikala"] .builder-info-card:hover { box-shadow: var(--shadow); }
:root[data-store-theme="digikala"] .builder-info-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
}
:root[data-store-theme="digikala"] .builder-info-card span {
  position: relative; z-index: 1; align-self: end; padding: 18px; gap: 4px;
  border-end-start-radius: inherit; border-end-end-radius: inherit;
}
:root[data-store-theme="digikala"] .builder-info-card:has(img) span {
  padding-top: 48px; color: #fff; background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent);
}
:root[data-store-theme="digikala"] .builder-info-card small { color: var(--primary); font-size: 12px; font-weight: 700; }
:root[data-store-theme="digikala"] .builder-info-card strong { font-size: 17px; font-weight: 800; line-height: 1.5; }
:root[data-store-theme="digikala"] .builder-info-card em { font-size: 12.5px; }
:root[data-store-theme="digikala"] .builder-info-card:has(img) small,
:root[data-store-theme="digikala"] .builder-info-card:has(img) em { color: rgba(255, 255, 255, 0.88); }

/* wide promo banner */
:root[data-store-theme="digikala"] .builder-banner {
  border: 0; border-radius: var(--radius-lg); padding: 28px 32px;
  background: linear-gradient(120deg, var(--primary-dim), var(--surface-2) 70%);
}
/* :where() keeps these at the specificity of the rules above, so the builder's
   height presets, the hero background and the offer strip's own image and
   title keep their sizes. */
:root[data-store-theme="digikala"] .builder-banner:where(:not([class*="banner-h-"], .banner-full, .offer-banner)) { min-height: 180px; }
:root[data-store-theme="digikala"] .builder-banner img:where(:not(.banner-bg, .offer-banner-img)) { height: 180px; border-radius: 12px; }
:root[data-store-theme="digikala"] .builder-banner-copy strong:where(:not(.offer-title)) { font-size: 22px; font-weight: 800; }
:root[data-store-theme="digikala"] .builder-banner-copy em {
  display: inline-flex; align-self: flex-start; margin-top: 10px; padding: 8px 18px;
  background: var(--primary); color: var(--on-primary); border-radius: 8px; font-size: 13px; font-weight: 700;
}
:root[data-store-theme="digikala"] .builder-banner.banner-full { padding: 34px; }

/* product cards: white, hairline-separated, red pill badge by the price, an
   outlined add-to-cart and a heart that only shows on hover */
:root[data-store-theme="digikala"] .card { border-radius: var(--radius); }
:root[data-store-theme="digikala"] .card:hover { border-color: var(--border); box-shadow: 0 0 24px rgba(0, 0, 0, 0.12); z-index: 1; }
:root[data-store-theme="digikala"] .card-img { padding: 12px; }
:root[data-store-theme="digikala"] .card-body { padding: 8px 12px 12px; gap: 6px; }
:root[data-store-theme="digikala"] .card-meta { font-size: 11px; }
:root[data-store-theme="digikala"] .card-title { font-size: 12.5px; font-weight: 500; line-height: 2; min-height: 4em; }
:root[data-store-theme="digikala"] .card .badge-off {
  top: auto; bottom: 8px; inset-inline-start: 12px; height: 18px; min-width: 34px; padding: 0 7px;
  border-radius: 16px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
:root[data-store-theme="digikala"] .badge-digital { bottom: 8px; inset-inline-end: 12px; inset-inline-start: auto; border-radius: 8px; }
:root[data-store-theme="digikala"] .card.oos .card-img { filter: grayscale(0.6); opacity: 0.85; }
:root[data-store-theme="digikala"] .price b { font-size: 14px; font-weight: 700; }
:root[data-store-theme="digikala"] .price-old { font-size: 12px; }
:root[data-store-theme="digikala"] .oos-label { font-size: 12.5px; }
:root[data-store-theme="digikala"] .card-add {
  margin: 0 12px 12px; padding: 7px; border: 1px solid var(--primary); background: transparent;
  color: var(--primary); font-size: 12.5px; font-weight: 700;
}
:root[data-store-theme="digikala"] .card-add:hover { background: var(--primary-dim); }
:root[data-store-theme="digikala"] .card-wish {
  background: var(--bg); border-color: var(--border); backdrop-filter: none; opacity: 0; transition: 0.15s;
}
:root[data-store-theme="digikala"] .card:hover .card-wish,
:root[data-store-theme="digikala"] .card-wish.on,
:root[data-store-theme="digikala"] .card-wish:focus-visible { opacity: 1; }
@media (hover: none) { :root[data-store-theme="digikala"] .card-wish { opacity: 1; } }
/* Hairline grids: the container draws the end edges, each card draws its own
   top + inline-start edge, so lines never double and an incomplete last row
   stays open instead of showing a coloured gap. */
:root[data-store-theme="digikala"] .cards-grid {
  gap: 0; border: 1px solid var(--border); border-top: 0; border-inline-start: 0;
  border-radius: var(--radius-lg); overflow: hidden;
}
:root[data-store-theme="digikala"] .cards-grid .card {
  border: 0; border-top: 1px solid var(--border); border-inline-start: 1px solid var(--border); border-radius: 0;
}
:root[data-store-theme="digikala"] .cards-row {
  gap: 0; padding: 0; grid-auto-columns: 200px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); scrollbar-width: none;
}
:root[data-store-theme="digikala"] .cards-row::-webkit-scrollbar { display: none; }
:root[data-store-theme="digikala"] .cards-row .card { border: 0; border-inline-start: 1px solid var(--border); border-radius: 0; }
:root[data-store-theme="digikala"] .cards-row .card:first-child { border-inline-start: 0; }

/* «شگفت‌انگیز»: the special-offers block as Digikala's red strip — the
   campaign copy and countdown as the first tile, the discounted cards in a
   white hairline row beside it. Comes after the banner rules on purpose: the
   offer banner is a .builder-banner and must win over the promo-banner look. */
:root[data-store-theme="digikala"] .offer-block {
  flex-direction: row; align-items: stretch; gap: 10px; padding: 12px;
  background: var(--primary); color: #fff; border-radius: var(--radius-lg);
}
/* The strip is painted on the .wrap itself, so trim it to the content box its
   neighbours sit in: otherwise it overhangs them by the 16px gutter on each
   side and runs edge to edge on a phone. */
:root[data-store-theme="digikala"] .offer-block.wrap { width: calc(100% - 32px); max-width: 1334px; }
:root[data-store-theme="digikala"] .offer-banner,
:root[data-store-theme="digikala"] .offer-banner.banner-full {
  flex: 0 0 196px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0; padding: 12px 8px; background: transparent; border: 0; border-radius: 0; color: #fff;
}
:root[data-store-theme="digikala"] .offer-banner .banner-overlay,
:root[data-store-theme="digikala"] .offer-banner.banner-full::before { display: none; }
:root[data-store-theme="digikala"] .offer-banner-copy { align-items: center; text-align: center; gap: 8px; max-width: none; }
:root[data-store-theme="digikala"] .offer-eyebrow { color: rgba(255, 255, 255, 0.85); font-size: 12px; }
:root[data-store-theme="digikala"] .offer-title { font-size: 21px; font-weight: 800; color: #fff; }
:root[data-store-theme="digikala"] .offer-subtitle,
:root[data-store-theme="digikala"] .offer-promo { color: rgba(255, 255, 255, 0.85); font-size: 12.5px; margin: 0; }
:root[data-store-theme="digikala"] .offer-banner-img,
:root[data-store-theme="digikala"] .offer-banner .banner-bg {
  position: static; z-index: auto; width: 110px; height: 110px; min-height: 0;
  object-fit: contain; order: -1; border-radius: 12px;
}
:root[data-store-theme="digikala"] .offer-countdown { margin-top: 2px; }
:root[data-store-theme="digikala"] .offer-countdown-fallback { color: #fff; }
:root[data-store-theme="digikala"] .offer-block .offer-countdown-timer { gap: 5px; }
:root[data-store-theme="digikala"] .offer-block .offer-countdown-timer .cd-seg {
  min-width: 40px; padding: 4px 5px; border: 0; border-radius: 6px; background: #fff; color: var(--primary);
}
:root[data-store-theme="digikala"] .offer-block .offer-countdown-timer .cd-seg b { font-size: 17px; }
:root[data-store-theme="digikala"] .offer-block .offer-countdown-timer .cd-seg small { color: var(--primary); opacity: 0.8; }
:root[data-store-theme="digikala"] .offer-countdown-ended { color: rgba(255, 255, 255, 0.85); }
:root[data-store-theme="digikala"] .btn.offer-cta,
:root[data-store-theme="digikala"] .btn.offer-cta:hover {
  margin-top: 4px; padding: 4px 2px; gap: 2px; background: transparent; border: 0; box-shadow: none;
  color: #fff; font-size: 13px; font-weight: 700; filter: none;
}
/* A campaign's own button colours arrive inline and win over the text-link
   look above, so give such a CTA a real button's padding and the accent ink. */
:root[data-store-theme="digikala"] .btn.offer-cta[style*="background"] {
  padding: 6px 14px; border-radius: var(--radius); color: var(--on-primary);
}
:root[data-store-theme="digikala"] .offer-cards { flex: 1; min-width: 0; border: 0; border-radius: 12px; }
/* The strip is white-on-red; the cards inside are ordinary cards again. */
:root[data-store-theme="digikala"] .offer-cards .card { color: var(--text); }

/* listing: text sort bar, bordered filter panel, hairline grid */
:root[data-store-theme="digikala"] .list-head h1 { font-size: 19px; }
:root[data-store-theme="digikala"] .list-layout { gap: 16px; }
:root[data-store-theme="digikala"] .filters { border-radius: var(--radius-lg); padding: 16px; }
@media (min-width: 769px) {
  :root[data-store-theme="digikala"] .filters { top: calc(var(--hdr-h) + 64px); }
}
:root[data-store-theme="digikala"] .fgroup { padding-block: 12px; }
:root[data-store-theme="digikala"] .fgroup-title { font-size: 13px; font-weight: 700; color: var(--text); }
:root[data-store-theme="digikala"] .check input { accent-color: var(--primary); }
:root[data-store-theme="digikala"] .toolbar { gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
:root[data-store-theme="digikala"] .sort { margin-inline-start: 0; }
:root[data-store-theme="digikala"] .sort select { border: 0; background: transparent; color: var(--primary); font-weight: 700; padding: 4px 0; }
:root[data-store-theme="digikala"] .toolbar .result-count { margin-inline-start: auto; color: var(--text-3); }
:root[data-store-theme="digikala"] .empty-state { border-radius: var(--radius-lg); }
:root[data-store-theme="digikala"] .cat-card { border-radius: var(--radius-lg); }

/* product page: bold title, grey spec chips, bordered buy box with a full
   red button */
:root[data-store-theme="digikala"] .p-title { font-size: 19px; font-weight: 700; line-height: 2; }
:root[data-store-theme="digikala"] .p-main-img { border-radius: var(--radius-lg); }
:root[data-store-theme="digikala"] .p-thumb { border-radius: 8px; }
:root[data-store-theme="digikala"] .key-specs li { background: var(--surface-2); border: 0; padding: 10px 12px; }
:root[data-store-theme="digikala"] .p-buy { border-radius: var(--radius-lg); padding: 16px; gap: 12px; }
:root[data-store-theme="digikala"] .buy-row { font-size: 12.5px; }
:root[data-store-theme="digikala"] .price-row b { font-size: 20px; }
:root[data-store-theme="digikala"] .buy-btn { padding-block: 11px; font-size: 13.5px; }
:root[data-store-theme="digikala"] .spec-group summary { background: var(--surface-2); }
:root[data-store-theme="digikala"] .spec-table th { background: transparent; }
:root[data-store-theme="digikala"] .buybar,
:root[data-store-theme="digikala"] .sticky-cta { background: var(--bg); backdrop-filter: none; border-top: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); }
:root[data-store-theme="digikala"] .vopt { border-radius: 8px; }

/* cart, checkout, account, forms */
:root[data-store-theme="digikala"] .cart-item,
:root[data-store-theme="digikala"] .cart-summary,
:root[data-store-theme="digikala"] .auth-card,
:root[data-store-theme="digikala"] .form-card,
:root[data-store-theme="digikala"] .acct-nav { border-radius: var(--radius-lg); }
:root[data-store-theme="digikala"] .qty-ctl { border-color: var(--border); }
:root[data-store-theme="digikala"] .qty-ctl button { background: var(--bg); }
:root[data-store-theme="digikala"] .field input,
:root[data-store-theme="digikala"] .field textarea,
:root[data-store-theme="digikala"] .field select,
:root[data-store-theme="digikala"] .map-search input,
:root[data-store-theme="digikala"] textarea[name="customer_note"],
:root[data-store-theme="digikala"] .price-range .in { background: var(--bg); }
:root[data-store-theme="digikala"] .radio-card { background: var(--bg); }
:root[data-store-theme="digikala"] .radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-dim); }
:root[data-store-theme="digikala"] .acct-nav a.on { background: var(--primary-dim); }

/* footer: Digikala's trust row (icon above label), plain link columns */
:root[data-store-theme="digikala"] .ftr { background: var(--bg); margin-top: 40px; }
:root[data-store-theme="digikala"] .trust-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding-block: 26px; }
:root[data-store-theme="digikala"] .trust { flex-direction: column; gap: 8px; font-size: 12px; }
:root[data-store-theme="digikala"] .trust svg { width: 44px; height: 44px; color: var(--text-2); }
:root[data-store-theme="digikala"] .trust-icon { width: 44px; height: 44px; }
:root[data-store-theme="digikala"] .ftr-col h3 { font-size: 15px; margin-bottom: 12px; }
:root[data-store-theme="digikala"] .ftr-col li a { padding-block: 5px; }
:root[data-store-theme="digikala"] .ftr-bottom { color: var(--text-3); }

/* mobile bottom bar: white, labelled, red when active */
:root[data-store-theme="digikala"] .bottomnav {
  background: var(--bg); backdrop-filter: none; border-top: 0; box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.08);
}
:root[data-store-theme="digikala"] .bottomnav a { color: var(--text-2); font-size: 10.5px; }
:root[data-store-theme="digikala"] .bottomnav a.on { color: var(--primary); font-weight: 700; }
:root[data-store-theme="digikala"] .bottomnav a:hover { color: var(--primary); }

@media (max-width: 768px) {
  :root[data-store-theme="digikala"] .hdr-row { min-height: 0; padding-block: 8px; gap: 8px; }
  :root[data-store-theme="digikala"] .search { order: 4; flex: 1 1 100%; max-width: none; }
  :root[data-store-theme="digikala"] .search input { height: 44px; }
  :root[data-store-theme="digikala"] .acct-link { padding: 0 9px; }
  :root[data-store-theme="digikala"] .catnav-row a { padding: 8px 10px 10px; }
  :root[data-store-theme="digikala"] .home-sec { margin-block: 20px; }
  :root[data-store-theme="digikala"] .builder-slider { grid-auto-columns: 100%; border-radius: 12px; }
  :root[data-store-theme="digikala"] .builder-slide { aspect-ratio: 2 / 1; }
  :root[data-store-theme="digikala"] .builder-slide-copy { padding: 16px 20px; max-width: 82%; }
  :root[data-store-theme="digikala"] .cat-tile { flex-basis: 88px; }
  :root[data-store-theme="digikala"] .cat-tile img,
  :root[data-store-theme="digikala"] .cat-tile-ic { width: 68px; height: 68px; }
  :root[data-store-theme="digikala"] .offer-block { flex-direction: column; padding: 10px; }
  :root[data-store-theme="digikala"] .offer-banner,
  :root[data-store-theme="digikala"] .offer-banner.banner-full { flex-basis: auto; padding: 4px 6px 10px; }
  :root[data-store-theme="digikala"] .offer-banner-copy {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: start;
  }
  :root[data-store-theme="digikala"] .offer-banner-img,
  :root[data-store-theme="digikala"] .offer-banner .banner-bg,
  :root[data-store-theme="digikala"] .offer-eyebrow,
  :root[data-store-theme="digikala"] .offer-subtitle,
  :root[data-store-theme="digikala"] .offer-promo { display: none; }
  :root[data-store-theme="digikala"] .offer-title { font-size: 18px; }
  :root[data-store-theme="digikala"] .btn.offer-cta { margin-top: 0; }
  :root[data-store-theme="digikala"] .filters { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  :root[data-store-theme="digikala"] .builder-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  :root[data-store-theme="digikala"] .builder-info-card { border-radius: 12px; }
  :root[data-store-theme="digikala"] .builder-info-card strong { font-size: 15px; }
  :root[data-store-theme="digikala"] .builder-banner { padding: 18px; }
  :root[data-store-theme="digikala"] .cards-row { grid-auto-columns: 164px; }
  :root[data-store-theme="digikala"] .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-store-theme="digikala"] .trust-row { grid-template-columns: repeat(2, 1fr); gap: 16px 8px; }
}

/* ---------- marketing blocks (stats / features / steps / quotes / faq /
   pricing / cta) ------------------------------------------------------------
   The section shapes a landing page needs, on the shared builder engine. All of
   it is driven by the same custom properties as the rest of the storefront, so a
   store's palette and design skin apply here with no per-block theming. */

.bk-icon { width: 24px; height: 24px; flex: none; }
.bk-eyebrow {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--primary);
}

/* stats */
.bk-stats {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.bk-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; text-align: center;
}
.bk-stat strong { display: block; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; color: var(--primary); }
.bk-stat span { display: block; margin-top: 4px; font-size: 14px; color: var(--text-2); }
.bk-stat small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); }

/* feature grid */
.bk-features {
  display: grid; gap: 16px;
  grid-template-columns: repeat(var(--home-cols, 3), minmax(0, 1fr));
}
.bk-feature {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; color: inherit; text-decoration: none;
  transition: border-color .2s, transform .2s;
}
a.bk-feature:hover { border-color: var(--primary); transform: translateY(-2px); }
.bk-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px;
  background: var(--primary-dim); color: var(--primary);
}
.bk-feature-img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 12px; }
.bk-feature strong { display: block; font-size: 16px; font-weight: 700; }
.bk-feature p { margin: 6px 0 0; font-size: 14px; line-height: 1.9; color: var(--text-2); }
.bk-feature em { display: inline-block; margin-top: 10px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--primary); }

/* steps */
.bk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: bk-step; }
.bk-step { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.bk-step-mark {
  counter-increment: bk-step;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary-dim); color: var(--primary); font-weight: 800;
}
.bk-step-mark:empty::before { content: counter(bk-step); }
.bk-step small { display: block; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.bk-step strong { display: block; margin-top: 2px; font-size: 15.5px; }
.bk-step p { margin: 6px 0 0; font-size: 14px; line-height: 1.9; color: var(--text-2); }

/* testimonials */
.bk-quotes { display: grid; gap: 16px; grid-template-columns: repeat(var(--home-cols, 3), minmax(0, 1fr)); }
.bk-quote { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.bk-quote blockquote { margin: 0; font-size: 14.5px; line-height: 2; color: var(--text); }
.bk-quote figcaption { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.bk-quote figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bk-quote figcaption strong { display: block; font-size: 14px; }
.bk-quote figcaption small { display: block; font-size: 12.5px; color: var(--text-3); }

/* faq */
.bk-faq { display: grid; gap: 10px; }
.bk-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.bk-faq-item summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.bk-faq-item summary::marker { color: var(--primary); }
.bk-faq-item p { margin: 10px 0 0; font-size: 14px; line-height: 2; color: var(--text-2); }

/* pricing */
.bk-pricing { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.bk-plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.bk-plan.is-featured { border: 1.5px solid var(--primary); box-shadow: var(--shadow); }
.bk-plan-badge {
  position: absolute; top: -12px; inset-inline-start: 24px;
  background: var(--primary); color: var(--on-primary);
  font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px;
}
.bk-plan h3 { margin: 0; font-size: 18px; font-weight: 800; }
.bk-plan-desc { margin: 6px 0 0; font-size: 13.5px; color: var(--text-3); }
.bk-plan-price { margin: 16px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bk-plan-price b { font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.bk-plan-price span { font-size: 13px; color: var(--text-3); }

/* Billing-period switcher. The headline price is always per month so the
   periods compare directly; .bk-plan-total states what is actually charged, and
   .bk-plan-save the discount against the family's shortest period. */
.bk-period-switch {
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  margin: 0 auto 22px; padding: 4px; width: fit-content;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.bk-period-tab {
  border: none; cursor: pointer; background: transparent; color: var(--text-2);
  font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 8px 17px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.bk-period-tab:hover { color: var(--text); }
.bk-period-tab.on { background: var(--primary); color: var(--on-primary); }
.bk-plan-save {
  font-size: 12px; font-weight: 800; color: var(--primary);
  background: var(--primary-dim); border-radius: 999px; padding: 3px 9px;
}
.bk-plan-total { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.bk-plan-features { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.bk-plan-features li { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text-2); }
.bk-plan-features li .bk-icon { width: 18px; height: 18px; color: var(--primary); }

/* cta */
.bk-cta {
  display: flex; gap: 18px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--primary); border-radius: var(--radius);
  background: var(--primary-dim);
}
.bk-cta h2 { margin: 0; font-size: clamp(19px, 2.6vw, 26px); }
.bk-cta p { margin: 8px 0 0; font-size: 14.5px; color: var(--text-2); }
.bk-cta-btn { flex: none; padding: 13px 26px; font-size: 15px; }

@media (max-width: 900px) {
  .bk-features, .bk-quotes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .bk-features, .bk-quotes { grid-template-columns: 1fr; }
  .bk-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Author-supplied markup. Only the container is styled: the point of the block
   is that its insides are the author's, so the stylesheet claims nothing inside
   it beyond keeping wide content from breaking the page's horizontal scroll. */
.bk-raw { overflow-x: auto; }
.bk-raw img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   Blog / buying guides (CMS C2): the index feed, the lead card and the
   article's editorial frame. The article BODY is not styled here — it is the
   same block partials every other CMS surface renders, so it inherits the
   builder styles above and stays visually identical to a managed page.
   --------------------------------------------------------------------------- */

.blog-head { margin-bottom: 6px; }
.blog-cats { margin-top: 14px; }
.blog-cats .chip.on { border-color: var(--primary); color: var(--primary); }
.blog-cats .cnt { color: var(--text-3); font-size: 12px; }

/* Lead story: image beside the copy on desktop, stacked on narrow screens. */
.blog-lead {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 30px); align-items: center;
  margin: 22px 0 26px; padding: clamp(14px, 2vw, 20px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: border-color .2s;
}
.blog-lead:hover { border-color: var(--primary); }
/* No cover, no empty column: a coverless lead takes the full width rather than
   leaving half the card blank. */
.blog-lead.is-textonly { grid-template-columns: 1fr; }
.blog-lead-img { display: block; overflow: hidden; border-radius: var(--radius-sm); }
.blog-lead-img img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-lead-body { display: flex; flex-direction: column; gap: 10px; }
.blog-lead-title { font-size: clamp(20px, 2.8vw, 28px); font-weight: 800; line-height: 1.5; }

.blog-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.blog-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s;
}
.blog-card:hover { border-color: var(--primary); }
.blog-card > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.blog-card-img { display: block; }
.blog-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 17px; flex: 1; }
.blog-card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.7; }

.blog-tag {
  align-self: flex-start; display: inline-block;
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: var(--primary-dim); border-radius: 999px; padding: 3px 11px;
  text-decoration: none;
}
.blog-excerpt {
  margin: 0; font-size: 13.5px; line-height: 2; color: var(--text-2);
  /* Teasers must not set the card height: three lines, then an ellipsis. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-meta {
  margin-top: auto; padding-top: 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-3);
}
.blog-meta .sep { color: var(--border-strong); }
.blog-feed-note { margin: 26px 0 0; font-size: 13px; }
.blog-feed-note a { color: var(--text-3); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 28px 0 0; }

/* Article page. The measure is deliberately narrow — long Persian prose at full
   container width is unreadable — and the block partials inside .article-body
   inherit it by having their .wrap max-width capped here. */
.article-head { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.article-head h1 { margin: 0; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.6; }
.article-lede { margin: 0; font-size: clamp(15px, 1.8vw, 17px); line-height: 2.1; color: var(--text-2); }
.article-cover { margin-top: 18px; }
.article-cover img { display: block; width: 100%; border-radius: var(--radius); }
.article-head, .article-cover, .article-body > .wrap { max-width: 820px; }
.article-body { margin-top: 6px; }
.article-body .builder-rich { font-size: 16px; line-height: 2.2; }

@media (max-width: 760px) {
  .blog-lead { grid-template-columns: 1fr; }
}

/* ---------- reviews & Q&A (0151) ---------- */
.p-feedback { margin-top: 40px; max-width: 900px; }
.rv-summary { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.rv-avg { display: flex; flex-direction: column; gap: 2px; }
.rv-avg strong { font-size: 34px; line-height: 1; }
.rv-dist { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.rv-dist-row { display: grid; grid-template-columns: 44px 1fr 36px; gap: 8px; align-items: center; font-size: 13px; }
.rv-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.rv-bar i { display: block; height: 100%; background: #f5a623; }
.rv-item, .qa-item { padding: 14px 0; border-top: 1px solid var(--border); }
.rv-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-stars { color: #f5a623; letter-spacing: 1px; }
.rv-meta { font-size: 12px; margin-top: 4px; }
.rv-reply { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.rv-form { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.rv-form h3 { margin: 0; font-size: 15px; }
.rv-rate { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.rv-rate legend { font-size: 13px; margin-bottom: 4px; }
.qa-q, .qa-a { margin: 4px 0; }
.qa-a { color: var(--text-2); }

/* ---------- delivery windows at checkout ---------- */
.slot-day { border: 0; padding: 0; margin: 0 0 12px; }
.slot-day legend { font-weight: 600; margin-bottom: 6px; }
.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

/* ---------- «خرید با هم» bundles ---------- */
.bundle-box { margin-top: 40px; max-width: 900px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.bundle-items { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bundle-item { display: grid; justify-items: center; gap: 4px; width: 130px; text-align: center; font-size: 13px; color: inherit; }
.bundle-item img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: var(--surface-2); }
.bundle-plus { font-size: 22px; color: var(--text-2); }
.bundle-total { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.bundle-total strong { font-size: 18px; }