/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.16.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ===== Almoni DL AAA @font-face (review 0908 R2) =====
   The whole Kit types with "Almoni DL AAA", but no loaded stylesheet ever
   declared the face: the Elementor custom-font entry (post 4446) is named
   plain "Almoni" — a family nothing references — so every page fell back to
   Arial, on local and on dev.atarimtr.co.il alike. The face ships here in
   the theme (fonts/) so any deploy carries it, with the site's two weights
   only. The uploads keep Light/Black files too — deliberately not
   registered, so a stray 300/900 can never render. */
@font-face {
  font-family: "Almoni DL AAA";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/almoni-dl-aaa-regular.woff") format("woff");
}

@font-face {
  font-family: "Almoni DL AAA";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/almoni-dl-aaa-bold.woff") format("woff");
}

/* ===== Global link color =====
   The "red" links the client flagged are hello-elementor's own reset:
   `reset.css` → `a{background-color:transparent;color:#c36;text-decoration:none}`
   (#c36 = #CC3366; confirmed on /candida/ with CDP getMatchedStylesForNode).
   Same-specificity override — the child stylesheet loads after the parent
   reset, and every designed component (menu, footer, cards) sets its own
   color and outranks this. Note: the same reset also paints bare
   `button` / `[type=submit]` #c36; left alone for now — no design uses one. */
a {
  color: var(--primary-green, #0A5950);
}

/* Same reset, same crimson: `[type=button],[type=submit],button` get
   `border:1px solid #c36; color:#c36` and a #c36 hover fill. Every designed
   button sets its own colours and outranks this, so it only shows on a bare
   button — where the crimson reads as a bug. Token it. */
button,
[type="button"],
[type="submit"] {
  border-color: var(--primary-green, #0A5950);
  color: var(--primary-green, #0A5950);
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
  background-color: var(--primary-green, #0A5950);
  color: #FFFFFF;
}

/* ===== Almoni ships two weights — cap <strong> inside bold text (A3) =====
   The browser default for <strong>/<b> is font-weight bolder, which from a
   700 parent resolves to 900 — and Almoni Black IS registered in the kit's
   @font-face, so the 900 actually renders. Inside headings and bold captions
   emphasis stays 700; from a 400 parent `bolder` resolves to 700 anyway, so
   this changes nothing for the regular+bold heading pattern. */
h1 strong, h1 b,
h2 strong, h2 b,
h3 strong, h3 b,
h4 strong, h4 b,
h5 strong, h5 b,
h6 strong, h6 b {
  font-weight: 700;
}

/* ===== Almoni ships two weights — kill the inherited 500s (review A3) =====
   Nothing in the page data asks for 500 (a DB sweep found only 400 and 700):
   these come from defaults we inherit — hello-elementor paints `.entry-title`
   500, and Elementor's V4 atomic heading/link base does the same. The browser
   then synthesises a weight the font does not have. Headings take 700, the
   rest 400. The menu title is handled with the mega-menu rules further down. */
h1.entry-title,
.page-header .entry-title,
.elementor .e-heading-base,
.elementor .e-heading-link-base {
  font-weight: 700;
}

.elementor .e-paragraph-base,
.elementor .e-paragraph-base a {
  font-weight: 400;
}

/* ===== Home page — review batch B4 / B9 / B10 / B11 =====
   The sections are generated, so each carries an `atr-` class added with
   tools/page-generator/set-element-class.php and is styled from here. */

/* B4 (slides 7-8): "בואו לעשות את השינוי" — the review's "raise the text".
   The type was already the design's (Figma 1:247 — 90/0.9/-2.7 over 35/1.2);
   what was wrong is the copy column. The design gives it 818px of text after
   the 170px page gutter, and 178px of air above and below. The page shipped it
   narrower with 249px top and bottom, so the headline broke to five lines and
   the whole block sat too low against the photo. The four line breaks are the
   design's own and now live in the widget text; the column is 888 rather than
   the design's 818 because the web Almoni sets the longest line at 844px where
   Figma fits it in 793 — at 818 that one line wrapped and the count went back
   to five.
   Everything below the design width scales with the viewport instead of
   stepping, so the column keeps its share of the band (the photo is not
   squeezed) and the four lines hold at every desktop size. `min()` caps each
   value at the design number, so 1920 and wider render exactly the design. */
/* B5 (slide 7): the decorative swoosh. First pass drew it as a section
   background (images/hp-change-swoosh.svg) — wrong side, read as strays;
   second pass (2026-08-04) used the client's combined Photoshop asset
   (photo + swoosh baked together, attachment 4805). Review 0908 R6
   (2026-08-10) split them again, properly this time: the designer's own
   single-element exports (images/hp-R6/) — clean photo cut-out on the image
   widget (swapped by fix-change-section.php) and the two wave elements as
   section backgrounds, each pixel-matched against the section export
   Frame 384.png. See the R6 block further down for the wave geometry. */

.elementor .e-con.atr-henig-hp-change__text {
  flex: 0 0 auto;
  inline-size: 55.1%; /* 1058 of 1920 — 170 gutter + 888 text */
  max-inline-size: 1058px;
  padding-block: min(178px, 9.27vw);
  /* the page gutter is on the far side of the copy — inline-END in this RTL
     layout, which is the left edge the design measures 170px from */
  padding-inline: 0 min(170px, 8.85vw);
}
/* the generated rules are `.elementor-28 .elementor-element.elementor-element-x
   .elementor-heading-title` (0,3,0), so ours carry `.elementor .e-con` to win
   without !important */
.elementor .e-con.atr-henig-hp-change .elementor-heading-title {
  font-size: clamp(40px, 4.69vw, 90px);
  line-height: 0.9;
  /* proportional like the Figma property — see the R5 note */
  letter-spacing: -0.03em;
}

/* review 0908 R6 second pass: Figma node 1:254 is 35px at 1.2 — the earlier
   28px here was mis-derived from the 42px line pitch (42/1.5 instead of
   42/1.2) */
.elementor .e-con.atr-henig-hp-change p {
  font-size: clamp(15px, 1.823vw, 35px);
  line-height: 1.2;
}

/* B9 (slide 16): the lavender band carried no copy at all */
.elementor .e-con.atr-henig-hp-quote {
  position: relative;
}

.elementor .atr-henig-hp-quote__text,
.elementor .atr-henig-hp-quote__text .elementor-heading-title {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  /* The Kit (.elementor-kit-5 h2) pins letter-spacing to a FIXED -3px, tuned
     for 45px desktop type. At the 26px mobile size that is -11.5% of the font
     and the words visibly collide (measured on the live band). Proportional
     instead, so the tracking follows the size at every breakpoint. */
  letter-spacing: -0.0667em; /* -3px at 45px */
  word-spacing: normal;
}

.atr-henig-hp-quote__text {
  position: absolute;
  inset-block-start: 60px;
  inset-inline-start: var(--space-page-x, 170px);
  z-index: 2;
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
}

/* ===== Homepage "מה אתם יודעים על הבעיות מהן אתם סובלים?" carousel =====
   Tagged atr-henig-hp-know by tools/page-generator/tag-know-section.php.
   The Kit (.elementor-kit-5 h2) pins letter-spacing to a FIXED -3px, tuned for
   45px desktop headings. These card titles are 22px, where -3px is -13.6% of
   the font and the letters visibly collide (client screenshot, "עצירות").
   Proportional instead, matching the quote band's fix above. */
.elementor .atr-henig-hp-know .elementor-widget-heading .elementor-heading-title {
  letter-spacing: -0.0667em; /* -3px at 45px, ~-1.47px at 22px */
  word-spacing: normal;
}

/* B10 (slide 17): the programme captions under the videos read as headings in
   green; the review asks for black. The section title's own line break is in
   the content. */
.elementor .e-con.atr-henig-hp-media h1,
.elementor .e-con.atr-henig-hp-media h1.elementor-heading-title {
  color: var(--primary-dark-green, #001F1C);
}

/* B11 (slide 20): 120px of white type sat across the woman's face — halved.
   Review 0908 R12 made it fluid (60 at 1920, scaling with the banner). */
.elementor .atr-henig-hp-articles .atr-henig-hp-articles__head .elementor-heading-title {
  font-size: clamp(35px, 3.125vw, 60px);
  line-height: 1.05;
}

@media (max-width: 1024px) {
  /* the row has stacked by here — the copy takes the full width again, or the
     62% cap above squeezes it into a 300px ribbon and pushes the section past
     the viewport */
  .elementor .e-con.atr-henig-hp-change__text {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-block: 64px;
    padding-inline: 32px;
  }

  /* the inner container carries its own 32px from Elementor — doubled up
     with the wrapper's, the copy ran 262px wide vs the design's 326 */
  .elementor .e-con.atr-henig-hp-change__text > .e-con {
    padding-inline: 0;
  }

  /* review 0908 R6 mobile (Figma frame 4:17460): 35px/1 headline (node
     4:17463), 16px/1.2 body (4:17464) — the 28/14 first pass undershot the
     tokens. The heading widget carries an 80px top padding from its desktop
     settings — with it, the copy started 168px down instead of the
     design's 87 (24 section + 64 text block). */
  .elementor .e-con.atr-henig-hp-change .elementor-widget-heading {
    padding-block-start: 0;
  }

  .elementor .e-con.atr-henig-hp-change .elementor-heading-title {
    font-size: 35px;
    line-height: 1;
  }

  .elementor .e-con.atr-henig-hp-change p {
    font-size: 16px;
  }

  /* 32px = the mobile page gutter the rest of the design uses. The box is
     absolutely positioned, so without an explicit end inset it shrink-wrapped
     to 137px and squeezed both lines; bounding it to the opposite gutter lets
     each line break where the copy's own <br> puts it. */
  .atr-henig-hp-quote__text {
    inset-block-start: 32px;
    inset-inline-start: 32px;
    inset-inline-end: 32px;
  }

  .elementor .atr-henig-hp-quote__text,
  .elementor .atr-henig-hp-quote__text .elementor-heading-title {
    font-size: 26px;
  }

  .elementor .atr-henig-hp-articles .atr-henig-hp-articles__head .elementor-heading-title {
    font-size: 34px;
  }
}

/* ===== Home hero slider (Figma 45:2755…45:2812 · review B13) =====
   Seven slides live in one html widget (compose-hero-slider.py) inside the
   hero band. They sit side by side on a track that slides RIGHT TO LEFT: the
   track itself is `direction: ltr` (so slide N sits at N × 100% and a negative
   translate brings it in from the right edge), while each slide keeps `rtl`
   for its own content. assets/js/hero-slider.js moves the track.

   The wrapper cancels the band's 170px gutter so a slide is exactly one
   viewport wide — the photo then reaches the edge without overflowing its
   slide, which would show through during the slide. The gutter comes back as
   padding on the text column. */
/* the height chain: the band has a fixed height, so every wrapper between it
   and the slider has to stretch, otherwise `block-size: 100%` on the slider
   resolves against an auto-height parent and collapses to the text height
   (measured: 279px at 1920 while the band was 490px) */
.elementor .e-con.atr-henig-hero,
.elementor .e-con.atr-henig-hero > .e-con {
  --align-items: stretch;
  align-items: stretch;
}

.elementor .e-con.atr-henig-hero > .e-con {
  block-size: 100%;
}

.elementor .atr-henig-hero-slider-wrap {
  block-size: 100%;
}

/* the boxed hero container caps its children at the content width; the widget
   breaks out so a slide is exactly one viewport wide. `50% - 50vw` does that
   without knowing the band's padding, which changes with the breakpoint — a
   fixed -170px overshot on narrower screens. */
.elementor .e-con > .elementor-widget.atr-henig-hero-slider-wrap,
.elementor .atr-henig-hero-slider-wrap {
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: calc(50% - 50vw);
}

/* the hero slider wrap is 100vw by design (full-bleed); with a classic
   scrollbar 100vw exceeds the visible width by the scrollbar width — clip
   that sliver so the home page never scrolls horizontally (same remedy as
   the cart/checkout page-header, verified there via CDP) */
body.home {
  overflow-x: clip;
}

/* the band has a fixed height; the slider fills it instead of growing past it,
   or the photo would spill into the next section and each viewport width would
   crop it differently */
.atr-henig-hero-slider {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  /* review 0908 R4: the design's band colour runs edge to edge (Figma 1:157
     samples #F4F8F8 across the full 1920) — before, only the boxed text area
     was tinted and the strip left of the photo stayed white */
  background-color: var(--primary-blue-01, #F4F8F8);
}

/* ===== FLAT band slides (review 0908 R4, decided 2026-08-09) =====
   Rebuilding the design's decorations in CSS never landed exactly, so the
   artwork now arrives pre-composed: one flat 1920x613 render per slide from
   the designer — photo, arcs and band colour in a single layer, with the copy
   area left empty. The image becomes the slide's full-bleed backdrop and the
   HTML copy sits on top, which keeps the text selectable, translatable and
   fluid while the artwork stays pixel-exact.

   The band height follows the artwork's aspect instead of a fixed 490px, so
   the whole composition scales with the viewport rather than cropping — this
   is also what the client asked for in the review (every section visible on
   one screen). The Elementor container's own height:490px is overridden on
   the manual class, never on its generated hash. */
.elementor .e-con.atr-henig-hero:has(.atr-henig-hero-slide--flat) {
  block-size: auto;
}

.elementor .e-con.atr-henig-hero:has(.atr-henig-hero-slide--flat) > .e-con,
.elementor .atr-henig-hero-slider-wrap:has(.atr-henig-hero-slide--flat) {
  block-size: auto;
}

/* Every band render is 1920x849, so the band carries that ratio exactly and no
   artwork is ever cropped. Slide 1's band arrived at 1920x613 with its photo
   cut straight through at the bottom row; reconciling the two sizes by cropping
   the 849s to 613 cost those six their bottom rows, which showed. Slide 1's
   band was therefore rebuilt to 849 from the designer's own assets — the 613
   art over the band colour, with the full masked photo (hero-slide-1.webp)
   composited at 1:1 to restore the curve below the cut. The overlay was
   verified to land on the art it replaces: RMSE 2.3 across the 613 rows they
   share, with the difference confined to the photo box. */
.atr-henig-hero-slider:has(.atr-henig-hero-slide--flat) {
  block-size: auto;
  aspect-ratio: 1920 / 849;
}

.atr-henig-hero-slide--flat {
  position: relative;
}

.atr-henig-hero-slide--flat .atr-henig-hero-slide__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  flex: none;
}

/* `contain`, not `cover`: the band and every render share the 1920/849 ratio
   so it fills exactly, and if a future render ever arrives at another size it
   letterboxes onto the band colour instead of silently cropping the artwork */
.atr-henig-hero-slide--flat .atr-henig-hero-slide__photo img {
  position: static;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
}

/* the copy column matches the design's empty area: 45% of the band measured
   from the inline start (the right, in RTL), with the page gutter inside it */
.atr-henig-hero-slide--flat .atr-henig-hero-slide__text {
  position: relative;
  z-index: 1;
  flex: 0 0 45%;
  padding-inline-start: 8.85vw; /* the design's 170px at 1920 */
}

/* The band is now aspect-locked, so the artwork scales with the viewport —
   the copy has to scale with it or the composition drifts (at 1280 a fixed
   35px eyebrow wrapped to two lines inside the shrunken band). Every size is
   the design's px at 1920 expressed in vw, with a floor so the text stays
   legible on a small laptop; there is no ceiling, because past 1920 the band
   keeps growing too. Applied to EVERY slide, not just the flat ones, so a
   slide still waiting for its flat artwork sets type identically.

   Two class levels (0,2,0): the kit's global `.elementor-kit-5 h1` is 0,1,1
   and outranks a bare class — measured with CDP getMatchedStylesForNode,
   which is why the B1-era 72px clamp never applied and the headline sat at
   80px at every width, breaking to 3-4 lines on laptops (review slides 4/6).
   The ≤1024 stacked layout overrides these at matching specificity. */
.atr-henig-hero-slide .atr-henig-hero-slide__eyebrow {
  margin-block-end: 0.42vw;
  font-size: max(19px, 1.82vw);
}

.atr-henig-hero-slide .atr-henig-hero-slide__head {
  font-size: max(38px, 3.75vw);
  letter-spacing: max(-3px, -0.156vw);
}

.atr-henig-hero-slide .atr-henig-hero-slide__body {
  margin-block-start: 1.25vw;
  font-size: max(15px, 1.09vw);
}

/* the slides (and dots) paint above the decorations */
.atr-henig-hero-slides {
  position: relative;
  z-index: 1;
}

.atr-henig-hero-slides {
  /* how fast a slide travels — the Customizer (הגדרות ATR → סליידר עמוד הבית)
     writes --atr-hero-speed on :root; this is the fallback when it is unset.
     The time each slide STAYS is the interval, also in the Customizer, with
     SLIDE_INTERVAL_MS in compose-hero-slider.py as its code default. */
  display: flex;
  direction: ltr;
  block-size: 100%;
  transition: transform var(--atr-hero-speed, 600ms) ease;
  will-change: transform;
}

.atr-henig-hero-slide {
  display: flex;
  flex: 0 0 100%;
  direction: rtl;
  align-items: stretch;
  gap: 40px;
  min-inline-size: 0;
  block-size: 100%;
}

.atr-henig-hero-slide__text {
  display: flex;
  flex: 1 1 46%;
  flex-direction: column;
  justify-content: center;
  min-inline-size: 0;
  padding-inline-start: var(--space-page-x, 170px);
}

/* the photo is fitted to the band, never sized by its own pixels: `contain`
   keeps the whole curved mask visible, so the framing is identical at every
   viewport width instead of the band cropping a different part of it */
.atr-henig-hero-slide__photo {
  position: relative;
  flex: 0 0 54%;
  min-inline-size: 0;
}

/* the <picture> that switches desktop band art for the mobile masked photo
   must not introduce an inline box between the wrapper and the image */
.atr-henig-hero-slide__photo picture {
  display: contents;
}

.atr-henig-hero-slide__photo img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  /* hugs the physical left edge so the photo still bleeds to the side of the
     screen the way the design has it, with any slack falling inward */
  object-position: left center;
}

.atr-henig-hero-slide__eyebrow {
  margin: 0 0 8px;
  font-size: 35px;
  line-height: 1.2;
  color: var(--primary-dark-green, #001F1C);
}

/* B1 (slides 5/7): the design's 90px headline reduced by 20%, and the line
   under it (35px) by 40% */
.atr-henig-hero-slide__head {
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: clamp(36px, calc(44px + (100vw - 1280px) * 0.04375), 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--primary-green, #0A5950);
}

.atr-henig-hero-slide__body {
  margin: 24px 0 0;
  font-size: 21px;
  line-height: 1.2;
  color: var(--primary-green, #0A5950);
}

.atr-henig-hero-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-block-start: 24px;
}

.atr-henig-hero-dot {
  inline-size: 12px;
  block-size: 12px;
  padding: 0;
  border: 1px solid var(--primary-green, #0A5950);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.atr-henig-hero-dot.is-active {
  background: var(--primary-green, #0A5950);
}

/* Elementor's frontend.min.css kills every transition on the page when the OS
   asks for reduced motion:
       @media (prefers-reduced-motion:reduce){ html *{transition-duration:0s!important} }
   That rule (specificity 0,0,1 + !important) is why the hero jumped instead of
   sliding on a machine with Windows animations turned off. The slide movement
   is the client's explicit requirement — and the people who asked for it are on
   exactly such a machine — so we win it back for this one element only.
   Everything else on the page keeps Elementor's reduced-motion behaviour, and
   the rotation still pauses on hover/focus and on a hidden tab, with the dots
   for manual control. */
@media (prefers-reduced-motion: reduce) {
  .elementor .atr-henig-hero-slides {
    transition-duration: var(--atr-hero-speed, 600ms) !important;
    transition-delay: 0s !important;
  }
}

/* laptops: the design's 170px gutter plus a 54% photo leaves the copy in a
   ~330px column that wraps the headline to four lines — measured at 1100.
   The split evens out and the gutter shrinks before the layout stacks. */
@media (max-width: 1440px) {
  .atr-henig-hero-slide__text {
    flex: 1 1 50%;
    padding-inline-start: 60px;
  }

  .atr-henig-hero-slide__photo {
    flex: 0 1 50%;
  }
}

/* ===== Mobile hero — Figma 4:17363 (390x701) =====
   The stacked design: the masked photo full-bleed on top, then the copy on the
   band, right-aligned inside the 32px page gutter. The flat band artwork is a
   DESKTOP composition (photo, arcs and copy area side by side), so below the
   tablet breakpoint the <picture> in compose-hero-slider.py serves the masked
   photo instead and the band drops its fixed aspect.

   Every rule here that resets a flat-slide property repeats it at the flat
   rules' specificity (0,2,0) — a bare class would lose to them and the photo
   would stay absolutely positioned on top of the copy, which is exactly how
   the mobile hero broke. */
@media (max-width: 1024px) {
  /* Elementor gives the band min-height:750px + justify-content:flex-end on
     mobile, which left ~160px of empty band above the hero and pinned it to
     the bottom. The design starts the photo straight under the header. */
  .elementor .e-con.atr-henig-hero {
    min-height: 0;
    justify-content: flex-start;
  }

  .atr-henig-hero-slide {
    flex-direction: column-reverse;
    gap: 24px;
    block-size: auto;
    /* the track stretches every slide to the tallest one; in column-reverse
       the default packing is the BOTTOM, which left the height difference as
       a gap between the header and the photo. flex-end here means the top:
       the photo hugs the header and the slack falls below the text. */
    justify-content: flex-end;
  }

  .elementor .e-con.atr-henig-hero .atr-henig-hero-slider,
  .atr-henig-hero-slider:has(.atr-henig-hero-slide--flat),
  .atr-henig-hero-slides {
    block-size: auto;
    aspect-ratio: auto;
  }

  .atr-henig-hero-slide .atr-henig-hero-slide__text {
    flex: 0 0 auto;
    inline-size: 100%;
    padding-inline: 32px;
  }

  /* The design's mobile photo box is a 390x496 portrait crop, but cropping
     cuts the subjects out of frame (the arms on the wide shots), and the whole
     photo must stay visible. So the masked photo keeps its own aspect and is
     never cropped — it lands shorter than the design's box, which is the
     tradeoff for showing all of it. */
  .atr-henig-hero-slide .atr-henig-hero-slide__photo {
    position: static;
    flex: 0 0 auto;
    inline-size: 100%;
    block-size: auto;
  }

  .atr-henig-hero-slide .atr-henig-hero-slide__photo img {
    position: static;
    block-size: auto;
    object-fit: contain;
  }

  /* type measured off the design render (390px, 1:1): a 35px headline line
     box, 16px eyebrow and body, and 16px between the three blocks. All three
     carry two class levels — they have to outrank the desktop vw rules above
     (0,2,0), and the head also has to outrank `.elementor-kit-5 h1`. */
  .atr-henig-hero-slide .atr-henig-hero-slide__eyebrow {
    margin-block-end: 16px;
    font-size: 16px;
  }

  .atr-henig-hero-slide .atr-henig-hero-slide__head {
    font-size: 35px;
    line-height: 1;
    letter-spacing: -1px;
  }

  .atr-henig-hero-slide .atr-henig-hero-slide__body {
    margin-block-start: 16px;
    font-size: 16px;
    line-height: 1.5;
  }
}

/* ===== Review 0908 R5 — homepage "גישת הניג" video section (Figma 1:226) ====
   The heading and video widgets carry manual atr- classes (post 28, tagged via
   tools/page-generator/tag-hp-approach.php). The card container itself is a V4
   atomic flexbox that ignores the classic _css_classes setting, so it is
   addressed as the e-con that HAS the tagged heading — still hash-free.
   Design deltas fixed here: the headline ran as one 1677px line instead of
   wrapping to two inside the design's 1122px column; the eyebrow was 45px
   against the design's 35px; neither scaled below 1920; the card's arc
   decorations were missing; and the video spanned the full card instead of
   the design's 1460/1800. The video content itself is untouched (review
   slide 8: keep it as on the temporary link). */
.elementor .e-con:has(> .atr-henig-hp-approach__head) {
  position: relative;
}

/* The design's arc layer, taken whole from the designer's own export of the
   section (images/Frame 380.png, 2026-08-10) after the first attempt — three
   hand-cut corner pieces — placed the curves wrong. The export's card region
   (1796x756 at the 1920 scale) with the text and video zones painted back to
   the card colour becomes ONE background image: both arcs sit exactly where
   the design has them, and they scale with the card because the image spans
   its full width. Below the image's height the card shows its own background
   colour — the same #F4F8F8, so the seam is invisible. */
.elementor .e-con:has(> .atr-henig-hp-approach__head) {
  background-image: url("images/atr-henig-approach-bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* the copy and the video paint above the arcs */
.elementor .e-con:has(> .atr-henig-hp-approach__head) > .elementor-widget {
  position: relative;
  z-index: 1;
}

/* the design's 1122px column (62.3% of the 1800 card) wraps the headline to
   two lines; 90px at 1920 scaling as 4.69vw so laptops fit (review slide 6).
   Elementor's own `.elementor.elementor .e-con > .elementor-widget
   {max-width:100%}` is 0,3,0 and max-width/max-inline-size are one property,
   so the cap needs to outrank it. */
.elementor.elementor .e-con > .elementor-widget.atr-henig-hp-approach__head {
  max-inline-size: 62.3%;
}

.atr-henig-hp-approach__head .elementor-heading-title {
  font-size: clamp(40px, 4.69vw, 90px);
  /* Figma stores the tracking as a percentage (-3%, frozen by the widget as
     -2.7px of 90px and removed from the data since); em keeps the letter AND
     word gaps proportional at every size, exactly like the Figma property */
  letter-spacing: -0.03em;
}

/* the design's 35px eyebrow (was 45px), scaling like the hero's */
.atr-henig-hp-approach__eyebrow .elementor-heading-title {
  font-size: clamp(20px, 1.82vw, 35px);
}

/* the design's video width: 1460 of the 1800 card */
.elementor .e-con > .elementor-widget.atr-henig-hp-approach__video {
  inline-size: 81.1%;
  max-inline-size: 1460px;
}

/* The poster (the designer's Frame 350, set as the widget's image overlay via
   set-approach-video-poster.php) plays the video in place on click. The play
   glyph is a disc with a cut-out triangle: painting it the primary green over
   a white circle gives the design's solid green button with a white triangle.
   The wrapper radius clips the poster AND the playing iframe alike. */
.atr-henig-hp-approach__video .elementor-wrapper {
  border-radius: 24px;
  overflow: hidden;
}

/* The disc cannot be sized in %: the glyph's parent .elementor-custom-embed-play
   is a fixed 300px box, so a percentage resolves against 300, not the poster
   (measured — 8.63% came out ~26px). It is therefore expressed in vw against
   the poster, which is 74.4% of the viewport at this breakpoint.
   The design (Figma 1:238) is 126px on a 1460px card = 8.63% = 6.42vw, which
   read as too big on the page, so it is scaled to 75% of the design figure:
   4.82vw, capped at 95px. The 48px floor keeps the mobile button a valid tap
   target (WCAG 2.5.5 asks ~44px) where the design ratio would give ~21px. */
.atr-henig-hp-approach__video .elementor-custom-embed-play i,
.atr-henig-hp-approach__video .elementor-custom-embed-play svg {
  /* the design's button: a solid green disc with a white triangle */
  color: #FFFFFF;
  fill: #FFFFFF;
  font-size: clamp(48px, 4.82vw, 95px);
  inline-size: clamp(48px, 4.82vw, 95px);
  block-size: clamp(48px, 4.82vw, 95px);
  background: var(--primary-green, #0A5950);
  border-radius: 50%;
  opacity: 1;
}

/* The mobile design (Figma 4:17444) is NOT the desktop card shrunk: the band
   runs edge to edge with no corner radius and no graphics, the copy sits in
   the 32px page gutter, and the type steps down to 16px / 28px. The Figma has
   no tablet frame — decided 2026-08-10: tablet is treated as mobile, so this
   applies through 1024. Tracking stays the proportional -0.03em. */
@media (max-width: 1024px) {
  .elementor .e-con:has(> .atr-henig-hp-approach__head) {
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
    padding: 64px 32px 72px;
    background-image: none;
  }

  .elementor.elementor .e-con > .elementor-widget.atr-henig-hp-approach__head {
    max-inline-size: 100%;
  }

  .elementor .e-con > .elementor-widget.atr-henig-hp-approach__video {
    inline-size: 100%;
  }

  .atr-henig-hp-approach__eyebrow .elementor-heading-title {
    font-size: 16px;
  }

  .atr-henig-hp-approach__head .elementor-heading-title {
    font-size: 28px;
    line-height: 1.25;
  }
}

/* ===== Review 0908 R6 — homepage meditation section (Figma 1:247) =====
   Hero-style flat art, decided after two failed reconstructions: the design's
   desktop composition is the scenic MASKED photo (not the woman cut-out) with
   three full-width wave strokes, one of which crosses OVER the photo — only
   the designer's own render carries all of that faithfully. So the section's
   background IS the section export (Frame 384.png) with the text block
   painted back to the band colour, aspect-locked so it scales; the copy stays
   HTML on top, and the image widget is hidden on desktop. On mobile the
   widget shows the designer's flat MOBILE art (fix-change-section.php points
   it there) — see the R6-mobile block below. Type sizes live with the legacy
   B5 rules near the top. */
.elementor .e-con.atr-henig-hp-change {
  background-image: url("images/atr-henig-change-bg.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  aspect-ratio: 1920 / 1006;
}

@media (min-width: 1025px) {
  /* the photo lives inside the flat background on desktop */
  .elementor .e-con.atr-henig-hp-change > .e-con:not(.atr-henig-hp-change__text) {
    display: none;
  }

  /* with the photo container hidden, the copy became the row's first child
     and RTL put it on the right — over the background's photo. The design
     has it on the physical left, so the start-side margin soaks the slack. */
  .elementor .e-con.atr-henig-hp-change > .atr-henig-hp-change__text {
    margin-inline-start: auto;
  }
}

/* ===== R6 mobile — reworked 2026-08-13 (new Figma l7pmYu1RqBfJPwFmpPqptz,
   mobile frame 227 / art group 4:17465): text first, then the designer's
   FLAT art render (photo + waves-over-photo + band pink baked, exported @3x
   to images/atr-henig-change-art-mobile.webp) full-bleed below it — the same
   flat-art decision the desktop already took. The old split (350px cut-out
   over a waves-only background) rendered blurry on phone DPR and could not
   put the wave stroke OVER the photo. Tablet is treated as mobile. */
@media (max-width: 1024px) {
  .elementor .e-con.atr-henig-hp-change {
    aspect-ratio: auto;
    /* no wave zone below: the art carries the waves and the pink tail */
    padding-block: 24px 0;
    background-image: none;
    /* band pink behind the text zone, same as the art's baked backdrop */
    background-color: var(--e-global-color-fd668bd, #F8EDE8);
  }

  /* the design butts the art against the text block (its pink lead-in is
     baked into the render) — the text container's own 64px end padding was
     doubling that gap to ~100px */
  .elementor .e-con.atr-henig-hp-change > .atr-henig-hp-change__text {
    padding-block-end: 0;
  }

  /* the photo container follows the text on mobile (DOM has it first), and
     both it AND the image widget drop their fixed Elementor heights (398px)
     that were cutting the tall rendered art out of the section flow */
  .elementor .e-con.atr-henig-hp-change > .e-con:not(.atr-henig-hp-change__text) {
    order: 2;
    block-size: auto;
    min-block-size: 0;
  }

  .elementor .e-con.atr-henig-hp-change .elementor-widget-image {
    /* size the WIDGET, not the img: with a percentage on the img the widget
       kept reporting a fixed height and the art overflowed the section;
       in normal flow the widget height follows the img. Full-bleed: the art
       composes its own side margins. */
    inline-size: 100%;
    margin-left: 0;
    margin-right: 0;
    block-size: auto;
  }

  .elementor .e-con.atr-henig-hp-change img {
    inline-size: 100%;
    margin: 0;
  }

  /* mobile type and text padding live with the legacy ≤1024 B5 rules */
}

/* ===== Review 0908 R7 — "איך אנחנו עושים את זה" (Figma 1:263, 1920x1000;
   mobile 4:17473, 390x739) =====
   The whole section was frozen at fixed px (80px title, 22px rows) so a
   1250px window broke the title into five lines — the review complaint.
   Everything scales off the 1920 design now: title 80, body 35, rows 55,
   row height 333.33, intro column 797/1920. Tagged by tag-hp-how.php. */

.elementor .e-con.atr-henig-hp-how__intro {
  --width: 41.51%; /* 797/1920 — Elementor had 45%, rendering 665px */
  inline-size: 41.51%;
  flex: 0 0 auto;
  /* the design measures 170 to the title's start (physical left) and 120 to
     its end; RTL inline-start is the right edge */
  padding-block: 0 min(60px, 3.13vw);
  padding-inline: min(120px, 6.25vw) min(170px, 8.85vw);
}

.elementor .e-con.atr-henig-hp-how__rows {
  flex: 1 1 0;
  min-inline-size: 0;
}

/* rows are 333.33px of the 1000px design, not the 280 Elementor pins.
   The viewport-height term is the PDF's "whole section on one screen"
   requirement: rows also cap to (screen minus sticky header)/3, which on
   16:9 laptops tightens them 3-5% below the Figma ratio (PDF wins over
   Figma). REVERT: make both properties plain 17.36vw. */
.elementor .e-con.atr-henig-hp-how__row {
  --min-height: min(17.36vw, calc((100vh - 80px) / 3));
  min-block-size: min(17.36vw, calc((100vh - 80px) / 3));
  padding-inline: min(120px, 6.25vw);
}

/* icon roundel: 115px in the design, was 73. flex-shrink and the e-con
   default 10px padding both ate into it (rendered 81) */
.elementor .e-con.atr-henig-hp-how__icon {
  --width: clamp(51px, 5.99vw, 115px);
  inline-size: clamp(51px, 5.99vw, 115px);
  flex: 0 0 auto;
  padding: 0;
}

.elementor .e-con.atr-henig-hp-how__icon img {
  inline-size: 100%;
  block-size: auto;
}

/* The heading widget shrink-wraps its two lines and the intro column (a flex
   column) centres that narrow box, so the title's right edge sat INSIDE the
   body's — measured 52px at 1920, 62px at 390. Both design frames give the
   title and the body the full column with text-right (desktop 1:284/2:627,
   mobile 4:17475/4:17707), i.e. one shared right edge. Stretching the widget
   is the fix; the text itself is already start-aligned in RTL. */
.elementor .e-con.atr-henig-hp-how__intro > .elementor-widget.atr-henig-hp-how__head {
  inline-size: 100%;
  align-self: stretch;
}

.elementor .elementor-widget.atr-henig-hp-how__head .elementor-heading-title {
  font-size: clamp(40px, 4.167vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em; /* proportional, like the Figma -3% */
}

.elementor .elementor-widget.atr-henig-hp-how__body p {
  font-size: clamp(16px, 1.823vw, 35px);
  line-height: 1.2;
}

.elementor .elementor-widget.atr-henig-hp-how__item .elementor-heading-title {
  font-size: clamp(22px, 2.865vw, 55px);
  line-height: 0.91;
  letter-spacing: -0.03em;
}

/* the design colours each row's copy to its band */
.elementor .e-con.atr-henig-hp-how__row:nth-child(1) .elementor-heading-title {
  color: var(--primary-green, #0A5950);
}

.elementor .e-con.atr-henig-hp-how__row:nth-child(2) .elementor-heading-title {
  color: #014646;
}

.elementor .e-con.atr-henig-hp-how__row:nth-child(3) .elementor-heading-title {
  color: #2E1002;
}

/* ===== R7 mobile (Figma 4:17473): intro block stacked over the rows,
   40/16 in the green, 22px rows 144 tall. Tablet is treated as mobile. */
@media (max-width: 1024px) {
  .elementor .e-con.atr-henig-hp-how {
    flex-direction: column;
  }

  .elementor .e-con.atr-henig-hp-how__intro {
    inline-size: 100%;
    padding-block: 60px;
    padding-inline: 32px;
  }

  .elementor .e-con.atr-henig-hp-how__row {
    min-block-size: 144px;
    padding-block: 32px;
    padding-inline: 32px;
  }

  .elementor .e-con.atr-henig-hp-how__icon {
    inline-size: 51px;
  }

  .elementor .elementor-widget.atr-henig-hp-how__head .elementor-heading-title {
    font-size: 40px;
    line-height: 0.87;
  }

  .elementor .elementor-widget.atr-henig-hp-how__body p {
    font-size: 16px;
  }

  .elementor .elementor-widget.atr-henig-hp-how__item .elementor-heading-title {
    font-size: 22px;
  }
}

/* ===== Review 0908 R8 — team block "קשר אישי לכל מטופל" (Figma 2:651,
   1920x990; mobile 4:17521, 390x426) =====
   The 120px title was frozen (four word-lines at 1250) and the photo ran
   inside a 1312px box instead of the design's near-full-bleed 1151x750
   card. Tagged by tag-hp-team.php. */

/* the wrapper's default 10px side padding would offset the full-bleed card */
.elementor .e-con:has(> .e-con.atr-henig-hp-team) {
  padding-inline: 0;
}

.elementor .e-con.atr-henig-hp-team {
  --content-width: 100%;
  /* the parent's 1584px content box would cage the card — break out to the
     viewport, like the design's x=60..1920 span */
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: min(120px, 6.25vw);
  /* 60px to the photo's far (left) edge, like the design's x=60 */
  padding-inline: 0 min(60px, 3.13vw);
  gap: 0;
  /* the designer's own deco exports (images/hp-R8), baked into one overlay
     at their pixel-matched spots — arc at (0,8), leaf at (1456,660) of the
     1920x990 frame. As a container background it sits BEHIND the photo,
     exactly like the design (the arc dives under the card). Verified 0.79
     mean diff vs Frame 390 in the visible zones. */
  background-image: url("images/atr-henig-team-deco.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.elementor .elementor-widget.atr-henig-hp-team__photo {
  inline-size: 61.9%; /* 1151 of the 1860 content box */
  flex: 0 0 auto;
}

.elementor .elementor-widget.atr-henig-hp-team__photo img {
  inline-size: 100%;
  aspect-ratio: 1151 / 750;
  object-fit: cover;
  /* the design's card: 32px corners, 58px on the physical top-right —
     a directional shape, so physical values on purpose (no RTL flip) */
  border-radius: 32px 58px 32px 32px;
}

.elementor .e-con.atr-henig-hp-team__titlecol {
  --width: auto;
  inline-size: auto;
  flex: 1 1 0;
  min-inline-size: 0;
  justify-content: center;
  /* the design holds the title 170 from the page's right edge, 120 from
     the photo (Figma pr170/pl120; RTL inline-start is the right side) */
  padding-inline: min(170px, 8.85vw) min(120px, 6.25vw);
}

.elementor .elementor-widget.atr-henig-hp-team__head .elementor-heading-title {
  font-size: clamp(35px, 6.25vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  /* the design's text node (735px) is wider than its column (419): the
     title overflows leftward into the gap. The copy carries its own <br>,
     so nowrap reproduces exactly that */
  white-space: nowrap;
}

/* ===== R8 mobile (Figma 4:17521): title over a full-bleed, square-cornered
   photo. Tablet is treated as mobile. */
@media (max-width: 1024px) {
  .elementor .e-con.atr-henig-hp-team {
    padding-block: 60px 0;
    padding-inline: 0;
    gap: 60px;
    /* the desktop align-items:center shrinks the stacked title column to
       content width and centers it — the design pins it right */
    align-items: stretch;
    /* mobile deco: the designer's Frame 586 vector at (0,56), baked into a
       390x191 overlay */
    background-image: url("images/atr-henig-team-deco-mobile.webp");
  }

  .elementor .e-con.atr-henig-hp-team__titlecol {
    padding-block: 0;
    padding-inline: 32px;
    /* the design pins the title to the inline start (right); the column's
       flex centering was showing it centered */
    justify-content: flex-start;
    align-items: flex-start;
  }

  .elementor .elementor-widget.atr-henig-hp-team__head .elementor-heading-title {
    text-align: start;
  }

  .elementor .elementor-widget.atr-henig-hp-team__head .elementor-heading-title {
    font-size: 35px;
  }

  .elementor .elementor-widget.atr-henig-hp-team__photo {
    /* full-bleed regardless of any ancestor box; max-inline-size beats
       Elementor's same-specificity max-width:100% (the R5 lesson) */
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .elementor .elementor-widget.atr-henig-hp-team__photo img {
    aspect-ratio: 390 / 236;
    border-radius: 0;
  }
}

/* ===== Review 0908 R9 — testimonials "מטופלים מספרים" (Figma 2:664,
   1920x1149; mobile 4:17529, 390x741) =====
   The section shipped without its title, the vertical phone videos ran
   full 9:16 (684px tall) instead of the design's 438x494 card crop, and
   the card typography was frozen. Tagged + title inserted by
   tag-hp-testi.php. The leaf line-art behind the cards still needs the
   designer's export (images/hp-R9). */

.elementor .e-con.atr-henig-hp-testi {
  /* the inserted title must stack ABOVE the carousel, not beside it */
  flex-direction: column;
  /* full-bleed: the 1584 box was clipping the left third of the leaf
     background (it lives at x0-290 of the viewport) */
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  /* the section's 1312px content box capped the carousel at 1294 — the
     design row is 1394; the carousel rule below does the actual sizing */
  --content-width: 100%;
  padding-block: min(120px, 6.25vw);
  /* the section's own 170/120 Elementor padding left a 1294px content box;
     center the design's 1394 row instead (the carousel then just fills it) */
  padding-inline: calc((100vw - min(72.6vw, 1394px)) / 2);
  /* the designer's leaf line-art (images/hp-R9/Vector.png), pixel-matched
     at (-10,113) of the 1920x1149 frame and baked into a full-frame
     overlay. The section is a centered 1584 box, so a 100vw center-aligned
     background lands on the same viewport spot as the design. */
  background-image: url("images/atr-henig-testi-deco.webp?v=2962");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100vw auto;
  /* the overlay's y0 is the SECTION top — default padding-box origin would
     shove it down by the 120px padding */
  background-origin: border-box;
}

/* the design's thumb spans the full card — the e-con default 10px padding
   was shaving the video (438 → 418) */
.elementor .e-con.atr-henig-hp-testi__card {
  padding: 0;
}

.elementor .elementor-widget.atr-henig-hp-testi__title .elementor-heading-title {
  font-size: clamp(35px, 4.167vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary-green, #0A5950);
}

.elementor .elementor-widget.atr-henig-hp-testi__title {
  margin-block-end: min(80px, 4.17vw);
}

/* the design's card row is 1394 of 1920 — the section padding above sets
   that content box and the carousel fills it, (1394 - 2x40 gap) / 3 = 438 */

/* the thumb crop: 438x494 (r24) instead of the full 9:16 portrait */
.elementor .e-con.atr-henig-hp-testi .elementor-widget-video .elementor-wrapper {
  aspect-ratio: 438 / 494;
  --video-aspect-ratio: 0.8866;
}

.elementor .e-con.atr-henig-hp-testi .elementor-widget-video .elementor-wrapper,
.elementor .e-con.atr-henig-hp-testi .elementor-widget-video .elementor-custom-embed-image-overlay,
.elementor .e-con.atr-henig-hp-testi .elementor-widget-video .elementor-custom-embed-image-overlay img,
.elementor .e-con.atr-henig-hp-testi .elementor-widget-video .elementor-video,
.elementor .e-con.atr-henig-hp-testi .elementor-widget-video iframe {
  border-radius: 24px; /* homepage design; the shared subj-testi rule says 16 */
}

.elementor .e-con.atr-henig-hp-testi .elementor-custom-embed-image-overlay img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.elementor .elementor-widget.atr-henig-hp-testi__cardhead .elementor-heading-title {
  font-size: clamp(22px, 1.823vw, 35px);
  line-height: 1.2;
  color: var(--primary-green, #0A5950);
  text-align: center;
}

.elementor .elementor-widget.atr-henig-hp-testi__cardbody p {
  font-size: clamp(16px, 1.5625vw, 30px);
  line-height: 1.2;
  color: var(--primary-dark-green, #001F1C);
  text-align: center;
}

/* ===== R9 mobile (Figma 4:17529): 35px title, one 326-wide card, same
   thumb ratio. Tablet is treated as mobile. */
@media (max-width: 1024px) {
  .elementor .e-con.atr-henig-hp-testi {
    padding-block: 80px 60px;
    /* the design card is 326 of 390 (the section is full-bleed now) */
    padding-inline: 32px;
    /* mobile leaf: designer's vector at (-1,627) of the 390x741 frame,
       bottom-anchored so it hugs the dots row like the design */
    background-image: url("images/atr-henig-testi-deco-mobile.webp?v=2962");
    background-position: bottom center;
  }

  .elementor .elementor-widget.atr-henig-hp-testi__title .elementor-heading-title {
    font-size: 35px;
  }

  .elementor .elementor-widget.atr-henig-hp-testi__title {
    margin-block-end: 32px;
  }

  .elementor .elementor-widget.atr-henig-hp-testi__cardhead .elementor-heading-title {
    font-size: 22px;
  }

  .elementor .elementor-widget.atr-henig-hp-testi__cardbody p {
    font-size: 16px;
  }
}

/* ===== Review 0908 R10+R11 — "מרכז הניג בתקשורת" (Figma 2:710, 1920x1173;
   mobile 4:17735, 390x615) =====
   One slider now: merge-media-sliders.php turned the bottom carousel's four
   Vimeo interviews into real posts inside the top loop-carousel and removed
   it. Card typography per the design, EXCEPT the caption colour: the first
   review round (B10) asked for dark instead of the Figma green — the PDF
   wins. */

.elementor .elementor-widget.atr-henig-hp-media__title .elementor-heading-title {
  font-size: clamp(35px, 4.167vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary-green, #0A5950);
  text-align: center;
}

/* the section's own 170px side padding capped the carousel at 1580 —
   center the design's 1650 row instead (same recipe as R9) */
.elementor .e-con.atr-henig-hp-media {
  --content-width: 100%;
  padding-inline: calc((100% - min(85.94vw, 1650px)) / 2);
}

/* the design's card row is 1650 of 1920 */
.elementor .elementor-widget.atr-henig-hp-media__carousel {
  inline-size: min(85.94vw, 1650px);
  max-inline-size: min(85.94vw, 1650px);
  margin-inline: auto;
}

/* the loop template's V4 root (an <a>) carries the e-con default 10px */
.elementor .e-con.atr-henig-hp-media .e-loop-item,
.elementor .e-con.atr-henig-hp-media .swiper-slide > .e-con {
  padding: 0;
}

.elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-featured-image img {
  inline-size: 100%;
  aspect-ratio: 805 / 494;
  object-fit: cover;
  border-radius: 24px;
}

.elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-featured-image {
  margin-block-end: min(32px, 1.67vw);
}

.elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
  font-size: clamp(22px, 1.823vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0; /* a global heading rule leaks -3px; the design says 0 */
  color: var(--primary-dark-green, #001F1C); /* B10: dark, not the Figma green */
  text-align: center;
}

.elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-title {
  margin-block-end: min(16px, 0.83vw);
}

.elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-excerpt,
.elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-excerpt p {
  font-size: clamp(16px, 1.5625vw, 30px);
  line-height: 1.2;
  color: var(--primary-dark-green, #001F1C);
  text-align: center;
}

/* ===== R10 mobile (Figma 4:17735): 35px title, one 326-wide card =====
   Tablet is treated as mobile. */
@media (max-width: 1024px) {
  .elementor .elementor-widget.atr-henig-hp-media__title .elementor-heading-title {
    font-size: 35px;
  }

  .elementor .elementor-widget.atr-henig-hp-media__carousel {
    inline-size: min(100%, 326px);
    max-inline-size: min(100%, 326px);
  }

  .elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
    font-size: 22px;
  }

  .elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-excerpt,
  .elementor .e-con.atr-henig-hp-media .e-loop-item .elementor-widget-theme-post-excerpt p {
    font-size: 16px;
  }
}

/* ===== Review 0908 R12 — the articles/blog banner on the homepage
   (atr-henig-hp-articles, flat art frame-208-2.webp 1920x973) =====
   No Figma frame exists for this section; the requirement is the review's:
   responsive, whole photo visible, no scroll. The section ran a fixed
   721px inner + 300px padding with `cover` (cropped at every width, and
   1021px tall at 1250 — taller than the screen). Aspect-locked instead,
   hero-style. */

.elementor .e-con.e-con.atr-henig-hp-articles {
  aspect-ratio: 1920 / 973;
  background-size: 100% auto;
  background-position: top center;
  padding-block: 0;
  /* T3 (review 1608, slide 4): the copy+button sat flush with the band's
     bottom edge; Figma 3:6084 centers the content block vertically */
  justify-content: center;
}

/* the inner container pinned 721px (tablet 351, mobile 181) */
.elementor .e-con.atr-henig-hp-articles > .e-con {
  --min-height: 0;
  min-block-size: 0;
}

/* ===== R12 mobile: the copy stacks ABOVE the full-width photo (no design
   frame exists — flagged for the designer; the alternative was cropping,
   which the review forbids). Tablet is treated as mobile. */
@media (max-width: 1024px) {
  .elementor .e-con.e-con.atr-henig-hp-articles {
    aspect-ratio: auto;
    padding: 32px;
    /* reserve the photo's own height (973/1920 of the viewport) below */
    padding-block-end: calc(50.68vw + 16px);
    background-size: 100% auto;
    background-position: bottom center;
    /* keep the stacked copy just above the photo (the desktop base centers) */
    justify-content: flex-end;
  }

  .elementor .atr-henig-hp-articles .atr-henig-hp-articles__head .elementor-heading-title {
    font-size: 35px;
  }
}

/* ===== U-round 17.08: Yair hero — clean photo over the unified plate =====
   The hero root (page 3258, element 6759630) stacks photo att 3261
   (about-yair-hero-left-DT.webp — Yair with a baked-in light-blue
   background and its OWN arcs) over the unified plate (hero-unified-bg),
   so two mismatched arc sets render. Swap only the top layer to the
   transparent cut-out shipped with the theme (images/yair-story.webp,
   73KB — derived from the 35MB images/yair-story.png design export).
   Same selector/specificity as the generated rule; style.css loads after
   the local-3258 CSS, so source order wins. Both URLs are theme-relative
   so the rule is environment-agnostic (local + production). Scoped to
   min-width:768px because the mobile variant paints its own single-layer
   asset (att 3389) and must keep it. Geometry (contain top left / cover
   center left) is inherited from the generated rule untouched. */
@media (min-width: 768px) {
  .elementor .e-6759630-09ccebc {
    background-image: url("images/yair-story.webp"), url("images/hero-unified-bg.webp");
  }
}

/* ===== T10 (review 1608, slide 12): the Yair quote band's artwork =====
   The band art (att 4873, 1920x480 — arcs + the leaf near the top right)
   sits in a band that is 635px tall, i.e. a much squarer box. Elementor's
   own `cover` scales to the taller dimension, drawing the image 2540px
   wide inside a 1400px band, which pushes the leaf ~342px past the right
   edge — measured; that is why the leaf vanished below 1920. Stretching
   to 100% 100% keeps the full width (leaf included) visible at every
   viewport; the art is soft abstract shapes, so the vertical stretch is
   not perceptible. Element tagged by tools/page-generator/tag-yair-quote-band.php. */
#atr-henig-yair-quote {
  /* Below the design width the art scales down with the band, so the full
     composition — leaf included — always fits. `contain` never crops
     horizontally, which is what `cover` and the original `auto` both did
     (measured: at 1400 the leaf landed 342px past the right edge). */
  background-size: contain;
  /* RTL: the leaf lives at the art's top RIGHT, and the quote text starts
     below it — anchoring the art to the top keeps that clearance. */
  background-position: top center;
  background-repeat: no-repeat;
}

@media (min-width: 1921px) {
  /* Past the 1920 design width the band grows wider but not taller, so
     scaling the art up would demand 843px of art height inside a 635px
     band and drive the leaf down into the quote (measured at 3373:
     162px of overlap). Hold the art at its design size instead and pin it
     to the top right, exactly where Figma 3:1368 places it. */
  #atr-henig-yair-quote {
    background-size: 1920px auto;
    background-position: top right;
  }
}

/* The leaf sits in the art's top-right corner (source y 8..250 of 480).
   The band's own 150px top padding started the quote at y=169, i.e. INSIDE
   the leaf — that is why the text covered it on wide screens. Figma 3:1368
   starts the quote at y=276 in a 668-tall band, clearing the leaf by 26px.
   Push the copy down to clear the leaf and trim the bottom padding by the
   same amount, so the band keeps its designed height instead of growing. */
/* Figma 3:1368: the quote block occupies y 276..518 of a 668-tall band —
   276 above it (which also clears the leaf, see below) and 150 beneath. */
#atr-henig-yair-quote {
  padding-block-start: 276px;
  padding-block-end: 150px;
}

/* Quote layout — Figma 3:1373 is a flex ROW with `align-items: end`: the
   attribution sits at the far start (left in RTL) on the same baseline as
   the quote's LAST line, not stacked underneath it. The live band stacked
   both as full-width rows in a column. Font sizes (90 / 45), the 0.9
   line-height and the #E7F0F0 colour already match the design — only the
   arrangement was wrong. The band's own art occupies the top, so the pair
   is pushed to the bottom of the padded box. */
#atr-henig-yair-quote {
  /* plain `row`: in this RTL container that puts the first child (the
     quote) on the right and the attribution on the left, as the design has
     it — `row-reverse` swapped them. Below the design width the pair no
     longer fits side by side (measured at 1400: the two overlapped by
     772px), so allow a wrap — the attribution then drops under the quote
     and keeps its start alignment. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

/* the quote keeps the design's measure instead of spanning the full band */
#atr-henig-yair-quote > h2 {
  flex: 0 1 auto;
  inline-size: auto;
  text-align: end;
  /* T11 (review 1608, slide 13): the review asks for a smaller quote. The
     live size already matched Figma 3:1373 exactly (90px), so this is a
     deliberate divergence — the PDF wins over the Figma per Source
     Precedence. 70px is a ~22% reduction that keeps the three-line break.
     Letter-spacing scales with it (-2.7px at 90 → -2.1px at 70). */
  font-size: 70px;
  line-height: 0.9;
  letter-spacing: -2.1px;
}

/* the attribution shrink-wraps at the opposite edge, bottom-aligned */
#atr-henig-yair-quote > h4 {
  flex: 0 0 auto;
  inline-size: auto;
  white-space: nowrap;
  margin-block-end: 0;
}

@media (max-width: 767px) {
  /* Mobile uses a different asset (bg-2-generic.webp) with no leaf, so the
     clearance above is unnecessary — and 276px on a 390px screen is a huge
     empty gap. Restore the element's own mobile padding, and let the quote
     and attribution stack again: the row layout has no room at 390px. */
  #atr-henig-yair-quote {
    /* Figma mobile 3:1549 (390x379): quote y 159..258, attribution
       y 287..294, band 379 tall. Measured live at 80px padding the quote
       started at y=78 — 81px too high. */
    padding-block-start: 159px;
    padding-block-end: 85px;
    /* the mobile plate (att 4875) is 390x211 — the band's TOP strip at
       design scale, flat colour below. Full-width fit, not cover: cover
       scales it ~3x and pushes the arc and leaf out of frame. */
    background-size: 100% auto;
    background-position: top center;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #atr-henig-yair-quote > h2,
  #atr-henig-yair-quote > h4 {
    inline-size: 100%;
  }

  /* T11 sets the desktop quote to 70px as a base; mobile keeps the element's
     own 35px from its mobile variant. */
  #atr-henig-yair-quote > h2 {
    font-size: 35px;
    letter-spacing: -1.05px;
  }

  /* Figma mobile 3:1549 (390x379): the attribution sits BELOW the quote and
     shares its right edge (measured x 283..356 against the quote's
     x 48..355), ~29px under the last line. Elementor renders this heading
     as `display:flex`, so `text-align` does not move its content — the
     flex main-axis alignment is what positions it. */
  #atr-henig-yair-quote > h4 {
    justify-content: flex-start;
    text-align: end;
    /* Figma puts the attribution at y=287, 29px under the quote. The
       heading carries its own 22px top padding from the element settings,
       so this margin only makes up the remainder. Negative because the
       three 35px lines end higher than the padding alone would place it. */
    margin-block-start: -20px;
  }
}

/* ===== T4 (review 1608, slide 5): the certification-badges strip right
   after the articles band carried 120px of white above and below the
   180px carousel — the review halves the white. Desktop-first base;
   the mobile 80px from the element settings is re-asserted below. */
.elementor .e-con.e-con.atr-henig-hp-articles + .e-con .e-con-inner {
  padding-block: 60px;
}

@media (max-width: 767px) {
  .elementor .e-con.e-con.atr-henig-hp-articles + .e-con .e-con-inner {
    padding-block: 80px;
  }
}

/* ===== Laptop overflow guard (client review E3, slide 72) =====
   Generated sections carry the design's 1584px content width as a fixed
   `--width`, so below ~1600px they push past the viewport and the page gets a
   horizontal scrollbar — measured 161px of overflow at 1280 on
   /סיפורו-של-יאיר/. Containers should never be wider than what holds them. */
@media (max-width: 1600px) {
  .elementor .e-con {
    max-inline-size: 100%;
  }
}

/* ===== Contact family (Figma 3:9601) + thank-you page (3:9498) =====
   One design serves צרו קשר / דברו עם המומחים / ייעוץ און ליין — the pages are
   built by tools/page-generator/compose-contact.py as a thin wrapper around
   the existing lead-form template (4633) plus the footer's social SVGs.
   Header and footer come from the Theme Builder, which is why the Figma frames
   do not show them. */
.elementor .e-con.atr-henig-contact,
.elementor .e-con.atr-henig-thankyou {
  min-block-size: 60vh;
  justify-content: center;
}

.elementor .atr-henig-contact__form {
  inline-size: 100%;
  max-inline-size: var(--site-content-width, 1584px);
}

/* ===== T17 (review 1608, slides 21–23): the banner above the lead form.
   Slides 21–23 carry no reviewer text — they show the design, and the
   three pages were missing this block entirely. Photo left, two lines of
   copy right, on the page's own light ground. Structure mirrors the About
   page's "הצוות המקצועי" row; built by add-contact-banner.php. The copy is
   per page, the photo (att 4432) is shared. */
/* Layout (row, 60% columns, paddings) comes from the element data, copied
   verbatim from the אודות "הצוות המקצועי" section — see
   rebuild-contact-banner.php. CSS only adds the banner ground: the light
   colour and the unified arc art, full-bleed like every other banner.
   No vertical padding and no cap on the image here: those were what left
   an empty band above and below the photo in the first attempt. */
.elementor .e-con.atr-henig-contact-banner {
  background-color: var(--primary-blue-01, #F4F8F8);
  background-image: url(../../uploads/2026/08/hero-unified-bg.webp);
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
}

/* The copy column copies the About PHOTO column, which uses align-items:end
   to push its photo flush left; on text that shrink-wraps the paragraph, so
   stretch it back and centre it against the full-height photo (About gets
   that balance from the extra graphic and heading above its paragraph). */
.elementor .atr-henig-contact-banner__text {
  justify-content: center;
  align-items: stretch;
}

/* The element data carries the About row's 50px bottom padding. Here the
   photo is the last thing in the band, so that 50 reads as dead space under
   it (user feedback 17.08) — the photo should meet the band's edge. */
.elementor .e-con.atr-henig-contact-banner {
  padding-block-end: 0;
}

/* the design sets this copy at the 45px body scale, green, right-aligned.
   The widget is an atomic e-heading rendered as the page's h1 (it is the
   only heading-level text on these pages) — margin-block kills the h1
   default margin so the swap from e-paragraph changes nothing visually,
   and the explicit 400 overrides the kit's 500 heading weight.
   letter-spacing must stay explicit: the kit sets -3px on every h1
   (.elementor-kit-5 h1), which visibly condensed this copy after the swap —
   as a paragraph it rendered at normal tracking, and the design keeps it so. */
.elementor .atr-henig-contact-banner__copy {
  font-size: 45px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--primary-green, #0A5950);
  text-align: start;
  margin-block: 0;
}

@media (max-width: 1024px) {
  .elementor .e-con.atr-henig-contact-banner {
    background-position: top center;
    padding-block-end: 0;
  }

  .elementor .atr-henig-contact-banner__copy {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  /* the row stacks to `column` (set in the element data), text first —
     the same order the About page's photo+text row uses, and the RTL
     desktop reading order (text right, photo left). The About page pads
     its copy 32 inline on the phone; match that. */
  .elementor .atr-henig-contact-banner__copy {
    font-size: 22px;
    padding-inline: 32px;
  }

  /* the stacked photo is the band's last element — no gap beneath it, and
     it must not leave a strip of ground showing under its own box */
  .elementor .e-con.atr-henig-contact-banner {
    padding-block-end: 0;
  }

  .elementor .atr-henig-contact-banner__photo {
    margin-block-end: 0;
  }

  .atr-henig-contact-banner__img {
    display: block;
    margin-block-end: 0;
  }
}

/* Template 4633 is authored for the hero / mega-menu band: a white row with a
   25%/75% split (title beside the fields). Here the same markup must read as
   the Figma screen — transparent, centred column, submit on its own line.
   Elementor containers are driven by custom properties (--flex-direction,
   --width, --padding-*), so those are what we override; the `.e-con` in the
   selector lifts specificity above Elementor's own
   `.elementor-4633 .elementor-element.elementor-element-xxx:not(…)` rules
   without !important. */
.elementor .e-con.atr-henig-contact .e-con.atr-henig-mega-form {
  --flex-direction: column;
  --min-height: 0;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --gap: 48px 48px;
  --row-gap: 48px;
  --column-gap: 48px;
  background-color: transparent;
}

.elementor .e-con.atr-henig-contact .e-con.atr-henig-mega-form::before {
  background-color: transparent;
}

/* centre the children on the inner, NOT via --align-items on the container:
   centring the container's single child makes .e-con-inner shrink to its
   content (measured 902px) and the field row then wraps 1-per-line */
.elementor .e-con.atr-henig-contact .e-con.atr-henig-mega-form > .e-con-inner {
  inline-size: 100%;
  align-items: center;
}

.elementor .e-con.atr-henig-contact .e-con.atr-henig-hp-hero-form__heading,
.elementor .e-con.atr-henig-contact .e-con.atr-henig-mega-form > .e-con-inner > .e-con.atr-henig-hp-hero-form {
  --width: 100%;
  background-color: transparent;
}

.elementor .e-con.atr-henig-contact .e-con.atr-henig-mega-form > .e-con-inner > .e-con.atr-henig-hp-hero-form::before {
  background-color: transparent;
}

.elementor .e-con.atr-henig-contact .atr-henig-hp-hero-form__heading {
  align-items: center;
  text-align: center;
}

.atr-henig-contact form.e-form-base {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
}

/* three across at the design width (Figma: 3 × 500px in a 1580 row); they
   share the row and shrink together on narrower screens rather than wrapping */
.atr-henig-contact .atr-henig-hp-field-wrap {
  flex: 1 1 280px;
  max-inline-size: 500px;
}

/* full-width so the consent line closes the field row, and the button lands
   on a line of its own — auto margins centre it (Figma 3:9707) */
.atr-henig-contact .e-form-checkbox-row {
  order: 5;
  flex: 0 0 100%;
  justify-content: flex-end;
}

.atr-henig-contact .atr-henig-hp-submit {
  order: 10;
  margin-inline: auto;
}

/* the design's 61px circles (Figma 3:9709), same SVG set as the footer */
.atr-henig-contact__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.atr-henig-contact__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 61px;
  block-size: 61px;
  border-radius: 50%;
  background: var(--primary-blue-02, #E7F0F0);
  color: var(--primary-green, #0A5950);
  flex: 0 0 auto;
}

.atr-henig-contact__social-link svg {
  inline-size: 36px;
  block-size: 36px;
}

/* --- thank-you page --- */
.atr-henig-thankyou__title .elementor-heading-title {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 1.2;
  color: var(--primary-green, #0A5950);
  text-align: center;
}

.atr-henig-thankyou__sub {
  font-size: 26px;
  line-height: 1.23;
  color: var(--primary-dark-green, #001F1C);
  text-align: center;
}

.elementor .atr-henig-thankyou__btn .elementor-button {
  padding: 16px 40px;
  border-radius: 50px;
  background-color: var(--primary-green, #0A5950);
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .atr-henig-contact .atr-henig-hp-field-wrap {
    flex: 0 0 100%;
  }

  .elementor .atr-henig-contact .atr-henig-mega-form > .e-con-inner {
    gap: 32px;
  }

  .atr-henig-contact__social-link {
    inline-size: 48px;
    block-size: 48px;
  }

  .atr-henig-contact__social-link svg {
    inline-size: 28px;
    block-size: 28px;
  }

  .atr-henig-thankyou__title .elementor-heading-title {
    font-size: 30px;
  }

  .atr-henig-thankyou__sub {
    font-size: 20px;
  }

  .elementor .atr-henig-thankyou__btn .elementor-button {
    font-size: 20px;
  }
}

/* ===== Privacy policy (Figma 5:1413) =====
   The design's text layers carry no type spec, so the page uses the design
   system's own defaults, which is also what the Figma boxes measure out to:
   title 80/700 (node 5:1605 is one 81px line), section headings 35/700
   (50px lines), body 26/400 (36px lines). Weights are 400/700 only — the
   headings otherwise inherit hello-elementor's 500. */
/* the branches-accessibility page ("נגישות סניפים", compose-branches-access.py)
   shares this text-page design via the atr-henig-access__* classes */
.atr-henig-privacy__title .elementor-heading-title,
.atr-henig-access__title .elementor-heading-title {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--primary-green, #0A5950);
}

.atr-henig-privacy__body,
.atr-henig-access__body {
  font-size: 26px;
  line-height: 1.23;
  color: var(--primary-dark-green, #001F1C);
}

.atr-henig-privacy__body h2,
.atr-henig-privacy__body h3,
.atr-henig-access__body h2 {
  margin-block: 48px 16px;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-green, #0A5950);
}

.atr-henig-privacy__body p,
.atr-henig-access__body p {
  margin-block-end: 16px;
  font-weight: 400;
}

.atr-henig-privacy__body ul {
  margin-block-end: 16px;
  padding-inline-start: 28px;
  list-style: disc;
}

.atr-henig-privacy__body li {
  margin-block-end: 8px;
  font-weight: 400;
}

/* the source marks a second bullet level with a literal "o" prefix; the
   composer turns those into .atr-henig-privacy__sub items */
.atr-henig-privacy__body li.atr-henig-privacy__sub {
  margin-inline-start: 28px;
  list-style: circle;
}

@media (max-width: 767px) {
  .atr-henig-privacy__title .elementor-heading-title,
  .atr-henig-access__title .elementor-heading-title {
    font-size: 40px;
    letter-spacing: -1.5px;
  }

  .atr-henig-privacy__body,
  .atr-henig-access__body {
    font-size: 20px;
  }

  .atr-henig-privacy__body h2,
  .atr-henig-privacy__body h3,
  .atr-henig-access__body h2 {
    margin-block-start: 32px;
    font-size: 26px;
  }
}

/* ===== Header utility bar — Henig ===== */
.atr-henig-utilbar__inner {
  display: flex;
  align-items: center;
}

.atr-henig-utilbar__cluster {
  display: flex;
  align-items: center;
  gap: 11px;
  /* תופס את רוחב ה-widget */
}

/* דחיפת החיפוש לקצה השני (שמאל ב-RTL) */
.atr-henig-search {
  margin-inline-start: auto;
}

.atr-henig-utilbar {
  background: #fff;
  direction: rtl;
  display: flex;
  justify-content: flex-end;
}

.atr-henig-utilbar input.atr-henig-search__input {
  border: none;
  font-size: 100%;
}

.atr-henig-utilbar * {
  box-sizing: border-box;
}

.atr-henig-util-links {
  display: flex;
  align-items: center;
  gap: 11px;
}

.atr-henig-util-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #001F1C;
  font-size: 22px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.atr-henig-util-link svg {
  flex: 0 0 auto;
}

.atr-henig-util-link--catalog {
  color: #0A5950;
  font-weight: 700;
}

/* search — underline only, magnifier right / play-circle left, no input box */
.atr-henig-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 293px;
  border-block-end: 1px solid #0A5950;
  padding-block: 6px;
}

.atr-henig-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 22px;
  color: #001F1C;
}

/* The Elementor Kit "Form Fields" rules (.elementor-kit-N input[type=search])
   outrank the bare class and paint a boxed field — re-assert the underline-only
   look at higher specificity (same battle the utilbar override already fought). */
.atr-henig-search input.atr-henig-search__input[type="search"] {
  border: 0;
  background: transparent;
  padding: 0;
}

.atr-henig-search__input::placeholder {
  color: #588C86;
  opacity: 1;
}

.atr-henig-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.atr-henig-search__btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #0A5950;
}

.atr-henig-search__go {
  width: 30px;
  height: 30px;
  border: 1px solid #0A5950;
  border-radius: 50%;
  flex: 0 0 auto;
}

.atr-henig-search__go svg circle {
  stroke: none;
}

/* Utilbar 60% scale (reduced 40%) — scoped to .atr-henig-utilbar so the
   blog/FAQ search variants keep their own sizes */
.atr-henig-utilbar .atr-henig-util-link {
  font-size: 13px;
}

.atr-henig-utilbar .atr-henig-util-link svg {
  height: 13px;
  width: auto;
}

.atr-henig-utilbar input.atr-henig-search__input {
  font-size: 13px;
}

.atr-henig-utilbar .atr-henig-search {
  width: 176px;
  gap: 5px;
  padding-block: 4px;
}

.atr-henig-utilbar .atr-henig-search__btn svg {
  height: 15px;
  width: auto;
}

.atr-henig-utilbar .atr-henig-search__go {
  width: 18px;
  height: 18px;
}

.atr-henig-utilbar .atr-henig-search__go svg {
  width: 100%;
  height: 100%;
}

/* Account cluster (הרשמה/התחברות + סל) — Figma 46:6761, drawn at the utilbar
   60% scale (design: text 22px / circle 37px / basket 23px / gaps 16px) */
.atr-henig-util-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.atr-henig-util-account__login,
.atr-henig-util-account__cart {
  color: #0A5950;
}

.atr-henig-util-account__login {
  gap: 10px;
}

/* basket count bubble (catalog review 1108 C7) — rendered/refreshed by
   WooCommerce cart fragments; carries `hidden` while the cart is empty */
.atr-henig-util-account__cart {
  position: relative;
}

.atr-henig-cart-count {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 10.5px;
  block-size: 10.5px;
  padding-inline: 1.5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--primary-green, #0A5950);
  color: var(--primary-dark-green, #001F1C);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.atr-henig-cart-count[hidden] {
  display: none;
}

.atr-henig-util-account__avatar {
  display: inline-flex;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E7F0F0;
  overflow: hidden;
  flex: 0 0 auto;
}

/* the user glyph is intentionally oversized and bottom-clipped by the circle,
   like the Figma frame (icon 36px in a 37px circle, offset 7px from top) */
.atr-henig-utilbar .atr-henig-util-account__avatar svg {
  height: 21px;
  width: auto;
  margin-block-start: 4px;
}

/* Header ≤1280px: the 170px side padding + fixed 320px logo leave no room for
   the (nowrap) utilbar and it overlaps the logo — free horizontal space.
   .e-con boosts specificity above Elementor's generated element rules. */
@media (max-width: 1280px) {
  .elementor .e-con.atr-henig-head-wrapper {
    padding-inline: 32px;
  }

  .elementor .e-con.atr-henig-head-logo-wrap {
    width: 220px;
  }
}

/* ===== Sticky header ===== */
/* Elementor Pro renders the header document as a direct child of <body>
   (<header class="elementor elementor-13 elementor-location-header">), so a
   plain position:sticky holds for the full page height — no JS, no placeholder.
   The root container already carries background-color:#FFFFFF, so content
   scrolling underneath stays hidden. z-index sits above page content but well
   below Elementor's overlays/popups (9999) and the mobile menu overlay. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* logged-in view: the WP admin bar is fixed at 32px on wide screens */
.admin-bar .elementor-location-header {
  top: 32px;
}

/* ≤782px the admin bar is not fixed, so no offset is needed */
@media (max-width: 782px) {
  .admin-bar .elementor-location-header {
    top: 0;
  }
}
/* ===== End sticky header ===== */

/* FAQ-page variant (Figma 121:3543) — same component, pinned to the inline
   start above the accordion, design width/scale. Base pushes the bar to the
   inline end (blog/utilbar placement) — undo that here. */
.atr-henig-search--faq {
  margin-inline-start: 0;
  margin-inline-end: auto;
  width: 409px;
  max-width: 100%;
  padding-block: 16px;
}

.atr-henig-search--faq .atr-henig-search__input {
  font-size: 30px;
}

@media (max-width: 767px) {
  .atr-henig-search--faq {
    width: 100%;
  }

  .atr-henig-search--faq .atr-henig-search__input {
    font-size: 22px;
  }
}

.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
  background-color: var(--secondary-green-588C86, #588C86);
}

/* ===== End Header utility bar — Henig ===== */
/** ===== Footer ===== */
.atr-henig-footer__cols {
  align-items: flex-start;
}

/* the column headers are 26px h2s, so the Kit's -3px h2 tracking (sized for
   the 45px+ page headings) crushes them — Figma sets these at -0.66px */
.elementor-location-footer .elementor-heading-title {
  letter-spacing: -0.66px;
}

/* the fixed-width (flex:0 0 auto) columns must wrap, not overflow: a nowrap row
   pushes the last column past the viewport's inline-end edge and widens the
   whole document (page shift / logo cut below ~1230px, and the long-standing
   mobile horizontal overflow). Wrap only engages when space runs out. */
.elementor .e-con.atr-henig-footer__cols {
  flex-wrap: wrap;
}

/* Elementor's "grow" flex preset renders as flex:1 0 auto — shrink 0 — so the
   links block refuses to give way and the squeeze lands on the brand column.
   Let it shrink (min-width:0 lifts the content floor); the wrappable columns
   above absorb the deficit. */
.elementor .e-con.atr-henig-footer__links {
  flex-shrink: 1;
  min-width: 0;
}

/* same failure one level up: the main footer row (brand / links / brand, boxed
   container — the flex box is its .e-con-inner) squeezes the second brand
   column to a sliver and pushes it past the edge below ~1230px viewport.
   Scoped: above 1240px the design layout (brand column BESIDE the links,
   Figma 75:2882) must hold — the fluid logos absorb the small squeeze there. */
@media (max-width: 1240px) {
  .elementor .atr-henig-footer__main > .e-con-inner {
    flex-wrap: wrap;
  }
}

/* the brand logos are fluid (width:100% of their grow-ing column) — without a
   cap they blow up once the row wraps. Design sizes (Figma 75:2882): brand
   column 262px, henig logo 248x76, fine logo 262x99. min() keeps them fluid
   below the cap — a bare 262px would override Elementor's max-width:100% and
   spill out of a squeezed column. */
.elementor .atr-henig-footer__brand img {
  max-width: min(262px, 100%);
  height: auto;
}

/* the brand column is an e-con-full (width:100% = the whole row!) that only
   ever LOOKED right after flex-shrink crushed it. Pin it to the design width
   instead — never squeezed away, never full-row; the link columns (which can
   wrap) give way instead. */
.elementor .e-con.atr-henig-footer__brand {
  flex-shrink: 0;
  width: 262px;
}

/* when the row wraps (≤1240) the brand column gets its own line — center it */
@media (max-width: 1240px) {
  .elementor .e-con.atr-henig-footer__brand {
    margin-inline: auto;
  }
}

.atr-henig-footer__col {
  width: fit-content;
  max-width: max-content;
  flex: 0 0 auto;
  align-items: flex-start;
}

html[dir="rtl"] .atr-henig-footer__col {
  text-align: right;
}

.atr-henig-footer__links {
  width: fit-content;
}

.atr-henig-footer__main {
  width: 100%;
  max-width: var(--container-max-width, 1584px);
  margin-inline: auto;
}

/**
 * Footer links font size
 */
.atr-henig-footer__cols .atr-henig-footer__col .elementor-icon-list-item span,
.atr-henig-footer__cols .atr-henig-footer__col .elementor-icon-list-item a {
  font-size: 18px !important;
}

/* social icons row */
.atr-henig-footer__social {
  display: flex;
  align-items: center;
  gap: 4px;
}

.atr-henig-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 47px;
  block-size: 47px;
  border-radius: 50%;
  background: #D3E7E7;
  color: #0A5950;
  flex: 0 0 auto;
}

.atr-henig-footer__social-link svg {
  inline-size: 28px;
  block-size: 28px;
}

/* ---- credits row (studio credits + CreditGuard gateway badge) ----
   Last child of .atr-henig-footer, below __main. Built by
   tools/page-generator/compose-footer-credits.py — not in the editor.

   The footer root is flex-direction:row and previously had exactly one child
   (__main), so the direction never mattered. Adding a second child made the
   credits a second COLUMN beside __main (measured: each 960px, credits at x=0).
   Stacking the root is the fix — __main keeps its own internal row layout. */
.elementor .e-con.atr-henig-footer {
  flex-direction: column;
}

.elementor .e-con.atr-henig-footer__credits {
  width: 100%;
  /* Align with the footer COLUMNS above, not with __main's outer box: __main is
     1584 wide but carries 10px inline padding, so its content (.e-con-inner,
     where the columns live) is 1564 and inset 10px from __main's edges.
     Keeping __main's own 10px padding here reproduces that inset at every
     width — including below the cap, where the row would otherwise run
     edge-to-edge while the columns stayed inset (measured at 1100). */
  max-width: var(--container-max-width, 1584px);
  margin-inline: auto;
  margin-block-start: 32px;
  padding-block-start: 24px;
  padding-inline: 10px;
  /* hairline separator: the footer green lightened, not a new token */
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

/* Keep each credit as one unbreakable unit, so a wrap never orphans a word
   from its label ("Web" / "Development:" split across lines on mobile).
   The separator between them stays a normal break opportunity. */
.atr-henig-footer__credits-text .atr-henig-footer__credit {
  display: inline-block;
}

.atr-henig-footer__credits-text a {
  color: inherit;
  text-decoration: none;
}

/* Underline kept on hover/focus only: with no colour difference from the
   surrounding text (color:inherit) this is the sole affordance that these are
   links, and :focus-visible is what makes them findable by keyboard. */
.atr-henig-footer__credits-text a:hover,
.atr-henig-footer__credits-text a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* The CreditGuard logo is teal ink (#06627F) on transparent. Measured against
   the footer green (#0A5950) that is 1.20:1 — effectively invisible. A white
   pill takes the same mark to 6.86:1 and is how the badge is normally shown on
   dark ground. Do NOT drop the pill and recolour the logo instead: it is a
   third-party security mark and must not be restyled. */
.elementor .e-con.atr-henig-footer__credits-badge {
  flex: 0 0 auto;
  width: auto;
  background: #FFFFFF;
  border-radius: 4px;
  /* padding scaled down with the mark — 8px/12px around a 70px logo left the
     pill looking mostly empty */
  padding: 5px 8px;
}

.elementor .atr-henig-footer__credits-logo {
  display: block;
  width: 70px;
  height: auto;
}

/* the label carries the meaning; the mark beside it is supporting evidence.
   Keeps them on one line so the pill never separates from its text. */
.elementor .e-con.atr-henig-footer__credits-secure-group {
  flex: 0 0 auto;
  width: auto;
  flex-wrap: nowrap;
}

.atr-henig-footer__credits-secure {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .elementor .e-con.atr-henig-footer__credits {
    flex-direction: column-reverse; /* badge above the text on mobile */
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* logo stays 70px on mobile too — no separate mobile size now that the
     label beside it carries the meaning */
}

/** ===== End Footer ===== */

/** ===== mobile menu ===== */
@media (max-width: 767px) {

  /* הקיים שלך — משאיר את הטוגל צר ליד הלוגו */
  .elementor-element-add4771 {
    max-width: 48px !important;
  }

  /* חדש — נותן לתפריט הפתוח רוחב מלא, בלי תלות ב-48px */
  .elementor-element-add4771 .elementor-nav-menu--dropdown {
    width: 100vw !important;
    max-width: 100vw !important;
    inset-inline-end: 0 !important;
    /* RTL: עוגן לקצה ימין */
  }
}

/* ===== Home hero form ===== */
.atr-henig-hp-form__row {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.atr-henig-hp-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
}

.atr-henig-hp-field-lbl {
  font-size: 26px;
  color: #001F1C;
  text-align: start;
}

.elementor .atr-henig-hp-hero-form .e-form-input-base,
.elementor .atr-henig-hp-bottom-form .e-form-input-base,
.atr-henig-hp-field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #001F1C;
  border-radius: 0;
  padding-block: 4px;
  font-size: 26px;
  color: #001F1C;
  outline: none;
  box-shadow: none;
}

.elementor .atr-henig-hp-hero-form .e-form-input-base::placeholder,
.elementor .atr-henig-hp-bottom-form .e-form-input-base::placeholder,
.atr-henig-hp-field::placeholder {
  color: #001F1C;
  opacity: .6;
}

.atr-henig-hp-form__consent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  color: #001F1C;
}

.elementor .atr-henig-hp-hero-form .atr-henig-hp-submit,
.elementor .atr-henig-hp-hero-form .atr-henig-hp-submit button,
.elementor .atr-henig-hp-bottom-form .atr-henig-hp-submit,
.elementor .atr-henig-hp-bottom-form .atr-henig-hp-submit button,
.atr-henig-hp-submit {
  /* background: #0A5950;
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 16px 56px;
  font-size: 35px;
  cursor: pointer; */
}

/* ===== End hero form ===== */
.atr-henig-hp-approach__video-wrap {
  margin: 0 auto;
}

.atr-henig-hp-approach__video-wrap .atr-henig-hp-approach__video {
  border-radius: 8px;
}

@media (min-width: 767px) {
  .atr-henig-hp-approach__video-wrap .atr-henig-hp-approach__video {
    border-radius: 32px;
  }
}

/* mobile only: move submit button after the consent checkbox */
@media (max-width: 767px) {
  #atr-henig-hp-hero-form__form .atr-henig-hp-submit {
    order: 99;
  }
}

@media (max-width: 767px) {

  .elementor .atr-henig-hp-hero-form .e-form-input-base,
  .elementor .atr-henig-hp-bottom-form .e-form-input-base,
  .atr-henig-hp-field {
    height: 17px;
    align-self: stretch;
  }

}


.henig-center-loop-post {
  flex-direction: column !important;
}

.henig-center-loop-post-video-youtube.e-youtube-base {
  margin: 0 auto;
}

.henig-center-loop-post .henig-center-loop-post-text-1,
.henig-center-loop-post .henig-center-loop-post-text-2 {
  justify-content: center;
}

.henig-center-loop-post .henig-center-loop-post-text-1 h3 {
  color: var(--primary-green, #0A5950);
  text-align: center;
  font-family: "Almoni DL AAA";
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.henig-center-loop-post .henig-center-loop-post-text-2 h3 {
  color: var(--primary-dark-green, #001F1C);
  text-align: center;
  font-family: "Almoni DL AAA";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

@media (max-width: 767px) {
  .henig-center-loop-post .henig-center-loop-post-text-1 h3 {
    font-size: 26px;
    line-height: 100%;
    /* 26px */
    letter-spacing: -0.78px;
  }

  .henig-center-loop-post .henig-center-loop-post-text-2 h3 {
    font-size: 16px;
  }
}


/* ===== Single product template ===== */
/* the order button is now WooCommerce's native single add-to-cart widget
   (widget "woocommerce-product-add-to-cart"); style its button the same as the
   old Elementor button so the design is unchanged. !important is required to
   beat WooCommerce/Hello's default ".woocommerce button.button.alt" styling
   (higher specificity); scoped to the atr- class so it stays contained. */
.atr-henig-order-btn .elementor-button,
.atr-henig-order-btn button.single_add_to_cart_button,
.atr-henig-order-btn a.add_to_cart_button {
  background-color: var(--primary-green, #0A5950) !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 16px 56px !important;
  font-size: 21px !important;
  font-weight: 700 !important;
}

.atr-henig-order-btn .elementor-button:hover,
.atr-henig-order-btn .elementor-button:focus,
.atr-henig-order-btn button.single_add_to_cart_button:hover,
.atr-henig-order-btn button.single_add_to_cart_button:focus,
.atr-henig-order-btn a.add_to_cart_button:hover,
.atr-henig-order-btn a.add_to_cart_button:focus {
  background-color: var(--primary-dark-green, #001F1C) !important;
  color: #fff !important;
}

/* single-button design: no quantity field (matches the previous button) */
.atr-henig-order-btn .quantity {
  display: none;
}

/* catalog card order button (catalog review 1108 C4) — the same pill as the
   product page, compacted to card scale. In a loop item the widget renders an
   <a class="add_to_cart_button">, not the single form's <button>. */
.atr-henig-card-order button.single_add_to_cart_button,
.atr-henig-card-order a.add_to_cart_button {
  padding: 12px 28px !important;
  font-size: 18px !important;
}

/* Woo appends a "View cart" link after an AJAX loop add — the popup/badge
   already cover that feedback */
.atr-henig-card-order .added_to_cart {
  display: none;
}

/* ===== Add-to-cart success popup (Figma node 4:2817) ===== */
.atr-henig-atc-popup {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.atr-henig-atc-popup.is-open {
  display: flex;
}

body.atr-henig-atc-lock {
  overflow: hidden;
}

.atr-henig-atc-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 31, 28, 0.55);
}

.atr-henig-atc-popup__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0 24px 60px rgba(0, 31, 28, 0.25);
}

.atr-henig-atc-popup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--primary-green, #0A5950);
}

.atr-henig-atc-popup__check {
  display: block;
  inline-size: 56px;
  block-size: 56px;
}

.atr-henig-atc-popup__title {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  color: var(--primary-green, #0A5950);
  text-align: center;
}

/* product row: image at the inline-start (right in RTL), text beside it */
.atr-henig-atc-popup__product {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding-block: 24px;
  border-block-start: 1px solid #D3E7E7;
  border-block-end: 1px solid #D3E7E7;
}

.atr-henig-atc-popup__img {
  flex: 0 0 auto;
  inline-size: 120px;
  block-size: 120px;
  object-fit: contain;
  border-radius: 12px;
}

.atr-henig-atc-popup__text {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
  color: var(--primary-dark-green, #001F1C);
}

.atr-henig-atc-popup__name {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.atr-henig-atc-popup__desc {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
}

.atr-henig-atc-popup__actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.atr-henig-atc-popup__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 100px;
  border: 2px solid #10574E;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.atr-henig-atc-popup__btn--primary {
  background-color: var(--primary-green, #0A5950);
  color: #fff;
}

.atr-henig-atc-popup__btn--primary:hover,
.atr-henig-atc-popup__btn--primary:focus {
  background-color: var(--primary-dark-green, #001F1C);
  color: #fff;
}

.atr-henig-atc-popup__btn--ghost {
  background-color: var(--primary-blue-01, #F4F8F8);
  color: var(--primary-green, #0A5950);
}

.atr-henig-atc-popup__btn--ghost:hover,
.atr-henig-atc-popup__btn--ghost:focus {
  background-color: #E4EFEF;
}

@media (max-width: 767px) {
  .atr-henig-atc-popup__card {
    padding: 32px 24px;
    gap: 24px;
    border-radius: 20px;
  }

  .atr-henig-atc-popup__title {
    font-size: 26px;
  }

  .atr-henig-atc-popup__name {
    font-size: 20px;
  }

  .atr-henig-atc-popup__img {
    inline-size: 96px;
    block-size: 96px;
  }

  .atr-henig-atc-popup__actions {
    flex-direction: column;
  }
}

/* ===== Cart page (Figma node 1:313) — styling the WooCommerce Cart Block =====
   The cart is the WooCommerce Cart Block (stable .wc-block-* classes, not
   Elementor hashes). Scoped to body.woocommerce-cart. Colours map to the Kit
   tokens; #d3e7e7 / #e7f0f0 / #10574e are design literals. */

/* --- page head / hero band (Figma 4:1030): light band, title right, soft
   decorative circle + arc pinned physical-left (decorative, does not flip).
   Shared with the checkout page (same band, title "קופה"). --- */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header {
  position: relative;
  overflow: hidden;
  /* full-bleed band: span the whole viewport even though the theme constrains
     the main content width */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: 0 40px;
  padding-block: 56px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* exact decoration exported from Figma (node 4:1030), pinned to the physical
     left; the right of the band stays the base colour where the title sits */
  background-color: #F4F8F8;
  background-image: url("images/cart-hero-bg.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}
body.woocommerce-cart .page-header .entry-title,
body.woocommerce-checkout .page-header .entry-title {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--site-content-width, 1584px);
  margin: 0 auto;
  padding-inline: clamp(24px, 8.85vw, 170px);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  text-align: start;
  color: var(--primary-green, #0A5950);
}

@media (max-width: 767px) {
  body.woocommerce-cart .page-header,
  body.woocommerce-checkout .page-header {
    min-height: 120px;
    padding-block: 32px;
  }
  body.woocommerce-cart .page-header .entry-title,
  body.woocommerce-checkout .page-header .entry-title {
    font-size: 30px;
  }
}

/* the full-bleed hero is 100vw by design; clip the tiny (scrollbar-width)
   horizontal overflow it creates so the page never shows a horizontal scrollbar
   (CDP confirmed .page-header is the only element exceeding the viewport) */
body.woocommerce-cart,
body.woocommerce-checkout {
  overflow-x: clip;
}

/* two columns: items list (right in RTL) + summary card (left) */
body.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
  gap: 48px;
  align-items: flex-start;
}
body.woocommerce-cart .wc-block-cart__sidebar {
  flex: 0 0 34%;
  box-sizing: border-box;
  padding: 40px;
  background: var(--primary-blue-01, #F4F8F8);
  border: 0;
  border-radius: 24px;
}
/* force the two-column layout on desktop (WooCommerce only adds its is-large
   row class via a ResizeObserver, which is unreliable — pin it here) */
@media (min-width: 1025px) {
  body.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  body.woocommerce-cart .wc-block-cart__main {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- summary card contents --- */
/* the Cart Block renders its labels client-side (JS i18n), so the fixed labels
   are overridden with CSS ::before/::after to match the design wording. */
body.woocommerce-cart .wc-block-cart__totals-title {
  display: block;
  margin: 0 0 24px;
  padding: 0;
  font-size: 0;
  text-align: start;
}
body.woocommerce-cart .wc-block-cart__totals-title::before {
  content: "סיכום הזמנה";
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.9px;
  color: var(--primary-green, #0A5950);
}

/* keep only the total + checkout (per design). Reversible: remove this block to
   restore coupon / shipping / taxes / express payment. */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-shipping-block,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-taxes-block,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-discount-block,
body.woocommerce-cart .wp-block-woocommerce-cart-express-payment-block,
body.woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
  display: none !important;
}

body.woocommerce-cart .wc-block-components-totals-item {
  padding: 0 0 24px;
}
body.woocommerce-cart .wc-block-components-totals-item__label {
  font-weight: 700;
  font-size: 24px;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-cart .wc-block-components-totals-item__value {
  font-weight: 700;
  font-size: 24px;
  color: var(--primary-dark-green, #001F1C);
}
/* relabel the total line to the design wording "סכום ביניים" */
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 0;
}
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::before {
  content: "סכום ביניים";
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-dark-green, #001F1C);
}
/* hide the tax hint under the total */
body.woocommerce-cart .wc-block-components-totals-footer-item__tax-value,
body.woocommerce-cart .wc-block-components-totals-item__description {
  display: none;
}

/* checkout button → green pill */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button {
  width: 100%;
  min-height: 0;
  padding: 16px 40px;
  border-radius: 100px;
  border: 2px solid #10574E;
  background: var(--primary-green, #0A5950);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:focus {
  background: var(--primary-dark-green, #001F1C);
  color: #fff;
}
/* button label → design wording */
body.woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
  font-size: 0;
}
body.woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text::after {
  content: "המשך לתשלום";
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

/* --- cart items list --- */
body.woocommerce-cart .wc-block-cart-items__header {
  display: none;
}
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart-items__row,
body.woocommerce-cart .wc-block-cart-item__wrap,
body.woocommerce-cart .wc-block-cart-item__product,
body.woocommerce-cart .wc-block-cart-item__quantity,
body.woocommerce-cart .wp-block-woocommerce-cart-line-items-block {
  border: 0 !important;
}
body.woocommerce-cart .wc-block-cart-items__row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border: 0 !important;
}
/* one clean full-width divider under each row (a pseudo-line spans everything,
   including under the image, unlike the cell borders WooCommerce draws) */
body.woocommerce-cart .wc-block-cart-items__row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: #D3E7E7;
}

/* image at the inline-start (right in RTL) — the cell hugs the bottle so there
   is no empty gap between the details and the image */
body.woocommerce-cart .wc-block-cart-item__image {
  flex: 0 0 auto;
  width: auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
body.woocommerce-cart .wc-block-cart-item__image img {
  width: auto !important;
  height: 180px;
  object-fit: contain;
}

/* hide the separate line-total column; the price shows inside the product cell */
body.woocommerce-cart .wc-block-cart-item__total {
  display: none;
}

/* product cell: text column (name / desc / price) on the right, quantity + trash
   on the left */
/* do NOT grow: keep the item content clustered next to the image on the right
   (per the design) instead of stretching it across the whole column */
body.woocommerce-cart .wc-block-cart-item__product {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
}
/* one horizontal row inside the product cell: text column (name / desc / price,
   right) + quantity & trash (left). grid is forced with !important because
   WooCommerce sets its own display on .wc-block-cart-item__wrap. In RTL, grid
   column 1 is the right column. */
body.woocommerce-cart .wc-block-cart-item__wrap {
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  column-gap: 32px;
  align-items: center;
  justify-content: start;
  text-align: start;
}
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-name {
  grid-area: 1 / 1 / 2 / 2 !important;
  max-width: 340px;
  margin: 0 0 8px !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: var(--primary-dark-green, #001F1C) !important;
  text-decoration: none !important;
}
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-metadata {
  grid-area: 2 / 1 / 3 / 2 !important;
  max-width: 340px;
  margin: 0 0 8px !important;
  font-size: 16px;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__prices {
  grid-area: 3 / 1 / 4 / 2 !important;
  margin: 0 !important;
}
body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price {
  font-weight: 400;
  font-size: 28px;
  color: var(--primary-green, #0A5950);
}
body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
  grid-area: 1 / 2 / 4 / 3 !important;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 !important;
}

/* quantity stepper: boxed − / + around the number */
body.woocommerce-cart .wc-block-components-quantity-selector {
  border: 0;
  gap: 12px;
  align-items: center;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input {
  width: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 22px;
  font-weight: 400;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-cart .wc-block-components-quantity-selector__button {
  position: static;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: #E7F0F0;
  color: var(--primary-dark-green, #001F1C);
  font-size: 20px;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  background: #D3E7E7;
}

/* remove item → trash icon (design has an icon, not the "Remove item" text) */
body.woocommerce-cart .wc-block-cart-item__remove-link {
  display: inline-block !important;
  overflow: hidden;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: -9999px;
  white-space: nowrap;
  border: 0;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001F1C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13a2 2 0 0 0 2 1h8a2 2 0 0 0 2-1l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E") !important;
}

/* --- related products ("אולי יעניין אתכם גם") --- */
.atr-henig-cart-related {
  margin-block-start: 60px;
  overflow-x: clip;
}
.atr-henig-cart-related .woocommerce {
  max-width: 100%;
}
.atr-henig-cart-related__title {
  margin: 0 0 40px;
  font-weight: 700;
  font-size: 48px;
  text-align: start;
  color: var(--primary-green, #0A5950);
}
.atr-henig-cart-related ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin: 0;
  max-width: 100%;
}
.atr-henig-cart-related ul.products::before,
.atr-henig-cart-related ul.products::after {
  content: none !important;
}
.atr-henig-cart-related ul.products li.product {
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  text-align: start;
}
/* keep product images responsive — without max-width the intrinsic image size
   forces the grid track wider than the viewport and creates a horizontal
   scrollbar on mobile */
.atr-henig-cart-related ul.products li.product img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 20px;
  margin-block-end: 16px;
}
.atr-henig-cart-related ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-dark-green, #001F1C);
}
.atr-henig-cart-related ul.products li.product .price {
  color: var(--primary-green, #0A5950);
  font-weight: 700;
  font-size: 22px;
}
.atr-henig-cart-related ul.products li.product .button {
  display: none;
}

@media (max-width: 1024px) {
  body.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
    flex-direction: column;
  }
  body.woocommerce-cart .wc-block-cart__sidebar {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  body.woocommerce-cart .wc-block-cart-items__row {
    gap: 16px;
  }
  body.woocommerce-cart .wc-block-cart-item__image img {
    height: 120px;
  }
  /* stack the details vertically on a phone so the row fits the viewport
     (the desktop text+quantity+image side-by-side is ~600px wide) */
  body.woocommerce-cart .wc-block-cart-item__product {
    flex: 1 1 auto;
  }
  body.woocommerce-cart .wc-block-cart-item__wrap {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body.woocommerce-cart .wc-block-cart-item__wrap > * {
    grid-area: auto !important;
    max-width: 100% !important;
  }
  body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-name {
    width: 100%;
    font-size: 20px;
    text-align: center;
  }
  body.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
    margin-block-start: 4px !important;
  }
  /* the cart block itself is alignwide — cap it to the viewport on mobile */
  body.woocommerce-cart .wp-block-woocommerce-cart {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  body.woocommerce-cart .wc-block-cart__sidebar {
    padding: 24px;
  }
  body.woocommerce-cart .atr-henig-cart-related,
  body.woocommerce-checkout .atr-henig-cart-related {
    max-width: 100vw !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }
  .atr-henig-cart-related ul.products {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .atr-henig-cart-related__title {
    font-size: 28px;
  }
}

.atr-henig-product-accordion .elementor-accordion-item {
  background: #F4F8F8;
  border: 0;
  border-radius: 12px;
  margin-block-end: 6px;
}

.atr-henig-product-accordion .elementor-tab-title {
  padding: 24px 32px;
  font-weight: 700;
  color: var(--primary-dark-green, #001F1C);
}

.atr-henig-product-accordion .elementor-tab-content {
  border-block-start: 0;
  padding-block-start: 0;
  padding-inline: 32px;
  padding-block-end: 24px;
}

/* The Kit binds the site BODY to the Primary global typography (weight 700),
   so any flowing text without its own weight inherits bold. The accordion
   content and the "על המוצר" description are wpautop/the_content <p> that set
   no weight — force them to normal. */
.atr-henig-product-accordion .elementor-tab-content,
.atr-henig-product-accordion .elementor-tab-content p,
.atr-henig-product-desc,
.atr-henig-product-desc p {
  font-weight: 400;
}

/* catalog review 1108 C6 — accordion body 20% smaller than the 26px body
   default (26px → 21px), title size untouched */
.atr-henig-product-accordion .elementor-tab-content,
.atr-henig-product-accordion .elementor-tab-content p {
  font-size: 21px;
  line-height: 1.23;
}

/* ===== Single-product CTA strip (2026-08-13, Figma i5j6LNqnNaKdyBHmXIbnHe:
   desktop 3:882 @1920x1230, mobile 1:978 @390x586) =====
   Rendered by the [atr_henig_product_cta] shortcode (functions.php) inside
   the product template's last container. The scenic background (photo arcs +
   bottle shadow + #F4F8F8) is ONE flat render per breakpoint, composed from
   the design's own layers (tools note: images/atr-henig-pstrip-bg*.webp);
   the bottle and badge are per-product attachments from product meta.
   All geometry is % of the aspect-locked strip; type scales in cqi so it
   tracks the STRIP's width even if the container is boxed (vw fallback
   first). PHYSICAL left/right on purpose: the positions are tied to the
   background artwork, which does not flip with direction. #10574e is a
   design literal (see the experts-band note), #F4F8F8 = kit "Primary blue
   01". */
.atr-henig-pstrip {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1920 / 1230;
  overflow: hidden;
  background-color: var(--e-global-color-d1fe25c, #F4F8F8);
  background-image: url("images/atr-henig-pstrip-bg.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* .atr-henig-pstrip qualifier: the Kit's `.elementor-kit-5 h2` (45px)
   out-specifies a lone class — measured via getMatchedStylesForNode */
.atr-henig-pstrip h2.atr-henig-pstrip__head {
  position: absolute;
  top: 8.13%; /* 100/1230 */
  right: 8.854%; /* 170/1920 */
  margin: 0;
  color: #10574e;
  font-weight: 700;
  font-size: 4.6875vw; /* 90/1920 */
  font-size: 4.6875cqi;
  line-height: 1.2;
  letter-spacing: -0.02em; /* -1.8px at 90px */
  text-align: right;
}

.atr-henig-pstrip__sub {
  display: block;
  font-weight: 400;
  font-size: 0.6667em; /* 60/90 */
}

/* the render is cropped by its design box: right edge and bottom bleed out */
.atr-henig-pstrip__bottle {
  position: absolute;
  left: 51.146%; /* 982/1920 */
  top: 14.959%; /* 184/1230 */
  width: 58.75%; /* 1128/1920 */
  height: 79.675%; /* 980/1230 */
  overflow: hidden;
}

.atr-henig-pstrip__bottle img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.atr-henig-pstrip__badge {
  position: absolute;
  left: 56.952%; /* 1093.48/1920 */
  top: 63.9%; /* 786/1230 */
  width: 23.125%; /* 444/1920 */
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atr-henig-pstrip__badge img {
  display: block;
  width: 82.26%; /* 365.214/443.994 */
  height: auto;
  transform: rotate(14.28deg);
}

/* Liquid (dropper) variant — measured on the ORN strip 47:10194: the same
   1128x980 box, but the tall render floats inside it (img 43.48% x 85.12%
   at 30.62%/14.88%) and the badge is ~7.5% larger. The shortcode adds the
   modifier by the render's aspect ratio. */
.atr-henig-pstrip--liquid .atr-henig-pstrip__bottle img {
  position: absolute;
  left: 30.62%;
  top: 14.88%;
  width: 43.48%;
}

.atr-henig-pstrip--liquid .atr-henig-pstrip__badge {
  left: 56.927%; /* 1093/1920 */
  top: 62.54%; /* 769.24/1230 */
  width: 24.871%; /* 477.527/1920 */
}

@media (max-width: 1024px) {
  .atr-henig-pstrip {
    aspect-ratio: 390 / 586;
    background-image: url("images/atr-henig-pstrip-bg-mobile.webp");
  }

  .atr-henig-pstrip h2.atr-henig-pstrip__head {
    top: 79.18%; /* 464/586 (432 block + 32 padding) */
    right: 8.205%; /* 32/390 */
    font-size: 8.974vw; /* 35/390 */
    font-size: 8.974cqi;
  }

  .atr-henig-pstrip__sub {
    font-size: 0.4571em; /* 16/35 */
  }

  .atr-henig-pstrip__bottle {
    left: 30%; /* 117/390 */
    top: 22.014%; /* 129/586 */
    width: 87.949%; /* 343/390 */
    height: 50.853%; /* 298/586 */
  }

  .atr-henig-pstrip__badge {
    left: 38.7%; /* 150.93/390 */
    top: 53.279%; /* 312.21/586 */
    width: 34.647%; /* 135.122/390 */
  }

  /* liquid: no per-product mobile frames exist in the design — the desktop
     deltas (badge +7.5% size, -16.76px y at 1230) are scaled to the mobile
     box; the bottle-img fractions are box-relative and inherit as-is */
  .atr-henig-pstrip--liquid .atr-henig-pstrip__badge {
    left: 38.59%; /* 150.5/390 */
    top: 52.41%; /* 307.1/586 */
    width: 37.26%; /* 145.3/390 */
  }
}

/* ===== Glossary page — מילון מונחים (Figma 118:1482) ===== */

/* Alphabet index nav (Figma 124:3672) */
.atr-henig-gloss-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 922px;
  margin-inline: auto;
  padding-block-end: 24px;
  border-block-end: 2px solid var(--primary-green, #0A5950);
}

.atr-henig-gloss-nav__letter {
  inline-size: 40px;
  text-align: center;
  color: var(--primary-green, #0A5950);
  font-size: 35px;
  line-height: 1.2;
  text-decoration: none;
}

.atr-henig-gloss-nav__letter:hover,
.atr-henig-gloss-nav__letter:focus {
  color: var(--primary-dark-green, #001F1C);
  font-weight: 700;
}

/* Letter row (Figma 118:2063) — big letter at the inline start, divider,
   terms fill the rest. The divider is the letter cell's end border. */
.atr-henig-gloss__row {
  scroll-margin-block-start: 140px;
}

.elementor .atr-henig-gloss__letter {
  flex: 0 0 180px;
  /* 100px letter cell + 80px gap to the divider */
  padding-inline-end: 80px;
  border-inline-end: 1px solid var(--primary-green, #0A5950);
}

.atr-henig-gloss__letter .elementor-heading-title {
  color: var(--primary-dark-green, #001F1C);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3.6px;
}

.elementor .atr-henig-gloss__terms {
  flex: 1 1 0;
  min-width: 0;
  padding-block: 24px;
  color: var(--primary-dark-green, #001F1C);
}

/* Figma: terms column is 873px, hugging the divider. Specificity must beat
   Elementor's `.elementor.elementor .e-con>.elementor-widget{max-width:100%}`. */
.elementor .atr-henig-gloss__row .elementor-widget.atr-henig-gloss__terms {
  max-inline-size: 873px;
}

.atr-henig-gloss__terms h3 {
  margin: 0 0 16px;
  color: var(--primary-dark-green, #001F1C);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.35px;
}

/* client category tag after the term name (docx update 2026-08-11),
   e.g. "אבחון לשון [שיטת אבחון]" */
.atr-henig-gloss__tag {
  font-size: 0.55em;
  font-weight: 400;
  color: var(--primary-green, #0A5950);
  white-space: nowrap;
}

.atr-henig-gloss__tag::before {
  content: "[";
}

.atr-henig-gloss__tag::after {
  content: "]";
}

.atr-henig-gloss__terms p {
  margin: 0 0 32px;
  font-size: 30px;
  line-height: 1.2;
}

.atr-henig-gloss__terms p:last-child {
  margin-block-end: 0;
}

@media (max-width: 767px) {
  .atr-henig-gloss-nav {
    padding-block-end: 12px;
  }

  .atr-henig-gloss-nav__letter {
    inline-size: 28px;
    font-size: 22px;
  }

  .elementor .atr-henig-gloss__letter {
    flex: 0 0 72px;
    padding-inline-end: 20px;
  }

  .atr-henig-gloss__letter .elementor-heading-title {
    font-size: 64px;
    letter-spacing: -1.9px;
  }

  .elementor .atr-henig-gloss__terms {
    padding-block: 8px;
  }

  .atr-henig-gloss__terms h3 {
    margin-block-end: 8px;
    font-size: 26px;
    letter-spacing: -0.78px;
  }

  .atr-henig-gloss__terms p {
    margin-block-end: 20px;
    font-size: 18px;
  }
}

/* ===== End Glossary page ===== */


/* ===== Header mega menu (Figma 177:3820 "תפריטים") =====
   Elementor Pro nested Menu widget, generated by
   tools/page-generator/compose-mega-menu.py — fix in the script, not here
   or in the editor, for anything structural. */

/* --- top nav row --- */
.atr-henig-mega .e-n-menu-heading {
  width: 100%;
  justify-content: space-between;
}

.atr-henig-mega .e-n-menu-title {
  padding: 8px;
}

.atr-henig-mega .e-n-menu-title-text {
  color: var(--primary-dark-green, #001F1C);
  font-size: 35px;
  /* the widget's resting weight is 500, which Almoni does not ship — the
     browser synthesises it. Regular here, bold on hover/current below. */
  font-weight: 400;
  line-height: 1.2;
}

/* laptop-width title sizing: step the 35px base down as the horizontal menu
   loses room. Scoped to >=1025px so the burger panel (<=1024px) is untouched;
   ordered smallest-max-width last so the narrower step wins. */
@media (min-width: 1025px) and (max-width: 1709px) {
  .atr-henig-mega .e-n-menu-title-text {
    font-size: 24px;
  }
}

@media (min-width: 1025px) and (max-width: 1332px) {
  .atr-henig-mega .e-n-menu-title-text {
    font-size: 21px;
  }
}

@media (min-width: 1025px) and (max-width: 1221px) {
  .atr-henig-mega .e-n-menu-title-text {
    font-size: 17px;
  }
}

/* hover / open state: bold green + thick underline (Figma 176:2152).
   The same treatment marks the CURRENT category so a visitor sees where they
   are: `.e-current` is the widget's own class (set only when the item's own URL
   equals the permalink), `.atr-henig-mega-current` is ours — mega-menu.js adds
   it to the parent whose panel contains the current page, which is the case the
   widget cannot detect (client review, slides 94 / 100 / 112). */
.atr-henig-mega .e-n-menu-title {
  border-block-end: 4px solid transparent;
}

.atr-henig-mega .e-n-menu-title:hover,
.atr-henig-mega .e-n-menu-title[aria-expanded="true"],
.atr-henig-mega .e-n-menu-item:hover > .e-n-menu-title,
.atr-henig-mega .e-n-menu-title.e-current,
.atr-henig-mega .e-n-menu-title.atr-henig-mega-current {
  border-block-end-color: var(--secondary-green-588C86, #588C86);
}

.atr-henig-mega .e-n-menu-title:hover .e-n-menu-title-text,
.atr-henig-mega .e-n-menu-title[aria-expanded="true"] .e-n-menu-title-text,
.atr-henig-mega .e-n-menu-item:hover > .e-n-menu-title .e-n-menu-title-text,
.atr-henig-mega .e-n-menu-title.e-current .e-n-menu-title-text,
.atr-henig-mega .e-n-menu-title.atr-henig-mega-current .e-n-menu-title-text {
  color: var(--primary-green, #0A5950);
  font-weight: 700;
}

/* Review 0908 slide 3: only ONE item is ever marked. While the visitor hovers
   another topic or holds its panel open, the current-page marker (e.g. the line
   under "ראשי" on the homepage) yields to the hovered/open one. */
@media (min-width: 1025px) {
  .atr-henig-mega:has(.e-n-menu-item:hover, .e-n-menu-item.atr-mega-open)
    .e-n-menu-item:not(:hover):not(.atr-mega-open) > .e-n-menu-title.e-current,
  .atr-henig-mega:has(.e-n-menu-item:hover, .e-n-menu-item.atr-mega-open)
    .e-n-menu-item:not(:hover):not(.atr-mega-open) > .e-n-menu-title.atr-henig-mega-current {
    border-block-end-color: transparent;
  }

  .atr-henig-mega:has(.e-n-menu-item:hover, .e-n-menu-item.atr-mega-open)
    .e-n-menu-item:not(:hover):not(.atr-mega-open) > .e-n-menu-title.e-current .e-n-menu-title-text,
  .atr-henig-mega:has(.e-n-menu-item:hover, .e-n-menu-item.atr-mega-open)
    .e-n-menu-item:not(:hover):not(.atr-mega-open) > .e-n-menu-title.atr-henig-mega-current .e-n-menu-title-text {
    color: var(--primary-dark-green, #001F1C);
    font-weight: 400;
  }
}

/* the widget's own dropdown chevron is not part of the design */
.atr-henig-mega .e-n-menu-dropdown-icon,
.atr-henig-mega .e-n-menu-dropdown-icon-closed,
.atr-henig-mega .e-n-menu-dropdown-icon-opened {
  display: none !important;
}

/* Desktop open state: the parent-hover opens the panel (widget adds .e-active),
   but on mouseleave of the TITLE the widget strips .e-active — before the cursor
   can even reach the panel. mega-menu.js adds .atr-mega-open on the hovered item
   and manages its lifetime (switches on hovering another topic, auto-closes
   shortly after the pointer leaves the item, X closes immediately — review 0908
   slide 3). These rules re-assert the widget's own open state (top:100% position
   + showing the inner .e-con) for an open but no-longer-.e-active panel.
   Desktop only; below tablet it's the hamburger. */
@media (min-width: 1025px) {
  .atr-henig-mega .e-n-menu-item.atr-mega-open > .e-n-menu-content {
    top: 100%;
    opacity: 1;
    visibility: visible;
  }

  .atr-henig-mega .e-n-menu-item.atr-mega-open > .e-n-menu-content > .e-con {
    display: flex !important;
  }
}

/* --- open panel --- */
.elementor .atr-henig-mega-panel {
  padding: 0;
}

.elementor .atr-henig-mega-panel__body {
  position: relative;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 80px;
  min-height: 621px;
  padding: 105px 170px;
  background-color: var(--primary-blue-01, #F4F8F8);
  overflow: hidden;
}

/* text/links/close sit above both decorative layers */
.elementor .atr-henig-mega-panel__body > * {
  position: relative;
  z-index: 2;
}

/* Panel photos removed 2026-08-07 by client request: NO photo in any dropdown
   panel — only the background graphic stays. The photo layer was the panel
   body's ::before, with a per-panel positioned box; both are gone. The assets
   (images/mega-*.png, images/woman-transparent-1.png) are kept on disk, simply
   unreferenced from here. This also reverses review item B12 — see
   documentation/desktop-review-followup.md. */

/* leaf line-art watermark (::after) — the panel's background graphic */
.elementor .atr-henig-mega-panel__body::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -628px;
  left: -647px;
  width: 1137px;
  height: 1629px;
  background: url("images/mega-leaf.svg") no-repeat center / contain;
  transform: rotate(-21.86deg);
  pointer-events: none;
}

/* panel title — Figma is 60px bold in a fixed 294px column, but that column
   wrapped every title onto two lines. Client (2026-08-07): the title must sit
   on ONE line where possible, WITHOUT forcing nowrap. So the widget is sized to
   its content (inline-size:auto beats Elementor's widget width:100%) with the
   294px kept only as a minimum, and flex-shrink left at 1 so a narrow viewport
   still wraps it rather than overflowing the panel. */
.elementor .atr-henig-mega-panel__body .elementor-widget.atr-henig-mega-panel__title {
  flex: 0 1 auto;
  inline-size: auto;
  min-inline-size: 294px;
  max-inline-size: none;
}

.atr-henig-mega-panel__title .elementor-heading-title {
  color: var(--primary-green, #0A5950);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.16px;
}

/* links column (Figma: 45px, gap 16, 387px — now 36px, so the 387px minimum
   drops to 310px and stops the column reserving width the title needs) */
.elementor .atr-henig-mega-panel__body .elementor-widget.atr-henig-mega-panel__links {
  flex: 0 0 auto;
  inline-size: auto;
  min-inline-size: 310px;
  max-inline-size: 720px;
}

.atr-henig-mega-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* sub-items: explicit 400 — they used to inherit, and the header CSS bolds
   <a> inconsistently, so they read heavier than the design intends. Size
   dropped 45→36px to widen the gap against the 72px title (client 2026-08-07) */
.atr-henig-mega-links a {
  color: var(--primary-green, #0A5950);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.08px;
  text-decoration: none;
}

.atr-henig-mega-links a:hover,
.atr-henig-mega-links a:focus {
  font-weight: 700;
}

/* third-level flyout (תסמיני עיכול; Figma 177:3535) */
.atr-henig-mega-has-fly {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* No chevron marker on items that own a flyout (removed 2026-08-02, by
   request) — the flyout still opens on hover/focus, it is just not flagged.
   images/mega-chevron.svg is now unreferenced but kept on disk. */

.atr-henig-mega-fly {
  display: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(100% + 40px);
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0 32px;
  list-style: none;
  border-inline-start: 1px solid var(--primary-green, #0A5950);
  white-space: nowrap;
}

/* invisible bridge across the 40px gap — it is a descendant of the li, so the
   cursor moving from the parent into the flyout stays within the li's :hover
   area and the flyout does not blink out mid-gap */
.atr-henig-mega-fly::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -48px;
  width: 48px;
}

.atr-henig-mega-has-fly:hover > .atr-henig-mega-fly,
.atr-henig-mega-has-fly:focus-within > .atr-henig-mega-fly {
  display: flex;
}

.atr-henig-mega-fly a {
  font-size: 30px;
  letter-spacing: -0.9px;
}

/* close button — pushed to the inline end (far left in RTL) */
.elementor .atr-henig-mega-closewrap {
  margin-inline-start: auto;
}

.atr-henig-mega-close {
  inline-size: 57px;
  block-size: 57px;
  padding: 14px;
  border: 0;
  background: none;
  color: var(--primary-green, #0A5950);
  cursor: pointer;
}

.atr-henig-mega-close svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* lead-form strip inside the panel — white band, hero-form look is inherited
   from the cloned .atr-henig-hp-hero-form classes */
.elementor .atr-henig-mega-form {
  padding: 50px 170px;
  background-color: #FFFFFF;
}

/* --- narrow desktop: buy content width back from the panel's side padding so
   the one-line title keeps fitting. 32px at ≤1280 also re-aligns the panel with
   the head-wrapper, which already drops to 32px at that width. --- */
@media (max-width: 1440px) {
  .elementor .atr-henig-mega-panel__body {
    padding-inline: 80px;
  }
}

@media (max-width: 1280px) {
  .elementor .atr-henig-mega-panel__body {
    padding-inline: 32px;
  }
}

/* --- dropdown range (widget switches to hamburger below the tablet
   breakpoint, 1024px — wider than the project's 767px mobile rule on
   purpose, to match the widget's own switch point) --- */
@media (max-width: 1024px) {
  /* let the navbar row (burger + logo, space-between) lay out — the widget
     must stop claiming the full row width. Elementor sizes container widgets
     with --container-widget-width, so override the variable too. */
  .elementor .atr-henig-header-navbar .elementor-widget-n-menu,
  .elementor .atr-henig-header-navbar .elementor-widget-n-menu .e-n-menu {
    --container-widget-width: auto;
    width: auto;
    flex-grow: 0;
  }

  /* the navbar shrinks to content inside the wrapper's mobile row, which
     wraps burger and logo into two stacked lines. The container's flex
     sizing ignores width/flex-basis here (verified empirically) — only a
     min size is honored, so that is what forces the full row. */
  .elementor .atr-henig-head-wrapper > .atr-henig-header-navbar {
    min-inline-size: 100%;
  }

  .elementor .atr-henig-header-navbar > .e-con-inner {
    width: 100%;
    /* !important so no Elementor container var can flip this to column and
       stack the burger over the logo at any phone width */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
  }

  /* plain 24px burger (Figma 5:3716) instead of the widget's boxed toggle */
  .atr-henig-mega .e-n-menu-toggle {
    inline-size: auto;
    block-size: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary-dark-green, #001F1C);
  }

  .atr-henig-mega .e-n-menu-toggle-icon {
    font-size: 24px;
  }

  .atr-henig-mega .e-n-menu-toggle-icon svg {
    inline-size: 24px;
    block-size: 24px;
  }
}

/* ===== Lead-form busy overlay ===== */
/* Spinner shown from submit until the questionnaire redirect (or removed on
   error). Driven by assets/js/lead-form-redirect.js on Form_hp_* forms. */
.atr-henig-form-busy {
  position: relative;
}

.atr-henig-form-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(244, 248, 248, 0.72); /* primary-blue-01 @ 72% */
  z-index: 5;
}

.atr-henig-form-spinner {
  inline-size: 44px;
  block-size: 44px;
  border: 4px solid rgba(10, 89, 80, 0.25);
  border-top-color: var(--primary-green, #0a5950);
  border-radius: 50%;
  animation: atr-henig-spin 0.7s linear infinite;
}

@keyframes atr-henig-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .atr-henig-form-spinner {
    animation-duration: 1.6s;
  }
}
/* ===== End lead-form busy overlay ===== */

/* --- mobile (Figma 5:3716: white row, logo + burger, soft shadow) --- */
@media (max-width: 767px) {
  /* the wrapper carries 170px side padding for the desktop layout, with no
     mobile override — on a phone that leaves only ~140px in the middle and
     squeezes the whole header. Clear it; the navbar supplies its own padding */
  .elementor .atr-henig-head-wrapper {
    padding-inline: 0;
  }

  /* shadow color = primary blue 02 token (#E7F0F0) at 50% */
  .elementor .atr-henig-header-navbar {
    padding: 16px 32px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 2px rgba(231, 240, 240, 0.5);
  }

  /* keep the navbar spanning the full mobile row so the burger and logo land
     at the two ends (space-between) instead of collapsing to content width.
     In the head-wrapper's flex column the navbar's WIDTH is the cross axis, so
     align-self:stretch (not width:100% alone) is what forces it full width */
  .elementor .atr-henig-head-wrapper > .atr-henig-header-navbar {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  /* the boxed inner otherwise caps at --content-width and centres, clustering
     the two items — force it full width so space-between reaches both edges */
  .elementor .atr-henig-header-navbar > .e-con-inner {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  /* mobile logo (Figma 5:3716): pin to a legible height and never let flex
     shrink it away — it sat at flex-shrink:1 and collapsed to a sliver.
     margin-inline-start:auto absorbs the free space and pushes the logo to
     the far end so the burger and logo sit at the two edges (Figma layout) */
  .elementor .atr-henig-header-navbar .henig-site-logo-mobile {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .elementor .atr-henig-header-navbar .henig-site-logo-mobile img {
    width: auto;
    max-width: none;
    height: 32px;
  }

  /* the collapsed burger widget takes only its own content width */
  .elementor .atr-henig-header-navbar .atr-henig-mega {
    flex: 0 0 auto;
  }

  .atr-henig-mega .e-n-menu-title-text {
    font-size: 22px;
  }

  .elementor .atr-henig-mega-panel__body {
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    padding: 32px;
    background-image: none;
  }

  /* column layout — the 294px desktop minimum would overflow a phone */
  .elementor .atr-henig-mega-panel__body .elementor-widget.atr-henig-mega-panel__title {
    flex-basis: auto;
    min-inline-size: 0;
  }

  .atr-henig-mega-panel__title .elementor-heading-title {
    font-size: 38px;
    letter-spacing: -1.14px;
  }

  .atr-henig-mega-links a {
    font-size: 20px;
    letter-spacing: -0.6px;
  }

  .atr-henig-mega-has-fly > a::after {
    inline-size: 24px;
    block-size: 24px;
    background-size: 14px auto;
  }

  /* flyout becomes an inline sub-list on touch layouts */
  .atr-henig-mega-fly {
    position: static;
    padding: 8px 16px 0;
  }

  .atr-henig-mega-fly a {
    font-size: 18px;
  }

  .atr-henig-mega-closewrap {
    display: none;
  }

  .elementor .atr-henig-mega-form {
    padding: 24px 16px;
  }
}

/* ===== End header mega menu ===== */


/* ===== Mobile menu overlay (Figma 179:1720 / 179:1896) =====
   Custom full-screen overlay generated by compose-mega-menu.py, driven by
   mega-menu.js. Replaces the Pro widget's mobile dropdown (which would show the
   full desktop panels). Shown only below the widget's tablet breakpoint. */

/* below the desktop breakpoint: hide the widget's dropdown list (keep its burger
   as the trigger), and let the overlay take over */
@media (max-width: 1024px) {
  .atr-henig-mega .e-n-menu-wrapper {
    display: none !important;
  }
}

/* the html widget wrapper must not affect layout at any width — the overlay
   itself is position:fixed, so take the wrapper fully out of flow */
.atr-henig-mmenu-wrap {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
}

/* ===== Mobile header icon strip (M1) =====
   Centered between the burger and the logo. 2026-08-13 final set: cart /
   מצאו סניף / dialer (tel:053-3955105) — desktop utilbar SVGs. The strip
   GROWS (flex:1) so its icons center in the burger↔logo space. Desktop
   keeps its utility bar, so the strip exists only in the widget's
   dropdown range. */
.elementor .elementor-widget.atr-henig-mbar-wrap {
  display: none;
}

@media (max-width: 1024px) {
  .elementor .elementor-widget.atr-henig-mbar-wrap {
    display: block;
    inline-size: auto;
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .atr-henig-mbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .atr-henig-mbar__link {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--primary-dark-green, #001F1C);
  }

  .atr-henig-mbar__link svg {
    inline-size: 22px;
    block-size: 22px;
  }

  /* five items in a 390 row: slim the side padding and the logo so nothing
     clips (the first text-link pass overflowed to 442). The 32px sides live
     on the head WRAPPER (a208bbb), not on the navbar. */
  .elementor .e-con.e-con.e-con.atr-henig-head-wrapper {
    padding-inline: 12px;
    margin-inline: 0;
  }

  /* the navbar carries its own 32px sides on top of the wrapper's */
  .elementor .e-con.e-con.e-con.atr-henig-header-navbar {
    padding-inline: 8px;
  }

  .elementor .elementor-widget.henig-site-logo-mobile img {
    inline-size: 96px;
    max-inline-size: 96px;
    block-size: auto;
  }
}

.atr-henig-mmenu {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  flex-direction: column;
  background: #FFFFFF;
  overflow: hidden;
}

.atr-henig-mmenu.is-open {
  display: flex;
}

/* body scroll lock while open */
.atr-mmenu-lock,
.atr-mmenu-lock body {
  overflow: hidden;
}

/* top bar — logo + close (mirrors the closed mobile header, Figma 5:3716) */
.atr-henig-mmenu__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 73px;
  padding: 16px 32px;
  background: #FFFFFF;
  box-shadow: 0 4px 2px rgba(231, 240, 240, 0.5);
}

.atr-henig-mmenu__logo {
  display: inline-flex;
  line-height: 0;
}

.atr-henig-mmenu__logo img {
  height: 41px;
  width: auto;
}

.atr-henig-mmenu__close {
  inline-size: 25px;
  block-size: 25px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-dark-green, #001F1C);
  cursor: pointer;
  line-height: 0;
}

.atr-henig-mmenu__close svg {
  inline-size: 100%;
  block-size: 100%;
}

/* scrollable body with the decorative art */
.atr-henig-mmenu__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* clip the decorative art (negative-left leaf/plant); scroll vertically only */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 32px;
  background: var(--primary-blue-01, #F4F8F8);
}

/* leaf line-art, faint, upper-left (design-specific artwork — physical left) */
.atr-henig-mmenu__body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -300px;
  width: 611px;
  height: 827px;
  background: url("images/mega-leaf.svg") no-repeat center / contain;
  transform: rotate(-15deg);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* plant photo, bottom-left corner */
.atr-henig-mmenu__body::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  left: -53px;
  width: 375px;
  height: 336px;
  background: url("images/mega-about.png") no-repeat center / cover;
  mix-blend-mode: darken;
  pointer-events: none;
  z-index: 0;
}

/* the list sits above the art */
.atr-henig-mmenu__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.atr-henig-mmenu__item {
  width: 100%;
}

/* top-level entry (button for expandable items, link otherwise) */
.atr-henig-mmenu__top {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-green, #0A5950);
  font-family: inherit;
  /* explicit so <a> and <button> entries render the same weight (Regular);
     only the expanded parent goes Bold below */
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.72px;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
}

/* expanded parent goes bold (Figma active state) */
.atr-henig-mmenu__item--has-sub.is-open > .atr-henig-mmenu__top {
  font-weight: 700;
}

/* accordion sub-list */
.atr-henig-mmenu__sub {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.atr-henig-mmenu__item--has-sub.is-open > .atr-henig-mmenu__sub {
  display: flex;
}

.atr-henig-mmenu__sub a {
  display: block;
  color: var(--primary-green, #0A5950);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.48px;
  text-align: right;
  text-decoration: none;
}

/* ===== End mobile menu overlay ===== */



/* ===== Health questionnaire (שאלון בריאות) — step states =====
   Structural styles live in the page's V4 local classes (composer:
   tools/page-generator/compose-health-questionnaire.py). The rules below
   only express the JS-driven states; all hooks are the composer's manual
   _cssid ids (atr-henig-hq-*) + state classes added by
   assets/js/health-questionnaire-steps.js. */

/* one step at a time — only once JS has tagged the form (no-JS keeps all
   steps visible and the form still submits) */
#atr-henig-hq-form.atr-henig-hq-js [id^="atr-henig-hq-step-"] {
  display: none;
}

#atr-henig-hq-form.atr-henig-hq-js .atr-henig-hq-step--active {
  display: flex;
}

/* stepper dots: current = filled light circle, done = solid green */
#atr-henig-hq-stepper .atr-henig-hq-dot--current {
  background: #d3e7e7; /* kit "primary/blue 03" — label broken in V4 vars */
  border-width: 2px;
  border-color: var(--primary-green, #0a5950);
}

#atr-henig-hq-stepper .atr-henig-hq-dot--done {
  background: var(--primary-green, #0a5950);
  border-width: 2px;
  border-color: var(--primary-green, #0a5950);
}

#atr-henig-hq-stepper .atr-henig-hq-dot--done p {
  color: #d3e7e7;
}

/* step-1 required fields flagged by JS on הבא */
#atr-henig-hq-form .atr-henig-hq-field--invalid {
  border-color: #c0392b;
}

/* ===== End health questionnaire ===== */

/* ===== Checkout page (Figma i5j6LNqnNaKdyBHmXIbnHe, frames 4:1157–4:3638) =====
   The checkout is the WooCommerce Checkout Block (stable .wc-block-* classes),
   styled like the cart page: scoped to body.woocommerce-checkout, Kit tokens,
   fixed labels overridden via ::before/::after (the block renders text
   client-side, PHP gettext does not reach it). The page hero band is shared
   with the cart (selectors extended above). The design's accordion behaviour
   (chevrons + "לאישור והמשך" per section) is layered on by
   assets/js/atr-henig-checkout-steps.js via the .atr-henig-step-* classes
   styled at the end of this section. */

/* --- layout: form (right in RTL) + summary card (left) --- */
body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout {
  gap: 48px;
  align-items: flex-start;
}
body.woocommerce-checkout .wc-block-checkout__sidebar {
  box-sizing: border-box;
  flex: 0 0 34%;
  padding: 40px;
  background: var(--primary-blue-01, #F4F8F8);
  border: 0;
  border-radius: 24px;
}
@media (min-width: 1025px) {
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  body.woocommerce-checkout .wc-block-checkout__main {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- section order per the design: address (+consents) → shipping → payment.
   The block's native order differs (shipping-method toggle first, additional
   info last), so the form column is re-ordered with flex order. --- */
body.woocommerce-checkout .wc-block-checkout__form {
  display: flex;
  flex-direction: column;
}
body.woocommerce-checkout .wc-block-checkout__form > * { order: 40; }
body.woocommerce-checkout .wc-block-checkout__contact-fields { order: 10; }
body.woocommerce-checkout .wc-block-checkout__shipping-fields { order: 20; }
body.woocommerce-checkout .wc-block-checkout__order-fields { order: 25; }
body.woocommerce-checkout .wc-block-checkout__shipping-method { order: 30; }
body.woocommerce-checkout .wc-block-checkout__shipping-option { order: 31; }
body.woocommerce-checkout .wp-block-woocommerce-checkout-pickup-options-block { order: 32; }
body.woocommerce-checkout .wc-block-checkout__payment-method { order: 35; }
body.woocommerce-checkout .wc-block-checkout__actions { order: 50; }

/* --- step sections: light full dividers between sections (design) --- */
body.woocommerce-checkout .wc-block-components-checkout-step {
  margin: 0;
  padding: 40px 0;
  border-bottom: 1px solid #D3E7E7;
}
body.woocommerce-checkout .wc-block-components-checkout-step__content {
  padding-top: 24px;
}

/* --- step titles: 40px bold green + section icon at the inline-start (the
   original heading text is collapsed and replaced to match design wording) --- */
body.woocommerce-checkout .wc-block-components-checkout-step__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 0;
  color: var(--primary-green, #0A5950);
}
body.woocommerce-checkout .wc-block-components-checkout-step__title::after {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-green, #0A5950);
}
body.woocommerce-checkout .wc-block-components-checkout-step__title::before {
  content: "";
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* contact step — design heading "התחברות לאתר", no icon */
body.woocommerce-checkout .wc-block-checkout__contact-fields .wc-block-components-checkout-step__title::before {
  display: none;
}
body.woocommerce-checkout .wc-block-checkout__contact-fields .wc-block-components-checkout-step__title::after {
  content: "התחברות לאתר";
}
/* address step — "כתובת למשלוח", id-card icon */
body.woocommerce-checkout .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5950' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Ccircle cx='16' cy='10' r='2.2'/%3E%3Cpath d='M12.6 15.5c.5-1.8 1.8-2.7 3.4-2.7s2.9.9 3.4 2.7'/%3E%3Cpath d='M5.5 9h4M5.5 12.5h4M5.5 16h3'/%3E%3C/svg%3E");
}
body.woocommerce-checkout .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title::after {
  content: "כתובת למשלוח";
}
/* shipping options step — "שיטות משלוח", truck icon */
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-checkout-step__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5950' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='5' width='13.5' height='11' rx='1.5'/%3E%3Cpath d='M15 9h4l3 3.2V16h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}
body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-checkout-step__title::after {
  content: "שיטות משלוח";
}
/* payment step — "שיטות תשלום", credit-card icon */
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5950' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='4.5' width='21' height='15' rx='2'/%3E%3Cpath d='M1.5 9.5h21'/%3E%3Cpath d='M5.5 15h5'/%3E%3C/svg%3E");
}
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title::after {
  content: "שיטות תשלום";
}
/* the shipping/pickup toggle and the additional-info step have no headings in
   the design — their content flows inside the neighbouring sections */
body.woocommerce-checkout .wc-block-checkout__shipping-method .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-checkout__order-fields .wc-block-components-checkout-step__title {
  display: none;
}
body.woocommerce-checkout .wc-block-checkout__shipping-method {
  border-bottom: 0;
  padding-bottom: 0;
}

/* --- hidden pieces the design does not include --- */
/* single-country store → no country selector */
body.woocommerce-checkout .wc-block-components-address-form__country {
  display: none;
}
/* default terms sentence (we render our own consent checkboxes) */
body.woocommerce-checkout .wp-block-woocommerce-checkout-terms-block {
  display: none;
}
/* order note toggle */
body.woocommerce-checkout .wc-block-checkout__add-note,
body.woocommerce-checkout .wc-block-checkout__order-notes {
  display: none;
}

/* --- inputs: design's underline style (label stays the block's floating one) --- */
body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
body.woocommerce-checkout .wc-blocks-components-select__select {
  border: 0;
  border-bottom: 1px solid #93B5B0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus {
  border-bottom-color: var(--primary-green, #0A5950);
  box-shadow: none;
  outline: none;
}
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select__label {
  color: #4A6763;
}

/* --- checkboxes (consents, create account): green mark, readable text --- */
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--primary-green, #0A5950);
  border-radius: 6px;
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--primary-green, #0A5950);
  border-color: var(--primary-green, #0A5950);
}
body.woocommerce-checkout .wc-block-components-checkbox__label {
  font-size: 16px;
  line-height: 1.6;
  color: var(--primary-dark-green, #001F1C);
}

/* --- shipping/pickup toggle + option rows: light-grey rows like the design --- */
body.woocommerce-checkout .wc-block-checkout__shipping-method-container {
  display: flex;
  gap: 16px;
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option {
  flex: 1 1 0;
  padding: 14px 20px;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px;
  background: var(--primary-blue-01, #F4F8F8);
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option--selected,
body.woocommerce-checkout .wc-block-checkout__shipping-method-option:hover {
  background: #E7F0F0;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-checkout__shipping-method-option-title {
  font-weight: 700;
}

/* radio rows (shipping rates, pickup branches, payment methods) — the design
   shows plain light rounded rows with NO border; kill WooCommerce's
   highlight-checked frames/dividers on the row, the group wrapper and the
   payment accordion at every state */
body.woocommerce-checkout .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked,
body.woocommerce-checkout .wc-block-components-shipping-rates-control,
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Woo draws the group frame as an ::after overlay, not as a border on the
   element itself — kill the pseudo too (CDP-confirmed source of the side
   lines). The radio circle itself is the input's own border — untouched. */
body.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after,
body.woocommerce-checkout .wc-block-components-radio-control::after,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option::after {
  content: none !important;
  border: 0 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option {
  margin-block-end: 12px;
  padding: 18px 56px 18px 24px;
  border-radius: 12px;
  background: var(--primary-blue-01, #F4F8F8);
}
body.woocommerce-checkout .wc-block-components-radio-control__option::after {
  content: none;
}
body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__label-group {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-components-radio-control__input {
  accent-color: var(--primary-green, #0A5950);
}
/* payment accordion content (none for the placeholder gateway) */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  border: 0;
}

/* --- guest / login notices --- */
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice,
body.woocommerce-checkout .wc-block-checkout__login-prompt {
  font-size: 16px;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-checkout__login-prompt a,
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice a {
  color: var(--primary-green, #0A5950);
  text-decoration: underline;
}

/* --- place order → green pill, design wording --- */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  min-height: 0;
  padding: 16px 40px;
  border-radius: 100px;
  border: 2px solid #10574E;
  background: var(--primary-green, #0A5950);
  color: #fff;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus {
  background: var(--primary-dark-green, #001F1C);
  color: #fff;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__text {
  font-size: 0;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__text::after {
  content: "המשך לתשלום מאובטח";
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}
body.woocommerce-checkout .wc-block-checkout__actions {
  border-bottom: 0;
}
body.woocommerce-checkout .wc-block-checkout__actions_row {
  justify-content: center;
}

/* --- summary card ("סיכום הזמנה" — heading text already matches) --- */
/* the design card is ONE flat light surface: strip the block's inner white
   panel, its frame and every divider line */
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
  padding-inline: 0;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  padding: 0 0 24px;
  border: 0;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.9px;
  color: var(--primary-green, #0A5950);
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content {
  padding: 0;
}
/* no coupon in the design */
body.woocommerce-checkout .wc-block-components-totals-coupon,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  display: none;
}
body.woocommerce-checkout .wc-block-components-totals-item {
  padding: 8px 0;
  font-size: 18px;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-dark-green, #001F1C);
}
body.woocommerce-checkout .wc-block-components-totals-footer-item__tax-value,
body.woocommerce-checkout .wc-block-components-totals-item__description {
  display: none;
}
/* summary line items */
body.woocommerce-checkout .wc-block-components-order-summary-item {
  padding: 16px 0;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
  max-width: 64px;
  height: auto;
}
body.woocommerce-checkout .wc-block-components-product-name {
  font-weight: 700;
  color: var(--primary-dark-green, #001F1C);
}

/* --- accordion layer (atr-henig-checkout-steps.js) --- */
/* collapsed section: heading stays, content hides; headingless helper blocks
   (consents, shipping/pickup toggle, pickup branches) hide entirely */
body.woocommerce-checkout .atr-henig-step--closed .wc-block-components-checkout-step__content {
  display: none;
}
body.woocommerce-checkout .wc-block-checkout__order-fields.atr-henig-step--closed,
body.woocommerce-checkout .wc-block-checkout__shipping-method.atr-henig-step--closed,
body.woocommerce-checkout .wp-block-woocommerce-checkout-pickup-options-block.atr-henig-step--closed {
  display: none;
}
/* clickable heading + chevron at the inline-end (design 4:1157) */
body.woocommerce-checkout .atr-henig-step-head--address .wc-block-components-checkout-step__heading,
body.woocommerce-checkout .atr-henig-step-head--shipping .wc-block-components-checkout-step__heading,
body.woocommerce-checkout .atr-henig-step-head--payment .wc-block-components-checkout-step__heading {
  position: relative;
  cursor: pointer;
}
body.woocommerce-checkout .atr-henig-step-head--address .wc-block-components-checkout-step__heading::after,
body.woocommerce-checkout .atr-henig-step-head--shipping .wc-block-components-checkout-step__heading::after,
body.woocommerce-checkout .atr-henig-step-head--payment .wc-block-components-checkout-step__heading::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 32px;
  height: 32px;
  translate: 0 -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5950' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate 0.2s ease;
}
body.woocommerce-checkout .atr-henig-step--open .wc-block-components-checkout-step__heading::after {
  rotate: 180deg;
}
/* injected per-section confirm button — same pill as the place-order button */
body.woocommerce-checkout .atr-henig-step-confirm {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 40px auto 0;
  padding: 14px 40px;
  border-radius: 100px;
  border: 2px solid #10574E;
  background: var(--primary-green, #0A5950);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}
body.woocommerce-checkout .atr-henig-step-confirm:hover,
body.woocommerce-checkout .atr-henig-step-confirm:focus {
  background: var(--primary-dark-green, #001F1C);
}

/* --- responsive --- */
@media (max-width: 1024px) {
  body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout {
    flex-direction: column;
  }
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    flex-basis: auto;
    width: 100%;
  }
}
@media (max-width: 767px) {
  body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  body.woocommerce-checkout .wc-block-components-checkout-step {
    padding: 28px 0;
  }
  body.woocommerce-checkout .wc-block-components-checkout-step__title::after {
    font-size: 28px;
  }
  body.woocommerce-checkout .wc-block-components-checkout-step__title::before {
    width: 36px;
    height: 36px;
  }
  body.woocommerce-checkout .wc-block-checkout__shipping-method-container {
    flex-direction: column;
  }
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    padding: 24px;
  }
}
/* ===== End checkout page ===== */

/* ===== Line length — review A13 =====
   "שבירת שורות — עד 20 מילים בשורה בלבד", repeated over slides 90/91/96/103/105.
   Measured at 1920 before the fix: the category pages run flowing text over the
   full 1562px column — 97–119 characters and up to 19.3 words per line, against
   the 883px blocks on the same page that sit at 55–70 characters. Nothing else
   on the site is near it (blog post 1071px/56–68, about 850px/40–56), so the cap
   goes on the body class those pages carry rather than on `p` site-wide, which
   would reach into banners and cards.

   The cap is stated in `ch` so it tracks the font size instead of freezing one
   pixel width. 65ch measures ~940px on the 26px body, which put the measured
   text at ~77 characters and ~13 words per line — Hebrew glyphs are narrower
   than the `0` the `ch` unit is defined by, so the number is lower than the
   character count it buys. Blocks already narrower than the cap are untouched. */
.atr-henig-subj-body,
.atr-henig-subj-body p,
.atr-henig-subj-body li,
.atr-henig-subj-body .elementor-icon-list-text,
.atr-henig-measure,
.atr-henig-measure p,
.atr-henig-measure li {
  max-inline-size: 65ch;
}

/* `atr-henig-measure` is the same cap as a hand-applied class, for the blocks
   the sweep found outside the generated pages — two on "הגישה של מרכז הניג"
   (1059px and 1383px, 90 and 110 characters per line). Add the class in
   Elementor → Advanced → CSS Classes, or with
   tools/page-generator/set-element-class.php, wherever a measurement shows a
   line past ~85 characters. */
/* ===== End line length ===== */

/* ===== Review batch — about (C4/C5), approach (C7/D1/D2), media (E7) =====
   All the hooks are atr- classes stamped on the generated sections with
   tools/page-generator/set-element-class.php. */

/* C4 (slide 40): the quote over the flowers photo. The mock sets a white
   right-aligned block a little above centre, first line regular and the rest
   bold — the widget text carries that structure, this only places and sizes. */
.atr-henig-about-photo {
  position: relative;
}

.elementor .atr-henig-about-photo__quote,
.elementor .atr-henig-about-photo__quote .elementor-heading-title {
  font-size: 55px;
  font-weight: 400;
  line-height: 1.25;
  color: #FFFFFF;
  text-align: start;
}

.elementor .elementor-widget.atr-henig-about-photo__quote {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-60%);
  inset-inline-start: var(--space-page-x, 170px);
  z-index: 2;
  max-inline-size: 640px;
}

/* C5 (slide 41): "שאלות ותשובות" broke into two lines — the atomic heading
   carries a fixed narrow width. The text itself held a hard <br> (removed in
   the data, all pages) and the box gets to size to its content. The same
   heading is cloned from the FAQ template into every category page, tagged
   atr-henig-faq-head there. */
.elementor .atr-henig-about-faq h2,
.elementor .atr-henig-faq-head,
.elementor h2.atr-henig-faq-head {
  inline-size: max-content;
  max-inline-size: 100%;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* small screens must be allowed to wrap it */
  .elementor .atr-henig-about-faq h2,
  .elementor .atr-henig-faq-head,
  .elementor h2.atr-henig-faq-head {
    white-space: normal;
  }
}

/* C7 (slides 45/47): the quote block starts at the top line, the two title
   lines sit tight, and the last body line keeps air from the band's edge */
.atr-henig-appr-quote {
  justify-content: flex-start;
  padding-block: 60px 80px;
}

.atr-henig-appr-quote h2 {
  line-height: 1;
  margin-block-end: 24px;
}

/* D1 (slide 55): the columns rise to the line, the copy drops a size, the
   column gap is fixed, and "הגיע הזמן" gets its double blank line. The atomic
   per-element styles are (0,2,0), so every rule here carries `.elementor`. */
.elementor .atr-henig-appr-why {
  --gap: 64px;
  gap: 64px;
}

.elementor .atr-henig-appr-why h3 {
  font-size: 45px;
  line-height: 1.1;
  margin-block-end: 16px;
}

/* the closing "הגיע הזמן" line is the section's last direct child */
.elementor .atr-henig-appr-why > :last-child {
  margin-block-start: 64px;
}

/* D2 (slide 56): every step's subtitle fits two lines and the body drops to
   the intro paragraph's 26px */
.elementor .atr-henig-appr-steps h3 {
  font-size: 26px;
  line-height: 1.2;
}

.elementor .atr-henig-appr-steps p {
  font-size: 26px;
  line-height: 1.23;
}

/* E7 (slide 79): the four Vimeo clips, page gutters.
   T14 (review 1608, slide 16): the section had padding-bottom 0, so the
   videos ended at 1593px and the CTA form band began on the very next
   pixel. Add the design's breathing room below. */
.elementor .e-con.atr-henig-media-videos {
  padding-inline: var(--space-page-x, 170px);
  padding-block-end: 120px;
}

/* T13 (slide 15): the clips now live in an Elementor nested-carousel
   (2 per view + native dots) instead of a flex-wrap 2x2 grid, so the old
   50% flex basis must not fight the carousel's own slide sizing. */
.atr-henig-media-videos .elementor-widget-nested-carousel .elementor-widget-video {
  flex: initial;
  min-inline-size: 0;
}

@media (max-width: 1024px) {
  .elementor .elementor-widget.atr-henig-about-photo__quote {
    inset-inline-start: 32px;
    max-inline-size: calc(100% - 64px);
  }

  .elementor .atr-henig-about-photo__quote,
  .elementor .atr-henig-about-photo__quote .elementor-heading-title {
    font-size: 32px;
  }

  .elementor .atr-henig-appr-why h3 {
    font-size: 35px;
  }

  .elementor .e-con.atr-henig-media-videos {
    padding-inline: 32px;
    padding-block-end: 64px;
  }
}
/* ===== End review batch about/approach/media ===== */

/* ===== About page — review C1 =====
   "מרכז מוביל לטיפול טבעי" implemented 1:1 from Figma 7uJLm1RnPd36OrucnYm2IM
   node 2:1038 (1920x1021): photo 786x912 pinned to the LEFT with a 60px edge
   gap and 54px of air top/bottom, rounded 32px with 58px on the corner facing
   the text; text column right, 170px page gutter, 120px inner padding; the
   headline is 80px/-2.4px in pink-brown #5E2E41 — first line REGULAR, second
   BOLD; body 35/1.2 dark green; the CTA is a #5E2E41 pill with 35px regular
   text. Every size is min(design, vw-share) so the frame scales below 1920
   instead of wrapping. Atomic styles are (0,2,0) — rules carry `.elementor`. */
.elementor .atr-henig-about-lead {
  background-color: var(--secondary-pink-F7EEF1, #F7EEF1);
  align-items: stretch;
  padding: 0;
  gap: 0;
}

/* text column (first in RTL DOM = right side). `> div` for (0,2,1): the
   columns carry their own padding from the page data at (0,2,0), and this
   stylesheet loads before Elementor's, so a tie loses. */
.elementor .atr-henig-about-lead > div:first-child {
  flex: 1 1 56%;
  min-inline-size: 0;
  justify-content: center;
  padding-block: min(120px, 6.25vw);
  /* inline-start (right) = the 170px page gutter; inline-end faces the photo */
  padding-inline: min(170px, 8.85vw) min(120px, 6.25vw);
}

/* photo column (last = left side): 846/1920 of the band, the photo fills it
   bar the design's 60px edge gap and 54px top/bottom insets */
.elementor .atr-henig-about-lead > div:last-child {
  flex: 0 0 44%;
  min-inline-size: 0;
  padding-block: min(54px, 2.8vw);
  padding-inline: 0 min(60px, 3.125vw);
}

.elementor .atr-henig-about-lead > :last-child > *,
.elementor .atr-henig-about-lead figure,
.elementor .atr-henig-about-lead img {
  block-size: 100%;
  inline-size: 100%;
}

.elementor .atr-henig-about-lead img {
  object-fit: cover;
  /* 58px on the top corner facing the text (top-right in RTL), 32px elsewhere */
  border-start-start-radius: 58px;
  border-start-end-radius: 32px;
  border-end-start-radius: 32px;
  border-end-end-radius: 32px;
}

.elementor .atr-henig-about-lead h2 {
  font-size: min(80px, 4.167vw);
  font-weight: 400;
  line-height: 1;
  letter-spacing: max(-2.4px, -0.125vw);
  color: var(--secondary-pink-5E2E41, #5E2E41);
  margin: 0;
}

.elementor .atr-henig-about-lead h2 strong,
.elementor .atr-henig-about-lead h2 b {
  font-weight: 700;
}

.elementor .atr-henig-about-lead p {
  font-size: min(35px, 1.823vw);
  line-height: 1.2;
  color: var(--primary-dark-green, #001F1C);
  max-inline-size: 100%;
}

/* the design's #5E2E41 pill, 35px regular text on the pale pink */
.elementor .atr-henig-about-lead__cta .elementor-button {
  background-color: var(--secondary-pink-5E2E41, #5E2E41);
  color: var(--secondary-pink-F7EEF1, #F7EEF1);
  border-radius: 100px;
  padding: 16px 56px;
  font-size: min(35px, 1.823vw);
  font-weight: 400;
  line-height: 1.2;
}

.elementor .atr-henig-about-lead__cta {
  margin-block-start: 22px;
}

/* "אלפי מטופלים, תוצאות ארוכות טווח." — heading on ONE line, the first words
   regular and the rest bold (the markup carries the <b>), body wide enough for
   the design's two lines + the bold closing line */
.elementor .atr-henig-about-thousands h2 {
  font-weight: 400;
  white-space: nowrap;
  inline-size: max-content;
  max-inline-size: 100%;
  /* one line at any width: the line measures ~12.4x the font size and the
     content column is ~viewport minus 380px of chrome, so the font follows
     the viewport instead of overflowing below ~1580px. The tracking rides
     the same formula — a fixed -3px stops shrinking with the font and eats
     the slack at narrow widths. */
  font-size: min(95px, calc((100vw - 380px) / 13.5));
  letter-spacing: max(-3px, calc((100vw - 380px) / -430));
}

.elementor .atr-henig-about-thousands h2 b,
.elementor .atr-henig-about-thousands h2 strong {
  font-weight: 700;
}

.elementor .atr-henig-about-thousands p {
  max-inline-size: 75ch;
  font-size: 26px;
  line-height: 1.4;
}

/* the closing sentence: regular on desktop (node 2:1043), bold on the phone
   frame (node 3:1019) */
.elementor .atr-henig-about-lead .atr-henig-lead-tail {
  font-weight: 400;
}

/* below the stacking point the columns pile up — photo first at natural
   height, text with the tablet gutter */
@media (max-width: 1024px) {
  /* the atomic flexbox does not stack by itself — without this the photo
     column squeezes past the viewport edge (measured -64px at 900) */
  .elementor .atr-henig-about-lead {
    flex-direction: column;
  }

  .elementor .atr-henig-about-lead > div:first-child {
    padding: 48px 32px;
  }

  .elementor .atr-henig-about-lead > div:last-child {
    flex-basis: auto;
    padding: 32px 32px 0;
  }

  .elementor .atr-henig-about-lead img {
    block-size: auto;
  }

  .elementor .atr-henig-about-lead h2 {
    font-size: 35px;
    letter-spacing: -1.05px;
  }

  .elementor .atr-henig-about-lead p,
  .elementor .atr-henig-about-lead__cta .elementor-button {
    font-size: 20px;
  }

  .elementor .atr-henig-about-thousands h2 {
    white-space: normal;
  }
}

/* phone — "אלפי מטופלים" from Figma node 3:1023 (390x420): the leaf sits
   90x51 above the heading, the heading breaks into its two design lines —
   "אלפי מטופלים," regular over a bold "תוצאות ארוכות טווח." (the <b> becomes
   a block, which is what makes the break) — 16px body in #E7F0F0, and the
   closing sentence is REGULAR here, the opposite of the desktop node */
@media (max-width: 767px) {
  .elementor .atr-henig-about-thousands {
    gap: 22px;
  }

  .elementor .atr-henig-about-thousands img {
    inline-size: 90px;
    block-size: auto;
  }

  .elementor .atr-henig-about-thousands h2 {
    /* the atomic heading is display:flex — the text node and the <b> render
       as two side-by-side items that wrap internally. Block flow + a block
       <b> gives the node's two clean lines. */
    display: block;
    font-size: 35px;
    letter-spacing: -1.05px;
    line-height: 1;
  }

  .elementor .atr-henig-about-thousands h2 b,
  .elementor .atr-henig-about-thousands h2 strong {
    display: block;
  }

  .elementor .atr-henig-about-thousands p {
    font-size: 16px;
    line-height: 1.2;
  }

  .elementor .atr-henig-about-thousands p strong,
  .elementor .atr-henig-about-thousands p b {
    font-weight: 400;
  }
}

/* phone — Figma node 3:1015 (390x910): the copy block carries 60/32 padding,
   16px body with a bold closing sentence, a 16px pill, and the photo runs
   edge to edge below it, square-cornered, 375px tall */
@media (max-width: 767px) {
  .elementor .atr-henig-about-lead > div:first-child {
    padding: 60px 32px;
    gap: 22px;
  }

  .elementor .atr-henig-about-lead > div:last-child {
    padding: 0;
  }

  .elementor .atr-henig-about-lead > div:last-child img {
    block-size: 375px;
    object-fit: cover;
    border-radius: 0;
  }

  .elementor .atr-henig-about-lead p {
    font-size: 16px;
    letter-spacing: -0.48px;
  }

  .elementor .atr-henig-about-lead .atr-henig-lead-tail {
    font-weight: 700;
  }

  .elementor .atr-henig-about-lead__cta .elementor-button {
    font-size: 16px;
    padding: 8px 32px;
  }
}
/* ===== End about C1 ===== */

/* ===== Approach page — review D5 (slides 52/54) =====
   "ששת המרכיבים של גישת הניג" as the Figma card grid: the tiles measured
   499x342 with up to 148px of top padding — the design's are compact, text
   low, icon above it. The grid narrows to the design's content width and the
   padding drops, which brings the tile height down with it. The intro's first
   line is bold in the design. */
.elementor .atr-henig-appr-six > .e-con,
.elementor .atr-henig-appr-six > div[class*="e-con"] {
  max-inline-size: 1180px;
  margin-inline: auto;
}

.elementor .atr-henig-appr-six .e-flexbox,
.elementor .atr-henig-appr-six [class*="e-flexbox"] {
  /* the leaf icon is the tile's background, pinned to the top — the padding
     is what keeps the copy below it. T6 (review 1608, slide 8): the leaf sat
     21/21 from the corner; Figma 2:1718 insets it 32 from the edge and 48
     from the top (icon kept at the D5 compact 68px) — padding grows to
     clear 48+68+16. */
  padding-block-start: 132px;
  background-position: calc(100% - 32px) 48px;
}

.elementor .atr-henig-appr-six h3,
.elementor .atr-henig-appr-six .e-heading-base {
  font-size: 26px;
  line-height: 1.25;
}

.elementor .atr-henig-appr-six__lead,
.elementor h2.atr-henig-appr-six__lead,
.elementor h3.atr-henig-appr-six__lead {
  font-weight: 700;
  /* T6: the intro text was green; Figma 2:1714 sets it dark */
  color: var(--primary-dark-green, #001F1C);
  /* T6 follow-up: share the grid's 1180 box so title, intro and cards all
     start from the same right edge (the intro spanned its full parent) */
  max-inline-size: 1180px;
  margin-inline: auto;
  inline-size: 100%;
}

/* the intro's second line stays regular (the utility class it carries is a
   bold token) */
.elementor .atr-henig-appr-six__sub,
.elementor h2.atr-henig-appr-six__sub,
.elementor h3.atr-henig-appr-six__sub {
  font-weight: 400;
  color: var(--primary-dark-green, #001F1C);
  max-inline-size: 1180px;
  margin-inline: auto;
  inline-size: 100%;
}

/* the section title: the design sets it at the content column's size and
   start-aligned, not an 80px centered banner */
.elementor .atr-henig-appr-six > .e-heading-base:first-child,
.elementor .atr-henig-appr-six > h2:first-child {
  font-size: 45px;
  text-align: start;
  max-inline-size: 1180px;
  margin-inline: auto;
  inline-size: 100%;
  /* T6: the title was dark; Figma 2:1712 sets it primary green */
  color: var(--primary-green, #0A5950);
}
/* ===== End approach D5 ===== */

/* T7 (review 1608, slide 9): "למה לבחור במרכז הניג?" row (page 2520) — the
   three content columns had no gap; Figma 2:1694 sets 32px. Fixed in the
   page's own Elementor data (fix-why-choose-gap.php) instead of CSS — the
   row's _cssid did not surface as an HTML class on this non-root element,
   so gap:32px was added directly to the row's existing local style class. */

/* ===== Mobile sweep 2026-08-04 — the 26px that should be 16px =====
   A systematic 390px pass over 14 pages found one real pattern: the
   `atr-henig-fg-body-35` token renders 26px on the phone while its source
   (documentation/henig-global-css-for-elementor-v4.css) documents 16px — the
   kit's V4 global class was only partially updated. The child stylesheet
   restores the documented token value, plus the two places that carry a plain
   26px with no token: the blog-card excerpts and the approach steps. */
@media (max-width: 767px) {
  .elementor .atr-henig-fg-body-35 {
    font-size: 16px;
  }

  .elementor .atr-henig-blog-card__excerpt {
    font-size: 16px;
    line-height: 1.3;
  }

  .elementor .atr-henig-appr-steps p {
    font-size: 16px;
  }

  .elementor .atr-henig-appr-steps h3 {
    font-size: 20px;
  }
}
/* ===== End mobile sweep ===== */

/* ===== Category banners — the fixed rosemary (slide 3) =====
   "תצלום קבוע של רוזמרין בכל הקטגוריה" — the four בעיות-עיכול-נפוצות pages
   carry the panel's rosemary in the banner slot. The source photo sits on a
   white box; darken blends the white into the band's pale background, same
   trick the menu panels use for plant photos. */
.elementor .atr-henig-hero-plant img {
  mix-blend-mode: darken;
}
/* ===== End category banners ===== */

/* =====================================================================
   About page (post 15) — designer review 1108
   (documentation/about-review-1108.md). Anchors are _cssid ids injected
   by tools/page-generator/fix-about-1108.php.
   ===================================================================== */

/* A11/A1 — text sections: Figma titles are -3% letter-spacing (import set
   -3px = -3.75%); body copy is the dark-green token, not #333. */
#atr-henig-about-texts .e-heading-base {
  letter-spacing: -0.03em;
}

#atr-henig-about-texts .e-paragraph-base {
  color: var(--primary-dark-green, #001F1C);
}

/* the "על מכון הניג" title is the REGULAR title/80 style in the Figma */
#atr-henig-about-title-soft,
#atr-henig-about-title-soft.e-heading-base {
  font-weight: 400;
}

/* A3 — principle cards (Figma 2:1016): each card carries its own icon as an
   atomic-style background (healtcare/Vector/dashboard/search svg) — it only
   surfaced after a full CSS regeneration, so no icon is added here. Keep the
   four cards the same size at every width: equal flex shares, stretched to
   the tallest card (Figma: 4 × 367×294). */
#atr-henig-about-cards {
  align-items: stretch;
}

#atr-henig-about-cards > .e-con {
  flex: 1 1 0;
  min-inline-size: 0;
}

/* the native icons compile at 68px — lift them to the Figma boxes
   (116/107/118/125), scaling down with the viewport */
#atr-henig-about-cards > .e-con:nth-child(1) {
  background-size: min(116px, 6.04vw) auto;
}

#atr-henig-about-cards > .e-con:nth-child(2) {
  background-size: min(107px, 5.57vw) auto;
}

#atr-henig-about-cards > .e-con:nth-child(3) {
  background-size: min(118px, 6.15vw) auto;
}

#atr-henig-about-cards > .e-con:nth-child(4) {
  background-size: min(125px, 6.51vw) auto;
}

/* card titles are a fixed 45px in the import — scale them with the width so
   mid-size screens don't wrap into tall cards */
#atr-henig-about-cards .e-heading-base {
  font-size: clamp(24px, 2.344vw, 45px);
}

/* A5 — the green band (Figma 2:1047): the leaf SVG (frame-351) has no
   intrinsic size and rendered 0x0; give it its designed box, restore the
   22px rhythm, and lift the paragraph from 26px to the 45px spec. */
#atr-henig-about-band-inner {
  row-gap: min(22px, 1.15vw);
}

#atr-henig-about-band-leaf img {
  inline-size: min(127px, 6.61vw);
  block-size: auto;
  aspect-ratio: 127 / 104;
}

#atr-henig-about-band .e-paragraph-base {
  font-size: clamp(22px, 2.344vw, 45px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* A10 — testimonials (Figma 2:1114): heading lines 2-3 are REGULAR (line 1
   stays bold); cards = 438x494 r24 thumb, 35/700 centered green title,
   30 centered dark caption — same treatment as the homepage testi block. */
#atr-henig-about-testi-sub,
#atr-henig-about-testi-sub.e-heading-base {
  font-weight: 400;
}

#atr-henig-about-testi .elementor-widget-video .elementor-wrapper {
  aspect-ratio: 438 / 494;
  --video-aspect-ratio: 0.8866;
}

#atr-henig-about-testi .elementor-widget-video .elementor-wrapper,
#atr-henig-about-testi .elementor-widget-video .elementor-custom-embed-image-overlay,
#atr-henig-about-testi .elementor-widget-video .elementor-custom-embed-image-overlay img,
#atr-henig-about-testi .elementor-widget-video .elementor-video,
#atr-henig-about-testi .elementor-widget-video iframe {
  border-radius: 24px;
}

#atr-henig-about-testi .elementor-custom-embed-image-overlay img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

#atr-henig-about-testi .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(22px, 1.823vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--primary-green, #0A5950);
  text-align: center;
}

#atr-henig-about-testi .elementor-widget-text-editor p {
  font-size: clamp(16px, 1.5625vw, 30px);
  line-height: 1.2;
  color: var(--primary-dark-green, #001F1C);
  text-align: center;
}

/* A8 — explicit profile link injected under each therapist slide
   (about-team-links.js); the slide itself stays a plain drag surface */
.odot-our-team-swiper .atr-henig-team-link {
  display: inline-block;
  margin-block-start: 8px;
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-green, #0A5950);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.odot-our-team-swiper .atr-henig-team-link:hover {
  font-weight: 700;
}

/* mobile (Figma 3:1003) — the four cards become a one-card-per-view snap
   slider: card 326x116 r24, icon 70px at the physical left (25,22), title
   26/700/lh1/-3% on the right; dots are built by about-cards-slider.js.
   (The imported baked-image carousel showed the DESKTOP card style and was
   removed for good.) */
@media (max-width: 767px) {
  #atr-henig-about-cards {
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #atr-henig-about-cards::-webkit-scrollbar {
    display: none;
  }

  /* :nth-child(n) matches every card — it only levels the specificity so
     this later rule beats the per-card desktop background-size rules */
  #atr-henig-about-cards > .e-con:nth-child(n) {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-block-size: 116px;
    border-radius: 24px;
    padding: 32px;
    justify-content: center;
    background-position: left 25px top 22px;
    background-size: 70px auto;
  }

  #atr-henig-about-cards .e-heading-base {
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Figma 3:1004: the title box stops clear of the 70px icon at the left
       (25+70 of the 326 card) — 184px is the free inline span; the cap is
       what breaks "אבחון ייחודי / ומעמיק" onto two lines like the design */
    max-inline-size: 184px;
  }

  /* dots row injected by the script */
  .atr-henig-about-cards-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-block-start: 24px;
  }

  .atr-henig-about-cards-dots button {
    inline-size: 11px;
    block-size: 11px;
    border-radius: 11px;
    border: 0;
    padding: 0;
    background: var(--primary-blue-03, #D3E7E7);
    transition: inline-size 0.2s ease, background-color 0.2s ease;
  }

  .atr-henig-about-cards-dots button.is-active {
    inline-size: 23px;
    background: var(--primary-green, #0A5950);
  }

  #atr-henig-about-band-leaf img {
    inline-size: 64px;
  }
}

/* =====================================================================
   Gisha page (2520) — "זו לא שיטה זו גישה לחיים" parity vs Figma 2:1583
   (bundled in the About review PDF, p3): titles are -3% letter-spacing
   (import set -3px) and body copy is the dark-green token, not #333.
   Anchor injected by tools/page-generator/tag-gisha-life.php.
   ===================================================================== */
#atr-henig-gisha-life .e-heading-base {
  letter-spacing: -0.03em;
}

#atr-henig-gisha-life .e-paragraph-base {
  color: var(--primary-dark-green, #001F1C);
}

/* =====================================================================
   Breadcrumbs — every internal page (review 160826, T2)
   Trail built by [atr_henig_breadcrumbs] (functions.php) from the Main
   Menu tree; injected as the first container on each page/template by
   tools/page-generator/add-breadcrumbs.php. Sits between the header and
   the hero. 170px = the design system's desktop side gutter; ">>" is
   mirrored automatically by the RTL bidi algorithm.
   ===================================================================== */
.e-con.atr-henig-crumbs-wrap {
  /* The generator pages' sections keep a FIXED 170px side gutter at every
     desktop width (measured on irritable-bowel + constipation at 1296,
     1700, 2560 — content inset never follows the centered box; the two
     models coincide only at exactly 1920, which is what previously made a
     box-mirror formula look right). Tablet (≤1024) sections drop to 32. */
  padding: 24px 170px 0;
}

/* Single post (template 4002): the Figma post design (3:6754) keeps the
   site's standard 170+1580+170 content box, but the template's V4 sections
   stretch with the viewport (fixed 170 gutters on a fluid width). Cap the
   content stripe and the "אולי יעניין אתכם גם" stripe at the 1920 design
   width — at ≤1920 nothing changes; beyond it they center exactly like
   every boxed page, and the crumbs' box mirror above aligns with them.
   Tagged by tools/page-generator/fix-sp-width-tags.php. */
#atr-henig-sp-content,
.e-con.atr-henig-sp-related {
  max-inline-size: 1920px;
  margin-inline: auto;
}

/* The post hero band (the "בלוג > שם הכתבה" strip) carries the unified-hero
   anchor #atr-henig-uh-band since T1 (tag-unified-hero-roots.php replaced
   the old atr-henig-sp-hero id) — its template padding is 170 desktop /
   32 mobile, and the ultra-wide block below mirrors the box past 1920. */

/* The trail on single posts mirrors the post's capped content stripe:
   fixed 170 up to the 1920 cap, the centered-box inset beyond it (the
   post content is capped above; pages are NOT capped, so their trail
   stays on the fixed 170 grid instead). */
body.single-post .e-con.atr-henig-crumbs-wrap {
  padding: 24px max(170px, calc((100% - 1580px) / 2)) 0;
}

/* Classic (non-Elementor) pages get the trail via the_content — already
   inside the boxed content column, so no side gutter of its own. */
div.atr-henig-crumbs-wrap:not(.e-con) {
  padding: 0 0 24px;
}

/* =====================================================================
   Unified hero — classic hub pages (review 160826, T1)
   The 5 category hub pages (plain post_content) get the graphic hero via
   the_content (functions.php: atr_henig_unified_hero_classic_pages); the
   Elementor pages got the same band natively via tools/page-generator/
   apply-unified-hero(-atomic).php. Values mirror the measured Elementor
   hero: band 541px, title 80px/400 green at the 180px text inset (170
   section gutter + 10 inner), mobile 35px at 32px (measured 16.08 on
   irritable-bowel at 1920 and 390).
   ===================================================================== */
.atr-henig-uh {
  display: flex;
  align-items: center;
  block-size: 541px;
  padding-inline: 180px;
  /* the classic .page-content is a centered box — break the band out to
     full bleed (same 100vw pattern as the home hero slider) */
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  background: #F4F8F8 url(images/hero-unified-bg.webp) no-repeat;
  /* physical keywords on purpose: background-position has no logical form */
  background-position: left center;
  background-size: cover;
}

/* 100vw includes the scrollbar sliver — clip it, same remedy as body.home
   (the body class is added by atr_henig_unified_hero_body_class). */
body.atr-henig-uh-page {
  overflow-x: clip;
}

/* double class on purpose: the Elementor kit's `.elementor-kit-* h1`
   (0,1,1) out-specifies a single class — this stays (0,2,0) */
.atr-henig-uh .atr-henig-uh__title {
  margin: 0;
  font-size: 80px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--primary-green, #0A5950);
}

/* The hub crumbs break out with the band and take the Elementor pages'
   trail geometry (24px below the band, 170px side gutter). */
.atr-henig-uh + div.atr-henig-crumbs-wrap:not(.e-con) {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 24px 170px 0;
}

.atr-henig-crumbs {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--primary-green, #0A5950);
}

.atr-henig-crumbs__link {
  color: inherit;
}

.atr-henig-crumbs__link:hover {
  text-decoration: underline;
}

.atr-henig-crumbs__sep {
  margin-inline: 10px;
}

/* Tablet: generator-page sections drop their side gutter to 32px (measured
   at 1000). Posts are excluded — the post template keeps 170 down to 768
   (the body.single-post rule above out-specifies this one). */
@media (max-width: 1024px) {
  .e-con.atr-henig-crumbs-wrap {
    padding: 24px 32px 0;
  }
}

@media (max-width: 767px) {
  .e-con.atr-henig-crumbs-wrap,
  body.single-post .e-con.atr-henig-crumbs-wrap {
    padding: 16px 32px 0;
  }

  .atr-henig-crumbs {
    font-size: 14px;
  }

  .atr-henig-uh {
    padding-inline: 32px;
  }

  .atr-henig-uh .atr-henig-uh__title {
    font-size: 35px;
  }

  .atr-henig-uh + div.atr-henig-crumbs-wrap:not(.e-con) {
    padding: 16px 32px 0;
  }
}

/* ===== T15 (review 1608, slides 18–19): subject-page hero titles =====
   The reviewer asks for at most 3 lines and no dash stranded at the start
   of a line. The hero title sits in a 50% column, which leaves the H1
   exactly 600px wide; measured across all 16 subject titles at that width,
   only "טיפול בצרבת – הגורמים…" (4156) overflows, at 4 lines.

   Widening the heading to 700px fixes it: re-measured all 16 titles and
   every one fits in <=3 lines, and none of the 8 dash-bearing titles puts
   the dash at a line start (checked per line by token position). The right
   edge stays on the 1740 content line — the box grows leftward into the
   empty graphic half, so nothing is displaced and the page does not scroll
   horizontally.

   Anchor #atr-henig-uhb is planted on classic hero roots by
   tools/page-generator/tag-unified-hero-roots.php. */
#atr-henig-uhb .elementor-widget-heading {
  inline-size: 700px;
  max-inline-size: none;
  margin-inline-start: auto;
}

@media (max-width: 1024px) {
  /* tablet and phone: the hero column is already full width there, so a
     fixed 700px would overflow the screen — hand the width back. */
  #atr-henig-uhb .elementor-widget-heading {
    inline-size: auto;
    max-inline-size: 100%;
  }
}

/* =====================================================================
   Ultra-wide (>1920) — mirror the header box (review 160826 follow-up)
   The header content is a centered 1584px box; above the 1920 design width
   the hero bands and breadcrumb trails keep(t) fixed 170/180 gutters and
   stuck to the screen edge far past the header column (user screenshot at
   ~3382). Mirror the box instead. min-width on purpose: a progressive
   wide-screen enhancement above the design width, not part of the
   desktop→mobile cascade. Anchors planted by tag-unified-hero-roots.php.
   ===================================================================== */
@media (min-width: 1921px) {
  /* classic generator heroes: the 170 gutter sits on an inner half-width
     column, so the full-width root adds the remainder of the box mirror */
  #atr-henig-uhb {
    padding-inline: calc((100% - 1580px) / 2 - 170px);
  }

  /* atomic hero bands (about cluster, single-post band, Yair/catalog/
     product exceptions — their photos are background overlays that ignore
     padding) and the archive band: the 170 sits on the root — override
     with the full mirror */
  #atr-henig-uh-band,
  #atr-henig-archive-hero {
    padding-inline: calc((100% - 1580px) / 2);
  }

  /* FAQ exception (classic clone, photo flush-left as an image widget):
     only the TITLE column mirrors the box — inline-start = the right side
     in RTL, where the title sits */
  #atr-henig-uh-title-col {
    padding-inline-start: calc((100% - 1580px) / 2);
  }

  /* T3: the home articles band — its fixed 170 gutter glued the copy+button
     to the photo's edge on wide monitors; mirror the header box instead
     (the band root is full-bleed, so % resolves against the viewport) */
  .elementor .e-con.e-con.atr-henig-hp-articles {
    padding-inline: calc((100% - 1580px) / 2);
  }

  /* FAQ band graphic: cover-scaling crops the art vertically at these
     widths and the band goes flat (user feedback 16.08 — "no graphic
     elements"). Paint the UNIFIED art (Frame 374) at design scale on both
     sides — filled arc stays at the photo edge, thin arc behind the title;
     the band's own #F4F8F8 color fills the gap between them. */
  #atr-henig-uh-photo-band {
    background-image:
      url(images/hero-unified-bg.webp),
      url(images/hero-unified-bg.webp);
    background-position: left top, right top;
    background-size: auto 100%, auto 100%;
    background-repeat: no-repeat;
  }

  /* classic-hub band + its trail: these are 100vw breakouts inside the
     narrow classic .page-content box, so % padding would resolve against
     the box (negative → 0) — use vw, their own width basis */
  .atr-henig-uh {
    padding-inline: calc((100vw - 1580px) / 2 + 10px);
  }

  .atr-henig-uh + div.atr-henig-crumbs-wrap:not(.e-con) {
    padding-inline: calc((100vw - 1580px) / 2);
  }

  /* Elementor trails sit in full-width parents — % is the viewport here */
  .e-con.atr-henig-crumbs-wrap,
  body.single-post .e-con.atr-henig-crumbs-wrap {
    padding-inline: calc((100% - 1580px) / 2);
  }
}

/* ===== T19 (review 1608, slides 25-26): single post to Figma 3:6754 =====
   Template 4002 already carries the Figma skeleton, and the body/sidebar
   typography was implemented earlier in assets/css/elementor-overrides.css
   (.atr-henig-post-body block, Figma desktop 3:6754 + mobile 3:7926) — those
   rules are authoritative and are NOT duplicated here. This block adds only
   what that round left out: the blush background circles, the featured-image
   crop, the author-card scale and the related-posts heading. Hooks added by
   tools/page-generator/tag-single-post-tpl.php. */

/* the soft blush circles behind the content area (Figma vectors 3:6856-7):
   two large discs bleeding off the end edge, lower half of the section */
.elementor .e-con.atr-henig-sp-main {
  background-image:
    radial-gradient(circle 594px at calc(100% + 240px) 103%, #F9F0EB 0 99.5%, transparent 100%),
    radial-gradient(circle 448px at calc(100% + 120px) 60%, #F9F3F5 0 99.5%, transparent 100%);
  background-repeat: no-repeat;
}

/* featured image: square, rounded (Figma 600x600) */
.atr-henig-sp-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 24px;
}

/* author card: large round photo, bold name, small bio (Figma 3:15621) */
.atr-henig-sp-author .elementor-author-box__avatar img {
  width: 194px;
  height: 194px;
  border-radius: 50%;
  object-fit: cover;
}

.atr-henig-sp-author .elementor-author-box__name {
  font-size: 44px;
  font-weight: 700;
  color: var(--primary-dark-green, #001F1C);
}

.atr-henig-sp-author .elementor-author-box__bio {
  font-size: 18px;
  line-height: 1.5;
  color: var(--primary-dark-green, #001F1C);
}

/* "אולי יעניין אתכם גם" — nothing styled this heading; it fell to the kit
   h2 (80px/400). Figma: bold, dark, ~60px. */
.elementor .atr-henig-sp-related .elementor-widget-heading .elementor-heading-title {
  font-size: 60px;
  font-weight: 700;
  color: var(--primary-dark-green, #001F1C);
}

@media (max-width: 767px) {
  .atr-henig-sp-author .elementor-author-box__avatar img {
    width: 140px;
    height: 140px;
  }

  .atr-henig-sp-author .elementor-author-box__name {
    font-size: 32px;
  }

  .elementor .atr-henig-sp-related .elementor-widget-heading .elementor-heading-title {
    font-size: 40px;
  }

  /* the blush circles are sized for the wide canvas — drop them on phones */
  .elementor .e-con.atr-henig-sp-main {
    background-image: none;
  }
}