/* ============================================================
   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; }

/* ------------------------------------------------------------
   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: 'Vazirmatn', 'Poppins', sans-serif; }
body.font-poppins { font-family: '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: #0A6CC6; border-color: #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: #08549C; border-color: #08549C; color: #fff; }
.btn-outline { background: #fff; border-color: #0A6CC6; color: #0A6CC6; }
.btn-outline:hover { background: #0f3d73; border-color: #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: #0A6CC6; }
.nav-link.active { color: #0A6CC6; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: #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: #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 #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: #0A6CC6; color: #0f3d73; }
.pd-btn-outline:hover { background: #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; }

#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: #0A6CC6; }
.pd-tab.is-active { color: #0A6CC6; border-bottom-color: #0A6CC6; }
.pd-tab.is-active .svg-icon { color: #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: #0f3d73; }
.rich-content h3 { font-size: 1.25rem; font-weight: 800; margin: 1em 0 .4em; color: #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: #0A6CC6; text-decoration: underline; text-underline-offset: 3px; }
.rich-content a:hover { color: #08549C; }
.rich-content blockquote { margin: 1em 0; padding: .7em 1.2em; border-inline-start: 4px solid #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: #0A6CC6; }
.cursor-not-allowed { cursor: not-allowed; }

/* ---------- v35: product-detail image gallery (1 large + 3 small, click -> lightbox) ---------- */
.pd-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.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; aspect-ratio: 1 / 1; }
.pd-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pd-gallery-item:hover img { transform: scale(1.04); }
.pd-gallery-item:focus-visible { outline: 3px solid #0A6CC6; outline-offset: 2px; }
.pd-gallery-item.is-main { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
.pd-gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
.pd-gallery-item:nth-child(3) { grid-column: 1; grid-row: 2; aspect-ratio: 2 / 1; }
.pd-gallery-item:nth-child(4) { grid-column: 2; grid-row: 2; aspect-ratio: auto; }
.pd-gallery-3 .pd-gallery-item:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
.pd-gallery-2 .pd-gallery-item.is-main { grid-row: 1 / span 2; aspect-ratio: auto; }
.pd-gallery-2 .pd-gallery-item:nth-child(2) { grid-row: 1 / span 2; }
.pd-gallery-1 { grid-template-columns: 1fr; grid-template-rows: auto; }
.pd-gallery-1 .pd-gallery-item.is-main { aspect-ratio: auto; }
.pd-gallery-1 .pd-gallery-item.is-main img { height: auto; }
.pd-gallery-item.is-hidden { display: none; }
.pd-gallery-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,61,115,.55); color: #fff; font-weight: 800; font-size: 1.6rem; pointer-events: none; }
@media (max-width: 640px) { .pd-gallery { gap: 6px; } .pd-gallery-item { border-radius: 8px; } }

/* 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); } }