/*
 * B2B Design — Sweetango Business
 * Figma frame 77:3084  (1440 x 4060)
 * https://www.figma.com/design/wAfIKDjlmwUpRSNVdYw9lz/
 *
 * Tokens  (from Figma inspect)
 * -------------------------------------------------------
 *   --b2b-white        #ffffff
 *   --b2b-light        #f6f6f6
 *   --b2b-black        #000000
 *   --b2b-text         rgba(0,0,0,0.96)
 *   --b2b-muted        rgba(93,93,93,0.5)
 *   --b2b-radius-card  25px
 *   --b2b-radius-pill  100px
 *   --b2b-radius-glass 16px
 *   --font-hebrew      Noto Sans Hebrew
 *   --font-latin       Open Sans
 *   --font-brand       Ploni ML v2 AAA
 */

/* ---- @font-face placeholder for Ploni ML v2 AAA ----
   If self-hosting, add the font files to /assets/fonts/ and uncomment:
@font-face {
  font-family: 'Ploni ML v2 AAA';
  src: url('../fonts/PloniMLv2AAA-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  --b2b-white: #ffffff;
  --b2b-light: #f6f6f6;
  --b2b-black: #000000;
  --b2b-text: rgba(0, 0, 0, 0.96);
  --b2b-muted: rgba(93, 93, 93, 0.5);
  --b2b-radius-card: 25px;
  --b2b-radius-pill: 100px;
  --b2b-radius-glass: 16px;
  --font-hebrew: 'Noto Sans Hebrew', sans-serif;
  --font-latin: 'Open Sans', sans-serif;
  --font-brand: 'Ploni ML v2 AAA', Arial, sans-serif;
}

body {
  font-family: var(--font-hebrew) !important;
  margin: 0;
}


/* =============================================
   GLOBAL OVERRIDES
   ============================================= */

body.home,
body.dark-background {
  background-image: none !important;
  background-color: var(--b2b-white) !important;
}

main#main {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide legacy cleancore home sections */
.home-hero,
.home-advantages,
.home-contact,
.home-collaboration {
  display: none !important;
}

/* Legacy floating-buttons block removed at the template level — the sidecart
   drawer replaces it. No CSS hide rule needed anymore. */

/* Desktop / mobile utility */
@media (min-width: 1024px) {
  .mobile { display: none !important; }
}
@media (max-width: 1023px) {
  .desktop { display: none !important; }
}

@media (max-width: 1023px) {
  body { padding-top: 0 !important; }
}


/* =============================================
   HEADER  —  61 px white bar
   Figma nodes 77:3187 – 77:3226
   ============================================= */

.b2b-header {
  background: var(--b2b-white) !important;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 !important;
}

.b2b-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 50px;
  height: 61px;
  direction: rtl;
}

/* ---- Brand (RTL right): Sweetango logo | BUSINESS ---- */

.b2b-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.b2b-header__logo-link {
  display: flex;
  flex-direction: row-reverse; /* RTL row-reverse → LTR: BUSINESS | Logo left-to-right */
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

.b2b-header__brand-text {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: var(--b2b-black);
  line-height: 1;
}

.b2b-header__brand-sep {
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 5.1px;
  color: var(--b2b-black);
  line-height: 1;
}

.b2b-header__logo-img {
  display: flex;
  align-items: center;
}

.b2b-header__logo-img svg,
.b2b-header__logo-img img {
  display: block;
  height: 30px;
  width: auto;
}

/* Force logo SVG paths to black on the white B2B header */
body.home .b2b-header .b2b-header__logo-link svg path,
body.dark-background .b2b-header .b2b-header__logo-link svg path {
  fill: #000000 !important;
}

/* ---- Center nav (16 px Noto Sans Hebrew Regular) ---- */

.b2b-header__nav ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 32px;
  align-items: center;
}

.b2b-header__nav ul.menu li a {
  font-family: var(--font-hebrew);
  font-size: 16px;
  font-weight: 400;
  color: var(--b2b-black) !important;
  text-decoration: none;
  transition: color 0.15s;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
}

.b2b-header__nav ul.menu li a:hover {
  color: #666 !important;
}

/* ---- User account dropdown (logged-in state) ---- */

.b2b-header__user-wrap {
  position: relative;
}
.b2b-header__user-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.b2b-header__user-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  width: 244px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 25px 19px;
  z-index: 100000;
  direction: rtl;
  font-family: "Noto Sans Hebrew", sans-serif;
}
.b2b-header__user-menu[hidden] {
  display: none;
}
.b2b-header__user-menu-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.b2b-header__user-menu-name {
  font-family: "Noto Sans Hebrew", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  color: #000000;
}
/* Specificity bump: .site-header a overrides single-class selectors,
   so prefix dropdown link rules with .b2b-header__user-menu. */
/* Extra specificity (.b2b-header prefix) needed because
   `body.home .b2b-header a` later in this file is !important
   at the same 0,2,1 specificity and would otherwise win source-order. */
.b2b-header .b2b-header__user-menu a.b2b-header__user-menu-logout {
  font-family: "Noto Sans Hebrew", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: normal;
  letter-spacing: normal;
  color: #a0a0a0 !important;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.b2b-header .b2b-header__user-menu a.b2b-header__user-menu-logout:hover {
  color: #707070 !important;
}
.b2b-header__user-menu a.b2b-header__user-menu-item {
  display: block;
  font-family: "Noto Sans Hebrew", sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 31px;
  letter-spacing: normal;
  color: #000000;
  text-align: right;
  text-decoration: none;
  padding: 22px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  transition: color 0.15s;
}
.b2b-header__user-menu a.b2b-header__user-menu-item:hover {
  color: #555555;
}

/* Guest dropdown: "לקוח קיים / לקוח חדש" row replaces the greeting block.
   Per Figma 78:4144 there is NO divider between this row and the first item below,
   so we override the standard greeting (flex space-between) layout and strip the
   border-top from the menu-item that immediately follows. */
.b2b-header__user-menu-greeting--guest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0;
}
.b2b-header .b2b-header__user-menu a.b2b-header__user-menu-login {
  font-family: "Noto Sans Hebrew", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  letter-spacing: normal;
  color: #000000 !important;
  text-decoration: none;
}
.b2b-header .b2b-header__user-menu a.b2b-header__user-menu-login:hover {
  color: #555555 !important;
}
.b2b-header__user-menu-sep {
  font-family: "Noto Sans Hebrew", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #000000;
}
.b2b-header__user-menu-greeting--guest + a.b2b-header__user-menu-item,
.b2b-header__user-menu > a.b2b-header__user-menu-item:first-child {
  border-top: none;
}

/* Desktop: the mobile-only logged-in greeting div is `display:none` but
   still in the DOM, so it pushes the first menu-item out of :first-child
   position above. Strip the dangling top border via :first-of-type which
   targets the first <a> regardless of any preceding non-<a> siblings. */
@media (min-width: 1024px) {
  .b2b-header__user-menu > a.b2b-header__user-menu-item:first-of-type {
    border-top: none;
  }
}

/* ---- Left actions: cart | user | login text ---- */

.b2b-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr; /* items flow left-to-right for correct icon order */
}

/* Re-order DOM children to match Figma: cart, user, text.
   DOM order is user-wrap, cart, login-text — these `order` rules target
   the elements directly (the old .b2b-header__icon:first-child never
   matched .b2b-header__user-wrap, so the user icon stayed left of cart). */
.b2b-header__actions > .b2b-header__user-wrap  { order: 2; } /* user icon */
.b2b-header__actions > .b2b-header__icon--cart { order: 1; } /* cart icon */
.b2b-header__actions > .b2b-header__login-text { order: 3; } /* login text */

.b2b-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  position: relative;
  color: var(--b2b-black) !important;
}

.b2b-header__icon img,
.b2b-header__icon svg {
  display: block;
  width: 21px;
  height: auto;
}

/* Cart count badge — sits INSIDE the cart icon's basket area.
   Uses #mini-cart-count ID so WC AJAX fragment swaps preserve styling — the fragment
   replaces the entire <span>, so the selector hangs off the ID, not a class. */
.b2b-header__icon--cart #mini-cart-count {
  position: absolute;
  /* Sits in the middle of the cart's basket shape. */
  top: 59%;
  left: 53%;
  transform: translate(-50%, -50%);
  font-family: var(--font-hebrew);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--b2b-black);
  text-align: center;
  pointer-events: none;
  /* Tiny white background masks the cart-icon stroke (the "smile" / handle
     line) that would otherwise pass through the digit. Keep horizontal
     padding minimal so digits stay tight against the basket edges. */
  background: #ffffff;
  padding: 0 1px;
  border-radius: 1px;
}

/* Hide the count badge when the cart is empty (PHP adds the `is-zero` class
   on initial render and the AJAX fragment update). */
.b2b-header__icon--cart #mini-cart-count.is-zero {
  display: none;
}

.b2b-header__login-text {
  font-family: var(--font-hebrew);
  font-size: 13px;
  font-weight: 400;
  color: var(--b2b-black);
  white-space: nowrap;
  direction: rtl; /* parent .b2b-header__actions is LTR for icon order; restore RTL for Hebrew text */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Header guest text links — same look as the surrounding text, no underline,
   subtle hover to hint clickability. Explicit letter-spacing:normal beats the
   inherited `.site-header a { letter-spacing: 2px }` from style.css. */
.b2b-header .b2b-header__login-text a.b2b-header__login-text-link {
  font: inherit;
  color: inherit !important;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: normal;
  transition: color 0.15s ease;
}
.b2b-header .b2b-header__login-text a.b2b-header__login-text-link:hover {
  color: #555555 !important;
}

/* Inline logout link in the header (logged-in state) — sits between the
   user icon and the "שלום, name" greeting per Figma. Small gray underlined,
   visually matching the dropdown logout link style. */
.b2b-header .b2b-header__login-text a.b2b-header__logout-text {
  font-family: var(--font-hebrew);
  font-weight: 300;
  font-size: 13px;
  line-height: normal;
  letter-spacing: normal;
  color: #a0a0a0 !important;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.b2b-header .b2b-header__login-text a.b2b-header__logout-text:hover {
  color: #707070 !important;
}

/* All header links stay black regardless of body class —
   except inside the dark mobile drawer, where they're light. */
body.home .b2b-header a,
body.dark-background .b2b-header a {
  color: var(--b2b-black) !important;
}
body.home .b2b-header .b2b-drawer a,
body.dark-background .b2b-header .b2b-drawer a {
  color: #f6f6f6 !important;
}

/* ---- Hamburger (mobile) ---- */

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  text-decoration: none !important;
}

.hamburger .line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--b2b-black);
  border-radius: 1px;
}

/* ---- Header mobile ---- */

@media (max-width: 1023px) {
  /* Header sizing scales with viewport on mobile — outer wrapper, sticky bar,
     and inner content all share the same 12vw so there's no visible gap
     between the layers as the viewport grows. */
  .site-header { height: 12vw; }
  .b2b-header { min-height: 12vw; }
  .b2b-header__inner {
    padding: 0 16px;
    height: 12vw;
    position: relative;          /* anchor for the absolutely-centered brand */
  }

  .b2b-header__nav.desktop { display: none !important; }

  /* Brand absolutely centered in the bar, per Figma 77:3417 —
     hamburger sits at the RTL trailing edge, actions at the RTL end. */
  .b2b-header__brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 0;
  }

  /* Mobile: cursive Sweetango logo sits to the LEFT of the "|" divider.
     Parent direction is rtl; row (not row-reverse) flips visible order
     to: logo · | · BUSINESS. */
  .b2b-header__logo-link {
    flex-direction: row;
    gap: 8px;
  }

  /* Brand typography scaled to Figma 77:3417 mobile sizes */
  .b2b-header__brand-text {
    font-size: 4vw;
  }
  .b2b-header__brand-sep {
    font-size: 12px;
    letter-spacing: 3.6px;
  }
  .b2b-header__logo-img img {
    height: 6.5vw;
  }

  /* Hamburger — black thin lines on the RTL trailing edge (Figma 77:3417).
     High specificity (.b2b-header prefix + .mobile) to beat the base
     cleancore `a.hamburger`/`a.hamburger .line` gold styling in style.css. */
  .b2b-header .hamburger.mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 21px;
    height: auto;
    flex: 0 0 auto;
  }
  .b2b-header .hamburger.mobile .line {
    width: 21px;
    height: 0.2rem;
    margin: 0;
    background: #000;
    border-radius: 0;
  }
  /* Hamburger → × morph, re-geometried for the 21×14px b2b hamburger
     (the base cleancore translateY(10px) is sized for the old larger
     icon and produces a broken shape). Lines are 2px tall, 4px gaps:
     centres sit at y=1 / y=7 / y=13, so top/bottom shift ±6px to cross. */
  .b2b-header .hamburger.mobile.is-active .line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .b2b-header .hamburger.mobile.is-active .line:nth-child(2) {
    opacity: 0;
  }
  .b2b-header .hamburger.mobile.is-active .line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Cart-before-user order is handled by the base .b2b-header__actions
     rules (now fixed to target the real elements), so no mobile override
     is needed here. */

  /* Cart + user icons sized to 2rem; user icon nudged 1px down to
     vertically align with the cart icon. */
  button.b2b-header__icon.b2b-header__user-toggle,
  a.b2b-header__icon.b2b-header__icon--cart {
    width: 2rem;
  }
  button.b2b-header__icon.b2b-header__user-toggle {
    transform: translateY(0.1rem);
  }
}


/* =============================================
   MOBILE DRAWER  —  dark slide-in panel
   Figma 78:3904 (402 x 754) — panel 314 x 708, x=89, dark/black with mix-blend-multiply
   ============================================= */

.b2b-drawer {
  position: fixed;
  top: 0;              /* cover the header so only the drawer's own Sweetango logo shows (header itself becomes transparent + brand/actions hide while open — see body.b2b-drawer-open rules below) */
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;         /* below the sticky header (z-index 100) so the hamburger/× stays interactive on top of the panel */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.b2b-drawer[aria-hidden="false"] {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}
.b2b-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.b2b-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;          /* 314 / 402 ≈ 78% — matches Figma frame */
  max-width: 320px;
  height: 100%;
  box-sizing: border-box;
  background: #0a0a0a;
  color: #ffffff;
  direction: rtl;
  padding: 0 28px 36px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
/* JS programmatically focuses the panel on open (tabindex="-1"); the
   browser's default focus ring renders as a thin blue line on the panel
   edge inside the dark drawer. Suppress it — the focus is for keyboard
   trap, not a visible affordance. */
.b2b-drawer__panel:focus,
.b2b-drawer__panel:focus-visible {
  outline: none;
}
.b2b-drawer[aria-hidden="false"] .b2b-drawer__panel {
  transform: translateX(0);
}

.b2b-drawer__brand {
  text-align: center;
  margin-top: 60px;        /* clearance below the header's × button (header sits transparently above the drawer while open) */
  margin-bottom: 86px;     /* Figma: logo bottom y≈188, first nav top y≈277 → 89px gap */
}
.b2b-drawer__logo {
  display: inline-block;
  width: 183px;        /* matches Figma logo width */
  /* The SVG file has preserveAspectRatio="none" + width/height="100%" so the
     browser renders it at the default 300x150 viewport ratio when used as <img>.
     Lock the displayed aspect ratio to the SVG's actual viewBox (100.289 x 30.517)
     so it renders as a single horizontal wordmark, not a stretched 2:1 block. */
  aspect-ratio: 100.289 / 30.5174;
  height: auto;
  object-fit: contain;
  /* logo SVG ships dark — invert to white */
  filter: brightness(0) invert(1);
}

.b2b-drawer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 29px;           /* Figma nav items at y=287,335,383,431 → 48px stride; minus 19px line ≈ 29px gap */
}
.b2b-drawer__nav a {
  display: block;
  font-family: var(--font-hebrew, 'Noto Sans Hebrew', sans-serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1;
  color: #f6f6f6 !important;
  text-decoration: none !important;
  text-align: right;
}
.b2b-drawer__nav a:hover,
.b2b-drawer__nav a:focus { color: #ffffff !important; }

.b2b-drawer__footer {
  margin-top: auto;
}
.b2b-drawer__login {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-hebrew, 'Noto Sans Hebrew', sans-serif);
  font-size: 16px;
  font-weight: 400;
  color: #f6f6f6;
}
.b2b-drawer__login a {
  color: #f6f6f6 !important;
  text-decoration: none !important;
}
.b2b-drawer__login-sep {
  color: rgba(246, 246, 246, 0.6);
}

.b2b-drawer__cta {
  display: flex;
  flex-direction: row-reverse;  /* RTL: arrow on the left of the text */
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  border-radius: 9px;           /* Figma pill radius = 9px */
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16.5px);
          backdrop-filter: blur(16.5px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f6f6f6 !important;
  font-family: var(--font-hebrew, 'Noto Sans Hebrew', sans-serif);
  font-weight: 300;
  font-size: 19px;
  text-decoration: none !important;
}
.b2b-drawer__cta-arrow {
  width: 15px;
  height: auto;
  /* arrow ships black — invert to white for dark CTA */
  filter: brightness(0) invert(1);
}

/* Lock body scroll while drawer is open */
body.b2b-drawer-open { overflow: hidden; }

/* While the drawer is open, dissolve the header into the dark drawer so
   only the drawer's own Sweetango logo is visible (no two logos stacked).
   The hamburger stays clickable as the × close affordance — its lines
   flip to white so they read on the dark panel underneath. */
body.b2b-drawer-open .b2b-header {
  background: transparent !important;
  box-shadow: none !important;
}
body.b2b-drawer-open .b2b-header__brand,
body.b2b-drawer-open .b2b-header__actions {
  visibility: hidden;
}
body.b2b-drawer-open .b2b-header .hamburger.mobile .line {
  background: #ffffff;
}

/* Desktop: hide the drawer entirely */
@media (min-width: 1024px) {
  .b2b-drawer { display: none !important; }
}


/* =============================================
   GLASS CTA  —  shared component  (319 x 66)
   Figma nodes 77:3088-3091, 77:3094-3097, etc.
   ============================================= */

.b2b-glass-cta {
  display: inline-flex;
  flex-direction: row-reverse; /* RTL row-reverse → arrow left, text right */
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 319px;
  height: 66px;
  border-radius: var(--b2b-radius-glass);
  backdrop-filter: blur(16.5px);
  -webkit-backdrop-filter: blur(16.5px);
  background:
    linear-gradient(148deg, rgba(255,255,255,0.35) 23.4%, rgba(214,214,214,0.30) 117.5%),
    rgba(0,0,0,0.06);
  box-shadow: 0 2px 42px 4px rgba(0,0,0,0.01);
  text-decoration: none !important;
  color: var(--b2b-black) !important;
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: 25px;
  transition: opacity 0.2s;
}

.b2b-glass-cta:hover { opacity: 0.88; }

.b2b-glass-cta__icon {
  width: 25px;
  height: auto;
}


/* =============================================
   HERO  —  light food-photo background
   Figma: 0-956 px (header overlaps top 61 px)
   Visible hero height = 895 px at 1440 viewport
   ============================================= */

.b2b-hero {
  position: relative;
  width: 100%;
  height: 66vw;          /* 956 / 1440 ≈ 66 % */
  max-height: 895px;
  min-height: 480px;
  overflow: hidden;
  background-color: #f8f5f0; /* warm fallback */
}

.b2b-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.b2b-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.b2b-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: min(26%, 235px); /* 235 / 895 ≈ 26 % — caps at the Figma value so content doesn't overflow once .b2b-hero hits its 895px max-height (~1357px viewport) */
}

.b2b-hero__headline {
  font-family: var(--font-hebrew);
  font-size: 64px;
  font-weight: 300; /* Light */
  color: var(--b2b-black);
  line-height: normal;
  margin: 0 0 50px;
  text-align: center;
  direction: ltr;
  max-width: 940px;
  padding: 0 20px;
}

/* ---- Pill button — light grey (249 x 62) ---- */

.b2b-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  border-radius: var(--b2b-radius-pill);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
  border: none;
}

.b2b-pill-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.b2b-pill-btn--light {
  width: 249px;
  height: 62px;
  background: var(--b2b-light);
  color: var(--b2b-black) !important;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 22px;
}

/* Fixed CTA — bottom-right of viewport, scrolls to #contact */
.b2b-glass-cta--fixed {
  position: fixed;
  z-index: 999;
  bottom: 36px;
  right: 36px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.13);
}
/* Hide the floating CTA while the mobile drawer is open — the drawer
   has its own "צרו איתנו קשר" CTA, and at z-index 999 the floating
   button would otherwise sit on top of the open drawer. */
body.b2b-drawer-open .b2b-glass-cta--fixed {
  display: none;
}

/* ---- Hero mobile  (Figma 77:3459 image · 77:3460 headline · 77:3501 CTA) ---- */
@media (max-width: 1023px) {
  .b2b-hero {
    height: 578px;
    min-height: 0;
    max-height: none;
  }

  /* Background image — Figma 77:3459: the photo is 202.94% of the hero
     width, shifted left -84.78% so the cake-stand sits to the right of
     the headline rather than being cropped off the bottom. */
  .b2b-hero__bg img {
    position: absolute;
    top: 0;
    left: -84.78%;
    width: 202.94%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .b2b-hero__content {
    padding-top: 86px; /* 132 (Figma y) − 46 (header height) */
  }

  /* Headline — Figma 77:3460 */
  .b2b-hero__headline {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-weight: 300;
    font-size: 27px;
    line-height: 50px;
    color: #000;
    text-align: center;
    margin: 0;
    padding: 0 20px;
  }

  /* Hero CTA — Figma 77:3501: light #f6f6f6 pill, Open Sans 16px, 187×44.
     (Earlier this was hidden on mobile — the design does include it.) */
  .b2b-hero .b2b-pill-btn--light {
    display: inline-flex;
    width: 187px;
    height: 44px;
    margin-top: 31px;
    background: #f6f6f6;
    color: #000 !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    border-radius: 100px;
  }

  .b2b-glass-cta--fixed {
    bottom: 20px;
    right: 20px;
    width: 280px;
    height: 56px;
    font-size: 20px;
  }
}


/* =============================================
   SPOON / FEATURES SECTION
   Figma: y 956 – 1937 (≈ 981 px)
   ============================================= */

.b2b-spoon {
  position: relative;
  background: var(--b2b-white);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* When a nav link with href="#advantages" scrolls to this section, leave
     room for the sticky header (61px desktop / 12vw mobile) so the spoon top
     isn't hidden under the bar. clamp keeps the offset sensible at every
     viewport. */
  scroll-margin-top: clamp(61px, 12vw, 80px);
}

.b2b-spoon__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}

.b2b-spoon__image {
  width: auto;
  height: 460px;
  margin-bottom: 0;
}

.b2b-spoon__text {
  position: absolute;
  top: 44%;
  font-family: var(--font-hebrew);
  font-weight: 300;
  font-size: 27px;
  color: var(--b2b-black);
  text-align: center;
  line-height: 2;
  max-width: 798px;
  margin: 0;
  direction: rtl;
}


/* ---- Spoon mobile ---- */
/* Mobile uses the desktop's overlay pattern (text on top of spoon) so the
   gradient SVG — which fades to #F6F6F6 at the top — doesn't disappear
   against the white page background. Scaled down for 402px width. */
@media (max-width: 1023px) {
  .b2b-spoon {
    padding: 40px 20px;
    position: relative;
  }

  .b2b-spoon__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: none;
  }

  .b2b-spoon__image {
    height: 280px;
    width: auto;
    flex-shrink: 0;
    margin: 0;
  }

  .b2b-spoon__text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
    color: #000;
    margin: 0;
    padding: 0 20px;
    text-align: center;
    direction: rtl;
    white-space: normal;
  }
}


/* =============================================
   USE-CASES  2 x 2 GRID
   Figma: y 1937 – 3277
   Cards 660 x 652, gap 23 / 36, radius 25
   ============================================= */

.b2b-usecases {
  position: relative;
  background: var(--b2b-white);
  padding: 0 50px 60px;
}

.b2b-usecases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 23px;
  max-width: 1343px; /* 660 + 23 + 660 */
  margin: 0 auto;
  direction: ltr; /* LTR grid: Resort(left) Patisserie(right) Office(left) Café(right) per Figma 77:3417 */
}

.b2b-usecases__card {
  position: relative;
  border-radius: var(--b2b-radius-card);
  overflow: hidden;
  aspect-ratio: 660 / 652;
  background: var(--b2b-light);
  cursor: pointer;
}

.b2b-usecases__card-img {
  position: absolute;
  max-width: none;          /* allow image to exceed card bounds */
}

/* Per-card image positioning — exact Figma transforms */
/* Card 1 — Resort: breakfast table, slight left shift */
.b2b-usecases__card:nth-child(1) .b2b-usecases__card-img {
  width: 207.9%;
  height: 103.37%;
  left: -14.15%;
  top: 0;
}

/* Card 2 — Patisserie: zoomed in on chef's torso + pot */
.b2b-usecases__card:nth-child(2) .b2b-usecases__card-img {
  width: 351.4%;
  height: 185.58%;
  left: -42.3%;
  top: -23.93%;
}

/* Card 3 — Office: zoomed in on woman with latte */
.b2b-usecases__card:nth-child(3) .b2b-usecases__card-img {
  width: 591.74%;
  height: 296.93%;
  left: -187.98%;
  top: -81.6%;
}

/* Card 4 — Café: babka + coffee, moderate zoom */
.b2b-usecases__card:nth-child(4) .b2b-usecases__card-img {
  width: 155.15%;
  height: 153.03%;
  left: -13.33%;
  top: -5.45%;
}

/* Card hover effect — a white radial ring sweeps in from outside the card
   and converges into a soft glow around the top-right "+" button.
   The @property registration lets the ring's radius tween (a plain
   gradient's color-stops aren't animatable on their own).
   The overlay sits at z-index 1, below the label (2) and the "+" (3), so
   those stay crisp on top. */
@property --b2b-ring-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 150%;
}
.b2b-usecases__card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  --b2b-ring-r: 150%;        /* ring parked outside the card → nothing visible */
  background: radial-gradient(circle at 88% 12%,
              transparent 0,
              transparent calc(var(--b2b-ring-r) - 18%),
              rgba(255, 255, 255, 0.9) var(--b2b-ring-r),
              transparent calc(var(--b2b-ring-r) + 18%));
  opacity: 0;
  transition: --b2b-ring-r 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.b2b-usecases__card:hover .b2b-usecases__card-overlay {
  --b2b-ring-r: 24%;         /* ring contracts to a soft glow around the "+" */
  opacity: 1;
}

/* Plus icon — white circle + thin cross per Figma */
.b2b-usecases__card-plus {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 34px;
  height: 34px;
  border: none;
  background: var(--b2b-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 3;
}

.b2b-usecases__card-plus:hover { opacity: 0.6; }

/* Hide the text span, draw + with CSS lines */
.b2b-usecases__card-plus span {
  display: none;
}

/* Horizontal line */
.b2b-usecases__card-plus::before,
.b2b-usecases__card-plus::after {
  content: '';
  position: absolute;
  background: var(--b2b-black);
}
.b2b-usecases__card-plus::before {
  width: 17px;
  height: 1px;
}
.b2b-usecases__card-plus::after {
  width: 1px;
  height: 17px;
}

/* Card label — top-right (RTL start) */
.b2b-usecases__card-label {
  position: absolute;
  top: 73px;
  right: 70px;
  z-index: 2;
  text-align: right;
  direction: rtl;
}

.b2b-usecases__card-prefix,
.b2b-usecases__card-title {
  display: block;
  font-family: var(--font-hebrew);
  font-weight: 300;
  font-size: 35px;
  color: var(--b2b-black);
  line-height: 1.4;
}


/* ---- Use-cases mobile ---- */
@media (max-width: 1023px) {
  .b2b-usecases {
    padding: 0 20px 40px;
  }

  .b2b-usecases__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    direction: rtl;
    max-width: 362px;
    margin: 0 auto;
  }

  .b2b-usecases__card {
    border-radius: 19px;
    aspect-ratio: 362 / 358;
  }

  .b2b-usecases__card:nth-child(4) {
    border-radius: 25px; /* per Figma — card 4 is 25px, the others are 19px */
  }

  /* No heavy overlay on mobile — the Figma 90% white is a backdrop BEHIND
     the photo, not a veil over it. Inherit the desktop subtle 6% tint so
     the food photography renders at full opacity. */

  .b2b-usecases__card-label {
    top: 44px;
    right: 16px;
  }

  .b2b-usecases__card-prefix,
  .b2b-usecases__card-title {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-weight: 300;
    font-size: 25px;
    line-height: 1.2;
    color: #000;
  }

  .b2b-usecases__card-plus {
    top: 8px;
    right: 6px;
    width: 36px;
    height: 36px;
    background: #fff;
  }
  .b2b-usecases__card-plus::before {
    width: 14px;
    height: 1px;
  }
  .b2b-usecases__card-plus::after {
    width: 1px;
    height: 14px;
  }
}


/* =============================================
   CONTACT FORM
   Figma: y 3400 – 3800
   Pill inputs 347 x 66, radius 100 px
   Submit 226 x 66, black pill
   ============================================= */

.b2b-contact {
  background: var(--b2b-white);
  padding: 120px 50px 80px;
  text-align: center;
}

.b2b-contact__title {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: 25px;
  color: var(--b2b-black);
  text-align: center;
  margin: 0 0 50px;
  direction: rtl;
}

.b2b-contact__form {
  max-width: 720px;
  margin: 0 auto;
}

/* Gravity Forms → 2-column pill inputs */
.b2b-contact .gform_body .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  direction: rtl;
}

.b2b-contact .gfield {
  margin: 0 !important;
  padding: 0 !important;
  grid-column: span 1 !important;  /* Override GF's span 6 → 2-column layout */
}

.b2b-contact .gfield_label {
  display: none !important; /* Figma uses placeholder text, not visible labels */
}

.b2b-contact .ginput_container {
  margin: 0 !important;
}

.b2b-contact input[type="text"],
.b2b-contact input[type="tel"],
.b2b-contact input[type="email"],
.b2b-contact input[type="number"],
.b2b-contact select,
.b2b-contact textarea {
  font-family: var(--font-latin) !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  height: 66px !important;
  border: none !important;
  border-radius: var(--b2b-radius-pill) !important;
  padding: 0 30px !important;
  width: 100% !important;
  background: var(--b2b-light) !important;
  color: #0a0a0a !important;
  direction: rtl;
  text-align: right;
  box-sizing: border-box !important;
  transition: box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.b2b-contact input::placeholder,
.b2b-contact textarea::placeholder {
  color: #0a0a0a;
  opacity: 0.5;
}

.b2b-contact input:focus,
.b2b-contact select:focus,
.b2b-contact textarea:focus {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08) !important;
  outline: none !important;
}

/* Hide email field (6th child, after honeypot) — not in the Figma design */
.b2b-contact .gform_fields .gfield:nth-child(6) {
  display: none !important;
}

/* Select chevron */
.b2b-contact select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 25px center !important;
  padding-left: 50px !important;
}

/* Submit — black pill  (226 x 66) */
.b2b-contact .gform_footer,
.b2b-contact .gform_page_footer {
  display: flex !important;
  justify-content: center !important;
  margin-top: 40px !important;
  padding: 0 !important;
}

/* Submit button: BLACK with 2px black border. On hover, border turns white.
   Selector includes .gform_wrapper.gravity-theme .sweetango-forms to outrank
   the global theme rule in style.css (.sweetango-forms input[type=submit] { color: #FFF !important }). */
.b2b-contact .gform_wrapper.gravity-theme .sweetango-forms input[type="submit"],
.b2b-contact .gform_wrapper.gravity-theme .sweetango-forms button[type="submit"],
.b2b-contact input[type="submit"],
.b2b-contact button[type="submit"] {
  font-family: var(--font-latin) !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  border-radius: var(--b2b-radius-pill) !important;
  width: 226px !important;
  height: 66px !important;
  /* Reset the theme/Gravity-Forms leftover padding + line-height — on a
     fixed-height border-box button they push the centred label off. */
  padding: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: border-color 0.2s, transform 0.15s !important;
  -webkit-appearance: none;
}

.b2b-contact .gform_wrapper.gravity-theme .sweetango-forms input[type="submit"]:hover,
.b2b-contact .gform_wrapper.gravity-theme .sweetango-forms button[type="submit"]:hover,
.b2b-contact input[type="submit"]:hover,
.b2b-contact button[type="submit"]:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

.b2b-contact__submit-row { display: none; }

/* ---- Contact mobile ---- */
@media (max-width: 1023px) {
  .b2b-contact {
    padding: 60px 20px 0;
  }

  .b2b-contact__title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 19px;
    color: #000;
    margin: 0 0 30px;
    direction: rtl;
  }

  .b2b-contact__form {
    max-width: 362px;
    margin: 0 auto;
  }

  .b2b-contact .gform_body .gform_fields {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .b2b-contact input[type="text"],
  .b2b-contact input[type="tel"],
  .b2b-contact input[type="email"],
  .b2b-contact input[type="number"],
  .b2b-contact select,
  .b2b-contact textarea {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    height: 49px !important;
    padding: 0 28px !important;
    background: #f6f6f6 !important;
    color: #0a0a0a !important;
    border-radius: 100px !important;
  }

  .b2b-contact input::placeholder,
  .b2b-contact textarea::placeholder {
    color: rgba(10, 10, 10, 0.85);
    opacity: 1;
  }

  .b2b-contact .gform_footer,
  .b2b-contact .gform_page_footer {
    margin-top: 33px !important;
  }

  .b2b-contact .gform_wrapper.gravity-theme .sweetango-forms input[type="submit"],
  .b2b-contact .gform_wrapper.gravity-theme .sweetango-forms button[type="submit"],
  .b2b-contact input[type="submit"],
  .b2b-contact button[type="submit"] {
    font-family: 'Open Sans', sans-serif !important;
    /* Responsive but anchored around the original 176×39 / 16px so the
       inline bottom CTA stays visually subtle vs the popup CTA (which is
       the primary action). Clamp values centred on iPhone 8/SE width
       (375px): at that width the button matches the original size exactly.
       Floors meet the 40px touch-target rule of thumb. svw stays stable
       when the browser address bar shows/hides. */
    font-size: 1.5rem !important;                        /* 15px in 10px-root */
    font-weight: 300 !important;
    width: clamp(160px, 47svw, 200px) !important;
    height: clamp(40px, 10.5svw, 46px) !important;
    /* Reset leftover GF/theme padding + line-height — on a height-bound
       border-box button they push the centred label off. */
    padding: 0 !important;
    line-height: 1 !important;
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 100px !important;
  }
}


/* =============================================
   FOOTER  —  white horizontal bar
   Figma: y 3920 – 4060
   ============================================= */

.b2b-footer {
  background: var(--b2b-white);
  padding: 36px 50px;
  border-top: 1px solid #f0f0f0;
}

.b2b-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  flex-direction: row-reverse; /* socials→left, contact→center, logo→right */
}

/* Logo (visual right) */
.b2b-footer__logo a {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

.b2b-footer__logo img {
  display: block;
  height: 64px;
  width: auto;
}

/* Contact info (center) */
.b2b-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  direction: ltr; /* email left, phone right — matches Figma positions */
}

.b2b-footer__contact-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.b2b-footer__contact-label {
  font-family: var(--font-hebrew);
  font-weight: 300;
  font-size: 19px;
  color: var(--b2b-muted);
  line-height: 40px;
  direction: rtl;
}

.b2b-footer__contact-value {
  font-family: var(--font-hebrew);
  font-weight: 700;
  font-size: 23px;
  color: var(--b2b-text);
  text-decoration: none !important;
  line-height: 40px;
}

.b2b-footer__contact-value:hover {
  color: var(--b2b-black) !important;
}

/* Social icons (visual left) */
.b2b-footer__socials {
  display: flex;
  gap: 12px;
  align-items: center;
  direction: ltr; /* Keep DOM order: F, IG, TT left-to-right */
}

.b2b-footer__socials a {
  color: var(--b2b-black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: opacity 0.2s;
}

.b2b-footer__socials a:hover { opacity: 0.6; }

.b2b-footer__socials svg {
  width: 20px;
  height: 20px;
}

/* ---- Footer mobile ---- */
@media (max-width: 1023px) {
  .b2b-footer {
    padding: 60px 20px 30px;
    border-top: none;
  }

  .b2b-footer__inner {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
  }

  /* Order per Figma 77:3417: socials → contact stack → logo */
  .b2b-footer__socials { order: 1; gap: 16px; }
  .b2b-footer__contact { order: 2; flex-direction: column; gap: 18px; align-items: center; }
  .b2b-footer__logo    { order: 3; }

  .b2b-footer__contact-block {
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .b2b-footer__contact-label {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: rgba(93, 93, 93, 0.5);
    line-height: 1.5;
  }

  /* email block first → 19px bold */
  .b2b-footer__contact-block:nth-child(1) .b2b-footer__contact-value {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #000;
    line-height: 1.4;
  }

  /* phone block second → 21px bold */
  .b2b-footer__contact-block:nth-child(2) .b2b-footer__contact-value {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: #000;
    line-height: 1.4;
  }

  .b2b-footer__logo img {
    height: 54px;
    width: auto;
    transform: rotate(1.63deg);
    margin-top: 12px;
  }
}


/* =============================================
   GRAVITY FORMS  —  misc overrides
   ============================================= */

.gfield_label {
  direction: rtl;
  text-align: right;
}

.b2b-contact .gform_validation_errors {
  border-radius: 16px !important;
  margin-bottom: 20px !important;
}

.b2b-contact .gform_wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* =============================================
   B2B USE-CASE POPUP  (.st-modal / .st-qv-*)
   Ported from sweetango.co.il quick-view modal
   ============================================= */

.b2b-usecases__card-plus.quick-view-trigger {
  cursor: pointer;
}

/* Modal shell — entrance/exit animations match the contact modal pattern.
   Always rendered (display:flex), with visibility + opacity gating interactivity
   so CSS transitions can run on both open and close. */
.st-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.st-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}
.st-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.st-modal-container {
  position: relative;
  background: #ffffff;
  width: 90%;
  max-width: 92rem;
  min-height: 550px;
  max-height: 64vh;
  border-radius: 17px;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.13), 0 20px 50px rgba(0, 0, 0, 0.3);
  direction: rtl;
  transform: translateY(20px) scale(0.985);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-modal.is-open .st-modal-container {
  transform: translateY(0) scale(1);
}
.st-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #ffffff;
  color: #1a1a1a;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, background 0.2s ease;
}
.st-modal-close:hover {
  transform: rotate(90deg);
  background: #f4f4f4;
}
.st-modal-close svg {
  fill: currentColor;
  width: 12px;
  height: 12px;
}

/* Two-column layout */
.st-qv-layout {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
  min-height: 550px;
}

/* LEFT column — info */
.st-qv-info {
  width: 50%;
  padding: 6rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  overflow: auto;
  direction: rtl;
}
.st-qv-head {
  padding: 0 4rem;
}
.st-qv-info h1 {
  font-size: 3.2rem;
  margin: 0 0 1.5rem;
  color: #000000;
  font-weight: 700;
  text-align: start;
  font-family: "Noto Sans Hebrew", sans-serif;
}
.st-qv-excerpt {
  margin-bottom: 2rem;
  color: #666666;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* Tabs (collapsible sections) */
.st-qv-tabs {
  margin-bottom: 3rem;
  padding: 0 4rem;
}
.st-qv-tab {
  border-bottom: 1px solid rgba(160, 160, 160, 0.25);
  padding: 2rem 0;
}
.st-qv-tab:last-child {
  border: none;
}
.st-qv-tab-header {
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  text-align: right;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000000;
  transition: color 0.3s ease;
  font-size: 1.9rem;
  font-weight: 300;
  font-family: "Noto Sans Hebrew", sans-serif;
}
.st-qv-tab-header:hover {
  color: #555555;
}
.st-qv-tab-header .st-qv-icon-wrap {
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
  border: 1px solid #000000;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.st-qv-tab-header .st-qv-icon {
  width: 1rem;
  height: auto;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.st-qv-tab.is-open .st-qv-tab-header .st-qv-icon {
  transform: scaleY(-1);
}
.st-qv-tab.is-open .st-qv-tab-header .st-qv-icon-wrap {
  background: #000000;
  color: #ffffff;
}
.st-qv-tab-content {
  font-size: 1.4rem;
  color: #333333;
  line-height: 1.6;
  padding-top: 1.2rem;
  display: none;
}
.st-qv-tab.is-open .st-qv-tab-content {
  display: block;
}

/* Sticky bottom: price + order CTA */
.st-qv-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-between;
  position: sticky;
  width: 100%;
  background: white;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 4rem;
  border-top: 1px solid rgba(160, 160, 160, 0.25);
}
.st-qv-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(0, 0, 0, 0.96);
  font-family: "Noto Sans Hebrew", sans-serif;
  text-decoration: none;
  direction: rtl;
  unicode-bidi: isolate;
}
.st-qv-phone:hover {
  color: rgba(0, 0, 0, 0.96);
}
.st-qv-phone:hover .st-qv-phone-num {
  text-decoration: underline;
}
.st-qv-phone-ext {
  font-size: 19px;
  font-weight: 300;
  line-height: 40px;
  color: rgba(93, 93, 93, 0.5);
  font-family: "Noto Sans Hebrew", sans-serif;
}
.st-qv-phone-num {
  font-size: 23px;
  font-weight: 700;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.96);
  font-family: "Noto Sans Hebrew", sans-serif;
  letter-spacing: 0;
  /* Keep '*' visually to the left of the digits */
  unicode-bidi: isolate;
}
.st-qv-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem 2.8rem;
  background: #000000;
  color: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 100px;
  font-size: 1.6rem;
  font-weight: 500;
  font-family: "Noto Sans Hebrew", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.st-qv-order-btn:hover {
  background: #ffffff;
  color: #000000;
}

/* RIGHT column — media gallery */
.st-qv-media {
  width: 50%;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  position: relative;
}
.st-qv-media .qv-swiper {
  width: 100%;
  height: 100%;
}
.st-qv-media .qv-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-qv-media .qv-swiper .swiper-slide img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-qv-media .qv-swiper .swiper-button-next,
.st-qv-media .qv-swiper .swiper-button-prev {
  color: #000000;
  width: 38px;
  height: 38px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  top: auto;
  bottom: 2rem;
}
.st-qv-media .qv-swiper .swiper-button-next::after,
.st-qv-media .qv-swiper .swiper-button-prev::after {
  font-size: 1.4rem;
  font-weight: 700;
}
.st-qv-media .qv-swiper .swiper-pagination {
  bottom: 1.6rem;
}
.st-qv-media .qv-swiper .swiper-pagination-bullet-active {
  background: #000000;
}

/* =============================================
   POPUP — MOBILE  (Figma 78:4015)
   The card is a container-query context capped at the 362px Figma
   width; every inner size is cqw (% of the card width) so the popup
   scales proportionally and looks identical on any phone size.
   1px ≈ 0.2762cqw at the 362px base.
   ============================================= */
@media (max-width: 1023px) {
  /* Light frosted overlay per Figma 78:4046 — not the heavy 60% black */
  .st-modal-overlay {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /* Card = query container, capped at Figma width, scales down on
     narrower phones. Figma 78:4077: radius 19px, soft single shadow. */
  .st-modal-container {
    width: min(362px, 92vw);
    max-width: none;
    min-height: 0;
    max-height: 90vh;
    border-radius: 19px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.13);
    container-type: inline-size;
  }

  /* Layout capped at 90vh so the info column can flex-scroll inside it
     instead of overflowing the card on short screens (e.g. iPhone SE). */
  .st-qv-layout {
    flex-direction: column-reverse;
    height: auto;
    max-height: 90vh;
    min-height: 0;
  }

  /* Image — Figma 78:4098: 364px tall on a 362px card ≈ 100.55cqw.
     Capped at 46vh so it never eats the whole popup on short screens. */
  .st-qv-media {
    width: 100%;
    height: min(100.55cqw, 46vh);
    flex-shrink: 0;
  }

  /* Info column — sizes to its content, but shrinks (flex-shrink +
     min-height:0) and scrolls internally once the layout hits its
     90vh cap, so the sticky .st-qv-actions bar stays pinned & visible. */
  .st-qv-info {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: flex-start;
    padding: 7.46cqw 0 0;            /* ~27px */
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 35, 35, 0.25) transparent;
  }
  /* Styled scrollbar thumb per Figma 78:4097 */
  .st-qv-info::-webkit-scrollbar { width: 1.4cqw; }       /* ~5px */
  .st-qv-info::-webkit-scrollbar-track { background: transparent; }
  .st-qv-info::-webkit-scrollbar-thumb {
    background: rgba(37, 35, 35, 0.25);
    border-radius: 100px;
  }

  .st-qv-head { padding: 0 5.52cqw; }                     /* ~20px */

  /* Title — Figma 78:4133: 25px Noto Sans Hebrew Light, right-aligned */
  .st-qv-info h1 {
    font-size: 6.91cqw;                                   /* ~25px */
    font-weight: 300;
    text-align: right;
    margin: 0 0 5.52cqw;                                  /* ~20px */
  }

  .st-qv-excerpt { font-size: 3.87cqw; margin-bottom: 4.4cqw; }

  .st-qv-tabs { padding: 0 5.52cqw; margin-bottom: 0; }

  .st-qv-tab { padding: 4.4cqw 0; }                       /* ~16px */

  /* Tab header — Figma 78:4084: 16px Noto Sans Hebrew Light */
  .st-qv-tab-header {
    font-size: 4.42cqw;                                   /* ~16px */
    font-weight: 300;
  }

  /* Chevron — Figma 78:4094: a BARE down-chevron, no circle/border */
  .st-qv-tab-header .st-qv-icon-wrap,
  .st-qv-tab.is-open .st-qv-tab-header .st-qv-icon-wrap {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
  }
  .st-qv-tab.is-open .st-qv-tab-header .st-qv-icon { color: #000; }
  .st-qv-tab-header .st-qv-icon { width: 3.6cqw; }        /* ~13px */

  .st-qv-tab-content { font-size: 3.87cqw; }              /* ~14px */

  /* Sticky bottom bar — ~64px tall in Figma (divider y718 → card y782) */
  .st-qv-actions {
    padding: 3.3cqw 5.52cqw;                              /* ~12px 20px */
    gap: 4.4cqw;
  }

  /* Order button — Figma 78:4081: black pill ~133×35 */
  .st-qv-order-btn {
    height: 9.67cqw;                                      /* ~35px */
    padding: 0 6.9cqw;                                    /* ~25px */
    font-size: 4.42cqw;                                   /* ~16px */
    font-weight: 400;
    gap: 2.2cqw;
    border-width: 1px;
  }

  /* Phone — Figma 78:4141 number 19px Bold, 78:4142 ext 14px Light */
  .st-qv-phone { gap: 2.2cqw; }
  .st-qv-phone-num { font-size: 5.25cqw; line-height: 1.5; }   /* ~19px */
  .st-qv-phone-ext { font-size: 3.87cqw; line-height: 1.5; }   /* ~14px */

  /* Close button — Figma 78:4105: ~39px circle */
  .st-modal-close {
    width: 10.77cqw;                                      /* ~39px */
    height: 10.77cqw;
    top: 3.87cqw;                                         /* ~14px */
    right: 3.87cqw;
  }
  .st-modal-close svg { width: 3.6cqw; height: 3.6cqw; }
}

body.b2b-popup-open {
  overflow: hidden;
}


/* =============================================
   B2B CONTACT MODAL  (.b2b-contact-modal)
   Glassmorphism popup triggered by the hero CTA and the fixed CTA.
   Gravity Form #1 is rendered once inline and MOVED in by b2b-popup.js,
   so there is only ever one #gform_ajax_frame_1 iframe on the page.
   ============================================= */

.b2b-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000; /* above .st-modal (999999) so contact modal always wins if both could be open */
  display: flex;                            /* always rendered; visibility/opacity gate interactivity */
  align-items: stretch;
  justify-content: center;
  direction: rtl;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;   /* fade out, then hide */
}

.b2b-contact-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s linear 0s;       /* show immediately, fade in */
}

.b2b-contact-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.b2b-contact-modal__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 60px 0 0;           /* top margin only — panel fills width and reaches bottom */
  padding: 24px 80px 64px;    /* reduced top padding so title sits higher */
  backdrop-filter: blur(16.5px);
  -webkit-backdrop-filter: blur(16.5px);
  background:
    linear-gradient(120.15deg, rgba(255, 255, 255, 0.27) 2.95%, rgba(209, 186, 152, 0.27) 104.78%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  box-shadow: 0 2px 42px 4px rgba(0, 0, 0, 0.01);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(20px) scale(0.985);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.b2b-contact-modal.is-open .b2b-contact-modal__panel {
  transform: translateY(0) scale(1);
}

.b2b-contact-modal__cursor {
  position: absolute;
  top: -90px;                 /* lifted higher (was -54px) so it sits in a clear row above the form */
  left: -100px;               /* pulled outside the form-view edge (was 0) — pairs visually with the close button on the right */
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Close button — sits inside each view (.b2b-contact-modal__form-view and
   .b2b-contact-modal__success-view), anchored to the top-right corner,
   sticking out so it pairs symmetrically with the cursor arrow on the left
   and shares the same row/line. */
.b2b-contact-modal__close {
  position: absolute;
  top: -90px;                 /* same row as the cursor arrow */
  right: -100px;              /* pulled outside the form-view edge to mirror the cursor */
  background: #ffffff;
  color: #1a1a1a;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, background 0.2s ease;
}

.b2b-contact-modal__close:hover {
  transform: rotate(90deg);
  background: #f4f4f4;
}

.b2b-contact-modal__close svg {
  fill: currentColor;
  width: 12px;
  height: 12px;
}

@media (max-width: 1023px) {
  .b2b-contact-modal__panel {
    margin: 60px 0 0;
    padding: 24px 24px 48px;
  }
}


/* ---- Form view ---- */

.b2b-contact-modal__form-view {
  position: relative;             /* anchors absolute-positioned cursor inside this view */
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  direction: rtl;
}

.b2b-contact-modal__title {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: 25px;
  color: #0a0a0a;
  text-align: right;
  margin: 0 0 32px;
  direction: rtl;
  transform: translateY(-40px);   /* lifts title visually 40px without moving form fields */
}

/* 2-col grid of pills (right col first under RTL) */
.b2b-contact-modal .gform_body .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  direction: rtl;
}

.b2b-contact-modal .gfield {
  margin: 0 !important;
  padding: 0 !important;
  grid-column: span 1 !important;
}

.b2b-contact-modal .gfield_label {
  display: none !important;
}

.b2b-contact-modal .ginput_container {
  margin: 0 !important;
}

.b2b-contact-modal input[type="text"],
.b2b-contact-modal input[type="tel"],
.b2b-contact-modal input[type="email"],
.b2b-contact-modal input[type="number"],
.b2b-contact-modal select,
.b2b-contact-modal textarea {
  font-family: var(--font-latin) !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  height: 66px !important;
  border: none !important;
  border-radius: var(--b2b-radius-pill) !important;
  padding: 0 30px !important;
  width: 100% !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  direction: rtl;
  text-align: right;
  box-sizing: border-box !important;
  transition: box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.b2b-contact-modal input::placeholder,
.b2b-contact-modal textarea::placeholder {
  color: #0a0a0a;
  opacity: 0.5;
}

.b2b-contact-modal input:focus,
.b2b-contact-modal select:focus,
.b2b-contact-modal textarea:focus {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
  outline: none !important;
}

/* Hide email field (6th child, after honeypot) — matches inline section pattern */
.b2b-contact-modal .gform_fields .gfield:nth-child(6) {
  display: none !important;
}

/* Select chevron on the LEFT (RTL-trailing) edge */
.b2b-contact-modal select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 25px center !important;
  padding-left: 50px !important;
}

/* Submit footer */
.b2b-contact-modal .gform_footer,
.b2b-contact-modal .gform_page_footer {
  display: flex !important;
  justify-content: center !important;
  margin-top: 40px !important;
  padding: 0 !important;
}

/* Submit button: BLACK with 2px black border. On hover, border turns white.
   Selector includes .gform_wrapper.gravity-theme .sweetango-forms to outrank
   the global theme rule in style.css (.sweetango-forms input[type=submit] { color: #FFF !important })
   which would otherwise win on specificity (0,3,1 vs our base 0,2,1). */
.b2b-contact-modal .gform_wrapper.gravity-theme .sweetango-forms input[type="submit"],
.b2b-contact-modal .gform_wrapper.gravity-theme .sweetango-forms button[type="submit"],
.b2b-contact-modal input[type="submit"],
.b2b-contact-modal button[type="submit"] {
  font-family: var(--font-latin) !important;
  font-size: 1.8rem !important;                       /* 18px in 10px-root system */
  font-weight: 300 !important;
  line-height: 1 !important;                          /* Hebrew fonts have a larger line-box than the glyph; explicit 1 keeps the label centered */
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  border-radius: var(--b2b-radius-pill) !important;
  /* Responsive size by viewport. svw stays stable when the browser address
     bar shows/hides — vw would shift the layout. Clamp keeps it usable on
     phones (>= 200px) without ballooning on ultra-wide (<= 280px). */
  width: clamp(200px, 25svw, 280px) !important;
  height: clamp(48px, 6svw, 66px) !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.2s, transform 0.15s !important;
  -webkit-appearance: none;
}

.b2b-contact-modal .gform_wrapper.gravity-theme .sweetango-forms input[type="submit"]:hover,
.b2b-contact-modal .gform_wrapper.gravity-theme .sweetango-forms button[type="submit"]:hover,
.b2b-contact-modal input[type="submit"]:hover,
.b2b-contact-modal button[type="submit"]:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

/* ---- Form view — mobile ---- */
@media (max-width: 1023px) {
  /* Reserve a 48px strip at the top of the form-view for the close button
     to sit ABOVE the title (matches the user-requested layout). The desktop
     title's translateY(-40px) lift is overridden below so the title doesn't
     pop back up into the close-button strip. */
  .b2b-contact-modal__form-view {
    padding-top: 48px;
  }

  /* Close button: the desktop -90px/-100px offsets push the button off-screen
     on mobile (the panel takes the full viewport — there's no "outside" to
     stick out into). Re-anchor in the form-view's top-right strip, above
     the title. */
  .b2b-contact-modal__close {
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
  }

  .b2b-contact-modal__title {
    font-size: 20px;          /* was 22px — 10% smaller per request */
    margin-bottom: 24px;
    text-align: center;
    transform: none;          /* drop desktop translateY(-40px) — keeps the title inside the form-view body, below the close button */
  }

  .b2b-contact-modal .gform_body .gform_fields {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .b2b-contact-modal input[type="text"],
  .b2b-contact-modal input[type="tel"],
  .b2b-contact-modal input[type="email"],
  .b2b-contact-modal input[type="number"],
  .b2b-contact-modal select,
  .b2b-contact-modal textarea {
    font-size: 16px !important;     /* was 18px — 10% smaller */
    height: 54px !important;
  }

  .b2b-contact-modal input[type="submit"],
  .b2b-contact-modal button[type="submit"] {
    /* Mobile: 10% smaller across the board (font + dimensions). */
    font-size: 1.62rem !important;                       /* 1.8rem × 0.9 */
    width: clamp(180px, 22.5svw, 252px) !important;      /* 200 / 25 / 280 × 0.9 */
    height: clamp(43px, 5.4svw, 59px) !important;        /* 48 / 6 / 66 × 0.9 */
  }
}

/* ---- Success view ---- */

.b2b-contact-modal__success-view {
  position: relative;             /* anchors absolute-positioned cursor inside this view */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.b2b-contact-modal__success-view[hidden] {
  display: none !important;
}

.b2b-contact-modal__brand {
  width: 200px;
  height: auto;
  display: block;
}

@media (max-width: 1023px) {
  .b2b-contact-modal__success-view {
    gap: 24px;
  }

  .b2b-contact-modal__brand {
    width: 160px;
  }
}


/* ============================================================
   SHOP / PRODUCTS PAGE  (body.page-template-page-our-products)
   Figma: B2B SWEETANGO our-products, node 69:334
   ============================================================ */

/* Page header — "the future product for the future customer" */
.page-template-page-our-products .b2b-products__page-header {
  font-family: var(--font-hebrew), sans-serif;
  font-weight: 300;
  font-size: 35px;
  line-height: normal;
  color: #000;
  text-align: center;
  direction: ltr; /* English text, isolated from RTL page direction */
  margin: 60px 0 16px;
  padding: 0;
}

/* VAT notice from ACF the_content — sits under the page header, above grid */
.page-template-page-our-products .b2b-products__vat-notice {
  font-family: var(--font-hebrew), sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  text-align: center;
  margin: 0 auto 32px;
}
.page-template-page-our-products .b2b-products__vat-notice p {
  margin: 0;
}

/* Card: rounded 35px corners + cream/tan gradient per Figma */
.page-template-page-our-products .product-tile {
  background:
    linear-gradient(199.27deg, rgba(246, 246, 246, 0.09) 39.995%, rgba(192, 169, 133, 0.15) 90.785%),
    linear-gradient(90deg, #f7f7f8 0%, #f7f7f8 100%);
  border-radius: 35px;
  padding: 36px 28px 36px;
  gap: 1rem;
}

/* Product image: contain (not crop), centered, with whitespace around it */
.page-template-page-our-products .product-tile--image {
  padding-top: 75%; /* keeps the aspect ratio container from the legacy CSS */
}
.page-template-page-our-products .product-tile--image > img {
  object-fit: contain;
}

/* Title — bold 27px Hebrew, centered black */
.page-template-page-our-products .product-tile h3 {
  margin: 8px 0 0;
}
.page-template-page-our-products .product-tile--title a,
.page-template-page-our-products .product-tile--title a:hover,
.page-template-page-our-products .product-tile--title a:focus {
  font-family: var(--font-hebrew), sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: normal;
  color: #000;
  text-decoration: none;
}

/* Subtitle (weight label "1 kg" etc.) — extra top margin to breathe under
   the title, which often wraps to two lines on the wider B2B cards. */
.page-template-page-our-products .product-tile--subtitle {
  font-family: var(--font-latin), var(--font-hebrew), sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #000;
  text-align: center;
  margin-top: 14px;
}

/* Hide pricing on the B2B redesign — Figma doesn't show it */
.page-template-page-our-products .product-tile--pricing {
  display: none;
}

/* Actions row centered; hide the stepper by default — JS reveals on click */
.page-template-page-our-products .product-tile--actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-template-page-our-products .product-tile--actions .sweetango--add-to-cart {
  display: none;
}

/* "הוספה לסל" pill — default state before adding to cart */
.page-template-page-our-products .btn-reveal-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 133px;
  height: 45px;
  border-radius: 100px;
  background: #ffffff;
  color: #000;
  font-family: var(--font-latin), sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.page-template-page-our-products .btn-reveal-qty:hover,
.page-template-page-our-products .btn-reveal-qty:focus {
  opacity: 0.85;
  color: #000;
  text-decoration: none;
}

/* Stepper inside the card: pill-look matching the reveal button when shown */
.page-template-page-our-products .product-tile .select-quantity {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 100px;
  height: 45px;
  padding: 0 8px;
}
.page-template-page-our-products .product-tile .select-quantity a[class*=button] {
  background: transparent;
  color: #000;
  height: 45px;
  width: 32px;
  line-height: 45px;
  font-size: 22px;
  font-weight: 400;
}
.page-template-page-our-products .product-tile .select-quantity a[class*=button]:hover {
  background: transparent;
  color: #000;
}
.page-template-page-our-products .product-tile .select-quantity input {
  border: none;
  background: transparent;
  height: 45px;
  width: 40px;
  font-size: 17px;
  font-family: var(--font-latin), sans-serif;
}

/* Proceed-to-checkout: black pill, 226×66, 100px radius — overrides
   the legacy .products-grid--buttons style which was a small flat rect */
.page-template-page-our-products .products-grid--buttons {
  margin: 56px 0;
  justify-content: center;
}
.page-template-page-our-products .products-grid--buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 226px;
  height: 66px;
  padding: 0;
  border-radius: 100px;
  background: #000;
  color: #f6f6f6;
  font-family: var(--font-latin), sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.page-template-page-our-products .products-grid--buttons a:hover,
.page-template-page-our-products .products-grid--buttons a:focus {
  opacity: 0.88;
  color: #f6f6f6;
  transform: none; /* kill the legacy translateY(-8px) hover */
}
.page-template-page-our-products .products-grid--buttons a img {
  display: none; /* Figma shows no icon, just text */
}

/* "מעבר לתשלום" proceed-to-checkout button below grid */
.b2b-shop-proceed-wrap {
  text-align: center;
  margin: 40px auto 60px;
}

.b2b-shop-proceed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #f6f6f6 !important;
  text-decoration: none !important;
  height: 66px;
  min-width: 226px;
  border-radius: 100px;
  font-size: 25px;
  font-family: var(--font-latin), sans-serif;
  font-weight: 300;
  padding: 0 30px;
  transition: opacity 0.2s;
}

.b2b-shop-proceed-btn:hover {
  opacity: 0.85;
  color: #f6f6f6 !important;
}


/* ============================================================
   CHECKOUT PAGE  (body.woocommerce-checkout)
   ============================================================ */

/* Reset dark theme */
body.woocommerce-checkout,
body.woocommerce-checkout form.woocommerce-checkout {
  color: var(--b2b-text) !important;
  background: #ffffff !important;
  font-size: 1rem !important;
}

body.woocommerce-checkout form.woocommerce-checkout h1,
body.woocommerce-checkout form.woocommerce-checkout h2,
body.woocommerce-checkout form.woocommerce-checkout h3,
body.woocommerce-checkout form.woocommerce-checkout h4,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #customer_details {
  color: var(--b2b-text) !important;
}

/* Hide WooCommerce section sub-headings ("פרטי חיוב", "מידע נוסף") — Figma design shows none */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  display: none !important;
}

/* Figma 77:2184 has no order-notes textarea — hide the entire
   additional-fields block (col-2 contains order_comments). */
body.woocommerce-checkout #customer_details .woocommerce-additional-fields,
body.woocommerce-checkout #customer_details .col-2 {
  display: none !important;
}

/* Reset cleancore-template chrome on the checkout page only so the
   .b2b-checkout-layout can fill the full 1440px Figma frame. */
body.woocommerce-checkout main > section {
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-checkout main > section > .container.wider,
body.woocommerce-checkout .container.wider {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 1440px !important;
}
body.woocommerce-checkout div.woocommerce {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

/* Two-column layout wrapper — Figma 1440 frame.
   Header bottom y=61; Figma heading y=146 → 85px below header.
   We use padding-top: 85px so heading starts at the right spot. */
body.woocommerce-checkout .b2b-checkout-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 40px !important;
  align-items: flex-start !important;
  padding: 85px 80px 50px !important;
  direction: rtl !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

/* RIGHT column — customer details (1st in DOM = right in RTL) */
body.woocommerce-checkout .b2b-checkout-right {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Section heading "פרטי הלקוח" */
body.woocommerce-checkout form.woocommerce-checkout h2.b2b-checkout-title {
  font-family: var(--font-hebrew), sans-serif !important;
  font-size: 35px !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: right !important;
  margin: 0 0 25px !important;
  direction: rtl !important;
}

/* LEFT column — order summary (2nd in DOM = left in RTL).
   Figma 77:2185: 343x309, radius 15, fill #f6f6f6, top y=163 → 17px below
   heading top (y=146). The heading sits in the right column and pushes content
   down 25px (its own margin-bottom is 25); we offset the card by 17px so its
   top sits 17px below the form heading. */
body.woocommerce-checkout #order_review.woocommerce-checkout-review-order {
  flex: 0 0 343px !important;
  width: 343px !important;
  background: var(--b2b-light) !important;
  border-radius: 15px !important;
  padding: 38px 25px 28px !important;
  margin-top: 17px !important;
  color: var(--b2b-text) !important;
}

body.woocommerce-checkout #order_review_heading {
  font-family: var(--font-hebrew), sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: right !important;
  direction: rtl !important;
  margin: 0 0 18px !important;
}

/* Customer details container */
body.woocommerce-checkout #customer_details {
  display: block !important;
  width: 100% !important;
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
}

/* Override cleancore (style.css L1290-1303) per-field widths.
   Figma layout: form column max 561px wide, half-pills span 1 col,
   full-row pills span 2 cols. Use CSS Grid for deterministic row breaks. */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 269px 269px !important;
  column-gap: 23px !important;
  row-gap: 22px !important;
  justify-content: start !important; /* in RTL, start = right (matches heading right edge) */
  align-items: start !important;
  direction: rtl !important;
}
body.woocommerce-checkout #customer_details .b2b-pill-half {
  grid-column: span 1 !important;
  width: 269px !important;
  max-width: 269px !important;
  float: none !important;
}
body.woocommerce-checkout #customer_details .b2b-pill-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
/* Constrain the input inside the full-row pill to 561px (Figma 77:2204/06/01) */
body.woocommerce-checkout #customer_details .b2b-pill-full .woocommerce-input-wrapper input,
body.woocommerce-checkout #customer_details .b2b-pill-full .woocommerce-input-wrapper select {
  max-width: 561px !important;
}
/* Hide the first-name/last-name "hidden" rows entirely (they have
   class 'hidden' but cleancore doesn't act on it) */
body.woocommerce-checkout #customer_details .hidden,
body.woocommerce-checkout #customer_details p.form-row.hidden {
  display: none !important;
}

/* Billing/shipping inputs — pill style
   NOTE: must out-specificity #customer_details input rule in style.css
   (specificity 1,0,1). We use body.woocommerce-checkout #customer_details
   input (1,1,1) to win. */
body.woocommerce-checkout #customer_details input[type="text"],
body.woocommerce-checkout #customer_details input[type="email"],
body.woocommerce-checkout #customer_details input[type="tel"],
body.woocommerce-checkout #customer_details input[type="number"],
body.woocommerce-checkout #customer_details input[type="password"],
body.woocommerce-checkout #customer_details select,
body.woocommerce-checkout #customer_details textarea {
  height: 61px !important;
  border-radius: 200px !important;
  background: var(--b2b-light) !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 21px !important;
  font-family: var(--font-latin), var(--font-hebrew), sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
  padding: 0 25px !important;
  color: #0a0a0a !important;
  width: 100% !important;
  direction: rtl !important;
  text-align: right !important;
}

body.woocommerce-checkout .woocommerce-additional-fields textarea {
  height: auto !important;
  border-radius: 20px !important;
  padding: 15px 25px !important;
}

/* Figma 77:2184 — checkout fields use placeholders, no labels.
   Hide WC field labels (visually) but keep them in DOM for a11y. */
body.woocommerce-checkout #customer_details p.form-row > label {
  display: none !important;
}

body.woocommerce-checkout #customer_details .form-row {
  margin: 0 !important;
  padding: 0 !important;
  direction: rtl !important;
}

/* #payment section */
body.woocommerce-checkout #payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  direction: rtl !important;
  margin-top: 10px !important;
}

/* Figma 77:2184 has no payment-method picker. This hide assumes a SINGLE active
   gateway — coupled with custom_available_payment_gateways() in
   functions/func.woocommerce.php which conditionally removes bacs. If a second
   gateway is ever activated (e.g. gobitpaymentgateway already has an icon
   registered), users will lose the ability to pick — re-evaluate this rule
   alongside the gateway filter. */
body.woocommerce-checkout #payment .wc_payment_methods {
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  margin: 0 !important;
  display: none !important;
}

/* Hide the privacy policy paragraph + bank-transfer description that WC
   injects above the terms checkbox — not present in Figma 77:2184. */
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment .payment_method_bacs,
body.woocommerce-checkout #payment li.payment_method_bacs {
  display: none !important;
}

/* "מעבר לתשלום" place-order button — Figma 77:2192 */
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout #place_order {
  background: #1c1c1c !important;
  color: #f6f6f6 !important;
  height: 58px !important;
  max-width: 566px !important;
  width: 100% !important;
  border-radius: var(--b2b-radius-pill) !important;
  font-size: 25px !important;
  font-family: var(--font-latin), sans-serif !important;
  font-weight: 300 !important;
  border: none !important;
  cursor: pointer !important;
  display: block !important;
  margin: 18px 0 12px !important;
  text-align: center !important;
  line-height: 58px !important;
  padding: 0 !important;
}

body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-checkout #place_order:hover {
  background: #333333 !important;
}

/* Terms checkbox + label — Figma 77:2213, 77:2214
   Checkbox: 19×19 circle, #f0f0f0 fill; label: 19px Open Sans, "תנאי השימוש"
   bold 700 underlined, surrounding text light 300, color #282829. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  direction: rtl !important;
  text-align: right !important;
  margin-bottom: 12px !important;
}
body.woocommerce-checkout label.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  direction: rtl !important;
  text-align: right !important;
  font-family: var(--font-latin), sans-serif !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  color: #282829 !important;
  cursor: pointer !important;
}
body.woocommerce-checkout #terms {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  border-radius: 200px !important;
  background-color: #f0f0f0 !important;
  border: none !important;
  margin: 0 !important;
  flex: 0 0 19px !important;
  cursor: pointer !important;
  position: relative !important;
}
body.woocommerce-checkout #terms:checked {
  background-color: #1c1c1c !important;
}
body.woocommerce-checkout #terms:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 200px;
  background: #f0f0f0;
  transform: translate(-50%, -50%);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-family: var(--font-latin), sans-serif !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  color: #282829 !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text .b2b-terms-light {
  font-weight: 300 !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a strong,
body.woocommerce-checkout .woocommerce-terms-and-conditions-link {
  font-weight: 700 !important;
  text-decoration: underline !important;
  color: #282829 !important;
}

/* Payment brand icons row — Figma 77:2187–77:2191 (icons 42px tall, native widths) */
body.woocommerce-checkout .b2b-payment-icons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  margin-top: 15px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

body.woocommerce-checkout .b2b-payment-icons img {
  height: 42px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

/* Icons are now PNGs exported directly from Figma 77:2187–77:2191 with
   intrinsic dimensions, so width: auto on .b2b-payment-icons img above
   produces the correct native aspect without per-icon overrides. */

/* Order review table inside the summary card */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border: none !important;
  border-collapse: collapse !important;
  direction: rtl !important;
}

body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table thead {
  display: none !important;
}

body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tbody tr td {
  border: none !important;
  padding: 8px 0 !important;
  color: var(--b2b-text) !important;
  font-size: 13px !important;
}

/* Figma 77:2217-2227 — summary rows: 19px Noto Light (300), labels gray #a0a0a0,
   values black. Total row: 23px SemiBold (600), both black. Solid 1px dividers. */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row {
  border: none !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row th.b2b-summary-label,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row td.b2b-summary-value {
  border: none !important;
  padding: 12px 0 !important;
  font-family: var(--font-hebrew), sans-serif !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row th.b2b-summary-label {
  color: #a0a0a0 !important;
  text-align: right !important;
  font-weight: 300 !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row td.b2b-summary-value {
  color: #000 !important;
  text-align: left !important;
}
/* Hairline divider under subtotal + shipping (Figma 77:2226, 77:2227) */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--subtotal th,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--subtotal td,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--shipping th,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--shipping td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}
/* Total row — 23px SemiBold (600), both label and value black, no top border. */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--total th.b2b-summary-label--total,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--total td.b2b-summary-value--total {
  font-size: 23px !important;
  font-weight: 600 !important;
  color: #000 !important;
  border: none !important;
  padding-top: 14px !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--total td.b2b-summary-value--total strong,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--total td.b2b-summary-value--total .amount,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row--total td.b2b-summary-value--total bdi {
  font-weight: 600 !important;
}

/* Hide per-item quantity/remove controls inside the small summary card */
body.woocommerce-checkout .shop_table .product-remove {
  display: none !important;
}

/* The summary-card products list now lives in the <details> block below
   (.b2b-cart-details). Hide the duplicate cart_item rows in the totals
   table so the totals (tfoot) sit on their own and the items render once,
   cleanly, inside the toggle. */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tbody tr.cart_item {
  display: none !important;
}

/* ---- Cart items toggle (Figma 77:2184 "עגלת הקניות N מוצרים") ---- */
body.woocommerce-checkout .b2b-cart-details {
  margin: 14px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 14px;
}
/* Strip native disclosure marker — we render our own chevron */
body.woocommerce-checkout .b2b-cart-details > summary {
  list-style: none;
  cursor: pointer;
}
body.woocommerce-checkout .b2b-cart-details > summary::-webkit-details-marker {
  display: none;
}
body.woocommerce-checkout .b2b-cart-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-hebrew), sans-serif;
  font-size: 16px;
  color: #807f7f;
  direction: rtl;
}
body.woocommerce-checkout .b2b-cart-details__title {
  font-weight: 500;
}
body.woocommerce-checkout .b2b-cart-details__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
}
/* Chevron — CSS-only down arrow; flips on open */
body.woocommerce-checkout .b2b-cart-details__chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #807f7f;
  border-bottom: 2px solid #807f7f;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.15s ease;
  margin-top: -4px;
}
body.woocommerce-checkout .b2b-cart-details[open] .b2b-cart-details__chevron {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* Items list rendered inside the open toggle */
body.woocommerce-checkout .b2b-cart-details__list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  direction: rtl;
}
/* Native <details> collapse: explicit display:flex above wins over the
   user-agent's default hiding, so hide it manually when the toggle is shut. */
body.woocommerce-checkout .b2b-cart-details:not([open]) .b2b-cart-details__list {
  display: none;
}
body.woocommerce-checkout .b2b-cart-details__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.woocommerce-checkout .b2b-cart-details__item-image {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.woocommerce-checkout .b2b-cart-details__item-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Cart item row typography — Figma 78:4998–78:5003.
   "4 * ג'לי תות" reads: qty + multiplier in Light gray, name in Bold gray.
   Price "45 ₪" is Light gray; the ₪ glyph is 12px (4px smaller than digits)
   to mirror Figma's mixed-size price treatment. */
body.woocommerce-checkout .b2b-cart-details__item-info {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-hebrew), sans-serif;
  font-size: 16px;
  color: #807f7f;
  min-width: 0;
}
body.woocommerce-checkout .b2b-cart-details__item-qty {
  font-weight: 300;
  color: #807f7f;
}
body.woocommerce-checkout .b2b-cart-details__item-mult {
  font-weight: 300;
  color: #807f7f;
}
body.woocommerce-checkout .b2b-cart-details__item-name {
  flex: 1;
  font-weight: 800;
  color: #807f7f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.woocommerce-checkout .b2b-cart-details__item-price {
  flex: 0 0 auto;
  font-family: var(--font-hebrew), sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #807f7f;
}
body.woocommerce-checkout .b2b-cart-details__item-price .woocommerce-Price-currencySymbol {
  font-size: 12px;
}


/* ============================================================
   CHECKOUT MOBILE (Figma 78:4916 — iPhone 402 × 1279 frame)
   ============================================================ */
@media (max-width: 1023px) {

  /* Stack columns vertically: summary on top (DOM second → first via
     column-reverse), form below. Figma 78:4979 summary at y=67 sits above
     78:4951 "פרטי הלקוח" at y=718. */
  body.woocommerce-checkout .b2b-checkout-layout {
    flex-direction: column-reverse !important;
    gap: 30px !important;
    padding: 24px 24px 40px !important;
    max-width: 100% !important;
  }

  /* Summary card: full width minus side gutters; drop the desktop 343px
     fixed width and the 17px top offset (the heading sits below the card
     now, not next to it). */
  body.woocommerce-checkout #order_review.woocommerce-checkout-review-order {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 22px 22px 24px !important;
  }
  body.woocommerce-checkout #order_review_heading {
    font-size: 19px !important;
    margin: 0 0 16px !important;
  }

  /* Form column: full width */
  body.woocommerce-checkout .b2b-checkout-right {
    width: 100% !important;
  }

  /* "פרטי הלקוח" heading — Figma 19px Bold (vs desktop 35px) */
  body.woocommerce-checkout form.woocommerce-checkout h2.b2b-checkout-title,
  body.woocommerce-checkout .b2b-checkout-title {
    font-size: 19px !important;
    margin: 0 0 16px !important;
  }

  /* Form grid: collapse to one column so every pill spans full width.
     justify-content stops mattering at 1 col, but reset for safety. */
  body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 12px !important;
    justify-content: start !important;
  }

  /* Form rows: full-width single column on mobile */
  body.woocommerce-checkout #customer_details .form-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Pills: Figma 78:4959 etc. — 43px tall, 16px text. Use class +
     :where()-free selectors (higher robustness across renderers) plus
     id-rooted fallbacks so the rule beats any other matching rule. */
  body.woocommerce-checkout #customer_details .form-row input.input-text,
  body.woocommerce-checkout #customer_details .form-row select,
  body.woocommerce-checkout #customer_details input.input-text,
  body.woocommerce-checkout #customer_details select,
  body.woocommerce-checkout .woocommerce-billing-fields input.input-text,
  body.woocommerce-checkout .woocommerce-billing-fields select {
    height: 43px !important;
    font-size: 16px !important;
    padding: 0 22px !important;
  }

  /* Place-order button — Figma 78:4968: 45px tall, 19px text, full width */
  body.woocommerce-checkout #payment #place_order,
  body.woocommerce-checkout #place_order {
    height: 45px !important;
    line-height: 45px !important;
    font-size: 19px !important;
    max-width: 100% !important;
    margin: 16px 0 14px !important;
  }

  /* Terms label — Figma 78:4953: 15px text, slightly tighter */
  body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  /* Payment icons — Figma 78:4954–78:4958: 31px tall (vs desktop 42px) */
  body.woocommerce-checkout .b2b-payment-icons img {
    height: 31px !important;
  }
  body.woocommerce-checkout .b2b-payment-icons {
    gap: 14px !important;
    margin-top: 12px !important;
  }

  /* WC's woocommerce-smallscreen-rtl.css forces tax-rate / shipping rows
     to display:block at ≤768px (it tries to mobile-stack the cart table)
     but leaves cart-subtotal + order-total as table-cells — so VAT and
     shipping values fall to the right edge of their flow context instead
     of sharing the value column with subtotal/total. Force every summary
     row back to table layout so all values left-align together. */
  body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row {
    display: table-row !important;
  }
  body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row th.b2b-summary-label,
  body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.b2b-summary-row td.b2b-summary-value {
    display: table-cell !important;
    padding: 12px 0 !important;
  }
}


/* ============================================================
   THANK YOU PAGE  (body.woocommerce-order-received)
   ============================================================ */

body.woocommerce-order-received .woocommerce-order {
  color: var(--b2b-text) !important;
  padding: 0 60px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Hide default "order received" confirmation text */
body.woocommerce-order-received .woocommerce-thankyou-order-received {
  display: none !important;
}

/* Hero banner */
.b2b-thankyou-hero {
  max-width: 857px;
  height: 354px;
  border-radius: 25px;
  margin: 30px auto 40px;
  position: relative;
  overflow: hidden;
  display: block;
}

.b2b-thankyou-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.b2b-thankyou-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.29);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.b2b-thankyou-hero__title {
  font-size: 75px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Open Sans', var(--font-hebrew), sans-serif;
  line-height: 1;
  margin: 0;
  text-align: center;
}

.b2b-thankyou-hero__subtitle {
  font-size: 37px;
  font-weight: 300;
  color: #ffffff;
  font-family: var(--font-hebrew), sans-serif;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

/* Three info blocks */
.b2b-thankyou-info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  max-width: 900px;
  margin: 0 auto 50px;
  direction: rtl;
}

.b2b-thankyou-info__block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px 25px;
  position: relative;
  direction: rtl;
}

.b2b-thankyou-info__block:not(:first-child)::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 136px;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.b2b-thankyou-info__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  display: block;
}

.b2b-thankyou-info__block p {
  font-size: 19px;
  line-height: 1.5;
  color: var(--b2b-text);
  margin: 0;
  font-family: var(--font-hebrew), sans-serif;
  direction: rtl;
}

.b2b-thankyou-info__block strong {
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

/* "פרטי הזמנה" — order overview section title injected via CSS */
body.woocommerce-order-received .woocommerce-order-overview.woocommerce-thankyou-order-details::before {
  content: 'פרטי הזמנה';
  display: block;
  font-size: 25px;
  font-weight: 800;
  font-family: var(--font-hebrew), sans-serif;
  text-align: center;
  margin-bottom: 20px;
  direction: rtl;
  color: var(--b2b-text);
}

/* Order overview list (order number / date / total row) */
body.woocommerce-order-received .woocommerce-order-overview {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 80px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto 40px !important;
  max-width: 800px !important;
  width: 100% !important;
  border: none !important;
  text-align: center !important;
  direction: rtl !important;
  flex-wrap: wrap !important;
}

body.woocommerce-order-received .woocommerce-order-overview li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  color: var(--b2b-text) !important;
  font-size: 16px !important;
  border: none !important;
  padding: 0 !important;
  direction: rtl !important;
}

body.woocommerce-order-received .woocommerce-order-overview li strong {
  font-size: 23px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-top: 5px !important;
}

/* "סיכום הזמנה" — order details section title injected via CSS */
body.woocommerce-order-received .woocommerce-order-details::before {
  content: 'סיכום הזמנה';
  display: block;
  font-size: 25px;
  font-weight: 800;
  font-family: var(--font-hebrew), sans-serif;
  text-align: center;
  margin-bottom: 20px;
  direction: rtl;
  color: var(--b2b-text);
}

/* Order details table */
body.woocommerce-order-received .woocommerce-order-details {
  max-width: 700px !important;
  margin: 0 auto 30px !important;
  width: 100% !important;
}

body.woocommerce-order-received .woocommerce-order-details__title {
  display: none !important;
}

body.woocommerce-order-received .woocommerce-table--order-details {
  width: 100% !important;
  border-collapse: collapse !important;
  direction: rtl !important;
}

body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td {
  text-align: right !important;
  padding: 12px 0 !important;
  font-size: 19px !important;
  color: var(--b2b-text) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

body.woocommerce-order-received .woocommerce-table--order-details tfoot tr td,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr th {
  font-weight: 700 !important;
  font-size: 19px !important;
}

body.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td,
body.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th {
  font-size: 23px !important;
  font-weight: 700 !important;
}

/* "חזרה לדף הבית" back-home button */
.b2b-thankyou-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1c;
  color: #f6f6f6 !important;
  text-decoration: none !important;
  max-width: 635px;
  width: 90%;
  height: 58px;
  border-radius: var(--b2b-radius-pill);
  margin: 30px auto 60px;
  font-size: 25px;
  font-family: var(--font-latin), sans-serif;
  font-weight: 300;
  transition: opacity 0.2s;
}

.b2b-thankyou-cta:hover {
  opacity: 0.85;
  color: #f6f6f6 !important;
}


/* ============================================================
   SIDECART (MINI-CART) — 2026 REDESIGN
   Sourced from sweetango.webengine.co.il's gal/design-2026.css
   (lines ~2355-2551). The `.dev-mode` gate has been stripped so
   the redesign applies for everyone on the B2B site. The new
   .mini-cart-qty-wrapper / .cart-item-actions-wrapper markup
   was already in our mini-cart.php template — it was just being
   styled by the older compiled SCSS in style.css.
   ============================================================ */

.mini-cart--sidebar {
  top: 0;
  height: 100%;
  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
}
.mini-cart-header {
  background-color: #FFFFFF;
}
.mini-cart--close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  top: 0.4rem;
  right: 0.4rem;
}
.mini-cart--close:hover {
  background-color: #333;
}
#mini-cart .woocommerce-mini-cart-item-image img {
  border-radius: 8px;
}
#mini-cart .remove_from_cart_button {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background-color: transparent !important;
  font-size: 0 !important;
  color: transparent !important;
  transform: translateY(1px);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}
#mini-cart .remove_from_cart_button img {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}
#mini-cart .remove_from_cart_button:hover {
  border-color: #000;
  background-color: #000 !important;
}
#mini-cart .remove_from_cart_button:hover img {
  filter: invert(1);
}
#mini-cart .remove_from_cart_button:active {
  transform: scale(0.85);
  background-color: #333 !important;
  border-color: #333;
}
.mini-cart-section {
  border: none;
}
.mini-cart-section .woocommerce-mini-cart__total {
  background: #F0F0F0;
  border-radius: 100px;
}
.mini-cart-section .woocommerce-mini-cart__total strong {
  font-weight: 100;
}
.mini-cart-section .woocommerce-mini-cart__buttons .checkout-btn {
  border-radius: 100px;
  font-weight: 100;
}
.mini-cart-section .woocommerce-mini-cart__buttons .checkout-btn img {
  display: none;
}
.mini-cart--progress-bar {
  background-color: #E1E1E1;
}
.mini-cart--progress-bar--label {
  text-align: start;
}
.mini-cart--progress-bar div {
  background-color: #000000;
}
#mini-cart .woocommerce-mini-cart-item {
  background-color: #FFFFFF;
  border-bottom: 1px solid rgba(160, 160, 160, 0.1490196078);
  padding-bottom: 2rem;
}
#mini-cart .woocommerce-mini-cart-item a.remove {
  background-color: transparent;
  transform: translateY(0.2rem);
  padding: 10px;
}
#mini-cart .woocommerce-mini-cart-item-image {
  width: 29%;
}
#mini-cart .woocommerce-mini-cart-item-image img {
  height: 100%;
  width: 100%;
  border-radius: 7px;
}
/* qty + price on same row, price pushed to visual left in RTL */
#mini-cart .woocommerce-mini-cart-item:not(.mini-cart-delivery) .cart-item-actions-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#mini-cart .woocommerce-mini-cart-item:not(.mini-cart-delivery) .item-price {
  font-size: 1.6rem;
  font-weight: 700;
  transform: translateY(0.4rem);
}
/* shipping delivery row */
#mini-cart .woocommerce-mini-cart-item.mini-cart-delivery {
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.2rem;
}
/* Visual order (RTL right→left): TRUCK ICON, TEXT, PRICE.
   Parent is `direction: rtl`, so order: 1 = rightmost flex slot. */
#mini-cart .mini-cart-delivery > img                  { order: 1; }
#mini-cart .mini-cart-delivery .shipping-info-wrapper { order: 2; }
#mini-cart .mini-cart-delivery #shipping_method       { order: 3; }
#mini-cart .mini-cart-delivery > img {
  width: 4rem !important;
  height: auto !important;
  display: block;
  flex-shrink: 0;
  margin: 0 !important;
  transform: none !important;
}
#mini-cart .mini-cart-delivery .shipping-info-wrapper {
  flex: 1;
  min-width: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  text-align: center;
}
#mini-cart .mini-cart-delivery .shipping-label {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
  margin-top: 0.2rem;
  text-align: center;
}
#mini-cart .mini-cart-delivery #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
  min-width: 4rem;
  text-align: center;
}
#mini-cart .mini-cart-delivery #shipping_method li {
  display: block;
}
#mini-cart .mini-cart-delivery #shipping_method label {
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
  cursor: default;
}
.mini-cart-qty-wrapper .qty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  line-height: 1;
}
.mini-cart-qty-wrapper .qty-action:hover {
  border-color: #000;
  background-color: #000;
  color: #fff;
}
.mini-cart-qty-wrapper .qty-action:active {
  transform: scale(0.85);
  background-color: #333;
  color: #fff;
}
.mini-cart-qty-wrapper .qty-action.minus {
  transform: translateY(-1.5px);
  padding: 0px 0 3px 0;
}
.mini-cart-qty-wrapper .qty-action.plus {
  padding: 1px 1px 0 0;
}


/* ============================================================
   SINGLE PRODUCT PAGE — pixel-perfect clone of consumer site
   Source files (do not edit those from here):
     sweetango/wp-content/themes/cleancore/gal/design-2026.scss L1354-L1539
     sweetango/wp-content/themes/cleancore/assets/css/_pages/_product.scss
   Resolved SCSS variables:
     $black=#000  $white=#FFF  $gold=#C0A985  $color1=#B88353
     $color3=#DEC684  $color6=#DDC088
     $font-main='Noto Sans Hebrew', sans-serif
   Most rules are scoped under .dev-mode (added via body_class filter
   on is_product() pages — see functions/setup.php).
   ============================================================ */

body.single-product { background-color: #FFF; }

/* Base layout — applies regardless of .dev-mode */
.product-details {
  display: flex;
  gap: 6rem;
  justify-content: space-between;
}
.product-details .page-title h1 {
  text-align: right;
  font-weight: normal;
}
.product-details--content { width: calc(60% - 8rem); }
.product-details--content ins { text-decoration: none; }
.product-details--images { width: 40%; position: relative; }
.product-details--price { font-size: 3.4rem; font-weight: bold; }
.product-details--description {
  border: solid rgba(222, 198, 132, 0.4);
  border-width: 1px 0;
  padding: 3rem 0;
  margin: 3rem 0;
  font-size: 2.5rem;
}
.product-details--description p:first-of-type { margin-top: 0; }
.product-details--description p:last-of-type { margin-bottom: 0; }
.product-details--add-to-cart .sweetango--add-to-cart { display: flex; }
.product-details--add-to-cart .sweetango--add-to-cart .select-quantity {
  transform: scale(1.4);
  transform-origin: top right;
}

@media (max-width: 1023px) {
  .product-details {
    flex-direction: column-reverse;
    flex-wrap: wrap;
    gap: 3rem;
    margin-top: -2rem;
  }
  .product-details--content { width: 100%; }
  .product-details--images { width: 100%; }
  .product-details--description { font-size: 2rem; }
}

/* Gallery (Swiper) — base */
.product-images-swiper { overflow: hidden; position: relative; }
.product-images-swiper .swiper-button-prev,
.product-images-swiper .swiper-button-next {
  background-color: #DDC088;
  border-radius: 100px;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
}
.product-images-swiper .swiper-button-prev::after,
.product-images-swiper .swiper-button-next::after {
  color: #000;
  font-size: 2rem;
}
.product-images-swiper .swiper-button-prev { right: 2rem !important; }
.product-images-swiper .swiper-button-next { left: 2rem !important; }

.product-images-swiper .swiper-slide div,
.product-thumbnail-swiper .swiper-slide div {
  padding-top: 100%;
  position: relative;
}
.product-images-swiper .swiper-slide div img,
.product-thumbnail-swiper .swiper-slide div img {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  /* top: 0; */
  /* right: 0; */
  /* bottom: 0; */
  /* left: 0; */
  object-fit: cover;
  object-position: center;
}

.product-thumbnail-swiper { margin-top: 3rem; overflow: hidden; }
.product-thumbnail-swiper .swiper-slide a {
  display: block;
  border: 3px solid rgba(184, 131, 83, 0.15);
  cursor: pointer;
}
.product-thumbnail-swiper .swiper-slide-thumb-active a {
  border: 3px solid #B88353;
}

/* .btn-2 pill (used by "הוספה לסל" button) — scoped to .dev-mode so it
   only fires on product pages, not on /our-products/ (which keeps its
   own .page-template-page-our-products .btn-reveal-qty white pill). */
.dev-mode .btn.btn-2 {
  background-color: #000;
  color: #FFF;
  border: 1px solid #000;
  border-radius: 100px;
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-weight: 300;
}
.dev-mode .btn.btn-2:hover {
  color: #FFF;
  text-decoration: none;
  transform: translateY(-8px);
  background-color: #C0A985;
  border: 1px solid #C0A985;
}

/* New-design overrides (scoped under .dev-mode body class) */
.dev-mode { font-weight: 300; }
.dev-mode .btn {
  font-weight: 300;
  font-family: 'Noto Sans Hebrew', sans-serif;
  letter-spacing: 0;
}
.dev-mode .product-details .page-title h1 {
  font-size: 3.5rem;
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-weight: 800;
}
.dev-mode .product-details--subtitle {
  font-weight: 200;
  font-size: 3.3rem;
  margin: 0;
}
.dev-mode .product-details--description { border: none; }
.dev-mode .product-details--add-to-cart { margin-top: 4rem; }
.dev-mode .product-details--add-to-cart .btn-2 { padding: 1.2rem 20%; }
.dev-mode .product-details--add-to-cart .sweetango--add-to-cart {
  justify-content: start !important;
}

/* qty stepper in dev-mode — circular pill buttons matching the consumer
   site exactly. Source: compiled gal/design-2026.css `.dev-mode .select-quantity`
   rules (the SCSS partial in the consumer repo is older than its compiled CSS;
   the compiled output is the source of truth). */
.dev-mode .select-quantity { gap: 0; }
.dev-mode .select-quantity a[class*="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1.5px solid transparent;
  color: #000;
  font-size: 2.4rem;
  background: transparent;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.dev-mode .select-quantity a[class*="button"]:hover {
  border-color: #000;
  background-color: #000;
  color: #fff;
}
.dev-mode .select-quantity a[class*="button"]:active {
  transform: scale(0.85);
  background-color: #333;
  border-color: #333;
  color: #fff;
}
.dev-mode .select-quantity input {
  border-width: 0;
  background: transparent;
}
@media (max-width: 1023px) {
  .dev-mode .select-quantity a[class*="button"] {
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
    min-height: 2.8rem;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .dev-mode .product-details .page-title.mobile { display: none; }
}
@media (max-width: 1023px) {
  .dev-mode .product-details { flex-direction: column; }
  .dev-mode .desktop { display: none; }
  .dev-mode .product-details .page-title .product-details--add-to-cart .select-quantity {
    transform: scale(1);
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #F0F0F0;
    padding: 1rem;
    border-radius: 100px;
  }
  .dev-mode .product-details .page-title.mobile h1 { font-size: 2.5rem; }
  .dev-mode .product-details .page-title.mobile .product-details--description {
    padding: 0;
    margin: 2rem 0;
  }
  .dev-mode .product-details .page-title.mobile .product-details--subtitle { font-size: 2.3rem; }
  .dev-mode .product-details .page-title.mobile .product-details--price span {
    font-size: 2.1rem;
    font-weight: 400;
  }
  .dev-mode .product-details--add-to-cart .btn-2 { width: 100%; }
}

/* Gallery — dev-mode overrides */
.dev-mode .main-swiper-wrapper .product-images-swiper .swiper-slide div img {
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(234, 234, 234) 100%);
}
.dev-mode .main-swiper-wrapper .swiper-button-prev,
.dev-mode .main-swiper-wrapper .swiper-button-next {
  background-color: #000;
  bottom: 1rem;
  top: initial;
  right: 1rem;
}
.dev-mode .main-swiper-wrapper .swiper-button-prev::after,
.dev-mode .main-swiper-wrapper .swiper-button-next::after { color: #FFF; }
.dev-mode .main-swiper-wrapper .swiper-button-next { right: 7rem; }
.dev-mode .main-swiper-wrapper .product-thumbnail-swiper .swiper-slide a { border: none; }
.dev-mode .main-swiper-wrapper .product-thumbnail-swiper .swiper-slide a img {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
}
.dev-mode .main-swiper-wrapper .product-thumbnail-swiper .swiper-slide-thumb-active a {
  border: 1px solid #000;
}

/* Accordion */
.product-accordion { padding: 0; margin-top: 8rem; }
.product-accordion .accordion-item { border-bottom: 1px solid #eaeaea; }
.product-accordion .accordion-item.is-open .chevron-icon { transform: rotate(180deg); }
.product-accordion .accordion-item.is-open .accordion-content {
  grid-template-rows: 1fr;
  opacity: 1;
}
.product-accordion .accordion-item.is-open .content-wrapper { padding: 0 0 1.8rem 0; }
.product-accordion .accordion-item:last-child { border-bottom: none; }
.product-accordion .accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  font-size: 2.5rem;
  color: #000;
  transition: color 0.2s ease;
  font-family: 'Noto Sans Hebrew', sans-serif;
}
.product-accordion .accordion-header:hover { color: #000; }
.product-accordion .accordion-header .chevron-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  color: #666;
}
@media (max-width: 1023px) {
  .product-accordion .accordion-header { text-align: start; font-size: 2.1rem; }
}
.product-accordion .accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  overflow: hidden;
}
.product-accordion .accordion-content .content-wrapper {
  min-height: 0;
  font-size: 2rem;
  line-height: 1.6;
  color: #000;
}
.product-accordion .accordion-content .content-wrapper p:last-child { margin-bottom: 0; }

/* Related products slider */
.related-products-section { overflow: hidden; padding: 6rem 0; }
@media (max-width: 1023px) {
  .related-products-section { padding: 4rem 2rem; }
}
.related-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 3rem;
}
.related-products-header .related-products-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}
@media (max-width: 1023px) {
  .related-products-header .related-products-title { font-size: 2.2rem; }
}
.related-products-header .related-products-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.related-products-header .related-products-nav .related-swiper-btn-prev,
.related-products-header .related-products-nav .related-swiper-btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 2px solid #000;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: #000;
  padding: 0;
}
.related-products-header .related-products-nav .related-swiper-btn-prev svg,
.related-products-header .related-products-nav .related-swiper-btn-next svg {
  width: 1rem;
  height: 1.6rem;
}
.related-products-header .related-products-nav .related-swiper-btn-prev:hover,
.related-products-header .related-products-nav .related-swiper-btn-next:hover {
  background: #000;
  color: #fff;
}
.related-products-header .related-products-nav .related-swiper-btn-prev.swiper-button-disabled,
.related-products-header .related-products-nav .related-swiper-btn-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.single-product-slider {
  overflow: hidden;
  width: 100%;
  min-width: 0;
  display: block;
}

/* Related-products slider tiles: match the /our-products/ card design
   (gradient background, 35px radius, generous padding), equal-height
   slides, and a properly padded reveal-qty pill. */
.single-product-slider .swiper-slide {
  height: auto;
  display: flex;
}
.single-product-slider .swiper-slide .product-tile {
  width: 100%;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(199.27deg, rgba(246, 246, 246, 0.09) 39.995%, rgba(192, 169, 133, 0.15) 90.785%),
    linear-gradient(90deg, #f7f7f8 0%, #f7f7f8 100%);
  border-radius: 35px;
  padding: 36px 28px 36px;
  gap: 1rem;
}
.single-product-slider .product-tile--actions {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.single-product-slider .product-tile .btn.btn-reveal-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 133px;
  height: 45px;
  padding: 0;
  background: #ffffff;
  color: #000;
  border: 1px solid #ffffff;
  border-radius: 100px;
  font-size: 17px;
  line-height: 1;
}
.single-product-slider .product-tile .btn.btn-reveal-qty:hover {
  background: #000;
  color: #fff;
  border-color: #000;
  transform: none;
}


/* =============================================
   LOGIN DIALOG  —  overrides for the legacy
   #sweetango-login--dialog from style.css
   ============================================= */

/* Close button — default in style.css positions a pill-shape "× סגירה"
   ABOVE the dialog with the × at 5rem (50px) crammed into a 26×26 circle.
   Reset to a clean circular X anchored inside the dialog's top-right
   corner, matching the contact modal close-button pattern. */
.sweetango-login--dialog-close {
  top: 8px !important;
  right: 8px !important;
  transform: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 0 !important;
  box-shadow: none !important;
}
.sweetango-login--dialog-close > div:first-of-type {
  width: 36px !important;
  height: 36px !important;
  font-size: 22px !important;
  line-height: 36px !important;
  background: #000 !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: 400 !important;
}
.sweetango-login--dialog-close:hover > div:first-of-type {
  background: #333 !important;
}

/* Mobile: reduce login form label text 30% (was 3rem desktop). */
@media (max-width: 1023px) {
  .sweetango-login--dialog-content div[data-login-tab=login] label {
    font-size: 2.1rem !important;
  }
}


/* =============================================
   LOGO STRIP — two-row Swiper marquee
   Ported from sweetango.co.il's component-places-section-dev.
   Two rows scroll continuously in opposite directions.
   ============================================= */

.b2b-logo-strip {
  background: var(--b2b-white);
  padding: 80px 50px;
}

.b2b-logo-strip__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.b2b-logo-strip__title {
  font-family: var(--font-hebrew);
  font-weight: 300;
  font-size: 32px;
  color: var(--b2b-text);
  text-align: center;
  margin: 0 0 50px;
  direction: rtl;
}

.b2b-logo-strip__rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* CSS-only continuous marquee. Each track contains TWO copies of its slides
   in source order; the animation translates by -50%, which is exactly one
   slide-set width, so the second copy slides into the position the first
   one started — seamless, no Swiper, no loop-boundary stutter. */
.b2b-logo-strip__marquee {
  width: 100%;
  overflow: hidden;
}

.b2b-logo-strip__track {
  display: flex;
  flex-direction: row;
  direction: ltr;            /* force LTR layout regardless of page RTL */
  width: max-content;
  animation: b2b-marquee-scroll 60s linear infinite;
  will-change: transform;
}

.b2b-logo-strip__marquee--right .b2b-logo-strip__track {
  animation-direction: reverse;
}

.b2b-logo-strip__slide {
  flex: 0 0 auto;
  padding-right: 60px;       /* gap between slides — included in slide width so the -50% math stays seamless */
  display: flex;
  align-items: center;
  justify-content: center;
}

.b2b-logo-strip__slide img {
  height: 130px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

@keyframes b2b-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause the marquee for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .b2b-logo-strip__track {
    animation: none;
  }
}

/* Mobile: smaller logos, tighter gap, slightly slower so motion is calm. */
@media (max-width: 1023px) {
  .b2b-logo-strip {
    padding: 50px 20px;
  }
  .b2b-logo-strip__title {
    font-size: 22px;
    margin-bottom: 30px;
  }
  .b2b-logo-strip__rows {
    gap: 20px;
  }
  .b2b-logo-strip__track {
    animation-duration: 40s;
  }
  .b2b-logo-strip__slide {
    padding-right: 30px;
  }
  .b2b-logo-strip__slide img {
    height: 80px;
    max-width: 140px;
  }
}