/* ===================================================================
   NICE WATER 2026 — Premium Edition
   Design tokens, base layout, typography
   =================================================================== */

:root {
  /* Brand palette — Deep Blue + Gold luxury */
  --c-bg-0:        #050b1c;
  --c-bg-1:        #07112a;
  --c-bg-2:        #0c1a3a;
  --c-bg-3:        #122555;
  --c-surface:     rgba(255,255,255,0.05);
  --c-surface-2:   rgba(255,255,255,0.08);
  --c-border:      rgba(255,255,255,0.10);
  --c-border-2:    rgba(255,255,255,0.18);
  --c-ghost-bg:      rgba(255,255,255,0.10);
  --c-ghost-bg-hover:rgba(255,255,255,0.16);
  --c-ghost-brd:     rgba(255,255,255,0.30);

  --c-blue-50:     #e7f1ff;
  --c-blue-100:    #c2dcff;
  --c-blue-200:    #8db8ff;
  --c-blue-300:    #5d95f7;
  --c-blue-400:    #3b76e8;
  --c-blue-500:    #2058d6;
  --c-blue-600:    #1843b3;
  --c-blue-700:    #122f85;
  --c-blue-deep:   #0a1f5c;

  --c-gold:        #d4af6f;
  --c-gold-soft:   #e9c98a;
  --c-gold-deep:   #a68543;
  --c-gold-glow:   rgba(212,175,111,0.45);

  --c-text:        #f3f6ff;
  --c-text-dim:    rgba(243,246,255,0.82);
  --c-text-muted:  rgba(243,246,255,0.66);
  --c-white:       #ffffff;

  --c-accent:      #4ec8ff;
  --c-accent-2:    #7ee9ff;
  --c-wa:          #25D366;

  /* Action colour — reserved for BUY actions only (Von Restorff / isolation).
     It must appear nowhere else on the page.
     2026-09-11 rev 2: deep gold was replaced by deep blue. Gold carries
     "status / heritage", not "act now" (Zhou et al. 2025, JCR: *lower*
     saturation is what signals status, so a saturated gold fill works
     against the very thing gold is there for), and gold sits opposite the
     site's blue on the wheel — maximum tension for a trust purchase.
     Blue reads as competence (Labrecque & Milne 2012) and blue retail
     environments produce more purchases and fewer postponements than red
     (Bellizzi & Hite 1992). Isolation is preserved by turning every
     secondary button neutral grey, further down this file.
     Dark-theme values are below; the hue family is the same in both. */
  --c-action:      #5d95f7;   /* 6.64:1 on the dark ground */
  --c-action-2:    #7eabff;
  --c-action-fg:   #04122e;   /* 6.28:1 on the fill */

  /* the neutral every non-buy button wears, so the action colour stays alone */
  --c-btn-2-fg:       #9aa3b2;   /* 7.35:1 on the dark ground */
  --c-btn-2-brd:      #677484;   /* 3.93:1 */
  --c-btn-2-bg-hover: rgba(255,255,255,0.07);

  /* the floating dock's material. 0.82 is the floor I am willing to go to:
     measured against the worst possible backdrop (pure white content under
     the dark dock, pure black under the light one) the labels still read at
     5.08-5.48:1 and the active colour at 3.72-5.52:1. Below ~0.80 the dark
     theme's active colour slips under 3:1, so this is the edge of safe. */
  --c-dock-bg:        rgba(7,17,42,0.82);
  --c-dock-pill:      rgba(93,149,247,0.85);   /* the selected tab, matte */

  /* Gradients */
  --grad-hero:     radial-gradient(1100px 700px at 18% 8%, rgba(78,200,255,0.18), transparent 60%),
                   radial-gradient(900px 600px at 90% 18%, rgba(212,175,111,0.14), transparent 60%),
                   radial-gradient(1300px 800px at 60% 100%, rgba(32,88,214,0.20), transparent 70%),
                   linear-gradient(180deg, #050b1c 0%, #07112a 45%, #0a1f5c 100%);

  --grad-gold:     linear-gradient(135deg, #d4af6f 0%, #e9c98a 35%, #d4af6f 65%, #a68543 100%);
  --grad-blue:     linear-gradient(135deg, #5d95f7 0%, #2058d6 50%, #122f85 100%);
  --grad-accent:   linear-gradient(135deg, #7ee9ff 0%, #4ec8ff 45%, #3b76e8 100%);
  --grad-glass:    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  --grad-text:     linear-gradient(135deg, #ffffff 0%, #c2dcff 50%, #7ee9ff 100%);
  --grad-text-gold:linear-gradient(135deg, #f3e0b6 0%, #d4af6f 45%, #a68543 100%);

  /* --- 2026-09-15 a11y: one success/"free shipping" colour, was hardcoded
     as #2f9e63 / #7ef0b0 in 15+ places across the shop. --------------- */
  --c-ok:          #2f9e63;   /* 5.78:1 on the dark ground */
  --c-ok-soft:     #7ef0b0;   /* 13.98:1 — used on tinted chips */
  --grad-chat-head:linear-gradient(135deg, #0a1f5c, #0c1a3a);

  /* Shadows */
  --sh-sm:         0 2px 8px rgba(2,8,30,0.35);
  --sh-md:         0 12px 28px rgba(2,8,30,0.45);
  --sh-lg:         0 28px 60px rgba(2,8,30,0.55);
  --sh-glow:       0 0 40px rgba(78,200,255,0.35);
  --sh-glow-gold:  0 0 35px rgba(212,175,111,0.40);
  --sh-inset:      inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.30);

  /* Type scale */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  /* Spacing */
  --sp-2:  0.125rem;
  --sp-4:  0.25rem;
  --sp-6:  0.375rem;
  --sp-8:  0.5rem;
  --sp-10: 0.625rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-56: 3.5rem;
  --sp-64: 4rem;
  --sp-80: 5rem;
  --sp-96: 6rem;
  --sp-120: 7.5rem;

  /* ---- Radii — capsule language, concentric nesting (2026-09-11) ----
     The owner wants the capsule look, AND wants every box that holds a
     capsule to curve with it. Those two only coexist under one rule:

         a capsule's radius is HALF ITS OWN HEIGHT.

     So a capsule never matches a fixed number — instead the BOX must be
     derived from the capsule it holds:

         tray radius = (control height / 2) + the padding around it

     That is the concentric-corner rule solved for the outer curve. The
     dock already proved it: a 64px capsule (r=32) with 7px padding holds
     a 48px capsule (r=24), and 32-7 = 25 ~= 24. Every tray below uses
     the same maths, written out so it stays true when sizes change.

     Panels bigger than ~200px cannot literally be capsules (a 490px-tall
     panel as a capsule is a stadium), so they take --r-lg, the largest
     radius in the family, and their padding keeps their corner clear of
     the controls inside. */
  --r-sm:   8px;    /* tiny decorative squares only                    */
  --r-ctl:  999px;  /* EVERY control and tag: button, input, select,
                       chip, badge, icon tile. All capsules, so two
                       controls side by side always share one shape.   */
  --r-md:   20px;   /* photos/thumbnails + blocks 65-200px             */
  --r-lg:   32px;   /* panels and cards >200px                         */
  --r-pill: 999px;  /* same as --r-ctl; kept for existing call sites   */

  /* legacy aliases: every existing var(--r-NN) snaps onto the scale, so
     the ~50 call sites already in the codebase need no edit */
  --r-4:  var(--r-sm);
  --r-8:  var(--r-sm);
  --r-12: var(--r-md);
  --r-16: var(--r-md);
  --r-20: var(--r-lg);
  --r-24: var(--r-lg);
  --r-28: var(--r-lg);
  --r-32: var(--r-lg);

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  --dur-fast: 200ms;
  --dur-mid:  500ms;
  --dur-slow: 900ms;

  /* Layout */
  --container: 1280px;
  --container-narrow: 1080px;
  --nav-h: 80px;
}

/* Light theme override */
[data-theme="light"] {
  --c-bg-0:        #f5f8ff;
  --c-bg-1:        #ffffff;
  --c-bg-2:        #eef3ff;
  --c-bg-3:        #dde7ff;
  --c-surface:     rgba(10,31,92,0.04);
  --c-surface-2:   rgba(10,31,92,0.08);
  --c-border:      rgba(10,31,92,0.10);
  --c-border-2:    rgba(10,31,92,0.18);
  --c-ghost-bg:      rgba(10,31,92,0.09);
  --c-ghost-bg-hover:rgba(10,31,92,0.15);
  --c-ghost-brd:     rgba(10,31,92,0.28);

  --c-text:        #0a1f5c;
  --c-text-dim:    rgba(10,31,92,0.82);
  --c-text-muted:  rgba(10,31,92,0.72);

  --grad-hero:     radial-gradient(1100px 700px at 18% 8%, rgba(78,200,255,0.20), transparent 60%),
                   radial-gradient(900px 600px at 90% 18%, rgba(212,175,111,0.18), transparent 60%),
                   radial-gradient(1300px 800px at 60% 100%, rgba(32,88,214,0.10), transparent 70%),
                   linear-gradient(180deg, #f5f8ff 0%, #ffffff 50%, #eef3ff 100%);
  /* 2026-09-15 a11y: the tail was #4ec8ff -> 1.79:1 on this near-white
     ground, under the 3:1 large-text minimum. The headline literally
     faded out at its last words. #1b86c9 keeps the brighten-to-cyan
     move and clears AA at 3.73:1. */
  --grad-text:     linear-gradient(135deg, #0a1f5c 0%, #2058d6 50%, #1b86c9 100%);
  --grad-glass:    linear-gradient(135deg, rgba(255,255,255,0.66), rgba(255,255,255,0.34));

  --sh-md:         0 12px 28px rgba(10,31,92,0.10);
  --sh-lg:         0 28px 60px rgba(10,31,92,0.16);

  /* --- 2026-09-11 contrast fix ---------------------------------------
     Gold and accent were tuned for the dark theme only. On the light
     theme (the site default) they dropped to 1.5-2.1:1, far under the
     4.5:1 AA minimum, which made prices and section labels unreadable.
     These darker variants keep the identity and clear AA everywhere. */
  --c-gold:        #8a5a00;   /* 5.93:1 on white */
  --c-gold-soft:   #7a4f00;   /* 7.13:1 */
  --c-gold-deep:   #6b4500;   /* 8.48:1 */
  --c-accent:      #0a5f9e;   /* was #4ec8ff -> 1.90:1 */
  --c-accent-2:    #084e82;
  --grad-text-gold:linear-gradient(135deg, #8a5a00 0%, #7a4f00 50%, #6b4500 100%);

  /* the success green, pitched for a near-white ground */
  --c-ok:          #17703f;   /* 5.77:1 vs the page, 4.88:1 on tinted chips */
  --c-ok-soft:     #0f6b3c;   /* 5.26:1 on the pale green availability chip */

  /* 2026-09-15 a11y: the chat header faded to --c-bg-2, which on this theme
     is #eef3ff — white header text dropped to 1.07:1 and vanished on the
     right half of the bar. This end stop keeps white at 6.21:1. */
  --grad-chat-head:linear-gradient(135deg, #0a1f5c, #1f5bc7);

  /* the same blue, pitched for a near-white ground */
  --c-action:      #1843b3;   /* 7.92:1 vs the page */
  --c-action-2:    #12358f;
  --c-action-fg:   #ffffff;   /* 8.42:1 on the fill */

  --c-btn-2-fg:       #4a5361;   /* 7.31:1 vs the page */
  --c-btn-2-brd:      #7c8595;   /* 3.50:1 — clears WCAG 1.4.11 */
  --c-btn-2-bg-hover: rgba(10,31,92,0.05);
  --c-dock-bg:        rgba(255,255,255,0.82);
  --c-dock-pill:      rgba(24,67,179,0.85);
}

/* ===================================================================
   RESET
   =================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--c-blue-400); color: var(--c-white); }

/* Scrollbar */
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--c-bg-1); }
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-blue-500), var(--c-blue-700));
  border-radius: var(--r-pill);
  border: 3px solid var(--c-bg-1);
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-blue-400), var(--c-blue-600));
}

/* ===================================================================
   LAYOUT
   =================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.section {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-gold);
  margin-bottom: var(--sp-16);
}
.section-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold));
}

.section-title {
  font-size: clamp(var(--fs-24), 3.2vw, var(--fs-40));
  font-weight: 800;
  /* Persian needs headroom — «آ» and «ی» sit outside a 1.1 box */
  line-height: 1.38;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-20);
}

.section-subtitle {
  font-size: clamp(var(--fs-16), 1.6vw, var(--fs-20));
  color: var(--c-text-dim);
  max-width: 720px;
  line-height: 1.7;
}

.section-head {
  margin-bottom: clamp(48px, 7vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-head.start {
  align-items: flex-start;
  text-align: start;
}

.text-gradient {
  background: var(--grad-text);
  /* background-clip:text paints only inside the background box; without this
     padding a tight line box slices the top off «آ» and the tail off «ی». */
  padding-block: 0.08em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gold {
  background: var(--grad-text-gold);
  /* background-clip:text paints only inside the background box; without this
     padding a tight line box slices the top off «آ» and the tail off «ی». */
  padding-block: 0.08em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===================================================================
   BUTTONS
   =================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 14px 26px;
  font-size: var(--fs-15);
  font-weight: 600;
  border-radius: var(--r-ctl);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.btn svg { flex-shrink: 0; }

.btn-primary {
  background: var(--grad-accent);
  color: #021137;
  box-shadow: 0 10px 30px rgba(78,200,255,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(78,200,255,0.55), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
  opacity: 0; transition: opacity var(--dur-fast);
  z-index: -1;
}
.btn-primary:hover::after { opacity: 1; }

.btn-gold {
  background: var(--grad-gold);
  color: #20140a;
  box-shadow: 0 10px 30px rgba(212,175,111,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(212,175,111,0.55), inset 0 1px 0 rgba(255,255,255,0.5); }

.btn-ghost {
  background: var(--c-ghost-bg);
  color: var(--c-text);
  border: 1px solid var(--c-ghost-brd);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.btn-ghost:hover {
  background: var(--c-ghost-bg-hover);
  border-color: var(--c-ghost-brd);
  transform: translateY(-2px);
}

.btn-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  box-shadow: 0 10px 30px rgba(37,211,102,0.35);
}
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(37,211,102,0.55); }

.btn-sm { min-height: 44px; padding: 0 18px; font-size: var(--fs-14); }
.btn-lg { padding: 18px 36px; font-size: var(--fs-16); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--c-accent);
  font-weight: 600;
  transition: gap var(--dur-fast);
}
.btn-link:hover { gap: var(--sp-12); }
.btn-link svg { transition: transform var(--dur-fast); }
[dir="rtl"] .btn-link svg { transform: scaleX(-1); }

/* ===================================================================
   GLASS & CARDS
   =================================================================== */

.glass {
  background: var(--grad-glass);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--r-20);
}

.card {
  position: relative;
  background: var(--grad-glass);
  border: 1px solid var(--c-border);
  border-radius: var(--r-24);
  padding: clamp(20px, 3vw, 32px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid),
              box-shadow var(--dur-mid);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 50%);
  pointer-events: none;
  opacity: 0.6;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--c-border-2);
  box-shadow: var(--sh-lg);
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border-2), transparent);
  margin: var(--sp-32) 0;
}

/* ===================================================================
   GENERAL UTILITIES
   =================================================================== */

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

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: var(--sp-8); }
.gap-16 { gap: var(--sp-16); }
.gap-24 { gap: var(--sp-24); }
.text-center { text-align: center; }
.relative { position: relative; }

/* Mobile-first text size adjust */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  body { font-size: 15px; }
}

/* ===================================================================
   CONVERSION / VISUAL-HIERARCHY FIXES — 2026-09-11
   Based on the colour & contrast research report:
     - one exclusive action colour for BUY actions (isolation effect)
     - every interactive control >= 3:1 against the page (WCAG 1.4.11)
     - prices are the most-read number on a shop page -> max legibility
   Rules are written as .btn.btn-x / [data-theme] .x so they win over
   the glass layer in enhance.css regardless of load order.
   =================================================================== */

/* ---- 1) THE buy button — used ONCE per page, nowhere else ---------- */
.btn.btn-buy {
  background: var(--c-action);
  color: var(--c-action-fg);
  border: 1px solid transparent;
  font-weight: 800;
  min-height: 48px;                 /* Apple 44pt / Material 48dp */
  text-shadow: none;
  box-shadow: 0 10px 26px rgba(18,53,143,0.26),
              inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn.btn-buy::before { content: none; }   /* kill the translucent glass */
.btn.btn-buy::after  { content: none; }
.btn.btn-buy:hover {
  background: var(--c-action-2);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(18,53,143,0.40),
              inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn.btn-buy:active { transform: translateY(0) scale(0.985); }
.btn.btn-buy:focus-visible {
  outline: 3px solid var(--c-action-2);
  outline-offset: 3px;
}

/* touch targets: Apple asks for 44pt, Material for 48dp. Several buttons
   were landing at 43px on a phone. */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
}

/* ---- 2) every secondary button goes NEUTRAL GREY ------------------ */
/* This is the half that makes the blue work. Isolation is relative: a
   deep-blue button is only "the one saturated thing" if nothing beside
   it is saturated. So btn-primary, btn-wa, btn-gold and btn-ghost all
   become the same quiet outlined control, and the border carries the
   3:1 required by WCAG 1.4.11. WhatsApp keeps its green only in the
   glyph, where it identifies the channel without shouting. */
.btn.btn-primary,
.btn.btn-wa,
.btn.btn-gold,
.btn.btn-ghost {
  background: transparent;
  color: var(--c-btn-2-fg);
  border: 1.5px solid var(--c-btn-2-brd);
  text-shadow: none;
  box-shadow: none;
  font-weight: 600;
}
.btn.btn-primary::before, .btn.btn-wa::before,
.btn.btn-gold::before,    .btn.btn-ghost::before { content: none; }
.btn.btn-primary::after,  .btn.btn-wa::after,
.btn.btn-gold::after,     .btn.btn-ghost::after  { content: none; }
.btn.btn-primary:hover, .btn.btn-wa:hover,
.btn.btn-gold:hover,    .btn.btn-ghost:hover {
  background: var(--c-btn-2-bg-hover);
  border-color: var(--c-btn-2-fg);
  transform: translateY(-2px);
}
.btn.btn-wa svg { color: #16a34a; }        /* the channel, not the button */
[data-theme="light"] .btn.btn-wa svg { color: #0f7a6c; }

/* ---- 3) prices: the single most-read number on a shop page -------- */
/* They were painted with the gold gradient (~1.6-3.5:1 on a white
   card). Navy gives 13.9-15.4:1 without touching the brand palette. */
[data-theme="light"] .pdp-price,
[data-theme="light"] .shop-price,
[data-theme="light"] .hub-card .pr,
[data-theme="light"] .cart-sum .row.total .v,
[data-theme="light"] .cart-item .ci-price,
[data-theme="light"] .cmp-price-row td {
  background: none;
  background-image: none;
  color: #0a1f5c;
  -webkit-text-fill-color: currentColor;
}
[data-theme="light"] .pdp-price.ask,
[data-theme="light"] .cart-item .ci-price.ask { color: var(--c-text-muted); }

/* a chip whose text colour assumed the old bright accent */
[data-theme="light"] .shop-compare.on { color: #ffffff; }

/* ---- inline icons (replacing emoji) ------------------------------- */
/* They inherit colour from the text beside them and sit on its baseline. */
.nwi {
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  margin-inline-end: 0.35em;
}
.nwi:last-child { margin-inline-end: 0; }
.btn .nwi, .nwd-i .nwi { margin-inline-end: 0; }

/* ---- 4) the dual-mode bottom bar (shop pages, phones only) --------- */
/* One fixed layer, two states. In nav state it is a four-destination dock
   in the thumb zone — NN/g measured hidden navigation as 15% slower and
   >20% less discoverable on mobile, and Hoober found ~49% of people hold
   a phone one-handed. In buy state it becomes the price plus the buy
   button, because on a product page the CTA has to stay reachable.
   Two bars could never share the bottom edge, so they are the same bar. */
.nw-dock { display: none; }

@media (max-width: 760px) {
  /* A floating pill, iOS-style — detached from the edge, fully rounded,
     soft depth. The material is 94% opaque on purpose: Apple can blur a
     backdrop it owns, but here arbitrary page content scrolls underneath,
     so the alpha carries the legibility and the blur is only decoration.
     Worst case measured (dock over pure black or pure white content):
     labels 6.02–7.94:1, the active colour 5.53–8.42:1. */
  .nw-dock {
    display: block;
    position: fixed;
    bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    /* width from the viewport, not from the document: if any page ever
       overflows sideways, a left/right-anchored fixed bar would stretch
       to the overflowed width and drag the page with it */
    inset-inline-start: 10px;
    width: calc(100vw - 20px);
    z-index: 60;
    /* concentric corners: the strip inside is 48px tall, so its capsule
       radius is 24; 24 + the 7px padding = 31, which is this 64px bar's
       own capsule radius. Outer and inner curves stay parallel. */
    border-radius: var(--r-pill);
    background: var(--c-dock-bg);
    border: 1px solid var(--c-btn-2-brd);   /* 3.5:1 — the pill's own edge */
    box-shadow: 0 10px 30px rgba(2,8,30,0.18), 0 2px 6px rgba(2,8,30,0.10);
    overflow: hidden;
  }
  /* the glass, where the browser has it — pure bonus, never load-bearing */
  @supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
    .nw-dock {
      -webkit-backdrop-filter: blur(14px) saturate(165%);
      backdrop-filter: blur(14px) saturate(165%);
    }
  }

  /* -- nav state -- */
  /* minmax(0,1fr) not 1fr: a grid track's automatic minimum is its
     content's min-content width, so four labels could stretch the bar
     past the viewport and scroll the whole page sideways. */
  /* the padding lives on the strip, so every item is inset from the pill's
     rounded edge — not just the selected one */
  .nwd-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7px; }
  .nwd-i {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    position: relative;
    min-width: 0;
    height: 48px;                 /* fixed, so both dock states match exactly */
    padding: 4px 2px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--c-text-muted);
    text-decoration: none;
  }
  .nwd-i > span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nwd-i svg { width: 21px; height: 21px; display: block; }
  /* the selected destination sits in its own filled pill, the way a tab bar
     marks itself on iOS. Shape + weight + colour together, so the state
     never rests on colour alone — 8% of men are colour-blind. */
  .nwd-i.is-on {
    color: var(--c-action-fg);
    font-weight: 800;
    background: var(--c-dock-pill);
    border-radius: var(--r-pill);
  }
  .nwd-i:not(.is-on):active { background: var(--c-btn-2-bg-hover); border-radius: var(--r-pill); }
  .nwd-badge {
    position: absolute;
    top: 4px;
    inset-inline-start: calc(50% + 4px);
    min-width: 17px; height: 17px;
    padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; line-height: 1;
    color: var(--c-action-fg);
    background: var(--c-action);
    border-radius: var(--r-pill);
  }
  /* on the selected pill the badge inverts, or it would disappear into it */
  .nwd-i.is-on .nwd-badge { background: var(--c-action-fg); color: var(--c-action); }

  /* -- buy state -- */
  /* buy state keeps the pill the same height as the nav state, so the bar
     changes character without jumping */
  /* 7px on every side — the same padding the nav strip uses — so the button
     sits evenly inside the pill and the bar keeps one height in both states */
  .nwd-buy { display: none; align-items: center; gap: 10px; padding: 7px; }
  .nwd-price {
    font-weight: 900; font-size: var(--fs-16); color: var(--c-text);
    white-space: nowrap; padding-inline-start: 8px;
  }
  .nwd-price.ask { font-size: var(--fs-14); color: var(--c-text-muted); }
  .nwd-buy .btn {
    flex: 1 1 auto;
    height: 48px;
    min-height: 48px;
    padding: 0 14px;
    /* the one deliberate capsule: the dock itself is a 64px pill (32px
       radius) with 7px padding, so 32-7=25 ~= the 24px a 48px capsule
       has. Inside a capsule tray only a capsule is concentric. */
    border-radius: var(--r-pill);
    line-height: 1;
  }

  .nw-dock[data-mode="buy"] .nwd-nav { display: none; }
  .nw-dock[data-mode="buy"] .nwd-buy { display: flex; }

  body.has-dock { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* The shop topbar carries «پیگیری» and «سبد» chips. On a 375px phone the
     header row came to 415px and pushed the whole page sideways — and the
     dock now offers both destinations anyway, so the duplicates go. */
  body.has-dock .art-topbar .nw-cart-link { display: none; }
  /* cart.js pins its toast 22px from the bottom — lift it above the pill */
  body.has-dock .nw-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

  /* keep the gallery from eating the whole first screen */
  .pdp-gallery .main { aspect-ratio: 1 / 0.82; }
}