/* =========================================================
   PRODUCT.CSS
   Product page — built to the Figma frame "Product"
   (node 104:153, 1140 wide).

   Same page-width model as Contact / Technical Services /
   Category: every <section> runs the FULL viewport width and
   carries its band colour; the inner wrapper is capped at
   --page-max-width (1140) and centred; the numbered rail is an
   absolute overlay that lands on right:0 of the viewport
   because its section is full-width.

   Geometry: the frame hides most of this page's text layers,
   so the numbers below come from pixel measurement of the
   approved zoom crops, cross-checked against the node metadata
   wherever a layer IS exposed (the English title, the Hebrew
   lede, "לפרטים טכניים", the spec dividers at x381/x679, the
   spec text blocks and the related-product cards). Anything
   marked ESTIMATE could not be measured from either source.

   NOTE on vertical origin: the frame lists the hero photo at
   y47, but the approved crop shows the header occupying 0–79
   and covering the photo's first 32px — so the visible hero
   band is 79–562. All Y values below are in that crop space.
   ========================================================= */

.site-header {
  box-shadow: 0px 4px 4px 0px #D9D9D9;
}

.site-navigation__link.is-active::before {
  right: 14.15px;
  width: 32.16px;
  bottom: -5px;
  background-color: #005E8E;
}

.site-navigation__link.is-active::after {
  right: 0;
  width: 14.15px;
  bottom: -5px;
  background-color: #CC2F3A;
}

/* ---------------------------------------------------------
   SHARED: capped, centred inner wrappers.
   1140 total = 1053 content zone + 87 reserved for the rail.
   --------------------------------------------------------- */
.pr-hero__inner,
.pr-features__inner,
.pr-article__inner,
.pr-specs__inner,
.pr-related__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   SHARED: the two-tone rule, blue left / red right, 67.6px,
   1.5px tall — measured on both the hero crop (y133, right
   edge 984) and the article crop (y1278, right edge 1019).
   --------------------------------------------------------- */
.pr-rule {
  display: flex;
  width: 67.6px;
  height: 1.5px;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* DOM order red then blue; in this RTL row the first child
   lands physically RIGHT, which is where both crops put red. */
.pr-rule__segment--red  { flex: 30; background-color: #CC2F3A; }
.pr-rule__segment--blue { flex: 70; background-color: #005E8E; }

/* =========================================================
   HERO — visible band y79–562 (483 tall), rail "01 / INTRO".
   The product photo spans the whole band; the text column sits
   on its light right-hand side, right edge on x976.
   ========================================================= */
.pr-hero {
  position: relative;
  height: 483px;
  /* Safety net only. The hero artwork now carries its own wall out to
     the viewport edge, so this shows solely if the image fails. */
  background-color: #E3DCD8;
  overflow: hidden;
}

/* ---------------------------------------------------------
   HERO TONE FILLS.
   Two panes of flat wall colour lying UNDER the photo, each a
   vertical gradient sampled from that photo's own outermost wall
   column (see css/hero-tones.css). Because they sit behind an
   opaque photo they are invisible wherever the photo reaches, and
   show only in whatever strip is left over on a wide screen. The
   photo itself is never tinted, dimmed or blurred -- the colour
   only ever CONTINUES it outwards.
   The 50% split is always hidden: the photo is at least 1053px
   wide and always covers the band's centre.
   --pr-tone-l / --pr-tone-r default to the neutral below and are
   overridden per product, and per carousel slide, by hero-tones.css.
   --------------------------------------------------------- */
.pr-hero {
  --pr-tone-l: linear-gradient(to bottom, #E3DCD8, #E3DCD8);
  --pr-tone-r: linear-gradient(to bottom, #E3DCD8, #E3DCD8);
  /* Figma gives this text Fill 000000 at 100%, so black is the spec --
     it was grey only because it inherited --color-text-muted. Black also
     largely cures the vanishing act: on 322's wall (111) grey scored
     1.05:1 against the backdrop, black scores 4.2:1.
     hero-tones.css can still override to white on a wall dark enough
     that even black loses, decided by WCAG contrast rather than by eye. */
  --pr-eyebrow: #000000;
}
.pr-hero__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
/* physical sides on purpose: this is artwork geometry, not text flow,
   so it must NOT flip with the RTL direction. */
.pr-hero__fill--left  { left: 0;   right: 50%; background-image: var(--pr-tone-l); }
.pr-hero__fill--right { left: 50%; right: 0;   background-image: var(--pr-tone-r); }

.pr-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* The photo is drawn at exactly the size the comp gives its layer —
   1053 x 515, right edge on the frame's x1053 where the rail starts —
   and sits 32px above the band, which clips it. That is precisely how
   Figma composes it: the layer starts on y47 and the 79px header
   covers its first 32px. Cropping therefore happens the same way for
   every product regardless of its source photo's proportions, with the
   product framed as the designer framed it.
   `object-position: center` is Figma's own default for this fill. */
.pr-hero__slide {
  position: absolute;
  top: -32px;
  /* Scale is set by the HEIGHT alone, so the product renders at exactly
     the same size on every viewport and in every product page, whatever
     each file's width. Width follows the file's own aspect ratio and the
     surplus wall runs off both sides, clipped by .pr-hero's overflow. */
  height: 515px;
  width: auto;
  max-width: none;
  /* The artwork's designed zone spans -570..+483 around the page centre
     (the 1140 frame's x0..x1053, where the rail starts), so its midpoint
     sits 43.5px LEFT of centre. With the wall extended symmetrically in
     Photoshop the file's midpoint IS that midpoint, so this one offset
     lands the product exactly where the comp puts it -- for any amount
     of added wall, which is why no per-image tuning is needed. */
  left: 50%;
  transform: translateX(calc(-50% - 43.5px));
  /* A 40px dissolve on the two outer edges ONLY, so the photo meets the
     tone fill without a hairline. The tone is already the photo's own
     edge colour, so this softens a join rather than covering anything,
     and it sits ~800px clear of the product. Where the file is wide
     enough to run past the viewport, this is off-screen entirely. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  opacity: 0;
  transition: opacity 600ms ease;
}

.pr-hero__slide.is-active { opacity: 1; }

/* The surround is the product's own hero photo, scaled to cover the whole
   band and blurred out of recognition. That is what makes the tone match
   per product with nothing to configure: the colour beside the photo IS
   the photo's colour. --pr-hero-src is set on the element per page and
   swapped by the carousel. */
/* Carousel dots — the crop puts them under the product, left
   of centre, over the photo. ESTIMATE: read off the crop. */
.pr-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-265px);
  display: flex;
  gap: 7px;
  z-index: 2;
}

.pr-hero__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #B6AEC4;
  cursor: pointer;
}

.pr-hero__dot.is-active { background-color: #6A4FA3; }

/* ---------------------------------------------------------
   ONE PHOTO, NO DOT

   Only MF 881-25G has a second hero image. On the other 28
   products the carousel renders a single dot, which is a
   control that cannot do anything -- it just sits on the wall
   beside the product looking like a smudge.

   This is keyed on the MARKUP rather than on a per-page class,
   so nothing has to be added to 28 HTML files and nothing has
   to be remembered later: the day a product gains a second
   photo, a second dot appears, :only-child stops matching, and
   its dots come back on their own. Equally, if 881-25G ever
   drops back to one image its dot disappears without anyone
   touching CSS.

   Two rules, deliberately not one comma-separated list. If a
   browser does not understand :has(), an invalid selector
   anywhere in a list drops the WHOLE rule -- so the plain
   :only-child rule is kept on its own line, where it hides the
   dot itself regardless. The :has() rule then also collapses
   the empty flex container, which is the tidier result where
   it is supported (it is, in every current browser, and the
   site already relies on :has() in home-hover.css).
   --------------------------------------------------------- */
.pr-hero__dot:only-child { display: none; }

.pr-hero__dots:has(.pr-hero__dot:only-child) { display: none; }

.pr-hero__inner {
  position: relative;
  height: 100%;
  /* 164 = 1140 - 976: puts the column's right edge on x976. */
  padding-inline-start: 164px;
}

.pr-hero__content {
  max-width: 320px;
  margin-inline-end: auto;
  padding-block-start: 39px;   /* eyebrow glyphs land on y118 */
}

.pr-hero__eyebrow {
  margin: 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-regular);
  /* 18px, doubled from 9. The tracking here is already in em,
     so it scales with the type on its own and needs no second
     number -- 0.18em was 1.62px and is now 3.24px. Only the
     line box has to be doubled by hand, because it was set in
     px. */
  font-size: 18px;
  letter-spacing: 0.18em;
  line-height: 24px;
  color: var(--pr-eyebrow);
}

/* The rule runs the full width of the word above it.

   88px is not a guess: with the label at 18px in Blinker the
   word measures 87.9px of ink, and the rule and the label
   already share a right edge (both land on the same x, verified
   in the browser), so a single width is all that is needed to
   line the two ends up.

   It was 67.6px -- the shared .pr-rule measure used under the
   article and related-products headings too, which is why the
   width is set HERE and not on .pr-rule: those two sit under
   Hebrew headings of their own length and must keep the 67.6.

   87.9 includes the 3.24px of tracking that follows the final
   E, so the rule overshoots the last letter by about 3px and
   starts exactly under the S. Flush at the start is the edge
   the eye checks.

   If the label's size, face or tracking changes, this number is
   derived from all three and has to be measured again. */
.pr-hero__rule {
  margin-block-start: 3px;   /* rule on y133 */
  width: 88px;               /* was 67.6 via .pr-rule */
}

/* 62px, confirmed against the real Blinker: "MF881-25G" measures
   284.0px of ink in the approved crop (x692.5–976.5) and renders
   284.8px at 62px in the browser — 64px came out 10px too wide.
   Figma specifies Blinker ExtraLight (200); the lightest weight in
   the project's fonts/ folder is Light (300), so the browser
   resolves 200 to that file.
   The 56px line-height (tighter than the type size) is what puts
   the digits' top on y190 while leaving the English title free to
   start on its own measured y236. */
.pr-hero__code {
  margin: 46px 0 0;
  /* Same 285px box as .pr-hero__title below, so the code's first glyph
     starts on the title's x691 for EVERY product, not just the ones
     whose ink happens to measure 285. Three codes are wider than the
     box (MF1602 MS is 338px) and overflow to the right; they stop on
     centre+459 and the rail starts on centre+483, so they never reach
     it at any viewport width. */
  max-width: 285px;
  white-space: nowrap;   /* the code is one line in the comp */
  font-family: var(--font-english);
  font-weight: 200;
  font-size: 62px;
  line-height: 56px;
  color: var(--color-text-strong);
  direction: ltr;
  text-align: left;    /* PHYSICAL: ltr, and flush with the title */
}

.pr-hero__title {
  margin: 0;
  /* 285 wide = x691–976. Both lines start on x691 in the comp, so
     this block is LEFT aligned (ragged right) while still sitting
     flush to the column's right edge. */
  max-width: 285px;
  font-family: var(--font-english);
  font-weight: 200;
  font-size: 26px;
  line-height: 34px;   /* measured: lines on y248 and y282 */
  color: var(--color-text-strong);
  direction: ltr;
  text-align: left;    /* PHYSICAL: this element is ltr */
}

.pr-hero__lede {
  margin: 19px 0 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  /* 15px / 23px, up from 13px / 18px. The colour here was never
     the problem -- #3C3C3C scores 10:1 -- but 13px is under the
     14px floor for running text and 18px of leading is a ratio
     of 1.38, tighter than the 1.5 minimum that keeps Hebrew
     lines from binding together. 23px puts it at 1.53. */
  font-size: 15px;
  line-height: 23px;
  color: #3C3C3C;
}

.pr-hero__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-block-start: 26px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-strong);
  text-decoration: none;
}

/* The chevron sits to the LEFT of the label (frame x869 against
   the label's right edge on x976) — so it is the last flex item
   in this RTL row, i.e. the first in DOM order is the label. */
.pr-hero__link-icon {
  flex: none;
  width: 11px;
  height: 7px;
}

/* =========================================================
   FEATURES — band y561–1144 (583 tall), #F0EDEB,
   rail "02 / DETAILS".
   The photo bleeds in from the right; a wash anchored to the
   band's centre fades it into the band colour.
   ========================================================= */
.pr-features {
  position: relative;
  /* The band is driven entirely by its own list: the rows keep the
     comp's 76px rhythm and the band closes a fixed 22px under the last
     line of text. 583 on a six-feature product like MF 881-25G, less
     on a four-feature one, more on MF 322's eleven — the gap is the
     constant, not the height. */
  background-color: #F0EDEB;
  overflow: hidden;
}

.pr-features__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pr-features__image {
  position: absolute;
  top: 0;
  /* Figma: the photo starts at x276 of the 1140 frame and runs
     to the content edge; anchored to the band centre so it keeps
     that position at any viewport and bleeds right. */
  left: calc(50% - 294px);
  right: 0;
  height: 100%;
  width: auto;
  min-width: calc(50% + 294px);
  object-fit: cover;
  object-position: center;
}

.pr-features__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(240, 237, 235, 0) calc(50% - 250px),
    rgba(240, 237, 235, 0.97) calc(50% + 10px),
    rgba(240, 237, 235, 0.97) 100%
  );
  pointer-events: none;
}

.pr-features__inner {
  position: relative;
  /* The list occupies x41–438 of the frame: 702 = 1140 - 438. */
  padding-inline-start: 702px;   /* 1140 - 438: rows end on x438 */
  padding-inline-end: 77px;      /* rows start on x77, where the hairline does */
}

/* --pr-features-air is added at BOTH ends. The band has no height
   of its own -- it is driven entirely by this list -- so padding
   here is what opens the whole section up, and the photo behind
   it (inset:0, absolute) simply grows with it. The 33px and the
   22px the last row closes on are untouched, so the rows keep
   their own rhythm exactly. */
.pr-features__list {
  margin: 0;
  padding: 0;
  list-style: none;
  --pr-features-air: 48px;
  padding-block-start: calc(33px + var(--pr-features-air));
  padding-block-end: var(--pr-features-air);
}

/* Each row: the hairline is the row's own top border, the number
   sits centred on it at the far left, and the text is centred in
   whatever height the row ends up being (measured: the text block
   is vertically centred in every one of the six slots). */
.pr-feature {
  position: relative;
  display: flex;
  align-items: center;
  /* 25px above and below the text, with a 76px floor, reproduces
     every measured slot to within 1px: 76 for the one-line rows,
     160 for the five-line row 01 (measured 160.9). */
  min-height: 76px;
  padding-block: 25px;
  border-block-start: 1px solid #BAB9B8;
}

/* The last row closes the band: 22px below its final line of text
   and nothing else. */
.pr-feature:last-child {
  min-height: 0;
  padding-block-end: 22px;
}

.pr-feature__number {
  position: absolute;
  /* The crop puts the digits' top 2.4px BELOW the hairline and
     36px to its physical LEFT. PHYSICAL left/top on purpose: this
     element carries direction:ltr for the digits, which flips its
     own logical properties. */
  top: 0.4px;
  left: -36px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 13px;
  line-height: 13px;
  color: var(--color-text-muted);
  direction: ltr;
}

.pr-feature__text {
  margin: 0;
  /* 265px is the widest line measured in the crop; it reproduces
     the comp's own wrapping. In RTL a narrower block already sits
     at inline-start, i.e. flush to the row's right edge on x438. */
  max-width: 265px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  line-height: 22px;           /* measured on the five-line row */
  color: #3C3C3C;
}

/* The article and the spec row share one rail item: in the comp
   the 03 column runs unbroken from the top of the article all the
   way down to where 04 begins. The wrapper is the positioning
   context for that single overlay. */
.pr-technical {
  position: relative;
}

/* =========================================================
   ARTICLE — band y1144–1459 (315 tall), #F6F5F3,
   rail "03 / TECHNICAL" (on .pr-technical, see above).
   Photo 571x315 flush to the physical LEFT, text to its right.
   ========================================================= */
.pr-article {
  position: relative;
  height: 315px;
  background-color: #F6F5F3;
  overflow: hidden;
}

.pr-article__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Figma: photo x0–571 of the frame; bleeds to the viewport's
     left edge, right edge pinned to the frame's x571. */
  right: calc(50% - 1px);
  overflow: hidden;
}

.pr-article__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pr-article__inner {
  position: relative;
  height: 100%;
  /* 121 = 1140 - 1019: the heading/rule right edge is x1019. */
  padding-inline-start: 121px;
}

.pr-article__content {
  /* 409 wide = x610–1019. The heading, rule and body are capped at
     300 and therefore sit flush right on x1019; the download link
     is pushed to the physical left, where the crop puts it
     (x610–711), outside the text column. */
  max-width: 409px;
  margin-inline-end: auto;
  padding-block-start: 26px;
}

/* 30px, derived from the crop: two lines 39px apart, glyph runs
   27.6px tall including descenders. */
.pr-article__heading {
  margin: 0;
  max-width: 300px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 30px;
  line-height: 39px;
  color: var(--color-text-strong);
}

.pr-article__rule { margin-block-start: 29px; }   /* rule on y1278 */

.pr-article__body {
  margin: 23px 0 0;
  max-width: 300px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 18px;
  color: #3C3C3C;
}

.pr-article__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  /* auto on the inline-START (physical right in RTL) pushes the
     link to the physical LEFT of the 409px block. */
  margin-inline-start: auto;
  margin-block-start: 38px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-strong);
  text-decoration: none;
}

.pr-article__link-icon {
  flex: none;
  width: 11px;
  height: 7px;
}

/* =========================================================
   SPECS — band #F2F1F1, three columns split by the two 129px
   dividers the frame puts on x381 and x679.
   ========================================================= */
/* Deliberately NOT position:relative — the 03 rail overlay must
   resolve against .pr-technical so it spans the article and this
   band as one unbroken column. */
.pr-specs {
  background-color: #F2F1F1;
}

.pr-specs__inner {
  position: relative;
  display: flex;
  padding-block: 33px 54px;
  /* inline-start is the physical RIGHT here: reserve the rail. */
  padding-inline-start: 87px;
}

/* Frame column edges are the two 129px dividers on x381 and x679:
   679–1053 / 381–679 / 0–381. The text in each column is right
   aligned on x849 / x615 / x328, which is what the inline-start
   padding below sets.

   THE STANDARDS COLUMN'S SECOND INSET
   Each column was given padding on its inline-start side only --
   the side its own divider sits on. That leaves the OTHER side
   of every divider unprotected, and it shows on the standards
   column, which is the one with a divider to its physical left
   and nothing holding the text off it.

   Measured on MF 899 at a 1519px viewport, divider to ink:

                                   right side   left side
     standards / colour divider        9px        63px
     colour / packaging divider       56px        53px

   The second divider is even; the first is not, and 9px is why
   "SCAQMD 1168 & ASTM C" -- the one line long enough to fill the
   column's full 171px text box -- sits on the line.

   46px of the standards column's 204px inset is therefore moved
   to its inline-end, which brings its ink clearance to 55px and
   makes the first divider read like the second. It is a move,
   not an addition: box-sizing is border-box and the width here
   is explicit, so 158 + 46 leaves the same 171px text box that
   204 alone did. The copy wraps exactly as it did, the column is
   still 375px, and the colour and packaging columns do not shift
   by a pixel -- verified in the browser, both still measuring
   [571, 868] and [190, 571] with the row at 1053 and no
   overflow.

   Only the standards column is changed. The colour column has
   the same unprotected inline-end, but its copy is short enough
   to clear its divider by 56px on its own; left alone
   deliberately, not overlooked. */
.pr-specs__col {
  position: relative;
  flex: none;
}

.pr-specs__col--standards {
  width: 375px;
  padding-inline-start: 158px;   /* was 204 */
  padding-inline-end: 46px;      /* the 46 that came out of it */
}
.pr-specs__col--colour    { width: 297px; padding-inline-start: 63px; }
.pr-specs__col--packaging { width: 381px; padding-inline-start: 53px; }

/* The frame gives the colour column a wider text box (212) than
   the other two (175) — that is what keeps its copy on two lines. */
.pr-specs__col--colour .pr-specs__text { max-width: 212px; }

/* The dividers are 129px tall and start on the label's own row —
   they are not full-height column borders. */
.pr-specs__col--colour::before,
.pr-specs__col--packaging::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 129px;
  background-color: #C9C7C5;
}

.pr-specs__label {
  margin: 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 20px;
  line-height: 27px;
  color: #656565;
}

.pr-specs__text {
  margin: 22px 0 0;            /* the frame leaves a 16px blank line */
  /* 175px is the frame's own text-box width; it is what wraps
     "EOTA ETAG002 (TÜV Rheinland)" onto the two lines the comp
     shows. */
  max-width: 175px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: 19px;
  color: #3C3C3C;
}

/* =========================================================
   RELATED — "מוצרים משלימים", rail "04".
   Cards are 325 wide: photo 158 + panel 119 = 277 tall, 44px
   apart, running off the physical left edge as a carousel.
   ========================================================= */
.pr-related {
  position: relative;
  background-color: #F6F5F3;
  overflow: hidden;
}

.pr-related__inner {
  position: relative;
  padding-block: 45px 56px;
  padding-inline-start: 121px;
  /* physical LEFT: "לכל המוצרים" starts on x85 in the frame. The
     card track overflows this edge on purpose — it is a carousel. */
  padding-inline-end: 85px;
}

.pr-related__head {
  /* Plain `row`: in this RTL page the FIRST DOM child lands on the
     physical right, which is where the heading belongs. */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* The rule sits UNDER the heading here (unlike the article block),
   right edge flush with the type. */
.pr-related__rule { margin-block-start: 23px; }

.pr-related__heading {
  margin: 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 30px;
  line-height: 39px;
  color: var(--color-text-strong);
}

.pr-related__all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 6px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-strong);
  text-decoration: none;
}

.pr-related__all-icon {
  flex: none;
  width: 7px;
  height: 11px;
}

/* The viewport is the full-bleed strip the track slides inside;
   the section's own overflow:hidden clips it at the screen edge. */
.pr-related__viewport {
  margin-block-start: 98px;
}

.pr-related__track {
  display: flex;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Positive X is physically RIGHT, which is the direction the
     track travels to reveal the products further along the row. */
  transform: translateX(var(--pr-shift, 0px));
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Hovering the card at either end of the visible run scrolls the
   row that way on its own — no buttons in the comp, so none here. */
.pr-related-card { cursor: pointer; }

.pr-related-card {
  flex: none;
  width: 325px;
  background-color: #F2F1F1;
}

.pr-related-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pr-related-card__media { height: 158px; overflow: hidden; }

.pr-related-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same anchoring the category cards use: the frame pins every
     product photo to its box's left and bottom edges. */
  object-position: left bottom;
}

.pr-related-card__body {
  height: 119px;
  padding: 12px 12px 0;
}

.pr-related-card__name {
  margin: 0;
  max-width: none;
  font-family: var(--font-english);
  font-weight: 200;
  font-size: 32px;
  line-height: 35px;
  color: var(--color-text-strong);
  direction: ltr;
  text-align: right;
}

.pr-related-card__desc {
  margin: 13px 3px 0 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text-strong);
}

/* =========================================================
   RELATED — the carousel's one control.
   A chevron in the empty band between the rule and the card
   row. It points physically LEFT because that is the way the
   row travels to reveal the products further along it.
   ========================================================= */
.pr-related__nav {
  position: absolute;
  /* The band runs from the head's bottom (y109 inside .pr-related__inner)
     to the card row (y207). The 44px hit area is centred in it. */
  top: 136px;
  /* RTL: inset-inline-start is the physical RIGHT. 121px is the
     inner's own padding-inline-start, so the button's right edge
     lands on the same grid line as the heading and the first card.
     Only ONE inset is set — giving both would over-constrain it. */
  inset-inline-start: 121px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: opacity 220ms ease, transform 220ms ease;
}

.pr-related__nav-icon {
  flex: none;
  width: 13px;
  height: 26px;
}

.pr-related__nav:hover { transform: translateX(-4px); }   /* physical left */

/* The end of the row: nothing left to move to. */
.pr-related__nav[disabled] {
  opacity: 0.25;
  cursor: default;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pr-related__nav { transition: opacity 220ms ease; }
  .pr-related__nav:hover { transform: none; }
}