/* ============================================================
   Rahavard Steel — theme stylesheet
   ============================================================ */

/* ------------------------------------------------------------
   SELF-HOSTED WEB FONTS (@font-face)
   Fonts are served from /static/fonts/ over the same origin —
   never from system-installed fonts, so text renders identically
   in Edge, Chrome and Firefox on every OS.
   - Vazirmatn: variable font (weights 100–900) for Persian/RTL.
   - Poppins: static weights 400–800 for English/LTR.
   font-display: swap avoids invisible text while loading.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-var.woff2') format('woff2-variations'),
       url('/static/fonts/Vazirmatn-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; }
/* v45.16: pin the root font size. Browsers let the user pick a default font size that is SEPARATE from zoom
   (Chrome/Edge ▸ Settings ▸ Appearance ▸ Font size: Medium = 16px, Large = 20px …). The layout mixes rem sizes
   (Tailwind widths such as max-w-3xl, headings, line-heights, the hero title) with px sizes (body copy), so a
   non-default setting enlarged only half of each block — e.g. the «مورد اعتماد…» intro became wider with bigger
   line gaps while its text stayed the same size, and Edge and Chrome looked different at 100 % zoom.
   With a fixed 16px root every browser renders the same design; browser zoom (Ctrl +/−) still scales everything. */
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ------------------------------------------------------------
   FULL-VIEWPORT BACKGROUND FIX
   Remove the default browser body margin and make the outer
   layout elements span 100% of the viewport width, so section
   backgrounds always reach the screen edges at any zoom level.
   Inner content stays inside the centered .container-boxed
   (max-width 1280px) exactly as before.
   ------------------------------------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip; /* guard against accidental horizontal scroll */
}
body { background: #ffffff; }

/* Outer wrapper: full viewport width — backgrounds stretch edge
   to edge; only the inner containers are width-constrained. */
.site-frame {
  width: 100%;
  background: #fff;
  min-height: 100svh;
}

/* Sections previously used a 100vw offset trick against a boxed
   frame. The frame is now full-width, so .full-bleed simply spans
   its parent — no 100vw/scrollbar mismatch, RTL/LTR safe. */
.full-bleed {
  width: 100%;
  margin-inline-start: 0;
}

/* Centered content container (unchanged design width). */
.container-boxed {
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.font-vazir { font-family: var(--font-fa, 'Vazirmatn', 'Poppins', sans-serif); } /* v44: admin-selectable */
body.font-poppins { font-family: var(--font-en, 'Poppins', 'Vazirmatn', sans-serif); }

/* ------------------------------------------------------------
   INLINE SVG ICONS
   Icons are inline <svg> elements (see src/icons.tsx) instead of
   an icon font — rendering is pixel-identical across browsers.
   Sized in em so they track the surrounding font size exactly.
   ------------------------------------------------------------ */
.svg-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em; /* optical baseline alignment, like FA */
  flex-shrink: 0;
}

/* ---------- Hero ---------- */

/* The hero photo is a plain full-bleed <img> (object-fit: cover, centred) behind the copy row; the supplied file is
   white on the copy side and carries the equipment on the far side, so no mask / clip / offset is needed.
   The Persian copy is right-aligned and its widest line is ~480px; the column is capped at that from lg up so the
   column box matches the visible text (text position itself is unchanged). */
@media (min-width: 1024px) { html[dir='rtl'] .hero-copy-col { max-width: 484px; } }

/* v23: hero photo colour/punch correction — CSS filter only, the image file is untouched (no crop, no tint/duotone).
   Tune here: saturate = vividness of the steel tones, contrast = depth, brightness = tiny lift for the dark side.
   url(#hero-sharpen) is the inline SVG unsharp kernel in home.php (counters softness from up-scaling the 1024px
   source to the full hero width). filter: does not change the box, so object-fit / aspect ratio / hero height are
   unaffected. Colour functions are declared first as a fallback in case an engine can't resolve the SVG reference. */
.hero-photo { filter: saturate(1.12) contrast(1.08) brightness(1.03); }
.hero-photo { filter: url(#hero-sharpen) saturate(1.12) contrast(1.08) brightness(1.03); }
.hero-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* v10: pull each text block 10% of the hero width towards the photo (EN → right, FA → left).
   The row has 5% side padding from md up, so 10% of the section = 10 / 0.9 = 11.111% of the row's content box.
   margin-inline-start flips automatically with dir=rtl. Mobile (< md) is unaffected. */
@media (min-width: 768px) { .hero-copy-col { margin-inline-start: 11.1111%; } }

/* v10: the whole text block (eyebrow, title, paragraph, buttons and the gaps between them) is enlarged by 5%
   as ONE unit via transform, so every internal proportion, colour and line-height ratio stays exactly as before.
   The origin is the block's start edge (left in EN, right in FA), so the outer edge stays put and the block grows
   towards the photo. Transforms do not affect layout: nothing else on the page moves. */
@media (min-width: 768px) {
  .hero-copy-col { transform: scale(1.05); transform-origin: 0 50%; }
  html[dir='rtl'] .hero-copy-col { transform-origin: 100% 50%; }
}

/* ---- Hero typography: ONE scale for both locales ----
   The English (Poppins) sizing is the reference. Persian (Vazirmatn) uses the very same rules; the only
   locale-specific adjustment is an optical factor applied to the font-size, because Vazirmatn's glyph box is
   measured ~7 % taller than Poppins at an equal font-size (ink height 116 vs 108 per 100px), so identical
   CSS sizes read visibly larger in Persian. --fa-optical: 0.93 equalises the rendered height; set it to 1 to
   turn the compensation off. The line-height RATIO (1.1) is identical in both languages. */
:root { --fa-optical: 0.93; }
.hero-copy-col { container-type: inline-size; --optical: 1; }
html[dir='rtl'] .hero-copy-col { --optical: var(--fa-optical); }

.hero-title { font-size: calc(1.65rem * var(--optical, 1)); line-height: 1.1; }
@media (min-width: 768px) { .hero-title { font-size: calc(2.1rem * var(--optical, 1)); } }

/* Eyebrow line: always ONE line. The copy column is an inline-size container, so the font scales with the column's
   real width (which shrinks at 120 % browser zoom / narrow tablets) and never wraps. 14px when the column is ≥ ~475px.
   Same size in both locales (times the optical factor above). Letter-spacing is dropped in RTL: tracking breaks the
   joins of cursive Perso-Arabic script. */
.hero-eyebrow { white-space: nowrap; font-size: calc(12px * var(--optical, 1)); }
@media (min-width: 768px) { .hero-eyebrow { font-size: calc(clamp(9px, 1.35vw, 14px) * var(--optical, 1)); } }   /* fallback if no container queries */
@container (min-width: 0px) { .hero-eyebrow { font-size: calc(clamp(9px, 2.95cqw, 14px) * var(--optical, 1)); } }
@media (max-width: 767.98px) { .hero-eyebrow { font-size: calc(clamp(9px, 3.2vw, 12px) * var(--optical, 1)); } }
html[dir='rtl'] .hero-eyebrow { letter-spacing: normal; }

/* ---- Buttons: the two CTA styles used site-wide ----
   .btn-primary  = solid brand blue (primary action, e.g. "View Products")
   .btn-outline  = white with brand-blue border/text (secondary action, e.g. "Request a Quote" — header AND hero)
   One definition so the same label looks identical wherever it appears. `display` is deliberately left to utility
   classes (inline-flex / hidden sm:inline-flex) so responsive visibility keeps working. */
.btn {
  align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; letter-spacing: 0.025em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 6px; border: 1px solid transparent; line-height: 1.5;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
html[dir='rtl'] .btn { letter-spacing: normal; text-transform: none; }
.btn-primary { background: var(--brand, #0A6CC6); border-color: var(--brand, #0A6CC6); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); }
.btn-primary:hover { background: var(--brand-dark, #08549C); border-color: var(--brand-dark, #08549C); color: #fff; }
.btn-outline { background: #fff; border-color: var(--brand, #0A6CC6); color: var(--brand, #0A6CC6); }
.btn-outline:hover { background: var(--brand-dark, #0f3d73); border-color: var(--brand-dark, #0f3d73); color: #fff; }

/* Nav links: dark text, brand hover, animated underline */
.nav-link {
  position: relative;
  color: #595959;
  padding-bottom: 5px;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
html[dir='rtl'] .nav-link { letter-spacing: normal; }
.nav-link:hover { color: var(--brand, #0A6CC6); }
.nav-link.active { color: var(--brand, #0A6CC6); }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--brand, #0A6CC6);
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* subtle fade-in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- v15: Request a Quote form — inline validation state ---------- */
.q-field.has-error .q-input,
.q-field.has-error select.q-input,
.q-field.has-error textarea.q-input { border-color: #ef4444; background: #fff; }
.q-field.has-error .q-input:focus { --tw-ring-color: rgba(239, 68, 68, .35); border-color: #ef4444; }
.q-field.has-error .q-error { display: block; }
.q-field.has-error legend,
.q-field.has-error > label { color: #b91c1c; }
/* honeypot: visually removed for humans, still present for bots */
.q-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
html[dir='rtl'] .q-hp { left: auto !important; right: -10000px !important; }


#quote-form select.q-input { line-height: normal; padding-inline-end: 36px; }   /* keep room for the native arrow */
#quote-form textarea.q-input { height: auto; min-height: 132px; padding: 11px 16px; line-height: 1.5; resize: vertical; }
#quote-form .q-cap-eq { min-width: 96px; }
#quote-form ::placeholder { color: #8a8f98; opacity: 1; }                        /* mid-gray: legible, still clearly a hint */
#quote-form .q-submit {                          /* v21: box +10% (48->53px, 200->220px, 40->44px), text +20% (15->18px) */
  display: inline-flex; height: 53px; min-width: 220px; padding: 0 44px; font-size: 18px;
}

/* v18: "Request a Quote" page rendered at 70 % of its natural size at 100 % browser zoom (FA + EN).
   `zoom` scales layout, type and spacing uniformly and keeps normal document flow (unlike transform),
   so header/footer and the rest of the site are unaffected. */
#quote-page { zoom: 0.7; }

/* v19: quote form proportion & spacing pass (sizing only — no layout/order changes) */
#quote-form .q-input,
#quote-form select.q-input,
#quote-form .q-cap-eq {                         /* one shared control height + padding for inputs, selects, captcha chip & answer */
  height: 44px; padding: 0 16px; line-height: 42px; box-sizing: border-box;
}

/* v21: form card 20% wider. The grid tracks (and therefore the intro column) are unchanged;
   the card overflows its own track toward the end side (left in FA, right in EN).
   The page is rendered at zoom 0.7, so the outer margin of the 1280px container comfortably
   absorbs the extra width; on narrow desktops we use a smaller safe extension. */
@media (min-width: 1024px) {
  #quote-page { overflow-x: clip; }
  #quote-form-wrap { width: calc(100% + 72px); }
}
@media (min-width: 1140px) {
  #quote-form-wrap { width: 120%; }
}

/* v28 (L2): keyboard-accessible skip link (visible only when focused) */
.skip-link { position: absolute; top: -100px; inset-inline-start: 8px; z-index: 100; background: var(--brand, #0A6CC6); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 8px; outline: 3px solid #fff; box-shadow: 0 0 0 5px var(--brand, #0A6CC6); }

/* v30: product video (self-hosted <video> or Aparat/YouTube <iframe>) */
.product-video { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.product-video video, .product-video iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.product-video-badge svg { width: .65em; height: .65em; }
.product-video-badge { position: absolute; inset-inline-end: 10px; top: 10px; z-index: 2; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; pointer-events: none; }

/* ---------- v32: product-detail page — eyebrow, buttons, tabs, rich content ---------- */
.pd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; }
html[dir='rtl'] .pd-eyebrow { letter-spacing: 0; font-size: 13px; }
/* v36.2: the product title must stay on ONE line in every browser (Edge wrapped "درین دهانه باریک / Slot Drain"
   because its font metrics / zoom left less room than Chrome). app.js measures the title and shrinks the font
   (down to 60 %) instead of letting it wrap; .pd-title-nowrap is only applied while that fit succeeds, so with
   JavaScript off (or a hopelessly long title) the heading still wraps normally instead of overflowing. */
.pd-title { line-height: 1.15; overflow-wrap: normal; }
.pd-title.pd-title-nowrap { white-space: nowrap; }
/* v36.1: default key-claim line under the title (blue check). Was 1.15rem; reduced by 15% -> 0.98rem. */
.pd-highlight { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; font-weight: 600; color: #1f2937; margin: 0 0 18px; }
.pd-highlight .svg-icon { width: 1.35em; height: 1.35em; flex-shrink: 0; }
.pd-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 10px 22px; border-radius: 10px; transition: .15s; font-size: 15px; border: 2px solid transparent; }
.pd-btn .svg-icon { width: 1.1em; height: 1.1em; }
.pd-btn-outline { background: #fff; border-color: var(--brand, #0A6CC6); color: var(--brand-dark, #0f3d73); }
.pd-btn-outline:hover { background: var(--brand, #0A6CC6); color: #fff; }
.pd-btn-whatsapp { background: #16a34a; border-color: #16a34a; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pd-btn-whatsapp:hover { background: #15803d; border-color: #15803d; }
/* v40: Instagram buttons (CTA strip, contact page, product detail) — brand gradient, hidden when no username is set */
.btn-instagram, .pd-btn-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: transparent; color: #fff; }
.btn-instagram:hover, .pd-btn-instagram:hover { filter: brightness(.92); color: #fff; }
.pd-btn-instagram { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.contact-instagram { margin-inline-start: 12px; }

#product-tabs { background: #f7f9fc; }
.pd-tabs { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 4px; border-bottom: 1px solid #e5e7eb; }
.pd-tab { display: inline-flex; align-items: center; gap: 10px; padding: 18px 22px 14px; font-weight: 600; font-size: 15px; color: #374151; background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; }
.pd-tab .svg-icon { width: 1.25em; height: 1.25em; color: #6b7280; }
.pd-tab:hover { color: var(--brand, #0A6CC6); }
.pd-tab.is-active { color: var(--brand, #0A6CC6); border-bottom-color: var(--brand, #0A6CC6); }
.pd-tab.is-active .svg-icon { color: var(--brand, #0A6CC6); }
.pd-panel { margin-top: 24px; background: #fff; border: 1.5px solid #2f4fcf; border-radius: 12px; padding: 22px 26px 26px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pd-panel[hidden] { display: none; }
.pd-panel-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; color: #1f2937; margin-bottom: 18px; }
.pd-panel-title .svg-icon { width: 1.15em; height: 1.15em; }
@media (max-width: 640px) { .pd-tabs { justify-content: flex-start; } .pd-tab { padding: 12px 12px 10px; font-size: 13.5px; } .pd-panel { padding: 16px; } }

/* rich content (admin editor output). Mirrors .rt-area in editor.css so WYSIWYG matches the site. */
.rich-content { font-size: 15.5px; line-height: 1.9; color: #1f2937; word-wrap: break-word; }
.rich-content > :first-child { margin-top: 0; }
.rich-content h2 { font-size: 1.5rem; font-weight: 800; margin: 1.1em 0 .45em; color: var(--brand-dark, #0f3d73); }
.rich-content h3 { font-size: 1.25rem; font-weight: 800; margin: 1em 0 .4em; color: var(--brand-dark, #0f3d73); }
.rich-content h4 { font-size: 1.05rem; font-weight: 700; margin: .9em 0 .35em; }
.rich-content p { margin: 0 0 .8em; }
.rich-content ul, .rich-content ol { margin: 0 0 .9em; padding-inline-start: 1.6em; }
.rich-content ul { list-style: disc; } .rich-content ol { list-style: decimal; }
.rich-content li { margin: .2em 0; }
.rich-content a { color: var(--brand, #0A6CC6); text-decoration: underline; text-underline-offset: 3px; }
.rich-content a:hover { color: var(--brand-dark, #08549C); }
.rich-content blockquote { margin: 1em 0; padding: .7em 1.2em; border-inline-start: 4px solid var(--brand, #0A6CC6); background: #f3f8fd; color: #374151; border-radius: 6px; }
.rich-content blockquote p:last-child { margin-bottom: 0; }
.rich-content hr { border: 0; border-top: 2px solid #e5e7eb; margin: 1.4em 0; }
.rich-content code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: .9em; direction: ltr; unicode-bidi: embed; }
.rich-content pre { background: #f3f4f6; padding: 10px 12px; border-radius: 6px; direction: ltr; text-align: left; overflow-x: auto; }
.rich-content mark { background: #fef3c7; padding: 0 2px; }
.rich-content figure { margin: 1.2em 0; }
.rich-content figure img, .rich-content img { max-width: 100%; height: auto; border-radius: 10px; }
.rich-content figure.rt-img-center { text-align: center; }
.rich-content figure.rt-img-left { float: left; margin: .3em 1.4em .8em 0; max-width: 50%; }
.rich-content figure.rt-img-right { float: right; margin: .3em 0 .8em 1.4em; max-width: 50%; }
.rich-content figcaption { font-size: 13px; color: #6b7280; margin-top: 6px; text-align: center; }
.rich-content table { border-collapse: collapse; width: 100%; margin: 1em 0 1.4em; font-size: 14.5px; }
.rich-content th, .rich-content td { border: 1px solid #1f2937; padding: 10px 14px; vertical-align: top; text-align: start; }
.rich-content th { background: #f3f4f6; font-weight: 700; color: #1f2937; }
.rich-content tr td:first-child { font-weight: 700; white-space: nowrap; background: #fafafa; }
.rich-content tr:nth-child(even) td { background: #fff; }
.rich-content td { color: #1e3a8a; }
.rich-content tr td:first-child { color: #1f2937; }
@media (max-width: 640px) { .rich-content table { display: block; overflow-x: auto; } .rich-content tr td:first-child { white-space: normal; } }
.rich-content .rt-file { display: flex; align-items: center; gap: 10px; background: #f3f8fd; border: 1px solid #cfe1f5; border-radius: 10px; padding: 12px 16px; margin: .6em 0; }
.rich-content .rt-file::before { content: 'PDF'; font-size: 10px; font-weight: 800; background: #b91c1c; color: #fff; padding: 3px 7px; border-radius: 4px; letter-spacing: .5px; }
.rich-content .rt-file a { font-weight: 700; text-decoration: none; }
.rich-content .rt-file a:hover { text-decoration: underline; }
.rich-content::after { content: ''; display: block; clear: both; }

/* v32: utilities used by v31 templates (products pagination, contact WhatsApp) that were missing from the shipped tailwind.css */
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.mt-12 { margin-top: 3rem; }
.hover\:border-brand:hover { border-color: var(--brand, #0A6CC6); }
.cursor-not-allowed { cursor: not-allowed; }

/* ---------- v35: product-detail image gallery (1 large + 3 small, click -> lightbox) ---------- */
/* v41: product photo carousel — one photo at a time inside the same rounded frame the v35 grid used.
   v42: the prev/next arrows are bare brand-blue chevrons (‹ ›) — no circle, no white background — vertically
   centred on the left / right edges of the photo; a soft white halo (drop-shadow) keeps them legible on busy
   photos. The "n/N" counter stays bottom-centre. All three are omitted server-side when the product has a
   single photo, so that case renders exactly as before. */
.pd-gallery { position: relative; }
.pd-carousel-track { position: relative; }
.pd-gallery-item { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #f3f4f6; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: zoom-in; }
.pd-gallery-item[hidden] { display: none; }
.pd-gallery-item img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
.pd-gallery-item:hover img { transform: scale(1.02); }
.pd-gallery-item:focus-visible, .pd-carousel:focus-visible { outline: 3px solid var(--brand, #0A6CC6); outline-offset: 2px; border-radius: 12px; }
.pd-carousel[data-count]:not([data-count="1"]) .pd-gallery-item { aspect-ratio: 1 / 1; }
.pd-carousel[data-count]:not([data-count="1"]) .pd-gallery-item img { height: 100%; object-fit: cover; }
.pd-car-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 64px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--brand, #0A6CC6); cursor: pointer; filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.25)); transition: color .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.pd-car-nav:hover { color: #084F91; }
.pd-car-nav:active { transform: translateY(-50%) scale(.9); }
.pd-car-nav:focus-visible { outline: 3px solid rgb(var(--brand-rgb, 10 108 198) / .45); outline-offset: 0; }
.pd-car-nav .svg-icon { width: 34px; height: 34px; fill: none; transition: transform .15s; }
.pd-car-nav:hover .svg-icon { transform: scale(1.1); }
.pd-car-prev { left: 6px; }
.pd-car-next { right: 6px; }
.pd-car-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--brand, #0A6CC6); font-weight: 700; font-size: 14px; line-height: 1.4; direction: ltr; unicode-bidi: embed; box-shadow: 0 1px 4px rgba(0,0,0,.12); pointer-events: none; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pd-gallery-item { border-radius: 8px; } .pd-car-nav { width: 40px; height: 56px; } .pd-car-nav .svg-icon { width: 28px; height: 28px; } .pd-car-prev { left: 2px; } .pd-car-next { right: 2px; } .pd-car-count { bottom: 12px; font-size: 13px; } }

/* v35: rich short description. v36: the check-list block between the description and the buttons was
   removed; the description's bottom margin is the only gap before .pd-actions (same in LTR and RTL). */
.pd-description { color: #4b5563; font-size: 1.1rem; line-height: 2; margin-bottom: 28px; }
.pd-description p:last-child, .pd-description ul:last-child, .pd-description ol:last-child, .pd-description > :last-child { margin-bottom: 0; }
.pd-description.rich-content h2, .pd-description.rich-content h3, .pd-description.rich-content h4 { margin-top: .6em; }

/* v35: lightbox */
.pd-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10,14,20,.92); display: flex; align-items: center; justify-content: center; padding: 56px 72px; animation: pd-lb-in .18s ease; }
.pd-lightbox[hidden] { display: none; }
@keyframes pd-lb-in { from { opacity: 0 } to { opacity: 1 } }
.pd-lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pd-lb-img { max-width: min(1200px, 100%); max-height: calc(100vh - 140px); object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pd-lb-caption { color: #d1d5db; font-size: 14px; text-align: center; }
.pd-lb-count { display: inline-block; margin-inline-start: 8px; color: #9ca3af; font-size: 13px; direction: ltr; unicode-bidi: embed; }
.pd-lb-close, .pd-lb-nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .15s; }
.pd-lb-close:hover, .pd-lb-nav:hover { background: rgba(255,255,255,.28); }
.pd-lb-close { top: 16px; inset-inline-end: 16px; }
.pd-lb-close .svg-icon { width: 18px; height: 18px; }
.pd-lb-nav { top: 50%; transform: translateY(-50%); }
.pd-lb-nav .svg-icon { width: 20px; height: 20px; }
.pd-lb-prev { left: 14px; } .pd-lb-next { right: 14px; }
.pd-lb-nav[hidden] { display: none; }
body.pd-lb-open { overflow: hidden; }
@media (max-width: 640px) { .pd-lightbox { padding: 56px 8px; } .pd-lb-nav { width: 38px; height: 38px; } .pd-lb-prev { left: 4px; } .pd-lb-next { right: 4px; } .pd-lb-img { max-height: calc(100vh - 120px); } }

/* v45.14: «Who we work with» partner-logo carousel (home page, between the statistics and the featured
   products). Brand-coloured band like the reference; each logo sits on a white rounded card in its ORIGINAL
   colours (real customer marks such as a red oval with white lettering would vanish if whited-out). The strip itself is a plain
   horizontally-scrollable list (works with no JS); app.js drives the arrows, looping and auto-play.
   Visible slots per view: 2 (phones) / 3 / 4 / 5 (desktop). Direction-agnostic: the visual left arrow is
   always "previous" in both LTR and RTL (the JS reads the actual scroll direction). */
.partners { padding: 30px 0 32px; }
@media (min-width: 768px) { .partners { padding: 34px 0 36px; } }
.partners-carousel { position: relative; display: flex; align-items: center; gap: 4px; }
/* RTL: keep the arrows in VISUAL order (left button = "<", right button = ">") while the logo strip itself
   still flows right-to-left (first logo on the right). */
[dir="rtl"] .partners-carousel { flex-direction: row-reverse; }
.partners-viewport { flex: 1 1 auto; min-width: 0; }
.partners-track {
  --partners-per-view: 2; --partners-gap: 16px;
  display: flex; gap: var(--partners-gap); margin: 0; padding: 4px 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
}
.partners-track::-webkit-scrollbar { display: none; }
.partners-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.partners-track.is-animating { scroll-snap-type: none; scroll-behavior: auto; } /* v45.15: JS-timed slide between sets */
@media (min-width: 640px)  { .partners-track { --partners-per-view: 3; --partners-gap: 24px; } }
@media (min-width: 1024px) { .partners-track { --partners-per-view: 4; --partners-gap: 32px; } }
@media (min-width: 1280px) { .partners-track { --partners-per-view: 5; --partners-gap: 32px; } }
.partners-item {
  flex: 0 0 calc((100% - (var(--partners-per-view) - 1) * var(--partners-gap)) / var(--partners-per-view));
  scroll-snap-align: start; display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 8px 12px; box-sizing: border-box;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .2s, box-shadow .2s;
}
@media (min-width: 768px) { .partners-item { height: 112px; padding: 9px 14px; } }
.partners-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.partners-logo-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 8px; }
.partners-logo-link:focus-visible { outline: 3px solid rgb(var(--brand-rgb, 10 108 198) / .6); outline-offset: 2px; }
.partners-logo {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.partners-nav {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 64px;
  padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.75); cursor: pointer;
  transition: color .15s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.partners-nav:hover { color: #fff; }
.partners-nav:active { transform: scale(.92); }
.partners-nav:focus-visible { outline: 3px solid rgba(255,255,255,.8); outline-offset: 0; }
.partners-nav .svg-icon { width: 28px; height: 28px; fill: none; }
.partners-nav[hidden] { display: none; }
@media (max-width: 640px) { .partners-nav { width: 32px; } .partners-nav .svg-icon { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .partners-track { scroll-behavior: auto; } .partners-item { transition: none; } }

/* admin: logo previews in /admin?s=partners (same white card as on the site) */
.partner-logo-chip { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 56px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; }
.partner-logo-chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ============================================================
   v45.17 — ABOUT PAGE redesign (/{lang}/about)
   intro (copy | management + stats) → photo / video carousel (endless loop, click = full-screen viewer)
   → closing statement card with CTAs. Every colour follows the admin theme (var(--brand …)).
   ============================================================ */
.about-intro { padding: 64px 0 40px; }
.about-intro-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .about-intro { padding: 80px 0 56px; } .about-intro-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.about-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--brand, #0A6CC6); font-size: 14px; font-weight: 700; }
.about-eyebrow::before { content: ''; width: 28px; height: 3px; border-radius: 3px; background: currentColor; }
html[dir='ltr'] .about-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.about-title { margin: 0 0 18px; font-size: 30px; line-height: 1.35; font-weight: 800; color: var(--steel, #313131); }
@media (min-width: 768px) { .about-title { font-size: 36px; } }
.about-lead { margin: 0; color: var(--steel-gray, #54595F); font-size: 17px; line-height: 2.05; }
html[dir='ltr'] .about-lead { line-height: 1.85; }
.about-management { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, rgb(var(--brand-rgb, 10 108 198) / .09), rgb(var(--brand-rgb, 10 108 198) / .02)); border-inline-start: 4px solid var(--brand, #0A6CC6); }
.about-management-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand, #0A6CC6); color: #fff; font-size: 18px; box-shadow: 0 6px 14px rgb(var(--brand-rgb, 10 108 198) / .3); }
.about-management-text { margin: 0; font-weight: 700; color: var(--brand-dark, #08549C); font-size: 15px; line-height: 1.7; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.about-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px 8px; border-radius: 14px; background: #fff; border: 1px solid #eef1f5; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.about-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .1); }
.about-stat-value { font-size: 30px; line-height: 1.2; font-weight: 800; color: var(--brand, #0A6CC6); direction: ltr; unicode-bidi: isolate; }
.about-stat-label { font-size: 13px; color: var(--steel-gray, #54595F); }
@media (max-width: 420px) { .about-stat-value { font-size: 24px; } .about-stat-label { font-size: 12px; } }

/* ---------- gallery band (v45.17.1: one item per view on a full-width dark steel band) ---------- */
.about-gallery { position: relative; padding: 34px 0 28px; background: var(--about-band-center, #525357); background: linear-gradient(90deg, var(--about-band-edge, #45464a) 0%, var(--about-band-center, #525357) 50%, var(--about-band-edge, #45464a) 100%); }
@media (min-width: 1024px) { .about-gallery { padding: 36px 0 30px; } }

/* carousel frame: [‹] [ single-card viewport ] [›] — arrows hug the card, physical order in both directions */
.about-car { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; direction: ltr; }
.about-car-viewport { flex: 0 1 320px; width: 320px; max-width: calc(100% - 100px); min-width: 0; overflow: hidden; border-radius: 14px; }
@media (min-width: 640px)  { .about-car-viewport { flex-basis: 360px; width: 360px; } }
@media (min-width: 1024px) { .about-car-viewport { flex-basis: 320px; width: 320px; } }
.about-car-track {
  --about-per-view: 1; --about-gap: 0px;
  display: flex; gap: 0; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.about-car-track::-webkit-scrollbar { display: none; }
html[dir='rtl'] .about-car-track { direction: rtl; }
/* JS mode: native scrolling is replaced by a transform-driven endless loop (clones at both ends) */
.about-car.is-ready .about-car-track { overflow: visible; scroll-snap-type: none; will-change: transform; direction: ltr; touch-action: pan-y; }
.about-car.is-ready .about-car-track.is-animating { transition: transform var(--about-speed, 650ms) cubic-bezier(.45, .05, .25, 1); }
.about-car.is-dragging .about-car-track { cursor: grabbing; }
.about-car-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
html[dir='rtl'] .about-car-slide { direction: rtl; }

.about-card { position: relative; display: block; border-radius: 14px; color: inherit; text-decoration: none; cursor: zoom-in; outline: none; -webkit-user-drag: none; user-select: none; }
.about-card.is-video { cursor: pointer; }
.about-card-frame { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #3b3c40; border: 3px solid var(--about-card-border, #fff); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.about-card.is-video .about-card-frame { border-color: var(--about-card-border, #fff); }
.about-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.about-card-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #313131, #1b2330); color: rgba(255,255,255,.35); font-size: 64px; }
.about-card-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 20, 0) 55%, rgba(10, 14, 20, .7) 100%); pointer-events: none; }
.about-card:hover .about-card-media, .about-card:focus-visible .about-card-media { transform: scale(1.04); }
.about-card:focus-visible .about-card-frame { box-shadow: 0 0 0 4px rgb(var(--brand-rgb, 10 108 198) / .6), 0 14px 34px rgba(0, 0, 0, .35); }
.about-card-caption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.about-card-zoom { position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--brand, #0A6CC6); font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.18); opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .25s ease; }
.about-card:hover .about-card-zoom, .about-card:focus-visible .about-card-zoom { opacity: 1; transform: none; }
@media (hover: none) { .about-card-zoom { opacity: 1; transform: none; } }
.about-card-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 999px; background: var(--brand, #0A6CC6); color: #fff; font-size: 22px; box-shadow: 0 0 0 9px rgb(var(--brand-rgb, 10 108 198) / .28), 0 10px 24px rgba(0,0,0,.3); transition: transform .3s ease; }
.about-card-play .svg-icon { position: relative; left: 3px; }
.about-card:hover .about-card-play, .about-card:focus-visible .about-card-play { transform: scale(1.08); }
@media (prefers-reduced-motion: no-preference) { .about-card-play::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255,255,255,.7); animation: about-pulse 2.2s ease-out infinite; } }
@keyframes about-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.about-card-badge { position: absolute; z-index: 2; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 14, 20, .62); color: #fff; font-size: 12px; font-weight: 700; }

/* arrows: small white round buttons with a brand-blue chevron, just outside the card */
.about-car-nav { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 999px; border: 0; background: #fff; color: var(--brand, #0A6CC6); cursor: pointer; box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.25); transition: background .2s ease, color .2s ease, transform .15s ease; z-index: 3; }
.about-car-nav:hover { background: var(--brand, #0A6CC6); color: #fff; }
.about-car-nav:active { transform: scale(.9); }
.about-car-nav:focus-visible { outline: 3px solid rgba(255,255,255,.85); outline-offset: 2px; }
.about-car-nav .svg-icon { width: 16px; height: 16px; fill: none; }
.about-car-nav[hidden] { display: none; }
@media (min-width: 768px) { .about-car-nav { width: 34px; height: 34px; } .about-car-nav .svg-icon { width: 17px; height: 17px; } }

/* ---------- full-screen viewer ---------- */
.about-lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 72px 88px 36px; background: rgba(7, 10, 15, .96); animation: about-lb-in .2s ease; }
.about-lb[hidden] { display: none; }
@keyframes about-lb-in { from { opacity: 0 } to { opacity: 1 } }
.about-lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; direction: ltr; }
.about-lb-count { color: #cbd5e1; font-size: 14px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.about-lb-tools { display: flex; gap: 8px; }
.about-lb-btn, .about-lb-nav { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.about-lb-btn:hover, .about-lb-nav:hover { background: rgba(255,255,255,.26); }
.about-lb-btn:focus-visible, .about-lb-nav:focus-visible { outline: 3px solid rgba(255,255,255,.75); outline-offset: 2px; }
.about-lb-btn .svg-icon { width: 17px; height: 17px; }
.about-lb-nav { position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; z-index: 2; }
.about-lb-nav .svg-icon { width: 20px; height: 20px; }
.about-lb-nav:active { transform: scale(.92); }
.about-lb-left { left: 18px; } .about-lb-right { right: 18px; }
.about-lb-figure { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.about-lb-stage { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.about-lb-stage.is-switching > * { animation: about-lb-swap .28s ease; }
@keyframes about-lb-swap { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.about-lb-img, .about-lb-video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.55); background: #000; user-select: none; -webkit-user-drag: none; }
.about-lb-img { background: #fff; }
.about-lb-video { width: min(1280px, 100%); aspect-ratio: 16 / 9; }
.about-lb-embed { width: min(1200px, 100%); aspect-ratio: 16 / 9; max-height: 100%; border: 0; border-radius: 10px; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.about-lb-caption { flex: 0 0 auto; max-width: 900px; color: #e2e8f0; font-size: 15px; line-height: 1.8; text-align: center; }
.about-lb-caption:empty { display: none; }
body.about-lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .about-lb { padding: 64px 8px 84px; }
  .about-lb-nav { top: auto; bottom: 18px; margin-top: 0; width: 46px; height: 46px; }
  .about-lb-left { left: calc(50% - 60px); } .about-lb-right { right: calc(50% - 60px); }
}

/* ---------- closing statement ---------- */
.about-mission { padding: 56px 0 72px; }
.about-mission-card { position: relative; max-width: 920px; margin: 0 auto; padding: 44px 24px 36px; border-radius: 22px; text-align: center; background: #fff; border: 1px solid #e7edf4; box-shadow: 0 18px 48px rgba(15, 23, 42, .08); overflow: hidden; }
.about-mission-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--brand, #0A6CC6), var(--brand-light, #4F8FD4)); }
@media (min-width: 768px) { .about-mission-card { padding: 52px 56px 44px; } }
.about-mission-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .about-card-frame, .about-card-media, .about-card-zoom, .about-card-play, .about-stat { transition: none; }
  .about-car.is-ready .about-car-track.is-animating { transition-duration: 1ms; }
  .about-lb, .about-lb-stage.is-switching > * { animation: none; }
}

/* admin ▸ گالری درباره ما — thumbnails in the list */
.am-thumb { position: relative; display: inline-block; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: #e5e7eb; border: 1px solid #e5e7eb; vertical-align: middle; }
.am-thumb img, .am-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #6b7280; font-size: 22px; }
.am-thumb-play { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 999px; background: rgba(10,108,198,.9); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.am-kind-fields[hidden] { display: none; }
.about-car-slide.is-clone[hidden] { display: none; }

/* ============================================================
   v45.17.2 — About page proportions (owner's mockup)
   · gallery band 60 % taller: card, spacing and arrows scaled ×1.6 (one item per view, same colours)
   · closing card at half its former size, now holding the management line, the statistics and the CTAs
   · intro = copy only
   ============================================================ */
.about-intro { padding-bottom: 48px; }
@media (min-width: 1024px) { .about-intro { padding: 72px 0 56px; } }

.about-gallery { padding: 58px 0 46px; }
@media (min-width: 1024px) { .about-gallery { padding: 58px 0 48px; } }
.about-car { gap: 22px; }
.about-car-viewport { flex-basis: 512px; width: 512px; max-width: calc(100% - 120px); border-radius: 18px; }
@media (min-width: 640px)  { .about-car-viewport { flex-basis: 512px; width: 512px; } }
@media (min-width: 1024px) { .about-car-viewport { flex-basis: 512px; width: 512px; } }
.about-card, .about-card-frame { border-radius: 18px; }
.about-card-caption { font-size: 17px; left: 20px; right: 20px; bottom: 18px; }
.about-car-nav { width: 40px; height: 40px; }
.about-car-nav .svg-icon { width: 20px; height: 20px; }
@media (min-width: 768px) { .about-car-nav { width: 46px; height: 46px; } .about-car-nav .svg-icon { width: 22px; height: 22px; } }
@media (max-width: 640px) {
  .about-gallery { padding: 36px 0 30px; }
  .about-car { gap: 10px; }
  .about-car-viewport { max-width: calc(100% - 100px); }
  .about-car-nav { width: 36px; height: 36px; }
}

.about-mission { padding: 36px 0 48px; }
.about-mission-card { max-width: 460px; padding: 26px 16px 20px; border-radius: 14px; box-shadow: 0 10px 28px rgba(15, 23, 42, .08); }
@media (min-width: 768px) { .about-mission-card { padding: 28px 28px 22px; } }
.about-mission-card::before { height: 3px; }
.about-mission-facts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; text-align: start; }
.about-mission-card .about-management { gap: 9px; padding: 9px 12px; border-radius: 9px; border-inline-start-width: 3px; }
.about-mission-card .about-management-icon { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; box-shadow: 0 3px 8px rgb(var(--brand-rgb, 10 108 198) / .3); }
.about-mission-card .about-management-text { font-size: 12.5px; line-height: 1.6; }
.about-mission-card .about-stats { gap: 8px; }
.about-mission-card .about-stat { padding: 11px 4px; border-radius: 9px; gap: 2px; box-shadow: 0 5px 14px rgba(15, 23, 42, .06); }
.about-mission-card .about-stat:hover { transform: translateY(-2px); }
.about-mission-card .about-stat-value { font-size: 18px; }
.about-mission-card .about-stat-label { font-size: 10.5px; }
.about-mission-card .about-mission-actions { gap: 8px; }
.about-mission-card .about-mission-actions .btn { padding: 6px 13px; font-size: 12px; min-height: 0; border-radius: 5px; }
/* v45.18: optional paragraph 2 inside the compact card (admin ▸ صفحه درباره ما ▸ نمایش پاراگراف ۲) */
.about-mission-card .about-mission-p2 { margin: 0 auto 16px; color: var(--steel, #313131); font-size: 13.5px; line-height: 1.95; }
html[dir='ltr'] .about-mission-card .about-mission-p2 { line-height: 1.7; }

/* ============================================================
   v45.20 — gallery carousel (home + About): large frame, arrows ON the picture (owner's reference)
   · the card takes the full content width (up to 1200px), 3:2, but never taller than the screen
   · ‹ › are dark translucent circles overlaid on the left / right edge of the picture
   · band padding reduced so the frame dominates the section
   ============================================================ */
.about-gallery { padding: 36px 0; }
@media (min-width: 1024px) { .about-gallery { padding: 40px 0; } }
.about-car { display: block; position: relative; gap: 0;
  width: min(100%, 1200px, calc((100vh - 150px) * 1.5)); margin: 0 auto; }
.about-car-viewport { width: 100%; max-width: none; flex: none; border-radius: 12px; }
@media (min-width: 640px)  { .about-car-viewport { width: 100%; flex-basis: auto; } }
@media (min-width: 1024px) { .about-car-viewport { width: 100%; flex-basis: auto; } }
.about-card, .about-card-frame { border-radius: 12px; }
.about-card-frame { aspect-ratio: 3 / 2; border-width: 4px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.about-card-caption { font-size: 18px; left: 72px; right: 72px; bottom: 20px; }
/* arrows over the picture, vertically centred */
.about-car-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; background: rgba(10, 12, 16, .6); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); backdrop-filter: blur(2px); }
.about-car-left  { left: 18px; }
.about-car-right { right: 18px; }
.about-car-nav:hover { background: rgba(10, 12, 16, .85); color: #fff; }
.about-car-nav:active { transform: translateY(-50%) scale(.92); }
.about-car-nav .svg-icon { width: 20px; height: 20px; }
@media (min-width: 768px) { .about-car-nav { width: 48px; height: 48px; } .about-car-nav .svg-icon { width: 22px; height: 22px; } }
@media (max-width: 640px) {
  .about-gallery { padding: 24px 0; }
  .about-car { width: 100%; }
  .about-car-viewport { max-width: none; }
  .about-card-frame { border-width: 3px; }
  .about-car-nav { width: 36px; height: 36px; }
  .about-car-left { left: 10px; } .about-car-right { right: 10px; }
  .about-card-caption { font-size: 15px; left: 54px; right: 54px; bottom: 14px; }
}
/* v45.21: no white frame line around the gallery picture (home + About) — the photo runs edge to edge */
.about-card-frame, .about-card.is-video .about-card-frame { border: 0; }
@media (max-width: 640px) { .about-card-frame { border: 0; } }

/* ============================================================
   v45.22 — gallery (home + About): square corners, «1 / 6» counter inside the picture
   ============================================================ */
.about-car-viewport, .about-card, .about-card-frame { border-radius: 0; }
.about-card:focus-visible .about-card-frame { border-radius: 0; }
/* counter: plain white numbers over the bottom-centre of the photo, no background */
.about-car-counter { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%);
  direction: ltr; unicode-bidi: isolate; white-space: nowrap; pointer-events: none;
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 10px rgba(0, 0, 0, .45); }
.about-car-counter[hidden] { display: none; }
@media (min-width: 768px) { .about-car-counter { font-size: 18px; bottom: 22px; } }
@media (max-width: 640px) { .about-car-counter { font-size: 14px; bottom: 12px; } }
/* bottom padding of the gallery band */
.about-gallery { padding-bottom: 36px; }
@media (min-width: 1024px) { .about-gallery { padding-bottom: 40px; } }
@media (max-width: 640px) { .about-gallery { padding-bottom: 24px; } }
/* caption sits just above the counter so the two never overlap (also with long, two-line captions) */
.about-car:has(.about-car-counter:not([hidden])) .about-card-caption { bottom: 50px; }
@media (max-width: 640px) { .about-car:has(.about-car-counter:not([hidden])) .about-card-caption { bottom: 34px; } }