/* ==========================================================================
   NOUVEAU (نُ‌وو) — style.css  (main stylesheet)
   Load order:  bootstrap.rtl.min.css → fonts.css → icons.css → style.css → responsive.css
   This file holds the base (all screen sizes) styles. Every width-based @media rule
   (mobile / tablet / desktop) lives in responsive.css.
   Sections:
   1. Tokens          5. Home
   2. Base            6. Products (size tabs + per-size themes)
   3. Header/Footer   7. About
   4. Shared parts    8. Blog / Article / Contact
   ========================================================================== */

/* 1. TOKENS -------------------------------------------------------------- */
:root {
  --nv-font: "Yekan Bakh", "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
  --nv-font-display: "Prata", "Times New Roman", Georgia, serif;   /* English product names (products page) */

  --nv-red: #ed1b30;
  --nv-red-dark: #c9142a;
  --nv-ink: #1b1b1f;
  --nv-text: #333;
  --nv-muted: #667085;
  --nv-heading-dark: #101828;
  --nv-line: #bfbfbf;
  --nv-tan: #c3a17c;

  --nv-cream: #f6f2ec;         /* about / contact / home top */
  --nv-cream-2: #fdfcfb;
  --nv-footer: #f6f2ec;          /* footer (design: cream on every page) — WordPress: «تنظیمات نُ‌وو ← فوتر ← رنگ پس‌زمینه» */
  --nv-card: #f7f7f7;

  --nv-violet-900: #42307d;    /* blog title */
  --nv-violet-600: #6941c6;    /* blog subtitle */
  --nv-blog-bg: #f9f5ff;

  --nv-radius-lg: 24px;
  --nv-radius-md: 16px;
  --nv-container: 1440px;
  --nv-gutter: clamp(16px, 3.5vw, 50px);
  --nv-header-h: 64px;

  --nv-header-bg: var(--nv-cream);

  /* Typography — one heading scale and one vertical rhythm for every page (h1–h6, p) */
  --nv-h1: clamp(28px, 3.4vw, 40px);
  --nv-h2: clamp(20px, 2.2vw, 24px);
  --nv-h3: clamp(17px, 1.8vw, 20px);
  --nv-h4: 17px;
  --nv-h5: 15px;
  --nv-h6: 14px;
  --nv-lh-heading: 1.5;                          /* line height of headings */
  --nv-lh-text: 2.2;                             /* line height of paragraphs / body text */
  --nv-space-title: clamp(14px, 1.6vw, 22px);    /* heading → the text under it */
  --nv-space-text: 14px;                         /* paragraph → paragraph */
  --nv-space-block: clamp(20px, 2.4vw, 28px);    /* text → button / list / next part */
  --nv-space-section: clamp(28px, 3.4vw, 44px);  /* part → part inside a page (article sections, boxes) */

  /* Tables in content (blog pages switch to the violet set — see body.page-blog) */
  --nv-table-line: #ecebf0;                      /* outer border + row lines */
  --nv-table-head-bg: #faf6f1;                   /* header row */
  --nv-table-head-color: var(--nv-heading-dark);
  --nv-table-hover: rgba(195, 161, 124, .16);    /* row hover */
  --nv-table-stripe: #fbf8f4;                    /* every other row */

  /* Background images */
  --nv-cloud-texture: url("../img/backgrounds/bg-1.png");   /* cloud texture: home products/articles + products page */
  --nv-product-sky: url("../img/backgrounds/product-bg.jpg"); /* sky inside the home product arch */
  --nv-night-sky: url("../img/backgrounds/night-bg.jpg");  /* night slides (WordPress: «تصاویر حالت شب») */
  /* Faint glass "U" watermark — used in exactly two places on the home page:
     behind the hero title (.hero__slide::before) and above the newsletter (.newsletter::before).
     Original SVG from the design file (Figma: Group 448) — stays sharp at any size. */
  --nv-ghost: url("../img/brand/u-ghost.svg");

  --bs-body-font-family: var(--nv-font);
  --bs-body-color: var(--nv-ink);
}

/* 2. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--nv-font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--nv-ink);
  background: var(--nv-cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--nv-space-title); font-weight: 800; line-height: var(--nv-lh-heading); }
h1 { font-size: var(--nv-h1); }
h2 { font-size: var(--nv-h2); }
h3 { font-size: var(--nv-h3); }
h4 { font-size: var(--nv-h4); }
h5 { font-size: var(--nv-h5); }
h6 { font-size: var(--nv-h6); }
p { margin: 0; line-height: var(--nv-lh-text); }
p + p { margin-top: var(--nv-space-text); }
:focus-visible { outline: 2px solid var(--nv-red); outline-offset: 3px; border-radius: 6px; }

.nv-container {
  width: 100%;
  max-width: var(--nv-container);
  margin-inline: auto;
  padding-inline: var(--nv-gutter);
}
.ltr { direction: ltr; unicode-bidi: isolate; }
.u-red { color: var(--nv-red); }

body.page-cream   { background: linear-gradient(180deg, var(--nv-cream) 0, var(--nv-cream-2) 900px, #fff 100%) no-repeat, #fff; }
body.page-blog    { --nv-header-bg: var(--nv-blog-bg); --nv-table-head-bg: var(--nv-blog-bg); --nv-table-head-color: var(--nv-violet-900); --nv-table-hover: rgba(105, 65, 198, .08); --nv-table-stripe: #faf7ff; background: linear-gradient(180deg, var(--nv-blog-bg) 0, #fff 700px) no-repeat, #fff; }
body.page-home    { background: #fff; }
/* About: two faint "U" outlines behind the page (design).
   about-lines-1: centred with the content.  about-lines-2: bleeds off the left edge — centred up to 1440px,
   pinned to the left edge on wider screens so its cut-off end never floats inside the page. */
body.page-about {
  background:
    url("../img/backgrounds/about-lines-1.svg") center top / 1440px auto no-repeat,
    url("../img/backgrounds/about-lines-2.svg") min(0px, calc(50vw - 720px)) top / 1440px auto no-repeat,
    linear-gradient(180deg, var(--nv-cream) 0, var(--nv-cream-2) 900px, #fff 100%) no-repeat,
    #fff;
}

/* 3. HEADER / FOOTER ----------------------------------------------------- */
/* Mobile menu (burger + dropdown panel) → responsive.css, "MOBILE + TABLET" section */
.nv-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--nv-header-bg);
  transition: background-color .5s ease, box-shadow .3s ease;
}
.nv-header.is-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .07); }
.nv-header__inner {
  position: relative;   /* the mobile menu panel is placed under this row */
  min-height: var(--nv-header-h);
  display: flex; align-items: center; gap: 16px;
}
.nv-logo { display: block; flex: none; margin-inline-start: -6px; }   /* the file has a 6 px clear margin: ink aligns with the 50 px page edge as in the design */
.nv-logo img { display: block; width: 73px; height: auto; }   /* design: logo 62 × 44 px of ink */
.nv-nav-wrap { flex: 1 1 100%; order: 5; }
.nv-nav { display: flex; flex-direction: column; gap: 4px; padding-block: 12px; }
.nv-nav a { display: block; padding: 8px 4px; font-size: 14px; font-weight: 500; color: #000; }
.nv-nav a[aria-current="page"] { font-weight: 800; }
.nv-nav a:hover { color: var(--nv-red); }
.nv-burger, .nv-search-btn {
  flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: rgba(5, 5, 5, .02);                  /* design: clear glass circle */
  box-shadow: 0 1.6px 3.2px rgba(0, 0, 0, .08);
  color: var(--nv-ink); cursor: pointer;
}
.nv-burger { margin-inline-start: auto; }
.nv-search-btn { margin-inline-start: auto; }
.nv-burger + .nv-search-btn { margin-inline-start: 0; }
.nv-search-btn .icon { font-size: 24px; }   /* design: 16px circle inside the 42px button */
.nv-header .nv-logo { order: 1; }
.nv-header .nv-burger { order: 2; }
.nv-header .nv-search-btn { order: 3; }

/* Footer */
.nv-footer { background: var(--nv-footer); margin-top: 0; padding-top: 40px; }
.nv-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; align-items: flex-start; }
.nv-footer__access h2 { margin-bottom: 7px; font-size: 18px; font-weight: 500; color: #2a2a2a; }
.nv-footer__access ul { display: flex; flex-wrap: wrap; gap: 12px 45px; }
.nv-footer__access a { font-size: 15px; color: #2a2a2a; }
.nv-footer__access a:hover { color: var(--nv-red); }
.nv-footer__brand { direction: ltr; text-align: left; }
.nv-footer__brand img { display: block; width: 171px; max-width: 100%; height: auto; margin: -8px 0 4px -4px; }   /* design: logo ink 162 × 36 at the 50 px edge */
.nv-footer__brand p { font-size: 16px; margin-bottom: var(--nv-space-text); direction: rtl; text-align: left; color: #2a2a2a; }
.nv-social { display: flex; gap: 12px; }
.nv-social a { display: grid; place-items: center; width: 16px; height: 16px; color: #111; }
.nv-social a:hover { color: var(--nv-red); }
.nv-social .icon { font-size: 16px; }   /* design: 16×16 */
/* hover / keyboard focus: the network's name in a small label right under the icon */
.nv-social a { position: relative; }
.nv-social a::after {
  content: attr(aria-label); position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% -4px; z-index: 5;
  padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 11px; line-height: 1.6; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, translate .18s, visibility .18s;
}
.nv-social a:hover::after, .nv-social a:focus-visible::after { opacity: 1; visibility: visible; translate: -50% 0; }
.nv-footer__copy { text-align: center; font-size: 8px; color: #000; padding: 9px 16px 0; direction: rtl; }   /* design: 8 px, black */

/* 4. SHARED PARTS -------------------------------------------------------- */
.btn-nv {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding-inline: 34px; border: 0; border-radius: 999px;
  background: var(--nv-red); color: #fff; font: 500 14px/1 var(--nv-font);
  box-shadow: 0 6px 16px rgba(237, 27, 48, .22);
  transition: background-color .2s, transform .2s;
  cursor: pointer;
}
.btn-nv:hover { background: var(--nv-red-dark); color: #fff; }
.btn-nv:active { transform: translateY(1px); }

/* "بیشتر" link — design: a text pill (67×23) + a separate round arrow button (23×23), one link */
.pill-more { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; line-height: 1; color: var(--nv-ink); }
.pill-more__text,
.pill-more__ic {
  height: 23px; display: inline-flex; align-items: center; justify-content: center;
  background: #f7f5f1; border: 1px solid #e2dfdb; border-radius: 999px;
  transition: background-color .2s;
}
.pill-more__text { padding-inline: 14px; }
.pill-more__ic { width: 23px; }
.pill-more .icon { font-size: 26px; }   /* glyph drawn on a 24 grid → visible arrow ≈ 12px, as in the design */
.pill-more:hover .pill-more__text,
.pill-more:hover .pill-more__ic { background: #ede8e1; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: var(--nv-space-title); }
.section-head__eyebrow { display: block; font-size: 15px; letter-spacing: .04em; color: var(--nv-tan); direction: ltr; text-align: right; }
.section-head__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 24px; }
.section-head__title::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: #111; flex: none; }

.round-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, .55); color: var(--nv-ink); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .06);
  backdrop-filter: blur(6px);
  transition: background-color .2s;
}
.round-btn:hover { background: #fff; }
.round-btn--sm { width: 34px; height: 34px; }
.round-btn--outline { background: transparent; box-shadow: inset 0 0 0 1px #333; }

.dots { display: flex; gap: 8px; justify-content: center; }
.dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .18); cursor: pointer; transition: background-color .2s, transform .2s; }
.dots button[aria-current="true"] { background: #111; transform: scale(1.15); }
.dots--light button { background: rgba(255, 255, 255, .55); }
.dots--light button[aria-current="true"] { background: #fff; }

/* Tables — every table inside content (articles, pages, «درباره ما» text): the block editor's table,
   tables pasted from Word / Excel and HTML tables. Minimal, theme colours (--nv-table-* tokens), row hover,
   scrolls sideways on narrow screens. WordPress completes the markup on the server (inc/tables.php:
   thead, scope, scroll box .nv-table). Any table elsewhere can use class="nv-table" (on the table or a wrapper). */
.nv-table,
:is(.article-body, .nv-page__content, .about-block__text) figure.wp-block-table {
  margin: var(--nv-space-block) 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--nv-table-line); border-radius: 12px; background: #fff; scrollbar-width: thin;
}
table.nv-table { display: table; overflow: visible; }
.nv-table table,
table.nv-table,
:is(.article-body, .nv-page__content, .about-block__text) table {
  width: 100%; margin: 0; border-collapse: collapse; border: 0; font-size: 14px; line-height: 1.9;
  color: var(--nv-text); font-variant-numeric: tabular-nums; text-align: start;
}
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) :is(th, td) {
  min-width: 96px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--nv-table-line);
  text-align: start; vertical-align: top;
}
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) thead { border: 0; }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) thead th {
  background: var(--nv-table-head-bg); color: var(--nv-table-head-color); font-weight: 700; white-space: nowrap;
}
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) tbody th { font-weight: 700; color: var(--nv-heading-dark); }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) tbody tr:last-child :is(th, td) { border-bottom: 0; }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) tbody tr { transition: background-color .2s ease; }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) tfoot :is(th, td) { border-top: 1px solid var(--nv-table-line); border-bottom: 0; font-weight: 700; }
/* Striped rows (every other row tinted) — all tables, also the block editor's «Stripes» style */
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) tbody tr:nth-child(even) { background: var(--nv-table-stripe); }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) .is-style-stripes tbody tr:nth-child(odd) { background: transparent; }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) .is-style-stripes { border-bottom: 0; }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) :is(table, .is-style-stripes) tbody tr:hover { background: var(--nv-table-hover); }   /* strong enough to beat the block editor's stripes */
/* Caption: a typed <caption>, or the block's caption under the table */
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) caption { caption-side: bottom; padding: 10px 16px; border-top: 1px solid var(--nv-table-line); font-size: 12px; color: var(--nv-muted); text-align: start; }
:is(.nv-table, .article-body, .nv-page__content, .about-block__text) figure.wp-block-table figcaption { margin: 0; padding: 10px 16px; border-top: 1px solid var(--nv-table-line); font-size: 12px; line-height: 1.8; color: var(--nv-muted); text-align: start; }

/* 5. HOME ---------------------------------------------------------------- */
body.page-home .nv-header { position: absolute; inset: 0 0 auto 0; background: transparent; }

/* Hero slider */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 9.8%; background: linear-gradient(rgba(255, 255, 255, 0), #fff 77%);   /* design: 63 px of 639, white from 77% */ pointer-events: none; z-index: 1; }
.hero__slide {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 130px 16px 60px;   /* design: the text block sits 35 px under the centre, the glass U is centred */
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s;
  background:
    var(--bg, none) 62.7% 100% / cover no-repeat,   /* design framing: the 2103 × 748 image sits at −416, −109 in the 1440 × 639 hero */
    linear-gradient(180deg, #76b6ec 0%, #9ccbf3 34%, #cfd8f0 62%, #f2d8d0 88%);
}
/* One background image per slide. TODO: slides 2–5 still use hero-1.jpg — add hero-2.jpg … hero-5.jpg
   to assets/img/home/ and update the matching line below. */
.hero__slide--1 { background-image: url("../img/home/hero-1.jpg"); }
.hero__slide--2 { background-image: url("../img/home/hero-1.jpg"); }
.hero__slide--3 { background-image: url("../img/home/hero-1.jpg"); }
.hero__slide--4 { background-image: url("../img/home/hero-1.jpg"); }
.hero__slide--5 { background-image: url("../img/home/hero-1.jpg"); }
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide { isolation: isolate; }
/* glass "U" behind the title (design: ≈ 280×360px at 1440px) */
/* glass «U» behind the title (the brand's glass U artwork, 321 × 390, shown as it is) — replaceable in the admin (ghost_hero) */
.hero__slide::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -53.9%;
  height: clamp(240px, 27.7vw, 399px); aspect-ratio: 321 / 390; pointer-events: none;   /* same size and place as the previous U body */
  background: url("../img/brand/u-glass.png") center / contain no-repeat;
}
.hero__brand { margin: 0; font: 700 clamp(48px, 6.32vw, 91px)/1 "Carlito", var(--nv-font); direction: ltr; color: #000; }   /* design: Calibri-style bold, cap height 59 px at 1440 */
.hero__tag { margin: -3px 0 0; font: 300 clamp(20px, 2.94vw, 42.3px)/1.2 "Lato", var(--nv-font); direction: ltr; color: #000; }   /* design: Lato Light */
.hero__tag .u-red { font: 700 1.41em/1 "Carlito", var(--nv-font); }   /* design: the closing «U» is bold and taller */
.hero .round-btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 64px; height: 64px; background: rgba(5, 5, 5, .02); color: #2a2a2a; box-shadow: 0 2.4px 4.8px rgba(0, 0, 0, .08); }   /* design: clear glass, dark chevron */
.hero .round-btn .icon { font-size: 32px; }
/* Figma «Glass» effect on the round buttons (header search / menu, hero arrows, products day/night arrows, article arrows):
   frost = background blur (radius 23.7 at 64 px → ~12 px; 15.6 at 42 px → 8 px; 11.7 at 32 px → 6 px),
   light at −45°, intensity .8 → bright rim top-left + softer rim bottom-right, plus the design's small drop shadow. */
.nv-burger, .nv-search-btn, .hero .round-btn, .arch-ctrl .arch-nav, .acar__controls .round-btn {
  --g-blur: 8px; --g-shadow: 0 1.56px 3.11px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.25) brightness(1.04); backdrop-filter: blur(var(--g-blur)) saturate(1.25) brightness(1.04);
  box-shadow: var(--g-shadow),
    inset 1.2px 1.4px .6px rgba(255, 255, 255, .9), inset -1px -1.2px .6px rgba(255, 255, 255, .55),
    inset 0 0 6px rgba(255, 255, 255, .22), var(--g-ring, 0 0 #0000);
}
.hero .round-btn { --g-blur: 12px; --g-shadow: 0 2.37px 4.74px rgba(0, 0, 0, .08); }
.acar__controls .round-btn { --g-blur: 6px; --g-shadow: 0 1.17px 2.35px rgba(0, 0, 0, .08); background: transparent; }
.acar__controls .round-btn { --g-ring: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.acar__controls .round-btn[data-prev] { --g-ring: inset 0 0 0 1px rgba(0, 0, 0, .1); }

.hero .round-btn:hover { background: rgba(255, 255, 255, .35); }
.hero .round-btn[data-prev] { right: var(--nv-gutter); }
.hero .round-btn[data-next] { left: var(--nv-gutter); }
.hero .dots { position: absolute; inset: auto 0 20px; z-index: 2; }

/* Home products slider */
.home-products { padding-block: clamp(48px, 8vw, 110px); position: relative; background-image: var(--nv-cloud-texture); }
.home-products::before { content: ""; position: absolute; inset: 0; background: var(--nv-cloud-texture) center / cover no-repeat; opacity: .5; pointer-events: none; }
.pslides { position: relative; display: grid; }
.pslide { grid-area: 1 / 1; display: grid; gap: 40px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.pslide.is-active { opacity: 1; visibility: visible; }
.home-arch-wrap { position: relative; }
.home-arch {
  position: relative; width: 100%; max-width: 603px; margin-inline: auto; aspect-ratio: 603 / 700; overflow: hidden;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;                 /* design: elliptical top (302 × 280 at 604 wide) */
  background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)), var(--nv-product-sky) center / cover no-repeat;   /* design: sky at 70% */
  box-shadow: inset 0 1px 24px #aaa, 0 2.4px 2.4px rgba(0, 0, 0, .25);   /* design: inner shadow #aaa + the same drop shadow as the sun / moon disc (no ring / border) */
}
.home-arch__sun { position: absolute; z-index: 2; top: 0; left: 50%; translate: -50% -50%; width: calc(min(100%, 603px) * .156); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2.4px 2.4px rgba(0, 0, 0, .25), inset 0 2px 4px rgba(0, 0, 0, .25); }   /* design: 94px circle centred on the arch's top edge */
.home-arch__sun img { display: block; width: 58%; height: auto; }   /* line sun (52 px art) in the 94 px circle */
/* Night slides (night products): night sky in the arch, the sun's circle turns into a glowing night-blue moon disc.
   Each slide has its own arch, so day ↔ night cross-fades with the slider. */
.pslide--night .home-arch { background: var(--nv-night-sky) center / cover no-repeat; box-shadow: inset 0 1px 24px rgba(0, 0, 0, .55), 0 2.4px 2.4px rgba(0, 0, 0, .25), 0 0 30px 4px rgba(255, 232, 170, .3); }   /* night: glowing halo like the moon */
.pslide--night .home-arch__sun { background: radial-gradient(circle at 50% 42%, #2b3672, #141b40 72%); box-shadow: 0 0 0 6px rgba(255, 240, 200, .28), 0 0 28px 4px rgba(255, 232, 170, .45); }
.pslide--night .home-arch__sun img { width: 60%; }   /* line moon (58 px art) */
/* fixed square box: every product image (square 750×750 with the pack centred, as supplied) shows at the same
   place and scale; other sizes / proportions are fitted inside the box, centred. Design: size 1 is 64% of the arch wide */
.home-arch__pack { position: absolute; left: 50%; top: 54%; translate: -50% -50%; width: 70%; aspect-ratio: 1; filter: drop-shadow(0 18px 18px rgba(0, 40, 80, .22)); }
.home-arch__pack img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.arch-ctrl { position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(603px, 100%); aspect-ratio: 603 / 700; z-index: 3; pointer-events: none; }
.arch-ctrl > * { pointer-events: auto; }
.arch-ctrl .arch-nav { position: absolute; top: 55%; translate: 0 -50%; width: 42px; height: 42px; background: rgba(5, 5, 5, .1); color: #2a2a2a; }   /* design: dark glass buttons */
.arch-ctrl .arch-nav:hover { background: rgba(5, 5, 5, .18); }
.arch-ctrl .arch-nav[data-prev] { right: 4.5%; }
.arch-ctrl .arch-nav[data-next] { left: 4.5%; }
.arch-ctrl .dots { position: absolute; bottom: 24px; left: 50%; translate: -50% 0; gap: 6px; padding: 3px 4px; border-radius: 7px; background: rgba(0, 0, 0, .16); }   /* design: dots in a dark pill */
.arch-ctrl .dots button { width: 7px; height: 7px; background: #e6e6e6; }
.arch-ctrl .dots button[aria-current="true"] { background: #fff; transform: none; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .16), 0 0 0 2.5px #fff; }
.home-products__text { max-width: 668px; }                  /* design: text 530 px, features wider (668 px) */
.home-products__text h2 { margin-bottom: 26px; font-size: 20px; font-weight: 700; color: #2a2a2a; }   /* design: 37 px title → text */
.home-products__text p { max-width: 530px; font-size: 12px; line-height: 2; text-align: justify; color: #2a2a2a; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.features { display: flex; margin-top: var(--nv-space-section); }
.features li { flex: 1; display: grid; justify-items: center; gap: 8px; padding-inline: 8px; color: #898989; font-size: 11px; text-align: center; }
.features li { position: relative; }
.features li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 20px; width: 1px; height: 48px; background: rgba(85, 80, 69, .3); }   /* design: short divider (48 px), #555045 at 30% */
.features .icon { font-size: 64px; }   /* design: ≈ 64px wide */

/* Home articles carousel (coverflow)
   Design: the active article sits LOWER and larger, "inside" the big background circle;
   the two neighbours sit higher, taller-cropped, grey and without shadow.
   All sizes derive from --aw (active slide width = 466px at 1440px) so it scales with the page. */
.home-articles { position: relative; padding-block: 76px 80px; overflow-x: clip; background-image: var(--nv-cloud-texture); }   /* clip sideways only: the decorations below reach into the sections above / below */
/* design: a thin "U" line (1136 px wide at 1440) whose bottom curve wraps the articles; it fades in from the products section */
.home-articles::before {
  content: ""; position: absolute; left: 50%; bottom: 42px; translate: -50% 0; width: min(1136px, 79vw); height: 1006px;
  border: 1px solid #000; border-top: 0; border-radius: 0 0 min(568px, 39.5vw) min(568px, 39.5vw); opacity: .1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000); mask-image: linear-gradient(180deg, transparent, #000);
}
/* design: soft white bands over the seams products → articles → FAQ (the cloud textures blend instead of ending in a line) */
.home-products::after, .home-articles::after {
  content: ""; position: absolute; inset: auto 0 -46px; height: 93px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 58%, rgba(255, 255, 255, 0) 100%);
}
.home-products > *, .home-articles > * { position: relative; z-index: 1; }   /* content (arch, carousel) above the bands, as in the design */
/* design: the grey neighbours fade out at their outer edge (84 px of 421) */
.aslide.is-left img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
.aslide.is-right img { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 20%); mask-image: linear-gradient(270deg, transparent 0, #000 20%); }
.acar { position: relative; margin-top: 60px; container-type: inline-size; }
.acar__title { position: relative; z-index: 3; text-align: center; font-size: clamp(20px, 1.95vw, 28px); max-width: 380px; margin: 0 auto var(--nv-space-title); min-height: 3em; color: #2a2a2a; }
.acar__stage {
  --aw: clamp(230px, 32.4cqi, 466px);       /* active slide width */
  --drop: calc(var(--aw) * .163);           /* how much lower the active slide sits than its neighbours */
  position: relative;
  height: calc(var(--drop) + var(--aw) * .6887);
  margin-top: calc(var(--aw) * -.133);      /* neighbours start beside the title, as in the design */
}
.aslide {
  position: absolute; left: 50%; top: 0; width: var(--aw); margin: 0;
  translate: -50% 0; transform-origin: 50% 0;
  transform: translateX(calc(var(--o, 0) * 109.2%)) translateY(var(--ty, 0px)) scale(var(--sc, .9034));   /* design: neighbours 421 × 290 at the page edges */
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .4s, filter .4s;
  filter: grayscale(1); opacity: .95; cursor: pointer;
}
.aslide img {
  display: block; width: 100%; height: calc(var(--aw) * .6887); object-fit: cover; border-radius: 4px;   /* design: same crop for the active slide and its neighbours */
  box-shadow: none; transition: height .55s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}
.aslide.is-active { --sc: 1; --ty: var(--drop); filter: none; opacity: 1; cursor: default; z-index: 2; }
.aslide.is-active img { height: calc(var(--aw) * .6887); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.aslide.is-far { opacity: 0; pointer-events: none; }
.acar__controls { display: flex; justify-content: center; gap: 18.5px; margin-top: 30px; }
.acar__controls .round-btn { width: 31px; height: 31px; }   /* design: 31 px outlined circles — «next» ring 50% black */

.acar__controls .round-btn[data-prev] .icon, .hero .round-btn[data-prev] .icon, .arch-ctrl .arch-nav[data-prev] .icon { opacity: .5; }   /* design: the «previous» chevrons are 50% (hero, products, articles) */
.acar .dots { gap: 9.4px; margin-top: 17px; }
.acar .dots button { background: #cdcdcd; }
.acar .dots button[aria-current="true"] { background: #000; transform: none; box-shadow: 0 0 0 1.75px #fff, 0 0 0 2.5px #000; }

/* FAQ */
.faq { padding-block: 30px 40px; }
.faq .accordion { --bs-accordion-bg: #faf6f1; --bs-accordion-border-color: #e4e4e4; --bs-accordion-border-radius: 16px; --bs-accordion-inner-border-radius: 16px; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: #faf6f1; --bs-accordion-active-color: var(--nv-ink); display: grid; gap: 17px; align-content: start; }   /* design: rows every 86 px */
.faq .accordion-item { border-radius: 16px; overflow: hidden; border: 1px solid #e4e4e4; }
.faq .accordion-button { font: 500 13px/1.8 var(--nv-font); padding: 22px 16px; color: #2a2a2a; background: transparent; box-shadow: none; }
.faq .accordion-button:not(.collapsed) { color: var(--nv-ink); }
.faq .accordion-body { font-size: 13px; color: #555; padding: 0 20px 18px; line-height: var(--nv-lh-text); }

/* FAQ page (template «سوالات متداول» / faq.html): same accordion as the home FAQ, grouped by category */
.faq-page { padding-block: clamp(36px, 7vw, 76px) 64px; }
.faq-page__head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.faq-page__eyebrow { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .08em; color: var(--nv-tan); }
.faq-page__title { margin: 0 0 var(--nv-space-title); font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; line-height: var(--nv-lh-heading); color: #2a2a2a; }
.faq-page__intro { margin: 0; font-size: 14px; line-height: var(--nv-lh-text); color: #555; }
.faq-search { margin-top: 28px; }
.faq-search input { border-color: #e4e4e4; border-radius: 14px; }
.faq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.faq-chip { height: 38px; padding: 0 18px; border: 1px solid #e4e4e4; border-radius: 999px; background: #fff; font: 500 13px var(--nv-font); color: #2a2a2a; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.faq-chip:hover { border-color: #cdbfa9; }
.faq-chip.is-active { border-color: #2a2a2a; background: #2a2a2a; color: #fff; }
.faq-chip:focus-visible { outline: 2px solid var(--nv-red); outline-offset: 2px; }
.faq-page__groups { display: grid; gap: clamp(32px, 4vw, 48px); padding: 0; }
.faq-group { scroll-margin-top: calc(var(--nv-header-h) + 20px); }
.faq-page .accordion-body p:last-child { margin-bottom: 0; }
.faq-empty { margin: 0; padding: 24px 0; font-size: 14px; color: #777; text-align: center; }
.faq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; margin-top: clamp(40px, 5vw, 64px); padding: 26px 30px; border: 1px solid #e4e4e4; border-radius: 20px; background: #faf6f1; }
.faq-cta__title { margin: 0 0 6px; font-size: 20px; }
.faq-cta__text { margin: 0; font-size: 14px; color: #555; }
.faq-cta .btn-nv { flex: none; }

/* Newsletter */
.newsletter {   /* design: fades into the footer colour, which follows right under the form */
  position: relative; text-align: center; padding-block: 38px 0;   /* design: 101 px from the last question to the U; the status line under the form (≈ 27 px) is the gap to the footer */
  background: linear-gradient(180deg, color-mix(in srgb, var(--nv-footer) 0%, transparent) 0, var(--nv-footer) 100%);
}
.newsletter::before { content: ""; display: block; width: 156px; height: 200px; margin: 0 auto -16px; background: var(--nv-ghost, none) center / contain no-repeat; }   /* design «Group 448»: the file already carries its own soft shadows */
.newsletter h2 { margin-bottom: 4px; font-size: clamp(28px, 2.6vw, 37px); line-height: 1.4; }
.newsletter p:not(.newsletter__status) { margin: 0; font-size: clamp(16px, 1.4vw, 20px); font-weight: 300; line-height: 1.6; color: #000; }
.newsletter form { display: flex; align-items: stretch; max-width: 529px; height: 45px; margin: 28px auto 0; padding: 0; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .5); background: #fff; overflow: hidden; }   /* design: #808080 at 50% */
.newsletter input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; padding: 0 16px; font: 13px var(--nv-font); color: #333; height: auto; }
.newsletter input::placeholder { color: #6f6f6f; }
/* Persian placeholder on e-mail fields: Bootstrap RTL forces [type=email] to LTR, so the hint sat on the left */
:root input[type="email"]:placeholder-shown { direction: rtl; text-align: right; }
:root input[type="email"]:not(:placeholder-shown) { text-align: right; }
.newsletter .btn-nv { flex: none; width: 109px; height: auto; padding: 0; border-radius: 999px; box-shadow: none; justify-content: center; }
.newsletter__status { min-height: 1.6em; margin-top: 6px; font-size: 13px; color: #1a7f4b; }

/* 6. PRODUCTS ------------------------------------------------------------ */
/* One theme per size. Change a color here and the whole tab follows. */
body[data-size="1"] { --p-bg: #f2f4f4; --p-header: #cacdcd; --p-title: #156d65; --p-desc: #156d65; --p-line: #20847b; --p-arch-a: #d4e4e3; --p-arch-b: #b3c5c4; }
body[data-size="2"] { --p-bg: #fbf0f3; --p-header: #d3c9cc; --p-title: #5a3441; --p-desc: #156d65; --p-line: #1f837a; --p-arch-a: #fde7ef; --p-arch-b: #edadc3; }
body[data-size="3"] { --p-bg: #e0f4fb; --p-header: #bacdd4; --p-title: #1a4b5c; --p-desc: #184b5c; --p-line: #266783; --p-arch-a: #cef0fc; --p-arch-b: #7dd3f6; }
body[data-size="4"] { --p-bg: #fdf2eb; --p-header: #d5cac5; --p-title: #1a4b5e; --p-desc: #7b3713; --p-line: #b24e18; --p-arch-a: #fee2d4; --p-arch-b: #f5b594; }
body[data-size="5"] { --p-bg: #f4f0f7; --p-header: #ccc9cf; --p-title: #554267; --p-desc: #554267; --p-line: #7f659a; --p-arch-a: #f0e4fc; --p-arch-b: #c0add4; }

body.page-products { --nv-header-bg: var(--p-header); background: var(--p-bg); transition: background-color .5s ease; }
body.page-products::before { content: ""; position: fixed; inset: 0; background: var(--nv-cloud-texture) 50% 0 / max(1802px, 125vw) auto, var(--nv-cloud-texture) 50% 0 / max(1802px, 125vw) auto; opacity: 1;   /* same texture as the home page, drawn twice (aligned) so its lines read as strongly as there; design: 1802 px wide */ pointer-events: none; z-index: 0; }
body.page-products main,
body.page-products .nv-footer { position: relative; z-index: 1; }
/* Products header: only its colour (follows the active product); position and menu = the shared header rules */
body.page-products .nv-header { background: linear-gradient(90deg, rgba(255, 255, 255, .28), transparent 22%, transparent 78%, rgba(255, 255, 255, .28)), var(--p-header); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }

/* The hero (arch + tabs) always fits the first screen, on every device: it is exactly one screen tall
   (100svh = visible height, browser bars included) and every vertical size shrinks with the screen height.
   On a screen ≥ ~950px tall it is exactly the design. The product details follow below it. */
.products {
  --vu: 1vh;                                          /* 1% of the visible screen height */
  --p-vh: calc(100 * var(--vu) - var(--nv-header-h)); /* space under the header */
  --p-tab: clamp(44px, calc(6.8 * var(--vu)), 64px);          /* product tabs (design 64) */
  --p-tabs-mt: clamp(10px, calc(4.6 * var(--vu)), 43px);      /* gap arch → tabs (design 43) */
  --p-pb: clamp(12px, calc(6.5 * var(--vu)), 62px);           /* gap tabs → details (design 62) */
  --p-budget: calc(var(--p-vh) - var(--p-tab) - var(--p-tabs-mt) - var(--p-pb)); /* tallest the arch may be */
  --p-panel-h: min(670px, var(--p-budget));                   /* design height (or less on short screens) */
  --arch-w: min(670px, 100vw - 32px, var(--p-panel-h));       /* design U is as wide as it is tall (670×670): on shorter screens
                                                                 the whole U scales down instead of turning squat */
  --p-rh: calc(var(--arch-w) / 2);                             /* bottom curve: horizontal radius */
  --p-rv: var(--p-rh);                                         /* vertical radius = horizontal: a round U bottom like the design */
  --p-safe: .46;                                               /* part of the curve kept free under the product (balanced: standard spacing, product still large) */
  --p-brand: clamp(36px, calc(7.4 * var(--vu) - 4px), 66.85px); /* English product name (design 66.85) */
  overflow: hidden;
}
@supports (height: 100svh) { .products { --vu: 1svh; } }
.p-hero { min-height: var(--p-vh); padding-bottom: var(--p-pb); }
.p-stage { position: relative; width: var(--arch-w); margin-inline: auto; }
.p-arches { position: relative; display: grid; }
/* two translucent rims around the arch (design: white bands with a hairline) */
.p-arches::before, .p-arches::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0; top: 0; z-index: 0; pointer-events: none;
  border: 1px solid rgba(0, 0, 0, .07); border-top: 0;
}
/* outer lines: design offsets 54/55 and 107/115 px at a 670px U, scaled with the U */
.p-arches { --ra: calc(var(--arch-w) * .0806); --rb: calc(var(--arch-w) * .0821); --rc: calc(var(--arch-w) * .1597); --rd: calc(var(--arch-w) * .1716); }
.p-arches::before { width: calc(100% + 2 * var(--ra)); height: calc(100% + var(--rb)); border-radius: 0 0 calc(var(--p-rh) + var(--ra)) calc(var(--p-rh) + var(--ra)) / 0 0 calc(var(--p-rv) + var(--rb)) calc(var(--p-rv) + var(--rb)); }
.p-arches::after { width: calc(100% + 2 * var(--rc)); height: calc(100% + var(--rd)); border-radius: 0 0 calc(var(--p-rh) + var(--rc)) calc(var(--p-rh) + var(--rc)) / 0 0 calc(var(--p-rv) + var(--rd)) calc(var(--p-rv) + var(--rd)); }

.p-panel {
  grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  height: var(--p-panel-h);
  --p-side: clamp(16px, calc(var(--arch-w) * .075), 50px);
  padding: clamp(12px, calc(5.2 * var(--vu) - 4px), 46px) var(--p-side) calc(var(--p-rv) * var(--p-safe));   /* standard spacing; product image / 3D model stays large */
  border-radius: 0 0 var(--p-rh) var(--p-rh) / 0 0 var(--p-rv) var(--p-rv);
  background: linear-gradient(180deg, var(--a) 0%, var(--a) 70%, var(--b) 100%);   /* design: the darker tone only in the lowest ~200px */
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s;
}
.p-panel.is-active { opacity: 1; visibility: visible; z-index: 2; }
/* colours of the 5 design products (WordPress prints the colours chosen in the admin for every product) */
.p-panel[data-size="1"], .p-detail[data-size="1"] { --a: #d4e4e3; --b: #b3c5c4; --title: #156d65; --desc: #2a2a2a; --card: #eaf4f4; --card-line: #d4e4e3; }
.p-panel[data-size="2"], .p-detail[data-size="2"] { --a: #fde7ef; --b: #edadc3; --title: #5a3441; --desc: #156d65; --card: #ffe9f1; --card-line: #fce5ed; }
.p-panel[data-size="3"], .p-detail[data-size="3"] { --a: #cef0fc; --b: #7dd3f6; --title: #1a4b5e; --desc: #1a4b5e; --card: #f0f9fc; --card-line: #e5e5e5; }
.p-panel[data-size="4"], .p-detail[data-size="4"] { --a: #fee2d4; --b: #f5b594; --title: #1a4b5e; --desc: #7b3713; --card: #fff7f2; --card-line: #e5e5e5; }
.p-panel[data-size="5"], .p-detail[data-size="5"] { --a: #f0e4fc; --b: #c0add4; --title: #554267; --desc: #554267; --card: #f8f3fd; --card-line: #e5e5e5; }

/* English product name: «AIR» + «Ultra thin» (Prata, design 66.85px / 24px) */
.p-brand { flex: none; margin: 0; font-family: var(--nv-font-display); font-weight: 400; color: #000; direction: ltr; line-height: 1; }
.p-brand__name { display: block; font-size: var(--p-brand); line-height: .78; letter-spacing: -.01em; }
.p-brand__tag { display: block; margin-top: calc(var(--p-brand) * .1); font-size: calc(var(--p-brand) * .359); line-height: 1.25; }
/* the package (image or 3D model) takes the free space under the name, first to shrink on short screens */
.p-pack {
  --pk-gap: clamp(10px, calc(4.2 * var(--vu) - 8px), 38px);        /* product → its shadow */
  flex: 1 1 auto; min-height: 60px; position: relative;           /* the product takes all the free height of the arch */
  align-self: stretch; margin: clamp(6px, calc(4.4 * var(--vu) - 4px), 40px) calc(8px - var(--p-side)) 0;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--pk-gap);
}
.p-pack img { position: relative; z-index: 2; display: block; max-height: 100%; width: auto; max-width: min(580px, 96%); object-fit: contain; }
.p-pack__img { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; max-width: min(580px, 96%); }
.p-pack__img img { max-width: 100%; }
/* soft shadow under the product: as wide as the image (image mode) / half the box (3D mode) */
.p-pack__img::after, .p-model::after {
  content: ""; position: absolute; z-index: -1; left: 50%; translate: -50% 0; bottom: calc(-1 * var(--pk-gap));
  width: 98%; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .2); filter: blur(5px); pointer-events: none;
}
.p-model::after { width: 52%; }

.p-tabs {
  position: relative; z-index: 3; display: flex; flex-direction: row-reverse; gap: clamp(8px, 2.4vw, 24px); margin: calc(var(--p-tabs-mt) - 4px) -4px -4px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px; /* room for the focus ring */
}
.p-tabs::-webkit-scrollbar { display: none; }
/* centred while they fit; when there are many products, the row scrolls (auto margins = safe centring) */
.p-tabs > :first-child { margin-left: auto; }
.p-tabs > :last-child { margin-right: auto; }
.p-tab {
  flex: none; scroll-snap-align: center;
  width: var(--p-tab); height: var(--p-tab); border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #eae9ea; color: var(--c); font: 800 clamp(12px, calc(1.58 * var(--vu)), 15px)/1.3 var(--nv-font);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .04);
  transition: background-color .25s, transform .25s;
}
.p-tab:hover { background: #e2e1e2; }
.p-tab[aria-selected="true"] { background: #d9d9d9; }
.p-tab[data-size="1"] { --c: #156d65; }
.p-tab[data-size="2"] { --c: #5a3441; }
.p-tab[data-size="3"] { --c: #1a4b5c; }
.p-tab[data-size="4"] { --c: #1a4b5e; }
.p-tab[data-size="5"] { --c: #554267; }

/* Product details under the hero: «معرفی محصول» heading, name, text, specifications card */
.p-info { position: relative; padding-bottom: 51px; }   /* transparent: the page's cloud texture (body.page-products::before) shows behind the details too, as in v1.1 */
.p-info__head { display: flex; border-bottom: 1px solid #cecece; }
.p-info__label { position: relative; margin: 0; padding: 0 8px 10px; font-size: 16px; font-weight: 800; line-height: 1.5; color: #2a2a2a; }
.p-info__label::after { content: ""; position: absolute; inset: auto 0 -2.5px; height: 4px; border-radius: 2px; background: var(--p-accent, #f5570f); }
.p-details { display: grid; }
.p-detail { grid-area: 1 / 1; padding-top: 32px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.p-detail.is-active { opacity: 1; visibility: visible; }
.p-detail__title { font-size: clamp(24px, 2vw, 28px); color: var(--title); }   /* design 28px */
.p-detail__text { max-width: 1004px; font-size: 14px; color: var(--desc); text-align: justify; }

.p-specs {
  margin: var(--nv-space-block) 0 0; padding: 30px 18px 30px; border: 1px solid var(--card-line, #e5e5e5);
  border-radius: 21.5px; background: var(--card);
  display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
}
.p-spec { margin: 0; text-align: center; }
.p-spec dt { display: flex; flex-direction: column; align-items: center; gap: 13px; padding-bottom: 21px; border-bottom: 1px solid #e7e7e7; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: #000; }   /* design: label 12.5px, line at 154px */
.p-spec__icon { display: grid; place-items: center; height: 70px; }
.p-spec__icon img { display: block; max-height: 70px; width: auto; }
.p-spec dd { margin: 0; padding-top: 22px; font-size: 16px; line-height: 1.35; color: #000; }
.p-spec__none { display: inline-block; width: 17.6px; height: 1px; background: #231f20; vertical-align: middle; }
.p-drops { display: inline-flex; gap: 2.6px; direction: ltr; vertical-align: middle; }
.p-drops svg { display: block; width: 12px; height: 19.1px; fill: #231f20; }
.p-drops .is-off { fill: none; stroke: #231f20; stroke-width: .9; opacity: .4; }

/* Products — 3D model (GLB, assets/js/product-3d.min.js)
   .p-model fills the pack box; the image is the poster (while loading / no WebGL / error).
   The script adds the canvas, a hint and a toolbar (zoom in, zoom out, reset, fullscreen). */
.p-model { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.p-model__canvas { position: absolute; inset: -8% 0 0; width: 100% !important; height: 108% !important; opacity: 0; cursor: grab; outline: 0; }
.p-model__canvas:active { cursor: grabbing; }
.p-model__canvas:focus-visible { outline: 2px solid var(--line, var(--nv-red)); outline-offset: -2px; border-radius: 16px; }
.p-model.is-ready .p-model__canvas { opacity: 1; }
.p-model.is-ready .p-model__poster { visibility: hidden; }
.p-model.is-loading .p-model__poster { animation: nv-model-wait 1.4s ease-in-out infinite alternate; }
@keyframes nv-model-wait { to { opacity: .55; } }

.p-model__hint {
  position: absolute; inset-block-start: 0; left: 50%; translate: -50% 0; z-index: 3; padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); color: var(--title, #333); font-size: 11px; line-height: 1.8; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06); opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.p-model.is-ready .p-model__hint { opacity: 1; }
.p-model.is-ready.is-touched .p-model__hint { opacity: 0; }

.p-model__bar {
  position: absolute; z-index: 4; inset-block-start: 8px; inset-inline-start: 4px; display: flex; flex-direction: column; gap: 6px;   /* top of the box: the arch is still straight there, so the buttons never cross its curved edge */
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.p-model.is-ready .p-model__bar { opacity: 1; visibility: visible; }
.p-model__btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--title, #333); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0, .08); backdrop-filter: blur(6px);
  transition: background-color .2s, transform .2s;
}
.p-model__btn:hover { background: #fff; }
.p-model__btn:active { transform: scale(.94); }
.p-model__ic { display: block; width: 18px; height: 18px; }

/* Fullscreen (Fullscreen API, or full window on iPhone) */
.p-model.is-full { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; align-items: center; background: radial-gradient(circle at 50% 40%, var(--a, #f4f4f4) 0, var(--b, #ddd) 100%); }
.p-model:fullscreen { background: radial-gradient(circle at 50% 40%, var(--a, #f4f4f4) 0, var(--b, #ddd) 100%); }
.p-model.is-full .p-model__canvas { inset: 0; height: 100% !important; cursor: grab; }
.p-model.is-full .p-model__poster { display: none; }
.p-model.is-full .p-model__hint { inset-block-start: 20px; font-size: 13px; }
.p-model.is-full .p-model__bar { inset-block-end: auto; inset-block-start: 20px; inset-inline-start: 20px; }
.p-model.is-full .p-model__btn { width: 44px; height: 44px; }
.p-model.is-full .p-model__ic { width: 22px; height: 22px; }
html.nv-model-open, html.nv-model-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .p-model.is-loading .p-model__poster { animation: none; } }

/* 7. ABOUT --------------------------------------------------------------- */
.about-hero { padding-top: 26px; }
.about-hero img { display: block; width: 100%; aspect-ratio: 1340 / 462; object-fit: cover; border-radius: var(--nv-radius-lg); background: #e7dfd3; }
.about-block { padding-block: clamp(36px, 8vw, 116px) 0; }
.about-block__grid { display: grid; gap: 28px; align-items: start; }
.about-block h2 { font-size: 24px; font-weight: 500; }
.about-block p, .about-block__list li { font-size: 16px; line-height: var(--nv-lh-text); color: var(--nv-ink); text-align: start; }
.about-block img { display: block; width: 100%; aspect-ratio: 662 / 328; object-fit: cover; border-radius: var(--nv-radius-lg); background: #e7dfd3; }
.about-block:last-of-type { padding-bottom: clamp(60px, 9vw, 116px); }

/* 8. BLOG / ARTICLE / CONTACT -------------------------------------------- */
.mag-head { text-align: center; padding-block: clamp(36px, 7vw, 76px) 34px; }
.mag-head h1,
.mag-head__title { margin: 0 0 var(--nv-space-title); font-size: clamp(38px, 5vw, 56px); font-weight: 800; line-height: var(--nv-lh-heading); color: var(--nv-violet-900); }
/* Article pages: compact header (blog name + breadcrumb), the article title is the page's h1 */
.mag-head--article { padding-block: clamp(20px, 4vw, 40px) clamp(16px, 2.4vw, 28px); }
.mag-head--article .mag-head__title { margin-bottom: 8px; font-size: clamp(26px, 3.4vw, 40px); }
.mag-head p { color: var(--nv-violet-600); font-size: 18px; }
.mag-search { position: relative; max-width: 624px; margin: 40px auto 0; scroll-margin-top: calc(var(--nv-header-h) + 16px); }   /* #search link: the box stays visible under the sticky header */
.mag-search input { width: 100%; height: 48px; padding: 0 44px 0 16px; border: 1px solid #d3d7df; border-radius: 8px; background: #fff; font: 14px var(--nv-font); color: var(--nv-heading-dark); }
.mag-search input::placeholder { color: #777; }
.mag-search input:focus { outline: 2px solid var(--nv-violet-600); outline-offset: 1px; }
.mag-search .icon { position: absolute; top: 50%; right: 14px; translate: 0 -50%; font-size: 20px; color: #444; pointer-events: none; }

.blog-grid { display: grid; gap: 24px 24px; grid-template-columns: minmax(0, 1fr); padding-bottom: 70px; }
.blog-empty { grid-column: 1 / -1; text-align: center; color: var(--nv-muted); padding: 40px 0; }

.blog-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 16px; background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06); transition: box-shadow .25s; }
.blog-card:hover { box-shadow: 0 10px 24px rgba(16, 24, 40, .1); }
.blog-card__img { display: block; width: 100%; aspect-ratio: 399 / 213; object-fit: cover; border-radius: 8px; background: #e9e4f2; }
.blog-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.blog-card__title { min-width: 0; margin: 0; font-size: 16px; font-weight: 700; color: var(--nv-heading-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-card__head .icon { font-size: 20px; color: #444; }
.blog-card__excerpt { color: var(--nv-muted); font-size: 14px; line-height: var(--nv-lh-text); margin-top: var(--nv-space-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 72px; }
.blog-card__author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-card__author strong { display: block; font-size: 13px; font-weight: 700; color: var(--nv-heading-dark); line-height: 1.5; }
.blog-card__author span { font-size: 12px; color: var(--nv-muted); }
.blog-card a.stretched::after { content: ""; position: absolute; inset: 0; }

/* Article (single post)
   <article class="article-layout">: head (cover + byline) · toc · body · foot (note, sources, author).
   Desktop: text column + sticky TOC column.  Mobile / tablet: one column, the TOC is a card under the byline. */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 70px; align-items: start; }
.article-head, .article-body, .article-foot { min-width: 0; }

.article-cover { position: relative; margin: 0; border-radius: 12px; overflow: hidden; }
.article-cover img { display: block; width: 100%; aspect-ratio: 966 / 462; object-fit: cover; }
.article-cover::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .68)); }
.article-cover figcaption { position: absolute; inset: auto 0 0; z-index: 1; padding: 20px 22px; color: #fff; }
.article-cover h1 { margin: 0; font-size: clamp(16px, 2vw, 20px); font-weight: 700; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; font-size: 12px; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .icon { font-size: 16px; }
.article-meta button { display: inline-flex; align-items: center; height: 22px; margin-inline-start: auto; background: 0; border: 0; color: #fff; padding: 0; cursor: pointer; }
/* bookmark: outline icon ↔ filled icon, switched by aria-pressed (main.js) */
.article-meta button .icon-bookmark-fill,
.article-meta button[aria-pressed="true"] .icon-bookmark { display: none; }
.article-meta button[aria-pressed="true"] .icon-bookmark-fill { display: inline-block; }
/* share (replaces the bookmark): icon + a short «link copied» note */
.article-meta [data-share] { position: relative; gap: 6px; }
.article-meta .share-done { position: absolute; inset-inline-end: 0; bottom: calc(100% + 6px); padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; white-space: nowrap; }
.article-meta .share-done[hidden] { display: none; }

/* Byline: who wrote it, who reviewed it, when it was published / updated (E-E-A-T) */
.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid #ecebf0; font-size: 13px; color: var(--nv-muted); }
.article-byline__author { display: inline-flex; align-items: center; gap: 10px; color: var(--nv-heading-dark); font-weight: 700; }
.article-byline__author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-byline__author small { display: block; font-size: 12px; font-weight: 400; color: var(--nv-muted); line-height: 1.4; }
.article-byline__item { display: inline-flex; align-items: center; gap: 6px; }
.article-byline__item .icon { font-size: 16px; color: var(--nv-violet-600); }
.article-byline__item strong { font-weight: 700; color: var(--nv-heading-dark); }
.article-byline a:hover { color: var(--nv-violet-900); }

/* Table of contents */
.toc { position: relative; }
.toc h2 { margin: 0 0 12px; font-size: 16px; }
.toc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: default; }
.toc__toggle .icon { display: none; }
.toc ul { display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 12px 6px 0; font-size: 14px; line-height: 1.7; color: #333; border-inline-end: 3px solid transparent; }
.toc a[aria-current="true"] { color: var(--nv-violet-900); font-weight: 700; border-inline-end-color: var(--nv-violet-900); background: linear-gradient(270deg, rgba(105, 65, 198, .06), transparent); }
.toc a:hover { color: var(--nv-violet-900); }

.article-body > * + section { margin-top: var(--nv-space-section); }   /* intro text → first section, section → section */
.article-body section { scroll-margin-top: calc(var(--nv-header-h) + 20px); }
.article-body h2 { scroll-margin-top: calc(var(--nv-header-h) + 20px); }
.article-body p { font-size: 14px; color: var(--nv-text); text-align: justify; }

/* Article foot: medical note, sources, author box */
.article-foot { display: grid; gap: var(--nv-space-block); margin-top: var(--nv-space-section); }
.article-note { display: flex; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #fff7e8; color: #6b4a12; font-size: 13px; }
.article-note .icon { flex: none; font-size: 22px; color: #c7861b; }
.article-note p { font-size: 13px; }
.article-sources { padding: 18px 20px; border: 1px solid #ecebf0; border-radius: 12px; background: #fff; }
.article-sources h2 { font-size: 16px; }
.article-sources ol { margin: 0; padding-inline-start: 20px; list-style: decimal; font-size: 13px; line-height: var(--nv-lh-text); color: var(--nv-text); }
.article-sources a { color: var(--nv-violet-600); overflow-wrap: anywhere; }
.article-sources a:hover { text-decoration: underline; }
.author-box { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 16px; background: var(--nv-blog-bg); }
.author-box__img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-box__eyebrow { display: block; font-size: 12px; color: var(--nv-violet-600); }
.author-box h2 { margin: 0 0 8px; font-size: 17px; color: var(--nv-heading-dark); }
.author-box p { font-size: 13px; color: var(--nv-text); }
.author-box__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 13px; }
.author-box__links a { color: var(--nv-violet-900); font-weight: 700; }
.author-box__links a:hover { text-decoration: underline; }
.author-box__review { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(66, 48, 125, .12); font-size: 13px; color: var(--nv-text); }
.author-box__review .icon { font-size: 18px; color: #1a7f4b; }

/* Article FAQ — same look as the home page FAQ, one column inside the article */
.article-faq { padding: 0; scroll-margin-top: calc(var(--nv-header-h) + 20px); }
.article-faq .accordion { gap: 10px; }
.article-faq .accordion-body p { font-size: 13px; }

/* Breadcrumb (blog header on article pages) */
.nv-breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--nv-muted); }
.nv-breadcrumb li + li::before { content: "/"; margin-inline-end: 6px; color: #b9b4c8; }
.nv-breadcrumb a:hover { color: var(--nv-violet-900); }
.nv-breadcrumb [aria-current="page"] { color: var(--nv-violet-900); }

.related { padding-bottom: 60px; }
.related h2 { font-size: 24px; }
.related__track { display: flex; gap: 20px; overflow-x: auto; padding: 4px 2px 20px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.related__track .blog-card { flex: 0 0 min(404px, 84%); scroll-snap-align: start; }

/* Contact */
.contact { padding-block: 56px 0; }
.contact h1 { font-size: 24px; font-weight: 500; }
.contact__grid { display: grid; gap: 28px; }
.contact__art img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--nv-radius-lg); background: #a9d4f7; }
.contact__form label { display: block; font-size: 14px; margin-bottom: 8px; color: var(--nv-ink); }
.field { margin-bottom: 20px; }
.contact__form .row { --bs-gutter-x: 18px; }
.contact__form .form-control { height: 52px; border: 1px solid var(--nv-line); border-radius: 999px; padding-inline: 22px; font: 14px var(--nv-font); background: #fff; }
.contact__form textarea.form-control { height: 180px; border-radius: 20px; padding-block: 16px; resize: vertical; }
.contact__form .form-control::placeholder { color: #b5b5b5; text-align: right; }
.contact__form .form-control:focus { border-color: var(--nv-red); box-shadow: 0 0 0 3px rgba(237, 27, 48, .12); }
.contact__form .btn-nv { width: 100%; height: 44px; box-shadow: none; }
.contact__form .form-status { min-height: 1.6em; margin-top: 10px; font-size: 13px; color: #1a7f4b; }
.contact__form .invalid-feedback { font-size: 12px; padding-inline: 14px; }
.contact-cards { display: grid; gap: 18px; margin-top: -6px; padding-bottom: 0; }   /* inside .contact__grid: 28px grid gap - 6 = 22px under the image */
.c-card { display: flex; flex-direction: column; gap: 10px; background: var(--nv-card); border-radius: 20px; padding: 22px 16px 18px; min-height: 176px; }
.c-card .icon { font-size: 24px; color: #2b3f6c; }   /* design: 24×24, #2B3F6C */
.c-card h2 { margin: 0; font-size: 16px; font-weight: 500; }
.c-card__body { margin-top: auto; font-size: 13px; font-weight: 700; color: #111; }
.c-card__phones { display: flex; flex-wrap: wrap; gap: 6px 10px; direction: ltr; justify-content: flex-end; font-size: 14px; }
.c-card .btn-join { display: flex; align-items: center; justify-content: space-between; direction: rtl; height: 44px; padding: 0 8px 0 18px; border: 1px solid var(--nv-red); border-radius: 999px; background: #fff; color: var(--nv-red); font-size: 14px; font-weight: 500; }
.c-card .btn-join__ic { width: 28px; height: 28px; border-radius: 50%; background: var(--nv-red); color: #fff; display: grid; place-items: center; }
.c-card .btn-join .icon { font-size: 16px; color: #fff; }
.contact-space { height: 20px; }

/* Contact — design 2026 (2 cards or fewer, class contact--compact): the cards sit under the image and the
   message box grows so the form ends level with the cards. 3+ cards → the rules above (previous design). */
.contact--compact .contact__form .form-status:empty { min-height: 0; margin: 0; }   /* no empty line under the button */
.contact--compact .c-card { padding: 24px 22px 40px; min-height: 180px; }
.contact--compact .c-card h2 { margin-top: 7px; font-weight: 400; }
.contact--compact .c-card__body { font-size: 16px; }

/* 404 */
.nv-404 { position: relative; display: grid; place-items: start center; height: calc(100vh - var(--nv-header-h)); height: calc(100svh - var(--nv-header-h)); min-height: 420px; padding: 0; text-align: center; overflow: hidden; }   /* exactly one screen under the header */
.nv-404 { isolation: isolate; }
/* like the products page: the content sits inside a «U» (hairline, open top, round bottom) with two outer U lines around it,
   all sized from the U width — nothing crosses a line and nothing is cut off */
.nv-404__inner {
  --w: min(560px, calc((100vw - 32px) / 1.32), calc((100svh - var(--nv-header-h)) * .66)); --ra: calc(var(--w) * .0806); --rc: calc(var(--w) * .1597);
  position: relative; width: var(--w); max-width: none; margin-inline: auto;
  padding: clamp(14px, 4.4vh, 44px) clamp(16px, 4vw, 40px) calc(var(--w) * .22);
  border: 1px solid rgba(0, 0, 0, .07); border-top: 0; border-radius: 0 0 calc(var(--w) / 2) calc(var(--w) / 2) / 0 0 calc(var(--w) * .42) calc(var(--w) * .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45));
}
.nv-404__inner::before, .nv-404__inner::after {
  content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: -1; pointer-events: none;
  border: 1px solid rgba(0, 0, 0, .07); border-top: 0;
}
.nv-404__inner::before { width: calc(100% + 2 * var(--ra)); height: calc(100% + var(--ra)); border-radius: 0 0 calc(var(--w) / 2 + var(--ra)) calc(var(--w) / 2 + var(--ra)) / 0 0 calc(var(--w) * .42 + var(--ra)) calc(var(--w) * .42 + var(--ra)); }
.nv-404__inner::after { width: calc(100% + 2 * var(--rc)); height: calc(100% + var(--rc)); border-radius: 0 0 calc(var(--w) / 2 + var(--rc)) calc(var(--w) / 2 + var(--rc)) / 0 0 calc(var(--w) * .42 + var(--rc)) calc(var(--w) * .42 + var(--rc)); }
@media (max-width: 575.98px) {   /* phones: one outer line, so the U can be wider for the text */
  .nv-404__inner { --w: calc((100vw - 24px) / 1.162); padding-bottom: calc(var(--w) * .2); }
  .nv-404__inner::after { display: none; }
}
.nv-404__code { display: flex; justify-content: center; align-items: center; gap: .04em; margin-bottom: clamp(8px, 2.4vh, 24px); font-size: clamp(64px, min(18vw, 19vh), 180px); font-weight: 800; line-height: 1; color: var(--nv-ink); direction: ltr; }
.nv-404__code img { width: auto; height: .9em; margin: 0 -.03em; translate: 0 -.02em; }   /* the «0»: brand U with its soft shadows, body (106 × 150 of 156 × 200) as tall as the digits */
.nv-404 h1 { font-size: var(--nv-h2); }
.nv-404 p { font-size: 15px; color: var(--nv-muted); }
.nv-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(14px, 3.4vh, 32px); }
.nv-404__actions .btn-outline { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 26px; border: 1px solid var(--nv-red); border-radius: 999px; color: var(--nv-red); font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s; }
.nv-404__actions .btn-outline:hover { background: var(--nv-red); color: #fff; }
.nv-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: clamp(14px, 4vh, 44px); font-size: 14px; }
.nv-404__links a { color: #555; }
@media (max-height: 760px) { .nv-404__links { display: none; } .nv-404 h1 { margin-bottom: 6px; } .nv-404 p { line-height: 1.8; } }   /* short screens: keep everything inside the one-screen U */
@media (max-height: 680px) { .nv-404__code { font-size: clamp(56px, 16vh, 180px); } }
@media (max-height: 600px) { .nv-404 p { display: none; } }
.nv-404__links a:hover { color: var(--nv-red); }

/* Motion preferences (accessibility — applies to every screen size) */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}