@charset "UTF-8";
/* =============== VARIABLES ===============  */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..700&display=swap");
:root {
  --clr-primary-100: #474132; /* 12/10/2026: Liam main colour (was green #2C3424) */
  --clr-primary-200: #28374A;
  --clr-primary-300: #D2AE9A;
  --clr-primary-400: #474132;
  --clr-title: var(--clr-primary-200); /* 14/10/2026: every title = the body text colour (was --clr-primary-400 #474132, the same hex as Zamarin's accent). One token to retune all titles. */
  --clr-neutral-100: #ffffff;
  --clr-neutral-200: #F5F0EB;
  --bg-main: var(--clr-neutral-200);
  --clr-neutral-300: #2E2E2E;
  --clr-neutral-400: #292929;
  --clr-neutral-500: #2B2B2B;
  --clr-neutral-900: #000000;
  --gd-neutral-400: linear-gradient(180deg, rgba(67, 63, 63, 0.8) 0%, rgba(39, 35, 35, 0.8) 0.2%, rgba(67, 67, 67, 0.56) 22%, rgba(70, 70, 70, 0.6) 61.44%, rgba(173, 173, 173, 0) 100%);
  /* Font family */
  --ff-primary: "Cormorant Garamond", "Frank Ruhl Libre", serif; /* decorative accent / quotes — confirmed in Figma (node 22:9928).
     05/10/2026: Cormorant has no Hebrew glyphs, and the Hebrew site's display headings
     are now Hebrew (Figma comments) — Frank Ruhl Libre picks up the Hebrew letters per
     glyph instead of the OS default serif; Latin text still renders in Cormorant. */
  --ff-secondary: "Heebo", sans-serif; /* body + UI + section headings */
  --fs-50: 1.6rem;
  --fs-100: 1.6rem;
  --fs-150: 1.8rem;
  --fs-200: 2rem;
  --fs-250: 2.4rem;
  --fs-300: 2.8rem;
  --fs-350: 3rem;
  --fs-400: 3.5rem;
  --fs-450: 4rem;
  --fs-500: 4.8rem;
  --fs-550: 5.4rem;
  --fs-600: 6rem;
  --fs-650: 6.8rem;
  --fs-700: 7.4rem;
  --fs-750: 8rem;
  --fs-800: 12rem;
  --fs-900: 16rem;
  --main-heading: clamp(var(--fs-500), 8.34vw, var(--fs-900));
  --secondary-heading: clamp(var(--fs-500), 5vw, var(--fs-800));
  --sub-heading: clamp(var(--fs-300), 4vw, var(--fs-550));
  --heading-sm: clamp(var(--fs-300), 4vw, var(--fs-450));
  --sub-text: clamp(var(--fs-150), 2vw, var(--fs-200));
  --section-gap: clamp(4rem, 5vw, 8rem);
  --section-big-gap: clamp(7rem, 5vw, 14rem);
  --size-100: 0.4rem;
  --size-200: 0.8rem;
  --size-300: 1.2rem;
  --size-400: 1.6rem;
  --size-500: 2.4rem;
  --size-600: 3.2rem;
  --size-700: 4.8rem;
  --size-800: 6.4rem;
  --size-900: 9.6rem;
  --radius-pill: 999px;
  --btn-height: 4rem;
}

/* Title scale (06/10/2026): every title font-size in main.css + style.css is
   written calc(<size> * var(--title-scale, 1)). Hebrew titles render 15%
   smaller; EN stays at 1. Change the one number here to retune. */
:root:lang(he) {
  --title-base: 0.85;
  --title-scale: 0.85;
  /* 12/10/2026: titles + quotes on Hebrew pages — Hebrew letters in Heebo,
     English words keep Cormorant. Cormorant has no Hebrew glyphs, so the
     browser falls through to Heebo per character; one token covers every
     var(--ff-primary) consumer in main.css + style.css. */
  --ff-primary: "Cormorant Garamond", "Heebo", sans-serif;
}
/* 07/10/2026 — HEAD (hero / page-top) titles take a further 15% on Hebrew
   pages: 0.85 x 0.85 = 0.7225 of the original size. They already multiply by
   --title-scale, so overriding the variable on these elements is the whole
   change. Covers .main-heading (deals / gift-card heroes + the banner words)
   and every *-hero__title. */
:root:lang(he) :is(
  .main-heading,
  .hotels-hero__title,
  .deals-hero__title,
  .spa-hero__title,
  .contact-hero__title,
  .wellness-hero__title,
  .gallery-hero__title
) {
  --title-base: 0.7225;
  --title-scale: 0.7225;
}
/* 12/10/2026 — every h1 + h2 smaller (-15%, then another -10% = 0.765), BOTH languages, on top of
   whatever the language/hero rules above set (--title-base). Spans inside an
   h1/h2 inherit the scaled value. !important so it also beats the hero rule
   when that rule lands on the h1/h2 itself (custom property, not a paint rule). */
h1,
h2 {
  --title-scale: calc(var(--title-base, 1) * 0.765 * var(--hero-boost, 1)) !important;
}
/* 12/10/2026 (client) — hero titles 20% bigger on mobile. Every hero title is
   an h1 (contact-/spa-/wellness-hero__title, deals/gift-card .main-heading),
   so the boost rides the h1/h2 multiplier above; desktop untouched. */
@media (max-width: 991.98px) {
  h1:is(.contact-hero__title, .spa-hero__title, .wellness-hero__title, .main-heading) {
    --hero-boost: 1.44; /* 12/10/2026: +20%, then another +20% (1.2 x 1.2) */
  }
}
/* 13/10/2026 (client) — ONE size for every section title (h2) on phones, and
   bigger. Measured at 330px before this: 18-31px across ~15 classes
   (secondary-heading 31, section-title-en 29, zamarin-section__title 26/22,
   faq/wellness/gallery/contact titles 21, gift-card 20, hotel-home FAQ 18).
   Left out on purpose: the big display banners (.main-heading /
   .banner__heading — "Breath. With. Us."), the spa quote and the product-page
   title. Weights are untouched. (0,4,2) beats every per-class size rule. */
@media (max-width: 767.98px) {
  main h2:not(.main-heading):not(.banner__heading):not(.spa-quote):not(.woo-single__title) {
    font-size: 3.2rem;
    line-height: 1.2;
  }
}
/* 14/10/2026 (client) — FRONT PAGE + HOTEL HOMES: every section title (h2) one
   size on desktop/tablet too. Front page had .section-title-en (12rem peak) vs
   .about__title / .gift-card__title (6rem); hotel homes had .secondary-heading
   (rooms / spa) vs .zamarin-section__title(--sm) (deals / wellness / area) vs
   .gift-card__title. All take the .section-title-en size. Out on purpose, as on
   mobile above: the display banners (.banner__heading / .main-heading) and the
   FAQ title (.zamarin-faq on hotel homes, any *faq* class elsewhere).
   Phones keep the shared 3.2rem rule above. (0,4,2)+ beats the per-class rules. */
@media (min-width: 768px) {
  :is(body.home, body.page-template-template-hotel-home) main h2:not(.main-heading):not(.banner__heading):not([class*="faq"]):not(.zamarin-faq h2) {
    font-size: calc(clamp(4.5rem, 6vw, 12rem) * var(--title-scale, 1));
    line-height: 1;
  }
}
/* …and one WEIGHT, every width: 500 (Bootstrap's h2 weight, which the majority —
   .section-title-en / .zamarin-section__title — already render at, and what the
   13/10 mobile pass gave .gift-card__title). Overrides the 300 on .about__title,
   .gift-card__title and .secondary-heading on these two page types only. */
:is(body.home, body.page-template-template-hotel-home) main h2:not(.main-heading):not(.banner__heading):not([class*="faq"]):not(.zamarin-faq h2) {
  font-weight: 500;
}

@keyframes zoomOut {
  0% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.zoom-out {
  animation: zoomOut 4s ease forwards;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}
/* box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*reset font sizes of all tags*/
* {
  font-size: inherit;
  margin: 0;
  padding: 0;
}

/* reset font size 1rem to 10px */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body,
html {
  height: 100%;
}

/* remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  line-height: 1.4;
}

/* remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/* set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* set core body defaults */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--clr-neutral-100);
  display: flex;
  flex-direction: column;
}

/* a elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* make images easier to work with */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}
/* 12/10/2026 — em_image()'s WebP wrapper. display:contents removes the
   <picture> box so every layout rule (flex/grid/absolute) still applies to the
   <img> exactly as before the wrapper existed. */
.em-picture {
  display: contents;
}
/* 13/10/2026 — with the <picture> box removed, Chrome renders its <source> as a
   display:block box, which became an extra grid/flex item next to every image
   (the wellness mosaic tiles scattered across empty cells). Never a layout box. */
.em-picture > source {
  display: none;
}

/* avoid text overflows */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  font-size: inherit;
}

/* remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-size: var(--fs-200);
  line-height: 100%;
  font-weight: 400;
  font-family: var(--ff-secondary);
  color: var(--clr-primary-200);
  background-color: var(--clr-neutral-200);
}

/* Heading */
.main-heading {
  font-size: calc(var(--main-heading) * var(--title-scale, 1));
  font-weight: 500;
  font-family: var(--ff-primary);
  color: var(--clr-neutral-100);
}

.secondary-heading {
  font-size: calc(var(--secondary-heading) * var(--title-scale, 1));
  font-weight: 300;
  font-family: var(--ff-primary);
  color: var(--clr-primary-200);
}

.sub-heading {
  font-size: calc(var(--sub-heading) * var(--title-scale, 1));
  font-weight: 500;
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  color: var(--clr-title);
}

.heading-sm {
  font-size: calc(var(--heading-sm) * var(--title-scale, 1));
  font-weight: 500;
  font-family: var(--ff-primary);
  color: var(--clr-title);
}

/* Fixed-size heading variants (replace the removed fs-* utilities) */
.secondary-heading--fixed {
  font-size: calc(clamp(var(--fs-500), 4vw, var(--fs-600)) * var(--title-scale, 1));
  /* F5 (18/08/2026 — Figma) — Heebo, matching the hotel-spa/rooms fixed headings
     to the site's --ff-secondary. Weight 300 + colour --clr-primary-200 already
     inherited from base .secondary-heading; only the family diverges. */
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  line-height: 1.1; /* 13/10/2026 — tighter, for titles that wrap to 2 lines */
}

.sub-heading--sm {
  font-size: calc(clamp(var(--fs-150), 2vw, var(--fs-200)) * var(--title-scale, 1));
  /* 06/10/2026: room subtitle / "גודל החדר" under the rooms carousels are meta
     text, not titles — regular (body) font, not the title stack .sub-heading uses. */
  font-family: var(--ff-secondary);
}

.sub-heading--quote {
  /* 13/10/2026 (client: too small on mobile) — was clamp(fs-150, 2vw, fs-200),
     ~15px on a phone. */
  font-size: calc(clamp(var(--fs-250), 6vw, var(--fs-300)) * var(--title-scale, 1));
}

@media (min-width: 992px) {
  .sub-heading--quote {
    font-size: calc(clamp(var(--fs-300), 3vw, var(--fs-400)) * var(--title-scale, 1));
  }
}
.section-gap {
  padding: var(--section-gap) 0;
}

@media (max-width: 991px) {
  body {
    font-size: var(--fs-100);
  }
}
/* Desc */
.main-desc {
  font-size: var(--sub-text);
  line-height: 1.6;
  margin-top: 2rem;
  color: var(--clr-primary-200);
}
/* 14/10/2026 (client) — breathing room between paragraphs in every description
   block (spa intro, about, facility/workshop desc, hotel cards…). Not after the
   last one. :where() keeps this at (0,1,1) so the components that already set
   their own paragraph spacing later in the file (.hotel-detail__desc p 2.4rem,
   .woo-description__body p) still win on source order. */
.main-desc p:where(:not(:last-child)) {
  margin-bottom: 5px;
}

.mybtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--ff-secondary);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--clr-neutral-100);
  background-color: var(--accent, var(--clr-primary-100));
  border: 1px solid var(--clr-neutral-100);
  border-radius: var(--radius-pill);
  height: var(--btn-height);
  padding: 0 3.7rem;
  gap: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.mybtn:hover {
  background-color: transparent;
  color: var(--accent, var(--clr-primary-100));
  border-color: var(--accent, var(--clr-primary-100));
}
.mybtn--outline, .mybtn--header {
  background-color: transparent;
  font-weight: 400;
  color: var(--clr-neutral-100);
  border-color: var(--clr-neutral-100);
  height: auto;
  padding: 1rem 2rem;
}
.mybtn--outline:hover, .mybtn--header:hover {
  background-color: var(--clr-neutral-100);
  color: var(--clr-primary-100);
}
.mybtn--dark {
  /* for use on light/cream backgrounds where white-on-white would vanish.
     13/10/2026 — hotel pages: border/text in the hotel colour (--accent),
     filled with it on hover. Network pages have no --accent → unchanged. */
  color: var(--accent, var(--clr-primary-100));
  border-color: var(--accent, var(--clr-primary-100));
  background-color: transparent;
}
.mybtn--dark:hover {
  background-color: var(--accent, var(--clr-primary-100));
  border-color: var(--accent, var(--clr-primary-100));
  color: var(--clr-neutral-100);
}

@media (max-width: 991px) {
  .mybtn {
    font-size: 1.4rem;
    padding: 0 1.8rem;
    height: 4rem;
  }
  .mybtn--outline, .mybtn--header {
    padding: 0.8rem 1.6rem;
  }
}
/* Loader styles */
#loader {
  position: fixed;
  inset: 0;
  background: var(--clr-primary-500);
  /* background color */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader__content img {
  width: 200px;
  height: auto;
  animation: pulse 1.5s infinite ease-in-out;
}

.slider-btn {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  border: 1px solid var(--clr-primary-400);
  background: transparent;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.35s;
}
.slider-btn:hover {
  background: var(--clr-neutral-100);
  color: #fff;
}
.slider-btn svg {
  width: 2.4rem;
  height: 2.4rem;
}
.slider-btn svg path {
  stroke: currentColor;
}

@media (max-width: 767px) {
  .slider-btn {
    display: none;
  }
}
.myinput {
  height: 60px;
  flex: 1;
  width: 100%;
  background: rgba(210, 174, 154, 0.11);
  border: 1px solid #F8F2ED;
  border-radius: 8px;
  padding: 2rem;
  color: var(--clr-neutral-100);
  direction: rtl;
}
.myinput::-moz-placeholder {
  color: var(--clr-neutral-100);
}
.myinput::placeholder {
  color: var(--clr-neutral-100);
}
.myinput:focus {
  outline: 0;
  box-shadow: none;
}

input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 1.4px solid var(--clr-neutral-200);
  border-radius: 0;
  background: transparent;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
input[type=checkbox]:checked {
  background-color: var(--clr-neutral-100);
  border-color: var(--clr-primary-400);
}
input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 11px;
  translate: -50% -50%;
  border: solid var(--clr-primary-400);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 991px) {
  .myinput {
    padding: 2rem 0;
    font-size: var(--fs-200);
  }
}
.myicon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* .myicon is a MASK icon: an empty element whose shape comes entirely from
     mask-image, filled with currentColor. Nine of the ten uses on the home page wrap a
     real inline <svg> instead of standing alone — every icon in .split-feature__features
     among them. That combination breaks in three ways at once: the solid currentColor
     block paints behind the artwork, the mask clips EVERYTHING inside (the child svg
     included) to a different icon's silhouette, and the child is boxed to the icon's
     dimensions.

     It only became visible recently. currentColor inherits from body, and body's colour
     used to be --clr-neutral-200 — the exact same token as the page background — so the
     mask block was cream on cream and could not be seen. Once body's colour was
     corrected to --clr-primary-200 (it was making inherited text invisible site-wide),
     the block started painting and the clipped silhouette appeared over the real icons.

     Neutralising the mask treatment when the element has an svg child is the
     non-destructive fix: it leaves the ten markup sites untouched, keeps working for
     the one genuine mask usage (myicon--spa), and applies on every page at once. The
     width/height from the size modifiers is deliberately left alone — those SVGs are
     36x36 and --lg is 3.6rem, so the box is already the right size for them. */
}
.myicon:has(> svg) {
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
}
.myicon--sm {
  width: 1.2rem !important;
  height: 1.2rem !important;
}
.myicon--md {
  width: 1.6rem !important;
  height: 1.6rem !important;
}
.myicon--lg {
  width: 3.6rem !important;
  height: 3.6rem !important;
}
.myicon--xl {
  width: 4.6rem !important;
  height: 4.6rem !important;
}
.myicon--glob {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 256 256'%3E%3Cpath fill='%230F172A' d='M128 26a102 102 0 1 0 102 102A102.12 102.12 0 0 0 128 26m81.57 64h-40.38a132.6 132.6 0 0 0-25.73-50.67A90.29 90.29 0 0 1 209.57 90m8.43 38a89.7 89.7 0 0 1-3.83 26h-42.36a155.4 155.4 0 0 0 0-52h42.36a89.7 89.7 0 0 1 3.83 26m-90 87.83a110 110 0 0 1-15.19-19.45A124.2 124.2 0 0 1 99.35 166h57.3a124.2 124.2 0 0 1-13.46 30.38A110 110 0 0 1 128 215.83M96.45 154a139.2 139.2 0 0 1 0-52h63.1a139.2 139.2 0 0 1 0 52ZM38 128a89.7 89.7 0 0 1 3.83-26h42.36a155.4 155.4 0 0 0 0 52H41.83A89.7 89.7 0 0 1 38 128m90-87.83a110 110 0 0 1 15.19 19.45A124.2 124.2 0 0 1 156.65 90h-57.3a124.2 124.2 0 0 1 13.46-30.38A110 110 0 0 1 128 40.17m-15.46-.84A132.6 132.6 0 0 0 86.81 90H46.43a90.29 90.29 0 0 1 66.11-50.67M46.43 166h40.38a132.6 132.6 0 0 0 25.73 50.67A90.29 90.29 0 0 1 46.43 166m97 50.67A132.6 132.6 0 0 0 169.19 166h40.38a90.29 90.29 0 0 1-66.11 50.67Z'/%3E%3C/svg%3E");
}
.myicon--call {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%230F172A' d='M16.552 22.133c-1.44-.053-5.521-.617-9.795-4.89c-4.273-4.274-4.836-8.354-4.89-9.795c-.08-2.196 1.602-4.329 3.545-5.162a1.47 1.47 0 0 1 1.445.159c1.6 1.166 2.704 2.93 3.652 4.317a1.504 1.504 0 0 1-.256 1.986l-1.951 1.449a.48.48 0 0 0-.142.616c.442.803 1.228 1.999 2.128 2.899s2.153 1.738 3.012 2.23a.483.483 0 0 0 .644-.162l1.27-1.933a1.503 1.503 0 0 1 2.056-.332c1.407.974 3.049 2.059 4.251 3.598a1.47 1.47 0 0 1 .189 1.485c-.837 1.953-2.955 3.616-5.158 3.535'/%3E%3C/g%3E%3C/svg%3E");
}
.myicon--mail {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%230F172A' fill-rule='evenodd' d='M5 20a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3zM7.625 8.22a1 1 0 1 0-1.25 1.56l3.75 3.001a3 3 0 0 0 3.75 0l3.75-3a1 1 0 1 0-1.25-1.562l-3.75 3a1 1 0 0 1-1.25 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.myicon--location {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.4 7 11.4 7.3 11.7a1 1 0 0 0 1.4 0C13 21.4 20 15.4 20 10c0-4.4-3.6-8-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E");
}
.myicon--instagram {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2c2.7 0 3.1 0 4.1.06 1.1.05 1.8.2 2.5.5.7.3 1.2.6 1.8 1.2s.9 1.1 1.2 1.8c.3.7.45 1.4.5 2.5.05 1 .06 1.4.06 4.1s0 3.1-.06 4.1c-.05 1.1-.2 1.8-.5 2.5-.3.7-.6 1.2-1.2 1.8s-1.1.9-1.8 1.2c-.7.3-1.4.45-2.5.5-1 .05-1.4.06-4.1.06s-3.1 0-4.1-.06c-1.1-.05-1.8-.2-2.5-.5-.7-.3-1.2-.6-1.8-1.2s-.9-1.1-1.2-1.8c-.3-.7-.45-1.4-.5-2.5C2 15.1 2 14.7 2 12s0-3.1.06-4.1c.05-1.1.2-1.8.5-2.5.3-.7.6-1.2 1.2-1.8s1.1-.9 1.8-1.2c.7-.3 1.4-.45 2.5-.5C8.9 2 9.3 2 12 2Zm0 2.16c-2.67 0-2.99 0-4.04.06-.85.04-1.31.18-1.61.3-.4.16-.7.34-1 .64-.3.3-.48.6-.64 1-.12.3-.26.76-.3 1.61-.05 1.05-.06 1.37-.06 4.04s0 2.99.06 4.04c.04.85.18 1.31.3 1.61.16.4.34.7.64 1 .3.3.6.48 1 .64.3.12.76.26 1.61.3 1.04.05 1.36.06 4.04.06 2.68 0 3-.01 4.04-.06.85-.04 1.31-.18 1.61-.3.4-.16.7-.34 1-.64.3-.3.48-.6.64-1 .12-.3.26-.76.3-1.61.05-1.05.06-1.37.06-4.04s0-2.99-.06-4.04c-.04-.85-.18-1.31-.3-1.61-.16-.4-.34-.7-.64-1-.3-.3-.6-.48-1-.64-.3-.12-.76-.26-1.61-.3-1.05-.05-1.37-.06-4.04-.06ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2.16a2.84 2.84 0 1 0 0 5.68 2.84 2.84 0 0 0 0-5.68Zm5.2-3.66a1.17 1.17 0 1 1 0 2.34 1.17 1.17 0 0 1 0-2.34Z'/%3E%3C/svg%3E");
}
.myicon--restaurant {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v8a2 2 0 0 1-2 2v10H3V12a2 2 0 0 1-2-2V2h1.5v6h1V2H5v6h1V2H7Zm11 0c-2.2 0-4 2.7-4 6 0 2.6 1.1 4.8 2.7 5.6L16 22h2l-.6-8.3c1.7-.9 2.6-3 2.6-5.7 0-3.3-1.8-6-4-6Z'/%3E%3C/svg%3E");
}
.myicon--wine {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10l-1 8a4 4 0 0 1-3 3.87V19h3v2H8v-2h3v-5.13A4 4 0 0 1 8 10L7 2Zm1.2 2 .5 4h6.6l.5-4H8.2Z'/%3E%3C/svg%3E");
}
.myicon--spa {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1.5 2 2.5 4 2.5 6a2.5 2.5 0 0 1-5 0c0-2 1-4 2.5-6Zm-6 4c1.2 1.4 2 2.9 2 4.3a2 2 0 1 1-4 0c0-1.4.8-2.9 2-4.3Zm12 0c1.2 1.4 2 2.9 2 4.3a2 2 0 1 1-4 0c0-1.4.8-2.9 2-4.3ZM6 21c0-3.3 2.7-6 6-6s6 2.7 6 6H6Z'/%3E%3C/svg%3E");
}
.myicon--parking {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.5 5h2.6a3.1 3.1 0 0 1 0 6.2H10.5V17H9V7h1.5Zm0 1.5v3.2h1.6a1.6 1.6 0 0 0 0-3.2h-1.6Z'/%3E%3C/svg%3E");
}
.myicon--beach {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c5 4 8 8.5 8 12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1c0-3.5 3-8 8-12Zm-1 6.4A14 14 0 0 0 7.7 14h6.6A14 14 0 0 0 11 9.4ZM2 21h20v1.5H2V21Z'/%3E%3C/svg%3E");
}
.myicon--culinary {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11a9 9 0 0 1 18 0H3Zm-1 2h20v1.5H2V13Zm2 3.5h16A5 5 0 0 1 15 21H9a5 5 0 0 1-5-4.5Z'/%3E%3C/svg%3E");
}
.myicon--towel {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16v6h-3v12h-2V9H9v12H7V9H4V3Zm2 2v2h12V5H6Z'/%3E%3C/svg%3E");
}
.myicon--backpack {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v2a3 3 0 0 1 3 3v2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2V7a3 3 0 0 1 3-3V2Zm1 2v2h4V4h-4Zm-1 9v2h6v-2H9Z'/%3E%3C/svg%3E");
}
.myicon--tshirt {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h2a2 2 0 0 0 4 0h2l5 4-3 3-2-1.5V21H8V7.5L6 9 3 6l5-4Z'/%3E%3C/svg%3E");
}
.myicon--coffee {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h14v2h1a3 3 0 0 1 0 6h-1a6 6 0 0 1-6 6H8a6 6 0 0 1-6-6V3h1Zm12 6h1a1 1 0 0 0 0-2h-1v2ZM2 20h16v2H2v-2Z'/%3E%3C/svg%3E");
}
.myicon--candle {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 1.3 1.6 2.3 1.6 3.1a1.6 1.6 0 1 1-3.2 0C10.4 4.3 11 3.3 12 2ZM9 8h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}
.myicon--facebook {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%230F172A' d='M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z'/%3E%3C/svg%3E");
}
.myicon--linkedin {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='4.983' cy='5.009' r='2.188' fill='%230F172A'/%3E%3Cpath fill='%230F172A' d='M9.237 8.855v12.139h3.769v-6.003c0-1.584.298-3.118 2.262-3.118c1.937 0 1.961 1.811 1.961 3.218v5.904H21v-6.657c0-3.27-.704-5.783-4.526-5.783c-1.835 0-3.065 1.007-3.568 1.96h-.051v-1.66zm-6.142 0H6.87v12.139H3.095z'/%3E%3C/svg%3E");
}
/* Round Z6 ADDITION — no static precedent; built in the theme's own mask-icon
   system for consistency instead of an inline <svg> in markup. Generic
   "expand more" chevron, currentColor via the mask. */
.myicon--chevron-down {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%230F172A' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}
/* Round Z13 ADDITION — leading arrow for the hotel-header network link. Same
   mask-icon system (currentColor). Art points LEFT = "go to" in RTL (he
   default); the .dir-ltr guard flips it for EN (see .header__network-link). */
.myicon--arrow-nav {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%230F172A' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z'/%3E%3C/svg%3E");
}
/* Round Z18 ADDITION — WhatsApp glyph for the network contact page's per-hotel
   direct-contact rows (phone = --call, email = --mail already exist; only this
   was missing). Same mask-icon system (currentColor), matching the Z6/Z13
   precedent for adding a new icon rather than inlining an <svg> in markup.
   12/10/2026: glyph swapped for the paths of template-parts/icons/whatsapp.php —
   the old 24px art had the handset off-centre in the bubble (mobile contact bar).
   Handset path scaled to 75% around the bubble centre (19.81) — client: too big. */
.myicon--whatsapp {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 39.619 39.619'%3E%3Cpath fill='%230F172A' d='M19.8095 0C8.8861 0 0 8.8861 0 19.8095C0 23.536 1.03543 27.1535 2.99962 30.2949C2.21714 33.0362 0.80381 38.2217 0.788571 38.2758C0.715429 38.544 0.793905 38.8305 0.994286 39.0232C1.19467 39.216 1.48419 39.2846 1.74781 39.2038L9.6 36.7886C12.6758 38.6415 16.1981 39.619 19.8095 39.619C30.733 39.619 39.619 30.733 39.619 19.8095C39.619 8.8861 30.733 0 19.8095 0ZM19.8095 38.0952C16.3665 38.0952 13.0126 37.133 10.1097 35.3135C9.98705 35.2366 9.8461 35.1977 9.70514 35.1977C9.62971 35.1977 9.55429 35.2091 9.48114 35.2312L2.62476 37.3417C3.12838 35.5032 4.03352 32.2149 4.55848 30.3855C4.61943 30.1737 4.58514 29.9451 4.46552 29.76C2.54095 26.7985 1.52381 23.3577 1.52381 19.8095C1.52381 9.72724 9.72724 1.52381 19.8095 1.52381C29.8918 1.52381 38.0952 9.72724 38.0952 19.8095C38.0952 29.8918 29.8918 38.0952 19.8095 38.0952Z'/%3E%3Cpath fill='%230F172A' transform='translate(4.953 4.953) scale(0.75)' d='M32.7505 24.4769C31.344 23.696 30.1463 22.9127 29.2724 22.3413C28.6049 21.9055 28.1227 21.5908 27.7691 21.4133C26.781 20.9204 26.032 21.2686 25.747 21.5566C25.7112 21.5924 25.6792 21.6312 25.6518 21.6724C24.6255 23.2122 23.2853 24.6849 22.893 24.7642C22.4396 24.6933 20.3177 23.4872 18.2088 21.731C16.0556 19.9367 14.701 18.2186 14.5021 17.0484C15.8834 15.6266 16.381 14.7322 16.381 13.7143C16.381 12.6651 13.9337 8.28493 13.491 7.84227C13.0469 7.39884 12.0465 7.32951 10.5173 7.63427C10.3703 7.66398 10.2347 7.73636 10.128 7.84227C9.94286 8.02741 5.61066 12.4442 7.66933 17.7973C9.92914 23.6724 15.7295 30.5013 23.1246 31.6106C23.965 31.7364 24.7528 31.7988 25.4903 31.7988C29.8408 31.7988 32.4084 29.6099 33.1314 25.2678C33.1855 24.9501 33.0324 24.6331 32.7505 24.4769ZM23.3509 30.1036C15.5307 28.931 10.605 21.1832 9.09181 17.2503C7.59085 13.3493 10.3589 9.87122 11.0537 9.08493C11.619 8.98893 12.2141 8.94855 12.4625 8.98741C12.9813 9.70893 14.7779 13.1032 14.8571 13.7143C14.8571 14.1143 14.7269 14.6712 13.1756 16.2232C13.0324 16.3657 12.9524 16.5592 12.9524 16.7619C12.9524 20.7512 21.3669 26.2857 22.8571 26.2857C24.1531 26.2857 25.843 24.1074 26.8053 22.688C26.861 22.6903 26.9547 22.7093 27.088 22.7764C27.3623 22.9143 27.8377 23.2244 28.4389 23.6175C29.2328 24.1364 30.2872 24.8251 31.5322 25.539C30.9669 28.259 29.3867 31.0103 23.3509 30.1036Z'/%3E%3C/svg%3E");
}

.icsquar {
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--clr-primary-400);
  display: inline-block;
}

@media (max-width: 767px) {
  .myicon {
    width: 22px;
    height: 22px;
  }
  .icsquar {
    width: 1.3rem;
    height: 1.3rem;
    background-color: var(--clr-primary-400);
    display: inline-block;
  }
}
/* Confirmed Figma node 22:9319 — bg #F5F0EB (--clr-neutral-200), 16px black links, 3 columns */
.footer {
  background-color: var(--bg-main);
  padding-block: clamp(4rem, 8vw, 6rem) 2rem; /* fixed — SCSS source had "clamp(...) - 2rem" (invalid, broke the whole compile chain), but the live compiled CSS this was meant to match already had a valid two-value shorthand here (block-start/block-end). Restored that exact form rather than flattening to a single symmetric value, since it matches what was actually live and presumably intentional. */
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}
.footer__logo {
  height: 8rem;
  width: auto;
  /* 06/10/2026 — hotel pages now show the hotel's logo here (footer.php), and
     some are much wider than the network mark. A fixed-height flex item can't
     shrink, so on a phone it ran off the screen. Cap it to the available width;
     object-fit:contain scales the artwork instead of squashing it. */
  max-width: 100%;
  min-width: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: right center;
     object-position: right center;
}
@media (max-width: 767.98px) {
  /* Let a wide logo drop onto its own line rather than squeezing the link
     columns, and use a slightly shorter mark on phones. */
  .footer__top {
    flex-wrap: wrap;
  }
  .footer__logo {
    height: 6rem;
  }
}
.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 8.2rem);
}
.footer__col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 14rem;
}
.footer__col a {
  font-family: var(--ff-secondary);
  font-size: 1.6rem;
  color: var(--clr-neutral-900);
  text-decoration: none;
}
.footer__col a:hover {
  color: var(--clr-primary-100);
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2.4rem;
  border-top: 1px solid var(--clr-primary-300);
}
.footer__copyright {
  font-family: var(--ff-secondary);
  font-size: 1.4rem;
  color: var(--clr-primary-200);
  margin: 0;
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 1px solid var(--clr-primary-300);
  color: var(--clr-primary-200);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.footer__social-link:hover {
  background-color: var(--clr-primary-100);
  color: var(--clr-neutral-100);
}

.footer__credit{
  width: 100%;
  justify-content: space-between;
}

/* Item 8 (13/08/2026): reconcile the credit row to the footer palette. The
   footer is cream (.footer background = --bg-main / #F5F0EB); its dark text var
   is --clr-primary-200 (#28374A), used by .footer__copyright and
   .footer__social-link. .copy / .emilia a were the odd ones out — they carried a
   white fill on Ron's dark-footer markup, which is invisible here. Switched to
   the footer's own text var (not pure #000) so the credit matches the rest of
   the footer and reads correctly on the cream. footer.php itself is untouched.
   ⚠ In this working copy the two rules were already --clr-neutral-900 (#000),
   NOT #fff as reported — the deployed CSS presumably still had the white; this
   change makes the deployed result dark + footer-consistent either way. */
.copy {
  color: var(--clr-primary-200);
  font-size: 14px;
}
.emilia a {
  color: var(--clr-primary-200);
  font-size: 13px;
  direction: ltr;
}
.emilia img {
  width: auto; /* 14/10/2026: new-emilia.svg carries width/height attrs — height drives, width follows the ratio */
  height: 11px;
}

/* Floating WhatsApp button — round Z4, F2c. Single button, gated on the
   ts_whatsapp_float toggle (footer.php). Position is PHYSICAL bottom-left on BOTH
   languages (common IL pattern), so `left`, not inset-inline-start. z-index 90
   sits below the header's 100. #25D366 is the WhatsApp brand literal — declared
   here only, deliberately NOT a palette token. */
.whatsapp-float {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 90;
  width: 5.6rem;
  height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: var(--clr-neutral-100);
  border-radius: 50%;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  filter: brightness(1.05);
  color: var(--clr-neutral-100);
}

@media (max-width: 767px) {
  .whatsapp-float {
    width: 4.8rem;
    height: 4.8rem;
    left: 1.6rem;
    bottom: 1.6rem;
  }
}

/* 18/10/2026 (client) — network pages: floating "צרו קשר" pill in the
   WhatsApp float's spot (footer.php). Same corner / layer / shadow as the
   float, Liam main colour instead of the WhatsApp green. Desktop only — the
   mobile contact bar carries the same link below 992px. */
.contact-float {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  height: 5.6rem;
  padding-inline: 2.4rem;
  background-color: var(--clr-primary-100);
  color: var(--clr-neutral-100);
  font-family: var(--ff-secondary);
  font-size: 1.6rem;
  text-decoration: none;
  border-radius: var(--radius-pill, 10rem);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.contact-float:hover,
.contact-float:focus-visible {
  transform: scale(1.04);
  filter: brightness(1.15);
  color: var(--clr-neutral-100);
}
.contact-float .myicon {
  width: 2rem;
  height: 2rem;
}
@media (max-width: 991.98px) {
  .contact-float {
    display: none;
  }
}

/* Chat-widget popup — round Z10, F3/F4. Anchored above the float button
   (bottom = float's own bottom offset + height + 0.8rem gap, same left), so
   moving the float in a future round only needs its own numbers restated
   here too — there's no shared token for "float geometry" to derive from.
   z-index 91 sits just above the float's 90, below the header's 100.
   #25D366 reused verbatim from .whatsapp-float above — no new token.

   [hidden] pre-JS (Z4 :not([hidden]) precedent, e.g. .header__dropdown-toggle
   above): base rule stays display:none regardless of .is-open so a no-JS
   visitor never sees it; :not([hidden]) is what actually shows it. The OPEN
   animation itself is opacity+transform only (never a display toggle, which
   can't transition) — JS (header.js) removes [hidden] first, then adds
   .is-open a frame later so the transition has something to animate from. */
.whatsapp-widget {
  display: none;
  position: fixed;
  left: 2rem;
  bottom: 8.4rem;
  z-index: 91;
  width: min(30rem, calc(100vw - 3.2rem));
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.whatsapp-widget:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.whatsapp-widget.is-open {
  opacity: 1;
  transform: translateY(0);
}
.whatsapp-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  background-color: #25D366;
  color: var(--clr-neutral-100);
}
.whatsapp-widget__title {
  font-family: var(--ff-secondary);
  font-size: calc(1.5rem * var(--title-scale, 1));
  font-weight: 500;
}
.whatsapp-widget__close {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--clr-neutral-100);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}
.whatsapp-widget__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem;
  background-color: var(--clr-neutral-100);
}
.whatsapp-widget__bubble {
  margin: 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1.2rem 1.2rem 1.2rem 0.2rem;
  background-color: var(--clr-neutral-200);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--clr-primary-200);
}
.whatsapp-widget__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.2rem;
  /* extra inline-end room so the pinned icon (Z11 F2) never overlaps the
     centred label; inline-start keeps the base pill inset */
  padding-inline: 1.6rem 4rem;
  border-radius: var(--radius-pill);
  background-color: #25D366;
  color: var(--clr-neutral-100);
  font-family: var(--ff-secondary);
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  transition: filter 0.25s ease;
}
.whatsapp-widget__cta:hover {
  filter: brightness(1.05);
  color: var(--clr-neutral-100);
}
/* Z11 F2 — circular glyph badge pinned to the pill's inline-end (visually left
   in RTL). Darker-green disc (green pill darkened by the translucent black),
   white line-art icon via currentColor. */
.whatsapp-widget__cta-icon {
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  color: var(--clr-neutral-100);
}
.whatsapp-widget__cta-icon .wa-icon {
  width: 2rem;
  height: 2rem;
  overflow: visible;
}
/* Z11 F3 — joinchat-style line-drawing loop. pathLength="1" so dasharray/offset
   are 0..1. One 6s cycle draws the bubble in, holds, crossfades to the plane,
   holds, and loops — only one path visible at a time. */
.wa-icon__bubble,
.wa-icon__plane {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.wa-icon__bubble {
  animation: waDrawBubble 6s ease-in-out infinite;
}
.wa-icon__plane {
  animation: waDrawPlane 6s ease-in-out infinite;
}
@keyframes waDrawBubble {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  17% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  58% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes waDrawPlane {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  50% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  67% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
}
/* Explicit static state for reduced motion. The global reduce block
   (main.css:183-195) forces animation-iteration-count:1 + duration:0.01ms
   !important, which would freeze the loop on its 0% frame (both paths
   un-drawn = empty badge). These non-animation props override that to a
   clean drawn bubble. */
@media (prefers-reduced-motion: reduce) {
  .wa-icon__bubble,
  .wa-icon__plane {
    animation: none;
    stroke-dashoffset: 0;
  }
  .wa-icon__bubble {
    opacity: 1;
  }
  .wa-icon__plane {
    opacity: 0;
  }
}
.whatsapp-widget__hotels {
  display: flex;
  flex-direction: column;
}
/* Z11 F1 — chooser rows read as tappable chips: rounded tint + inline-start
   nudge on hover, and a styled :focus-visible ring (replaces the bare UA box). */
.whatsapp-widget__hotel-link {
  padding: 1.2rem 0.8rem;
  border-top: 1px solid var(--clr-neutral-200);
  border-radius: 0.6rem;
  font-family: var(--ff-secondary);
  font-size: 1.5rem;
  color: var(--clr-primary-200);
  transition: color 0.2s ease, background-color 0.2s ease, padding-inline-start 0.2s ease;
}
.whatsapp-widget__hotel-link:first-child {
  border-top: 0;
}
.whatsapp-widget__hotel-link:hover,
.whatsapp-widget__hotel-link:focus-visible {
  background-color: var(--clr-neutral-200);
  color: var(--clr-primary-100);
  padding-inline-start: 1.6rem;
}
.whatsapp-widget__hotel-link:focus-visible {
  outline: 2px solid var(--clr-primary-100);
  outline-offset: -2px;
}

@media (max-width: 767px) {
  .whatsapp-widget {
    left: 1.6rem;
    bottom: 7.2rem;
  }
}
.header {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  z-index: 100;
  transition: background-color 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}
.header__navbar {
  width: 100%;
}
.header__grid {
  position: relative;
}
.header__border-bottom {
  border-bottom: 2px solid rgba(255, 255, 255, 0.3333333333);
  transition: border-bottom-color 200ms ease;
}
.header__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 5.6rem;
  flex: 1 1 100%;
  width: 100%;
}
.header__toggle {
  position: relative;
  z-index: 1;
}
.header__col {
  position: relative;
  z-index: 1;
}
.header__col--logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header__col--cta {
  margin-inline-start: auto;
}
.header__logo-box {
  display: inline-block;
}
.header__logo {
  height: 5.2rem;
  width: auto;
  /* 07/10/2026 — a wide, short logo (Mulan) at 5.2rem tall overflowed the
     centre slot the desktop nav leaves for it (.header__col--nav is capped at
     calc(50% - 9rem) → an 18rem slot) and ran into the menu / CTAs, so it read
     as off-centre. Cap the width to that slot; object-fit scales the artwork
     down proportionally instead of squashing it. Compact logos are unaffected. */
  max-width: 18rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.header {
  /* mobile toggle (3 lines, no Bootstrap icon font needed) */
  /* mobile toggle (3 lines, no Bootstrap icon font needed) */
}
.header__toggle {
  display: none;
  position: relative;
  border: 0;
  border-radius: 0.85rem;
  box-shadow: none;
  padding: 0;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.3s ease, border-radius 0.35s ease;
}
@media (max-width: 991.98px) {
  .header__toggle {
    display: flex;
  }
}
.header__toggle:hover {
  border-radius: 1.4rem;
}
.header__toggle:focus {
  box-shadow: none;
  outline: 0;
}
.header__toggle:focus-visible {
  outline: 2px solid var(--clr-neutral-100);
  outline-offset: 3px;
}
.header__toggle-line {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background-color: var(--clr-neutral-100);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease;
}
.header__toggle-line:nth-child(1), .header__toggle-line:nth-child(3) {
  width: 18px;
}
.header__toggle[aria-expanded=true] .header__toggle-line {
  width: 22px;
}
.header__toggle[aria-expanded=true] .header__toggle-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header__toggle[aria-expanded=true] .header__toggle-line:nth-child(2) {
  width: 0;
  opacity: 0;
  transform: translateX(-14px);
}
.header__toggle[aria-expanded=true] .header__toggle-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__nav-link {
  display: inline-block;
  text-decoration: none;
  color: var(--clr-neutral-100);
  font-size: 2rem;
  font-family: var(--ff-secondary);
  transition: opacity 0.3s;
}
.header__nav-link:hover {
  opacity: 0.75;
  color: var(--clr-neutral-100);
}
.header__dropdown {
  position: relative;
}
/* Round Z7, F2 — killed the legacy white-card look (--clr-neutral-100 bg,
   --clr-primary-200 text, 1rem gap, rounded on all 4 corners): it was the
   static's own dead-CSS look (untouched since the Z6 port) and read as a
   foreign light card against the header. Replaced, not stacked, so the panel
   now matches the header's own colouring in EITHER state (transparent-over-hero
   AND .is-scrolled) — --header-bg is printed on body unconditionally
   (inc/hotel.php em_theme_tokens_css()), not only while scrolled. */
.header__dropdown-menu {
  padding: 1.2rem 0;
  border: none;
  border-radius: 0 0 0.8rem 0.8rem;
  background-color: var(--header-bg, var(--clr-primary-200));
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.18);
  min-width: 22rem;
}
.header__dropdown-link {
  display: block;
  color: var(--clr-neutral-100);
  font-size: 1.6rem;
  padding: 0.9rem 2rem;
  transition: opacity 0.3s;
}
.header__dropdown-link:hover {
  opacity: 0.75;
  color: var(--clr-neutral-100);
}
/* Round Z6/Z7 — open/close mechanics for .header__dropdown (hover, focus,
   AND click open on desktop; tap open on mobile). The toggle button is a
   visible affordance on EVERY viewport now (Z7 F1 — was desktop:none in Z6,
   a mobile-only control) but stays hidden until JS confirms it can do
   something: it ships [hidden] in markup (inc/nav-hotels-dropdown.php) and
   only :not([hidden]) (Z4 read-more precedent) makes it visible, so a no-JS
   visitor never sees a dead control on ANY viewport — desktop still opens via
   plain CSS :hover/:focus-within with no button at all, mobile degrades to
   the plain navigating link (F3/F4). The auto-injected parent-link row stays
   mobile-only (see the <=991.98px block). */
.header__dropdown-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--clr-neutral-100); /* Z7 E1 fix — was `inherit`, resolving to body's
    dark --clr-primary-200 (nothing between the button and body sets `color`;
    .header__nav-link's white is on the SIBLING <a>, not inherited by the
    button). A dark mask-icon on the dark/photo header was invisible. */
  cursor: pointer;
}
.header__dropdown-toggle:not([hidden]) {
  display: inline-flex;
}
.header__dropdown-toggle .myicon--chevron-down {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.25s ease;
}
.header__dropdown-toggle[aria-expanded=true] .myicon--chevron-down,
.header__dropdown:hover .header__dropdown-toggle .myicon--chevron-down {
  /* :hover only, deliberately NOT :focus-within too (F1 names hover
     specifically) — on mobile the tapped parent <a> keeps :focus after
     preventDefault() (F3), so a :focus-within rule here would leave the
     chevron stuck rotated after JS closes the panel on a second tap. The
     [aria-expanded=true] rule already covers the click/focus-driven opens
     (button click, and JS keeps it in sync with the tap-to-open link). */
  transform: rotate(180deg);
}
.header__dropdown-parent {
  display: none;
}
.header__dropdown-parent .header__dropdown-link {
  font-weight: 500; /* Z7 F3 — visually distinct from the hotel rows below it */
}
.header {
  /* transparent over the hero photo by default */
}
.header--transparent {
  background-color: transparent;
}
.header {
  /* solid once the page scrolls past the hero (toggled via JS) */
}
.header.is-scrolled {
  background-color: var(--header-bg, var(--clr-primary-200)); /* Z4 F1c — Theme Settings ts_header_bg, default #474132 */
  padding-block: 0.6rem;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.12);
  border-bottom-color: transparent;
}
.header.is-scrolled .header__border-bottom {
  border-bottom-color: transparent;
}

/* ============================================================================
   Z12 (20/08/2026) — SCROLLED HOTEL HEADER: off-white bg, original-colour logo,
   accent-coloured controls. HOTEL PAGES ONLY (.zamarin-page, the layout-token
   body class every hotel carries; network pages get .is-network and are wholly
   untouched — their scrolled header stays brown). Every rule is gated on BOTH
   .zamarin-page AND .is-scrolled, so the transparent-over-hero state (white
   logo/text/pill outlines) is byte-identical in effect to before.

   Colour source is var(--accent, var(--clr-primary-100)): --accent is printed
   on body.hotel-{slug} by em_hotel_css_vars() ONLY when the term's color_accent
   is filled; a hotel missing it falls back to --clr-primary-100 (#2C3424), which
   still reads on cream. All four seeded accents (olive/burgundy/slate/near-black)
   are dark enough to read on --clr-neutral-200.

   Per-control recolours are DESKTOP-scoped (>=992px) where the control lives in
   the top bar: on mobile the nav links, CTA pills, mobile lang toggle and cart
   are either hidden (d-none d-lg-flex) or inside the brown .navbar-collapse panel
   (N2 — panel stays brown, its own colours untouched). The hamburger is the one
   bar control present on mobile, so it is recoloured at every width. */

/* F2 — dual-logo swap (hotel mode). Non-hotel pages emit a single .header__logo
   with neither modifier and are unaffected. Hard swap (F2: crossfade optional). */
.header__logo--dark {
  display: none;
}
.zamarin-page .header.is-scrolled .header__logo--light {
  display: none;
}
.zamarin-page .header.is-scrolled .header__logo--dark {
  display: inline;
}

/* F3a — off-white header + a soft shadow for separation, because the page body
   is the SAME token (body{background:var(--clr-neutral-200)}) so the header would
   otherwise be edgeless against it. */
.zamarin-page .header.is-scrolled {
  background-color: var(--clr-neutral-200);
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.08);
}
/* F3b — hamburger lines (all widths — the only bar control on mobile). */
.zamarin-page .header.is-scrolled .header__toggle-line {
  background-color: var(--accent, var(--clr-primary-100));
}
.zamarin-page .header.is-scrolled .header__toggle:focus-visible {
  outline-color: var(--accent, var(--clr-primary-100));
}
/* F3d — internal divider. 06/10/2026: REMOVED while scrolled (client: no bottom
   border on the scrolled header) — was a faint rgba(0,0,0,.08) hairline. Matches
   the network rule above; page separation is the F3a shadow alone. */
.zamarin-page .header.is-scrolled .header__border-bottom {
  border-bottom-color: transparent;
}

@media (min-width: 992px) {
  /* F3b — bar controls take the accent on their correct property. The cart glyph
     is a currentColor mask and the lang globe a currentColor .myicon, so both
     follow their link's colour automatically. */
  .zamarin-page .header.is-scrolled .header__nav-link,
  .zamarin-page .header.is-scrolled .header__nav-link:hover,
  .zamarin-page .header.is-scrolled .header__dropdown-toggle,
  .zamarin-page .header.is-scrolled .header__lang-toggle,
  .zamarin-page .header.is-scrolled .header__lang-toggle:hover,
  .zamarin-page .header.is-scrolled .header__cart,
  .zamarin-page .header.is-scrolled .header__cart:hover {
    color: var(--accent, var(--clr-primary-100));
  }
  .zamarin-page .header.is-scrolled .header__cart-count {
    background-color: var(--accent, var(--clr-primary-100));
  }
  /* F3c — the three .mybtn--header pills: accent outline + text, transparent fill
     unchanged. */
  .zamarin-page .header.is-scrolled .mybtn--header {
    color: var(--accent, var(--clr-primary-100));
    border-color: var(--accent, var(--clr-primary-100));
  }
  /* F3c/E6 — hover inverts to a FILLED accent pill with cream text (supersedes
     .mybtn--header:hover's white fill, which is invisible on cream; scrolled state
     only). Reaches the network pill too — its arrow rides currentColor -> cream. */
  .zamarin-page .header.is-scrolled .mybtn--header:hover {
    background-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-200);
  }
  .zamarin-page .header.is-scrolled .header__network-link:focus-visible {
    outline-color: var(--accent, var(--clr-primary-100));
  }
}

/* ============================================================================
   Z15 (20/08/2026) — CTA-cluster / logo overlap in the 992-1342px band.
   HOTEL PAGES ONLY. Between the navbar-expand-lg collapse point (992px) and
   ~1342px the desktop CTA cluster (3 .mybtn--header pills since Z13.1 + cart +
   lang) grows wide enough to reach the absolutely-centered logo (base rule
   .header__col--logo{position:absolute;left:50%;transform:translate(-50%,-50%)},
   so the logo takes no flow width and the right-aligned cluster slides under it).
   The nav links are a SEPARATE absolutely-positioned row capped at
   calc(50% - 9rem) (l.~1276), so they never reach centre — the collision is
   purely cluster-vs-logo.

   Client-approved: in this band only, tighten the pills and drop the network
   pill's leading arrow; both restore above 1342px because the query is bounded.
   Scoped to .zamarin-page — network headers render no .header__network-link (the
   $em_hotel gate in header.php) and their 2-pill cluster never overlaps, so there
   is nothing to fix there and no reason to restyle it. (0,3,0)/(0,4,0) selectors
   out-specify the (0,1,0)/(0,2,0) base rules — no !important. */
@media (min-width: 992px) and (max-width: 1342px) {
  /* F1a — biggest lever first: 2rem -> 1.4rem padding-inline (saves 1.2rem/pill)
     + 1.6rem -> 1.4rem text. Vertical padding (1rem) is left untouched so all
     three pills keep an identical height. */
  .zamarin-page .header .mybtn--header {
    padding-inline: 1.4rem;
    font-size: 1.4rem;
  }
  /* F1b — drop the leading arrow (1.1rem glyph + its 1rem flex gap = ~2.1rem);
     returns automatically above 1342px. */
  .zamarin-page .header .header__network-link .myicon--arrow-nav {
    display: none;
  }
}

@media (min-width: 992px) {
  .header__bar {
    height: 7.2rem;
  }
  .header__col--nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 0;
    max-width: calc(50% - 9rem);
    display: flex;
    justify-content: flex-start;
  }
  /* Round Z6 — .header__dropdown already has position:relative unconditionally
     (base rule, above). Desktop-only: the panel becomes an absolutely-positioned
     overlay, closed by default, opened on :hover AND :focus-within (keyboard
     a11y for free — Tab reaches the parent <a>, then the hotel links, no JS). */
  .header__dropdown-menu {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.6rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .header__dropdown:hover .header__dropdown-menu,
  .header__dropdown:focus-within .header__dropdown-menu,
  .header__dropdown.is-open .header__dropdown-menu {
    /* Z7 F1 — third opener: header.js toggles .is-open on click too now, so a
       trackpad/touch-on-desktop user without real :hover can open via click. */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
@media (max-width: 1480px) {
  .header__nav-link {
    font-size: 1.6rem;
  }
}
@media (max-width: 1285px) {
  .header__nav-link {
    font-size: 1.4rem;
  }
  .header__nav {
    gap: 1.8rem;
  }
}
@media (max-width: 991.98px) {
  .header__bar {
    justify-content: space-between;
  }
  /* 05/10/2026 (Figma comments) — the mobile logo is centred like the old
     zamarin.co.il header, so the base absolute-centre rule now applies at
     every width; the `position: static; transform: none` override that
     pinned it to the inline-end was deleted, not stacked. */
  .header__toggle {
    display: inline-flex;
  }
  .header__logo {
    height: 4.2rem;
  }
  /* F2a (17/08/2026) — the panel sat inside .container's side padding, so it was
     ~3.6-6rem narrower than the viewport and the menu rows were cramped. Escape
     that padding with a breakpoint-MATCHED negative inline margin (see the
     .container rules immediately below: 2rem at 576-991.98, 1.8rem at
     <=575.98 — the <=575.98 value is overridden in its own block after this
     one). At 576-991.98 .container is min(168rem, 100% - 2rem), i.e. its border
     box is already 1rem in from the viewport, so a full -2rem escape reaches
     that border box and keeps a 1rem inset — the 1.2rem radius still reads.
     .container itself is NEVER touched (site-wide). Only one .navbar-collapse
     exists in the theme (header.php:99) and this selector is (0,2,0)
     media-scoped, so desktop >=992 is untouched. */
  .header .navbar-collapse {
    background-color: var(--header-bg, var(--clr-primary-200)); /* Z4 F1c — mirrors the scrolled-header token */
    margin-top: 1.6rem;
    margin-inline: -2rem;
    padding: 2rem;
    border-radius: 1.2rem;
  }
  /* F2c — 1.4rem read as a cramped list once the panel widened; 2rem is the
     panel's own inner padding (above), so the rows now breathe on the same
     rhythm as the panel inset. Mobile block only — desktop keeps 2.2rem
     (l.808); the max-width:1285px step (l.892, gap 1.8rem) also matches on
     mobile but is earlier in source at equal specificity, so 2rem wins. */
  .header__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
  }
  /* 12/10/2026 (client): open mobile menu 18px (was 14px links / 16px sub-items). */
  .header__nav-link,
  .header__dropdown-link {
    font-size: 1.8rem;
  }
  /* Z8 F1 — animated collapse, replacing Z6's display:none/block pair (which
     can't transition). display:block is now permanent; max-height:0 +
     overflow:hidden is the closed state, and JS (header.js) sets an inline
     max-height to the real scrollHeight on open / clears it on close (Z5
     precedent, our-hotel-gallery.js) — no magic cap, no close-delay mismatch. */
  .header__dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none;
    background-color: transparent;
    padding-inline-start: 1.2rem;
    /* Z8 E4/F1 — padding-block:0 zeroes the vertical padding the base rule's
       `padding: 1.2rem 0` (desktop) would otherwise bleed onto this ul.
       Padding is part of the ul's OWN box and can't be clipped by max-height:0
       (it doesn't shrink below itself even under border-box) — left as-is it
       would render as a leaked gap even while "closed". The equivalent
       breathing room moves to .header__dropdown-link's own padding (content,
       correctly clipped) and the parent row's extra top padding below. */
    padding-block: 0;
    flex: 0 0 100%;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }
  .header__dropdown.is-open .header__dropdown-menu {
    opacity: 1;
  }
  /* color: var(--clr-neutral-100) dropped here (Z7) — it's the base
     .header__dropdown-link value now (F2), this restatement was dead weight. */
  .header__dropdown-link:hover {
    background-color: transparent;
    color: var(--clr-primary-300);
  }
  /* Z8 E4 — replaces the deleted `margin-top: 0.4rem !important` (was on the ul
     itself; margin sits outside an element's own box, so max-height/overflow
     never governs it — it would have kept leaking as a visible gap even while
     "closed"). Padding on this row's own link IS content, so it clips
     correctly at max-height:0. One fewer !important in the codebase (N2). */
  .header__dropdown-parent .header__dropdown-link {
    padding-top: 1.3rem;
  }
  /* Round Z6/Z8 — the <li> becomes a row: [parent <a>, natural width] [chevron
     button, right beside it — Z8 F3], with the submenu wrapping onto its own
     full row underneath once opened. The parent <a> keeps its own
     .header__nav-link styling untouched — only its flex-basis is set, here,
     off the .header__dropdown parent selector so no other .header__nav-link
     is touched. */
  .header__dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; /* Z8 F3 — text-side in both RTL and LTR */
    gap: var(--size-200); /* 0.8rem — Z8 F3, was --size-300 (1.2rem) */
  }
  /* Z8 F3 — replaces Z6's flex:1 1 auto (stretched the link across the row,
     pushing the chevron to the far edge). Deleted, not stacked — the link
     now takes its natural width and the button sits right beside it. */
  .header__dropdown > .header__nav-link {
    flex: 0 0 auto;
  }
  /* display is handled by the viewport-independent :not([hidden]) rule now
     (F1/F4) — mobile only needs a bigger tap target than the desktop 2.8rem. */
  .header__dropdown-toggle {
    width: 4.4rem;
    height: 4.4rem;
  }
  .header__dropdown-parent {
    display: list-item;
  }
}

/* ============================================================================
   Z16 (20/08/2026) — HOTEL mobile overlay panel to match the desktop scrolled
   header: cream surface + accent contents. Corrects the Z12-N2 deferral.

   The header is position:fixed, so the .collapse panel (header.php:115, the one
   .navbar-collapse in the theme) overlays the cream page body — hence F1's
   shadow. Scoped to .zamarin-page (network panel keeps --header-bg brown, N3)
   AND to the panel's descendants (.navbar-collapse ...), so the BAR chrome is
   never touched: the scrolled bar is already cream + accent (Z12, all widths);
   unscrolled, the bar stays transparent with a white hamburger + white logo over
   the hero photo (readable on the photo), the cream panel a separate surface
   below it — so no bar-forcing is needed in either state (E5/F4). There are no
   in-panel separators to recolour and no cart link in the panel (em_cart_link is
   desktop-only, header.php:108). All selectors are (0,3,0)+ and out-specify the
   base/mobile rules on their own — no !important. */
@media (max-width: 991.98px) {
  /* F1 — cream panel + hairline + soft shadow so it reads against the cream page. */
  .zamarin-page .header .navbar-collapse {
    background-color: var(--clr-neutral-200);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
  }
  /* F2 — nav links (+ hover), dropdown links (+ hover, was the peach
     --clr-primary-300) + chevron, and the mobile language switcher (its globe is
     a currentColor .myicon, so it follows) all take the accent. */
  .zamarin-page .header .navbar-collapse .header__nav-link,
  .zamarin-page .header .navbar-collapse .header__nav-link:hover,
  .zamarin-page .header .navbar-collapse .header__dropdown-link,
  .zamarin-page .header .navbar-collapse .header__dropdown-link:hover,
  .zamarin-page .header .navbar-collapse .header__dropdown-toggle,
  .zamarin-page .header .navbar-collapse .header__lang--mobile,
  .zamarin-page .header .navbar-collapse .header__lang--mobile:hover {
    color: var(--accent, var(--clr-primary-100));
  }
  /* F2 — CTA + network pills: accent outline + text, transparent fill unchanged. */
  .zamarin-page .header .navbar-collapse .mybtn--header {
    color: var(--accent, var(--clr-primary-100));
    border-color: var(--accent, var(--clr-primary-100));
  }
  /* F3 — pill hover/focus inverts to a filled accent pill with cream text
     (matches the desktop scrolled behaviour, Z12-F3c). The network pill's arrow
     is a currentColor mask, so it inverts with the text. */
  .zamarin-page .header .navbar-collapse .mybtn--header:hover,
  .zamarin-page .header .navbar-collapse .mybtn--header:focus-visible {
    background-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-200);
  }
}
/* F2a, second breakpoint. Below 576px .container is max-width:100% with 1.8rem
   side padding, so a full -1.8rem escape would put the panel FLUSH against the
   viewport edge and flatten the 1.2rem radius against it. Give var(--size-200)
   of the escape back as a visual inset (-1.8rem + 0.8rem = -1rem) — chosen over
   full-bleed so the rounded panel still reads as a panel. Later in source than
   the <=991.98 block, equal specificity, so it wins without !important. */
@media (max-width: 575.98px) {
  .header .navbar-collapse {
    margin-inline: calc(var(--size-200) - 1.8rem);
  }
}
.container {
  max-width: min(168rem, 100% - 7.2rem);
  padding: 0;
}
@media (max-width: 575.98px) {
  .container {
    max-width: 100%;
    padding: 0 1.8rem;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .container {
    max-width: min(168rem, 100% - 2rem);
    padding: 0 2rem;
  }
}

/* =========================================================
   HERO — node 22:9271/22:9273 (confirmed pill buttons + logo)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--clr-neutral-100);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero__media::after {
  /* readability overlay so white nav/CTA text stays legible on any photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.45) 100%);
}
.hero__logo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24rem;
  max-width: 60vw;
}
.hero__logo {
  display: block;
  width: 100%;
  margin: 0;
}
.hero__actions-wrap {
  position: absolute;
  bottom: clamp(1.6rem, 5vw, 6rem);
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 4rem);
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
/* Item 1 (Figma-over-static, 13/08/2026): the base .mybtn:hover (main.css:288)
   flips text+border to --clr-primary-100 (dark olive) on a transparent fill —
   a hover authored for LIGHT page backgrounds. Over the hero's dark video/photo
   that makes the CTAs vanish. Figma keeps them white-outline on hover. Scoped to
   .hero__actions so the base hover (correct on light sections) is untouched, and
   because template-hotel-home.php's hero reuses .hero__actions this also covers
   the shared hotel hero. Beats .mybtn:hover on color+border-color+bg by section
   specificity (.hero__actions .mybtn:hover = 0,2,1 > .mybtn:hover = 0,2,0). */
.hero__actions .mybtn:hover {
  background-color: transparent;
  color: var(--clr-neutral-100);
  border-color: var(--clr-neutral-100);
}

/* Pull-quote directly under the hero — confirmed node 22:9928, Cormorant Garamond Italic 54px */
.quote {
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 2rem;
  max-width: 100rem;
  margin-inline: auto;
}

/* =========================================================
   ABOUT + STATS — node 22:9967 / 22:9954
   ========================================================= */
.about {
  background-color: var(--clr-neutral-200);
  text-align: center;
  padding-block: var(--section-gap);
}
.about__title {
  margin-bottom: 1.2rem;
  /* 12/10/2026: floor 3rem -> 4.4rem so the title stays BIGGER than the
     subtitle on phones too (HE mobile was 19.5px title vs 28px subtitle). */
  font-size: calc(clamp(4.4rem, 8vw, 6rem) * var(--title-scale, 1)); /* peaks 6rem = 60px (root 62.5%) — matches Figma */
  /* FIGMA-OVER-STATIC typography pass (13/08/2026 — see deviation #7). The
     static painted this Cormorant 400; Figma sets it Heebo 60/300 #474132. */
  font-weight: 300;
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  color: var(--clr-title);
}
.about__subtitle {
  margin-bottom: 1.5rem;
  /* 12/10/2026: was an inline style="font-size: var(--fs-300)" (28px, bigger
     than the title on phones). Now the small line under the title: 18-24px. */
  font-size: clamp(var(--fs-150), 1.6vw, var(--fs-250));
  font-weight: 400;
}
.about {
  /* opening pull-quote above the title (replaces mb-700) */
}
/* F1 (17/08/2026 — FIGMA node 22:9928 "Cormorant Garamond Italic"). The quote
   markup is `class="sub-heading about__quote"` (template-parts/home/about.php:24)
   and .about__quote declared no font-family, so .sub-heading (l.220) supplied
   --ff-secondary — the front-page quote rendered Heebo while the identical
   our-hotels pull quote (.hotels-quote, l.1981) renders Cormorant italic.
   Mirror .hotels-quote's family/style/weight and leave the SIZE to .sub-heading
   (--sub-heading clamp). (0,1,0) ties .sub-heading and wins on source order —
   no specificity stacking. Colour already matches: both resolve
   --clr-primary-400. ⚠ ASSUMPTION: italic is taken from the our-hotels
   instance; if Figma shows the front-page quote upright, drop font-style only. */
.about__quote {
  font-family: var(--ff-primary);
  font-style: italic;
  font-weight: 500;
  margin-bottom: var(--size-700);
}
.about__desc {
  max-width: 80rem;
  margin-inline: auto;
}
.about__desc b,
.about__desc strong {
  font-weight: 700;
}

.stats {
  display: flex;
  justify-content: center;
  align-items: center;
  /*gap: clamp(2rem, 5vw, 7rem);*/
  gap: clamp(1rem, 3vw, 7rem);
  margin-top: clamp(3rem, 5vw, 6rem);
  /*flex-wrap: wrap;*/
}
.stats__item {
  text-align: center;
}
.stats__item:not(:last-child) {
  position: relative;
  padding-inline-end: clamp(2rem, 6vw, 7rem);
}
.stats__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 4.5rem;
  background-color: var(--clr-primary-300);
}
.stats__num {
  display: block;
  font-family: var(--ff-primary);
  font-weight: 300;
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  color: var(--clr-primary-400);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats__label {
  display: block;
  margin-top: 1rem;
  font-size: 1.6rem;
  color: var(--clr-primary-200);
}
/* 18/10/2026 (client: sideways scroll on the home page, mobile). The three
   stats sit on one non-wrapping row; at 3.6rem numbers + desktop padding the
   row ran wider than a narrow phone (or one with larger accessibility text)
   and dragged the whole page sideways. Same one-row design, phone-sized. */
@media (max-width: 575.98px) {
  .stats {
    gap: 1rem;
    max-width: 100%;
  }
  .stats__item {
    min-width: 0;
  }
  .stats__item:not(:last-child) {
    padding-inline-end: 1rem;
  }
  .stats__num {
    font-size: clamp(2.6rem, 8vw, 3.6rem);
  }
  .stats__label {
    font-size: 1.4rem;
  }
}

/* Section title in the decorative English style, e.g. "Our Hotels" / "Boutique Events" */
.section-title-en {
  text-align: center;
  font-family: var(--ff-primary);
  font-size: calc(clamp(4.5rem, 6vw, 12rem) * var(--title-scale, 1));
  color: var(--clr-title);
  line-height: 100% !important;
}
.section-title-en:has(+ .spa__subtitle) {
  margin-bottom: 0;
}

.heading-gap {
  margin-bottom: clamp(3rem, 5vw, 6rem);
}

/* =========================================================
   HOTEL CARD — repeats 4x (Zamarin / Casa Suzana / Mulan / Kerem)
   confirmed node 22:9350 for structure/typography
   ========================================================= */
.hotel-card {
  padding-block: var(--section-gap);
}
.hotel-card__row {
  display: flex;
  gap: clamp(2rem, 5vw, 6rem);
}
.hotel-card__gallery, .hotel-card__content {
  flex: 1 1 0;
  min-width: 0;
}
.hotel-card__gallery {
  width: 100%;
  min-width: 0;
  height: 100%;
  position: relative;
}
.hotel-card__gallery .swiper {
  width: 100%;
  overflow: hidden;
  contain: layout;
}
.hotel-card__gallery .swiper-wrapper {
  width: 100%;
}
.hotel-card__gallery .swiper-slide {
  flex-shrink: 0;
  aspect-ratio: 4/3;
}
.hotel-card__gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  border-radius: 0; /* square outer corner now that this bleeds to the page edge */
  -o-object-fit: cover;
     object-fit: cover;
}
.hotel-card__gallery-nav-btn {
  position: absolute;
  bottom: 1.6rem;
  left: 1.6rem;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  background: none;
  border: none;
  color: #333333;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
/* F3 (17/08/2026) — the nav circle looked clipped/flat on one edge.
   The glyph is `viewBox="0 0 50 50"` with `<circle cx=25 cy=25 r="24.5">` and a
   default 1-unit stroke, which is CENTRED on the path: the painted ring spans
   24.0 -> 25.0 user units, i.e. it reaches the viewBox edge EXACTLY. An <svg>
   establishes a new clipping context and `overflow` defaults to hidden on the
   outermost element, so the outer half-unit sits precisely on the clip boundary
   and gets shaved whenever the 50-unit box scales to a non-integer device pixel
   grid (26 CSS px at DPR 1.5/2/2.75 etc). `overflow: visible` lets that half
   unit paint outside the box. Max bleed is 0.5 user units = 0.5 * (26/50) =
   0.26px at the 26px render — invisible — and .hotel-card__gallery-nav-btn has
   `background: none; border: none`, so there is nothing for the bleed to
   collide with. Fixed HERE, in CSS, rather than in the svg markup: the same svg
   is duplicated across ten template files (see report), and this covers every
   future paste of it too. */
.hotel-card__gallery-nav-btn svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hotel-card__gallery-nav-btn:hover {
  opacity: 0.75;
}
.hotel-card__gallery-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.hotel-card__gallery-nav-btn--right {
  left: auto;
  right: 1.6rem;
}
.hotel-card__gallery-nav-btn--below {
  top: calc(100% + 1.5rem);
  bottom: auto;
  left: 2.5rem;
}
.hotel-card__gallery-nav-btn--below-right {
  top: calc(100% + 1.5rem);
  bottom: auto;
  left: auto;
  right: 2.5rem;
}
.hotel-card__content {
  padding-inline: clamp(2.4rem, 6vw, 7rem);
}
.hotel-card__logo {
  display: block;
  max-height: 8rem;
  width: auto;
  margin: 0 auto 2rem;
}
/* F4 (17/08/2026) — baseline -> flex-end. Both children are icon-above-label
   COLUMNS with different icon heights (pin 34x34, instagram 28x28), so
   `baseline` aligned them on the first baseline it could synthesise from the
   icon <div> and the 6px icon delta pushed the two labels onto different lines.
   flex-end aligns the columns' bottom edges; the labels are single-line and
   share one font (.hotel-card__meta span, 1.6rem/600), so their bottoms line up
   exactly. Same change on .hotel-detail__info-bar (l.~2092) for parity. */
.hotel-card__meta {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
  align-items: flex-end;
}
.hotel-card__meta span {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-primary-200);
}
/* A2 (18/08/2026) — ONE rendered icon size for both meta strips.

   F4 (l.~1276 / l.~2194) only levelled the LABELS: it switched both containers
   from `baseline` to `align-items:flex-end`, which lines the two columns' BOTTOM
   edges up, so the labels agree — but the icons above them still didn't, because
   they are two different graphics at two different intrinsic sizes. Traced in
   the markup, not guessed: the pin is `<svg width="34" height="34"
   viewBox="0 0 34 34">` (hotel-card-icons.php l.26 / hotel-detail-icons.php
   l.17) and Instagram is `<svg width="28" height="28" viewBox="0 0 28 28">`
   (l.49 / l.40). With bottoms aligned, the 6px delta moved to the TOP: the
   Instagram glyph sat 6px lower than the pin and read as misaligned.

   3.4rem = the pin's own 34px at this project's 62.5% root — the larger of the
   two, so nothing is scaled DOWN and no artwork loses detail. Both viewBoxes are
   square, so both keep their aspect ratio exactly; the Instagram glyph is the
   only one that changes, 28 -> 34, and it is vector.

   Applies to the icon graphic only: `.hotel-card__meta` and
   `.hotel-detail__info-bar` each contain exactly TWO <svg>s (the pin and the
   Instagram mark) and no other SVG — verified in both partials — so the bare
   descendant selector has no other reach. `display:block` + `margin-inline:auto`
   centres each glyph in its own wrapper <div>; the columns themselves are
   already centred by Bootstrap's align-items-center / .flex-column.

   F4's `align-items: flex-end` is deliberately KEPT on both containers: with the
   icon rows now equal in height it is equivalent to `center` for the current
   single-line labels, and it stays correct if a label ever wraps. */
.hotel-card__meta svg,
.hotel-detail__info-bar svg {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  margin-inline: auto;
}
/* Item 4 (13/08/2026): the Waze/Instagram wrapper <a>s (added to hotel-card.php
   and hotel-detail.php) otherwise pick up the browser/base link styling
   (blue + underline). Make them transparent to the surrounding meta: inherit the
   meta colour (--clr-primary-200), no underline, and a neutral hover — the meta
   blocks have no hover state, so the link must not introduce one. Both contexts
   (front-page card + our-hotels detail). Specificity 0,2,1 beats the base a:hover. */
.hotel-card__meta a,
.hotel-detail__info-bar a {
  color: inherit;
  text-decoration: none;
}
.hotel-card__meta a:hover,
.hotel-card__meta a:focus,
.hotel-detail__info-bar a:hover,
.hotel-detail__info-bar a:focus {
  color: inherit;
  text-decoration: none;
}
.hotel-card__desc {
  text-align: center;
}
/* Flexible column count (06/10/2026): one equal column per feature, so a hotel
   with 3 or 4 features fills the row instead of leaving empty 5ths. Six or more
   fall back to 5 per row and wrap. */
.hotel-card__features {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1.6rem;
  margin-top: 3rem;
}
.hotel-card__features:has(> :nth-child(6)) {
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* F3 (17/08/2026) — fixed icon ZONE, shared with .split-feature__feature; the
   companion child rules live with that component (l.~1604, one rule set for
   both strips). Row 1 is a fixed --size-700 box the icon is bottom-anchored in,
   row 2 is the label, so every label starts at the same y no matter how tall
   the icon is or how many lines the label wraps to. Grid (not the previous
   flex column) because the icon here IS the graphic — a raw inline <svg>, or an
   <img> when the term's card_features row carries an uploaded icon — so a
   height on the child would rescale the artwork instead of creating a zone. */
.hotel-card__feature {
  text-align: center;
  display: grid;
  grid-template-rows: var(--size-700) auto;
  justify-items: center;
  align-items: end;
  justify-self: center;
}
.hotel-card__feature span {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  color: var(--clr-primary-200);
  line-height: 1.3;
}
.hotel-card__cta {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  row-gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.hotel-card--reverse .hotel-card__row {
  flex-direction: row-reverse;
}
.hotel-card__badge {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  background-color: var(--clr-primary-300);
  color: var(--clr-primary-400);
  padding: 0.5rem 1.6rem;
  border-radius: var(--radius-pill);
}

@media (max-width: 1199px) {
  .hotel-card__row {
    gap: clamp(2rem, 1vw, 6rem);
  }
  .hotel-card__content {
    padding-inline: clamp(2.4rem, 1vw, 7rem);
  }
}
@media (max-width: 991.98px) {
  .hotel-card__row, .hotel-card--reverse .hotel-card__row {
    flex-direction: column;
  }
  .hotel-card__gallery, .hotel-card__content {
    flex: 0 0 auto;
    width: 100%;
  }
  .hotel-card__features {
    row-gap: 3.4rem;
  }

  /* Item 9 (13/08/2026 — REVERTS the in-gallery mobile placement). At
     <=991.98px .hotel-card__row stacks to a column. The previous fix re-aimed
     the --below/--below-right button INTO the gallery's bottom corner, but the
     button (#333, no background) is invisible over dark photos there. Put it
     back BELOW the gallery, where it reads on the cream page, and reserve
     dedicated clearance so it can never drop onto the centered .hotel-card__logo
     (the overlap that forced it inside originally). The button is absolute at
     top: calc(100% + 1.5rem) and is 2.6rem tall, so it extends 4.1rem below the
     gallery; margin-bottom:5.5rem = that 4.1rem + a ~1.4rem gap before
     .hotel-card__content. The button keeps its default --below/--below-right
     offsets — nothing to override. Desktop (>991.98px) untouched. */
  .hotel-card__gallery {
    margin-bottom: 5.5rem; /* >= 1.5rem (button top offset) + 2.6rem (button height) + gap */
  }
}
@media (max-width: 575.98px) {
  /* 11/10/2026 (client) — flex instead of a 2-col grid so an odd last icon
     sits in the centre instead of under the first column. */
  .hotel-card__features,
  .hotel-card__features:has(> :nth-child(6)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hotel-card__features > .hotel-card__feature {
    flex: 0 0 calc(50% - 0.8rem); /* half the row less half the 1.6rem column gap */
  }
}
/* =========================================================
   FULL-WIDTH PHOTO BANNER — reused for "Relax. With. Us." /
   the second hero / "Sleep. Dine. Relax." (nodes 22:9922, 22:10241)
   ========================================================= */
.banner {
  position: relative;
  isolation: isolate; /* 18/10/2026: keeps the z-index:-1 video/img inside the block (see .spa-hero) */
  min-height: calc(100vh - 95px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--clr-neutral-100);
  margin-top: clamp(0rem, 1vw, 8rem);
}
/* F2 (18/08/2026) — hotel-scoped taller banner, desktop/tablet only so the 50vh
   mobile rule (l.~1628) keeps winning below 768. 65vh is a starting value for
   Ron to tune against Figma (Zamarin_SPA_09 ≈ 1993×723). */
@media (min-width: 768px) {
  .zamarin-page .banner {
    min-height: calc(80vh - 95px); /* 07/10/2026: was 65vh — client: banner "a bit taller" */
  }
}
.banner img,
.banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.banner__words {
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  flex-wrap: wrap;
  justify-content: center;
}
.banner__heading {
  font-size: calc(clamp(5rem, 6vw, 12rem) * var(--title-scale, 1));
  font-family: var(--ff-primary);
  font-weight: 500;
  line-height: 1;
}
/* 12/10/2026 (client) — ONE size for every banner title, all three variants
   and both languages (the lines are English in both). The three variants were
   landing on different sizes because each picks up a different --title-scale
   (hero .main-heading 0.7225, h2 x0.765, bare div 0.85). Reference = the home
   page's last banner (h2.banner__heading): ~67px at 1440. Mobile floor 4.4rem
   is a little bigger than that banner's old ~39px phone size, per client. */
.banner .main-heading,
.banner .banner__heading {
  font-size: clamp(4.4rem, 4.7vw, 9rem);
}
/* 18/10/2026 (client) — mobile: one word per line ("Breath." / "With." /
   "Us.") instead of the row wrapping unevenly. Covers the 'words' variant
   (one h2 per word in .banner__words) and the 'headings' variant (spans). */
@media (max-width: 767.98px) {
  .banner__words {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  div.banner__heading > span {
    display: block;
  }
}

/* =========================================================
   SPA — confirmed nodes 22:9931 / 22:9932
   ========================================================= */
.spa {
  padding-block: var(--section-gap);
}
.spa__subtitle {
  margin-top: 2.9rem;
  text-align: center;
  max-width: 90rem;
  margin-inline: auto;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.spa__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.spa__panel {
  position: relative;
  min-height: 45rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 3rem;
}
.spa__panel img:not(.spa__logo) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.spa__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: -1;
}
.spa__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  max-width: 26rem;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
/* A6 (18/08/2026) — spa-panel CTA hover contrast (network spa page).

   THE RULE THAT DID IT: base `.mybtn:hover` (l.~288) sets
   `background-color: transparent; color: var(--clr-primary-100)`. --clr-primary-100
   is #2C3424, a near-black green. A .spa__panel is a photo with a
   `rgba(0,0,0,0.25)` scrim over it (.spa__panel::after, just above), so on hover
   the button lost its fill and painted near-black text on a darkened photo —
   dark on dark, effectively invisible.

   It only shows on the NETWORK spa page: template-parts/home/spa.php gives the
   panel CTA `mybtn mybtn--outline` in the 'home' variant and a bare `mybtn` in
   the 'network' variant (l.~98, a recorded deviation). `.mybtn--outline:hover`
   (l.~301) already does the right thing over a photo — fill white, text
   --clr-primary-100 — so this is not a new treatment, it is the theme's own
   over-photo hover applied to the panel that was missing it.

   Scoped to .spa__panel so base .mybtn:hover is untouched everywhere else.
   (0,3,0) — one class more than .mybtn:hover (0,2,0) and .mybtn--outline:hover
   (0,2,0) — so it wins on BOTH variants and the two pages' panel hovers now
   match. No !important, existing tokens only. */
/* 18/10/2026 (client): every panel CTA in .spa__grid is transparent over the
   photo (white text + border from base .mybtn), on the network spa page too.
   Geometry unchanged; the hover below still fills white. */
.spa__panel .mybtn {
  background-color: transparent;
}
.spa__panel .mybtn:hover {
  background-color: var(--clr-neutral-100);
  color: var(--clr-primary-100);
  border-color: var(--clr-neutral-100);
}

/* Item 6 (Figma-over-static, per Ron's screenshot): widen the two FRONT-PAGE
   spa panels to span the full viewport width (they were capped by the outer
   .container at min(168rem, 100% - 7.2rem)), height scaling with the new width.
   Scoped WITHOUT a markup change: on the front page spa.php nests the grid as
   section.spa > .container > .spa__grid, whereas the NETWORK variant renders it
   as section.spa > .spa__grid (no container). So ".spa > .container > .spa__grid"
   matches ONLY the front-page grid and leaves the network spa page on the
   container width. margin-inline: calc(50% - 50vw) breaks the grid out of the
   container to a true 100vw full-bleed; padding keeps the panels off the edge.
   height: aspect-ratio replaces the fixed min-height:45rem so the panels grow
   proportionally as they widen — the 16/9 ratio is a best-guess placeholder,
   FLAG: confirm against Ron's Figma frame (screenshot not visible to this
   session; see report). */
.spa > .container > .spa__grid {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(1.8rem, 4vw, 6rem);
}
.spa > .container > .spa__grid .spa__panel {
  min-height: 0;
  aspect-ratio: 16/9;
}

@media (max-width: 767.98px) {
  .spa__grid {
    grid-template-columns: 1fr;
  }
  /* F2 (17/08/2026) — the badge overlapped the CTA on a phone.
     16/9 is fine at desktop widths but collapses the panel once the grid drops
     to one column, and .spa__logo does NOT shrink with it: the badge is sized
     off the panel's WIDTH (40%, max 26rem) and centred on its HEIGHT, so as the
     panel gets shorter the logo keeps its size and its bottom half runs into
     the bottom-aligned button.

     Collision math at 383px (the narrow-phone QA width), TALLEST badge =
     zamarin-badge.png 418x418, ratio 1.0 — it renders taller than
     casa-suzana-badge.png 352x192 at the same width:
       grid          100vw - 2 * clamp(1.8rem, 4vw, 6rem) = 383 - 36 = 347px
                     (4vw = 15.3px at this width, so the 1.8rem floor wins)
       panel width   347px (single column)
       logo          40% * 347 = 138.8px wide; 26rem cap not reached;
                     ratio 1.0 -> 138.8px tall, so 69.4px hangs below centre
       button block  --btn-height 4rem + 3rem bottom padding = 70px
       clearance     needs panelH/2 >= 69.4 + 70 + 16 (1.6rem daylight)
                     -> panelH >= 310.8px -> ratio <= 347/310.8 = 1.117
     At 16/9 the panel is 195px and the badge overlaps the button by 41.8px
     (casa, being wider than it is tall, overlaps by 10.3px — both collide).
     4/3 (260px) and 3/2 (231px) do NOT clear the square badge; 4/3 still
     overlaps by 9.3px. 1/1 is the nearest simple ratio that does: 347px tall,
     34.1px of daylight, and it keeps the panel a shape the photo crop suits.

     Mobile only, and still scoped to the FRONT-PAGE chain — the network spa
     page renders section.spa > .spa__grid with no .container and is untouched,
     exactly as the Item 6 comment above requires.
     FLAG carried forward from Item 6: the ratio is still a best guess —
     confirm both this and the desktop 16/9 against Ron's Figma frame. */
  .spa > .container > .spa__grid .spa__panel {
    aspect-ratio: 1/1;
  }
  /* 12/10/2026 — client: home spa-panel logo 20% bigger on mobile (40% -> 48%).
     Re-running the F2 math at 383px: 48% * 347 = 166.6px, square badge hangs
     83.3px below centre; 173.5 - 83.3 - 70 (button block) = 20.2px daylight. */
  .spa > .container > .spa__grid .spa__logo {
    width: 48%;
  }
  .banner {
    min-height: calc(60vh - 95px); /* 07/10/2026: was 50vh — client: banner "a bit taller" */
  }
}
/* =========================================================
   BOUTIQUE EVENTS / PRODUCTS — node 22:10103-10240
   ========================================================= */
.split-feature {
  padding-block: var(--section-gap);
  padding-bottom: var(--section-big-gap);
}
.split-feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
}
.split-feature__title {
  text-align: center;
  font-size: calc(clamp(4rem, 5vw, 7.4rem) * var(--title-scale, 1));
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.split-feature__desc {
  text-align: center;
  margin-bottom: 2.4rem;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.split-feature__features {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
/* F3 — same fixed icon zone as .hotel-card__feature (l.~1317). See the shared
   child rules directly below. */
.split-feature__feature {
  text-align: center;
  width: 8rem;
  display: grid;
  grid-template-rows: var(--size-700) auto;
  justify-items: center;
  align-items: end;
}
.split-feature__feature span {
  /* 12/10/2026: align-items:end on the parent bottom-anchored the LABEL row too,
     so a 1-line label sat ~17px below a 2-line neighbour. Labels hang from the
     top of row 2 instead; the icon row keeps its end alignment. */
  align-self: start;
  display: block;
  margin-top: 0.8rem;
  font-size: 1.3rem;
  color: var(--clr-primary-200);
  line-height: 1.3;
}

/* =========================================================
   F3 (17/08/2026) — ONE icon zone for BOTH front-page icon strips.

   Cause: neither strip has a fixed icon box, and the icons are three different
   element shapes at nine different intrinsic heights — .hotel-card__feature
   holds a raw inline <svg> (26x30 … 49x34 … 46x46) or an <img> of the matching
   .svg asset when the seeder's label->icon map filled the row, and
   .split-feature__feature holds an <i class="myicon myicon--lg"> wrapper (a
   36x36 box, width/height !important) or, on rows with an uploaded icon, a bare
   <img>. Both strips therefore mix shapes in the SAME row, every icon sat on
   its own baseline and every label started at a different y.

   Fix: the two container rules above give row 1 a fixed --size-700 (4.8rem)
   track with align-items:end, so icons bottom-anchor on one shared line at
   their natural size and the labels all start at the same y. --size-700 is the
   first token on the --size-* scale at or above the tallest icon in either
   strip (46px: free-parking.svg and the myicon--spa parking-icon.png), so the
   zone never shrinks an existing icon.

   The rule below bottom-anchors the graphic INSIDE a wrapper — the <i class=
   "myicon"> case; it is a no-op for an <svg>/<img> first child, which has no
   CSS-box children. The .myicon boxes are NOT resized and .myicon:has(> svg)
   (l.~470) is NOT touched — that neutralisation stays load-bearing.

   max-height caps anything taller than the zone (or, on the nested svgs, taller
   than the 3.6rem myicon box — the 39x39 wine/beach glyphs overflow it today).
   No `width: auto` alongside it: on an outermost <svg> `width:auto` computes to
   100% of the containing block per the SVG sizing rules and would blow the icon
   up to the column width. It is not needed — an <img> with only max-height set
   keeps its ratio via its auto width, and an <svg> keeps its via the default
   preserveAspectRatio="xMidYMid meet".
   ========================================================= */
.split-feature__feature > :first-child,
.hotel-card__feature > :first-child {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.split-feature__feature > :first-child,
.split-feature__feature > :first-child img,
.split-feature__feature > :first-child svg,
.hotel-card__feature > :first-child,
.hotel-card__feature > :first-child img,
.hotel-card__feature > :first-child svg {
  max-height: 100%;
}

/* F1 (17/08/2026; EXTENDED TO ALL WIDTHS 18/08/2026, pass #3 C1) — UNIFORM icon
   height at EVERY width. Originally scoped to <= 991.98px, on the reasoning that
   desktop should keep natural sizes. Ron's pass-#3 instruction SUPERSEDES that:
   on EN desktop the rows now MIX stamped <img> icons (attachment dimensions)
   with the A3 render-side fallback inline <svg>s at their natural sizes
   (26–46px), so the first rows read misaligned on desktop too. The mobile-only
   media query is removed and the rule now applies at all widths — the second
   half of the fix (the --size-700 zone row above already applies at all widths)
   now matches it.

   ⚠ THIS SHRINKS icons whose intrinsic height exceeds 3.6rem/36px down to 36px.
   That is the intended uniformity — the same height the mobile layout has always
   imposed — NOT a silent change. The icons affected (heights from the A3 icon
   round's intrinsic-size list): free-parking.svg 46×46 and the myicon--spa
   parking-icon.png 46×46 (both the "46px parking cases"), and the 39×39
   wine/beach glyphs; the 49×34 culinary glyph is 34px tall and unaffected. See
   the pass-#3 report — Ron approved flattening these; nothing else in either
   strip is taller than 36px so nothing else changes.

   3.6rem is NOT on the --size-* scale (0.4 / 0.8 / 1.2 / 1.6 / 2.4 / 3.2 /
   4.8 / 6.4 / 9.6rem — l.45-53); it is the traced literal from
   `.myicon--lg { width/height: 3.6rem !important }` (l.483-486), i.e. the box
   the .split-feature__feature wrappers already occupy. Matching it means the
   <i class="myicon"> case needs no override at all (which is lucky — its
   dimensions are !important and this project does not use !important), and
   only its NESTED svg is resized. It also sits under the 4.8rem zone, so
   nothing is clipped.

   `width: auto` is safe HERE, unlike in the max-height rule above, because
   height is DEFINITE: every one of these graphics carries real width/height
   presentation attributes (26x30 … 49x34 … 46x46 on the inline <svg>s,
   attachment dimensions on the <img>s), so it has an intrinsic ratio and a
   definite height resolves the auto width through that ratio instead of
   falling back to 100% of the containing block.

   .myicon:has(> svg) (l.~470) is NOT touched.

   ⚠ ATTRIBUTE-LESS FALLBACK (18/08/2026, pass #4 P1) — the `width:auto` safety
   argument above holds ONLY for graphics that carry an intrinsic ratio, and it
   EXCLUDED one real case: a hand-uploaded icon in a client-edited card_features
   row (e.g. the Zamarin EN "In the heart of Zikhron Ya'akov" row) is emitted by
   em_image() with NO class and — for an SVG whose attachment metadata is empty,
   the WP norm because core cannot read SVG dimensions — with NO width/height
   attributes either (em_image only prints them when both are truthy). An SVG
   that ALSO lacks a viewBox has no intrinsic ratio, so `height:3.6rem;
   width:auto` resolves the auto width to the CSS last-resort 300px (CSS2.1
   §10.3.2), blowing the icon into a 300x36 smear that breaks the row.
   `aspect-ratio: auto 1 / 1` supplies a 1:1 fallback ONLY when no natural ratio
   exists: it is a no-op for every attribute-carrying <svg>/<img> in either strip
   (their real ratio wins under the `auto` keyword, so they render exactly as
   before), and a ratio-less hand-uploaded icon now renders as a centred 3.6rem
   square matching the set — the very case the original argument excluded. */
.split-feature__feature > :first-child,
.split-feature__feature > :first-child img,
.split-feature__feature > :first-child svg,
.hotel-card__feature > :first-child,
.hotel-card__feature > :first-child img,
.hotel-card__feature > :first-child svg {
  height: 3.6rem;
  width: auto;
  aspect-ratio: auto 1 / 1;
}
.split-feature__cta {
  display: flex;
  justify-content: center;
}
/* Item 7: 'לחנות' and 'הזמנת אירוע' render at different widths because base
   .mybtn is content-sized (white-space:nowrap + padding, no min-width) and the
   labels differ in length. Give both a shared min-width floor so they match,
   scoped to the split-feature CTAs — base .mybtn is NOT touched. */
.split-feature__cta .mybtn {
  min-width: 18rem;
}
/* 18/10/2026 — shown instead of the button while there is no link yet
   (template-parts/home/boutique.php). English display face, button-height row. */
.split-feature__soon {
  margin: 0;
  min-height: 4rem;
  display: flex;
  align-items: center;
  font-family: var(--ff-primary);
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  color: var(--clr-title);
}
.split-feature__media-row {
  display: flex;
  gap: 30rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-inline: 0;
}
.split-feature__media {
  flex: 1 1 0;
  min-width: 0;
}
.split-feature__gallery {
  width: 100%;
  overflow: hidden;
  contain: layout;
}
/* FIX 13/08/2026 — edge slide taller than the rest.
   The slides carried no height contract at all: only the img had width:100%
   height:100%, and height:100% against a slide whose own height is indefinite
   resolves to auto, so every slide sized itself to ITS OWN image's intrinsic
   ratio. The statics never showed it because all their gallery files share one
   ratio (events-img-*.png 339x339, products-img-*.png 340x345) AND their <img>
   tags carry no width/height attributes; em_image() emits real attributes, from
   which the browser derives a per-image aspect-ratio. A client-uploaded portrait
   photo in the Events gallery (1307x1634, verified in the rendered markup) then
   made its slide 1634/1307 = 1.25x taller than the square ones, and at
   slidesPerView:2.3 that slide is the partial peek — the tall left-hand sliver
   Ron reported.

   Fixing the ratio on the SLIDE gives the box the design's own square geometry
   and lets the img's existing object-fit:cover crop anything else to it — the
   same contract .hotel-card__gallery .swiper-slide already uses (aspect-ratio
   4/3). 1/1 is the source's own media shape: events is exactly square and
   products is 340/345 = 0.986, a 1.4% difference. */
.split-feature__gallery .swiper-slide {
  aspect-ratio: 1/1;
}
.split-feature__gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.split-feature__media {
  position: relative;
}
.split-feature {
  /* Base style badha arrows mate */
}
.split-feature .events-swiper-button-prev,
.split-feature .products-swiper-button-next,
.split-feature .products-swiper-button-prev,
.split-feature .events-swiper-button-next {
  position: absolute;
  bottom: -60px;
  top: auto;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}
/* 18/10/2026: each slider now has an arrow on BOTH sides (left = -prev on
   events / -prev on products, right = -next). */
.split-feature .events-swiper-button-prev,
.split-feature .products-swiper-button-prev {
  left: 60px;
  right: auto;
}
.split-feature .products-swiper-button-next,
.split-feature .events-swiper-button-next {
  right: 60px;
  left: auto;
}
.split-feature {
  /* Remove default swiper arrow icons */
}
.split-feature .events-swiper-button-prev::after,
.split-feature .products-swiper-button-next::after {
  display: none;
}

@media (max-width: 1199px) {
  .split-feature__media-row {
    gap: 10rem;
  }
  .split-feature__desc {
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  /* Item 10 (deviation — the static has the SAME flaw, see report): the two
     text blocks live in .split-feature__grid and the two galleries in a
     separate .split-feature__media-row, so a plain single-column stack renders
     all text, THEN all galleries, breaking the text<->gallery pairing. Required
     mobile order: products text -> products gallery -> events text -> events
     gallery. The four blocks sit in two different parents, so flex `order`
     alone can't interleave them. Flatten both parents (and the intermediate
     .container) with display:contents so all four become flex items of
     .split-feature, then order them. Desktop is untouched (media-query scoped).
     display:contents is the same house technique used for the GF footer row. */
  .split-feature {
    display: flex;
    flex-direction: column;
    gap: 6rem;
  }
  .split-feature > .container,
  .split-feature__grid,
  .split-feature__media-row {
    display: contents;
  }
  /* .container no longer provides side padding once it is display:contents —
     restore it on the two text columns; the galleries stay full-bleed. */
  .split-feature__grid > div {
    padding-inline: 2rem;
  }
  .split-feature__grid > div:nth-child(1) {
    order: 1;
  }
  .split-feature__media-row > .split-feature__media:nth-child(1) {
    order: 2;
  }
  .split-feature__grid > div:nth-child(2) {
    order: 3;
  }
  .split-feature__media-row > .split-feature__media:nth-child(2) {
    order: 4;
  }
  .split-feature__features {
    gap: 1rem;
  }

  .split-feature__feature > :first-child, .split-feature__feature > :first-child img, .split-feature__feature > :first-child svg, .hotel-card__feature > :first-child, .hotel-card__feature > :first-child img, .hotel-card__feature > :first-child svg {
    height: 4rem;
  }
}
/* F2 (17/08/2026) — balanced 3+2 wrap for the boutique icon strips.
   Both strips carry exactly FIVE rows (bp: towel/backpack/tshirt/coffee/candle,
   be: parking/beach/culinary/wine/spa — boutique-icons.php). .split-feature__
   features is a centred flex-wrap row of 8rem items, so on a narrow phone the
   line box fits four and the fifth drops alone: a 4+1 orphan. Capping the row
   at three items' worth of width forces the break after the third, giving the
   balanced 3+2 the design shows.
   28.8rem = 3 x 8rem (.split-feature__feature width, l.~1560) + 2 x 2.4rem
   (the base .split-feature__features gap, l.~1552). ⚠ The gap in force at this
   width is actually 1rem, from the <=767.98px rule directly above, so the real
   3-item line is 26rem and the cap carries 2.8rem of slack — still narrower
   than a 4th item (which would need 35rem), so the break lands where intended;
   justify-content:center hides the slack. Kept at the value Ron specified.
   margin-inline:auto recentres the now-narrower box in its column. */
@media (max-width: 575.98px) {
  .split-feature__features {
    max-width: 28.8rem;
    margin-inline: auto;
  }
}
/* =========================================================
   DEALS & PACKAGES — 
   ========================================================= */
.deals {
  padding-block: var(--section-gap);
}
/* 14/10/2026 — flex-wrap instead of the source's repeat(3,1fr) grid so a short
   row (1-2 cards, or the last row of 4/5) sits CENTRED rather than hugging the
   start edge. Card width reproduces the grid column exactly:
   (100% - (cols-1) * gap) / cols, with --deals-cols / --deals-gap per breakpoint. */
.deals__grid {
  --deals-cols: 3;
  --deals-gap: 10rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--deals-gap);
}
.deals__grid > * {
  flex: 0 0 calc((100% - (var(--deals-cols) - 1) * var(--deals-gap)) / var(--deals-cols));
  min-width: 0;
}
.deals__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-neutral-200);
}
.deals__card-photo {
  position: relative;
  aspect-ratio: 4 / 2.4;
}
.deals__card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.deals__card-panel {
  background-color: #fff;
  border-radius: 4rem 0 0 0;
  margin-top: -3.6rem;
  position: relative;
  z-index: 1;
  padding: 1.8rem 2rem 2rem;
  text-align: right;
  height: 100%;
}
.deals__card {
  /* Head row — title/date block at the inline start (right, in RTL) with the
     hotel's brand mark at the inline end (left), per the reference screenshot.
     Purely additive: any card that omits .deals__card-head (the home page
     teaser cards, for instance) renders exactly as it did before. */
}
.deals__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
}
.deals__card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.deals__card {
  /* NOT Figma-confirmed — sized by eye from the reference screenshot, since I
     have no access to the Figma file. Constrained on BOTH axes rather than by a
     fixed height, because the three brand assets have wildly different aspect
     ratios (zamarin-logo 267x100, casa-suzana-badge 352x192, mulan-logo 367x52);
     a shared fixed height would blow the Mulan wordmark out to ~254px wide. */
}
.deals__card-logo {
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: 14rem;
  max-height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.deals__card-title {
  display: block;
  /* 12/10/2026 (client: bigger) — was 1.7rem (HE 14.5px, ~ the 14px subtitle). */
  font-size: calc(2.2rem * var(--title-scale, 1));
  font-weight: 500;
  color: #000;
}
.deals__card-subtitle {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.4rem;
  color: #000;
}
.deals__card-divider {
  border: none;
  border-top: 1px solid var(--clr-primary-300, #d9d3c8);
  margin: 1.4rem 0;
}
.deals__card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.deals__card-price {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
  color: #000;
}
.deals__card-price del {
  text-decoration: line-through;
  opacity: 0.6;
}
/* 13/10/2026 — CTA pinned to the card's bottom + inline END on every card,
   whatever the title/subtitle length or whether a price exists. */
.deals__card-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.deals__card-row {
  margin-top: auto;
}
.deals__card-row .mybtn {
  margin-inline-start: auto;
  /* Figma: compact pill (~46px), not the site-wide default btn-height */
  height: auto;
  padding: 1rem 2rem;
  font-size: 1.4rem;
}

@media (max-width: 991.98px) {
  .deals__grid {
    --deals-cols: 2;
    --deals-gap: 3rem;
  }
}
@media (max-width: 575.98px) {
  .deals__grid {
    --deals-cols: 1;
  }
  .split-feature {
    /* Base style badha arrows mate */
  }
  .split-feature .events-swiper-button-prev,
  .split-feature .products-swiper-button-next,
  .split-feature .products-swiper-button-prev,
  .split-feature .events-swiper-button-next {
    bottom: -40px;
  }
  .split-feature .split-feature__desc {
    max-width: 100%;
  }
}
/* 12/10/2026 (client) — on mobile the boutique arrows were 28px and 60px in
   from the edge; every other slider on the page uses .hotel-card__gallery-nav-
   btn--below(-right): 2.6rem, 2.5rem from the edge, 1.5rem under the image.
   Same geometry here so all the arrows on the page start on one line. */
@media (max-width: 767.98px) {
  .split-feature .events-swiper-button-prev,
  .split-feature .products-swiper-button-next,
  .split-feature .products-swiper-button-prev,
  .split-feature .events-swiper-button-next {
    top: calc(100% + 1.5rem);
    bottom: auto;
    width: 2.6rem;
    height: 2.6rem;
  }
  .split-feature .events-swiper-button-prev,
  .split-feature .products-swiper-button-prev {
    left: 2.5rem;
  }
  .split-feature .products-swiper-button-next,
  .split-feature .events-swiper-button-next {
    right: 2.5rem;
  }
  .split-feature .events-swiper-button-prev svg,
  .split-feature .products-swiper-button-next svg,
  .split-feature .products-swiper-button-prev svg,
  .split-feature .events-swiper-button-next svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
}
/* =========================================================
   GIFT CARD — node 22:9910
   ========================================================= */
.gift-card {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-gap);
}
.gift-card__row {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.gift-card__content, .gift-card__media {
  flex: 1 1 0;
  min-width: 0;
}
.gift-card__media img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.gift-card__title {
  margin-bottom: 2rem;
  font-size: calc(clamp(3rem, 8vw, 6rem) * var(--title-scale, 1)); /* peaks 6rem = 60px (root 62.5%) — matches Figma */
  /* FIGMA-OVER-STATIC typography pass (13/08/2026 — see deviation #7). Static
     was Cormorant 400 #474132; Figma (Ron's inspect) sets the gift-card promo
     heading Heebo 60/300 #28374A. This class is used ONLY by the promo shared
     part (gift-card-promo.php) — the gift-card PAGE has its own markup — so the
     rule is already scoped to the promo, front-page + hotel-home. */
  font-weight: 300;
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  color: var(--clr-primary-200);
}
.gift-card__desc {
  margin-bottom: 3rem;
}

@media (max-width: 767.98px) {
  .gift-card__row {
    flex-direction: column;
  }
  .gift-card__desc {
    margin-bottom: 1rem;
  }
  /* 13/10/2026 — mobile: title at the other section titles' weight (Bootstrap
     h2 = 500; desktop keeps Figma's 300), title + text centred. */
  .gift-card__title {
    font-weight: 500;
  }
  .gift-card__title,
  .gift-card__desc {
    text-align: center;
  }
  /* Round Z5, F1 — centre the gift-card CTA on MOBILE only, on BOTH network and
     hotel homes (unscoped, replacing Z4-F3's is-network/desktop rule). Desktop
     returns to start-aligned block flow everywhere (source parity). */
  .gift-card__content > .mybtn {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}
/* =========================================================
   SCROLL FADE-IN (JS toggles .is-visible via IntersectionObserver)
   ========================================================= */
[data-animate] {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero — confirmed node 22:2639/22:2649 (632px tall, "Our Hotels" 160px) ---------- */
.hotels-hero {
  position: relative;
  height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--clr-neutral-100);
  text-align: center;
}
.hotels-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.hotels-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.hotels-hero__title {
  font-family: var(--ff-primary);
  font-weight: 500;
  font-size: calc(var(--fs-900) * var(--title-scale, 1)); /* 16rem — confirmed exact match to Figma's 160px */
  line-height: 1;
}

/* Pull quote directly below hero — confirmed node 22:2659, gap 55px = 5.5rem */
.hotels-quote {
  text-align: center;
  font-family: var(--ff-primary);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 4rem);
  color: var(--clr-primary-400);
  margin-top: 5.5rem;
  padding-inline: 2rem;
}

/* ---------- Hotel name jump-nav — confirmed node 22:3034, band ~90px tall ---------- */
.hotels-nav {
  margin-top: clamp(4rem, 8vw, 6.6rem);
  border-top: 1px solid var(--clr-neutral-900);
  border-bottom: 1px solid var(--clr-neutral-900);
  padding-block: 2.5rem;
}
.hotels-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2.4rem, 6vw, 12rem);
  flex-wrap: wrap;
  list-style: none;
}
.hotels-nav__link {
  font-family: var(--ff-secondary);
  font-weight: 500;
  font-size: clamp(1.6rem, 2vw, 2.4rem);
  color: var(--clr-primary-400);
  text-decoration: none;
}
.hotels-nav__link:hover {
  text-decoration: underline;
}

/* ---------- Repeating hotel detail block — confirmed nodes 22:2736/2795/2854/2975 ----------
   Per-hotel accent color set via --accent custom property (matches each hotel's Figma
   button color exactly) rather than 4 near-duplicate modifier blocks. */
.hotel-detail {
  padding: var(--section-gap) 0;
}
.hotel-detail--zamarin {
  --accent: #474132;
}
.hotel-detail--casa-suzana {
  --accent: #781628;
}
.hotel-detail--mulan {
  --accent: #485b68;
}
.hotel-detail--kerem {
  --accent: #1d1d1d;
}
.hotel-detail__top {
  text-align: center;
}
.hotel-detail__logo {
  display: block;
  max-height: 16.1rem; /* confirmed 161px */
  width: auto;
  margin: 0 auto;
}
.hotel-detail__cta {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 1.6rem; /* confirmed: logo bottom → buttons top, 16px */
  flex-wrap: wrap;
}
.hotel-detail__btn-solid {
  background-color: var(--accent);
  border-color: var(--accent);
}
.hotel-detail__btn-solid:hover {
  background-color: transparent;
  color: var(--accent);
}
.hotel-detail__btn-outline {
  background-color: transparent;
  color: var(--clr-primary-200);
  border-color: var(--accent);
}
.hotel-detail__btn-outline:hover {
  background-color: var(--accent);
  color: var(--clr-neutral-100);
}
.hotel-detail__gallery-wrap {
  position: relative; /* anchors .hotel-card__gallery-nav, reused as-is from the home page component */
  margin-top: 3rem; /* confirmed: buttons bottom → gallery top, 30px */
}
.hotel-detail__gallery-wrap .hotel-gallery {
  width: 100%;
  overflow: hidden;
  contain: layout;
}
.hotel-detail__gallery-wrap .swiper-slide {
  flex-shrink: 0;
  aspect-ratio: 4/3;
}
.hotel-detail__gallery-wrap .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* F4 — parity with .hotel-card__meta (l.~1266): same two icon-above-label
   columns, same 34px/28px icon delta. `center` centred the two columns against
   each other, so the taller (pin) column's label sat above the shorter one's;
   flex-end puts both labels on one line. */
.hotel-detail__info-bar {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(2rem, 6vw, 6rem);
  flex-wrap: wrap;
  margin-top: 6.2rem; /* confirmed: gallery bottom (incl. the 2.4rem arrow-row gap above) → info-bar text, ~62px combined */
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-primary-200);
}
.hotel-detail__address, .hotel-detail__social {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.hotel-detail__social a {
  display: inline-flex;
  color: inherit;
}
.hotel-detail__desc {
  margin-top: 3rem; /* confirmed: info-bar → description, ~30px */
  text-align: center;
  max-width: 95.2rem; /* confirmed 952px */
  margin-inline: auto;
}
.hotel-detail__desc p {
  margin-bottom: 2.4rem;
}
.hotel-detail__desc p:last-child {
  margin-bottom: 0;
}
/* Round Z4, F4 — bare-text "read more" toggle. display:none on desktop (>=768,
   the intro always shows in full); surfaces on mobile ONLY once JS has removed
   its [hidden] attr (see the :not([hidden]) rule in the mobile block). */
.hotel-detail__more {
  display: none;
  margin-top: 0.8rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--clr-primary-200);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .hotels-hero__title {
    font-size: calc(clamp(4.8rem, 14vw, 8rem) * var(--title-scale, 1));
  }
  /* Round Z5, F2 — animated read-more. Still gated on .is-clamped (added by JS),
     so a no-JS visitor keeps the full intro. max-height (NOT -webkit-line-clamp,
     which cannot animate) owns the collapse so expand/collapse can transition; JS
     sets an inline max-height = scrollHeight while open (our-hotel-gallery.js) and
     clears it on close so it animates back to this collapsed value. E2: --sub-text
     / line-height 1.6 → 4 lines = 6.4em. Trade-off (flagged): the line-clamp "…"
     ellipsis becomes a soft bottom fade — the ::after veil, blending to the cream
     page background (--clr-neutral-200, E3). */
  .hotel-detail__desc.is-clamped {
    /* 18/10/2026 (client): 4 → 7 lines; under the fade only ~2 were readable. */
    max-height: 11.2em; /* 7 lines × 1.6 line-height */
    overflow: hidden;
    position: relative;
    transition: max-height 0.45s ease;
  }
  .hotel-detail__desc.is-clamped::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2em;
    background: linear-gradient(to bottom, transparent, var(--clr-neutral-200));
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .hotel-detail__desc.is-clamped.is-open::after {
    opacity: 0;
  }
  /* :not([hidden]) so the button only shows after JS removes [hidden] — no-JS
     mobile keeps it hidden (no working toggle to offer). Round Z5, F4 — centred
     (was start-aligned inline-block). */
  .hotel-detail__more:not([hidden]) {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}
/* =========================================================
   DEALS & PACKAGES PAGE — confirmed node 22:3697
   ========================================================= */
/* ---------- Hero — confirmed node 22:3701/22:3720 (632px tall) ---------- */
.deals-hero {
  position: relative;
  height: 63.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--clr-neutral-100);
  text-align: center;
  /* Video shares the image's exact treatment so the hero is media-agnostic — either
     element fills the frame identically. The ::after scrim below is a later sibling
     at the same z-index, so it still paints over the video, same as it did the img.
     pointer-events: none stops the video swallowing clicks/drags on the hero. */
}
.deals-hero img,
.deals-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.deals-hero video {
  pointer-events: none;
  /* Painted before the first frame decodes, so the hero is never a white flash on
     a slow connection even in the moment before the poster resolves. */
  background-color: var(--clr-primary-100);
}
.deals-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.deals-hero__title {
  font-family: var(--ff-primary);
  font-weight: 500;
  font-size: calc(var(--fs-900) * var(--title-scale, 1));
  line-height: 1;
}

.deals-quote {
  text-align: center;
  font-family: var(--ff-primary);
  font-style: italic;
  font-weight: 500;
  font-size: 4rem;
  color: var(--clr-primary-400);
  margin-top: 5.5rem;
  padding-inline: 2rem;
}
/* 12/10/2026 (client) — tighter lines on mobile (was inheriting the body's). */
@media (max-width: 767.98px) {
  .deals-quote {
    line-height: 1.2;
  }
}

/* ---------- Filter bar — confirmed node 22:4162 (93px tall, 16px radius) ----------- */
.deals-filter {
  margin-top: 6.7rem;
}
.deals-filter__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10rem;
  border-top: 1px solid var(--clr-primary-300);
  border-bottom: 1px solid var(--clr-primary-300);
  padding-block: 2.1rem;
}
.deals-filter__label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.8rem;
  color: var(--clr-neutral-900);
  white-space: nowrap;
}
.deals-filter__label svg {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.deals-filter__group {
  display: flex;
  align-items: center;
  gap: 7.2rem;
  flex-wrap: wrap;
}
.deals-filter__dropdown {
  position: relative;
}
.deals-filter {
  /* min-width confirmed against Figma: both dropdown pills ("לפי מלון"/"לפי תאריך",
     nodes 22:4180/22:4192) are 274.42px wide — much wider than their short text alone
     needs, by design. Was auto-width via padding only before, notably narrower. */
}
.deals-filter__dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 27.4rem;
  height: 4.2rem;
  padding-inline: 1.6rem;
  border: 0.5px solid var(--clr-neutral-900);
  border-radius: 0.6rem;
  background: none;
  font-family: var(--ff-secondary);
  font-size: 1.8rem;
  color: var(--clr-primary-200);
  cursor: pointer;
  white-space: nowrap;
}
.deals-filter__dropdown-btn svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.deals-filter__dropdown-btn[aria-expanded=true] svg {
  transform: rotate(180deg);
}
.deals-filter__dropdown-panel {
  position: absolute;
  top: calc(100% + 0.8rem);
  inset-inline-start: 0;
  z-index: 50; /* raised from 10 as extra insurance alongside the stacking-context fix above */
  min-width: 100%;
  background: var(--clr-neutral-100);
  border: 1px solid var(--clr-primary-300);
  border-radius: 0.8rem;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.1);
  padding: 0.8rem;
  display: none;
}
.deals-filter__dropdown-panel.is-open {
  display: block;
}
.deals-filter__dropdown-option {
  display: block;
  width: 100%;
  padding: 1rem 1.2rem;
  border: none;
  background: none;
  font-family: var(--ff-secondary);
  font-size: 1.6rem;
  text-align: right;
  color: var(--clr-primary-400);
  cursor: pointer;
  border-radius: 0.4rem;
  white-space: nowrap;
}
.deals-filter__dropdown-option:hover {
  background-color: var(--clr-neutral-200);
}
.deals-filter__date-panel {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem;
}
.deals-filter__date-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.4rem;
  color: var(--clr-primary-200);
}
.deals-filter__date-panel input {
  height: 3.8rem;
  border: 1px solid var(--clr-primary-300);
  border-radius: 0.6rem;
  padding-inline: 1rem;
  font-family: var(--ff-secondary);
  font-size: 1.5rem;
}
.deals-filter__submit {
  padding: 0.8rem 5.6rem !important;
  padding-inline: 3rem;
  color: var(--clr-neutral-900);
  border-color: var(--clr-neutral-900);
  background-color: var(--clr-neutral-100);
  border-radius: var(--radius-pill);
}

@media (min-width: 1400px) {
  .deals-filter__bar {
    gap: 15rem;
  }
}
@media (max-width: 767.98px) {
  .deals-filter__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
  }
  .deals-filter__label {
    justify-content: center;
  }
  .deals-filter__group {
    justify-content: center;
    gap: 2rem;
  }
  /* 12/10/2026 (client) — dropdowns full width, like the submit button below
     them (a stretched child of the column bar). Was 27.4rem pills, centred. */
  .deals-filter__group {
    flex-direction: column;
    align-items: stretch;
  }
  .deals-filter__dropdown-btn {
    width: 100%;
    min-width: 0;
  }
}
.deals-listing {
  padding-block: var(--section-gap);
}
/* 14/10/2026 — flex-wrap instead of repeat(2,1fr) so a lone card in the last
   row (odd count, or a filter leaving one) sits CENTRED, same treatment as
   .deals__grid / .zamarin-grid. Card width = (100% - (cols-1) * col-gap) / cols. */
.deals-listing__grid {
  --dl-cols: 2;
  --dl-row-gap: 10rem;
  --dl-col-gap: 5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dl-row-gap) var(--dl-col-gap);
}
.deals-listing__grid > * {
  flex: 0 0 calc((100% - (var(--dl-cols) - 1) * var(--dl-col-gap)) / var(--dl-cols));
  min-width: 0;
}
.deals-listing {
  /* Shown/hidden by deals.js when a filter combination matches zero cards — confirmed
     requirement now that filtering is real (was purely cosmetic dropdowns before). */
}
.deals-listing__empty {
  display: none;
  text-align: center;
  font-size: 1.8rem;
  color: var(--clr-primary-200);
  padding-block: 4rem;
}
.deals-listing__empty:not([hidden]) {
  display: block;
}

/* Filter visibility — REAL BUG FIX. js/deals.js hides non-matching cards with
   `card.hidden = true`, but the [hidden] attribute only maps to `display: none` in the
   USER-AGENT stylesheet, and .deals__card sets `display: flex` at AUTHOR level (in
   pages/_home.scss, where the card component is defined). Author beats UA, so the
   attribute was being set correctly on every filtered-out card and the card never
   actually disappeared — the hotel filter looked completely broken while deals.js was
   working exactly as written. The attribute selector raises specificity above the
   .deals__card base rule, so no !important is needed here. */
.deals__card[hidden] {
  display: none;
}

/* Responsive gaps. The 10rem/5rem base is Figma-confirmed for the desktop 2-column
   listing, but 100px of row gap on a phone is roughly a third of a viewport height of
   dead space, so it steps down below the desktop breakpoint. These two reduced values
   are NOT Figma-confirmed — there's no mobile frame measurement for this listing that
   I've seen — they're a proportional step-down, flagged so they don't later get
   mistaken for measured numbers. */
@media (max-width: 991.98px) {
  .deals-listing__grid {
    --dl-row-gap: 6rem;
    --dl-col-gap: 3rem;
  }
}
@media (max-width: 768px) {
  .deals-listing__grid {
    --dl-cols: 1;
    --dl-row-gap: 4rem;
    --dl-col-gap: 4rem;
  }
}
/* =========================================================
   SPA PAGE — confirmed node 22:3067
   Large page (6561px in Figma): hero, intro, treatment-type carousel, two full
   spa-facility sections (Zamarin/Casa Suzana, each with features + photo gallery),
   a treatment-menu panel pair, a wellness workshop section, and a banner.
   ========================================================= */
/* ---------- Hero — confirmed node 22:3070 (632px tall) ---------- */
.spa-hero {
  position: relative;
  height: 63.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--clr-neutral-100);
  text-align: center;
  /* Fallback backdrop. Every photo-overlay block on this page puts WHITE text over a
     background image that sits at z-index: -1 — so if that image 404s or is still
     loading, the white text lands on the page's cream background and is effectively
     invisible, which reads as "the element is missing" rather than "the image is
     missing". An element's own background paints beneath its negative-z-index
     children, so this sits under both the img and the ::after scrim and only shows
     through when the photo isn't there. */
  background-color: var(--clr-primary-100);
  /* 18/10/2026 — ...but only inside its OWN stacking context. Without one the
     z-index:-1 photo dropped behind this background: loaded, never seen. */
  isolation: isolate;
}
.spa-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.spa-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.spa-hero__title {
  font-family: var(--ff-primary);
  font-weight: 500;
  font-size: calc(var(--fs-900) * var(--title-scale, 1));
  line-height: 1;
}

.spa-quote {
  text-align: center;
  font-family: var(--ff-primary);
  font-style: italic;
  font-weight: 500;
  line-height: 100% !important;
  font-size: clamp(var(--fs-350), 2vw, var(--fs-450));
  color: var(--clr-primary-400);
  margin-top: 5.5rem;
  padding-inline: 2rem;
}
/* 12/10/2026 — the network spa page renders this quote as an <h2>; only that
   one takes the h1/h2 0.765 (it never used --title-scale, so a flat factor).
   The <p> copies (home, hotel articles) keep their size. */
h2.spa-quote,
.spa-quote--network { /* 18/10/2026: now a <p> — same size as before */
  font-size: calc(clamp(var(--fs-350), 2vw, var(--fs-450)) * 0.765);
}

/* ---------- Intro description — confirmed node 22:3180 ---------- */
/* 06/10/2026 — rooms page: the quote now follows the description, so it takes
   the description's own 3rem gap instead of the 5.5rem hero-to-quote gap. */
.spa-quote--after-intro {
  margin-top: 3rem;
}
.spa-intro {
  max-width: 86rem;
  margin: 3rem auto 0;
  text-align: center;
  padding-inline: 2rem;
}

/* CTA pair below the intro (replaces gap-500 / gap-lg-800 / mt-400 / mt-lg-600) */
.spa-intro__actions {
  gap: var(--size-500);
  margin-top: var(--size-400);
}

@media (min-width: 992px) {
  .spa-intro__actions {
    gap: var(--size-800);
    margin-top: var(--size-600);
  }
}
/* ---------- Treatment-type carousel — confirmed node 22:3216-3235 -----------
   FLAG: Figma shows 5 card slots, but two are identical ("עיסוי פנים" repeated) —
   listing-mockup filler, same pattern as elsewhere in this project. Built with the 4
   genuinely distinct treatments (Swedish/Classic/Hot stone/Facial) instead of visibly
   repeating one of them.
   Confirmed a genuine carousel, not a static row — Figma's own card positions run from
   x=-417 to x=1880 (bleeding past both edges of the 1920px page), not a simple centered
   grid. Built with the same single-arrow Swiper convention used throughout this project. */
.treatment-carousel {
  /* 12/10/2026 (client): no bottom padding — with the next section's own top
     padding it doubled the gap and pushed the following section off-centre. */
  padding-block: var(--section-gap) 0;
  /* 100vw includes the scrollbar width in most engines, so the bleed below can overshoot
     the physical edge by ~15px and spawn a horizontal scrollbar of its own. This
     swallows that overshoot. `clip` rather than `hidden` deliberately: overflow-x:
     hidden forces overflow-y to auto, which would add a stray vertical scroll context
     to the section. */
  overflow-x: clip;
  /* LEFT-EDGE BLEED.
     The nav row and the slider both extend past .container to touch the physical left
     edge of the screen, while their RIGHT edge stays locked to .container — so the
     first card still starts on the same line as the intro text and every other section.

     calc(50% - 50vw) is self-correcting and needs no breakpoints: percentage margins
     resolve against the CONTAINING BLOCK's width, i.e. .container's own width at
     whatever breakpoint is active. The element's left edge therefore lands at:
         (100vw - W)/2  +  (0.5W - 50vw)  =  0
     — exactly x=0 — for every W. That means it keeps working if $container or
     $container-padding is ever changed, and across all three of .container's own
     breakpoints, without any of those numbers being restated here.

     margin-inline-END, not margin-left: on this RTL page the inline end IS the physical
     left — the side the cards flow toward. Written logically so the intent survives if
     the direction ever flips. */
}
.treatment-carousel__nav-group, .treatment-carousel__wrap {
  margin-inline-end: calc(50% - 50vw);
}
.treatment-carousel {
  /* Swiper's own overflow: hidden on .swiper is now left ALONE (an earlier revision
     overrode it to visible so cards could bleed past the container). With a numeric
     slidesPerView the clip is what makes the number mean anything: 4.1 only shows as
     "four cards plus a 10% sliver" if the track is clipped at the container edge. With
     overflow visible you'd see 4.1 inside the container PLUS everything spilling into
     the gutters, so the setting would no longer describe what's on screen. The section
     no longer needs overflow-x: clip either, since nothing escapes the container now. */
  /* Nav pair, in normal flow above the slider rather than absolutely positioned.
     RTL ordering matters here: the first flex child renders on the RIGHT, so prev is
     first in the DOM (landing on the right) and next second (landing on the left).
     That pairing is what makes the right button move content left and the left button
     move content right — see the direction note in js/spa.js. */
}
.treatment-carousel__nav-group {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
  /* RTL BUG FIX. In direction: rtl the flex main axis runs right-to-left, so the
     default justify-content: flex-start packs the pair against the RIGHT edge — the
     opposite of the design, which puts them at the far LEFT of the container header.
     flex-end is main-END, which in RTL is the left edge. Do not "simplify" this to
     flex-start; it reads as the left edge only in LTR. Combined with the DOM order
     (prev first, next second), the left-pointing next button lands on the outer left
     edge and prev sits just inside it. */
  justify-content: flex-end;
  /* Keeps the arrows off the bare screen edge now that this row bleeds too. 3.6rem
     is $container-padding — the gutter .container itself falls back to — rather than
     an arbitrary number, so the arrows sit on a rhythm the page already uses. */
  padding-inline-end: 3.6rem;
}
.treatment-carousel {
  /* Positioning context for the nav arrow. The button was previously a direct child of
     .treatment-carousel, whose box includes var(--section-gap) of block padding — so
     the `bottom: 1.6rem` it inherits from .hotel-card__gallery-nav-btn parked it out in
     empty padding, visually detached from the cards. Anchoring to the slider itself is
     exactly how .spa-facility__gallery-wrap already works for this page's other two
     carousels. */
}
.treatment-carousel__wrap {
  position: relative;
}
.treatment-carousel {
  /* Nav buttons reuse .hotel-card__gallery-nav-btn for ALL their visual styling (26px
     circle, hover, .swiper-button-disabled state) and override positioning only. That
     base class is position: absolute with bottom/left offsets, which has to be undone
     explicitly — the pair now sits in normal flow inside __nav-group at the top of the
     section rather than overlaid on the slider. _spa.scss is imported after _home.scss,
     so these win at equal specificity without !important. */
}
.treatment-carousel__nav {
  position: static;
  inset: auto;
}
.treatment-carousel {
  /* SINGLE SOURCE OF TRUTH for slide width is js/spa.js, via a numeric slidesPerView.
     There must NOT be a `width` here. A numeric slidesPerView makes Swiper write an
     inline width onto every slide, and an inline style beats a stylesheet rule — so a
     CSS width would be dead code silently disagreeing with what actually ships. That
     exact conflict (CSS 44.5rem vs JS slidesPerView) was the bug in this carousel two
     revisions ago, and _home.scss documents the same one in the hotel galleries.
     height: auto still IS needed: Swiper sizes only the width, and the card's
     aspect-ratio derives its height from that. Without it the slide stretches to the
     tallest track height and the ratio breaks. */
}
.treatment-carousel .swiper-slide {
  height: auto;
  flex-shrink: 0;
}
.treatment-carousel__card {
  position: relative;
  width: 100%;
  /* Was a fixed height: 34.2rem. Once the width became fluid that fixed height
     distorted the card on narrow screens. 445x342 are both confirmed Figma
     dimensions, so expressing them as a ratio holds the intended proportion at
     every width instead of only at 445px. */
  aspect-ratio: 445/342;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 3rem;
  /* Inset for the hairline rule above the title (see __title::before). Measured off
     the reference screenshot at roughly 6% of the card width each side, NOT from
     Figma — flagging so it doesn't get mistaken later for a confirmed value. */
  padding-inline: 2.4rem;
  color: var(--clr-neutral-100);
  text-align: center;
}
.treatment-carousel__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.treatment-carousel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.treatment-carousel__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 700;
  font-size: calc(2.4rem * var(--title-scale, 1));
  margin-bottom: 1.6rem;
  /* Blockified and stretched to the card's content box so the rule below can span
     the full inset width. The card sets align-items: center, which would otherwise
     shrink this span to the width of its own text and take the rule with it. The
     text stays centred via the card's text-align: center. */
  display: block;
  width: 100%;
  /* The hairline above the title. Present in the reference screenshot but never
     built — done as a pseudo-element so no extra markup is needed per card.
     Colour and 1.5rem gap are eyeballed from the screenshot, not Figma-confirmed. */
}
.treatment-carousel__title::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 1.5rem;
  background-color: rgba(255, 255, 255, 0.5);
}
.treatment-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.8rem;
  padding-inline: 2rem;
  border: 1px solid var(--clr-neutral-100);
  border-radius: var(--radius-pill);
  color: var(--clr-neutral-100);
  text-decoration: none;
  font-size: 1.58rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.treatment-carousel__btn:hover {
  background-color: var(--clr-neutral-100);
  color: var(--clr-primary-400);
}

/* ---------- Spa-facility section — confirmed nodes 22:3235 (Casa Suzana) /
   22:3422 (Zamarin), reused for both. Each has: heading, description, a features
   row, and a 2-image gallery with a single peek arrow, matching the established
   hotel-gallery convention (rtl:true, rewind, single 26px prev arrow) rather than
   the paired-arrow pattern already confirmed wrong elsewhere in this project. */
.spa-facility {
  padding-block: var(--section-gap);
  text-align: center;
  /* Hotel wordmark above the section title, per the reference. Sized by max-height so
     the three brand assets (different aspect ratios) stay visually consistent. */
}
/* 12/10/2026 (client) — less space on desktop: half the section gap (80px ->
   40px per side, so 80px rather than 160px between the two hotels). */
@media (min-width: 992px) {
  .spa-facility {
    padding-block: calc(var(--section-gap) / 2);
  }
}
.spa-facility__logo {
  display: block;
  max-width: 18rem;
  max-height: 6rem;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}
/* 12/10/2026 (client) — more air above (from the logo) and below the title.
   Replaces Bootstrap's my-2 (0.5rem = 5px at the 62.5% root) in spa-facility.php. */
.spa-facility__title {
  margin-block: 2.4rem;
}
.spa-facility__desc {
  max-width: 72rem;
  margin: 2.5px auto 0;
}
.spa-facility {
  /* Section footer: the two nav controls pinned to the outer edges of the full-bleed
     image row, with the feature icons centred between them — in the reference they sit
     on the SAME horizontal band, not stacked. The features child takes flex: 1 so it
     centres against the section rather than against whatever space the arrows leave.
     padding-inline is 1.6rem, the same inset .hotel-card__gallery-nav-btn already uses
     for gallery arrows elsewhere in this project, rather than a new invented number. */
}
.spa-facility__footer {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  padding-inline: 1.6rem;
}
.spa-facility {
  /* Resets the position: absolute + offsets inherited from .hotel-card__gallery-nav-btn,
     which is built to overlay a gallery. Here the buttons are flow items in __footer. */
}
.spa-facility__nav {
  position: static;
  inset: auto;
  flex-shrink: 0;
}
.spa-facility__features {
  flex: 1 1 auto;
  /* Required for the marquee. A flex item will not shrink below its own content
     width without this, so the strip would push the nav arrows off the row on
     narrow screens instead of clipping and scrolling. */
  min-inline-size: 0;
  display: flex;
  justify-content: center;
  /* 3rem (was 4rem) now that the row carries 10 items rather than 3: at 9rem each
     that is 10x90 + 9x30 = 1170px, which sits comfortably inside the content width
     at 1920 alongside the two arrows, and matches the span in the reference. */
  gap: 3rem;
  flex-wrap: wrap;
}
.spa-facility__features span {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  color: var(--clr-primary-200);
}
/* 12/10/2026 — the per-hotel Figma icons (spa-facility.php) range 31-40px and
   the wine glyph's frame is 80x30, so they share one 3.4rem height (Figma's
   33px icon box) and the labels start on one line. max-width keeps the wide
   wine frame inside the 9rem item. */
.spa-facility__icon {
  height: 3.4rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.spa-facility__feature {
  /* 9rem, not 8rem: the longest label ("מרחק הליכה מחופי הים") wraps to three
     lines at 8rem but sits on two at 9rem, which is how it reads in the reference. */
  width: 9rem;
  display: flex;
  gap: 3px;
  flex-direction: column;
  align-items: center;
}
.spa-facility__gallery-wrap {
  position: relative;
  margin-top: 4rem;
}
.spa-facility__gallery {
  width: 100%;
  overflow: hidden;
  contain: layout;
  /* Sizing deliberately kept OFF the slide and put on the <img> instead.
     Previously .swiper-slide carried `height: auto` + `aspect-ratio`, which puts CSS
     in competition with Swiper for control of the slide box: Swiper writes an inline
     WIDTH on every slide (numeric slidesPerView) while Swiper's own stylesheet sets
     height: 100%, and the wrapper's height is itself derived from the slides. That
     circular dependency can resolve to a zero-height track on re-measure — and a
     zero-height track with `overflow: hidden` makes every slide vanish while the DOM
     still looks completely correct.
     Letting the image own its own ratio breaks the circle: the img height always
     derives from its own width, so the track can never collapse. */
}
.spa-facility__gallery .swiper-slide {
  flex-shrink: 0;
}
.spa-facility__gallery .swiper-slide img {
  display: block;
  width: 100%;
  /* Was 4 / 2.7 (=1.48). Measured off the reference at ~1.14 with three images
     across the full viewport width. NOT Figma-confirmed; flagged. */
  aspect-ratio: 8/7;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
/* 06/10/2026 — ROOMS carousels only (hotel home "Our Rooms" + the rooms page,
   tagged --rooms in their templates): 16:9 per client. The spa / network spa
   galleries share this component and keep 8/7. Still set on the <img>, per the
   note above, so the track can't collapse. */
.spa-facility__gallery--rooms .swiper-slide img {
  aspect-ratio: 16/9;
}
/* 13/10/2026 — taller photos on mobile, 16/9 read too wide on a phone. */
@media (max-width: 767.98px) {
  .spa-facility__gallery--rooms .swiper-slide img {
    aspect-ratio: 4/3;
  }
}

/* ---------- Treatment-menu panels — direct reuse of the home page's .spa component
   (same 2-panel, logo + button, dark-overlay pattern) — confirmed node 22:3613 matches
   that structure exactly, just with different button copy. No new CSS needed; the
   .spa/.spa__grid/.spa__panel/.spa__logo classes from _home.scss are reused as-is. */
/* ---------- Wellness workshop — confirmed node 22:3638 ---------- */
/* =========================================================================
   AMENITY ROW — MOBILE OVERFLOW (<=767.98px)

   Ten items at 9rem each is roughly 1170px of content. On a phone the default
   `flex-wrap: wrap` turns that into four stacked rows that push the gallery a
   long way down the page. Below 768px the row stays on ONE line and scrolls
   horizontally by hand instead.

   No animation and no cloned track: this is a plain scroll container, so the
   visitor controls it and nothing moves on its own.

   Desktop is deliberately untouched — every rule here is inside the media
   query, so above 768px the row is the same centred, wrapping ten-item list
   it has always been.
   ========================================================================= */
@media (max-width: 767.98px) {
  .spa-facility__feature {
    /* Without this the items would compress to fit rather than overflow, and
       there would be nothing to scroll. */
    flex: 0 0 auto;
  }
}
/* FIGMA-OVER-STATIC typography pass (13/08/2026 — see deviation #7).
   The network spa page's facility headings (spa-facility.php, "מתקני הספא <hotel>")
   and the wellness-workshop heading (spa-workshop.php, "סדנאות וולנס") both carry
   the shared .heading-sm class, which the base paints Cormorant 500 up to 4rem.
   Figma shows these Heebo 42/300 #474132. Scoped to the two network sections so
   the base .heading-sm (used elsewhere) and the hotel-spa page's own
   .secondary-heading facility title are untouched. Both sections render ONLY on
   page-spa-network.php, so this is network-scoped. Specificity 0,2,1 > base 0,1,0. */
.spa-facility h2.heading-sm,
.wellness-workshop h2.heading-sm {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 300;
  font-size: calc(clamp(3.2rem, 5vw, 4.2rem) * var(--title-scale, 1)); /* peaks 4.2rem = 42px */
  color: var(--clr-title);
}

.wellness-workshop {
  padding-block: var(--section-gap);
  text-align: center;
}
.wellness-workshop__desc {
  max-width: 60rem;
  margin: 1.6rem auto 0;
}
.wellness-workshop__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 4rem;
  text-align: start;
  align-items: center;
}
.wellness-workshop__img, .wellness-workshop__video {
  display: block;
  width: 100%;
  aspect-ratio: 4/3.1;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--clr-primary-100);
}
/* Item 7 (13/08/2026, FIGMA OVER STATIC — see deviation #8). The static puts
   this whole section in a normal .container (max-width ~1320px); Figma runs the
   media wider — near full-bleed with comfortable side padding. Rather than
   restructure the markup (the video lives in a 2-col grid inside .container),
   the section's inner .container is made container-fluid-like ONLY here: its
   max-width is lifted and symmetric comfortable padding kept. The heading and
   .wellness-workshop__desc stay centred and capped (desc 60rem), so the extra
   width flows to the grid — and with it the video. Scoped to .wellness-workshop,
   which renders only on page-spa-network.php. Specificity 0,2,0 beats
   Bootstrap's .container max-width (0,1,0) even inside its min-width queries.
   ⚠ NOT pixel-compared to Figma proportions (no Figma access this session): the
   grid split stays 50/50 within the now-fluid container, which already widens
   the media markedly; an asymmetric media-favouring split is a one-line
   follow-up if Figma shows one. The hotel wellness page uses a different section
   (.wellness-workshop-block), so it is untouched. */
.wellness-workshop > .container {
  max-width: none;
  padding-inline: clamp(2rem, 5vw, 8rem);
}
.wellness-workshop__video {
  /* Cap the now-wider video on tall/large screens; object-fit:cover (above)
     crops rather than letterboxes. */
  max-block-size: 80svh;
}
.wellness-workshop__subtitle {
  font-family: var(--ff-secondary);
  font-weight: 400;
  font-size: var(--fs-250); /* 18/10/2026: was --fs-350 (30px) — larger than its own section h2 (~27px) */
  margin-bottom: 2.4rem;
}
.wellness-workshop__list {
  list-style: none;
  margin-bottom: 8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.wellness-workshop__list li {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}
.wellness-workshop__list svg {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
  color: var(--clr-primary-100);
}

@media (max-width: 767.98px) {
  .spa-hero__title {
    font-size: calc(clamp(4.8rem, 14vw, 8rem) * var(--title-scale, 1));
  }
  .spa-facility__features {
    gap: 1rem;
  }
  .wellness-workshop__grid {
    grid-template-columns: 1fr;
  }
  .wellness-workshop__list {
    margin-bottom: 3rem;
    gap: 2.5rem;
  }
  .wellness-workshop__subtitle {
    font-size: var(--fs-250);
    margin-bottom: 2.4rem;
  }
  .spa-intro {
    font-size: 1.8rem;
  }
}
/* =========================================================
   CONTACT US PAGE — confirmed Figma node 22:4244 (1920 x 3926)

   Page order in the design (hidden layers excluded):
     hero (632px)  →  intro + brand logo row  →  contact form beside a bleed image
     →  FAQ accordion beside an image  →  "Relax. With. Us." banner  →  footer

   Colour mapping to this project's existing tokens (no new colours invented):
     #474132  = var(--clr-primary-400)   FAQ collapsed titles, submit button fill
     #2C3424  = var(--clr-primary-100)   FAQ open title
     #3D454D  literal — form label grey, has no existing token
     #33302D  literal — form input border, has no existing token
   ========================================================= */
/* ---------- Hero — confirmed node 22:4248 (1922 x 632) + title 22:4257 ---------- */
.contact-hero {
  position: relative;
  height: 63.2rem; /* 632px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--clr-neutral-100);
}
.contact-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.contact-hero__title {
  font-family: var(--ff-primary);
  font-weight: 500;
  font-size: calc(var(--fs-900) * var(--title-scale, 1));
  line-height: 1;
}

/* ---------- Intro — confirmed node 22:4345 ("about"), heading 22:4349 + copy 22:4348 ---------- */
.contact-intro {
  background-color: var(--bg-main);
  padding-block: clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.contact-intro__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 5vw, 6rem) * var(--title-scale, 1));
  color: var(--clr-title);
  margin-bottom: 1.6rem;
}
.contact-intro__desc {
  /* 774px in Figma */
  max-width: 77.4rem;
  margin-inline: auto;
}
.contact-intro {
  /* Brand logo row — confirmed nodes 22:4352 (260x97), 22:4351 (210x97),
     22:4353 (Mulan vector group ~350x58), 22:4415 (KEREM 145x80).
     Heights differ per brand in the design, so each is capped by max-height and
     allowed to keep its own ratio rather than being forced to one box. */
  /* Auto-scrolling brand marquee.
     Was a static wrapping flex row; now a continuous Swiper marquee (see js/contact.js).
     The row is intentionally NOT centred with justify-content: a marquee track always
     overflows its container, and centring an overflowing Swiper track shifts its
     transform origin — the exact failure that made the spa page's images disappear.
     Overflow is left to Swiper's own transform instead. */
}
.contact-intro__logos {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.contact-intro__marquee {
  width: 100%;
  overflow: hidden;
  /* Linear timing is what separates a marquee from a slideshow. Swiper's default
     ease makes each step visibly accelerate and settle; with autoplay delay 0 that
     reads as lurching. !important is needed because Swiper writes the easing
     inline on the wrapper during transitions. */
}
.contact-intro__marquee .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}
.contact-intro {
  /* slidesPerView:'auto' means each slide takes its width from CSS. Logos have different
     native ratios, so the slide is sized by content (width: auto) and only the image is
     capped — otherwise the wide Zamarin wordmark and the tall Kerem mark would be forced
     into identical boxes and one would letterbox. */
}
.contact-intro__logo-slide {
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.contact-intro__logo-slide img {
  display: block;
  max-height: 8rem;
  max-width: 22rem;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ---------- Contact form section — confirmed node 22:4419 ----------
   Figma layout: image (node 22:4442) is 1012x559 positioned at x=-90, i.e. it BLEEDS
   90px off the left edge; the form (node 22:4421) is 671px wide at x=1172, leaving a
   77px gutter to the right edge. Reproduced with a two-column grid where the media
   column bleeds and the form column is inset. */
.contact-form-section {
  padding-block: var(--section-gap);
  overflow-x: clip;
}
.contact-form-section__row {
  display: grid;
  grid-template-columns: minmax(0, 671fr) minmax(0, 1012fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: center;
}
.contact-form-section__media {
  grid-column: 2;
  grid-row: 1;
}
@media (min-width: 992px) {
  .contact-form-section__media {
    margin-inline-end: calc(-1 * max((100vw - 168rem) / 2, 3.6rem));
  }
}
.contact-form-section__video {
  display: block;
  width: 100%;
  /* 1012 x 559 → 1.81, same as the img rule below */
  aspect-ratio: 1012/559;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--clr-primary-100);
}
/* 18/10/2026 — cross-fading image slideshow beside the form
   (template-parts/network/contact-form.php). Same 1012x559 frame as the video;
   the images stack and only .is-active is opaque. */
.contact-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 1012/559;
  overflow: hidden;
  background-color: var(--clr-primary-100);
}
.contact-form-section__media .contact-slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.contact-form-section__media .contact-slideshow__img.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .contact-form-section__media .contact-slideshow__img {
    transition: none;
  }
}
.contact-form-section__media img {
  display: block;
  width: 100%;
  /* 1012 x 559 → 1.81 */
  aspect-ratio: 1012/559;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.8rem;
}
.contact-form-section__form {
  grid-column: 1; /* right in RTL — matches Figma node 22:4421 */
  grid-row: 1;
  /* 77px right gutter in Figma, scaled with the viewport */
  padding-inline-end: clamp(1.8rem, 4vw, 7.7rem);
}

/* Form field grid — confirmed nodes 22:4422 (row 1, gap 127px), 22:4429 / 22:4432
   (row 2), 22:4436 (full-width message). */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 127px column gap, 44px row gap (row 1 bottom y=99 → row 2 top y=143) */
  gap: 4.4rem 12.7rem;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* confirmed gap-[10px] between label and control */
  /* Message box spans both columns — confirmed node 22:4436 at full 671px width */
}
.contact-form__field--full {
  grid-column: 1/-1;
}
.contact-form__label {
  font-family: var(--ff-secondary);
  font-weight: 400;
  font-size: 1.6rem;
  color: #3d454d; /* literal: no matching token in this project */
  text-align: right;
}
.contact-form {
  /* All controls share one border/radius/height spec — confirmed identical across
     nodes 22:4425 / 22:4428 / 22:4431 / 22:4434 (42px, 8px radius, 1px #33302D). */
}
.contact-form__control {
  width: 100%;
  height: 4.2rem;
  border: 1px solid #33302d;
  border-radius: 0.8rem;
  background: transparent;
  padding-inline: 1.4rem;
  font-family: var(--ff-secondary);
  font-size: 1.6rem;
  color: var(--clr-primary-200);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form__control:focus-visible {
  outline: none;
  border-color: var(--clr-primary-400);
  box-shadow: 0 0 0 2px rgba(71, 65, 50, 0.15);
}
.contact-form {
  /* Textarea is 129px in Figma, not 42px */
}
.contact-form__control--textarea {
  height: 12.9rem;
  padding-block: 1.2rem;
  resize: vertical;
}
.contact-form {
  /* Native select: the design shows a chevron at the control's LEFT edge (node
     22:4435, at 4.76% from left in an RTL control). Default arrow is removed and
     replaced with an inline SVG positioned left, so it matches in both directions. */
}
.contact-form__control--select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2333302D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.4rem center;
  padding-inline-start: 3.6rem;
}
.contact-form {
  /* Submit — confirmed node 22:4440: 169x41, fill #474132, radius 71.1px (a pill),
     label Heebo Medium 16px white. Aligned to the row's start edge (right in RTL),
     matching x=1674 of a 671px form block. */
}
.contact-form__submit {
  grid-column: 1/-1;
  justify-self: start;
  min-width: 16.9rem;
  height: 4.1rem;
  padding-inline: 2.4rem;
  border: 1px solid var(--clr-primary-400);
  border-radius: var(--radius-pill);
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  font-family: var(--ff-secondary);
  font-weight: 500;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.contact-form__submit:hover {
  background-color: transparent;
  color: var(--clr-primary-400);
}

.faq {
  padding-block: var(--section-gap);
  overflow-x: clip;
}
.faq__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 5vw, 6rem) * var(--title-scale, 1));
  color: var(--clr-title);
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 4.6rem);
}
.faq .accordion-button:not(.collapsed) {
  background-color: var(--clr-neutral-100);
}
.faq__row {
  display: grid;
  grid-template-columns: minmax(0, 963fr) minmax(0, 811fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: start;
}
.faq__list {
  grid-column: 2; /* left in RTL */
  grid-row: 1;
}
.faq__media {
  grid-column: 1;
  grid-row: 1;
}
/* No media column (hotel spa "ללא וידאו ליד השאלות") — the list takes the row. */
.faq__row--solo {
  grid-template-columns: minmax(0, 1fr);
}
.faq__row--solo .faq__list {
  grid-column: 1;
}
@media (min-width: 992px) {
  .faq__media {
    margin-inline-start: calc(-1 * max((100vw - 168rem) / 2, 3.6rem));
  }
}
.faq__media video {
  inline-size: 100%;
  block-size: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.faq__video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--clr-primary-100);
}
.faq__list {
  --bs-accordion-bg: var(--clr-neutral-100);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--clr-neutral-100);
  --bs-accordion-active-color: var(--clr-primary-100);
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Accordion item — confirmed nodes 22:4453 (open) / 22:4447-22:4452 (closed)
   Built on Bootstrap 5.3's accordion/Collapse component rather than hand-rolled JS.
   Bootstrap owns the open/close state, the height animation, keyboard operation and
   aria-expanded; everything below is presentation only. */
.faq-item {
  background-color: var(--clr-neutral-100);
  /* confirmed drop-shadow 0 10px 16px rgba(24,39,75,0.1) */
  box-shadow: 0 1rem 1.6rem rgba(24, 39, 75, 0.1);
  overflow: hidden;
  /* .accordion-button already supplies width:100%, the flex box and the click target.
     These override its visual defaults to the Figma spec — 24px inline / 18px block
     padding is kept exactly. */
}
.faq-item__header {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.5rem 2.4rem;
  font-family: var(--ff-secondary);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--clr-primary-400);
  text-align: right;
}
.faq-item__header::after {
  display: none;
  content: none;
}
.faq-item__header:focus {
  box-shadow: none;
}
.faq-item__header.accordion-button:not(.collapsed) {
  font-weight: 700;
  color: var(--clr-primary-100);
  background-color: var(--clr-neutral-100);
  box-shadow: none;
}
.faq-item__header.accordion-button:not(.collapsed) .faq-item__chevron {
  transform: rotate(180deg);
}
.faq-item__q {
  flex: 1 1 auto;
  min-width: 0;
}
.faq-item {
  /* 16px chevron. The SVG path points DOWN when closed and rotates 180deg when open.
     order: 1 pins it to the END of the main axis — the LEFT edge in RTL — regardless
     of where it sits in the markup. */
}
.faq-item__chevron {
  order: 1;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  transition: transform 0.25s ease;
}
.faq-item {
  /* .accordion-body. No height rules here at all — Bootstrap's Collapse animates the
     wrapper's height in JS, so there is nothing for CSS to collapse, no max-height to
     guess at, and no residual padding to zero out. */
}
.faq-item__answer {
  padding: 0 2.4rem 1.8rem;
  /* 467px text column inside an 811px card in Figma */
  max-width: 46.7rem;
  font-family: var(--ff-secondary);
  font-size: 1.6rem;
  line-height: 1.4;
  color: rgba(60, 60, 67, 0.85); /* confirmed literal from the design */
  text-align: right;
}

/* ---------- Responsive ---------- */
/* Tablet: both two-column rows collapse to one column. The media element moves ABOVE
   its text in each case, which keeps the visual order the design implies (image first
   in the form section) and avoids a tall text block pushing the image off-screen. */
@media (max-width: 991.98px) {
  .contact-form-section__row,
  .faq__row {
    grid-template-columns: 1fr;
  }
  /* The explicit `grid-column` values above are for the 2-column desktop grid only.
     Left in place at one column they would pin children to a non-existent column 2 and
     leave a blank first row, so they are reset here and normal source order applies. */
  .contact-form-section__media,
  .contact-form-section__form,
  .faq__list,
  .faq__media {
    grid-column: auto;
    /* The row pins must be released too, or all four children stack into a single
       row-1 grid area on top of each other once the columns collapse. */
    grid-row: auto;
  }
  .contact-form-section__form {
    padding-inline-end: 0;
  }
  /* Image above the accordion once stacked, so the FAQ list is not pushed far down. */
  .faq__media {
    order: -1;
  }
}
@media (max-width: 767.98px) {
  .contact-hero {
    height: 42rem;
  }
  .contact-hero__title {
    font-size: calc(clamp(4.8rem, 14vw, 8rem) * var(--title-scale, 1));
  }
  /* 127px column gap is a desktop-only figure; at one column it would become dead
     vertical space, so the grid drops to a single column with a tighter row gap. */
  .contact-form {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  /* Z3-F2 (18/08/2026) — centre the fallback-form submit on mobile. Same
     specificity as the base rule (l.3340, justify-self: start); later source +
     this media condition decide, so desktop stays start. Mirrors Z2-F6, which
     covers the GF variant — both form variants now centre on mobile. */
  .contact-form__submit {
    justify-self: center;
  }
  .faq-item__header {
    font-size: 1.6rem;
    padding: 1.6rem 1.8rem;
  }
  .faq-item__answer {
    padding: 0 1.8rem 1.6rem;
  }
  .contact-intro__logo-slide img {
    max-height: 5.6rem;
    max-width: 15rem;
  }
}
/* =========================================================
   WELLNESS PAGE — confirmed Figma node 22:8764 (1920 x 4830)

   Order of the page as drawn (hidden layers excluded — see the FLAG notes in
   wellness.shtml for which ones and why):
     hero 632px  →  quote  →  intro heading + copy  →  two-image row
     →  "סדנת וולנס" heading + copy  →  mosaic grid beside a divider list + 2 buttons
     →  "למי זה מתאים?" heading + copy + audience icon row + 3-image carousel
     →  "Breath. With. Us." banner  →  footer

   Type sizes are derived from the text-box heights Figma reports, cross-checked against
   the steps this project already uses:
     heading boxes 88px tall  → ~56px type  (same step as the spa/deals section titles)
     quote box     48px tall  → 40px italic serif (identical to the other page quotes)
     list lines    29px each  → 18px Heebo at line-height 1.6 = 28.8px
     icon labels   42px / 2   → 14px at line-height 1.5 = 21px per line
     button text   24px tall  → 16px, in a 192x41 pill
   ========================================================= */
/* ---------- Hero — confirmed nodes 22:8767 / 22:8768 (1922x632), title 22:8777 ---------- */
.wellness-hero {
  position: relative;
  height: 63.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--clr-neutral-100);
  /* Media is absolutely positioned behind the title. `video` is listed alongside `img`
     so the hero is media-agnostic — without it a <video> is not positioned at all and
     drops into normal flow instead of filling the frame, which is the same bug the
     .banner sections hit. The ::after scrim below is a later sibling at the same
     z-index, so it still paints over either element. */
}
.wellness-hero img,
.wellness-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.wellness-hero video {
  pointer-events: none;
  /* Stands in for a poster. There is no exported still for this hero yet, so rather
     than point `poster` at a file that does not exist, the element paints a solid
     dark ground until the first frame decodes — the title stays legible throughout
     instead of sitting on white. */
  background-color: var(--clr-primary-100);
}
.wellness-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.wellness-hero__title {
  font-family: var(--ff-primary);
  font-weight: 500;
  font-size: calc(var(--fs-900) * var(--title-scale, 1));
  line-height: 1;
}

/* ---------- Quote — confirmed node 22:8845 (y=687, 970x48) ----------
   55px below the hero's bottom edge (632 → 687). */
.wellness-quote {
  text-align: center;
  font-family: var(--ff-primary);
  font-style: italic;
  font-weight: 500;
  font-size: 4rem;
  color: var(--clr-primary-400);
  margin-top: 5.5rem;
  padding-inline: 2rem;
}

/* ---------- Intro — heading 22:8847 (y=772), copy 22:8846 (y=868, 774 wide) ---------- */
.wellness-intro {
  text-align: center;
  padding-inline: 2rem;
}
.wellness-intro__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 5vw, 5.6rem) * var(--title-scale, 1));
  color: var(--clr-title);
  /* quote baseline 735 → heading top 772 = 37px */
  margin-top: 3.7rem;
  margin-bottom: 0;
}
.wellness-intro__desc {
  /* 774px wide in Figma; heading bottom 860 → copy top 868 = 8px */
  max-width: 77.4rem;
  margin: 0.8rem auto 0;
}

/* ---------- Two-image row — confirmed node 22:8849 (Group 2962, y=1031) ----------
   Left image 880x549 at x=41, right 944x549 at x=935, so a 14px gutter between them and
   a ~41px inset from each page edge. The 85x85 node at x=1130 (22:8850) sits on top of
   the right-hand image — a play/scroll affordance with no artwork attached in the file,
   so it is not built. Flagged in the HTML. */
.wellness-duo {
  /* intro copy ends 955 → images start 1031 = 76px */
  margin-top: 7.6rem;
}
.wellness-duo__row {
  display: grid;
  /* RIGHT COLUMN FIRST. Track 1 is the rightmost in RTL and holds --media--end,
     which Figma draws 944px wide at x=935; the 880px image is the LEFT one. Listed
     as `880fr 944fr` the two were swapped. */
  grid-template-columns: minmax(0, 944fr) minmax(0, 880fr);
  gap: 1.4rem;
  padding-inline: 4.1rem;
}
.wellness-duo {
  /* Explicit placement, not source order: in a `direction: rtl` grid column 1 is the
     RIGHTMOST column, so relying on DOM order silently mirrors the layout. This is the
     same mistake that swapped both rows on the contact page.

     grid-row is as load-bearing as grid-column. Auto-placement is SPARSE by default:
     it walks children in DOM order and never backtracks. --start comes first and takes
     column 2, leaving the placement cursor at column 2 — so when --end asks for column
     1, which is BEHIND the cursor, the algorithm cannot fit it in row 1 and drops it
     into row 2. That is why the second video was rendering correctly sized and
     positioned horizontally but a whole row below the first. */
}
.wellness-duo__media--start {
  grid-column: 2; /* left in RTL — the 880px image at x=41 */
  grid-row: 1;
}
.wellness-duo__media--end {
  grid-column: 1; /* right in RTL — the 944px image at x=935 */
  grid-row: 1;
}
.wellness-duo {
  /* img and video share one treatment so each slot is media-agnostic — same pattern as
     .wellness-hero above, .banner, .deals-hero and .wellness-workshop. Without `video`
     listed here the element gets no width or ratio and falls back to its intrinsic
     size, which breaks the two-column rhythm.
     object-fit works on <video> exactly as on <img>, so the drawn ratios still hold. */
}
.wellness-duo img,
.wellness-duo video {
  display: block;
  width: 100%;
  /* both images are 549 tall; ratios differ slightly per side */
  aspect-ratio: 880/549;
  -o-object-fit: cover;
     object-fit: cover;
}
.wellness-duo video {
  /* Decorative background clips — no controls, so nothing here should take a click
     or a tab stop. */
  pointer-events: none;
  /* Painted before the first frame decodes, so the slot is never a white rectangle
     on the cream page while the file streams in. */
  background-color: var(--clr-primary-100);
}
.wellness-duo__media--end img, .wellness-duo__media--end video {
  aspect-ratio: 944/549;
}

/* ---------- Workshop block — heading 22:8848 (y=1666), copy 22:8894 (y=1754) ---------- */
.wellness-workshop-block {
  padding: clamp(4rem, 8vw, 8.6rem) 0; /* images end 1580 → heading 1666 */
  text-align: center;
}
.wellness-workshop-block__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 5vw, 5.6rem) * var(--title-scale, 1));
  color: var(--clr-title);
  margin-bottom: 0;
}
.wellness-workshop-block__desc {
  /* 574px wide; heading bottom 1754 sits flush against the copy top */
  max-width: 57.4rem;
  margin: 0 auto;
}
.wellness-workshop-block__row {
  display: grid;
  /* Track sizes listed in RTL VISUAL order — RIGHT COLUMN FIRST.
     This was `1170fr 598fr`, i.e. Figma's left-to-right order, which inverted the
     layout: in a `direction: rtl` grid track 1 is the RIGHTMOST column, and that is
     the LIST (598px in Figma), not the mosaic. The wide 1170fr track was therefore
     being handed to the narrow list and vice versa — at a 1666px viewport that
     rendered the mosaic at 510px and the list at 1013px, almost exactly reversed.
     The contact page's two rows already follow this convention; these three did not. */
  grid-template-columns: minmax(0, 598fr) minmax(0, 1170fr);
  gap: 5.7rem;
  align-items: start;
  /* copy ends 1812 → grid starts 1873 = 61px */
  margin-top: 6.1rem;
  text-align: start;
  /* The 95px gutter (1920 - 1825) belongs to the ROW, not the list column.
     Off the row first, the remainder splits 598fr:1170fr into exactly 598 and 1170,
     and the mosaic lands on x=0 as drawn.
     inline-START because in RTL that is the right edge, the side the gutter is on. */
  padding-inline-start: clamp(1.8rem, 5vw, 9.5rem);
}
.wellness-workshop-block {
  /* Mosaic bleeds to the page's left edge (x=0) while the list keeps the standard
     inset, so the row is not wrapped in .container — the inset is applied per column.
     grid-row: 1 for the same sparse-auto-placement reason as .wellness-duo above —
     this row has the identical shape (column 2 requested first, then column 1). */
}
.wellness-workshop-block__mosaic-col {
  grid-column: 2; /* left in RTL */
  grid-row: 1;
}
.wellness-workshop-block__list-col {
  grid-column: 1; /* right in RTL */
  grid-row: 1;
}

/* Mosaic — confirmed node 22:8867 (Group 3092, 1170x824)
   Row 1: three tiles 375 / 375 / 364 at y=1873
   Row 2: two tiles 573 / 573 at y=2297
   Gaps measured at 24-28px, so a single 2.4rem gap is used for both axes.
   A 6-column track makes both rows land exactly: 2+2+2 then 3+3. */
.wellness-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.4rem;
}
.wellness-mosaic__tile {
  display: block;
  width: 100%;
  /* every tile is 400px tall; widths differ, so the ratio is set per span below */
  -o-object-fit: cover;
     object-fit: cover;
}
.wellness-mosaic__tile--third {
  grid-column: span 2;
  aspect-ratio: 375/400;
}
.wellness-mosaic__tile--half {
  grid-column: span 3;
  aspect-ratio: 573/400;
}

/* Divider list — confirmed node 22:8873 (Group 3091, 598x649)
   Each row is right-aligned text with a full-width 1px rule beneath it. Figma pitch is
   ~136px for a one-line row: 29px of text, an 18px gap to the rule, then ~89px of air
   before the next row's text. That 89px is generous by design, so it is expressed as a
   clamp rather than a fixed value — at mobile widths a literal 89px would strand the
   list over two screens. */
.wellness-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wellness-list__item {
  font-family: var(--ff-secondary);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--clr-primary-200);
  text-align: right;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--clr-primary-300);
}
.wellness-list__item + .wellness-list__item {
  margin-top: clamp(2.4rem, 6vw, 8.9rem);
}

/* Buttons — confirmed nodes 22:8864 ("מידע נוסף", x=1408) and 22:8861 ("להזמנה",
   x=1633), both 192x41 pills on the same baseline y=2654. Right-aligned as a pair under
   the list column. */
.wellness-actions {
  display: flex;
  justify-content: flex-start;
  gap: 3.3rem;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 6rem);
}
.wellness-actions .mybtn {
  min-width: 19.2rem;
  height: 4.1rem;
}

/* ---------- "למי זה מתאים?" — confirmed node 22:8895 ----------
   heading 22:8897 (y=2863), copy 22:8896 (y=2992, 652 wide), icon row 22:8898
   (y=3346, 652x84), carousel 22:9027 (y=2891). The text column sits at x=1162-1825 on
   the right; the carousel bleeds far off the left edge (x=-1431). */
.wellness-audience {
  padding: clamp(4rem, 8vw, 6.8rem) 0;
}
.wellness-audience__row {
  display: grid;
  /* RIGHT COLUMN FIRST, same correction as the workshop row above: track 1 is the
     rightmost in RTL and holds the TEXT (663px in Figma), not the carousel. Listed
     the other way round it gave the text 951px and the carousel 572px — inverted.
     The carousel bleeds off the left edge (x=-1431), so 1102 is its on-screen width. */
  grid-template-columns: minmax(0, 663fr) minmax(0, 1102fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: center;
  /* Same row-level gutter as the workshop block above. */
  padding-inline-start: clamp(1.8rem, 5vw, 9.5rem);
}
.wellness-audience {
  /* Third row on this page with the same shape, so the same grid-row pin applies. */
}
.wellness-audience__media {
  grid-column: 2; /* left in RTL */
  grid-row: 1;
  min-width: 0;
}
.wellness-audience__content {
  grid-column: 1; /* right in RTL */
  grid-row: 1;
}
.wellness-audience__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 5vw, 5.6rem) * var(--title-scale, 1));
  color: var(--clr-title);
  text-align: right;
  margin-bottom: 2.9rem; /* 2951 → 2992 minus the box padding */
}
.wellness-audience__desc {
  text-align: right;
  margin-inline-start: auto;
}
.wellness-audience__icons {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  align-items: flex-start;
  /* copy ends 3224 → icons 3346 */
  margin-top: clamp(3rem, 6vw, 5rem);
}
.wellness-audience__icon {
  width: 8rem;
  text-align: center;
  flex-shrink: 0;
  /* 13/10/2026 — top-aligned, so every icon sits on the same line even when a
     label wraps to 2 lines (centring pushed the 1-line items' icons down). */
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  display: flex;
}
.wellness-audience__icon svg {
  width: 4rem;
  height: 4rem;
  color: var(--clr-primary-200);
}
.wellness-audience__icon span {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--clr-primary-200);
}
/* Uploaded ACF icons render as <img> (em_image), not inline <svg> — same 4rem box. */
.wellness-audience__icon img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

/* Spa facility row under the hero (Figma 671:3106): 80px items on a 101px pitch
   (gap 21px), centred, 55px below the hero (hero ends 632 → row 687). */
.wellness-audience__icons.spa-hero-icons {
  justify-content: center;
  gap: 2.1rem;
  margin-top: 5.5rem;
}

/* Carousel — confirmed node 22:9027 (Group 2972): three images ~808x539, 810x540 and
   792x539, with two 26x26 arrows beneath at nodes 22:9031 / 22:9034. Same single-size
   arrow convention as the spa and hotel galleries, so those classes are reused rather
   than duplicated. */
.wellness-carousel {
  position: relative;
}
.wellness-carousel__gallery {
  width: 100%;
  overflow: hidden;
  contain: layout;
}
.wellness-carousel__gallery .swiper-slide {
  flex-shrink: 0;
  aspect-ratio: 808/539;
}
.wellness-carousel__gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wellness-carousel {
  /* .hotel-card__gallery-nav-btn is absolutely positioned by default (it overlays the
     hotel/spa galleries). Here the two arrows sit in a normal flex row beneath the
     images, so the --static modifier returns them to static flow. Defined here rather
     than in _home.scss so the shared component keeps its original behaviour untouched. */
}
.wellness-carousel .hotel-card__gallery-nav-btn--static {
  position: static;
  inset: auto;
}
.wellness-carousel { 
  /* Arrow row sits below the images (Figma y=3454 against images ending 3430).
     justify-content: flex-end, not space-between — space-between only separates
     MULTIPLE children; with the single arrow this section now uses it collapses to
     main-START, which in RTL is the RIGHT edge. flex-end is main-END = the LEFT edge,
     the same reasoning .treatment-carousel__nav-group already documents. */
}
.wellness-carousel__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2.4rem;
  padding-inline: 1.6rem;
}
/* 13/10/2026 — hotel spa: back + next arrows, one at each side. */
.wellness-carousel__nav--both {
  justify-content: space-between;
}

@media (max-width: 1299px) {
  .wellness-audience__icons {
    gap: 1rem;
  }
}
@media (max-width: 1199px) {
  .wellness-audience__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  /* Every two-column row collapses. The explicit grid-column values above exist only
     for the desktop grids — left in place at one column they would pin children to a
     column that no longer exists and open a blank first row. */
  .wellness-duo__row,
  .wellness-workshop-block__row,
  .wellness-audience__row {
    grid-template-columns: 1fr;
  }
  .wellness-duo__media--start,
  .wellness-duo__media--end,
  .wellness-workshop-block__mosaic-col,
  .wellness-workshop-block__list-col,
  .wellness-audience__media,
  .wellness-audience__content {
    grid-column: auto;
    /* The row pins must be released too, or every child resolves to the same
       single-column row-1 area and they render stacked on top of each other. */
    grid-row: auto;
  }
  .wellness-workshop-block__row,
  .wellness-audience__row {
    padding-inline-start: 0;
  }
  .wellness-duo__row {
    padding-inline: 2rem;
  }
  /* Images above their text once stacked, matching how the desktop rows read. */
  .wellness-audience__media {
    order: -1;
  }
}
@media (max-width: 767.98px) {
  .wellness-hero {
    height: 42rem;
  }
  .wellness-hero__title {
    font-size: calc(clamp(4.8rem, 14vw, 8rem) * var(--title-scale, 1));
  }
  .wellness-quote {
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    margin-top: 3.2rem;
  }
  /* The 6-column mosaic becomes 2 columns: the three top tiles and the two wide ones
     all span one half each, which keeps a tidy grid instead of a 1-wide column of
     very different aspect ratios. */
  .wellness-mosaic {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
  .wellness-mosaic__tile--third,
  .wellness-mosaic__tile--half {
    grid-column: span 1;
    aspect-ratio: 1/1;
  }
  /* Last tile of an odd count spans the full width so no gap is left hanging. */
  /* 13/10/2026 — counted on the mosaic's children, not inside the WebP <picture>. */
  .wellness-mosaic > .wellness-mosaic__tile:last-child:nth-child(odd),
  .wellness-mosaic > :last-child:nth-child(odd) > .wellness-mosaic__tile {
    grid-column: span 2;
    aspect-ratio: 573/400;
  }
  .wellness-audience__icons {
    justify-content: center;
    gap: 1.6rem 2rem;
  }
  /* 13/10/2026 — "למי זה מתאים?" on mobile: side padding so the copy never
     touches the screen edges, title centred. */
  .wellness-audience__content {
    padding-inline: 2.4rem;
  }
  .wellness-audience__title {
    text-align: center;
  }
  /* 13/10/2026 — full-width buttons keep a side gutter and sit closer together. */
  .wellness-actions {
    gap: 1.2rem;
    padding-inline: 2.4rem;
  }
  .wellness-actions .mybtn {
    min-width: 100%;
  }
}
/* =========================================================
   GALLERY PAGE — confirmed Figma node 22:7867 (1920 x 6428)

   Page order as drawn (hidden layers excluded — noted in gallery.shtml):
     hero 632px  →  quote  →  three photo groups (חדרים / ספא / המלון)
     →  closing quote  →  "Breath. With. Us." banner  →  footer

   Every measurement below is taken from the node's own tile coordinates rather than
   estimated. Three facts fell out of that and drive the whole layout:

     1. The gutter is 16px EVERYWHERE — between tiles and between rows alike. Not one
        row deviates, so it is a single token rather than a per-row value.
     2. Rows 1 and 2 of every group are 391px tall; row 3 is always 415px.
     3. Row 3's column ratio (695 : 623 : 623) is IDENTICAL in all three groups, so it
        is defined once and shared. Only rows 1 and 2 differ per group.

   Tiles deliberately bleed past both page edges (e.g. x=-49, right edge 1925 on a
   1920 canvas), so the rows are full-width and are NOT wrapped in .container.
   ========================================================= */
/* 16px gutter, and row heights as a share of the 1920px design width:
   391 / 1920 = 20.4vw   and   415 / 1920 = 21.6vw
   Expressed as vw so the tiles keep their drawn proportions at any width, with a
   clamp floor so they never collapse on phones and a ceiling so they stop growing
   past the design's own pixel height on very wide screens. */
.gallery-page {
  --gallery-gap: 1.6rem;
  --gallery-row-h: clamp(14rem, 20.4vw, 39.1rem);
  --gallery-row-h-tall: clamp(15rem, 21.6vw, 41.5rem);
}

/* ---------- Hero — confirmed node 22:7871 (1922x632), title 22:7890 ---------- */
.gallery-hero {
  position: relative;
  height: 63.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--clr-neutral-100);
  /* video is listed alongside img so a background clip can be dropped in later without
     the silent breakage that hit the wellness hero, where only `img` was styled. */
}
.gallery-hero video,
.gallery-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.gallery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.gallery-hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--ff-primary);
  font-weight: 500;
  /* Figma title box is 1199x194 for one line — the same --fs-900 step the other
     page heroes use, but "Boutique Moments" is far longer than "Spa" or
     "Wellness", so it needs a lower floor to avoid wrapping on narrow screens. */
  font-size: calc(var(--fs-900) * var(--title-scale, 1));
  line-height: 1;
}

/* ---------- Quotes — confirmed nodes 22:7967 (y=687) and 22:7968 (y=5101) ----------
   Both boxes are 1357x48, i.e. the same 40px italic serif used on every other page.
   55px below the hero (632 → 687) for the opening one. */
.gallery-quote {
  max-width: 135.7rem;
  margin-inline: auto;
  padding-inline: 2rem;
  text-align: center;
  font-family: var(--ff-primary);
  font-style: italic;
  font-weight: 500;
  font-size: 4rem;
  color: var(--clr-primary-400);
}
.gallery-quote--intro {
  margin-top: 5.5rem;
}
.gallery-quote {
  /* Closing quote: last tile row ends 4998 → quote 5101 = 103px, then the banner
     starts at 5223, i.e. 74px after the quote's 48px box. */
}
.gallery-quote--outro {
  margin-top: clamp(4rem, 8vw, 10.3rem);
  margin-bottom: clamp(3rem, 6vw, 7.4rem);
}

/* ---------- Photo group — repeats 3x (חדרים / ספא / המלון) ---------- */
.gallery-group {
  padding-top: clamp(4rem, 8vw, 9.5rem);
}
.gallery-group__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 400;
  /* 88px box → ~56px type, the step shared with every other section title */
  font-size: calc(clamp(3.2rem, 5vw, 5.6rem) * var(--title-scale, 1));
  color: var(--clr-title);
  text-align: center;
  /* heading bottom 885 → first tile row 905 */
  margin-bottom: 2rem;
}
.gallery-group__row {
  display: grid;
  gap: var(--gallery-gap);
}
.gallery-group__row + .gallery-group__row {
  margin-top: var(--gallery-gap);
}
/* 06/10/2026 — overlap fix. --gallery-row-h was defined but never applied, so
   rows 1-2 grew to each photo's natural height (750-1040px at 1920), and row 3
   had a height but an `auto` row track, so its tiles (height:100% of a track
   sized by the image) rendered ~1000px inside a 411px box and spilled over the
   next group. Each row now has its band height AND a single track bound to it
   (minmax(0,1fr) — the 0 floor stops the image's intrinsic height from pushing
   the track open); object-fit:cover on the tile crops instead of stretching. */
.gallery-group__row {
  height: var(--gallery-row-h);
  grid-template-rows: minmax(0, 1fr);
  /* Row 3 of every group is the taller 415px band */
}
.gallery-group__row--tall {
  height: var(--gallery-row-h-tall);
}
.gallery-group__tile {
  min-width: 0;
  min-height: 0;
}
.gallery-group {
  /* Column ratios from the Figma tile widths — but listed in RTL VISUAL order,
     RIGHT COLUMN FIRST.

     This is the thing to get right here. The page is dir="rtl", so grid track 1 is the
     RIGHTMOST column, not the leftmost. Transcribing Figma's coordinates in their
     natural left-to-right reading order mirrors every row: the wide tile the design
     puts on the LEFT lands on the right and the whole group reads backwards.
     Each list below is therefore the Figma sequence REVERSED. The comment on each rule
     keeps the original left-to-right figures so they can still be matched against the
     node coordinates without re-measuring. */
  /* חדרים row 1 — drawn L→R as 675 : 1231 (nodes 22:7971 / 22:7972) */
}
.gallery-group__row--rooms-top {
  grid-template-columns: 1231fr 675fr;
}
.gallery-group {
  /* חדרים row 2 — drawn L→R as 675 : 553 : 369 : 277 (nodes 22:7973-22:7976) */
}
.gallery-group__row--rooms-mid {
  grid-template-columns: 277fr 369fr 553fr 675fr;
}
.gallery-group {
  /* ספא row 1 — drawn L→R as 675 : 1220 (nodes 22:7994 / 22:7995) */
}
.gallery-group__row--spa-top {
  grid-template-columns: 1220fr 675fr;
}
.gallery-group {
  /* ספא row 2 — drawn L→R as 675 : 553 : 369 : 369 (nodes 22:7996-22:7999) */
}
.gallery-group__row--spa-mid {
  grid-template-columns: 369fr 369fr 553fr 675fr;
}
.gallery-group {
  /* המלון row 1 — drawn L→R as 758 : 725 : 488 (nodes 22:7982-22:7984).
     The only group whose first row carries three tiles rather than two. */
}
.gallery-group__row--hotel-top {
  grid-template-columns: 488fr 725fr 758fr;
}
.gallery-group {
  /* המלון row 2 — drawn L→R as 702 : 553 : 369 : 260 (nodes 22:7985-22:7988) */
}
.gallery-group__row--hotel-mid {
  grid-template-columns: 260fr 369fr 553fr 702fr;
}
.gallery-group {
  /* Row 3 — drawn L→R as 695 : 623 : 623, the same in all three groups
     (nodes 22:7977-22:7979, 22:8000-22:8002, 22:7989-22:7991) */
}
.gallery-group__row--trio {
  grid-template-columns: 623fr 623fr 695fr;
}
.gallery-group {
  /* Tiles fill their grid cell exactly; the cell's own width comes from the ratios
     above and its height from the row, so no per-tile aspect-ratio is needed and the
     drawn proportions survive at every viewport. */
}
.gallery-group__tile {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---------- Responsive ----------
   The ratios above are meaningful at desktop, where a 1920-wide row can carry a 260px
   tile legibly. Below that they stop working: the narrowest tile in the hotel row would
   fall under 100px on a tablet. Rows therefore re-flow to an even grid rather than
   being squeezed — 3 columns on tablet, 2 on phones — and heights loosen to a fixed
   band since the vw-derived height no longer matches the new column count. */
@media (max-width: 991.98px) {
  .gallery-group__row {
    grid-template-columns: repeat(3, 1fr) !important;
    height: auto;
    grid-template-rows: none; /* release the desktop single track so auto-rows apply */
    grid-auto-rows: clamp(16rem, 26vw, 24rem);
  }
  /* Orphan handling for the 3-column reflow. Row tile counts are 2, 4 and 3, and only
     the 3-tile row divides evenly — the others were leaving holes:
       · the 4-tile row (חדרים/ספא/המלון row 2) dropped its 4th tile onto a second
         line with TWO empty cells beside it
       · the 2-tile row (row 1 of groups 1 and 2) left ONE empty cell
     Both now stretch the trailing tile to fill the line. The phone breakpoint below
     already had the equivalent rule for its 2-column grid; the tablet one did not.

     nth-child arithmetic rather than fixed counts so this keeps working if a group
     gains or loses a tile: a last child at 3n+1 is alone on its line, one at 3n+2 has
     a single neighbour. */
}
/* 13/10/2026 — counted on the ROW's children. A tile may sit inside the
   display:contents WebP <picture>, where it is always child #2 — that made EVERY
   tile match and stretch into a long wide strip. Tablet-only now, so these spans
   no longer leak into the 2-column phone grid below (a span 3 there opened an
   extra column). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery-group__row > .gallery-group__tile:last-child:nth-child(3n+1),
  .gallery-group__row > :last-child:nth-child(3n+1) > .gallery-group__tile {
    grid-column: span 3;
  }
  .gallery-group__row > .gallery-group__tile:last-child:nth-child(3n+2),
  .gallery-group__row > :last-child:nth-child(3n+2) > .gallery-group__tile {
    grid-column: span 2;
  }
}
@media (max-width: 767.98px) {
  .gallery-hero {
    height: 42rem;
  }
  .gallery-hero__title {
    /* "Boutique Moments" is two words and much longer than the other hero titles,
       so it needs a smaller floor here than they do or it wraps mid-word. */
    font-size: calc(clamp(3.6rem, 10vw, 6rem) * var(--title-scale, 1));
  }
  .gallery-quote {
    font-size: clamp(2rem, 5.5vw, 3.2rem);
  }
  .gallery-group__row {
    grid-template-columns: repeat(2, 1fr) !important;
    height: auto;
    grid-template-rows: none;
    grid-auto-rows: clamp(14rem, 38vw, 20rem);
  }
  /* An odd tile left alone on the final line spans the full width instead of leaving
     a hole beside it. */
  .gallery-group__row > .gallery-group__tile:last-child:nth-child(odd),
  .gallery-group__row > :last-child:nth-child(odd) > .gallery-group__tile,
  /* Row 1 hides its first tile on phones (d-none d-md-block), so the second one is
     alone on the line — full width instead of half with a hole beside it. */
  .gallery-group__row > .d-none:first-child + .gallery-group__tile:last-child,
  .gallery-group__row > :first-child:has(> .d-none) + :last-child > .gallery-group__tile {
    grid-column: span 2;
  }
}
/* Zamarin hotel page — node 22:4955 */
/* =========================================================
   ROOM QUICK-NAV — strip under the hero on zamarin-rooms
   Anchors to the six room sections. Scrolls horizontally on
   narrow screens rather than wrapping, so the row stays one line.
   ========================================================= */
.rooms-nav {
  border-block: 1px solid var(--clr-primary-400);
}

.rooms-nav__list {
  list-style: none;
  margin: 0;
  padding-block: 1.8rem;
  padding-inline: clamp(2rem, 4vw, 4.8rem);
  gap: clamp(2rem, 3vw, 4rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.rooms-nav__list::-webkit-scrollbar {
  display: none;
}

.rooms-nav__link {
  display: block;
  white-space: nowrap;
  font-family: var(--ff-primary);
  font-size: var(--fs-250);
  color: var(--clr-primary-400);
  text-decoration: none;
  padding-block: 0.4rem;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.rooms-nav__link:hover,
.rooms-nav__link:focus-visible {
  opacity: 0.65;
  color: var(--clr-primary-400);
}

/* Set by js/rooms-nav.js as each section passes the viewport */
.rooms-nav__link.is-active {
  border-bottom-color: var(--clr-primary-400);
}

@media (prefers-reduced-motion: reduce) {
  .rooms-nav__link {
    transition: none;
  }
}
.zamarin-page {
  --zamarin-title: clamp(4rem, 6.4vw, 12rem);
  --zamarin-title-sm: clamp(3.4rem, 5.2vw, 10rem);
  --zamarin-btn-w: 21.5rem;
  --zamarin-btn-h: 4.3rem;
}

/* Hero — 1922x933 (node 22:4959) */
.zamarin-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: clamp(3rem, 5vw, 6rem);
  text-align: center;
  padding-block: clamp(9rem, 12vw, 14rem) clamp(4rem, 8vw, 8rem);
}
.zamarin-hero .hero__logo-wrap,
.zamarin-hero .hero__actions-wrap {
  position: static;
  inset: auto;
  transform: none;
  width: auto;
  max-width: 100%;
}
.zamarin-hero__logo {
  width: 58rem !important;
  max-width: 78vw !important;
}
.zamarin-hero__tagline {
  margin: 0 auto clamp(2.4rem, 3.5vw, 7rem);
  /* 13/10/2026 — side padding so the sentence never runs to the screen edges. */
  padding-inline: clamp(2.4rem, 5vw, 4rem);
  font-size: clamp(var(--fs-300), 4vw, var(--fs-500));
  font-family: var(--ff-primary);
}

/* Section scaffolding */
.zamarin-section {
  padding-top: clamp(4rem, 7vw, 8.6rem);
  overflow-x: clip;
}
.zamarin-section .spa-facility__footer {
  align-items: center;
  justify-content: space-between;
}
.zamarin-section .spa-facility__footer > *:not(.spa-facility__nav) {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin-top: 0;
  text-align: center;
}
/* 13/10/2026 — hotel spa facilities: the quote drops to its own line under
   the arrows on every screen size (arrows stay at the two sides above it). */
.zamarin-section .spa-facility__footer--stacked {
  flex-wrap: wrap;
}
.zamarin-section .spa-facility__footer--stacked > *:not(.spa-facility__nav) {
  order: 1;
  flex-basis: 100%;
  margin-top: 1rem;
}
.zamarin-section .deals__card-panel {
  /* 13/10/2026 — the hotel's main colour (term --accent), was fixed --clr-primary-400. */
  background: var(--accent, var(--clr-primary-400));
  color: var(--clr-neutral-100);
}
.zamarin-section .deals__card-title, .zamarin-section .deals__card-subtitle, .zamarin-section .deals__card-price {
  color: var(--clr-neutral-100);
}
.zamarin-section .deals__card-divider {
  border-color: var(--clr-neutral-100);
}
/* Z14 (20/08/2026) — inverse hover for the "הזמינו עכשיו" CTA on the DARK deals
   panel. Only .zamarin-section makes .deals__card-panel dark (background:
   --clr-primary-400, just above); the base panel is #fff so its base .mybtn:hover
   reads fine and is left alone. Here the base .mybtn:hover (l.292 — transparent
   fill + color:var(--accent,…)) painted accent text on the dark panel, and on
   Zamarin --accent IS --clr-primary-400 = the panel's own colour, so the label
   vanished completely. Same class of bug the header pill (Z13.2), .hero__actions
   and .spa__panel each hit: a hover authored for a light background applied on its
   opposite. Invert like those do — white fill, accent text, white border. The
   panel bg is a FIXED token (not --accent), so white-fill + accent-text is legible
   for all four hotel accents (N1 — Ron eyeballs each strip). (0,4,0) beats base
   .mybtn:hover (0,2,0), so no !important. Rest state is unchanged: the resting pill
   reads via its white border + white text even where the accent fill matches the
   panel on Zamarin (F3 — a cosmetic blend, not a legibility failure; not redesigned
   this round). */
.zamarin-section .deals__card-panel .mybtn:hover,
.zamarin-section .deals__card-panel .mybtn:focus-visible {
  background-color: var(--clr-neutral-100);
  color: var(--accent, var(--clr-primary-100));
  border-color: var(--clr-neutral-100);
}
.zamarin-section__title {
  font-family: var(--ff-primary);
  font-size: calc(var(--zamarin-title) * var(--title-scale, 1));
  line-height: 100%;
  color: var(--clr-title);
  text-align: center;
  margin-bottom: 0;
}
.zamarin-section__title--sm {
  font-size: calc(var(--zamarin-title-sm) * var(--title-scale, 1));
}
/* Widened 06/10/2026 (was 53.1rem / 67.8rem — read too narrow). */
.zamarin-section__desc {
  max-width: 69rem;
  margin: 2rem auto 0;
  text-align: center;
}
.zamarin-section__desc--wide {
  max-width: 86rem;
}
.zamarin-section__subtitle {
  font-family: var(--ff-secondary);
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--clr-title);
  text-align: center;
  margin-top: clamp(2rem, 6vw, 3rem);
}
.zamarin-section__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.4rem, 4vw, 3.7rem);
}
.zamarin-section__actions .mybtn {
  min-width: var(--zamarin-btn-w);
  height: var(--zamarin-btn-h);
}
.zamarin-section__deals {
  /* padding-BLOCK only, same reason as .zamarin-spa: this section's grid already
     sits inside .container, so inline padding here narrows it a second time and
     the cards stop lining up with every other .container section on the page. */
  padding-block: clamp(3rem, 7vw, 8rem);
}

/* Peek carousels — rooms + spa */
.zamarin-carousel {
  position: relative;
}
.zamarin-carousel__track {
  width: 100%;
  overflow: hidden;
  contain: layout;
}
.zamarin-carousel .swiper-slide {
  flex-shrink: 0;
}
.zamarin-carousel .swiper-slide img {
  display: block;
  width: 100%;
  /* 13/10/2026 — one shape for every slide (the video's 500/539). The photos
     used their own ratio, so hotels whose spa photos differ (Casa) got a ragged
     row; cover crops each photo into the shared frame. */
  height: auto;
  aspect-ratio: 500/539; 
  -o-object-fit: cover;
     object-fit: cover;
}
.zamarin-carousel--auto .swiper-slide {
  aspect-ratio: 500/539;
}
.zamarin-carousel .zamarin-slide-video {
  /* aspect-ratio, NOT height: 100%. The slide has no defined height of its own — on the
     image slides the photo's intrinsic ratio sets it — so height:100% resolved against an
     auto-height parent and the video fell back to its intrinsic 16:9, rendering shorter
     than every image beside it. 500/539 is the images' own ratio. */
  display: block;
  width: 100%;
  aspect-ratio: 500/539;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  background-color: var(--clr-primary-100);
}
.zamarin-carousel__nav {
  display: flex;
  /* flex-END, not space-between. space-between only separates MULTIPLE children;
     with the single arrow this carousel uses it collapses to main-START, which in
     RTL is the RIGHT edge — the opposite side from the design. flex-end is main-end
     = the LEFT edge, the side the carousel bleeds toward and the side the arrow
     points. */
  justify-content: flex-end;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.4rem;
  padding-inline: clamp(1.6rem, 4vw, 5.4rem);
  /* Self-contained styling so these buttons do not have to borrow
     .hotel-card__gallery-nav-btn, which is absolutely positioned for overlaying a
     gallery and would drop straight out of this flex row. 2.6rem matches that
     component's size, so the arrows stay consistent with every other gallery on
     the site. */
}
.zamarin-carousel__nav button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--clr-primary-400);
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.zamarin-carousel__nav button svg {
  display: block;
  width: 100%;
  height: 100%;
}
.zamarin-carousel__nav button:hover, .zamarin-carousel__nav button:focus-visible {
  opacity: 0.65;
}
.zamarin-carousel__nav button {
  /* Swiper adds this at the end of a non-looping track. */
}
.zamarin-carousel__nav button.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/* 13/10/2026 — the prev arrow exists for the infinite mobile slider only. */
@media (min-width: 768px) {
  .zamarin-carousel__nav .zamarin-carousel__prev {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .zamarin-carousel__nav {
    justify-content: space-between;
  }
}
/* 18/10/2026 (client): the spa-experience slider loops on desktop too
   (zamarin.js), so it gets both arrows there, laid out like mobile. */
@media (min-width: 768px) {
  .zamarin-spa .zamarin-carousel__nav {
    justify-content: space-between;
  }
  .zamarin-spa .zamarin-carousel__nav .zamarin-carousel__prev {
    display: grid;
  }
}

/* Feature icon rows */
.zamarin-features {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 4rem);
  flex-wrap: wrap;
  margin-top: clamp(2.4rem, 4vw, 3.3rem);
}
.zamarin-features__item {
  width: 8rem;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.zamarin-features svg {
  width: 3.4rem;
  height: 3.4rem;
  color: var(--clr-primary-200);
}
.zamarin-features span {
  display: block;
  margin-top: 0.9rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--clr-primary-200);
}

/* Spa split section */
.zamarin-spa {
  padding: clamp(3rem, 7vw, 8rem) 0;
}
.zamarin-spa__row {
  display: grid;
  grid-template-columns: minmax(0, 558fr) minmax(0, 1199fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: center;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-inline-start: clamp(1.8rem, 5vw, 10.3rem);
}
.zamarin-spa__media {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.zamarin-spa__content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  text-align: center;
  padding-left: 1rem;
}
.zamarin-spa__desc {
  max-width: 55.8rem;
  margin-inline-end: auto;
}
.zamarin-spa .zamarin-features {
  gap: clamp(1.6rem, 1vw, 3rem);
}
/* Desktop: spa icons stay on one line (items shrink instead of wrapping);
   below 992px the base flex-wrap takes over again. */
@media (min-width: 992px) {
  .zamarin-spa .zamarin-features {
    flex-wrap: nowrap;
  }
  .zamarin-spa .zamarin-features__item {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 8rem;
  }
}
.zamarin-spa__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.4rem, 4vw, 5.9rem);
}
.zamarin-spa__actions .mybtn {
  min-width: var(--zamarin-btn-w);
  height: var(--zamarin-btn-h);
}

/* Card grids — deals + area */
/* 14/10/2026 — flex-wrap instead of repeat(3,1fr) so a short row (1-2 cards,
   or the last row) sits CENTRED, same treatment as .deals__grid. Card width
   reproduces the grid column: (100% - (cols-1) * col-gap) / cols. */
.zamarin-grid {
  --zg-cols: 3;
  --zg-row-gap: clamp(2.4rem, 5vw, 10.9rem);
  --zg-col-gap: clamp(2rem, 5.7vw, 10.9rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zg-row-gap) var(--zg-col-gap);
  margin-top: clamp(3rem, 5vw, 5rem);
}
.zamarin-grid > * {
  flex: 0 0 calc((100% - (var(--zg-cols) - 1) * var(--zg-col-gap)) / var(--zg-cols));
  min-width: 0;
}
.zamarin-grid--area {
  --zg-row-gap: clamp(2.4rem, 5vw, 9.5rem);
  --zg-col-gap: clamp(2rem, 4.8vw, 9.2rem);
}

/* Area card */
.zamarin-area-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.zamarin-area-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 535/278;
  -o-object-fit: cover;
     object-fit: cover;
}
.zamarin-area-card__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  background-color: var(--clr-neutral-100);
  border-radius: 4rem 0 0 0;
  margin-top: -3.6rem;
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 10.6rem;
  padding: 1.5rem 2.2rem;
}
.zamarin-area-card__panel > *:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.zamarin-area-card__title {
  display: block;
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 500;
  line-height: 100% !important;
  font-size: calc(2rem * var(--title-scale, 1));
  color: var(--clr-title);
  margin-bottom: 0.6rem;
  /* Long names break within the block instead of forcing the row wider. */
  overflow-wrap: anywhere;
}
.zamarin-area-card__distance {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  color: var(--clr-primary-200);
}
.zamarin-area-card__distance svg {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
}
.zamarin-area-card__cta {
  flex-shrink: 0;
}
.zamarin-area-card__cta .mybtn {
  min-width: 14.2rem;
  height: 4rem;
  font-size: 1.5rem;
}

/* Wellness photo strip */
.zamarin-strip {
  margin-top: clamp(3rem, 5vw, 7.1rem);
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 1.8vw, 3.4rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.zamarin-strip::-webkit-scrollbar {
  display: none;
}
/* 13/10/2026 — strip-slider.js turns the strip into a looping Swiper (all sizes). */
.zamarin-strip.zamarin-strip--slider {
  display: block;
  overflow: hidden;
}
.zamarin-strip--slider .swiper-wrapper {
  align-items: center;
}
.zamarin-strip--slider .zamarin-strip__tile {
  /* Each photo keeps its own ratio/height (the design); size comes from how
     many slides are in view (strip-slider.js). */
  width: 100%;
  height: auto;
}
/* 18/10/2026 (client) — on mobile one slide is in view at a time, and mixed
   heights (≈207–530px at 390) looked broken: one 4:5 crop for every photo. */
@media (max-width: 767.98px) {
  .zamarin-strip--slider .zamarin-strip__tile {
    aspect-ratio: 4 / 5;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.zamarin-strip__tile {
  display: block;
  flex-shrink: 0;
  scroll-snap-align: center;
  height: 100%;
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
} 

/* FAQ */
/* 06/10/2026: the FAQ alone uses Bootstrap's ORIGINAL .container widths
   (540/720/960/1140/1320px) instead of the theme's wide 168rem override at
   l.~1550. (0,2,0) beats that (0,1,0) rule at every breakpoint. Side padding
   stays the theme's (0 at desktop) so the text edge matches the heading. */
/* Spa/contact FAQ with "ללא וידאו ליד השאלות" (.faq__row--solo) takes the same widths. */
.zamarin-faq > .container,
.faq > .container:has(.faq__row--solo) {
  max-width: 100%;
}
@media (min-width: 576px) {
  .zamarin-faq > .container,
  .faq > .container:has(.faq__row--solo) { max-width: 540px; }
}
@media (min-width: 768px) {
  .zamarin-faq > .container,
  .faq > .container:has(.faq__row--solo) { max-width: 720px; }
}
@media (min-width: 992px) {
  .zamarin-faq > .container,
  .faq > .container:has(.faq__row--solo) { max-width: 960px; }
}
@media (min-width: 1200px) {
  .zamarin-faq > .container,
  .faq > .container:has(.faq__row--solo) { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .zamarin-faq > .container,
  .faq > .container:has(.faq__row--solo) { max-width: 1320px; }
}
.zamarin-faq__row {
  display: grid;
  /* 06/10/2026: single full-container column — the video column was removed
     from template-hotel-home.php (was minmax(0, 811fr) minmax(0, 935fr)). */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: start;
  margin-top: clamp(3rem, 5vw, 4.7rem);
}
.zamarin-faq__media {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
}
.zamarin-faq__media img {
  display: block;
  width: 100%;
  aspect-ratio: 935/565;
  -o-object-fit: cover;
     object-fit: cover;
}
.zamarin-faq__list {
  grid-column: 1;
  grid-row: 1;
  --bs-accordion-bg: var(--clr-neutral-100);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--clr-neutral-100);
  --bs-accordion-active-color: var(--clr-primary-100);
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Responsive */
@media (max-width: 1440px) {
  .zamarin-spa__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* Responsive */
@media (max-width: 991.98px) {
  .zamarin-spa__row,
  .zamarin-faq__row {
    grid-template-columns: 1fr;
  }
  .zamarin-spa__media,
  .zamarin-spa__content,
  .zamarin-faq__media,
  .zamarin-faq__list {
    grid-column: auto;
    /* The row pins must be released too, or both children resolve to the same
       single-column row-1 area and render stacked on top of each other. */
    grid-row: auto;
  }
  .zamarin-spa__content {
    /* Centred once the carousel is above rather than beside it — a hard right edge
       reads as broken with nothing to align to. */
    text-align: center;
  }
  .zamarin-spa__desc {
    margin-inline: auto;
  }
  .zamarin-spa .zamarin-features,
  .zamarin-spa__actions {
    justify-content: center;
  }
  .zamarin-spa__media,
  .zamarin-faq__media {
    order: -1;
  }
  .zamarin-grid {
    --zg-cols: 2;
  }
}
@media (max-width: 767.98px) {
  .zamarin-hero {
    height: auto; /* 11/10/2026: was 62rem — full screen less the contact bar now (see .mobile-contact-bar block) */
    justify-content: center;
    gap: clamp(2.4rem, 8vw, 6rem);
    padding-block: 8rem;
  } 
  .zamarin-grid {
    --zg-cols: 1;
  }
  /* 13/10/2026 — all icons always visible, 3 per row (2 on very narrow phones),
     centred — a short last row sits in the middle — with side padding so the
     row never touches the screen edges. */
  .zamarin-features,
  .zamarin-spa .zamarin-features {
    justify-content: center;
    gap: 2rem 1.6rem;
    padding-inline: 2.4rem;
  }
  .zamarin-features__item {
    width: calc((100% - 2 * 1.6rem) / 3);
  }
  @media (max-width: 379.98px) {
    .zamarin-features__item {
      width: calc((100% - 1.6rem) / 2);
    }
  }
  /* Rooms: "בכל החדרים ניתן למצוא:" drops to its own line under the arrows. */
  .zamarin-section .spa-facility__footer {
    flex-wrap: wrap;
  }
  .zamarin-section .spa-facility__footer > *:not(.spa-facility__nav) {
    order: 1;
    flex-basis: 100%;
  }
  .zamarin-area-card__panel {
    flex-direction: column;
    align-items: flex-start;
  }
  /* F4 (18/08/2026) — the wellness/area descs render OUTSIDE .container by
     design, so on a phone the capped-measure text ran to the viewport edge.
     Mobile-only side padding; desktop measure (max-width cap) untouched. */
  .zamarin-section__desc {
    padding-inline: 1.8rem;
  }
}
/* =========================================================
   TREATMENT MENU — zamarin-spa.shtml
   3-up grid of treatment cards: icon, title, copy, then a price band pinned to the
   card's bottom edge so the tiers line up across every card in a row.
   ========================================================= */
.zamarin-treatments__actions {
  display: flex;
  justify-content: center;
  margin-block: clamp(2rem, 3vw, 3.2rem) clamp(3rem, 5vw, 5.6rem);
}
/* 18/10/2026 (client): a short last row is CENTRED — flex-wrap with fixed
   column widths instead of grid. Same columns (3 / 2 / 1 via --tr-cols), same
   gaps; cards in a row still stretch to one height (align-items: stretch). */
.zamarin-treatments__grid {
  --tr-cols: 3;
  --tr-gap: clamp(2.4rem, 4vw, 6.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(3rem, 5vw, 7rem) var(--tr-gap);
}
.zamarin-treatments__grid > * {
  flex: 0 0 calc((100% - (var(--tr-cols) - 1) * var(--tr-gap)) / var(--tr-cols));
  min-width: 0;
}

.zamarin-treatment {
  /* Flex column so __divider + __tiers can be pushed to the bottom with an auto
     margin — descriptions vary from one line to five, and without this the price
     bands would sit at a different height in every card of a row. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.zamarin-treatment__icon,
.zamarin-treatment > svg:first-child { /* 11/10/2026: the built-in line-art glyphs are bare <svg>s without the class — same gap to the title */
  display: block;
  color: var(--clr-primary-400);
  margin-bottom: 1.6rem;
}
.zamarin-treatment__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 700;
  font-size: calc(1.7rem * var(--title-scale, 1));
  line-height: 100% !important;
  color: var(--clr-title);
  margin: 0 0 1rem;
}
.zamarin-treatment__desc {
  font-family: var(--ff-secondary);
  font-size: 1.35rem;
  line-height: 1.65;
  color: rgba(60, 60, 67, 0.8);
  margin: 0;
  max-width: 34rem;
}
.zamarin-treatment {
  /* margin-top: auto is the load-bearing part — it absorbs the difference in copy
     length so every card's price band starts on the same line. */
}
.zamarin-treatment__meta {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  color: var(--clr-primary-400);
  margin-top: auto;
  padding: 1rem 0;
}
.zamarin-treatment__divider {
  width: 100%;
  border: 0;
  border-block-start: 1px solid rgba(24, 39, 75, 0.14);
  margin: 1.2rem 0 0;
  opacity: 1;
}
.zamarin-treatment__tiers {
  display: flex;
  width: 100%;
  margin-top: 1.2rem;
  /* F7 (18/08/2026) — pull the tier columns closer than the full card width.
     width:100% stays as the shrink basis; max-inline-size caps it ~15% tighter
     than the current ~517px render. 44rem is a starting value for Ron to tune.
     The <=575.98px block (l.~4890) only sets flex-basis on the CHILD tier, not a
     width on this container, so there is no conflict — this cap never engages on
     a phone (card width < 44rem there). */
  max-inline-size: 44rem;
  margin-inline: auto;
}
.zamarin-treatment {
  /* flex: 1 with min-width: 0 shares the row evenly and lets the columns shrink
     rather than forcing the card wider than its grid track. */
}
.zamarin-treatment__tier {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--ff-secondary);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--clr-primary-400);
}
.zamarin-treatment__price {
  color: rgba(60, 60, 67, 0.7);
}

@media (max-width: 991.98px) {
  .zamarin-treatments__grid {
    --tr-cols: 2;
  }
}
@media (max-width: 575.98px) {
  .zamarin-treatments__grid {
    --tr-cols: 1;
  }
  /* Four tiers across a phone is ~70px each; wrapping to two rows of two keeps the
     figures legible instead of breaking "90 דקות" mid-phrase. */
  .zamarin-treatment__tiers {
    flex-wrap: wrap;
    row-gap: 1.2rem;
  }
  .zamarin-treatment__tier {
    flex: 1 1 50%;
  }
}
/* =========================================================
   GIFT CARD PAGE — zamarin-gift-card.shtml
   Horizontal voucher card: copy on the inline START (right in RTL), photo on the
   inline END. Replaces the vertical .deals__card this page was cloned from.
   ========================================================= */
.zamarin-deal-card {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  background-color: var(--clr-neutral-100);
  border-radius: 3rem 0 0 0;
  overflow: hidden;
  box-shadow: 0 1rem 1.6rem rgba(24, 39, 75, 0.08);
}
.zamarin-deal-card__media {
  /* grid-row on BOTH children, not just grid-column. Auto-placement is sparse and
     never backtracks: __body comes first in the DOM and takes column 2, leaving
     the cursor there, so __media's request for column 1 cannot fit in row 1 and
     drops to row 2 — the photo would stack under the copy instead of sitting
     beside it. Same trap already fixed in .zamarin-spa__row and .zamarin-faq__row. */
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.zamarin-deal-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* No aspect-ratio: the photo fills whatever height the copy column establishes,
     so both sides always finish flush however the text wraps. */
  -o-object-fit: cover;
     object-fit: cover;
}
.zamarin-deal-card__body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.8rem, 2.2vw, 2.8rem);
  text-align: right;
}
.zamarin-deal-card__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 700;
  font-size: calc(clamp(1.7rem, 1.3vw, 2rem) * var(--title-scale, 1));
  line-height: 100% !important;
  color: var(--clr-title);
  margin: 0;
}
.zamarin-deal-card {
  /* Sits between the copy and the divider, aligned to the inline start (right in RTL).
     Omitted entirely on the monetary voucher — that card's amount is chosen by the
     visitor, so a fixed figure there would be wrong rather than merely missing. */
}
.zamarin-deal-card__price {
  font-family: var(--ff-secondary);
  font-weight: 700;
  font-size: clamp(2rem, 1.6vw, 2.4rem);
  line-height: 1;
  color: var(--clr-primary-400);
  margin: 0;
  /* Pushes the divider, features and footer down to the card's bottom edge, so
     those rows align across every card whether or not a price is present. */
  margin-block-start: auto;
}
.zamarin-deal-card__divider {
  border: 0;
  border-block-start: 1px solid rgba(24, 39, 75, 0.12);
  margin: 0;
  opacity: 1;
}
.zamarin-deal-card__desc {
  font-family: var(--ff-secondary);
  font-size: 1.4rem;
  line-height: 1.6;
  color: rgba(60, 60, 67, 0.85);
  margin: 0;
  /* Pushes everything below it to the card's bottom. On the monetary card there is
     no price to carry the auto-margin, so this keeps the two card types aligned. */
  flex: 1 1 auto;
}
/* 12/10/2026 (client) — at most FOUR icons per row: the list wraps and each
   item is a quarter of the row (minus the gaps). Desktop: rows start at the
   inline start; mobile (<=767.98px, below) centres them. */
.zamarin-deal-card__features {
  --features-gap: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.6rem var(--features-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zamarin-deal-card__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* flex: 1 with min-width: 0 lets the three share the row evenly and shrink,
     rather than forcing the card wider than its grid track. */
  flex: 0 0 calc((100% - 3 * var(--features-gap)) / 4);
  min-width: 0;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--clr-primary-400);
  text-align: center;
}
.zamarin-deal-card__feature svg,
.zamarin-deal-card__feature img {
  inline-size: 2.2rem;
  block-size: 2.2rem;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
/* 12/10/2026 — ₪ on the same side as the deals cards ("₪550"). Woo prints the
   symbol in its own dir="auto" span, which in an RTL line isolates it and drops
   it on the RIGHT of the number; one LTR run puts it back on the left. */
.zamarin-deal-card__price .woocommerce-Price-amount {
  direction: ltr;
  unicode-bidi: isolate;
}
.zamarin-deal-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-block-start: 0.4rem;
}
.zamarin-deal-card {
  /* First DOM child, so in RTL this lands on the RIGHT — where the reference puts it,
     with the wordmark opposite on the left. */
}
.zamarin-deal-card__footer .mybtn {
  min-width: 14rem;
  flex-shrink: 0;
}
.zamarin-deal-card__logo {
  display: block;
  max-inline-size: 9rem;
  block-size: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Filter visibility. js/deals.js hides non-matching cards with `card.hidden = true`,
   but [hidden] only maps to display:none in the USER-AGENT stylesheet, and
   .zamarin-deal-card sets `display: grid` at AUTHOR level — author beats UA, so the card
   would stay visible with the attribute correctly set. The attribute selector (0,2,0)
   outranks the base rule, so no !important is needed. */
.zamarin-deal-card[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  .zamarin-deal-card {
    grid-template-columns: 1fr;
  }
  /* The row pins must be released too, or both children resolve to the same row-1
     area and render stacked on top of each other. */
  .zamarin-deal-card__media,
  .zamarin-deal-card__body {
    grid-column: auto;
    grid-row: auto;
  }
  .zamarin-deal-card__media {
    order: -1;
  }
  .zamarin-deal-card__media img {
    aspect-ratio: 16/10;
  }
  .zamarin-deal-card__features {
    --features-gap: 0.8rem;
    justify-content: center;
  }
  .zamarin-deal-card__footer {
    flex-wrap: wrap;
  }
}
/* =========================================================
   BALANCE CHECK — zamarin-gift-card.shtml
   Photo on the LEFT, copy column on the RIGHT keeping the container gutter.
   ========================================================= */
.zamarin-balance {
  padding-block: clamp(4rem, 7vw, 9rem);
  overflow-x: clip;
}
.zamarin-balance__row {
  display: grid;
  /* RTL VISUAL order — track 1 is the RIGHTMOST column and holds the copy. */
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(3rem, 5vw, 7rem);
  align-items: center;
}
.zamarin-balance__content {
  display: flex;
  align-items: center;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  text-align: right;
}
.zamarin-balance__media {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.zamarin-balance__media img {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.zamarin-balance__title {
  font-family: var(--ff-primary);
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 4vw, 5.6rem) * var(--title-scale, 1));
  line-height: 100% !important;
  color: var(--clr-title);
}
.zamarin-balance__desc {
  font-family: var(--ff-secondary);
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  line-height: 1.6;
  color: rgba(60, 60, 67, 0.85);
  margin: 0 0 2.4rem;
}
.zamarin-balance__form {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.zamarin-balance .mybtn {
  padding: 1rem 7rem;
}
.zamarin-balance {
  /* Visually hidden, NOT display:none — the label must stay in the accessibility tree.
     A placeholder is not an accessible name and vanishes once typing starts. */
}
.zamarin-balance__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.zamarin-balance__input-group {
  display: flex;
  gap: 5rem;
}
.zamarin-balance__input {
  flex: 1 1 auto;
  min-width: 23.7rem;
  height: 4.4rem;
  padding-inline: 1.6rem;
  font-family: var(--ff-secondary);
  font-size: 1.4rem;
  color: var(--clr-primary-400);
  background-color: transparent;
  border: 1px solid var(--clr-primary-400);
  border-radius: 50rem;
  text-align: right;
}
.zamarin-balance__input::-moz-placeholder {
  color: rgba(60, 60, 67, 0.5);
}
.zamarin-balance__input::placeholder {
  color: rgba(60, 60, 67, 0.5);
}
.zamarin-balance__input:focus {
  outline: 2px solid var(--clr-primary-400);
  outline-offset: 1px;
  border-color: transparent;
}
/* 07/10/2026 — input and "בדוק" joined into one control (client: input
   "connected" to the button). No gap; the input keeps its rounded outer end,
   the button its rounded outer end, and the seam between them is square.
   Logical radii, so RTL (input right / button left) and LTR both read right.
   The button matches the input's 4.4rem height. */
.zamarin-balance__input-group {
  gap: 0;
  align-items: stretch;
}
.zamarin-balance__input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end: 0;
}
/* 07/10/2026 — balance lookup is live: the reply line under the field, and
   codes (Latin + dashes) typed in an RTL page keep their own direction. */
.zamarin-balance__input {
  unicode-bidi: plaintext;
}
.zamarin-balance__result {
  margin: 1.2rem 0 0;
  min-height: 1.6em;
  /* Never widens the form (which would re-centre and shift the field + button):
     width 0 + min-width 100% = exactly the field+button width, wrapping inside it. */
  width: 0;
  min-width: 100%;
  font-family: var(--ff-secondary);
  font-size: 1.6rem;
  color: var(--clr-primary-400);
  text-align: center; /* client 07/10/2026 */
}
.zamarin-balance__result[data-state="found"] {
  font-weight: 400;
}
/* The amount (e.g. "₪50") — bold, set by giftcard-balance.js. */
.zamarin-balance__result strong {
  font-weight: 700;
}
.zamarin-balance__result[data-state="not_found"],
.zamarin-balance__result[data-state="expired"],
.zamarin-balance__result[data-state="inactive"],
.zamarin-balance__result[data-state="limited"],
.zamarin-balance__result[data-state="error"] {
  color: #b3261e; /* = --clr-error (declared only on the GF / Woo scopes) */
}
/* Loading: the label goes transparent (button keeps its width — no shift) and a
   currentColor-free ring spins in its place. */
.zamarin-balance__form.is-loading .mybtn {
  position: relative;
  color: transparent;
  cursor: progress;
}
.zamarin-balance__form.is-loading .mybtn::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--clr-neutral-100);
  border-radius: 50%;
  animation: em-balance-spin 0.7s linear infinite;
}
@keyframes em-balance-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .zamarin-balance__form.is-loading .mybtn::after {
    animation-duration: 2s;
  }
}
/* 07/10/2026 (client): no focus outline; the field keeps its own border so it
   doesn't lose its edge on focus (the rule above made it transparent). */
.zamarin-balance__input:focus,
.zamarin-balance__input:focus-visible {
  outline: none;
  border-color: var(--clr-primary-400);
}
/* Same height: both are border-box 4.4rem with a 1px border. The button's
   base border is WHITE (.mybtn), which on the cream page reads as a 1px
   inset and makes it look shorter than the field — match it to its own fill. */
.zamarin-balance__input,
.zamarin-balance__input-group .mybtn {
  box-sizing: border-box;
  height: 4.4rem;
  margin: 0;
}
.zamarin-balance__input-group .mybtn {
  border-color: var(--accent, var(--clr-primary-100));
  padding: 0 3.2rem;
  display: inline-flex;
  align-items: center;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .zamarin-balance__row {
    grid-template-columns: 1fr;
    padding-inline: clamp(1.8rem, 5vw, 4rem);
  }
  /* Row pins released too, or both children resolve to the same row-1 area and render
     stacked on top of each other. */
  .zamarin-balance__content,
  .zamarin-balance__media {
    grid-column: auto;
    grid-row: auto;
  }
  .zamarin-balance__media {
    order: -1;
  }
  .zamarin-balance__content {
    text-align: center;
  }
  .zamarin-balance__form {
    justify-content: center;
  }
  /* Joined field + button must fit a 330px phone: let the input shrink. */
  .zamarin-balance__input-group {
    width: 100%;
    max-width: 40rem;
  }
  .zamarin-balance__input {
    min-width: 0;
  }
}

/* ============================================================================
   BLOG (ported by hand from liam-hotels/scss/main.css 4510-4889 — the 11/08
   recompile of the new _blog.scss; §4B: ported, never recopied wholesale)
   ========================================================================== */
.blog-page .contact-hero::after {
  background: rgba(0, 0, 0, 0.3);
  transform: matrix(1, 0, 0, -1, 0, 0);
}

/* FIGMA OVER STATIC — article single hero scrim only.
   The scrim itself is NOT new: .contact-hero::after (l.2820) has shipped
   rgba(0,0,0,.3) since the base hero, and .blog-page .contact-hero::after
   (above) restates the same .3 for the two blog statics. Figma darkens it to
   .70 on the article single. Only the alpha is overridden here — the geometry
   (inset:0, z-index:-1) and the source's inherited transform stay put.
   Scope is body.single-post (0,2,2), one step above .blog-page .contact-hero
   (0,2,1), and placed after it so both specificity AND order agree. Articles
   are native posts — there is no em_article CPT (inc/cpt.php registers only
   em_room / em_deal / em_treatment), so single-post is the correct hook.
   .blog-page is added by em_body_class() on is_home() OR is_singular('post')
   (functions.php l.186); single-post narrows that to the single, leaving the
   blog LISTING (home.php) on .3 along with contact / rooms / page.php.
   The title needs nothing: ::after is z-index:-1 and .blog-details__title is
   in normal flow with z-index auto, so it already paints above the scrim —
   same stacking the .contact-hero__title pages have always used. */
body.single-post .contact-hero::after {
  background: rgba(0, 0, 0, 0.7);
}

/* ---------- Lede: search, quote, intro ---------- */
.blog-lede {
  padding-block: clamp(4rem, 6vw, 7.2rem) clamp(3rem, 5vw, 5.6rem);
  text-align: center;
  position: relative;
}
.blog-lede__tick {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  inline-size: 1px;
  block-size: clamp(2rem, 3vw, 3.2rem);
  background-color: var(--clr-primary-400);
  opacity: 0.35;
}
.blog-lede__intro {
  max-width: 62rem;
  margin: clamp(1.6rem, 2.4vw, 2.4rem) auto 0;
  font-family: var(--ff-secondary);
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--clr-primary-200);
}

/* ---------- Search field ---------- */
.blog-search {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  inline-size: min(30rem, 90%);
  margin-inline: auto;
  margin-block-end: clamp(2.4rem, 4vw, 4rem);
  padding-inline: 1.6rem;
  border: 1px solid rgba(24, 39, 75, 0.14);
  border-radius: 999px;
  transition: border-color 0.3s ease; /* 12/10/2026: eased focus border */
}
/* 12/10/2026 (client): no outline on focus — the pill's own border darkens
   instead, so focus is still visible without the extra ring. */
.blog-search:focus-within {
  border-color: var(--clr-primary-400);
  outline: none;
}
.blog-search__field {
  min-inline-size: 0;
  block-size: 3.6rem;
  border: 0;
  background: none;
  font-family: var(--ff-secondary);
  font-size: 1.3rem;
  color: var(--clr-primary-400);
  text-align: right;
  /* The wrapper carries the focus ring, so the field's own would double it. */
}
.blog-search__field:focus {
  outline: none;
}
.blog-search__field {
  /* Safari draws a proprietary clear button that breaks the pill's alignment. */
}
.blog-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.blog-search__clear {
  display: grid;
  place-items: center;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(24, 39, 75, 0.1);
  color: var(--clr-primary-400);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.blog-search__clear[hidden] {
  display: none;
}
.blog-search__clear:hover, .blog-search__clear:focus-visible {
  background: rgba(24, 39, 75, 0.2);
}
.blog-search__clear svg {
  inline-size: 1rem;
  block-size: 1rem;
}
.blog-search__submit {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--clr-primary-400);
  cursor: pointer;
}
.blog-search__submit svg {
  inline-size: 100%;
  block-size: 100%;
}

/* ---------- Articles grid ---------- */
.blog-articles {
  padding-block-end: var(--section-gap);
}
.blog-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.4rem, 3.5vw, 4.8rem) clamp(2rem, 2.6vw, 3.4rem);
}
.blog-articles__status {
  margin: 2.4rem 0 0;
  font-family: var(--ff-secondary);
  font-size: 1.4rem;
  color: var(--clr-primary-200);
  text-align: center;
}
.blog-articles__status:empty {
  display: none;
}

/* ---------- Article card ---------- */
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: var(--clr-neutral-100);
  border-radius: 0 0 0 2.4rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.blog-card:hover, .blog-card:focus-within {
  box-shadow: 0 1.2rem 2.4rem rgba(24, 39, 75, 0.12);
  transform: translateY(-0.4rem);
}
.blog-card__media {
  overflow: hidden;
}
.blog-card__img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 541/328;
  block-size: auto;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.blog-card:hover .blog-card__img, .blog-card:focus-within .blog-card__img {
  transform: scale(1.04);
}
/* 12/10/2026 — the hover zoom snapped with no easing: style.css's legacy
   lazy-load rule img:not(.initial) { transition: opacity 1s } is (0,1,1) and
   replaced .blog-card__img's (0,1,0) transform transition. Restated at (0,2,0),
   keeping that opacity fade alongside. */
.blog-card .blog-card__img {
  transition: transform 0.6s ease, opacity 1s;
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1.6vw, 1.8rem);
  flex: 1 1 auto;
}
.blog-card__title {
  margin: 0;
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 700;
  font-size: calc(1.5rem * var(--title-scale, 1));
  line-height: 1.4;
  color: var(--clr-title);
  text-align: right;
}
.blog-card__link {
  color: inherit;
  text-decoration: none;
  font-size: clamp(var(--fs-150), 3vw, var(--fs-200));
  font-weight: 500;
  font-family: var(--ff-secondary);
}
.blog-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blog-card__rule {
  border: 0;
  border-block-start: 1px solid rgba(24, 39, 75, 0.14);
  margin: 1.2rem 0;
  opacity: 1;
}
.blog-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6rem;
  margin-block-start: auto;
}
.blog-card__excerpt {
  margin: 0;
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--ff-secondary);
  font-size: clamp(var(--fs-100), 2vw, var(--fs-150));
  color: var(--clr-primary-200);
  text-align: right;
}
.blog-card__go {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border: 1px solid rgba(24, 39, 75, 0.28);
  border-radius: 50%;
  color: var(--clr-primary-400);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.blog-card__go svg {
  inline-size: 1.4rem;
  block-size: 1.4rem;
}
.blog-card:hover .blog-card__go, .blog-card:focus-within .blog-card__go {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  border-color: var(--clr-primary-400);
}

.blog-card {
  position: relative;
}

.blog-details__title {
  font-size: calc(clamp(var(--fs-400), 4vw, var(--fs-650)) * var(--title-scale, 1));
  font-weight: 600;
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  color: var(--clr-neutral-100);
}

/* =========================================================
   ARTICLE BODY 
   ========================================================= */
/* 12/10/2026 — Figma "Blog page" (Main, 477:1909): each image+text row runs
   the full viewport width; the photo fills ~46% of it and touches the screen
   edge (878/1920 at the design width, 16:9-ish crop), the text sits in the
   other half with ~5vw air on both sides. Sides alternate via --flip (row 1
   image on the left in RTL). A row with NO image drops to a centred text
   column (.blog-article__row--text). */
.blog-article__row {
  display: grid;
  /* Default row: media in the FIRST track (the right in RTL). */
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}
.blog-article__row + .blog-article__row {
  margin-block-start: clamp(4rem, 6vw, 12rem);
}
.blog-article__media {
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 0;
  margin: 0;
}
.blog-article__body {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
  padding-inline: clamp(2rem, 5.2vw, 10rem);
  text-align: start;
  font-family: var(--ff-secondary);
  font-size: clamp(1.6rem, 0.95vw, 1.8rem);
  line-height: 1.7;
  color: var(--clr-primary-400);
}
/* --flip (rows 1, 3, …): media in the SECOND track — the LEFT in RTL, which
   is where Figma's first image sits. LTR mirrors on its own. */
.blog-article__row--flip {
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
}
.blog-article__row--flip .blog-article__media {
  grid-column: 2;
}
.blog-article__row--flip .blog-article__body {
  grid-column: 1;
}
.blog-article__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 878 / 490;
  -o-object-fit: cover;
     object-fit: cover;
}
/* No image on the row → one centred text column, same type. */
.blog-article__row--text {
  display: block;
  inline-size: auto;
  margin-inline: auto;
  max-inline-size: 86rem;
}
.blog-article__row--text .blog-article__body {
  padding-inline: 0;
  text-align: start; /* 12/10/2026: column centred, text itself start-aligned */
}
.blog-article__heading {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 700;
  font-size: calc(1.6rem * var(--title-scale, 1));
  line-height: 1.4;
  color: var(--clr-title);
  margin: 0 0 0.8rem;
}
.blog-article__heading:not(:first-child) {
  margin-block-start: 2.4rem;
}
.blog-article__body p {
  margin: 0 0 1.2rem;
}
.blog-article__body p:last-child {
  margin-block-end: 0;
}
.blog-article {
  /* ---------- Prev / next ---------- */
}
.blog-article__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  max-width: 50%;
  margin: 0 auto;
  flex-wrap: wrap;
  padding-block-start: clamp(1.8rem, 3vw, 2.2rem);
  border-block-start: 1px solid rgba(24, 39, 75, 0.14);
}
.blog-article__pager-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--ff-secondary);
  font-size: 1.3rem;
  color: var(--clr-primary-400);
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.25s ease;
}
.blog-article__pager-link:hover {
  opacity: 0.7;
}
.blog-article__pager-link:focus-visible {
  opacity: 0.7;
  outline: 2px solid var(--clr-primary-400);
  outline-offset: 4px;
}
.blog-article__pager-link span {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--clr-neutral-900);
}
.blog-article__pager-link svg {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .blog-article__row {
    grid-template-columns: 1fr;
  }
  .blog-article__media,
  .blog-article__body,
  .blog-article__row--flip .blog-article__media,
  .blog-article__row--flip .blog-article__body {
    grid-column: auto;
    grid-row: auto;
  }
  .blog-article__media {
    order: -1;
  }
}
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .blog-articles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blog-card__foot {
    gap: 2rem;
  }
  .blog-article__pager {
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .blog-articles__grid {
    grid-template-columns: 1fr;
  }
  .blog-card__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card__img,
  .blog-card__go {
    transition: none;
  }
  .blog-card:hover,
  .blog-card:focus-within,
  .blog-card:hover .blog-card__img,
  .blog-card:focus-within .blog-card__img {
    transform: none;
  }
}
/* ============================================================================
   LIAM HOTELS — WP CONVERSION ADDITIONS
   ----------------------------------------------------------------------------
   ⚠ Everything above this line is the static source's main.css, migrated
   verbatim. Everything below is CONVERSION-SCOPE work that the statics do not
   contain, written only with the tokens already defined above — no new colours,
   no new type scale, no new spacing values.

   All four blocks are FIGMA-DERIVED ADDITIONS awaiting a staging pass:
     - .header__network-link  : hotel mode -> back to the network site
     - .header__lang          : language switcher (globe), both header modes
     - .header__cart          : cart link, WooCommerce context only
     - .gallery-group--wp     : positional row fallback (see note)
   ============================================================================ */

/* --- header link colour, shared by all three additions --------------------
   FIX (13/08/2026): these three carried color: var(--clr-primary-200) — the
   BODY text token, #28374A. That is also the header's own scrolled background
   (.header.is-scrolled { background-color: var(--clr-primary-200) }), so the
   globe and the cart glyph were near-black over the hero and literally
   invisible once scrolled, while the nav links beside them were white.

   They now take the SAME token the nav links take — .header__nav-link uses
   color: var(--clr-neutral-100) — rather than a hardcoded #fff, so a per-hotel
   header that ever re-points that variable keeps all four in step. Hover
   likewise matches .header__nav-link:hover (opacity, colour held): the old
   hover was var(--clr-primary-400) = #474132, dark-on-dark. */
/* Z13.2 (20/08/2026) — .header__network-link REMOVED from this shared colour
   group (and from the :hover group below). Both instances are now .mybtn pills
   (desktop + mobile-collapse), so .mybtn--header owns their base white text and
   their hover; the old grouped hover's color:--clr-neutral-100 was the exact rule
   that painted white text on the white hover fill (it beat .mybtn--header:hover on
   source order at equal (0,2,0)). Deleting it lets the pill hover resolve to
   .mybtn--header:hover — white fill + --clr-primary-100 text — IDENTICAL to the
   booking CTAs, no override rule required. The lang toggles + cart still need the
   group, so only the network-link selectors were dropped. */
.header__lang-toggle,
.header__lang--mobile,
.header__cart {
  color: var(--clr-neutral-100);
}

.header__lang-toggle:hover,
.header__lang--mobile:hover,
.header__cart:hover {
  opacity: 0.75;
  color: var(--clr-neutral-100);
}

/* --- back to the network site (hotel header mode only) ---------------------
   Z13.2 (20/08/2026) — per client, BOTH the desktop and the mobile-collapse
   network links are now outline pills matching the header CTAs (each carries
   .mybtn.mybtn--header in header.php); the Z13 tertiary treatment is fully gone.
   The old .header__network-link base block (Z3-F1 display:inline-block + fs-100 +
   transition:opacity) was DELETED: it sat later in source than .mybtn at equal
   (0,1,0) and was overriding the pill's inline-flex / 1.6rem / colour-bg
   transition — stale and harmful now that every instance is a pill. .mybtn gives
   inline-flex (mt-5 margin still takes on a flex box, so the Z3 hack is obsolete),
   gap:1rem, the shape and the hover. The Z13 leading arrow is kept on both
   instances (differentiates the network link from the booking CTAs); its sizing +
   the .dir-ltr EN flip + the focus ring are rescoped OFF .header__col--cta so they
   reach the mobile pill too. Arrow-in-pill is client taste; removing the <i> in
   header.php is a one-line revert (N2). Network-mode headers print no such link
   (the $em_hotel gate), so nothing leaks there. */
.header__network-link .myicon--arrow-nav {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.dir-ltr .header__network-link .myicon--arrow-nav {
  transform: scaleX(-1);
}
/* .mybtn / .mybtn--header carry no :focus-visible of their own, so keyboard focus
   fell back to the bare UA box. Match the header chrome's own ring
   (.header__toggle:focus-visible — white 2px, 3px offset) rather than Z11's dark
   primary-100 ring, which would be low-contrast over the dark hero. Both instances. */
.header__network-link:focus-visible {
  outline: 2px solid var(--clr-neutral-100);
  outline-offset: 3px;
}

/* --- language switcher ----------------------------------------------------- */
.header__lang-toggle {
  text-decoration: none; /* 18/10/2026: now an <a> (direct switch), was a <button> */
  display: inline-flex;
  align-items: center;
  gap: var(--size-200);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--ff-secondary);
  font-size: var(--fs-100);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* .myicon is a mask icon filled with currentColor, so the globe inherits the
   toggle's colour automatically — do not nest an <svg> inside it (main.css
   documents why that breaks). */
.header__lang-toggle .myicon,
.header__lang--mobile .myicon {
  width: 2rem;
  height: 2rem;
}

.header__lang-menu {
  min-width: auto;
  border: 1px solid var(--clr-primary-400);
  border-radius: var(--size-200);
  background-color: var(--clr-neutral-100);
  padding: var(--size-200) 0;
}

.header__lang-menu .dropdown-item {
  font-family: var(--ff-secondary);
  font-size: var(--fs-100);
  color: var(--clr-primary-200);
  padding: var(--size-100) var(--size-400);
}

.header__lang-menu .dropdown-item:hover,
.header__lang-menu .dropdown-item:focus {
  background-color: var(--clr-neutral-200);
  color: var(--clr-primary-400);
}

.header__lang--mobile {
  font-family: var(--ff-secondary);
  font-size: var(--fs-100);
  transition: opacity 0.3s ease;
}

/* --- cart link (WooCommerce context only) ---------------------------------- */
.header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

/* The cart glyph was an <img src="bag.png"> — a near-black raster on
   transparent, so no `color` could reach it and it stayed dark on the dark
   header. It is now the same MASK treatment .myicon uses: bag.png supplies the
   silhouette via mask-image and currentColor supplies the paint, so the icon
   inherits .header__cart's colour exactly like the globe does. The SOURCE'S OWN
   asset is still the artwork — no icon is invented (the note in inc/nav.php
   ruled out drawing a new .myicon--bag, not re-painting the existing file). */
.header__cart-icon {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-color: currentColor;
  -webkit-mask-image: url("../images/bag.png");
  mask-image: url("../images/bag.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.header__cart-count {
  position: absolute;
  /* inset-inline-end keeps this correct in both directions without a second
     rule — the badge sits on the outer corner in RTL and LTR alike. */
  inset-block-start: -0.6rem;
  inset-inline-end: -0.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  font-family: var(--ff-secondary);
  font-size: 1.2rem;
  line-height: 1;
}

/* --- article single: the_content() FALLBACK -------------------------------
   The single's designed layout is now the .blog-article block above (ported
   from the 11/08 _blog.scss). These .article/.article-body rules survive as
   the fallback typography single.php uses when the article_rows repeater is
   empty and the body is plain editor prose. */
.article {
  padding-block: var(--section-gap);
}

.article-body {
  font-family: var(--ff-secondary);
  font-size: var(--sub-text);
  line-height: 1.7;
  color: var(--clr-primary-200);
}

.article-body > * + * {
  margin-block-start: var(--size-400);
}

.article-body h2 {
  font-size: calc(var(--sub-heading) * var(--title-scale, 1));
  font-family: var(--ff-primary);
}

.article-body h3 {
  font-size: calc(var(--heading-sm) * var(--title-scale, 1));
  font-family: var(--ff-primary);
}

/* ⚠ The reset at the top of this file is `ul, ol, li { list-style: none }` —
   it targets the LI, so the override must target the LI too. Restating it on
   the UL silently loses: an element's own declaration beats an inherited one. */
.article-body ul > li {
  list-style: disc;
  margin-inline-start: var(--size-500);
}

.article-body ol > li {
  list-style: decimal;
  margin-inline-start: var(--size-500);
}

.article-body a {
  color: var(--clr-primary-400);
  text-decoration: underline;
}

.article-body img {
  border-radius: 0.8rem;
}

/* designed empty state (§5B.6) — never a bare "not found" */
.articles__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-400);
  padding-block: var(--section-gap);
  text-align: center;
  font-family: var(--ff-secondary);
  font-size: var(--sub-text);
  color: var(--clr-primary-200);
}

/* =============================================================================
 * Round Z18 — network contact page: per-hotel direct-contact section
 * -----------------------------------------------------------------------------
 * Standalone section under the contact form (page-contact.php), NOT the
 * contact-logos marquee. A light card grid of four hotel blocks; each block's
 * circular icon badges take THAT hotel's brand colour via an inline
 * --hotel-accent custom property set on the block in the template (the network
 * page has no body.hotel-{slug}, so the Z1 --accent mechanism can't reach here).
 * Falls back to --clr-primary-100 when a term has no color_accent.
 * Grid 4 -> 2 (<=991.98) -> 1 (<=575.98), matching the theme's breakpoints.
 * ========================================================================== */
.hotel-contacts {
  padding-block: var(--section-gap);
}
.hotel-contacts__title {
  font-family: var(--ff-primary); /* 06/10/2026: titles = EN main font, then HE title font */
  font-weight: 300;
  font-size: calc(var(--sub-heading) * var(--title-scale, 1) * 1.3); /* 12/10/2026: x1.3 (client: bigger) */
  color: var(--clr-title);
  text-align: center;
  margin-bottom: var(--size-800);
}
/* 12/10/2026 (client) — cards centred. Was a 4-column grid, so the three
   hotels with a contact block (Kerem has none) left an empty fourth column on
   one side. Flex-wrap + justify-content:center keeps the same card width
   (a quarter of the row) and centres however many there are. */
.hotel-contacts__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-500);
}
.hotel-contacts__card {
  flex: 0 1 calc((100% - 3 * var(--size-500)) / 4);
}
.hotel-contacts__card {
  /* Z18.1 — client polish: no hard white box. Transparent surface, no border;
     the soft drop shadow alone reads it as a raised panel on cream. Shadow
     value reused from the theme's existing card shadow (main.css:1186,
     0 .4rem 1.6rem rgba(0,0,0,.12)) rather than inventing one. Radius + padding
     kept from Z18. ⚠ If a fully transparent card reads unanchored on cream, the
     honest alternative is a low-alpha white surface (e.g.
     background-color: rgba(255,255,255,.4)) — the client's literal ask is
     transparent, shipped; the tint is the one-line tunable. See report. */
  background-color: transparent;
  border-radius: var(--size-200);
  padding: var(--size-600) var(--size-500);
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.12);
}
/* Z18.1 — fixed-height logo area. All four brand logos have different aspect
   ratios (Zamarin wide lockup, Kerem tall, Casa oval frame, Mulan wide banner),
   so a fixed head height equalizes where the rows start across the four cards
   (F3/N2) regardless of the logo's own height. Inline-start aligned to sit over
   the rows' start edge. */
.hotel-contacts__head {
  height: 6rem;
  margin-bottom: var(--size-500);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.hotel-contacts__logo {
  max-height: 5rem;
  max-width: 18rem;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.hotel-contacts__name {
  font-family: var(--ff-secondary);
  font-weight: 400;
  font-size: var(--fs-250);
  color: var(--clr-title);
}
.hotel-contacts__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-400);
}
.hotel-contacts__link {
  display: flex;
  align-items: center;
  gap: var(--size-400);
  color: var(--clr-primary-200);
  text-decoration: none;
}
.hotel-contacts__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  /* per-hotel accent (inline custom property), neutral fallback */
  background-color: var(--hotel-accent, var(--clr-primary-100));
  color: var(--clr-neutral-100);
}
.hotel-contacts__badge .myicon {
  width: 1.8rem;
  height: 1.8rem;
}
.hotel-contacts__value {
  font-family: var(--ff-secondary);
  font-size: var(--fs-150);
  line-height: 1.3;
  word-break: break-word;
}
.hotel-contacts__link:hover .hotel-contacts__value {
  color: var(--hotel-accent, var(--clr-primary-100));
}
@media (max-width: 991.98px) {
  .hotel-contacts__card {
    flex-basis: calc((100% - var(--size-500)) / 2);
  }
  /* 12/10/2026 (client) — mobile: card content centred too. */
  .hotel-contacts__card {
    text-align: center;
  }
  .hotel-contacts__head,
  .hotel-contacts__link {
    justify-content: center;
  }
  /* Icon on top, text centred under it. */
  .hotel-contacts__link {
    flex-direction: column;
    align-items: center;
    gap: var(--size-200);
  }
}
@media (max-width: 575.98px) {
  .hotel-contacts__card {
    flex-basis: 100%;
  }
}
/* ============================================================================
   FIGMA COMMENTS ROUND (05/10/2026) — header, mobile contact bar, treatment
   "show more", mobile "read more". Written with existing tokens only. The
   reference the client pointed to for mobile is the old zamarin.co.il:
   centred logo, booking row under the bar, call/WhatsApp bar at the bottom.
   ============================================================================ */

/* --- mobile booking row under the bar (header.php .header__mobile-ctas) ---- */
.header__mobile-ctas {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  padding-block: 0.4rem 1.2rem;
}
.header__mobile-ctas .mybtn--header {
  font-size: 1.4rem;
  padding: 0.8rem 1.6rem;
}
/* Hotel pages: the scrolled bar is cream (Z12), so the pills take the accent
   there exactly like the desktop F3c rule — that one is desktop-scoped, this
   row only exists below 992px. */
.zamarin-page .header.is-scrolled .header__mobile-ctas .mybtn--header {
  color: var(--accent, var(--clr-primary-100));
  border-color: var(--accent, var(--clr-primary-100));
}
.zamarin-page .header.is-scrolled .header__mobile-ctas .mybtn--header:hover {
  background-color: var(--accent, var(--clr-primary-100));
  color: var(--clr-neutral-200);
}

/* --- mobile menu with a full background ------------------------------------
   Was a floating rounded card over the hero. Open (or opening) now turns the
   whole header into one solid sheet down to the bottom of the viewport, and
   the panel runs edge to edge. :has() keeps it CSS-only — no JS state to sync
   with Bootstrap's collapse. */
@media (max-width: 991.98px) {
  .header:has(.navbar-collapse.show),
  .header:has(.navbar-collapse.collapsing) {
    background-color: var(--header-bg, var(--clr-primary-200));
    height: 100dvh;
    overflow-y: auto;
  }
  .header .navbar-collapse {
    margin-top: 0;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
  .zamarin-page .header .navbar-collapse {
    border: 0;
    box-shadow: none;
  }
  /* Hotel pages: the sheet is cream (Z16), so the bar chrome over it takes the
     scrolled-state treatment even at the top of the page — otherwise the white
     hamburger, white logo and white pills would vanish on cream. */
  .zamarin-page .header:has(.navbar-collapse.show),
  .zamarin-page .header:has(.navbar-collapse.collapsing) {
    background-color: var(--clr-neutral-200);
  }
  .zamarin-page .header:has(.navbar-collapse.show) .header__toggle-line,
  .zamarin-page .header:has(.navbar-collapse.collapsing) .header__toggle-line {
    background-color: var(--accent, var(--clr-primary-100));
  }
  .zamarin-page .header:has(.navbar-collapse.show) .header__logo--light,
  .zamarin-page .header:has(.navbar-collapse.collapsing) .header__logo--light {
    display: none;
  }
  .zamarin-page .header:has(.navbar-collapse.show) .header__logo--dark,
  .zamarin-page .header:has(.navbar-collapse.collapsing) .header__logo--dark {
    display: inline;
  }
  .zamarin-page .header:has(.navbar-collapse.show) .header__mobile-ctas .mybtn--header,
  .zamarin-page .header:has(.navbar-collapse.collapsing) .header__mobile-ctas .mybtn--header {
    color: var(--accent, var(--clr-primary-100));
    border-color: var(--accent, var(--clr-primary-100));
  }
}

/* --- single mobile CTA inside the bar (header.php .header__bar-cta) --------
   06/10/2026: a hotel with ONE booking CTA shows it in the bar, at the
   inline-end opposite the toggle, instead of on a row below. The logo stays
   absolutely centred (base rule), so it is shortened here to leave the CTA
   room: measured at a 330px viewport the bar is ~279px; a 3.2rem-tall logo is
   ~107px wide (Mulan), leaving ~86px each side — the compact pill fits.
   Colours mirror the .header__mobile-ctas rules above (same states). */
@media (max-width: 991.98px) {
  .header__bar-cta {
    position: relative;
    z-index: 1;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
  }
  .header__bar-cta .mybtn--header {
    font-size: 1.3rem;
    padding: 0.6rem 1.2rem;
    white-space: nowrap;
  }
  /* 11/10/2026 (client) — mobile bar: [toggle + language] … logo … [book a room + cart].
     The cart is the CTA group's last child, so it lands at the far inline-end. */
  .header__bar-start {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }
  .header__bar-cta {
    gap: 1.2rem;
  }
  .header__lang--bar {
    font-size: 1.3rem;
    gap: 0.4rem !important; /* beats Bootstrap's .gap-2 utility on the same element */
  }
  .header__lang--bar .myicon {
    width: 1.8rem;
    height: 1.8rem;
  }
  .zamarin-page .header.is-scrolled .header__bar .header__cart,
  .zamarin-page .header.is-scrolled .header__lang--bar,
  .zamarin-page .header:has(.navbar-collapse.show) .header__bar .header__cart,
  .zamarin-page .header:has(.navbar-collapse.show) .header__lang--bar,
  .zamarin-page .header:has(.navbar-collapse.collapsing) .header__bar .header__cart,
  .zamarin-page .header:has(.navbar-collapse.collapsing) .header__lang--bar {
    color: var(--accent, var(--clr-primary-100));
  }
  .zamarin-page .header.is-scrolled .header__bar .header__cart-count {
    background-color: var(--accent, var(--clr-primary-100));
  }
  /* 18/10/2026 (client) — 30vw → 24vw: Mulan's wide logo touched the EN
     "Book a room" pill at 360px and overlapped it below that. Measured after:
     >= 20px clear each side at 320-390 (EN 320: 7px with the pill rule below).
     Compact logos (Casa 59px) are under the cap and unchanged. */
  .header__bar:has(.header__bar-cta) .header__logo {
    height: 3.2rem;
    max-width: 24vw;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .zamarin-page .header.is-scrolled .header__bar-cta .mybtn--header,
  .zamarin-page .header:has(.navbar-collapse.show) .header__bar-cta .mybtn--header,
  .zamarin-page .header:has(.navbar-collapse.collapsing) .header__bar-cta .mybtn--header {
    color: var(--accent, var(--clr-primary-100));
    border-color: var(--accent, var(--clr-primary-100));
  }
  .zamarin-page .header.is-scrolled .header__bar-cta .mybtn--header:hover {
    background-color: var(--accent, var(--clr-primary-100));
    color: var(--clr-neutral-200);
  }
}
/* 18/10/2026 — narrowest phones: a slightly smaller bar pill so the longer
   EN label ("Book a room") keeps clear of the centred logo. */
@media (max-width: 374.98px) {
  .header__bar-cta .mybtn--header {
    font-size: 1.2rem;
    padding: 0.5rem 0.9rem;
  }
}

/* --- mobile sticky contact bar (footer.php .mobile-contact-bar) ------------
   Call on the right, WhatsApp on the left (DOM order does it in RTL; LTR
   mirrors naturally). Takes the header's own token so it reads as the same
   chrome. z-index 90 = the float's layer, under the header's 100. The float
   is hidden below 992px because this bar now carries WhatsApp. */
.mobile-contact-bar {
  display: none;
}
@media (max-width: 991.98px) {
  .mobile-contact-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    background-color: var(--header-bg, var(--clr-primary-200));
    box-shadow: 0 -0.4rem 1.6rem rgba(0, 0, 0, 0.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .zamarin-page .mobile-contact-bar {
    background-color: var(--accent, var(--clr-primary-100));
  }
  .mobile-contact-bar__link {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 5.2rem;
    color: var(--clr-neutral-100);
    font-family: var(--ff-secondary);
    font-size: 1.5rem;
    text-decoration: none;
  }
  .mobile-contact-bar__link:hover,
  .mobile-contact-bar__link:focus-visible {
    color: var(--clr-neutral-100);
    opacity: 0.85;
  }
  .mobile-contact-bar__link + .mobile-contact-bar__link {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
  }
  .mobile-contact-bar__link .myicon {
    width: 2rem;
    height: 2rem;
  }
  body:has(.mobile-contact-bar) {
    padding-bottom: calc(5.2rem + env(safe-area-inset-bottom));
  }
  /* 11/10/2026 (client) — the home heroes fill the screen ABOVE the contact
     bar, so their booking buttons are never hidden behind it. */
  body:has(.mobile-contact-bar) .hero,
  body:has(.mobile-contact-bar) .zamarin-hero {
    min-height: calc(100svh - 5.2rem - env(safe-area-inset-bottom));
  }
  /* Footer: centred, and enough room under the credit row. */
  .footer__top,
  .footer__bottom,
  .footer__credit {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* 12/10/2026 (client) — copyright full width + centred. The row's
     align-items:center above loses to Bootstrap's .align-items-baseline
     (!important) in footer.php, so the children size/centre themselves. */
  .footer__credit > .footer__copyright,
  .footer__credit > .emilia {
    width: 100%;
    text-align: center;
  }
  .footer__logo {
    -o-object-position: center;
       object-position: center;
  }
  .footer__cols {
    justify-content: center;
    gap: 4rem; /* 11/10/2026: more air between the menu blocks */
  }
  .footer__col {
    align-items: center;
    text-align: center;
  }
  .footer {
    padding-bottom: 8rem; /* the credit row clears the fixed contact bar with room to spare */
  }
  .whatsapp-float,
  .whatsapp-widget {
    display: none !important; /* beats .whatsapp-widget:not([hidden]) — the bar replaces both on mobile */
  }
}

/* --- spa treatment menu: three rows, then "show more" (spa.js) ------------- */
.zamarin-treatment.is-collapsed {
  display: none;
}
.zamarin-treatments__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 5vw, 5.6rem);
}
.zamarin-treatments__more[hidden] {
  display: none;
}

/* --- mobile "read more" on the hotel home rooms + spa text (zamarin.js) ----
   Same collapsed height / fade as the Z5 our-hotels toggle; the section's
   feature icons fold away until the text is opened. */
@media (max-width: 767.98px) {
  [data-more-target].is-clamped {
    max-height: 11.2em; /* 7 lines × 1.6 line-height (18/10/2026, was 4) */
    overflow: hidden;
    position: relative;
    transition: max-height 0.45s ease;
  }
  [data-more-target].is-clamped::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2em;
    background: linear-gradient(to bottom, transparent, var(--clr-neutral-200));
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  [data-more-target].is-clamped.is-open::after {
    opacity: 0;
  }
}

/* --- rotating hero images (functions.php em_hero_slides) -------------------
   The slides reuse the hero's own absolute media rule (.wellness-hero img,
   .contact-hero img), so they already stack; this only cross-fades them. */
[data-hero-slide] {
  opacity: 0;
  transition: opacity 1.2s ease;
}
[data-hero-slide].is-active {
  opacity: 1;
}

/* ============================================================================
   ARTICLES PAGINATION (12/10/2026) — home.php (the_posts_pagination) and
   template-hotel-articles.php (paginate_links) both print core's
   nav.articles__pagination > .nav-links > .page-numbers, which had no styling.
   Built from the theme's own vocabulary: round controls like the gallery nav
   circles, --clr-primary-300 hairline, --clr-primary-400 ink, the current page
   filled. Logical prev/next stay as core prints them (RTL-correct arrows).
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.articles__pagination {
  margin-top: var(--size-800);
}
.articles__pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--size-200);
}
.articles__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 4.4rem;
  padding-inline: var(--size-300);
  border: 1px solid var(--clr-primary-300);
  border-radius: var(--radius-pill);
  font-family: var(--ff-secondary);
  font-size: var(--fs-100);
  line-height: 1;
  color: var(--clr-primary-400);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.articles__pagination a.page-numbers:hover,
.articles__pagination a.page-numbers:focus-visible {
  border-color: var(--clr-primary-400);
  color: var(--clr-primary-400);
}
.articles__pagination a.page-numbers:focus-visible {
  outline: 2px solid var(--clr-primary-400);
  outline-offset: 2px;
}
.articles__pagination .page-numbers.current {
  background-color: var(--clr-primary-400);
  border-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
}
.articles__pagination .page-numbers.dots {
  min-width: auto;
  padding-inline: var(--size-100);
  border-color: transparent;
}
.articles__pagination .page-numbers.prev,
.articles__pagination .page-numbers.next {
  border-color: var(--clr-primary-400);
  font-size: var(--fs-150);
}
.articles__pagination .page-numbers.prev:hover,
.articles__pagination .page-numbers.next:hover {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
}
@media (max-width: 575.98px) {
  .articles__pagination .page-numbers {
    min-width: 3.8rem;
    height: 3.8rem;
  }
}

/* ============================================================================
   ARTICLE SINGLE — Figma pass (12/10/2026, "Blog page" 477:1909)
   ========================================================================== */
.blog-article {
  padding-block: var(--section-gap);
}
/* Sub-headings in the design are body-size bold Heebo ("בחרו מלון שמציע חוויה
   ולא רק מקום לישון"), not display titles — for the row headings and for
   h2/h3 written in the editor alike. */
.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
  font-family: var(--ff-secondary);
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--clr-title);
  margin: 0 0 0.8rem;
}
.blog-article__body > * + h2,
.blog-article__body > * + h3,
.blog-article__body > * + h4 {
  margin-block-start: 3.2rem;
}
.blog-article__body.article-body {
  font-size: clamp(1.6rem, 0.95vw, 1.8rem);
  line-height: 1.7;
  color: var(--clr-primary-400);
}
.blog-article__body.article-body > * + * {
  margin-block-start: 1.2rem;
}
/* 18/10/2026 — simple pages (page.php: legal pages). No hero → the header is
   solid (em-solid-header) and fixed, so the article clears it: the header's
   bar height (--size-900) on top of the usual section gap. Title on the
   .heading-sm scale, start-aligned with the text column. */
.simple-page--no-hero {
  padding-block-start: calc(var(--size-900) + var(--section-gap));
}
.simple-page__title {
  font-family: var(--ff-primary);
  font-weight: 500;
  font-size: calc(var(--heading-sm) * var(--title-scale, 1));
  line-height: 1.2;
  color: var(--clr-title);
  margin: 0 0 var(--size-500);
}
.blog-article__pager {
  margin-block-start: clamp(4rem, 6vw, 10rem);
}
@media (max-width: 767.98px) {
  /* image rows stack: photo first (full width), text under it */
  .blog-article__row:not(.blog-article__row--text) .blog-article__body {
    padding-block-start: var(--size-500);
  }
}
/* 12/10/2026 — "חזרה למאמרים" at the top of the article, before the text,
   centred. */
.blog-article__back {
  display: flex;
  justify-content: center;
  margin-block-end: clamp(3.2rem, 4vw, 4.8rem);
}
/* The base .mybtn--outline is white (built for photo/dark panels); on the
   cream article page the button takes the dark-ink version instead. */
.blog-article__back .mybtn--outline {
  color: var(--clr-primary-400);
  border-color: var(--clr-primary-400);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.blog-article__back .mybtn--outline:hover,
.blog-article__back .mybtn--outline:focus-visible {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
}

/* ============================================================================
   NETWORK SPA — online booking (template-parts/network/spa-booking.php),
   12/10/2026. Figma "Spa" 377:51 / node 669:2550: the BizOnline widget sits
   between the facilities and the workshop. Heading takes the facility-heading
   treatment (Heebo 300, --clr-primary-400); one column per spa hotel, the
   widget in a white rounded frame with the theme's card shadow.
   ========================================================================== */
.spa-booking {
  padding-block: var(--section-gap);
  text-align: center;
}
.spa-booking__title {
  font-family: var(--ff-primary);
  font-weight: 300;
  font-size: calc(clamp(3.2rem, 5vw, 4.2rem) * var(--title-scale, 1));
  color: var(--clr-title);
  margin-block-end: var(--size-700);
}
.spa-booking__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 40rem), 1fr));
  gap: var(--size-600);
  max-inline-size: 120rem;
  margin-inline: auto;
}
.spa-booking__hotel {
  font-family: var(--ff-secondary);
  font-weight: 400;
  font-size: var(--fs-250);
  color: var(--clr-primary-400);
  margin-block-end: var(--size-400);
}
.spa-booking__frame {
  background-color: var(--clr-neutral-100);
  border-radius: var(--size-200);
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.spa-booking__frame iframe {
  display: block;
  inline-size: 100%;
  block-size: var(--booking-h, 70rem);
  border: 0;
}
@media (max-width: 767.98px) {
  .spa-booking__frame iframe {
    block-size: var(--booking-h, 60rem);
  }
}
/* 14/10/2026 — hotel spa page booking slot (template-hotel-spa.php). Same frame
   as the network spa booking; capped so it doesn't run edge to edge on wide
   screens. --booking-h comes inline from the page's height field when set. */
.spa-booking__frame--hotel {
  max-width: 110rem;
  margin-inline: auto;
}

/* =============================================================================
 * 404 (14/10/2026) — 404.php. No static/Figma frame: DERIVED from existing
 * components only — the .contact-hero photo band (cover image + dark overlay,
 * white Cormorant display type), .mybtn / .mybtn--outline pills, the cream
 * --bg-main surface and the site tokens. The hero is full-viewport so the
 * transparent network header sits over the photo exactly as on contact.
 * Motion: the source's own zoomOut on the photo, a staggered rise on the copy,
 * and a slow float on the middle "0" — all off under prefers-reduced-motion.
 * ========================================================================== */
.error-404__hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--clr-neutral-100);
  padding-block: calc(var(--size-900) + var(--size-500)) var(--size-900);
}
.error-404__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
  animation: zoomOut 6s ease forwards;
}
.error-404__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* the .contact-hero 30% veil, deepened toward the bottom so the copy block
     reads on any photo */
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.error-404__inner {
  max-width: 82rem;
}
.error-404__inner > * {
  opacity: 0;
  transform: translateY(2.4rem);
  animation: em404Rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.error-404__inner > :nth-child(2) { animation-delay: 0.12s; }
.error-404__inner > :nth-child(3) { animation-delay: 0.3s; }
.error-404__inner > :nth-child(4) { animation-delay: 0.42s; }
.error-404__inner > :nth-child(5) { animation-delay: 0.56s; }
@keyframes em404Rise {
  to {
    opacity: 1;
    transform: none;
  }
}
.error-404__eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: var(--fs-250);
  letter-spacing: 0.08em;
  opacity: 0.9;
}
.error-404__code {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.04em;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(14rem, 26vw, 30rem);
  line-height: 0.9;
  margin-block: var(--size-300) var(--size-500);
}
/* the middle 0 as an outlined, gently floating ring — the "detour" */
.error-404__zero {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--clr-neutral-100);
  font-style: italic;
  display: inline-block;
  animation: em404Float 5s ease-in-out 1s infinite;
}
@keyframes em404Float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.06em) rotate(-4deg); }
}
.error-404__title {
  font-family: var(--ff-secondary);
  font-weight: 300;
  font-size: calc(clamp(2.8rem, 4vw, 4.2rem) * var(--title-scale, 1));
  line-height: 1.2;
  margin-bottom: var(--size-400);
}
.error-404__desc {
  font-size: var(--sub-text);
  line-height: 1.6;
  max-width: 56rem;
  margin-inline: auto;
  opacity: 0.92;
}
.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-400);
  margin-top: var(--size-700);
}
/* match the solid pill's geometry so the two CTAs read as a pair */
.error-404__btn-outline.mybtn--outline {
  height: var(--btn-height);
  padding: 0 3.7rem;
  font-weight: 500;
}

/* hotels strip */
.error-404__hotels {
  background-color: var(--bg-main);
  padding-block: var(--section-gap);
  text-align: center;
}
.error-404__hotels-title {
  font-family: var(--ff-primary);
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 5vw, 5rem) * var(--title-scale, 1));
  color: var(--clr-title);
  margin-bottom: var(--size-700);
}
.error-404__hotels-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-500);
}
.error-404__hotel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-400);
  min-width: 22rem;
  min-height: 16rem;
  padding: var(--size-600) var(--size-500);
  border-radius: var(--size-200);
  background-color: var(--clr-neutral-100);
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.06);
  color: var(--clr-primary-200);
  text-decoration: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.error-404__hotel:hover,
.error-404__hotel:focus-visible {
  transform: translateY(-0.6rem);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.12);
}
.error-404__hotel:focus-visible {
  outline: 2px solid var(--clr-primary-400);
  outline-offset: 3px;
}
.error-404__hotel-logo {
  max-height: 6rem;
  max-width: 18rem;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.error-404__hotel-name {
  font-size: var(--fs-100);
  letter-spacing: 0.02em;
}

@media (max-width: 575.98px) {
  .error-404__hotels-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-400);
  }
  .error-404__hotel {
    min-width: 0;
    min-height: 13rem;
    padding: var(--size-500) var(--size-300);
  }
  .error-404__hotel-logo {
    max-width: 100%;
    max-height: 4.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .error-404__bg,
  .error-404__zero {
    animation: none;
  }
  .error-404__inner > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .error-404__hotel {
    transition: none;
  }
}