/* ==========================================================================
   Storage Station — base.css
   Shared foundation: tokens, reset, typography, layout, buttons, form fields,
   header, footer, floating WhatsApp button and reusable blocks.
   Page-specific styles belong in css/<page>.css (do not edit this file there).
   Design reference: Figma desktop frame 1920px wide, Hebrew / RTL.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colors (Figma styles) */
  --color-main: #117BBC;
  --color-blue-dark: #064A88;
  --color-blue-form: #0F528E;      /* form borders / submit button */
  --color-secondary: #A4D7F6;
  --color-bg: #F3F8FC;
  --color-bg-tint: #E0F3FF;        /* light blue rounded panels */
  --color-white: #FFFFFF;
  --color-text: #1E1E1E;
  --color-gray: #5D5D5D;
  --color-dark: #2F3742;
  --color-placeholder: rgba(30, 30, 30, 0.5);

  /* Gradients */
  --gradient-hero: linear-gradient(0deg, #117BBC 19.474%, #083856 125%);
  --gradient-band: linear-gradient(68.45deg, #064A88 20.381%, #0F528E 36.18%, #117BBC 97.342%);

  /* Typography */
  --font-base: "Rubik", "Arial Hebrew", Arial, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* Fluid type scale (max = Figma 1920px value) */
  --fs-display: clamp(40px, 4.44vw, 85px);   /* hero headline */
  --fs-h1: clamp(34px, 4vw, 76px);           /* big section titles */
  --fs-h2: clamp(28px, 3.1vw, 60px);         /* section titles */
  --fs-h3: clamp(22px, 1.96vw, 37.5px);      /* small section titles */
  --fs-h4: clamp(20px, 1.3vw, 25px);         /* card / column headings */
  --fs-lead: clamp(18px, 1.33vw, 25.5px);    /* subtitles */
  --fs-body-lg: clamp(17px, 1.05vw, 20px);
  --fs-body: 18px;
  --fs-small: 14px;

  /* Layout */
  --container-max: 1920px;
  --gutter: clamp(16px, 6.25vw, 120px);      /* 120px side padding at 1920 */
  --section-space: clamp(56px, 6.25vw, 120px);
  --header-height: 154px;

  /* Radii */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-soft: 0 0 1.9px rgba(0, 0, 0, 0.25);
  --shadow-card: 0.95px 0.95px 8.26px rgba(0, 0, 0, 0.25);
  --shadow-image: 0 4px 5.3px rgba(0, 0, 0, 0.25);
  --shadow-panel: 0 12px 32px rgba(6, 74, 136, 0.12);

  --transition: 0.2s ease;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--color-main); outline-offset: 3px; }

/* Screen-reader only text */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Viewport helpers (breakpoint 768px = Figma mobile frames)
   .u-mobile-only  → rendered only ≤768px
   .u-desktop-only → rendered only >768px */
@media (min-width: 769px) { .u-mobile-only { display: none !important; } }
@media (max-width: 768px) { .u-desktop-only { display: none !important; } }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-space); }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display-title {                     /* hero headline, e.g. "פתרונות אחסון בפריסה ארצית" */
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Section title: dark-blue bold heading used across pages */
.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-blue-dark);
}
.section-title--xl { font-size: var(--fs-h1); letter-spacing: -0.02em; }
.section-title--sm { font-size: var(--fs-h3); }
.section-title--light { color: var(--color-white); }
.section-title--center { text-align: center; }
.section-title strong { font-weight: var(--fw-bold); }
.section-title .fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }

.section-subtitle {                  /* gray medium lead under a title */
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-gray);
}

.eyebrow {                           /* small bold label above a title */
  font-size: clamp(16px, 1.1vw, 21.3px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-blue-dark);
}

/* Breadcrumb (e.g. "דף הבית - אודות") */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  font-size: clamp(18px, 1.6vw, 30px);
  color: var(--color-gray);
}
.breadcrumb a:hover { color: var(--color-main); }
.breadcrumb__sep { opacity: 0.8; }

/* --------------------------------------------------------------------------
   5. Buttons
   Usage: <a class="btn btn--primary" href="#">טקסט <span class="btn__icon" aria-hidden="true"></span></a>
   The arrow icon points left (RTL "forward") and inherits the text color.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  min-height: 47px;
  padding: 10.3px 20.6px;
  border: 1.08px solid transparent;
  border-radius: 6.86px;
  font-size: 20.6px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn__icon {
  flex: none;
  width: 1.1em;
  height: 0.92em;
  background-color: currentColor;
  -webkit-mask: url("../assets/common/icon-arrow.svg") center / contain no-repeat;
          mask: url("../assets/common/icon-arrow.svg") center / contain no-repeat;
  transform: rotate(180deg);          /* arrow points left in RTL */
}

/* Color variants */
.btn--primary { background: var(--color-blue-dark); color: var(--color-white); }
.btn--primary:hover { background: #053D70; }

.btn--main { background: var(--color-main); color: var(--color-white); }
.btn--main:hover { background: #0E69A1; }

.btn--light { background: var(--color-white); border-color: var(--color-white); color: var(--color-main); }
.btn--light:hover { background: var(--color-bg); }
/* Light-blue (secondary) button: secondary bg, dark-blue text, white border */
.btn--secondary { background: var(--color-secondary); border-color: var(--color-white); color: var(--color-blue-dark); }
.btn--secondary:hover { background: #8FCBF0; }

.btn--outline { background: transparent; border-color: var(--color-blue-dark); color: var(--color-blue-dark); }
.btn--outline:hover { background: var(--color-blue-dark); color: var(--color-white); }

.btn--outline-light { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn--outline-light:hover { background: var(--color-white); color: var(--color-main); }

.btn--bordered { border-color: var(--color-white); }   /* white 1px border (hero buttons) */

.btn--link {                          /* text button, e.g. "לכל ההמלצות" */
  background: transparent;
  color: var(--color-blue-dark);
  gap: 1.25em;
  padding: 19px 38px;
  font-size: clamp(18px, 1.19vw, 22.8px);
}
.btn--link:hover { color: var(--color-main); }

/* Size variants */
.btn--md { min-height: 45.5px; padding: 13px 26px; border-radius: 8.67px; font-size: clamp(18px, 1.14vw, 21.9px); }
.btn--lg { min-height: 58.35px; padding: 12.73px 25.46px; border-radius: 8.49px; font-size: clamp(19px, 1.33vw, 25.46px); }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   6. Form fields
   -------------------------------------------------------------------------- */
.field {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 24px;
  background: var(--color-white);
  border: 1.88px solid var(--color-blue-form);
  border-radius: 10px;
  font-size: 17.66px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field::placeholder { color: var(--color-gray); opacity: 1; }
.field:focus { outline: none; border-color: var(--color-main); box-shadow: 0 0 0 3px rgba(17, 123, 188, 0.2); }
.field--textarea { min-height: 130px; padding-top: 14px; resize: vertical; }

/* Large field variant (home page contact form) */
.field--lg {
  min-height: clamp(56px, 4.7vw, 90.4px);
  padding-inline: clamp(18px, 1.5vw, 28px);
  border-width: clamp(1.9px, 0.154vw, 2.96px);
  border-radius: clamp(10px, 0.82vw, 15.8px);
  font-size: clamp(17.66px, 1.45vw, 27.87px);
}
.field--lg.field--textarea { min-height: clamp(150px, 12.84vw, 246.6px); padding-top: clamp(14px, 1.5vw, 28px); }

/* Submit button (dark form blue) */
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 197px;
  height: 37.6px;
  background: var(--color-blue-form);
  border-radius: 5px;
  font-size: 17.66px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;
  color: var(--color-white);
  transition: background-color var(--transition);
}
.btn-submit:hover { background: var(--color-blue-dark); }

/* --------------------------------------------------------------------------
   7. Lead form — "השאירו פרטים ונמצא לכם מקום"
   Default = compact (pre-footer). Add .lead-form--lg for the big home variant.
   Submit button sits flush in the bottom-left corner of the "נושא" textarea.
   -------------------------------------------------------------------------- */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 1075px;
}
.lead-form__title {
  margin-bottom: 14px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-blue-dark);
}
.lead-form__field { position: relative; display: block; }
.lead-form__field > label { display: block; }
.lead-form__field--message .field { padding-bottom: 50px; }
/* the phone is typed left-to-right, but its placeholder lines up with the other Hebrew fields */
.lead-form .field[type="tel"] { text-align: right; }
.lead-form__submit {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;                /* = left in RTL */
}

.lead-form--lg { max-width: 1151px; gap: clamp(15px, 1.5vw, 28.8px); }
.lead-form--lg .lead-form__title { margin-bottom: clamp(14px, 1.4vw, 26px); font-size: clamp(28px, 3.08vw, 59.2px); }
.lead-form--lg .lead-form__field--message .field { padding-bottom: clamp(50px, 4.2vw, 82px); }
.lead-form--lg .lead-form__submit {
  width: clamp(197px, 16.2vw, 311px);
  height: clamp(37.6px, 3.71vw, 71.2px);
  border-radius: clamp(5px, 0.41vw, 7.9px);
  font-size: clamp(17.66px, 1.45vw, 27.87px);
}

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--color-bg);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: var(--header-height);
}

/* Hamburger / menu button (right edge in RTL) */
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-inline: -8px;
  border-radius: 8px;
}
.site-header__toggle img { width: 24px; height: 24px; }

/* Search icon button — mobile only (markup carries .u-mobile-only) */
.site-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Panel = nav + search (inline on desktop, dropdown on mobile) */
.site-header__panel {
  display: flex;
  align-items: center;
  gap: 48px;
}

.site-nav__list { display: flex; align-items: center; gap: 48px; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-size: 18px;
  color: var(--color-gray);
  white-space: nowrap;
  transition: color var(--transition);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--color-blue-dark); }
.site-nav__link--accent { color: var(--color-blue-dark); }
.site-nav__chevron { width: 24px; height: 24px; transition: transform var(--transition); }

/* Categories dropdown */
.site-nav__sub {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  padding: 10px 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.site-nav__sub a {
  display: block;
  padding: 10px 20px;
  font-size: 17px;
  color: var(--color-gray);
}
.site-nav__sub a:hover { background: var(--color-bg); color: var(--color-blue-dark); }
.site-nav__item--has-sub:hover .site-nav__sub,
.site-nav__item--has-sub:focus-within .site-nav__sub,
.site-header.is-menu-open .site-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__item--has-sub:hover .site-nav__chevron,
.site-header.is-menu-open .site-nav__chevron { transform: rotate(180deg); }

/* Search box */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 449px;
  height: 64px;
  padding: 8px 12px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.header-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding-inline: 12px;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: var(--fw-light);
}
.header-search__input::placeholder { color: var(--color-placeholder); opacity: 1; }
.header-search__input:focus { outline: none; }
.header-search__input::-webkit-search-cancel-button { display: none; }
.header-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}
.header-search__btn img { width: 20px; height: 20px; }

/* Cart + logo (left edge in RTL) */
.site-header__actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 39px;
  margin-inline-start: auto;
}
.site-header__cart { display: inline-flex; padding: 6px; margin: -6px; }
.site-header__cart img { width: 24px; height: 24px; }
.site-header__logo img { width: 289px; height: auto; }   /* 241 in the mockup; +20% at the owner's request, 20.10 */

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  min-height: 422px;
  padding-block: 77px 96px;
  background: var(--color-blue-dark);
  color: var(--color-white);
}
.site-footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 48px clamp(40px, 4.9vw, 94px);  /* 94px between columns at 1920 */
}
.footer-col__title {
  margin-bottom: 30px;
  font-size: 25px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 1px;
}
/* Title button (accordion trigger on mobile only — renders as plain text on desktop) */
.footer-col__toggle {
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  color: inherit;
  cursor: default;
}
.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.8px;
}
.footer-col__list--spaced { gap: 13px; }
address.footer-col__list { font-style: normal; }
.footer-col__list a { transition: color var(--transition); }
.footer-col__list a:hover { color: var(--color-secondary); }

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;            /* right-aligned in RTL */
  gap: 18px;
  margin-inline-start: auto;          /* pushed to the left edge */
  flex: none;
}
.site-footer__logo img { width: 355px; height: auto; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: 6px;
  font-size: 16.94px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.68px;
}
.footer-social__links { display: flex; align-items: center; gap: 9px; }
.footer-social__links a { display: inline-flex; transition: opacity var(--transition); }
.footer-social__links a:hover { opacity: 0.75; }
.footer-social__links img { width: 19.6px; height: 18.3px; }

/* --------------------------------------------------------------------------
   10. Floating WhatsApp button
   -------------------------------------------------------------------------- */
.whatsapp-float,
.call-float {
  position: fixed;
  left: 13px;
  bottom: 32px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 74px;
  background: var(--color-blue-dark);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(6, 74, 136, 0.3);
  transition: transform var(--transition);
}
.whatsapp-float:hover,
.call-float:hover { transform: scale(1.05); }
.whatsapp-float img { width: 62px; height: 62px; }
/* the call button sits right above WhatsApp, same box (owner's request 17.10): 32 + 74 + 12 */
.call-float { bottom: 118px; }
.call-float img { width: 40px; height: 40px; }

/* --------------------------------------------------------------------------
   11. Reusable blocks
   -------------------------------------------------------------------------- */
/* Stats — "המספרים שמאחורי ההצלחה!" */
.stats-band {
  padding-block: clamp(40px, 3.4vw, 66px);
  background: var(--gradient-band);
  color: var(--color-white);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 242px));
  justify-content: center;
  gap: 24px clamp(40px, 9.9vw, 190px);
  text-align: center;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat__label { font-size: clamp(20px, 1.56vw, 29.9px); line-height: 1.2; }
.stat__number {
  direction: ltr;
  font-size: clamp(40px, 3.46vw, 66.46px);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--color-secondary);
}
.stat__suffix { font-size: 0.7em; font-weight: var(--fw-regular); }

/* Cards */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
}
.card--soft {                         /* light card with shadow (testimonials) */
  background: var(--color-bg);
  border-radius: 15.19px;
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .site-header__inner,
  .site-header__panel,
  .site-nav__list { gap: 32px; }
  .header-search { width: 360px; }
  .site-footer__inner { column-gap: 48px; }
  .site-footer__logo img { width: 260px; }
  .footer-col__list { font-size: 18px; }
}

/* ≤1200px: header collapses to a hamburger-toggled dropdown panel */
@media (max-width: 1200px) {
  :root { --header-height: 96px; }

  .site-header__inner { gap: 16px; }
  .site-header__panel {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column-reverse;   /* search on top, links below */
    align-items: stretch;
    gap: 16px;
    padding: 16px var(--gutter) 24px;
    background: var(--color-white);
    box-shadow: var(--shadow-panel);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .site-header.is-menu-open .site-header__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--color-bg); }
  .site-nav__link { width: 100%; min-height: 52px; justify-content: space-between; font-size: 18px; }
  .site-nav__sub {
    position: static;
    min-width: 0;
    padding: 0 16px 10px 0;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;   /* follow the panel: hidden (and untappable) while the menu is closed */
    transform: none;
  }
  .site-nav__sub a { padding: 8px 0; font-size: 16px; }
  .site-nav__sub a:hover { background: none; }
  .header-search { width: 100%; height: 56px; padding: 4px 8px; background: var(--color-bg); box-shadow: none; }
  .header-search__btn { width: 44px; height: 44px; background: var(--color-white); }
  .site-header__actions { gap: 24px; }
  .site-header__logo img { width: 228px; }   /* 190 → +20%, 20.10 */

  .site-footer { min-height: 0; padding-block: 56px 64px; }
  .site-footer__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .site-footer__brand { grid-column: 1 / -1; margin-inline-start: 0; }
}

/* ==========================================================================
   ≤768px — MOBILE (Figma mobile frames, 400px wide: home 327:213, packing 339:2155,
   quote 341:5558). Shared components only; page layouts live in css/<page>.css.
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --gutter: 16px;                   /* Figma mobile side margin */
    --header-height: 63px;
    --section-space: 48px;
    --fs-display: 42.5px;             /* hero headline */
    --fs-h1: 35px;                    /* section titles (all 35px in the mobile frames) */
    --fs-h2: 35px;
    --fs-lead: 16px;
  }
  body { font-size: 16px; }

  /* ---- Typography ---- */
  .display-title { line-height: 0.81; }        /* 42.5 / 34.5 */
  .section-title { line-height: 0.86; letter-spacing: -0.04em; }  /* 35 / ~30 */

  /* ---- Buttons (Figma: 368 × 40.6, radius 6.3, 15.9px text, arrow 18.9 × 15.7) ---- */
  .btn,
  .btn--md,
  .btn--lg {
    min-height: 40.58px;
    padding: 9.44px 18.87px;
    gap: 7.86px;
    border-radius: 6.29px;
    font-size: 15.9px;
  }
  .btn__icon { width: 18.87px; height: 15.73px; }
  .btn--link { padding: 13.24px 26.49px; gap: 19.86px; font-size: 15.89px; }   /* "לכל ההמלצות" */
  .btn--outline { border-width: 1.2px; }
  .btn--bordered { border-width: 0.79px; }

  /* ---- Header: [hamburger][search] ···· logo (centered) ···· [cart] ---- */
  .site-header__inner { gap: 0; min-height: var(--header-height); }
  .site-header__toggle,
  .site-header__search-toggle { width: 24px; height: 40px; margin: 0; border-radius: 6px; }
  .site-header__toggle { margin-inline-start: -4px; }        /* icon sits on the 16px gutter */
  .site-header__toggle img { width: 15.26px; height: 15.26px; }
  .site-header__search-toggle img { width: 12.72px; height: 12.72px; }

  .site-header__actions { gap: 0; }
  .site-header__cart { padding: 12px 4px; margin: 0; margin-inline-end: -4px; }
  .site-header__cart img { width: 15.26px; height: 15.26px; }
  .site-header__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .site-header__logo img { width: 168px; }   /* 110.93 in the mockup; enlarged at the owner's request, 14.10; +20%, 20.10 */

  /* Slide-down menu panel (opened by the hamburger or the search icon) */
  .site-header__panel {
    gap: 12px;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 12px var(--gutter) 20px;
    border-top: 1px solid var(--color-bg-tint);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* 2nd shadow = dim backdrop over the page below the panel */
    box-shadow: var(--shadow-panel), 0 100vh 0 100vh rgba(6, 74, 136, 0.35);
  }
  .header-search { height: 48px; border-radius: 10px; }
  .header-search__input { font-size: 16px; }              /* ≥16px prevents iOS zoom */
  .header-search__btn { width: 40px; height: 40px; border-radius: 8px; }
  .site-nav__item { border-bottom-color: var(--color-bg-tint); }
  .site-nav__item:last-child { border-bottom: 0; }
  .site-nav__link { min-height: 50px; font-size: 17px; font-weight: var(--fw-medium); color: var(--color-blue-dark); }
  .site-nav__sub { padding: 0 12px 10px 0; background: transparent; }
  .site-nav__sub a { padding: 8px 0; font-size: 16px; color: var(--color-gray); }
  .site-nav__sub a:hover,
  .site-nav__sub a[aria-current="page"] { color: var(--color-main); }

  /* ---- Lead form (Figma: visible labels above empty boxes, full-width submit) ---- */
  .lead-form,
  .lead-form--lg { gap: 0; max-width: none; }
  .lead-form__title,
  .lead-form--lg .lead-form__title {
    margin-bottom: 17px;
    font-size: 35px;
    line-height: 29px;
    letter-spacing: -0.04em;
    text-align: center;
    text-wrap: balance;
  }
  .lead-form__field + .lead-form__field { margin-top: 17px; }
  /* the screen-reader label becomes the visible field label */
  .lead-form__field .visually-hidden {
    position: static !important;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding-inline: 8px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 21.08px;
    font-weight: var(--fw-medium);
    line-height: 28px;
    letter-spacing: -0.04em;
    color: var(--color-gray);
  }
  .lead-form .field,
  .lead-form .field--lg {
    min-height: 89px;
    padding: 12px 14px;
    border-width: 1px;
    border-radius: 4.96px;
    font-size: 17px;
  }
  .lead-form .field::placeholder { color: transparent; }
  .lead-form .field--textarea,
  .lead-form .field--lg.field--textarea { min-height: 346px; padding-top: 14px; }
  .lead-form__field--message .field,
  .lead-form--lg .lead-form__field--message .field { padding-bottom: 52px; }
  .lead-form__submit,
  .lead-form--lg .lead-form__submit {
    inset-inline: 0;
    gap: 7.86px;
    width: 100%;
    height: 40.58px;
    background: var(--color-blue-dark);
    border: 0.79px solid var(--color-white);
    border-radius: 6.29px;
    font-size: 15.9px;
    letter-spacing: 0;
  }
  .lead-form__submit::after {           /* arrow "←" after the text (left in RTL) */
    content: "";
    flex: none;
    width: 18.87px;
    height: 15.73px;
    background-color: currentColor;
    -webkit-mask: url("../assets/common/icon-arrow.svg") center / contain no-repeat;
            mask: url("../assets/common/icon-arrow.svg") center / contain no-repeat;
    transform: rotate(180deg);
  }

  /* ---- Stats band (Figma: vertical gradient, one column, number above label) ---- */
  .stats-band {
    padding-block: 21px 48px;
    background: linear-gradient(180deg, #1171B1 0%, #07304B 100%);
  }
  .stats-band .section-title { line-height: 32px; }
  .stats { grid-template-columns: 1fr; gap: 22px; }
  .stat { gap: 0; }
  .stat__number { order: -1; font-size: 55.5px; line-height: 1.15; letter-spacing: -0.04em; }
  .stat__label { font-size: 25px; }

  /* ---- Footer (Figma: centered stack — logo, 4 titles with short dividers,
          contact lines, hours row, social). Columns/brand use display:contents
          so their children can be re-ordered in one centered column. ---- */
  .site-footer { padding-block: 31px 48px; }
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }
  .footer-col,
  .site-footer__brand { display: contents; }

  .site-footer__logo { order: 0; margin-bottom: 17px; }
  .site-footer__logo img { width: 242px; }

  .footer-col__title {
    position: relative;
    min-width: 94.3px;
    margin: 0;
    font-size: 19.04px;
    font-weight: var(--fw-medium);
    line-height: 41.36px;               /* row pitch between the dividers */
    letter-spacing: 0.76px;
  }
  .footer-col--service .footer-col__title::before,
  .footer-col--contact .footer-col__title::before,
  .footer-col--hours .footer-col__title::before {        /* 94px blue divider */
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 94.3px;
    height: 0.83px;
    background: var(--color-main);
    transform: translateX(-50%);
  }
  .footer-col--shop .footer-col__title    { order: 1; }
  .footer-col--shop .footer-col__list     { order: 2; }
  .footer-col--service .footer-col__title { order: 3; }
  .footer-col--service .footer-col__list  { order: 4; }
  .footer-col--contact .footer-col__title { order: 5; }
  .footer-col--hours .footer-col__title   { order: 6; }
  .footer-col--contact .footer-col__list  { order: 7; }
  .footer-col--hours .footer-col__list    { order: 8; }
  .footer-social                          { order: 9; }

  /* Accordion columns (toggled by js/main.js) */
  .footer-col__toggle { position: relative; cursor: pointer; }
  .footer-col__toggle::after {          /* chevron outside the text so the title stays centered */
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 100%;
    width: 14px;
    height: 14px;
    margin-inline-start: 6px;
    margin-top: -7px;
    background-color: currentColor;
    opacity: 0.7;
    -webkit-mask: url("../assets/common/icon-chevron-down.svg") center / contain no-repeat;
            mask: url("../assets/common/icon-chevron-down.svg") center / contain no-repeat;
    transition: transform var(--transition);
  }
  .footer-col.is-open .footer-col__toggle::after { transform: rotate(180deg); }
  .footer-col--accordion .footer-col__list { display: none; gap: 8px; padding-bottom: 12px; font-size: 15px; letter-spacing: 0.4px; }
  .footer-col--accordion.is-open .footer-col__list { display: flex; }

  /* Contact lines */
  .footer-col--contact .footer-col__list {
    gap: 2.5px;
    margin-top: 13px;
    font-size: 11.23px;
    letter-spacing: 0.45px;
  }
  /* Hours: one row, two items split by a thin divider */
  .footer-col--hours .footer-col__list {
    flex-direction: row;
    justify-content: center;
    gap: 0;
    margin-top: 19px;
    font-size: clamp(11.5px, 3.25vw, 13.02px);
    line-height: 18px;
    letter-spacing: 0.52px;
    white-space: nowrap;
  }
  .footer-col--hours .footer-col__list li:first-child { padding-inline-end: 9px; border-inline-end: 1px solid #D9D9D9; }
  .footer-col--hours .footer-col__list li + li { padding-inline-start: 9px; }

  .footer-social {
    gap: 12px;
    margin: 22px 0 0;
    font-size: 17.22px;
    letter-spacing: 0.69px;
  }
  .footer-social__links { gap: 11px; }
  .footer-social__links img { width: 18.6px; height: 18.6px; object-fit: contain; }

  /* ---- Floating WhatsApp ---- */
  .whatsapp-float { width: 64px; height: 56px; bottom: 20px; left: 12px; }
  .whatsapp-float img { width: 46px; height: 46px; }
  .call-float { width: 64px; height: 56px; bottom: 86px; left: 12px; }   /* 20 + 56 + 10 */
  .call-float img { width: 30px; height: 30px; }
}

@media (max-width: 480px) {
  .btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Footer columns keep their natural width on wide screens (prevents link wrapping at 1920) */
@media (min-width: 1201px) {
  .footer-col { flex: none; }
  .footer-col__list { white-space: nowrap; }
}

/* 1201–1919px (laptops): the 1920 row (94px gaps, 355/260px logo) is wider than the
   container below ~1900px and pushed the brand block off-screen. Gaps, text and logo
   scale linearly from 1201px up to their 1920 values; as a last resort the brand
   block shrinks (the logo scales down, the social row never wraps). */
@media (min-width: 1201px) and (max-width: 1919px) {
  .site-footer__inner { column-gap: calc(18px + (100vw - 1201px) * 0.092); }
  .footer-col__title { font-size: calc(22px + (100vw - 1201px) / 240); }
  .footer-col__list { font-size: calc(16px + (100vw - 1201px) / 180); }
  .site-footer__brand { flex: 0 1 auto; }
  .site-footer__logo img { width: calc(176px + (100vw - 1201px) * 0.247); max-width: 100%; }
  .footer-social { white-space: nowrap; }
}

/* 1201–1439px: the desktop header row (32px gaps, 360px search) is wider than the
   container below ~1380px and pushed the logo off-screen under ~1260px. Gaps and
   search width scale linearly up to their 1440 values. */
@media (min-width: 1201px) and (max-width: 1439px) {
  .site-header__inner,
  .site-header__panel,
  .site-nav__list { gap: calc(24px + (100vw - 1201px) / 30); }
  .header-search { width: calc(240px + (100vw - 1201px) * 0.502); }
}