/* Self-hosted fonts (Inter + Rubik for multi-language support) */

/* Inter font (English / LTR languages) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
}

/* Rubik font (Hebrew / RTL languages) */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Rubik-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Rubik-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Rubik-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Rubik-Bold.woff2') format('woff2');
}
:root {
  --primary: #1B1F33;
  --secondary: #5B3FD1;
  --accent: #D7263D;
  --bg-light: #F3F0E8;
  --bg-dark: #1B1F33;
  --text-dark: #1B1F33;
  --text-light: #F3F0E8;
  --text-muted: #8E95A9;
  --border-light: #D9D4C8;
  --border-dark: #343A57;
  --nav-bg: transparent;
  --nav-text: #F3F0E8;
  --nav-text-hover: #39C6B4;
  --radius-sm: 2px;
  --radius-card: 4px;
  --radius-btn: 4px;
  --radius-img: 4px;
  --radius-badge: 2px;
  --radius-input: 4px;
  --shadow-subtle: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-card: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-elevated: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-btn-hover: 0 8px 30px rgba(0,0,0,0.14);
  --spacing-section: 80px;
  --spacing-section-mobile: 48px;
  --spacing-card-padding: 32px;
  --spacing-card-gap: 24px;
  --spacing-element-gap: 16px;
  --transition-default: all 0.3s ease;
  --transition-hover: all 0.2s ease-out;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-family: 'Rubik', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  direction: rtl;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: var(--accent, var(--primary));
  text-decoration: none;
  transition: var(--transition-hover);
}

a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.site-footer a {
  color: inherit;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dark);
}

h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

h2 {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
}

p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

small, .small-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

@media (max-width: 1024px) {
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 20px !important; }
  p  { font-size: 15px !important; }
}

@media (max-width: 768px) {
  h1 {
    font-size: 28px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  h2 {
    font-size: 22px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  h3 {
    font-size: 18px !important;
    margin-bottom: 1rem !important;
    margin-top: 0.5rem !important;
  }
  p {
    font-size: 14px !important;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  padding: 16px 24px;
  font-weight: 600;
  text-transform: uppercase;
  transition: var(--transition-hover);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.03em;
  font-family: 'Rubik', sans-serif;
  line-height: 1.2;
  border: 2px solid transparent;
}

.btn:hover {
  box-shadow: var(--shadow-btn-hover);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--text-light);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--text-light);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-secondary:hover {
  background-color: var(--primary);
  color: var(--text-light);
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

html[dir="rtl"] .whatsapp-float {
  right: 20px;
  left: auto;
}

html[dir="ltr"] .whatsapp-float,
html:not([dir]) .whatsapp-float {
  left: 20px;
  right: auto;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  text-decoration: none;
  color: white;
}

::selection {
  background-color: var(--secondary);
  color: var(--text-light);
}

::-moz-selection {
  background-color: var(--secondary);
  color: var(--text-light);
}

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  
  .btn {
    padding: 14px 20px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Navbar Styles */
/* ====== NAVBAR ====== */
.navbar {
  --nav-bg: transparent;
  --nav-text: #F3F0E8;
  --nav-text-hover: #39C6B4;
  --nav-cta-bg: #1B1F33;
  --nav-cta-text: #F3F0E8;
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  padding: 1rem 2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* ---------- Mobile toggle & phone ---------- */
.mobile-toggle,
.phone-header-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
  z-index: 1001;
  padding: 0.5rem;
  line-height: 0;
}

.mobile-toggle {
  right: 1rem;
}

.phone-header-btn {
  left: 1rem;
}

/* ---------- Main container ---------- */
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
}

.nav-brand {
  flex-shrink: 0;
}

.logo-link {
  display: inline-block;
  line-height: 0;
}

.logo {
  max-height: 40px;
  height: auto;
  width: auto;
}

/* ---------- Menu ---------- */
.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.nav-menu li a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  position: relative;
  transition: color 0.2s ease-out;
  padding-bottom: 0.25rem;
}

.nav-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--nav-text-hover);
  transition: width 0.2s ease-out;
}

.nav-menu li a:hover {
  color: var(--nav-text-hover);
}

.nav-menu li a:hover::after {
  width: 100%;
  right: 0;
  left: auto;
}

/* ---------- CTA Button ---------- */
.nav-cta-container {
  flex-shrink: 0;
  margin-inline-start: auto;
}

.nav-cta-btn {
  display: inline-block;
  padding: 16px 24px;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.2s ease-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  white-space: nowrap;
}

.nav-cta-btn:hover {
  background: #2a2f4a;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}

/* ====== Mobile (max-width: 768px) ====== */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem 1rem;
  }

  .mobile-toggle,
  .phone-header-btn {
    display: block;
  }

  .nav-container {
    padding: 0 3rem;
    justify-content: space-between;
  }

  .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg-dark, #1B1F33);
    color: var(--text-light, #F3F0E8);
    flex-direction: column;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    box-shadow: -2px 0 10px rgba(0,0,0,0.5);
    z-index: 1002;
    list-style: none;
    margin: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    gap: 0;
  }

  .nav-menu.active {
    display: flex;
    transform: translateX(0);
  }

  .nav-menu li {
    margin-bottom: 1.5rem;
  }

  .nav-menu a {
    font-size: 1.2rem;
    color: var(--text-light, #F3F0E8);
  }

  .nav-menu a::after {
    background: var(--nav-text-hover);
  }

  .nav-cta-container {
    margin-inline-start: 0;
  }
}
/* ====== NAVBAR ====== */
.navbar {
  --nav-bg: transparent;
  --nav-text: #F3F0E8;
  --nav-text-hover: #39C6B4;
  --nav-cta-bg: #1B1F33;
  --nav-cta-text: #F3F0E8;
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  padding: 1rem 2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* ---------- Mobile toggle & phone ---------- */
.mobile-toggle,
.phone-header-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
  z-index: 1001;
  padding: 0.5rem;
  line-height: 0;
}

.mobile-toggle {
  right: 1rem;
}

.phone-header-btn {
  left: 1rem;
}

/* ---------- Main container ---------- */
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
}

.nav-brand {
  flex-shrink: 0;
}

.logo-link {
  display: inline-block;
  line-height: 0;
}

.logo {
  max-height: 40px;
  height: auto;
  width: auto;
}

/* ---------- Menu ---------- */
.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.nav-menu li a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  position: relative;
  transition: color 0.2s ease-out;
  padding-bottom: 0.25rem;
}

.nav-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--nav-text-hover);
  transition: width 0.2s ease-out;
}

.nav-menu li a:hover {
  color: var(--nav-text-hover);
}

.nav-menu li a:hover::after {
  width: 100%;
  right: 0;
  left: auto;
}

/* ---------- CTA Button ---------- */
.nav-cta-container {
  flex-shrink: 0;
  margin-inline-start: auto;
}

.nav-cta-btn {
  display: inline-block;
  padding: 16px 24px;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.2s ease-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  white-space: nowrap;
}

.nav-cta-btn:hover {
  background: #2a2f4a;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}

/* ====== Mobile (max-width: 768px) ====== */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem 1rem;
  }

  .mobile-toggle,
  .phone-header-btn {
    display: block;
  }

  .nav-container {
    padding: 0 3rem;
    justify-content: space-between;
  }

  .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg-dark, #1B1F33);
    color: var(--text-light, #F3F0E8);
    flex-direction: column;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    box-shadow: -2px 0 10px rgba(0,0,0,0.5);
    z-index: 1002;
    list-style: none;
    margin: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    gap: 0;
  }

  .nav-menu.active {
    display: flex;
    transform: translateX(0);
  }

  .nav-menu li {
    margin-bottom: 1.5rem;
  }

  .nav-menu a {
    font-size: 1.2rem;
    color: var(--text-light, #F3F0E8);
  }

  .nav-menu a::after {
    background: var(--nav-text-hover);
  }

  .nav-cta-container {
    margin-inline-start: 0;
  }
}


/* ============================================
   NAVBAR LAYOUT - POST-GENERATION FIXES
   Structural layout only - colors from Claude
   ============================================ */

/* Base navbar styles - structural only, colors from AI */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Background color is set by Claude's CSS - don't override */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ============================================
   DESKTOP LAYOUT (>768px)
   ============================================ */

/* Nav container - constrains max width and provides padding */
.nav-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
}

/* Logo styling (desktop) — mobile logo stays at 110px/35px, do not adjust */
.logo {
  max-height: 40px;
  max-width: 160px !important;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.logo:hover {
  opacity: 0.8;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.logo-link:focus {
  outline: none;
}

/* Remove browser default dark focus box on mouse-click; preserve for keyboard (:focus-visible). */
.navbar a:focus:not(:focus-visible),
.navbar button:focus:not(:focus-visible),
.nav-menu a:focus:not(:focus-visible) {
  outline: none;
}
.navbar a:focus-visible,
.navbar button:focus-visible,
.nav-menu a:focus-visible {
  outline: 2px solid var(--primary-color, var(--primary, #1B1F33));
  outline-offset: 2px;
}

/* Nav brand container */
.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

/* Navigation menu - positioned adjacent to logo */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.nav-menu li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-menu > li > a,
.nav-menu > .nav-item > a {
  /* inline-flex + align-items:center + line-height:1 vertically centers the
     link TEXT within the navbar row, matching the logo <img> and the
     .nav-cta-btn. Without this the link stays display:inline and inherits the
     site's body line-height (e.g. the Design Personality fluid 1.7), which
     pins the glyphs to the TOP of the padded inline box — so the menu sits
     visibly higher than the logo/CTA even though every bounding box is
     geometrically centered. Guards against that optical misalignment. */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
}

/* Nav-text COLOR override is scoped to exclude the CTA pill. The CTA carries
   its own background (--primary / a gradient) + intended on-primary text color;
   forcing the generic nav-text colour onto it produced the "invisible CTA"
   bug — e.g. var(--text-dark) text on a --primary (dark) button = same colour.
   The layout block above still applies to the CTA so vertical alignment with
   the logo/links is preserved (see the dedup-guard test). */
.nav-menu > li > a:not(.nav-cta-btn):not(.cta-button),
.nav-menu > .nav-item > a:not(.nav-cta-btn):not(.cta-button) {
  color: var(--nav-text, var(--text-light)) !important;
}

.nav-menu > li > a:not(.nav-cta-btn):not(.cta-button):hover,
.nav-menu > .nav-item > a:not(.nav-cta-btn):not(.cta-button):hover {
  color: var(--nav-text-hover, var(--secondary)) !important;
}

/* CTA pill label — WIN the specificity battle against the AI's
   ".nav-menu li a { color: var(--nav-text) }" (0,2,1), which otherwise clobbers
   the pill's own ".nav-cta-btn { color }" (0,1,0) and renders the label
   invisible on the filled pill until hover. These selectors are (0,3,2)+ and
   carry !important, so they beat both the base AND :hover nav-link colour rules
   in every state. Colour is the AI's own pill colour (or a contrast pick). */
.navbar .nav-menu li a.nav-cta-btn,
.navbar .nav-menu li a.cta-button,
.navbar .nav-menu .nav-cta-item a,
.navbar .nav-menu .nav-cta-mobile-item a,
.navbar a.nav-cta-btn,
.navbar a.cta-button {
  color: var(--nav-cta-text) !important;
}

/* CTA Container - pushed to end of navbar */
.nav-cta-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
  height: auto;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
}

.nav-cta-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Search container inside CTA area — vertically center to match CTA button */
.nav-cta-container .zappy-search-container {
  align-self: center;
}
.nav-cta-container p {
  margin: 0 !important;
}

/* CTA button - prevent stretching to fill navbar height.
   AI CSS provides colors/gradients/etc - we only constrain sizing.
   display: inline-flex + max-height: 44px keeps it as a compact pill. */
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: auto;
  max-height: 44px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}

/* ============================================
   LTR DESKTOP LAYOUT (English, Spanish, French)
   ============================================ */
html[dir="ltr"] .nav-container,
html[lang="en"] .nav-container,
html[lang="es"] .nav-container,
html[lang="fr"] .nav-container {
  justify-content: flex-start;
}

html[dir="ltr"] .nav-menu,
html[lang="en"] .nav-menu,
html[lang="es"] .nav-menu,
html[lang="fr"] .nav-menu {
  margin-left: 0;
  margin-right: 0;
}

html[dir="ltr"] .nav-cta-container,
html[lang="en"] .nav-cta-container,
html[lang="es"] .nav-cta-container,
html[lang="fr"] .nav-cta-container {
  margin-left: auto;
  margin-right: 0;
}

/* ============================================
   RTL DESKTOP LAYOUT (Hebrew, Arabic)
   ============================================ */
html[dir="rtl"] .nav-container,
html[lang="he"] .nav-container,
html[lang="ar"] .nav-container {
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* CTA on the left in RTL */
html[dir="rtl"] .nav-cta-container,
html[lang="he"] .nav-cta-container,
html[lang="ar"] .nav-cta-container {
  order: -1;
  margin: 0;
}

/* Wrapper groups menu and logo together on the right */
html[dir="rtl"] .nav-right-group,
html[lang="he"] .nav-right-group,
html[lang="ar"] .nav-right-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  order: 1;
  flex: 1;
  min-width: 0;
  flex-direction: row-reverse;
}

/* Within wrapper: Logo on far right, menu to its left */
html[dir="rtl"] .nav-right-group .nav-brand,
html[lang="he"] .nav-right-group .nav-brand,
html[lang="ar"] .nav-right-group .nav-brand {
  order: 2;
}

html[dir="rtl"] .nav-right-group .nav-menu,
html[lang="he"] .nav-right-group .nav-menu,
html[lang="ar"] .nav-right-group .nav-menu {
  order: 1;
}

/* ============================================
   DROPDOWN MENUS (Desktop)
   ============================================ */
.nav-dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.65rem;
  color: var(--nav-text, var(--text-light)) !important;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.dropdown-toggle:hover {
  color: var(--nav-text-hover, var(--secondary)) !important;
}

.dropdown-arrow {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown {
  overflow: visible !important;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--bg-light, #ffffff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 8px 0;
  z-index: 100001;
  list-style: none;
  margin: 0;
}

html[dir="rtl"] .dropdown-menu,
html[lang="he"] .dropdown-menu,
html[lang="ar"] .dropdown-menu {
  right: 0;
  left: auto;
}

html[dir="ltr"] .dropdown-menu,
html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .dropdown-menu {
  left: 0;
  right: auto;
}

@media (min-width: 769px) {
  .nav-dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--text-dark, #1a1a1a) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover {
  background: rgba(128,128,128,0.1);
  color: var(--nav-text-hover, var(--accent, var(--primary))) !important;
}

/* Desktop: Hide mobile-only elements */
@media (min-width: 769px) {
  .mobile-toggle,
  .phone-header-btn {
    display: none !important;
  }
  
  /* Hide Contact in nav-menu on desktop (it shows in CTA container instead) */
  .nav-menu .mobile-contact-link {
    display: none !important;
  }
  
  /* When .nav-right-group wrapper is absent, the nav-container has 3 direct
     children (brand, menu, CTA) with space-between. flex:1 makes the menu
     fill the gap, and justify-content:flex-start pushes items toward the
     logo side instead of centering them in the available space. */
  .nav-menu {
    flex: 1 !important;
    justify-content: flex-start !important;
  }
}

/* ============================================
   MOBILE RESPONSIVE (≤768px)
   ============================================ */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    min-height: 70px !important;
  }

  /* Reset nav-container for mobile */
  /* CRITICAL: Reset position properties to prevent conflict with AI-generated mobile CSS */
  /* Some AI generations set .nav-container to position:fixed for slide-out menus, */
  /* position:relative is needed so .nav-brand (position:absolute) centers within it */
  .nav-container {
    padding: 0.75rem 1rem;
    gap: 0;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 70px !important; /* Ensure height for absolutely positioned mobile buttons */
    width: 100% !important;
  }
  
  /* Show mobile elements - positioned as direct children of navbar */
  .mobile-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 36px !important;
    margin-top: auto;
    margin-bottom: auto;
    transform: none !important;
    left: 12px; /* LTR default - hamburger on left */
    right: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
    width: 36px !important;
    color: var(--nav-text, var(--text-light)) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .phone-header-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 36px !important;
    margin-top: auto;
    margin-bottom: auto;
    transform: none !important;
    right: 12px; /* LTR default - phone on right */
    left: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
    width: 36px !important;
    color: var(--nav-text, var(--text-light)) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Ensure logo-link is centered */
  .logo-link, .nav-brand a {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  .mobile-toggle svg,
  .phone-header-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    transition: opacity 0.3s ease;
  }
  
  .mobile-toggle svg path,
  .phone-header-btn svg path {
    stroke: currentColor !important;
  }
  
  .mobile-toggle img,
  .phone-header-btn img {
    width: 24px !important;
    height: 24px !important;
    /* Filter removed - preserve original image colors */
    /* ColorContrastService will handle contrast adjustments */
  }
  
  .mobile-toggle:hover svg,
  .phone-header-btn:hover svg {
    opacity: 0.8;
  }

  html[data-zappy-site-type="ecommerce"] .phone-header-btn,
  body[data-zappy-site-type="ecommerce"] .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] header .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] nav .phone-header-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  /* Remove default button styles */
  .mobile-toggle:focus,
  .mobile-toggle:active,
  .phone-header-btn:focus,
  .phone-header-btn:active {
    outline: none;
    border: none;
    box-shadow: none;
  }
  
  /* Center logo on mobile - applies to both LTR and RTL */
  /* RTL selectors added for higher specificity to override desktop RTL rules */
  /* IMPORTANT: Do NOT use margin shorthand (margin: 0 auto) — it resets margin-top
     which breaks AI centering hacks (top:50% + margin-top:-Npx).
     Use explicit left/right + transform for robust vertical centering. */
  .nav-brand,
  html[dir="rtl"] .nav-brand,
  html[lang="he"] .nav-brand,
  html[lang="ar"] .nav-brand,
  html[dir="rtl"] .nav-right-group .nav-brand,
  html[lang="he"] .nav-right-group .nav-brand,
  html[lang="ar"] .nav-right-group .nav-brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center;
    order: 0 !important;
  }
  
  /* Mobile logo size: fixed at 35px/110px — do not adjust, especially for e-commerce/catalog sites */
  .logo {
    max-height: 35px !important;
    max-width: 110px !important;
  }
  
  /* Hide RTL wrapper on mobile */
  .nav-right-group {
    display: contents !important;
  }
  
  /* Hide CTA container on mobile - Contact will be in hamburger menu */
  .nav-cta-container {
    display: none !important;
  }
  
  /* Mobile menu - full-screen overlay (hidden by default) */
  /* CRITICAL: display:flex + flex-direction:column carry !important so they win
     over desktop row layout AND over any inline display:block the preview/runtime
     scripts may set (they toggle the .active class as the source of truth, and a
     stylesheet !important beats a non-important inline style). Visibility is the
     hide mechanism so the panel can fade/slide via opacity + transform. */
  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: calc(100vh - 70px); /* fallback for browsers without dvh */
    height: calc(100dvh - 70px);
    /* Mobile menu is position:fixed so it CANNOT inherit background from navbar.
       When --nav-bg is transparent (hero-overlay navbars), the menu would be invisible.
       Always use a solid background derived from the palette. */
    background-color: var(--bg-dark, #1a1a1a) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
    z-index: 999;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Slide/fade reveal */
    
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s;
  }

  .nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s;
  }

  .nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(128, 128, 128, 0.12);
  }

  /* Show mobile-contact-link in hamburger menu */
  .nav-menu .mobile-contact-link {
    display: block !important;
  }

  /* Staggered reveal of menu items when the overlay opens */
  @keyframes zappyNavItemIn {
    from {  transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nav-menu.active > li {
    animation: zappyNavItemIn 0.4s ease both;
  }
  .nav-menu.active > li:nth-child(1) { animation-delay: 0.04s; }
  .nav-menu.active > li:nth-child(2) { animation-delay: 0.09s; }
  .nav-menu.active > li:nth-child(3) { animation-delay: 0.14s; }
  .nav-menu.active > li:nth-child(4) { animation-delay: 0.19s; }
  .nav-menu.active > li:nth-child(5) { animation-delay: 0.24s; }
  .nav-menu.active > li:nth-child(6) { animation-delay: 0.29s; }
  .nav-menu.active > li:nth-child(7) { animation-delay: 0.34s; }
  .nav-menu.active > li:nth-child(8) { animation-delay: 0.39s; }
  @media (prefers-reduced-motion: reduce) {
    .nav-menu {
      transition: opacity 0.001s linear, visibility 0s;
      transform: none;
    }
    .nav-menu.active { transform: none !important; }
    .nav-menu.active > li { animation: none !important; }
  }

  /* Large centered links for the overlay (overrides desktop left-align) */
  html[dir="ltr"] .nav-menu a,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .nav-menu a {
    text-align: center !important;
  }

  .nav-menu a {
    display: block;
    padding: 18px 24px;
    width: 100%;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    text-align: center;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .nav-menu a:hover,
  .nav-menu a:focus-visible {
    color: var(--nav-text-hover, var(--accent, var(--primary))) !important;
    opacity: 0.95;
  }

  /* Prominent Contact CTA pill, pinned to the bottom of the overlay */
  .nav-menu .mobile-contact-link,
  .nav-menu .nav-cta-mobile-item {
    margin-top: auto;
    border-bottom: none !important;
    padding-top: 20px;
    animation-delay: 0.44s;
  }

  /* Prefixed with .navbar (specificity 0,4,0) + !important on layout props so
     this beats two higher-specificity rules that otherwise leak into the
     overlay and mis-place the pill:
       1. RTL "push CTA far left": html[lang="he"] .nav-cta-btn { margin-right:auto
          !important; margin-left:0 !important; order:0 !important } — shoves the
          pill to the left edge on RTL sites.
       2. .navbar .nav-menu.active > li > a { display:flex !important;
          width:100% !important } — forces flex over our display:block.
     Use symmetric auto margins + order:0 so the pill stays centered in BOTH
     LTR and RTL. */
  .navbar .nav-menu .mobile-contact-link .nav-cta-btn,
  .navbar .nav-menu .nav-cta-mobile-item .nav-cta-btn,
  .navbar #navMenu .mobile-contact-link .nav-cta-btn,
  .navbar #navMenu .nav-cta-mobile-item .nav-cta-btn {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    order: 0 !important;
    padding: 16px 28px;
    border-radius: 999px;
    background: var(--primary, var(--accent, #e85d2a)) !important;
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }

  .navbar .nav-menu .mobile-contact-link .nav-cta-btn:hover,
  .navbar .nav-menu .mobile-contact-link .nav-cta-btn:focus-visible,
  .navbar .nav-menu .nav-cta-mobile-item .nav-cta-btn:hover,
  .navbar .nav-menu .nav-cta-mobile-item .nav-cta-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
    opacity: 1;
  }
  
  /* Mobile dropdown menus */
  .nav-dropdown {
    position: static;
  }
  
  .dropdown-toggle {
    display: flex;
    width: 100%;
    padding: 15px 30px;
    font-weight: 500;
    justify-content: space-between;
  }
  
  .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: rgba(128,128,128,0.06) !important;
    min-width: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: max-height 0.3s ease !important;
  }
  
  .nav-dropdown .dropdown-menu {
    display: block;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  
  .nav-dropdown.open > .dropdown-menu {
    display: block !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0.5rem 0 !important;
  }
  
  .dropdown-menu li a {
    padding: 12px 30px 12px 50px !important;
    font-size: 0.9em;
  }
  
  html[dir="rtl"] .dropdown-menu li a,
  html[lang="he"] .dropdown-menu li a,
  html[lang="ar"] .dropdown-menu li a {
    padding: 12px 50px 12px 30px !important;
  }

  /* Mobile submenu links: use nav panel text color instead of desktop submenu color.
     Desktop submenu uses light bg + dark text, but mobile submenu is inline (transparent)
     within the nav panel which may be dark. Cannot use 'inherit' because the container
     chain (.sub-menu, li) has dark color — only nav <a> tags get light color explicitly. */
  .navbar .sub-menu li a,
  nav.navbar .sub-menu li a,
  .nav-menu .sub-menu a,
  .zappy-products-dropdown .sub-menu a,
  .sub-menu a {
    color: var(--nav-text, var(--text-light)) !important;
    white-space: normal !important;
  }
  .mobile-submenu-toggle {
    color: var(--nav-text, var(--text-light)) !important;
  }

  /* Force sub-menu hidden by default on mobile */
  .navbar .zappy-products-dropdown .sub-menu,
  .navbar .zappy-products-dropdown > .sub-menu {
    display: none !important;
    position: static !important;
    max-height: 0 !important;
    overflow: hidden !important;
    
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    transform: none !important;
  }
  /* Disable hover-triggered dropdowns on mobile — only open via click (.open class) */
  .navbar .zappy-products-dropdown:hover .sub-menu,
  .navbar .zappy-products-dropdown:hover > .sub-menu,
  .navbar .zappy-products-dropdown:focus-within .sub-menu,
  .navbar .zappy-products-dropdown:focus-within > .sub-menu,
  .navbar .menu-item-has-children:hover > .sub-menu,
  .navbar .nav-dropdown:hover > .dropdown-menu {
    display: none !important;
    
    visibility: hidden !important;
    max-height: 0 !important;
    pointer-events: none !important;
  }
  .navbar .zappy-products-dropdown.open .sub-menu,
  .navbar .zappy-products-dropdown.open > .sub-menu,
  .navbar .zappy-products-dropdown .sub-menu.mobile-expanded,
  .navbar .zappy-products-dropdown > .sub-menu.mobile-expanded,
  .navbar .menu-item-has-children.open > .sub-menu,
  .navbar .menu-item-has-children > .sub-menu.mobile-expanded,
  .navbar .nav-dropdown.open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    pointer-events: auto !important;
    position: static !important;
    overflow-y: visible !important;
    padding: 0.5rem 0 !important;
  }

  /* Prevent hero image fade gradient from bleeding over headline text below */
  /* The .image-fade-gradient has bottom: -30px which extends below parent; */
  /* on mobile stacked layout this overlaps the h1 text */
  .hero-image-column {
    overflow: hidden !important;
  }
  .image-fade-gradient {
    bottom: 0 !important;
  }
}

/* ============================================
   LTR POSITIONING (English, Spanish, French, etc.)
   For LTR mobile: hamburger on LEFT, phone on RIGHT
   Uses !important to override any inline styles
   ============================================ */
@media (max-width: 768px) {
  html[dir="ltr"] .mobile-toggle,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .mobile-toggle {
    left: 12px !important;
    right: auto !important;
  }
  
  html[dir="ltr"] .phone-header-btn,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .phone-header-btn {
    right: 12px !important;
    left: auto !important;
  }
  
  html[dir="ltr"] .nav-menu,
  html:not([dir="rtl"]):not([lang="he"]):not([lang="ar"]) .nav-menu {
    left: 0 !important;
    right: auto !important;
  }
}

/* ============================================
   RTL POSITIONING (Hebrew, Arabic)
   For RTL mobile: hamburger on RIGHT, phone on LEFT
   (natural mirror of LTR layout)
   Uses !important to override any inline styles
   ============================================ */
@media (max-width: 768px) {
  html[dir="rtl"] .mobile-toggle,
  html[lang="he"] .mobile-toggle,
  html[lang="ar"] .mobile-toggle {
    left: auto !important;
    right: 12px !important;
  }
  
  html[dir="rtl"] .phone-header-btn,
  html[lang="he"] .phone-header-btn,
  html[lang="ar"] .phone-header-btn {
    left: 12px !important;
    right: auto !important;
  }
  
  html[dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    right: 0 !important;
    left: auto !important;
  }
  
  html[dir="rtl"] .nav-menu a,
  html[lang="he"] .nav-menu a,
  html[lang="ar"] .nav-menu a {
    text-align: right !important;
  }
  
  /* Hide desktop language switcher on mobile - hamburger menu handles it */
  /* High specificity to override stored CSS */
  .lang-switcher,
  .nav-cta-container .lang-switcher,
  .nav-container .lang-switcher,
  .navbar .lang-switcher,
  .navbar .nav-cta-container .lang-switcher {
    display: none !important;
  }
}

/* ============================================
   CLONED SITE NAVBAR FIXES
   For sites without nav-right-group wrapper
   ============================================ */

/* Force navbar to be truly full width.
   IMPORTANT: scoped to the SITE NAVBAR header ONLY. A bare "header" selector
   here used to clobber margin/padding on EVERY header on the page — including
   section headers (e.g. .section-header, .index-team-section__header,
   .index-features-section__intro). That made it impossible to add vertical
   spacing around any section header (the !important zero always won the
   cascade, even against AI-applied inline styles). The site navbar is always
   either header.navbar / header.site-header or a header that wraps the
   .navbar / .nav-container; section headers never carry those classes nor
   contain the navbar, so this scoping fixes the navbar without touching
   content headers. */
header.navbar,
header.site-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* :has() lives in its own block so a browser without :has() support drops
   ONLY this rule (a non-forgiving selector list is invalidated as a whole),
   leaving the header.navbar / header.site-header fallbacks above intact. */
header:has(> .navbar),
header:has(> nav.navbar),
header:has(> .nav-container),
header:has(> nav > .nav-container) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.navbar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* iOS Safari fix: When the page has hidden horizontal overflow (which iOS
   does not clip on the <html> element), width: 100% / 100vw on a fixed
   element resolves to the visual viewport width, which can exceed the
   actual layout viewport. This pushes children positioned with right:0
   off-screen to the right.

   Two-part fix:
   1. Navbar — left:0 + right:0 + width:auto + overflow-x:clip anchors
      the navbar to the real layout viewport on all mobile browsers.
      overflow-x:clip (instead of hidden) prevents Safari from creating
      a scroll container that intercepts touch events on child elements.
   2. Mobile dropdown menu — position:fixed + right:0 on the menu still
      anchors to the iOS visual viewport (regardless of its navbar parent).
      We use a CSS variable --ios-viewport-gap, set by a runtime JS snippet
      (see ensureIOSNavbarGapFix in githubService) to
      (window.innerWidth - document.documentElement.clientWidth). Shifting
      the menu's 'right' by that gap lands it on the real layout-viewport
      right edge on iOS, and is a no-op on every other browser (gap=0).  */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    width: auto !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }
  /* Selector list mirrors the RTL selectors used elsewhere in Zappy CSS so
     this rule wins the cascade via equal-or-higher specificity. */
  #navMenu,
  .nav-menu,
  html[dir="rtl"] .nav-menu,
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    position: fixed !important;
    top: var(--total-header-height, var(--zappy-navbar-bottom, 70px)) !important;
    right: var(--ios-viewport-gap, 0px) !important;
  }
}

/* Constrained nav-container - content limited to 1200px and centered */
.nav-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* RTL layout for cloned sites (without nav-right-group) */
/* Base RTL styles - apply to all screens */
html[dir="rtl"] .nav-container,
html[lang="he"] .nav-container,
html[lang="ar"] .nav-container {
  justify-content: space-between !important;
}

/* Logo stays on right in RTL - DESKTOP ONLY */
/* On mobile, logo should be centered (handled by mobile media query) */
@media (min-width: 769px) {
  html[dir="rtl"] .nav-brand,
  html[dir="rtl"] .logo-link,
  html[lang="he"] .nav-brand,
  html[lang="he"] .logo-link,
  html[lang="ar"] .nav-brand,
  html[lang="ar"] .logo-link {
    order: 2 !important;
    margin-left: 1.5rem !important;
  }
}

/* Base RTL nav-menu styles - display:flex but NOT flex-direction (that's desktop-only) */
html[dir="rtl"] .nav-menu,
html[lang="he"] .nav-menu,
html[lang="ar"] .nav-menu {
  order: 1 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* CTA button pushed to far left in RTL */
html[dir="rtl"] .cta-button,
html[dir="rtl"] a.cta-button,
html[dir="rtl"] .nav-cta-btn,
html[lang="he"] .cta-button,
html[lang="he"] a.cta-button,
html[lang="he"] .nav-cta-btn,
html[lang="ar"] .cta-button,
html[lang="ar"] a.cta-button,
html[lang="ar"] .nav-cta-btn {
  order: 0 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* DESKTOP ONLY: Horizontal flex layout for RTL navbar - prevents breaking mobile vertical menu */
@media (min-width: 769px) {
  html[dir="rtl"] .nav-container,
  html[lang="he"] .nav-container,
  html[lang="ar"] .nav-container {
    flex-direction: row-reverse !important;
  }
  
  html[dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
    /* flex:1 ensures menu fills space between brand and CTA so items
       stay adjacent to the logo instead of centering when the
       .nav-right-group wrapper is absent (cloned sites, etc.).
       justify-content: flex-start pushes items toward the logo
       (in RTL, flex-start = right side, adjacent to the brand). */
    flex: 1 !important;
    justify-content: flex-start !important;
  }
}

/* ============================================
   END NAVBAR FIXES
   ============================================ */

/* Post-generation fix: Remove main element margin-top and padding-top */
main:not(.courses-page-main) { margin-top: 0 !important; padding-top: 0 !important; }


/* Footer Styles */
/* =============================================
   CINEMATIC DARK FANTASY FOOTER – SOUL BLADES
   Hebrew (RTL) – Multi-column V2
   ============================================= */

/* CSS Variables */
:root {
  --primary: #1B1F33;
  --secondary: #5B3FD1;
  --accent: #D7263D;
  --bg-light: #F3F0E8;
  --bg-dark: #1B1F33;
  --text-dark: #1B1F33;
  --text-light: #F3F0E8;
  --text-muted: #8E95A9;
  --border-light: #D9D4C8;
  --border-dark: #343A57;
  --radius: 4px;
  --shadow: 0 8px 30px rgba(0,0,0,0.14);
  --transition: all 0.2s ease-out;
}

/* Footer Base */
.site-footer {
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding: 3.5rem 2rem 0;
  font-family: 'Rubik', sans-serif;
  border-top: 2px solid var(--accent);
  position: relative;
  overflow: hidden;
}

/* Subtle painterly texture overlay */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(215,38,61,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(91,63,209,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Multi-column Grid */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-dark);
}

/* Footer Columns */
.footer-col {
  min-width: 0;
}

.footer-col h4 {
  color: var(--text-light);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  position: relative;
  padding-bottom: 0.6rem;
  letter-spacing: 0.02em;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 2px;
  background-color: var(--accent);
  border-radius: 1px;
}

/* Company Info */
.footer-info-col .logo {
  display: block;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer-tagline {
  color: rgba(243,240,232,0.7);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* Quick Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  color: rgba(243,240,232,0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
  position: relative;
  padding-right: 0;
}

.footer-links a:hover {
  color: var(--text-light);
  padding-right: 6px;
}

.footer-links a::before {
  content: '›';
  position: absolute;
  right: -12px;
  
  transition: var(--transition);
  color: var(--accent);
}

.footer-links a:hover::before {
  opacity: 1;
  right: -16px;
}

/* Contact Info */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.contact-icon {
  color: var(--accent);
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-text a,
.contact-text {
  color: rgba(243,240,232,0.7);
  text-decoration: none;
  transition: var(--transition);
  word-break: break-word;
}

.contact-text a:hover {
  color: var(--text-light);
}

/* Business Hours */
.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px dotted rgba(243,240,232,0.1);
  font-size: 0.9rem;
}

.footer-hours li:last-child {
  border-bottom: none;
}

.hours-day {
  color: rgba(243,240,232,0.7);
}

.hours-time {
  color: var(--text-light);
  font-weight: 500;
  direction: ltr;
  text-align: left;
  min-width: 70px;
}

/* Social Media */
.footer-social {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background-color: rgba(243,240,232,0.08);
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition);
  font-size: 1rem;
}

.footer-social a:hover {
  background-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(215,38,61,0.3);
}

/* Bottom Bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0;
  font-size: 0.85rem;
}

.footer-copyright p {
  margin: 0;
  color: rgba(243,240,232,0.6);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

.footer-legal a {
  color: rgba(243,240,232,0.6);
  text-decoration: none;
  transition: var(--transition);
  font-size: 0.85rem;
}

.footer-legal a:hover {
  color: var(--text-light);
}

.zappy-attribution {
  opacity: 0.7;
}

.zappy-attribution:hover {
  opacity: 1;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }

  .footer-col h4::after {
    right: 50%;
    transform: translateX(50%);
  }

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

  .footer-info-col .logo {
    margin: 0 auto 1rem;
  }

  .footer-contact li {
    justify-content: center;
  }

  .footer-hours li {
    justify-content: center;
    gap: 1rem;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-links a:hover {
    padding-right: 0;
  }

  .footer-links a::before {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-info-col {
    grid-column: span 2;
  }
}



/* V2 Decorative Helpers — quote marks */
:root { --decorative-quote-color: var(--accent, #b48b59); --decorative-quote-font: var(--accent-font, var(--font-display, serif)); }
blockquote::before, .quote::before, [data-quote]::before {
  content: "\201C";
  font-family: var(--decorative-quote-font);
  color: var(--decorative-quote-color);
  font-size: 3.5em;
  line-height: 0;
  margin-right: 0.1em;
  vertical-align: -0.4em;
  display: inline-block;
}
blockquote::after, .quote::after, [data-quote]::after {
  content: "\201D";
  font-family: var(--decorative-quote-font);
  color: var(--decorative-quote-color);
  font-size: 3.5em;
  line-height: 0;
  margin-left: 0.1em;
  vertical-align: -0.6em;
  display: inline-block;
}
html[dir="rtl"] blockquote::before, html[dir="rtl"] .quote::before, html[dir="rtl"] [data-quote]::before { content: "\201D"; }
html[dir="rtl"] blockquote::after, html[dir="rtl"] .quote::after, html[dir="rtl"] [data-quote]::after { content: "\201C"; }

/* V2 Decorative Helpers — section divider flourish */
hr.section-flourish, .section-flourish, [data-section-divider] {
  display: block;
  width: clamp(80px, 12vw, 180px);
  height: 2px;
  margin: 1.25rem auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--accent, var(--primary, #b48b59)) 30%, var(--accent, var(--primary, #b48b59)) 70%, transparent);
  border-radius: 999px;
  opacity: 0.85;
}

/* V2 Decorative Helpers — scroll cue (bottom-of-hero) */
.scroll-cue, [data-scroll-cue] {
  position: absolute;
  left: 50%;
  bottom: max(1.5rem, 4vh);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--accent-font, var(--font-display, sans-serif));
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted, currentColor);
  pointer-events: none;
  z-index: 2;
}
.scroll-cue svg, [data-scroll-cue] svg { width: 1rem; height: 1rem; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg, [data-scroll-cue] svg { animation: decorative-scroll-bounce 2s ease-in-out infinite; }
}
@keyframes decorative-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}


/* Footer Contrast Guard — overrides dark-on-dark text */
.site-footer .contact-list a,
.site-footer .contact-list li,
.site-footer .contact-list span,
.site-footer .footer-legal a,
.site-footer .copyright p,
.site-footer .footer-description,
.site-footer .footer-bottom a,
.site-footer .footer-bottom p,
.site-footer .footer-bottom span:not(.separator) {
  color: #8E95A9 !important;
}
.site-footer .contact-list a:hover,
.site-footer .footer-legal a:hover,
.site-footer .footer-bottom a:hover {
  color: #F3F0E8 !important;
}
.site-footer .footer-legal .separator {
  color: #343A57 !important;
}
/* Footer contact alignment fix */
.footer-contact li > a { display: flex; align-items: flex-start; gap: inherit; }
/* RTL footer contact: icon on the right (start) side, text on the left */
html[dir="rtl"] .footer-contact li,
html[dir="rtl"] .site-footer .footer-contact li,
html[dir="rtl"] .site-footer .footer-col:nth-child(3) .footer-contact li {
  flex-direction: row !important;
  justify-content: flex-start !important;
}
html[dir="rtl"] .footer-contact .contact-icon { order: 0 !important; }
html[dir="rtl"] .footer-contact .contact-text { order: 1 !important; }
html[dir="rtl"] .footer-contact li > a { flex-direction: row !important; }
/* Sticky footer guard for short pages */
html, body { min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
/* hero */
.index-hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background-color: #050508;
  color: var(--text-light);
  direction: rtl;
}

/* Background Image */
.index-hero-section .hero-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.index-hero-section .hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim Overlay */
.index-hero-section .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(200,16,46,0.15) 0%, transparent 60%),
    linear-gradient(to top, rgba(5,5,8,0.92) 0%, rgba(5,5,8,0.65) 35%, rgba(5,5,8,0.35) 70%, rgba(5,5,8,0.15) 100%);
}

/* Decorative Motifs */
.index-hero-section .hero-decorations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* Blood Moon Halo */
.index-hero-section .decor-blood-moon {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at center, rgba(200,16,46,0.18) 0%, rgba(200,16,46,0.06) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.8;
}

/* Crosshair Eye Watermark */
.index-hero-section .decor-crosshair {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 120px;
  height: 120px;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .index-hero-section .decor-crosshair {
    top: 5%;
    right: 2%;
    width: 80px;
    height: 80px;
  }
}

/* Ground Ember Scatter */
.index-hero-section .decor-embers {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-image:
    radial-gradient(circle at 15% 80%, rgba(255,51,51,0.5) 0%, transparent 4%),
    radial-gradient(circle at 25% 90%, rgba(200,16,46,0.6) 0%, transparent 3%),
    radial-gradient(circle at 45% 85%, rgba(255,51,51,0.4) 0%, transparent 5%),
    radial-gradient(circle at 65% 92%, rgba(200,16,46,0.5) 0%, transparent 3%),
    radial-gradient(circle at 80% 88%, rgba(255,51,51,0.45) 0%, transparent 4%),
    radial-gradient(circle at 90% 95%, rgba(200,16,46,0.55) 0%, transparent 3%),
    linear-gradient(to top, rgba(5,5,8,0.4) 0%, transparent 100%);
  filter: blur(2px);
  opacity: 0.7;
}

/* Content Overlay */
.index-hero-section .hero-content-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 80px 60px;
  pointer-events: none;
}

.index-hero-section .hero-content-container {
  max-width: 600px;
  width: 100%;
  pointer-events: auto;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.6);
}

/* Title */
.index-hero-section .hero-title {
  font-family: 'Rubik', sans-serif;
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 16px 0;
  text-align: right;
}

/* Subtitle */
.index-hero-section .hero-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #C8102E;
  margin: 0 0 20px 0;
  text-align: right;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

/* Description */
.index-hero-section .hero-description {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: #C8C0C0;
  margin: 0 0 32px 0;
  text-align: right;
  max-width: 520px;
}

/* CTA Group */
.index-hero-section .hero-cta-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Primary Button */
.index-hero-section .btn-primary {
  display: inline-block;
  background: #C8102E;
  color: #F0E8E8;
  padding: 16px 32px;
  border-radius: 4px;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 40px rgba(200,16,46,0.4), 0 10px 30px rgba(0,0,0,0.5);
  text-shadow: none;
}

.index-hero-section .btn-primary:hover {
  background: #FF3333;
  box-shadow: 0 0 60px rgba(200,16,46,0.6), 0 15px 40px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}

/* Secondary Button */
.index-hero-section .btn-secondary {
  display: inline-block;
  background: transparent;
  color: #F0E8E8;
  padding: 16px 28px;
  border-radius: 4px;
  border: 1px solid rgba(240,232,232,0.4);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  text-shadow: none;
}

.index-hero-section .btn-secondary:hover {
  background: rgba(240,232,232,0.08);
  border-color: rgba(240,232,232,0.7);
  box-shadow: 0 0 30px rgba(200,16,46,0.2);
  transform: translateY(-2px);
}

/* Bottom Divider */
.index-hero-section .index-hero-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 5;
  pointer-events: none;
}

.index-hero-section .index-hero-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .index-hero-section {
    min-height: 500px;
    height: auto;
    padding-top: 100px;
  }

  .index-hero-section .hero-content-overlay {
    padding: 40px 20px 80px 20px;
    align-items: flex-end;
  }

  .index-hero-section .hero-content-container {
    max-width: 100%;
  }

  .index-hero-section .hero-title {
    font-size: 3rem;
    margin-bottom: 12px;
  }

  .index-hero-section .hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }

  .index-hero-section .hero-description {
    font-size: 0.9rem;
    margin-bottom: 24px;
    max-width: 100%;
  }

  .index-hero-section .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .index-hero-section .btn-primary,
  .index-hero-section .btn-secondary {
    text-align: center;
    padding: 14px 20px;
    font-size: 0.8rem;
  }

  .index-hero-section .decor-blood-moon {
    width: 300px;
    height: 300px;
    top: -5%;
    right: -10%;
  }

  .index-hero-section .decor-embers {
    height: 20%;
  }

  .index-hero-section .index-hero-divider-wrapper {
    height: 50px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .index-hero-section .hero-content-overlay {
    padding: 60px 40px;
  }

  .index-hero-section .hero-title {
    font-size: 4rem;
  }

  .index-hero-section .hero-content-container {
    max-width: 500px;
  }
}
/* ZAPPY_POSTGEN_GUARD_HERO_FONT_CAP:index-hero */
.hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 48px !important; line-height: 1.2 !important; }
@media (max-width: 1024px) {
  .hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 36px !important; }
}
@media (max-width: 768px) {
  .hero h1, .hero-section h1, [class*="hero-"] h1, [class~="hero"] h1, .hero .hero-title, .hero-title { font-size: 28px !important; }
}


/* features */
.index-features-section {
  position: relative;
  overflow: visible;
  background-color: var(--bg-light);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(215,38,61,0.04) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(27,31,51,0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(243,240,232,0.9) 0%, rgba(243,240,232,1) 100%);
  color: var(--text-dark);
  padding: 80px 16px 120px;
  font-family: 'Rubik', sans-serif;
  direction: rtl;
}

.index-features-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Intro Block */
.index-features-section__intro {
  text-align: center;
  margin-bottom: 64px;
  padding: 0 16px;
}

.index-features-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}

.index-features-section__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--accent);
  margin: 12px auto 0;
  opacity: 0.6;
}

.index-features-section__subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Features Grid */
.index-features-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  direction: rtl;
}

/* Feature Card */
.index-features-section__card {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  border: 1px solid var(--border-light);
  border-top: 2px solid rgba(215, 38, 61, 0.25);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.index-features-section__card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(215,38,61,0.02) 2px, rgba(215,38,61,0.02) 4px),
    radial-gradient(circle at 90% 10%, rgba(215,38,61,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.index-features-section__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 20px rgba(215,38,61,0.08);
  border-top-color: rgba(215, 38, 61, 0.5);
}

.index-features-section__card-marker {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--accent);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.index-features-section__card-marker svg {
  width: 100%;
  height: 100%;
  display: block;
}

.index-features-section__card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  position: relative;
  z-index: 1;
}

.index-features-section__card-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 0 24px 0;
  position: relative;
  z-index: 1;
  flex-grow: 1;
}

.index-features-section__card-image {
  width: 100%;
  height: auto;
  min-width: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  object-fit: cover;
  aspect-ratio: 3 / 2;
  position: relative;
  z-index: 1;
  margin-top: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.index-features-section__card:hover .index-features-section__card-image {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* Bottom Divider */
.index-features-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-features-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .index-features-section {
    padding: 48px 16px 100px;
  }

  .index-features-section__intro {
    margin-bottom: 40px;
    padding: 0;
  }

  .index-features-section__title {
    font-size: 1.6rem;
  }

  .index-features-section__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .index-features-section__card {
    padding: 24px;
  }

  .index-features-section__card-text {
    font-size: 1rem;
    line-height: 1.7;
  }

  .index-features-section__divider-wrapper {
    height: 60px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .index-features-section__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .index-features-section__card {
    padding: 24px;
  }
}

/* showcase */
.index-showcase-section {
  position: relative;
  overflow: visible;
  background-color: #050508;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(200,16,46,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139,0,0,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #050508 0%, #0D0A12 100%);
  color: var(--text-light);
  padding: 80px 16px 80px;
  direction: rtl;
}

.index-showcase-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Intro Block */
.index-showcase-section__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}

.index-showcase-section__intro-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
  text-align: start;
}

.index-showcase-section__intro-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #C8C0C0;
  margin: 0;
  text-align: start;
  max-width: 700px;
}

/* 2x2 Grid */
.index-showcase-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Chapter Card */
.index-showcase-section__card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(13,10,18,0.85);
  border: 1px solid rgba(200,16,46,0.2);
  border-top: 2px solid rgba(200,16,46,0.5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 15px rgba(200,16,46,0.08);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  min-width: 0;
}

.index-showcase-section__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 30px rgba(200,16,46,0.2);
}

.index-showcase-section__card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.index-showcase-section__card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.index-showcase-section__card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(5,5,8,0.4) 0%, rgba(5,5,8,0.85) 60%, rgba(5,5,8,0.95) 100%);
  z-index: 1;
}

.index-showcase-section__card-content {
  position: relative;
  z-index: 10;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  margin-top: auto;
}

.index-showcase-section__chapter-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(200,16,46,0.15);
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.index-showcase-section__card-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 12px 0;
  text-align: start;
}

.index-showcase-section__card-text {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  color: #8A7A7A;
  margin: 0 0 16px 0;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.index-showcase-section__card-cta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  align-self: flex-start;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.index-showcase-section__card-cta:hover {
  border-bottom-color: var(--accent);
  color: #E83A4A;
}

/* Bottom Divider */
.index-showcase-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-showcase-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .index-showcase-section {
    padding: 48px 16px 80px;
  }

  .index-showcase-section__intro {
    margin-bottom: 32px;
  }

  .index-showcase-section__intro-title {
    font-size: 1.8rem;
  }

  .index-showcase-section__grid {
    grid-template-columns: 1fr !important;
  }

  .index-showcase-section__card {
    min-height: 320px;
  }

  .index-showcase-section__card-content {
    padding: 24px;
  }

  .index-showcase-section__card-text {
    -webkit-line-clamp: 4;
  }
}

@media (min-width: 769px) {
  .index-showcase-section__intro {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
  }

  .index-showcase-section__intro-title {
    flex-shrink: 0;
    max-width: 45%;
  }

  .index-showcase-section__intro-text {
    max-width: 50%;
  }
}

/* benefits */
/* =============================================
   SOUL BLADES — Benefits Section (בית)
   Layout: Alternating Editorial + Atmospheric Illustration
   Divider: Curved Mist Band with Embers
   ============================================= */

.index-benefits-section {
  position: relative;
  background-color: #050508;
  background-image:
    radial-gradient(circle at 15% 40%, rgba(200,16,46,0.06) 0%, transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(0,191,166,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #050508 0%, #0D0A12 100%);
  color: var(--text-light);
  padding: 80px 16px 120px; /* extra bottom padding for divider */
  overflow: visible;
  direction: rtl;
}

.index-benefits-section__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* =============================================
   CONTENT COLUMN (Right side in RTL)
   ============================================= */
.index-benefits-section__content {
  flex: 1 1 55%;
  min-width: 0;
}

.index-benefits-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 16px 0;
  text-align: start;
}

.index-benefits-section__intro {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: #C8C0C0;
  margin: 0 0 40px 0;
  text-align: start;
  max-width: 540px;
}

/* =============================================
   BENEFITS LIST
   ============================================= */
.index-benefits-section__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.index-benefits-section__benefit {
  padding: 20px 0;
}

.index-benefits-section__benefit-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 8px 0;
  text-align: start;
}

.index-benefits-section__benefit-text {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  color: #8A7A7A;
  margin: 0;
  text-align: start;
  max-width: 520px;
}

/* Runic Divider */
.index-benefits-section__rune-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,16,46,0.3) 20%, rgba(200,16,46,0.6) 50%, rgba(200,16,46,0.3) 80%, transparent 100%);
  position: relative;
  margin: 4px 0;
}

.index-benefits-section__rune-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(200,16,46,0.8), 0 0 16px rgba(200,16,46,0.4);
}

/* =============================================
   MEDIA COLUMN (Left side in RTL)
   ============================================= */
.index-benefits-section__media {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-benefits-section__illustration-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(215,38,61,0.2), 0 20px 60px rgba(0,0,0,0.7);
  border: 1px solid rgba(200,16,46,0.2);
  transition: all 0.3s ease;
}

.index-benefits-section__illustration-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 0 50px rgba(215,38,61,0.35), 0 30px 80px rgba(0,0,0,0.8);
}

.index-benefits-section__illustration {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  position: relative;
  z-index: 2;
}

/* Decorative Mist Overlay */
.index-benefits-section__mist-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, rgba(0,191,166,0.12) 0%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* Crack Light Effect */
.index-benefits-section__crack-light {
  position: absolute;
  top: 30%;
  right: 40%;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(215,38,61,0.8), rgba(255,80,80,0.6), transparent);
  transform: rotate(-15deg);
  filter: blur(2px);
  pointer-events: none;
  z-index: 4;
  animation: crack-pulse 3s ease-in-out infinite;
}

@keyframes crack-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* =============================================
   BOTTOM DIVIDER: Curved Mist Band
   ============================================= */
.index-benefits-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-benefits-section__divider-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =============================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================= */
@media (max-width: 768px) {
  .index-benefits-section {
    padding: 48px 16px 100px;
  }

  .index-benefits-section__container {
    flex-direction: column;
    gap: 40px;
  }

  .index-benefits-section__content {
    flex: 1 1 100%;
    order: 2;
  }

  .index-benefits-section__media {
    flex: 1 1 100%;
    order: 1;
  }

  .index-benefits-section__heading {
    font-size: 1.8rem;
    text-align: center;
  }

  .index-benefits-section__intro {
    text-align: center;
    margin: 0 auto 32px auto;
    max-width: 100%;
  }

  .index-benefits-section__benefit-title {
    font-size: 1.25rem;
  }

  .index-benefits-section__benefit-text {
    max-width: 100%;
  }

  .index-benefits-section__illustration-wrapper {
    max-width: 100%;
  }

  .index-benefits-section__divider-wrapper {
    height: 60px;
  }
}

/* testimonials */
.index-testimonials-section {
  position: relative;
  overflow: visible;
  background-color: #050508;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(200,16,46,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139,0,0,0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(91,63,209,0.04) 0%, transparent 70%),
    linear-gradient(180deg, #050508 0%, #0D0A12 100%);
  color: var(--text-light);
  padding: 80px 16px 100px;
  direction: rtl;
  text-align: right;
}

.index-testimonials-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Section Header */
.index-testimonials-section__header {
  text-align: center;
  margin-bottom: 48px;
}

.index-testimonials-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 12px 0;
  text-align: center;
  max-width: none;
}

.index-testimonials-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Testimonial Cards Grid */
.index-testimonials-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 40px;
}

/* Individual Card */
.index-testimonials-section__card {
  background: rgba(13,10,18,0.85);
  border-radius: var(--radius-card);
  border: 1px solid rgba(200,16,46,0.2);
  border-top: 2px solid rgba(200,16,46,0.5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 15px rgba(200,16,46,0.08);
  padding: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.index-testimonials-section__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 25px rgba(200,16,46,0.15);
}

.index-testimonials-section__card--featured {
  background: rgba(13,10,18,0.9);
  border: 1px solid rgba(200,16,46,0.35);
  border-top: 2px solid rgba(200,16,46,0.7);
  box-shadow: 0 15px 50px rgba(0,0,0,0.7), 0 0 25px rgba(200,16,46,0.15), 0 0 60px rgba(200,16,46,0.08);
  transform: scale(1.03);
  z-index: 1;
}

.index-testimonials-section__card--featured:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 35px 90px rgba(0,0,0,0.85), 0 0 35px rgba(200,16,46,0.25), 0 0 80px rgba(200,16,46,0.12);
}

.index-testimonials-section__card-inner {
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Quote Icon */
.index-testimonials-section__quote-icon {
  width: 36px;
  height: 36px;
  color: rgba(200,16,46,0.5);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.index-testimonials-section__card--featured .index-testimonials-section__quote-icon {
  width: 42px;
  height: 42px;
  color: rgba(200,16,46,0.7);
}

/* Quote Text */
.index-testimonials-section__quote {
  margin: 0 0 24px 0;
  flex: 1;
}

.index-testimonials-section__quote p {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0;
  text-align: right;
}

.index-testimonials-section__card--featured .index-testimonials-section__quote p {
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Attribution Footer */
.index-testimonials-section__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(240,232,232,0.1);
  padding-top: 16px;
  margin-top: auto;
}

.index-testimonials-section__author {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-light);
  text-align: right;
}

.index-testimonials-section__role {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}

/* Audience-fit Tags */
.index-testimonials-section__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.index-testimonials-section__tag {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  background: rgba(200,16,46,0.1);
  border: 1px solid rgba(200,16,46,0.25);
  border-radius: 2px;
  padding: 6px 14px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.index-testimonials-section__tag:hover {
  background: rgba(200,16,46,0.2);
  border-color: rgba(200,16,46,0.5);
  box-shadow: 0 0 12px rgba(200,16,46,0.2);
}

/* Bottom Divider: Crystalline Wave Edge */
.index-testimonials-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-testimonials-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .index-testimonials-section {
    padding: 48px 16px 80px;
  }

  .index-testimonials-section__title {
    font-size: 1.6rem;
  }

  .index-testimonials-section__subtitle {
    font-size: 0.9rem;
  }

  .index-testimonials-section__grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .index-testimonials-section__card--featured {
    transform: scale(1);
  }

  .index-testimonials-section__card--featured:hover {
    transform: scale(1) translateY(-4px);
  }

  .index-testimonials-section__card-inner {
    padding: 24px;
  }

  .index-testimonials-section__tag {
    font-size: 0.7rem;
    padding: 5px 10px;
  }

  .index-testimonials-section__divider-wrapper {
    height: 50px;
  }
}

/* Responsive: Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .index-testimonials-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .index-testimonials-section__card--featured {
    grid-column: span 2;
    transform: scale(1);
  }

  .index-testimonials-section__card--featured:hover {
    transform: scale(1) translateY(-4px);
  }
}


/* stats */
.index-stats-section {
  position: relative;
  overflow: visible;
  background: var(--bg-light);
  color: var(--text-dark);
  padding: var(--spacing-section) 16px;
  padding-bottom: calc(var(--spacing-section) + 80px);
  direction: rtl;
}

.index-stats-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Header */
.index-stats-section__header {
  text-align: center;
  margin-bottom: 48px;
}

.index-stats-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 12px 0;
  letter-spacing: 0.02em;
}

.index-stats-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid */
.index-stats-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D9D4C8' fill-opacity='0.4'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 6px 6px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--border-light);
}

/* Stat Card */
.index-stats-section__stat-card {
  position: relative;
  padding: var(--spacing-card-padding);
  text-align: center;
  border-inline-end: 1px solid var(--border-light);
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  transition: var(--transition-default);
  min-width: 0;
}

.index-stats-section__stat-card:last-child {
  border-inline-end: none;
}

.index-stats-section__stat-card:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-4px);
  box-shadow: var(--shadow-btn-hover);
  z-index: 3;
}

/* Number */
.index-stats-section__stat-number {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Title */
.index-stats-section__stat-title {
  font-family: 'Rubik', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0 0 8px 0;
}

/* Description */
.index-stats-section__stat-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* Divider */
.index-stats-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.index-stats-section__divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .index-stats-section {
    padding: var(--spacing-section-mobile) 16px;
    padding-bottom: calc(var(--spacing-section-mobile) + 60px);
  }

  .index-stats-section__divider-wrapper {
    height: 60px;
  }

  .index-stats-section__header {
    margin-bottom: 32px;
  }

  .index-stats-section__grid {
    grid-template-columns: 1fr !important;
    gap: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .index-stats-section__stat-card {
    border-inline-end: none;
    border-bottom: 1px solid var(--border-light);
    padding: 24px 20px;
  }

  .index-stats-section__stat-card:last-child {
    border-bottom: none;
  }

  .index-stats-section__stat-number {
    font-size: 48px;
  }

  .index-stats-section__title {
    font-size: 28px;
  }
}

/* contact */
/* ==============================================
   CONTACT SECTION — Soul Blades Final CTA
   Dark gradient sky, forest silhouettes, falling ash,
   restrained red glow around form edges.
   ============================================== */

.index-contact-section {
  position: relative;
  overflow: hidden;
  background-color: #050508;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(200,16,46,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139,0,0,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #050508 0%, #0D0A12 100%);
  color: var(--text-light);
  padding: 80px 16px;
  direction: rtl;
  text-align: right;
}

/* ---------- Background Decor ---------- */
.index-contact-section__bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Forest silhouettes */
.index-contact-section__forest {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,40 Q30,10 60,35 T120,20 Q150,5 180,30 T240,15 Q270,5 300,25 T360,10 Q390,0 420,20 T480,5 Q510,0 540,15 T600,5 Q630,0 660,18 T720,5 Q750,0 780,12 T840,5 Q870,0 900,15 T960,5 Q990,0 1020,12 T1080,5 Q1110,0 1140,15 T1200,8 L1200,120 Z' fill='%230D0A12' opacity='0.7'/%3E%3Cpath d='M0,120 L0,55 Q40,30 80,50 T160,35 Q200,20 240,45 T320,30 Q360,20 400,40 T480,25 Q520,15 560,35 T640,20 Q680,15 720,30 T800,18 Q840,10 880,28 T960,15 Q1000,10 1040,25 T1120,12 Q1160,5 1200,20 L1200,120 Z' fill='%231A1020' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}

/* Falling ash particles */
.index-contact-section__ash {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(200, 200, 200, 0.3);
  border-radius: 50%;
  animation: ashFall linear infinite;
}
.ash-1 { left: 10%; top: -5%; animation-duration: 8s; animation-delay: 0s; width: 3px; height: 3px; }
.ash-2 { left: 25%; top: -5%; animation-duration: 12s; animation-delay: 2s; width: 2px; height: 2px; }
.ash-3 { left: 40%; top: -5%; animation-duration: 10s; animation-delay: 5s; width: 4px; height: 4px; }
.ash-4 { left: 55%; top: -5%; animation-duration: 14s; animation-delay: 1s; width: 3px; height: 3px; }
.ash-5 { left: 70%; top: -5%; animation-duration: 9s; animation-delay: 3s; width: 2px; height: 2px; }
.ash-6 { left: 85%; top: -5%; animation-duration: 11s; animation-delay: 4s; width: 3px; height: 3px; }

@keyframes ashFall {
  0% { transform: translateY(0) rotate(0deg);  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(105vh) rotate(360deg);  }
}

/* Crosshair-eye watermark */
.index-contact-section__crosshair {
  position: absolute;
  top: 40px;
  left: 40px;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

/* Blood moon halo */
.index-contact-section__moon-halo {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.15) 0%, rgba(200,16,46,0.05) 30%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Ground ember scatter */
.index-contact-section__embers {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 0;
  pointer-events: none;
}
.ember {
  position: absolute;
  bottom: 10px;
  width: 6px;
  height: 6px;
  background: #FF3333;
  border-radius: 50%;
  
  animation: emberGlow 2s ease-in-out infinite;
}
.e-1 { left: 5%; animation-delay: 0s; }
.e-2 { left: 15%; animation-delay: 0.3s; width: 4px; height: 4px; }
.e-3 { left: 30%; animation-delay: 0.7s; width: 8px; height: 8px; }
.e-4 { left: 45%; animation-delay: 1.1s; width: 5px; height: 5px; }
.e-5 { left: 60%; animation-delay: 0.5s; }
.e-6 { left: 75%; animation-delay: 0.9s; width: 4px; height: 4px; }
.e-7 { left: 90%; animation-delay: 1.4s; width: 7px; height: 7px; }

@keyframes emberGlow {
  0%, 100% {  transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(-15px); }
}

/* ---------- Content Container ---------- */
.index-contact-section__container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Two-Column Grid ---------- */
.index-contact-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ---------- Copy Column ---------- */
.index-contact-section__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.index-contact-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
}

.index-contact-section__lead {
  font-size: 1rem;
  line-height: 1.8;
  color: #C8C0C0;
  margin: 0;
}

.index-contact-section__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.index-contact-section__step {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #8A7A7A;
  margin: 0;
  padding-inline-start: 8px;
}

.index-contact-section__cta {
  display: inline-block;
  align-self: flex-start;
  background: #C8102E;
  color: #F0E8E8;
  padding: 14px 32px;
  border-radius: 4px;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 40px rgba(200,16,46,0.2);
}
.index-contact-section__cta:hover {
  box-shadow: 0 0 60px rgba(200,16,46,0.5);
  transform: translateY(-2px);
}

/* ---------- Form Column ---------- */
.index-contact-section__form-wrapper {
  position: relative;
  padding: 32px;
  background: rgba(13,10,18,0.85);
  border-radius: 4px;
  border: 1px solid rgba(200,16,46,0.2);
  border-top: 2px solid rgba(200,16,46,0.5);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.6),
    0 0 15px rgba(200,16,46,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Subtle glow behind form */
.index-contact-section__form-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(200,16,46,0.15), transparent 60%);
  z-index: -1;
  filter: blur(10px);
}

.index-contact-section__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.index-contact-section__form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.index-contact-section__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #C8C0C0;
}

.index-contact-section__input,
.index-contact-section__textarea {
  background: rgba(5,5,8,0.9);
  border: 1px solid rgba(200,16,46,0.3);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #F0E8E8;
  font-family: 'Rubik', sans-serif;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}
.index-contact-section__input:focus,
.index-contact-section__textarea:focus {
  border-color: rgba(200,16,46,0.7);
  box-shadow: 0 0 10px rgba(200,16,46,0.2);
}
.index-contact-section__input::placeholder,
.index-contact-section__textarea::placeholder {
  color: #5A4A4A;
}

.index-contact-section__textarea {
  resize: vertical;
  min-height: 100px;
}

/* Privacy consent */
.index-contact-section__consent {
  margin-top: 4px;
}
.index-contact-section__consent .privacy-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: #8A7A7A;
  line-height: 1.4;
}
.index-contact-section__consent .privacy-consent-checkbox {
  accent-color: #C8102E;
  margin-top: 2px;
  flex-shrink: 0;
}
.index-contact-section__consent a {
  color: #C8102E;
  text-decoration: underline;
}

/* Submit button */
.index-contact-section__submit {
  align-self: flex-start;
  background: #C8102E;
  color: #F0E8E8;
  padding: 14px 32px;
  border-radius: 4px;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 40px rgba(200,16,46,0.2);
  margin-top: 8px;
}
.index-contact-section__submit:hover {
  box-shadow: 0 0 60px rgba(200,16,46,0.5);
  transform: translateY(-2px);
}

/* ---------- Closing Vow Block ---------- */
.index-contact-section__vow {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(200,16,46,0.15);
  text-align: center;
}

.index-contact-section__vow-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #C8C0C0;
  font-style: italic;
  margin: 0;
}

/* ==============================================
   RESPONSIVE — Mobile
   ============================================== */
@media (max-width: 768px) {
  .index-contact-section {
    padding: 48px 16px;
  }

  .index-contact-section__grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .index-contact-section__heading {
    font-size: 1.8rem;
  }

  .index-contact-section__lead {
    font-size: 0.9rem;
  }

  .index-contact-section__form-wrapper {
    padding: 24px 16px;
  }

  .index-contact-section__crosshair {
    top: 20px;
    left: 20px;
    opacity: 0.06;
  }

  .index-contact-section__moon-halo {
    width: 300px;
    height: 300px;
    top: -60px;
    right: -60px;
  }

  .index-contact-section__vow {
    margin-top: 32px;
    padding-top: 24px;
  }

  .index-contact-section__vow-text {
    font-size: 0.95rem;
  }

  .index-contact-section__cta,
  .index-contact-section__submit {
    width: 100%;
    text-align: center;
    align-self: stretch;
  }
}


/* ZAPPY_POSTGEN_GUARD_DECOR_LAYERING:בית-contact (index-contact) */
[data-layout-spec="בית-contact"] .decorative-backplate,
[data-layout-spec="בית-contact"] .diagonal-divider,
[data-layout-spec="בית-contact"] .gradient-transition,
[data-layout-spec="בית-contact"] .section-transition-divider,
[data-layout-spec="בית-contact"] svg[aria-hidden="true"],
[data-layout-spec="בית-contact"] svg[data-no-icon-edit="true"],
[data-layout-spec="בית-contact"] svg[preserveAspectRatio="none"],
[data-layout-spec="בית-contact"] svg[preserveaspectratio="none"] {
  pointer-events: none !important;
  z-index: 0 !important;
}

[data-layout-spec="בית-contact"] .profile-image-wrapper,
[data-layout-spec="בית-contact"] [class*="image-wrapper"],
[data-layout-spec="בית-contact"] [class*="img-wrapper"],
[data-layout-spec="בית-contact"] [class*="photo-wrapper"] {
  position: relative !important;
  isolation: isolate !important; /* create a local stacking context */
}

[data-layout-spec="בית-contact"] img {
  position: relative !important;
  z-index: 2 !important;
}
/* End ZAPPY_POSTGEN_GUARD_DECOR_LAYERING:בית-contact */




/* Global font override - exclude icon fonts and special elements */
*:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(.iconify):not([class*="icon"]):not(code):not(pre):not(i[class*="fa"]) {
  font-family: 'Rubik', sans-serif !important;
}


/* Logo size constraint - enforce max-height only */
.logo, img.logo, .logo img, .logo-link img, .nav-brand img {
  max-height: 40px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}


/* Footer contact alignment fix */
.footer-contact li > a { display: flex; align-items: flex-start; gap: inherit; }

/* RTL footer contact: icon on the right (start) side, text on the left */
html[dir="rtl"] .footer-contact li, html[dir="rtl"] .site-footer .footer-contact li, html[dir="rtl"] .site-footer .footer-col:nth-child(3) .footer-contact li { flex-direction: row !important; justify-content: flex-start !important; }
html[dir="rtl"] .footer-contact .contact-icon { order: 0 !important; }
html[dir="rtl"] .footer-contact .contact-text { order: 1 !important; }
html[dir="rtl"] .footer-contact li > a { flex-direction: row !important; }


/* ============================================
   MOBILE RESPONSIVE FIXES (Auto-generated)
   Safe, minimal fixes for common overflow issues
   ============================================ */

@media (max-width: 768px) {
  
  /* 1. GLOBAL FIXES - Essential for preventing horizontal scroll */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }
  
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* 2. FORM FIXES - Forms often have fixed widths */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .form-field,
  .form-group,
  .input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. GRID TO COLUMN CONVERSION */
  /* Only convert grids that don't have proper mobile handling */
  [style*="display: grid"]:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid),
  [style*="display:grid"]:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid),
  .grid:not([data-zappy-auto-grid="true"]):not(.zappy-preserve-css-grid) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  /* Ensure auto-grids use single column on mobile */
  [data-zappy-auto-grid="true"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Force single-column for AI-generated grids with class names like gallery-grid, features-grid, etc. */
  /* These often have fixed column counts (repeat(3, 1fr) or repeat(4, 1fr)) that don't fit mobile */
  [class*="-grid"]:not([data-zappy-auto-grid="true"]):not([data-zappy-explicit-columns="true"]) {
    grid-template-columns: 1fr !important;
  }
  
  /* Reset any column/row spanning items on mobile - they cause overflow */
  [class*="-grid"] > [class*="-large"],
  [class*="-grid"] > [class*="-item-large"],
  [class*="-grid"] > [style*="grid-column: span"],
  [class*="-grid"] > [style*="grid-row: span"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* Fix zoom wrapper images to be responsive on mobile */
  [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  [data-zappy-zoom-wrapper="true"] img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: cover !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Hero sections need extra padding-top to clear the sticky navbar */
  /* The navbar is ~70px tall, so hero needs at least 100px padding-top */
  /* IMPORTANT: Use section tag to avoid matching child elements like buttons that contain "-hero-section" in their BEM class */
  section[class*="-hero-section"]:first-of-type,
  main > section:first-child {
    padding-top: 100px !important;
  }

  main > section:first-child:has(.hero-sbs-wrap),
  section[class*="-hero-section"]:first-of-type:has(.hero-sbs-wrap) {
    padding-top: 0 !important;
  }

  .hero-sbs-image-frame [data-zappy-zoom-wrapper="true"] img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 4. TYPOGRAPHY SCALING - Only headings, NOT spans (breaks icons) */
  h1 {
    font-size: clamp(28px, 8vw, 48px) !important;
  }
  
  h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  
  h3 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  
  h4 {
    font-size: clamp(18px, 4vw, 24px) !important;
  }

  /* Body text scaling - exclude spans to avoid breaking icons */
  p, li {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  /* 5. IMAGE RESPONSIVENESS */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5b. HERO BG IMAGE EXCEPTION - fullscreen hero backgrounds must fill their
     absolute-positioned wrapper, not shrink to natural aspect-ratio height.
     data-hero-bg is added deterministically by sectionGenerationService. */
  img[data-hero-bg] {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* 6. MULTI-COLUMN LAYOUTS */
  .columns,
  [style*="column-count"],
  [style*="columns:"] {
    column-count: 1 !important;
    columns: 1 !important;
  }

  /* 7. TABLES */
  table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
  }

  /* 8. CARDS/BLOCKS */
  .card,
  .block,
  .box {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 9. HERO SECTIONS - Targeted selectors only */
  section.hero,
  section.hero-section,
  section[class*="hero-section"] {
    min-height: auto !important;
    height: auto !important;
    padding: 2rem 1rem !important;
  }

  /* 9b. HERO SECTION CHILDREN - prevent 100vh min-height on inner wrappers
     AI often sets content-wrappers / scrim divs to min-height:100vh which
     creates huge empty space on mobile. Reset direct children so the section
     sizes to its content. Absolute-positioned backgrounds are unaffected. */
  section.hero > *,
  section.hero-section > *,
  section[class*="hero-section"] > * {
    min-height: auto !important;
  }

  /* 9c. FULLSCREEN HERO EXCEPTION — from sharedMobileCss.js */

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 clamp(1rem, 5vw, 1.5rem) 90px !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }

  /* 10. HERO TITLE ACCENTS - ensure inline display for proper text flow */
  h1 span[class*="accent"],
  h2 span[class*="accent"],
  .hero-title span,
  .hero-heading span {
    display: inline !important;
  }

  /* 11. PACKAGES/CARDS GRIDS - Specific class targeting */
  .packages-grid,
  .cards-grid,
  .pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* 12. PREVENT HORIZONTAL SCROLL - Safety net */
  body > * {
    max-width: 100vw !important;
  }
}

/* END MOBILE RESPONSIVE FIXES */

/* === NAVBAR STYLE OVERRIDES START === */
.navbar { background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(0,0,0,var(--nav-overlay-opacity,0.35)), transparent) !important; transition: background-color 0.3s ease, background-image 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease !important; }
.zappy-catalog-menu, #zappy-catalog-menu { background-image: linear-gradient(to bottom, rgba(0,0,0,var(--nav-overlay-opacity,0.35)), transparent) !important; transition: background 0.3s ease, background-image 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease !important;}
.navbar .nav-menu > li > a,
.navbar .nav-menu > .nav-item > a,
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.navbar a:not(.nav-cta-btn) { color: #F3F0E8 !important; }
.navbar .nav-menu > li > a:hover,
.navbar .nav-menu > .nav-item > a:hover,
.navbar .nav-link:hover,
.navbar a:not(.nav-cta-btn):hover { color: #39C6B4 !important; }
.navbar .navbar-brand, .navbar .navbar-brand a { color: #F3F0E8 !important; }
.navbar .dropdown-toggle { color: #F3F0E8 !important; }
.navbar .dropdown-toggle:hover { color: #39C6B4 !important; }
.navbar .mobile-hamburger-btn, .navbar .mobile-close-btn { color: #F3F0E8 !important; }
.navbar-toggler { color: #F3F0E8 !important; border-color: #F3F0E844 !important; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F3F0E8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
.navbar .dropdown-menu { background-color: #1B1F33 !important; }
.navbar .dropdown-menu li a,
.navbar .dropdown-menu .dropdown-item { color: #F3F0E8 !important; }
.navbar .dropdown-menu li a:hover,
.navbar .dropdown-menu .dropdown-item:hover { color: #39C6B4 !important; background-color: rgba(128,128,128,0.1) !important; }
.navbar .sub-menu,
.navbar ul.sub-menu,
nav.navbar .sub-menu { background-color: #1B1F33 !important; }
.navbar .sub-menu a,
.navbar .sub-menu li a,
.navbar .nav-menu .sub-menu a,
.navbar .nav-menu .sub-menu li a,
.navbar .zappy-products-dropdown .sub-menu a,
nav.navbar .sub-menu li a { color: #F3F0E8 !important; }
.navbar .sub-menu a:hover,
.navbar .sub-menu li a:hover,
nav.navbar .sub-menu li a:hover { color: #39C6B4 !important; background-color: rgba(128,128,128,0.1) !important; }
.navbar .mobile-submenu-toggle { color: #F3F0E8 !important; }
.navbar .phone-header-btn { color: #F3F0E8 !important; }
.navbar .nav-search-input,
.navbar .nav-search-box .nav-search-input { color: #1B1F33 !important; }
.navbar .nav-search-input::placeholder { color: var(--text-muted, rgba(128,128,128,0.6)) !important; }
@media (min-width: 769px) {
  .navbar .nav-search-box .nav-search-btn { color: #1B1F33 !important; }
  .navbar .nav-search-box .nav-search-btn svg { stroke: #1B1F33 !important; fill: none !important; }
}
.navbar .nav-search-result-name { color: #1B1F33 !important; }
.navbar .nav-search-result-item a { color: #1B1F33 !important; }
.navbar .nav-search-result-price { color: var(--accent, var(--primary)) !important; }
.navbar .nav-search-no-results,
.navbar .search-no-results { color: var(--text-muted, rgba(128,128,128,0.6)) !important; }
.zappy-catalog-menu, #zappy-catalog-menu { background: transparent !important; }
.zappy-catalog-menu .catalog-menu-item,
.zappy-catalog-menu .catalog-menu-all { color: #F3F0E8 !important; }
.zappy-catalog-menu .catalog-menu-item:hover,
.zappy-catalog-menu .catalog-menu-all:hover { color: #39C6B4 !important; background: rgba(128,128,128,0.1) !important; }
.navbar .cart-link.nav-cart,
.navbar .login-link.nav-login,
.navbar .nav-search-toggle,
.navbar .search-toggle { background: var(--bg-light, #ffffff) !important; color: #1B1F33 !important; }
.navbar .cart-link.nav-cart:hover,
.navbar .login-link.nav-login:hover,
.navbar .nav-search-toggle:hover,
.navbar .search-toggle:hover { background: rgba(128,128,128,0.15) !important; color: #1B1F33 !important; }
.navbar .cart-link.nav-cart svg, .navbar .login-link.nav-login svg, .navbar .nav-search-toggle svg, .navbar .search-toggle svg { color: inherit !important; fill: none !important; stroke: currentColor !important; }

@media (min-width: 769px) {
  .navbar:not(.scrolled) .dropdown-menu { background-color: #1B1F33 !important; }
  .navbar:not(.scrolled) .dropdown-menu li a,
  .navbar:not(.scrolled) .dropdown-menu .dropdown-item { color: #F3F0E8 !important; }
  .navbar:not(.scrolled) .dropdown-menu li a:hover,
  .navbar:not(.scrolled) .dropdown-menu .dropdown-item:hover { color: var(--nav-text-hover, var(--accent)) !important; }
  .navbar:not(.scrolled) .sub-menu { background-color: #1B1F33 !important; }
  .navbar:not(.scrolled) .sub-menu a,
  .navbar:not(.scrolled) .sub-menu li a,
  .navbar:not(.scrolled) .nav-menu .sub-menu a,
  .navbar:not(.scrolled) .zappy-products-dropdown .sub-menu a { color: #F3F0E8 !important; }
  .navbar:not(.scrolled) .sub-menu a:hover,
  .navbar:not(.scrolled) .sub-menu li a:hover { color: var(--nav-text-hover, var(--accent)) !important; }
}
.navbar.scrolled { background-color: rgba(27,31,51,0.85) !important; background-image: none !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important; }
.navbar.scrolled::before, .navbar.scrolled::after { background: transparent !important; opacity: 0 !important; }
.navbar.scrolled ~ .zappy-catalog-menu, .navbar.scrolled ~ #zappy-catalog-menu, .zappy-catalog-menu.scrolled, #zappy-catalog-menu.scrolled { background: rgba(27,31,51,0.85) !important; background-image: none !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.zappy-catalog-menu.scrolled .catalog-menu-item,
.zappy-catalog-menu.scrolled .catalog-menu-all,
#zappy-catalog-menu.scrolled .catalog-menu-item,
#zappy-catalog-menu.scrolled .catalog-menu-all,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-item,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-all,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-item,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-all { color: var(--frosted-text, #F3F0E8) !important; }
.zappy-catalog-menu.scrolled .catalog-menu-item:hover,
.zappy-catalog-menu.scrolled .catalog-menu-all:hover,
#zappy-catalog-menu.scrolled .catalog-menu-item:hover,
#zappy-catalog-menu.scrolled .catalog-menu-all:hover,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-item:hover,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-all:hover,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-item:hover,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-all:hover { color: var(--nav-text-hover, var(--accent)) !important; }
.navbar.scrolled .nav-menu > li > a,
.navbar.scrolled .nav-menu > .nav-item > a,
.navbar.scrolled .nav-link,
.navbar.scrolled a:not(.nav-cta-btn) { color: var(--frosted-text, #F3F0E8) !important; }
.navbar.scrolled .nav-menu > li > a:hover,
.navbar.scrolled .nav-menu > .nav-item > a:hover,
.navbar.scrolled .nav-link:hover,
.navbar.scrolled a:not(.nav-cta-btn):hover { color: var(--nav-text-hover, var(--accent)) !important; }
.navbar.scrolled .navbar-brand, .navbar.scrolled .navbar-brand a { color: var(--frosted-text, #F3F0E8) !important; }
.navbar.scrolled .dropdown-toggle { color: var(--frosted-text, #F3F0E8) !important; }
.navbar.scrolled .mobile-hamburger-btn, .navbar.scrolled .mobile-close-btn { color: var(--frosted-text, #F3F0E8) !important; }
.navbar.scrolled .phone-header-btn { color: var(--frosted-text, #F3F0E8) !important; }
.navbar.scrolled .mobile-toggle { color: var(--frosted-text, #F3F0E8) !important; }
.navbar.scrolled .mobile-toggle svg { color: inherit !important; }
.navbar.scrolled .mobile-toggle svg path { stroke: currentColor !important; }
.navbar.scrolled .mobile-hamburger-btn svg,
.navbar.scrolled .mobile-close-btn svg,
.navbar.scrolled .phone-header-btn svg,
.navbar.scrolled .navbar-brand svg,
.navbar.scrolled .logo-link svg { color: inherit !important; stroke: currentColor !important; }
.navbar.scrolled .mobile-hamburger-btn svg path,
.navbar.scrolled .mobile-close-btn svg path,
.navbar.scrolled .phone-header-btn svg path,
.navbar.scrolled .navbar-brand svg path,
.navbar.scrolled .logo-link svg path { stroke: currentColor !important; }
.navbar.scrolled .nav-search-btn { color: var(--frosted-text, #F3F0E8) !important; }
.navbar.scrolled .nav-search-btn svg { stroke: var(--frosted-text, #F3F0E8) !important; fill: none !important; }
@media (min-width: 769px) {
  .navbar.scrolled .sub-menu,
  .navbar.scrolled ul.sub-menu,
  nav.navbar.scrolled .sub-menu { background-color: var(--bg-light, #ffffff) !important; border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important; }
  .navbar.scrolled .sub-menu a,
  .navbar.scrolled .sub-menu li a,
  .navbar.scrolled .nav-menu .sub-menu a,
  .navbar.scrolled .nav-menu .sub-menu li a,
  .navbar.scrolled .zappy-products-dropdown .sub-menu a,
  nav.navbar.scrolled .sub-menu li a { color: #1B1F33 !important; }
  .navbar.scrolled .sub-menu a:hover,
  .navbar.scrolled .sub-menu li a:hover,
  .navbar.scrolled .nav-menu .sub-menu a:hover,
  nav.navbar.scrolled .sub-menu li a:hover { color: #39C6B4 !important; background-color: rgba(128,128,128,0.1) !important; }
  .navbar.scrolled .dropdown-menu { background-color: var(--bg-light, #ffffff) !important; }
  .navbar.scrolled .dropdown-menu li a,
  .navbar.scrolled .dropdown-menu .dropdown-item { color: #1B1F33 !important; }
  .navbar.scrolled .dropdown-menu li a:hover,
  .navbar.scrolled .dropdown-menu .dropdown-item:hover { color: #39C6B4 !important; background-color: rgba(128,128,128,0.1) !important; }
  .navbar.scrolled .mobile-submenu-toggle { color: #1B1F33 !important; }
}

.navbar.scrolled .cart-link.nav-cart,
.navbar.scrolled .login-link.nav-login,
.navbar.scrolled .nav-search-toggle,
.navbar.scrolled .search-toggle { background: var(--bg-light, #ffffff) !important; color: #1B1F33 !important; }
@media (max-width: 768px) {
  .navbar { background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
  /* Kill backdrop-filter on EVERY navbar state at mobile (not just base .navbar).
     A backdrop-filter makes the navbar the containing block for fixed-positioned
     descendants, so the fixed mobile menu's top/bottom resolve against the ~70px
     navbar instead of the viewport and the open menu collapses to a sliver on
     scrolled (non-home) pages. The scrolled selector must out-specify the
     generated ".navbar.scrolled { backdrop-filter: ... !important }" rule. The
     mobile navbar background is solid, so the blur is purely decorative here. */
  .navbar.scrolled, nav.navbar.scrolled, .navbar.active, .navbar.open, .navbar.show, .navbar.menu-open, .zappy-catalog-menu, #zappy-catalog-menu, .zappy-catalog-menu.scrolled, #zappy-catalog-menu.scrolled { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .zappy-catalog-menu, #zappy-catalog-menu { background-image: none !important; }
  .navbar::before, .navbar::after { background: transparent !important; opacity: 0 !important; }
  body.menu-open .navbar, body.nav-open .navbar, body.mobile-menu-open .navbar, .navbar.scrolled, .navbar.active, .navbar.open, .navbar.show, .navbar.menu-open, .navbar:has(.nav-menu.active), .navbar:has(#navMenu.active), .navbar:has(.mobile-menu.active), .navbar:has(.mobile-toggle.active), .navbar:has(#mobileToggle.active) { background-color: #1B1F33 !important; }
  .nav-menu, .nav-menu.active, .nav-menu.nav-menu-active, #navMenu, #navMenu.active, .mobile-menu, .mobile-menu.active, .mobile-nav, .mobile-nav.active { background-color: #1B1F33 !important; background: #1B1F33 !important; }
  .nav-menu.active, .nav-menu.nav-menu-active, #navMenu.active, .mobile-menu.active, .mobile-nav.active { height: calc(100dvh - 70px) !important; max-height: calc(100dvh - 70px) !important; overflow-y: auto !important; }
  .nav-menu a, .nav-menu > li > a, #navMenu a, #navMenu > li > a { color: #F3F0E8 !important; }
  .nav-menu a:hover, .nav-menu > li > a:hover { color: #39C6B4 !important; }
  .nav-menu .dropdown-menu { background: rgba(128,128,128,0.06) !important; }
  .nav-menu .dropdown-menu a, .nav-menu .dropdown-menu li a { color: #F3F0E8 !important; }
  .nav-menu .dropdown-menu a:hover { color: #39C6B4 !important; }
  .nav-menu .sub-menu a { color: #F3F0E8 !important; white-space: normal !important; }
  .nav-menu .sub-menu a:hover { color: #39C6B4 !important; }
  .nav-menu > li { position: relative !important; }
  .navbar .nav-menu .mobile-submenu-toggle { color: #F3F0E8 !important; position: static !important; height: auto !important; flex-shrink: 0 !important; align-self: stretch !important; }
  .mobile-toggle { color: #F3F0E8 !important; }
  .mobile-toggle svg { color: inherit !important; }
  .mobile-toggle svg path { stroke: currentColor !important; }
  
  /* When menu is open or navbar is scrolled in mobile, the background is dropdownBg, so text should be mobileMenuText */
  .navbar.scrolled .mobile-toggle, .navbar.scrolled .mobile-hamburger-btn, .navbar.scrolled .mobile-close-btn,
  .navbar.scrolled .navbar-brand, .navbar.scrolled .dropdown-toggle, .navbar.scrolled .phone-header-btn,
  body.menu-open .navbar .mobile-toggle, body.nav-open .navbar .mobile-toggle, body.mobile-menu-open .navbar .mobile-toggle,
  .navbar.active .mobile-toggle, .navbar.open .mobile-toggle, .navbar.show .mobile-toggle, .navbar.menu-open .mobile-toggle,
  .navbar:has(.nav-menu.active) .mobile-toggle, .navbar:has(#navMenu.active) .mobile-toggle, .navbar:has(.mobile-menu.active) .mobile-toggle, .navbar:has(.mobile-toggle.active) .mobile-toggle,
  body.menu-open .navbar .navbar-brand, body.nav-open .navbar .navbar-brand, body.mobile-menu-open .navbar .navbar-brand,
  .navbar.active .navbar-brand, .navbar.open .navbar-brand, .navbar.show .navbar-brand, .navbar.menu-open .navbar-brand,
  .navbar:has(.nav-menu.active) .navbar-brand, .navbar:has(#navMenu.active) .navbar-brand, .navbar:has(.mobile-menu.active) .navbar-brand, .navbar:has(.mobile-toggle.active) .navbar-brand,
  body.menu-open .navbar .phone-header-btn, body.nav-open .navbar .phone-header-btn, body.mobile-menu-open .navbar .phone-header-btn,
  .navbar.active .phone-header-btn, .navbar.open .phone-header-btn, .navbar.show .phone-header-btn, .navbar.menu-open .phone-header-btn,
  .navbar:has(.nav-menu.active) .phone-header-btn, .navbar:has(#navMenu.active) .phone-header-btn, .navbar:has(.mobile-menu.active) .phone-header-btn, .navbar:has(.mobile-toggle.active) .phone-header-btn {
    color: #F3F0E8 !important;
  }
  .navbar.scrolled .mobile-toggle svg, .navbar.scrolled .mobile-hamburger-btn svg, .navbar.scrolled .mobile-close-btn svg,
  .navbar.scrolled .navbar-brand svg, .navbar.scrolled .dropdown-toggle svg, .navbar.scrolled .phone-header-btn svg,
  body.menu-open .navbar .mobile-toggle svg, body.nav-open .navbar .mobile-toggle svg, body.mobile-menu-open .navbar .mobile-toggle svg,
  .navbar.active .mobile-toggle svg, .navbar.open .mobile-toggle svg, .navbar.show .mobile-toggle svg, .navbar.menu-open .mobile-toggle svg,
  .navbar:has(.nav-menu.active) .mobile-toggle svg, .navbar:has(#navMenu.active) .mobile-toggle svg, .navbar:has(.mobile-menu.active) .mobile-toggle svg, .navbar:has(.mobile-toggle.active) .mobile-toggle svg,
  body.menu-open .navbar .phone-header-btn svg, body.nav-open .navbar .phone-header-btn svg, body.mobile-menu-open .navbar .phone-header-btn svg,
  .navbar.active .phone-header-btn svg, .navbar.open .phone-header-btn svg, .navbar.show .phone-header-btn svg, .navbar.menu-open .phone-header-btn svg,
  .navbar:has(.nav-menu.active) .phone-header-btn svg, .navbar:has(#navMenu.active) .phone-header-btn svg, .navbar:has(.mobile-menu.active) .phone-header-btn svg, .navbar:has(.mobile-toggle.active) .phone-header-btn svg,
  body.menu-open .navbar .navbar-brand svg, body.nav-open .navbar .navbar-brand svg, body.mobile-menu-open .navbar .navbar-brand svg,
  .navbar.active .navbar-brand svg, .navbar.open .navbar-brand svg, .navbar.show .navbar-brand svg, .navbar.menu-open .navbar-brand svg,
  .navbar:has(.nav-menu.active) .navbar-brand svg, .navbar:has(#navMenu.active) .navbar-brand svg, .navbar:has(.mobile-menu.active) .navbar-brand svg, .navbar:has(.mobile-toggle.active) .navbar-brand svg {
    color: #F3F0E8 !important;
    stroke: currentColor !important;
  }
  .navbar.scrolled .mobile-toggle svg path, .navbar.scrolled .mobile-hamburger-btn svg path, .navbar.scrolled .mobile-close-btn svg path,
  .navbar.scrolled .navbar-brand svg path, .navbar.scrolled .dropdown-toggle svg path, .navbar.scrolled .phone-header-btn svg path,
  body.menu-open .navbar .mobile-toggle svg path, body.nav-open .navbar .mobile-toggle svg path, body.mobile-menu-open .navbar .mobile-toggle svg path,
  .navbar.active .mobile-toggle svg path, .navbar.open .mobile-toggle svg path, .navbar.show .mobile-toggle svg path, .navbar.menu-open .mobile-toggle svg path,
  .navbar:has(.nav-menu.active) .mobile-toggle svg path, .navbar:has(#navMenu.active) .mobile-toggle svg path, .navbar:has(.mobile-menu.active) .mobile-toggle svg path, .navbar:has(.mobile-toggle.active) .mobile-toggle svg path,
  body.menu-open .navbar .phone-header-btn svg path, body.nav-open .navbar .phone-header-btn svg path, body.mobile-menu-open .navbar .phone-header-btn svg path,
  .navbar.active .phone-header-btn svg path, .navbar.open .phone-header-btn svg path, .navbar.show .phone-header-btn svg path, .navbar.menu-open .phone-header-btn svg path,
  .navbar:has(.nav-menu.active) .phone-header-btn svg path, .navbar:has(#navMenu.active) .phone-header-btn svg path, .navbar:has(.mobile-menu.active) .phone-header-btn svg path, .navbar:has(.mobile-toggle.active) .phone-header-btn svg path,
  body.menu-open .navbar .navbar-brand svg path, body.nav-open .navbar .navbar-brand svg path, body.mobile-menu-open .navbar .navbar-brand svg path,
  .navbar.active .navbar-brand svg path, .navbar.open .navbar-brand svg path, .navbar.show .navbar-brand svg path, .navbar.menu-open .navbar-brand svg path,
  .navbar:has(.nav-menu.active) .navbar-brand svg path, .navbar:has(#navMenu.active) .navbar-brand svg path, .navbar:has(.mobile-menu.active) .navbar-brand svg path, .navbar:has(.mobile-toggle.active) .navbar-brand svg path {
    stroke: currentColor !important;
  }
  
  .navbar.scrolled .mobile-toggle svg { color: inherit !important; }
  .navbar.scrolled .mobile-toggle svg path { stroke: currentColor !important; }
  
  .navbar.scrolled .nav-menu > li > a,
  .navbar.scrolled .nav-menu > .nav-item > a,
  .navbar.scrolled .nav-link,
  .navbar.scrolled a:not(.nav-cta-btn) { color: #F3F0E8 !important; }
  .cart-link.nav-cart,
  .login-link.nav-login,
  .nav-search-toggle,
  .search-toggle { background: var(--bg-light, #ffffff) !important; color: #1B1F33 !important; }
  .cart-link.nav-cart svg,
  .login-link.nav-login svg,
  .nav-search-toggle svg,
  .search-toggle svg { stroke: #1B1F33 !important; color: #1B1F33 !important; }
  .mobile-search-panel { color: #F3F0E8 !important; }
  .mobile-search-panel input { color: #F3F0E8 !important; background: rgba(255,255,255,0.12) !important; }
  .mobile-search-panel .close-search { color: #F3F0E8 !important; background: rgba(255,255,255,0.15) !important; }
  .mobile-search-panel .close-search svg { stroke: #F3F0E8 !important; color: #F3F0E8 !important; }
  .mobile-search-panel .close-search:hover { color: #F3F0E8 !important; background: rgba(255,255,255,0.25) !important; }
  .mobile-search-panel .close-search:hover svg { stroke: #F3F0E8 !important; color: #F3F0E8 !important; }
  .navbar .zappy-products-dropdown .sub-menu,
  .navbar .zappy-products-dropdown > .sub-menu {
    display: none !important; position: static !important; max-height: 0 !important;
    overflow: hidden !important; opacity: 0 !important; visibility: hidden !important;
    pointer-events: none !important; box-shadow: none !important; border: none !important;
    padding: 0 !important; transform: none !important;
  }
  .navbar .zappy-products-dropdown:hover .sub-menu,
  .navbar .zappy-products-dropdown:hover > .sub-menu,
  .navbar .zappy-products-dropdown:focus-within .sub-menu,
  .navbar .zappy-products-dropdown:focus-within > .sub-menu,
  .navbar .menu-item-has-children:hover > .sub-menu,
  .navbar .nav-dropdown:hover > .dropdown-menu {
    display: none !important; opacity: 0 !important; visibility: hidden !important;
    max-height: 0 !important; pointer-events: none !important;
  }
  .navbar .zappy-products-dropdown.open .sub-menu,
  .navbar .zappy-products-dropdown.open > .sub-menu,
  .navbar .zappy-products-dropdown .sub-menu.mobile-expanded,
  .navbar .zappy-products-dropdown > .sub-menu.mobile-expanded,
  .navbar .menu-item-has-children.open > .sub-menu,
  .navbar .menu-item-has-children > .sub-menu.mobile-expanded,
  .navbar .nav-dropdown.open > .dropdown-menu {
    display: block !important; opacity: 1 !important; visibility: visible !important;
    max-height: none !important; pointer-events: auto !important; position: static !important;
    overflow-y: visible !important; padding: 0.5rem 0 !important;
  }
}
/* === NAVBAR STYLE OVERRIDES END === */

/* Legal Pages Content Styles */

/* Legal Pages Content Styles */
.legal-page-content {
  padding: 120px 0 60px;
  min-height: 60vh;
  color: inherit;
}

.legal-page-content .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.legal-page-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: inherit;
}

.legal-page-content .last-updated {
  color: #666;
  margin-bottom: 2rem;
  font-style: italic;
}

.legal-page-content h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: inherit;
}

.legal-page-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.legal-page-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

[dir="rtl"] .legal-page-content ul {
  padding-left: 0;
  padding-right: 1.5rem;
}

.legal-page-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.legal-page-content .contact-box,
.legal-page-content .contact-info {
  background: rgba(0, 0, 0, 0.03);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-page-content .contact-box a,
.legal-page-content .contact-info a {
  color: inherit;
  text-decoration: underline;
}

.legal-page-content .contact-box a:hover,
.legal-page-content .contact-info a:hover {
  opacity: 0.8;
}

.legal-page-content .important-notice,
.legal-page-content .legal-reference {
  background: rgba(0, 0, 0, 0.03);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  border-left: 4px solid currentColor;
}

[dir="rtl"] .legal-page-content .important-notice,
[dir="rtl"] .legal-page-content .legal-reference {
  border-left: none;
  border-right: 4px solid currentColor;
}

/* Cookie Consent Styles */

/* Cookie Consent Customizations ccCssV13 */
:root {
  /* --cc-bg has to STAY translucent (with the matching backdrop-filter on
   * the bar below) so the slim bar reads as a frosted overlay rather than
   * a solid horizontal stripe slapped on top of the page. The preferences
   * modal — which doesn't use backdrop-filter — overrides this to a solid
   * white below so it doesn't render see-through against the page. */
  --cc-bg: rgba(255, 255, 255, 0.96);
  --cc-modal-bg: #ffffff;
  --cc-primary-color: #1f2937;
  --cc-secondary-color: #4b5563;
  --cc-btn-primary-bg: #1b1f33;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border: #1b1f33;
  --cc-btn-primary-hover-bg: #02061a;
  --cc-btn-primary-hover-border: #02061a;
  --cc-btn-primary-hover-color: #ffffff;
  /* --cc-btn-secondary-* are used by BOTH the bar's "Customize" link and
   * the preferences modal's "Accept Necessary" / "Save Preferences" pills.
   * We keep the token defaults sensible (light grey fill, dark text) so
   * the preferences-modal buttons stay visible, then override only
   * .zappy-cookie-banner__button--customize directly to render the
   * Customize link as a transparent underlined text. */
  --cc-btn-secondary-bg: #f3f4f6;
  --cc-btn-secondary-color: #1f2937;
  --cc-btn-secondary-border: #e5e7eb;
  --cc-btn-secondary-hover-bg: #e5e7eb;
  --cc-btn-secondary-hover-color: #111827;
  --cc-btn-secondary-hover-border: #d1d5db;
  --cc-toggle-on-bg: #1b1f33;
}

#cc-main,
#cc--main {
  font-family: inherit !important;
  color: var(--cc-primary-color);
}

/* === Zappy-owned slim bottom bar ===
 * Single-row inline layout: [description text] ......... [Customize] [Accept]
 * The banner is our DOM (#zappy-cookie-banner), not the library's #cm
 * consent modal. That avoids vanilla-cookieconsent's internal
 * <button><span>Label</span></button> structure entirely.
 */
#zappy-cookie-banner {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 56px 10px 20px !important;
  background: var(--cc-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: none !important;
  border-top: 1px solid rgba(27, 31, 51, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  z-index: 2147483646;
}

#zappy-cookie-banner .zappy-cookie-banner__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  max-width: 1200px;
  width: 100% !important;
  margin: 0 auto;
  padding: 0 !important;
  min-height: 32px !important;
}

#zappy-cookie-banner .zappy-cookie-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cc-primary-color) !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#zappy-cookie-banner .zappy-cookie-banner__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  height: 32px !important;
  min-height: 0 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

/* Primary "Accept" — filled pill in site primary color */
#zappy-cookie-banner .zappy-cookie-banner__button--accept {
  background-color: var(--cc-btn-primary-bg) !important;
  color: var(--cc-btn-primary-color) !important;
  border: 1px solid var(--cc-btn-primary-border) !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button--accept:hover {
  background-color: var(--cc-btn-primary-hover-bg) !important;
  border-color: var(--cc-btn-primary-hover-border) !important;
}

/* Secondary "Customize" — borderless underlined text link.
 * Same height as the Accept pill so the row stays perfectly aligned, but
 * with no fill, no border, and an underline that sits 3px below the
 * baseline (text-underline-offset). Hard-coded brand color so this rule
 * doesn't depend on --cc-btn-secondary-* (which have to stay sensible
 * defaults for the preferences modal's two secondary pills). */
#zappy-cookie-banner .zappy-cookie-banner__button--customize {
  background-color: transparent !important;
  color: #1b1f33 !important;
  border: none !important;
  padding: 0 8px !important;
  height: 32px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 6px !important;
}

#zappy-cookie-banner .zappy-cookie-banner__button--customize:hover {
  color: #02061a !important;
  background-color: transparent !important;
}

#zappy-cookie-banner .zappy-cookie-banner__close {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--cc-secondary-color) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#zappy-cookie-banner .zappy-cookie-banner__close:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--cc-primary-color) !important;
}
#zappy-cookie-banner .zappy-cookie-banner__button:focus-visible,
#zappy-cookie-banner .zappy-cookie-banner__close:focus-visible {
  outline: 2px solid var(--cc-btn-primary-bg) !important;
  outline-offset: 2px;
}
/* RTL: anchor the X to the top-LEFT and shift body padding accordingly. */
[dir="rtl"] #zappy-cookie-banner {
  padding: 10px 20px 10px 56px !important;
}
[dir="rtl"] #zappy-cookie-banner .zappy-cookie-banner__close {
  right: auto !important;
  left: 12px !important;
}

/* === Preferences modal — minimalist restyle ===
 * The modal opens when "Customize" is clicked. It MUST render as a solid
 * card — pre-fix it inherited the bar's translucent --cc-bg without the
 * matching backdrop-filter, leaving the page footer visibly bleeding
 * through the modal box, the title, the toggle rows, and the bottom
 * button row. Solid white box + clean shadow + an explicit slightly
 * darker scrim on the overlay restores proper modal hierarchy. */
/* The scrim belongs on wrapper layers only. In vanilla-cookieconsent v3,
 * .pm / #pm is the preferences card itself, so styling .pm as the dark
 * overlay makes the card look transparent. */
#cc-main .pm-wrapper,
#cc--main .pm-wrapper,
#cc-main .pm-wrapper.pm--box,
#cc--main .pm-wrapper.pm--box {
  background: rgba(0, 0, 0, 0.32) !important;
}

#cc-main #pm,
#cc--main #pm,
#cc-main .pm,
#cc--main .pm,
#cc-main .pm .pm__box,
#cc--main .pm .pm__box,
#cc-main .pm__box,
#cc--main .pm__box {
  background: var(--cc-modal-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important;
}

#cc-main .pm__header,
#cc--main .pm__header,
#cc-main .pm__body,
#cc--main .pm__body,
#cc-main .pm__footer,
#cc--main .pm__footer,
#cc-main .pm__section,
#cc--main .pm__section {
  background: var(--cc-modal-bg) !important;
}

#cc-main .pm__title,
#cc--main .pm__title {
  font-weight: 600 !important;
  color: var(--cc-primary-color) !important;
}

#cc-main .pm__btn[data-role="accept-all"],
#cc--main .pm__btn[data-role="accept-all"] {
  background-color: var(--cc-btn-primary-bg) !important;
  border-color: var(--cc-btn-primary-border) !important;
  color: var(--cc-btn-primary-color) !important;
  border-radius: 999px !important;
}

#cc-main .pm__btn[data-role="accept-all"]:hover,
#cc--main .pm__btn[data-role="accept-all"]:hover {
  background-color: var(--cc-btn-primary-hover-bg) !important;
  border-color: var(--cc-btn-primary-hover-border) !important;
}

/* Secondary modal pills — "Accept Necessary" + "Save Preferences".
 * Must be a visible solid fill (light grey on white card) so users can
 * actually find them. Pre-fix these inherited --cc-btn-secondary-bg:
 * transparent (used by the bar's Customize text link), making them
 * invisible against the modal background. */
#cc-main .pm__btn,
#cc--main .pm__btn {
  border-radius: 999px !important;
}
#cc-main .pm__btn[data-role="necessary"],
#cc--main .pm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="save"],
#cc--main .pm__btn[data-role="save"] {
  background-color: var(--cc-btn-secondary-bg) !important;
  color: var(--cc-btn-secondary-color) !important;
  border: 1px solid var(--cc-btn-secondary-border) !important;
}
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc--main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover,
#cc--main .pm__btn[data-role="save"]:hover {
  background-color: var(--cc-btn-secondary-hover-bg) !important;
  color: var(--cc-btn-secondary-hover-color) !important;
  border-color: var(--cc-btn-secondary-hover-border) !important;
}

/* Toggle thumbs in brand color when on */
#cc-main .section__toggle:checked + .toggle__icon,
#cc--main .section__toggle:checked + .toggle__icon,
#cc-main .section__toggle:checked ~ .toggle__icon,
#cc--main .section__toggle:checked ~ .toggle__icon {
  background-color: var(--cc-toggle-on-bg) !important;
}

/* Mobile fallback: two rows (description on top, buttons below) */
@media (max-width: 640px) {
  #zappy-cookie-banner {
    padding: 10px 14px !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
  }
  #zappy-cookie-banner .zappy-cookie-banner__actions {
    width: 100%;
    justify-content: space-between;
  }
  #zappy-cookie-banner .zappy-cookie-banner__button--accept {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Cookie preferences button in legal footer keeps default behavior */
.cookie-preferences-btn:hover {
  text-decoration: none !important;
}

/* Accessibility Styles */

/* Basic Accessibility Enhancements */
:root {
  --accessibility-focus: #1B1F33;
}

/* Skip link styles */
.skip-link:focus {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: #000 !important;
  color: white !important;
  padding: 8px !important;
  text-decoration: none !important;
  z-index: 10000 !important;
  border-radius: 4px !important; transform: none; }

/* Enhanced focus indicators */
*:focus {
  outline: 2px solid var(--accessibility-focus) !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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


/* Custom Accessibility Toolbar Styling - Zappy Style */

/* Main button icon - ONLY target the floating button, not menu elements */
#mic-access-tool-general-button {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* AGGRESSIVELY hide all text in the button */
#mic-access-tool-general-button,
#mic-access-tool-general-button *:not(svg):not(path):not(circle):not(rect):not(polygon):not(ellipse):not(line):not(polyline):not(g) {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  line-height: 0 !important;
  letter-spacing: -999em !important;
  white-space: nowrap !important;
}

/* Hide text nodes specifically */

/* Hover state - keep text hidden */
#mic-access-tool-general-button:hover {
  background-color: rgba(27, 31, 51, 0.1) !important;
  background: rgba(27, 31, 51, 0.1) !important;
  box-shadow: 0 2px 8px rgba(27, 31, 51, 0.2) !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

/* Target the SVG and make it the selected color */
#mic-access-tool-general-button svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  /* Convert green to selected color using dynamic CSS filter */
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Also directly target all SVG elements to be the selected color */
#mic-access-tool-general-button svg,
#mic-access-tool-general-button svg *,
#mic-access-tool-general-button svg path,
#mic-access-tool-general-button svg circle,
#mic-access-tool-general-button svg rect,
#mic-access-tool-general-button svg polygon,
#mic-access-tool-general-button svg ellipse,
#mic-access-tool-general-button svg line,
#mic-access-tool-general-button svg polyline,
#mic-access-tool-general-button svg g {
  fill: #1B1F33 !important;
  stroke: #1B1F33 !important;
  color: #1B1F33 !important;
}

/* Target images if the icon is an img instead of SVG */
#mic-access-tool-general-button img,
#mic-access-tool-general-button i {
  width: 18px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* Convert green to selected color using dynamic filter */
  filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

/* Menu header with selected color */
#mic-access-tool-box .mic-access-tool-box-header,
.mic-access-tool-box-header,
div[id*="mic-access-tool-box"] header,
div[id*="mic-access-tool-box"] .header {
  background: #1B1F33 !important;
  color: white !important;
}

/* Make header text white - title and close button */
#mic-access-tool-box .mic-access-tool-box-header *,
.mic-access-tool-box-header *,
div[id*="mic-access-tool-box"] header *,
div[id*="mic-access-tool-box"] .header * {
  color: white !important;
}

/* Close button text */
#mic-access-tool-box .mic-access-tool-box-header button,
#mic-access-tool-box .mic-access-tool-box-header a,
#mic-access-tool-box [class*="close"],
#mic-access-tool-box button[title*="close"],
#mic-access-tool-box button[title*="Close"] {
  color: white !important;
  background: transparent !important;
}

/* Active buttons and highlights in menu */
#mic-access-tool-box button.active,
#mic-access-tool-box button:hover,
div[id*="mic-access-tool-box"] button.active,
div[id*="mic-access-tool-box"] button:hover {
  border-color: #1B1F33 !important;
  color: #1B1F33 !important;
  background-color: rgba(27, 31, 51, 0.1) !important;
}

/* Reset button */
#mic-access-tool-box button[title*="reset"],
#mic-access-tool-box button[title*="Reset"],
#mic-access-tool-box [class*="reset"],
div[id*="mic-access-tool-box"] button[class*="reset"] {
  background: #1B1F33 !important;
  color: white !important;
}

/* Reset button text and icon */
#mic-access-tool-box button[title*="reset"] *,
#mic-access-tool-box button[title*="Reset"] *,
#mic-access-tool-box [class*="reset"] *,
div[id*="mic-access-tool-box"] button[class*="reset"] * {
  color: white !important;
}

/* Accessibility widget - displayed by default on both mobile and desktop */
/* Position: opposite side from WhatsApp button (RTL sites → left, LTR sites → right) */
#mic-access-tool-general-button,
.mic-access-tool-general-button,
#mic-init-access-tool .mic-access-tool-general-button,
#mic-init-access-tool #mic-access-tool-general-button,
._access-icon {
  display: flex !important;
}
/* mobile-submenu-overflow-fix */
@media (max-width: 768px) {
  .navbar .sub-menu.mobile-expanded,
  .nav-menu .sub-menu.mobile-expanded,
  #navMenu .sub-menu.mobile-expanded,
  .zappy-products-dropdown .sub-menu.mobile-expanded,
  .zappy-products-dropdown > .sub-menu.mobile-expanded,
  .menu-item-has-children > .sub-menu.mobile-expanded {
    max-height: none !important;
    overflow-y: visible !important;
  }
  .menu-item-has-children,
  .zappy-products-dropdown,
  .nav-menu > li.menu-item-has-children {
    flex-shrink: 0 !important;
  }
  .sub-menu a,
  .navbar .sub-menu a,
  .navbar .sub-menu li a,
  nav.navbar .sub-menu li a,
  .zappy-products-dropdown .sub-menu a {
    white-space: normal !important;
  }
}


/* zappy-nav-child-indent */
.zappy-products-dropdown .zappy-nav-child > a,
.sub-menu .zappy-nav-child > a {
  padding-left: 28px !important;
  font-size: 0.9em !important;
  opacity: 0.85 !important;
}
[dir="rtl"] .zappy-products-dropdown .zappy-nav-child > a,
[dir="rtl"] .sub-menu .zappy-nav-child > a,
html[lang="he"] .zappy-products-dropdown .zappy-nav-child > a,
html[lang="he"] .sub-menu .zappy-nav-child > a,
html[lang="ar"] .zappy-products-dropdown .zappy-nav-child > a,
html[lang="ar"] .sub-menu .zappy-nav-child > a {
  padding-left: 0 !important;
  padding-right: 28px !important;
}
.zappy-products-dropdown .zappy-nav-parent > a,
.sub-menu .zappy-nav-parent > a {
  font-weight: 600 !important;
}
@media (max-width: 768px) {
  .nav-menu.active,
  #navMenu.active {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}


/* ========== EMPTY SUBMENU HIDING (Auto-added by Zappy) ========== */
.sub-menu:empty,
.dropdown-menu:empty,
.sub-menu.zappy-empty-submenu,
.dropdown-menu.zappy-empty-submenu,
.nav-menu .sub-menu.zappy-empty-submenu,
nav .sub-menu.zappy-empty-submenu,
.navbar .sub-menu.zappy-empty-submenu,
#navMenu .sub-menu.zappy-empty-submenu,
#navMenu .dropdown-menu.zappy-empty-submenu {
  display: none !important;
}


/* ========== RTL MOBILE NAVBAR FIX (zappy-rtl-mobile-fix) ========== */
/* High-specificity rules to ensure RTL positioning wins over any [lang="en"] conflicts */
/* For RTL sites: hamburger on RIGHT, phone on LEFT (mirror of LTR layout) */
/* NOTE: Includes both html[dir="rtl"] AND [dir="rtl"] selectors as fallback */
/* because some pages may be wrapped with <html lang="en"> (missing dir="rtl" on html) */
/* but still have dir="rtl" on <body> or other ancestor elements */

@media (max-width: 768px) {
  /* RTL Mobile Toggle (hamburger) - positioned on RIGHT */
  /* Using multiple parent selectors for higher specificity */
  html[dir="rtl"] .navbar .mobile-toggle,
  html[dir="rtl"] nav .mobile-toggle,
  html[dir="rtl"] header .mobile-toggle,
  html[dir="rtl"] .nav-container .mobile-toggle,
  html[dir="rtl"] .mobile-toggle,
  [dir="rtl"] .navbar .mobile-toggle,
  [dir="rtl"] nav .mobile-toggle,
  [dir="rtl"] header .mobile-toggle,
  [dir="rtl"] .nav-container .mobile-toggle,
  [dir="rtl"] .mobile-toggle,
  html[lang="he"] .mobile-toggle,
  html[lang="ar"] .mobile-toggle {
    left: auto !important;
    right: 15px !important;
  }
  
  /* RTL Phone Button - positioned on LEFT */
  html[dir="rtl"] .navbar .phone-header-btn,
  html[dir="rtl"] nav .phone-header-btn,
  html[dir="rtl"] header .phone-header-btn,
  html[dir="rtl"] .nav-container .phone-header-btn,
  html[dir="rtl"] .phone-header-btn,
  [dir="rtl"] .navbar .phone-header-btn,
  [dir="rtl"] nav .phone-header-btn,
  [dir="rtl"] header .phone-header-btn,
  [dir="rtl"] .nav-container .phone-header-btn,
  [dir="rtl"] .phone-header-btn,
  html[lang="he"] .phone-header-btn,
  html[lang="ar"] .phone-header-btn {
    left: 15px !important;
    right: auto !important;
  }
  
  /* RTL Mobile Menu - slides from RIGHT */
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  html[dir="rtl"] .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    left: auto !important;
    right: 0 !important;
  }
  
  /* RTL Mobile Menu Links - text align right */
  html[dir="rtl"] .nav-menu a,
  html[dir="rtl"] .nav-menu li,
  [dir="rtl"] .nav-menu a,
  [dir="rtl"] .nav-menu li,
  html[lang="he"] .nav-menu a,
  html[lang="he"] .nav-menu li,
  html[lang="ar"] .nav-menu a,
  html[lang="ar"] .nav-menu li {
    text-align: right !important;
  }
}

/* ========== END RTL MOBILE NAVBAR FIX ========== */


/* ========== NAV CONTAINER MIN-HEIGHT FIX (nav-container-min-height-fix) ========== */
/* On mobile, all nav children are position:absolute/fixed (out of flow), */
/* so height:auto collapses to 0px. min-height ensures the navbar is visible. */

/* DEFENSIVE: Ensure CTA container is visible on desktop */
/* This guards against CSS minifiers (CleanCSS level 2) that may pull */
/* the mobile display:none rule out of its @media query */
@media (min-width: 769px) {
  .nav-cta-container,
  .nav-cta-container:not(:has(.lang-switcher)) {
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .nav-container {
    min-height: 70px !important;
    position: relative !important;
  }
  /* Reset nav-cta-container desktop styling (box-shadow/padding) on mobile */
  .nav-cta-container {
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* Hide nav-cta-container when no lang-switcher (only CTA btn, which is hidden on mobile) */
  .nav-cta-container:not(:has(.lang-switcher)) {
    display: none !important;
  }
}

/* ========== END NAV CONTAINER MIN-HEIGHT FIX ========== */


/* ========== HERO IMAGE GRADIENT FIX (hero-image-gradient-fix) ========== */
/* Prevent hero image fade gradient from bleeding over headline text below. */
/* The .image-fade-gradient has bottom: -30px which extends below its parent; */
/* on mobile stacked layout this overlaps the h1 text. */

@media (max-width: 768px) {
  .hero-image-column {
    overflow: hidden !important;
  }
  .image-fade-gradient {
    bottom: 0 !important;
  }
}

/* ========== END HERO IMAGE GRADIENT FIX ========== */


/* ========== FULLSCREEN HERO OVERFLOW FIX (fullscreen-hero-overflow-fix) ========== */
@media (max-width: 768px) {

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 clamp(1rem, 5vw, 1.5rem) 90px !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }
}
/* ========== END FULLSCREEN HERO OVERFLOW FIX ========== */


/* ========== PRODUCT ICON STYLES (product-icon-styles) ========== */
.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; }
.product-title-row h1 { flex: 1; min-width: 0; }
.product-icon-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 6px; }
.icon-btn { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s; color: currentColor; padding: 0; }
.icon-btn:hover { color: var(--primary-color, #ff0083); }
.icon-btn.active { color: #e74c3c; }
.icon-btn.active .heart-outline { display: none !important; }
.icon-btn.active .heart-filled { display: block !important; }
.profile-section, .addresses-section, .favorites-section, .orders-section { border: 1px solid var(--border-color, rgba(128,128,128,0.2)); border-radius: 12px; padding: 24px; margin-bottom: 24px; background: transparent; }
.favorites-section h2 { font-size: 1.25rem; color: var(--text-color, #1f2937); margin-bottom: 20px; }
.favorites-loading { text-align: center; padding: 20px; color: var(--text-secondary, #6b7280); }
.favorites-empty { text-align: center; padding: 32px; color: var(--text-secondary, #6b7280); }
.favorites-empty p { margin-bottom: 16px; }
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.favorite-card { background: transparent; border: 1px solid var(--border-color, rgba(128,128,128,0.2)); border-radius: 10px; overflow: hidden; transition: box-shadow 0.2s; position: relative; }
.favorite-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.favorite-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.favorite-card-body { padding: 12px; }
.favorite-card-body h4 { font-size: 0.875rem; font-weight: 500; color: var(--text-color, #1f2937); margin: 0 0 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-price { font-weight: 600; color: var(--primary-color, #ff0083); font-size: 0.9rem; }
.favorite-remove-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); color: #dc2626; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.favorite-remove-btn:hover { background: #dc2626; color: white; }
@media (max-width: 480px) { .favorites-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* ========== END PRODUCT ICON STYLES ========== */

/* ========== ORPHANED_ZOOM_IMG_FIX ========== */
@media (max-width: 768px) {
  .zappy-preserve-css-grid > img[data-zappy-zoom],
  [class*="-grid"] > img[data-zappy-zoom] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    object-fit: cover !important;
    left: auto !important;
    top: auto !important;
  }
}
/* ========== END ORPHANED_ZOOM_IMG_FIX ========== */


/* ========== GRID RESPONSIVE FIX (zappy-grid-mobile-fix) ========== */
/* Ensures grids with explicit columns use CSS variable and are responsive on mobile */

/* DESKTOP: Explicit column grids use CSS variable for grid-template-columns */
/* The deployment process ensures --zappy-grid-cols is always set in inline styles */
[data-zappy-explicit-columns="true"] {
  display: grid !important;
  grid-template-columns: var(--zappy-grid-cols, repeat(2, minmax(0, 1fr))) !important;
}
/* Carousel mode overrides grid display to allow flex-based track layout */
.zappy-carousel-mode,
[data-zappy-display-mode="carousel"] {
  display: block !important;
}

/* ZOOM WRAPPER: Ensure overflow:hidden and position:relative for crop zoom effect */
/* The wrapper clips the oversized image to create the zoom/crop effect */
/* position:relative is needed so absolutely positioned images stay within the wrapper */
[data-zappy-zoom-wrapper="true"] {
  overflow: hidden !important;
  position: relative !important;
}

/* Prevent inserted elements from exceeding their container width.
   max-width uses no !important so inline styles can set a specific constraint. */
.zappy-inserted-element {
  max-width: 100%;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* Auto-grid (AI-generated) grids - force single column on mobile */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"],
  [data-zappy-auto-grid="true"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Grid children: override min-width:auto so children with fixed-width
     content (e.g. zoom wrappers with width:448px!important) can shrink
     to fit the 1fr column instead of overflowing the grid container. */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > *,
  [data-zappy-auto-grid="true"] > *,
  [data-zappy-explicit-columns="true"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  /* Featured grids - force single column on mobile */
  .featured-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Neutralize centering transforms on mobile */
  [data-zappy-center-transform] {
    transform: none !important;
  }
  
  /* Media-only grid items - constrain height on mobile */
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > .zappy-grid-item-media-only,
  [data-zappy-auto-grid="true"] > .zappy-grid-item-media-only {
    height: auto !important;
    max-height: 300px !important;
  }
  
  .zappy-preserve-css-grid[data-zappy-auto-grid="true"] > .zappy-grid-item-media-only img,
  [data-zappy-auto-grid="true"] > .zappy-grid-item-media-only img {
    height: auto !important;
    max-height: 300px !important;
  }
  
  /* Full-width mode zoom wrappers - ensure image is visible (not collapsed) */
  [data-zappy-zoom-wrapper-width-mode="full"] img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 300px !important;
    left: auto !important;
    top: auto !important;
    object-fit: cover !important;
  }
  
  /* MOBILE: Explicit column grids - force single column on mobile */
  [data-zappy-explicit-columns="true"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Inline grid with fixed pixel columns - make responsive */
  .zappy-inline-grid-active.zappy-preserve-css-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* AI-generated section grids with common naming patterns */
  /* These often have fixed pixel column widths that don't adapt to mobile */
  [class*="-grid"]:not([data-zappy-auto-grid]):not(.zappy-preserve-css-grid):not([data-zappy-explicit-columns="true"]) {
    grid-template-columns: 1fr !important;
  }
  
  /* Reset any column/row spanning items on mobile - they cause overflow */
  /* Gallery grids often have -large items that span multiple columns */
  [class*="-grid"] > [class*="-large"],
  [class*="-grid"] > [class*="-item-large"],
  [class*="-grid"] > [style*="grid-column: span"],
  [class*="-grid"] > [style*="grid-row: span"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* Common AI-generated visual/frame containers that may overflow */
  [class*="-visual"],
  [class*="-frame"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* CRITICAL: Constrain zoom wrappers on mobile without breaking saved crop geometry */
  [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* The zoom wrapper's image is position:absolute (so it contributes 0 to the
     wrapper's intrinsic content width). Inserted-element parents that carry a
     desktop pixel height can either collapse to 0px wide or preserve a stale
     desktop height after their child wrapper shrinks on mobile. Force them
     to fill the parent container and let the wrapper's aspect-ratio determine
     the real height, eliminating empty space before following text. */
  .zappy-inserted-element:has(> [data-zappy-zoom-wrapper="true"]) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .zappy-inserted-element:has(> [data-zappy-zoom-wrapper="true"]) > [data-zappy-zoom-wrapper="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reset zoom wrapper images on mobile to responsive display.
     Images with explicit mobile crop overrides are excluded - the JS runtime
     applies their crop/zoom after page load. */
  [data-zappy-zoom-wrapper="true"]:not([data-zappy-zoom-wrapper-width-mode="full"]) img:not([data-zappy-mobile-object-position]):not([data-zappy-mobile-zoom]) {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  
  /* Carousel: ensure block display on mobile */
  .zappy-carousel-mode,
  [data-zappy-display-mode="carousel"] {
    display: block !important;
  }
  /* JS-initialized carousel: constrain wrapper on mobile */
  .zappy-carousel-js-init .zappy-carousel-container-wrapper {
    max-width: calc(100% - 20px) !important;
  }
  .zappy-carousel-js-init .zappy-carousel-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* CSS-only fallback: if JS didn't initialize, stack items vertically */
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-container-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-track {
    flex-direction: column !important;
    transform: none !important;
    gap: 1.5rem !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) > :not(style):not(script):not(.zappy-carousel-btn):not(.zappy-carousel-dots):not(.zappy-carousel-container-wrapper) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-btn,
  .zappy-carousel-mode:not(.zappy-carousel-js-init) .zappy-carousel-dots {
    display: none !important;
  }
  /* Carousel items: fix zoom wrapper padding creating excess spacing */
  .zappy-carousel-item [data-zappy-zoom-wrapper="true"],
  .zappy-carousel-mode > div [data-zappy-zoom-wrapper="true"] {
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Carousel buttons: position inside the card area on mobile */
  .zappy-carousel-js-init > .zappy-carousel-btn {
    left: 4px !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    background: rgba(255,255,255,0.9) !important;
  }
  .zappy-carousel-js-init > .zappy-carousel-btn.zappy-carousel-right {
    left: auto !important;
    right: 4px !important;
  }
  
  /* ========== MAIN PADDING FIX ========== */
  /* Fix double-padding from old V2 mobile CSS that applied padding to both main and sections */
  /* Exclude ecommerce-page which needs its own horizontal padding for proper mobile layout */
  main:not(.ecommerce-page) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Hero sections need flex-column on mobile for proper stacking */
  section[class*="hero"],
  .home-Hero-section {
    flex-direction: column !important;
  }
  
  /* Hero sections need extra padding-top to clear the sticky navbar */
  /* The navbar is ~70px tall, so hero needs at least 100px padding-top */
  /* IMPORTANT: Use section tag to avoid matching child elements like buttons that contain "-hero-section" in their BEM class */
  section[class*="-hero-section"]:first-of-type,
  main > section:first-child {
    padding-top: 100px !important;
  }

  /* Split hero (.hero-sbs-wrap) already applies ~100px top padding for the navbar.
     Without this override, the global rule above stacks and mobile shows ~200px
     of dead air above the hero image. */
  main > section:first-child:has(.hero-sbs-wrap),
  section[class*="-hero-section"]:first-of-type:has(.hero-sbs-wrap) {
    padding-top: 0 !important;
  }

  /* Zoom-crop hero portraits: anchor with inset:0 so RTL/LTR matches and cover
     cropping stays centered (physical left:0 absolute imgs can mis-read in RTL). */
  .hero-sbs-image-frame [data-zappy-zoom-wrapper="true"] img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  
  /* ========== HERO CONTAINER FULL-WIDTH (FULLSCREEN HEROES ONLY) ========== */
  /* Only strip container padding/width for heroes with actual background images.
     Text-only and side-by-side hero sections on inner pages need normal padding. */
  .hero-container,
  /* V2 generation-time fullscreen heroes */
  section[data-hero-type="fullscreen-scrim"] > .container,
  section[data-hero-type="fullscreen-card"] > .container,
  /* Editor-applied background images on hero sections */
  section[class*="hero"][data-zappy-bg-type="image"] > .container,
  section[class*="hero"][data-zappy-bg-type="video"] > .container,
  /* V1 fallback: hero sections with known bg structures */
  section[class*="hero"]:has(.hero-bg-container) > .container,
  section[class*="hero"]:has([data-hero-bg]) > .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ========== HERO WIDTH FIX ========== */
  /* Remove nested horizontal padding for fullscreen-type heroes only */
  .home-Hero-section .hero-container,
  .home-Hero-section .hero-content,
  .home-Hero-section .hero-metrics,
  .home-Hero-section .hero-image-column,
  .home-Hero-section .hero-image-frame,
  .home-Hero-section .container,
  .home-Hero-section .wrapper,
  /* V2 fullscreen heroes */
  section[data-hero-type="fullscreen-scrim"] .hero-container,
  section[data-hero-type="fullscreen-scrim"] .hero-content,
  section[data-hero-type="fullscreen-scrim"] .container,
  section[data-hero-type="fullscreen-card"] .hero-container,
  section[data-hero-type="fullscreen-card"] .hero-content,
  section[data-hero-type="fullscreen-card"] .container,
  /* Editor-applied background images on hero sections */
  section[class*="hero"][data-zappy-bg-type="image"] .hero-container,
  section[class*="hero"][data-zappy-bg-type="image"] .hero-content,
  section[class*="hero"][data-zappy-bg-type="image"] .container,
  section[class*="hero"][data-zappy-bg-type="video"] .hero-container,
  section[class*="hero"][data-zappy-bg-type="video"] .hero-content,
  section[class*="hero"][data-zappy-bg-type="video"] .container,
  /* V1 fallback: hero sections with known bg structures */
  section[class*="hero"]:has(.hero-bg-container) .hero-container,
  section[class*="hero"]:has(.hero-bg-container) .hero-content,
  section[class*="hero"]:has(.hero-bg-container) .container,
  section[class*="hero"]:has([data-hero-bg]) .hero-container,
  section[class*="hero"]:has([data-hero-bg]) .hero-content,
  section[class*="hero"]:has([data-hero-bg]) .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  
  /* ========== HERO VERTICAL SPACING FIX ========== */
  .home-Hero-section .hero-content,
  .home-Hero-section .hero-container,
  .home-Hero-section .hero-image-column {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  .hero-cta-row {
    padding: 8px 0 !important;
    margin: 8px 0 12px !important;
  }
  
  .hero-content {
    gap: 12px !important;
  }
  
  .hero-metrics {
    gap: 10px !important;
  }
  
  .metric-card {
    padding: 12px !important;
  }
  
  .hero-container {
    gap: 16px !important;
  }

  /* ========== GRID OVERFLOW FIX ========== */
  /* CSS Grid items default to min-width:auto, preventing them from shrinking
     below their content's intrinsic size. Fixed-width zoom wrappers or large
     images inside grid items can force the column wider than the viewport. */
  .hero-container > * {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Zappy-inserted image elements with fixed-width zoom wrappers must
     respect the parent container width on mobile */
  .zappy-inserted-element,
  [data-zappy-zoom-wrapper] {
    max-width: 100% !important;
  }

  /* ========== FULLSCREEN HERO OVERFLOW FIX ========== */

  section[data-hero-type*="fullscreen"] {
    height: auto !important;
    min-height: 100svh !important;
    padding: 0 clamp(1rem, 5vw, 1.5rem) 90px !important;
  }
  section[data-hero-type*="fullscreen"] > [class*="-container"]:not([class*="bg"]):not([class*="scrim"]):not([class*="divider"]),
  section[data-hero-type*="fullscreen"] > .container {
    padding-bottom: 100px !important;
    min-height: auto !important;
  }
}

/* ========== HERO SECTION WIDTH CONSTRAINT (ALL VIEWPORTS) ========== */
/* Prevent hero sections from exceeding viewport width.                */
/* Root cause: AI-generated CSS may use width:100vw or add horizontal  */
/* padding to the section, causing it to overflow the viewport.        */
/* NOTE: Do NOT add overflow:hidden here — it clips SVG bottom dividers */
/* that need overflow:visible to extend into the next section.          */
section[class*="hero" i],
section[class*="Hero"],
section[data-hero-type] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ========== SVG DIVIDER OVERLAY FIX ========== */
/* Many AI sections place .section-divider absolutely at the bottom of a section,
   which can overlap/cut off the last row of content. The safest CSS-only fix
   is to prevent overlay by forcing the divider into normal flow. */
.section-divider {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  margin-top: 16px !important;
}

.section-divider svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Exclude small icon SVGs from full-width sizing - these are decorative icons, not wave dividers */
.section-divider svg.divider-icon,
.section-divider svg[width="32"],
.section-divider svg[width="24"],
.section-divider svg[width="48"],
.section-divider svg[viewBox="0 0 32 32"],
.section-divider svg[viewBox="0 0 24 24"],
.section-divider svg[viewBox="0 0 48 48"] {
  width: auto !important;
  height: auto !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

/* ========== END SVG DIVIDER OVERLAY FIX ========== */

/* ========== HORIZONTAL-PAIR GRID MEDIA FIX ========== */
/* Ensures media in horizontal-pair grids fills columns correctly */

/* Image/video media cells: stretch to fill the grid cell */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"]:not([data-element-type="icon"]) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 0 !important;
}

/* Icon media cells: use flex for centering but allow alignment to be controlled by the editor */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"][data-element-type="icon"] {
  position: relative !important;
  display: flex !important;
  min-height: 0 !important;
}

/* Images/videos: preserve aspect ratio while filling column width */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > img,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Icons/SVG: respect their explicit pixel size from the editor */
/* Do NOT force width/height: 100% - icons should use their inline size */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > svg,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > .iconify,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] [data-zappy-media-cell="true"] > .iconify svg {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: inline-block !important;
}

/* Non-media grid items (buttons, text, etc.) should NOT stretch */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) {
  align-self: start !important;
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Buttons inside non-media grid items should NOT stretch horizontally */
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) .btn,
.zappy-horizontal-grid[data-zappy-grid-kind="horizontal-pair"] > .zappy-inserted-element:not([data-zappy-media-cell]) [data-element-type="button"] {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* ========== END HORIZONTAL-PAIR GRID MEDIA FIX ========== */

/* ========== END GRID RESPONSIVE FIX ========== */


/* ZAPPY_NAVBAR_CTA_ALIGNMENT_FIX */
.nav-cta-container .zappy-search-container,
.zappy-search-container { align-self: center; }
.nav-cta-container p { margin: 0 !important; }


/* ZAPPY_SECTION_BG_TYPE_FIX */
[data-zappy-bg-type="color"] { background-image: none !important; background-color: var(--zappy-bg-color, transparent) !important; }
[data-zappy-bg-type="image"] { background-image: linear-gradient(var(--zappy-bg-overlay, rgba(0,0,0,0)), var(--zappy-bg-overlay, rgba(0,0,0,0))), var(--zappy-bg-image, none) !important; background-size: var(--zappy-bg-size, cover) !important; background-position: var(--zappy-bg-position, center) !important; background-repeat: no-repeat !important; }
[data-zappy-bg-type="video"] { background-image: none !important; }
/* Full-bleed hero single-image model: overlay/darkness tint layer sits above the
   <img data-hero-bg> and below the hero content. Inline styles carry the tint;
   this rule is the positioning safety-net. */
.zappy-hero-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; }
section[data-hero-type^="fullscreen"] > .hero-bg-wrapper,
section[data-hero-type^="fullscreen"] > [class*="hero-bg"],
section[class*="hero"][data-zappy-bg-overlay-opacity] > .hero-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}


/* ZAPPY_IOS_NAVBAR_GAP_FIX */
/* iOS Safari does not clip overflow-x:hidden on <html>, so a page with any
   horizontal overflow ends up with visual viewport > layout viewport.
   position:fixed children anchored with right:0 (the mobile dropdown menu)
   then pin to the visual viewport right edge — off-screen past the navbar.
   Companion JS (ZAPPY_IOS_VIEWPORT_GAP_FIX in script.js) measures the gap
   and exposes it as --ios-viewport-gap; this rule uses it to shift the
   menu inward so it lands on the real layout-viewport right edge. On every
   other browser the gap is 0 and the rule is a no-op.

   The selector list below intentionally mirrors the RTL selectors used
   elsewhere in the stylesheet — we need equal-or-higher specificity to
   win the cascade (!important alone can't beat higher specificity). */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    width: auto !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }
  #navMenu,
  .nav-menu,
  html[dir="rtl"] .nav-menu,
  html[dir="rtl"] .navbar .nav-menu,
  html[dir="rtl"] nav .nav-menu,
  html[dir="rtl"] header .nav-menu,
  html[dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .navbar .nav-menu,
  [dir="rtl"] nav .nav-menu,
  [dir="rtl"] header .nav-menu,
  [dir="rtl"] .nav-container .nav-menu,
  [dir="rtl"] .nav-menu,
  html[lang="he"] .nav-menu,
  html[lang="ar"] .nav-menu {
    /* Force position:fixed so the --ios-viewport-gap shift is measured
       against the (visual) viewport, not whatever container the menu may
       have been reparented into by earlier v1/v2 patches.
       --zappy-navbar-bottom is set by the runtime JS companion and
       defaults to 70px — this lets us override the v2 `top: 100%` (which
       with position:fixed would resolve to the full viewport height and
       push the menu off-screen). */
    position: fixed !important;
    top: var(--zappy-navbar-bottom, 70px) !important;
    right: var(--ios-viewport-gap, 0px) !important;
  }
}


/* ZAPPY_PRODUCTS_DROPDOWN_LTR_INDENT */
/* LTR mirror of the [dir="rtl"] indentation block. Equal-or-higher
   specificity than the shorthand .navbar .sub-menu li a override so the
   nested sub-category items keep their visual indent on every LTR page —
   English, Spanish, French, Russian, German, etc. The selectors target
   dir="ltr" (the source of truth set on <html> by per-language page
   generation), NOT a specific language code, so the rule stays generic
   across every site / language combination. */
[dir="ltr"] .sub-menu .zappy-nav-child > a,
[dir="ltr"] .zappy-products-dropdown .zappy-nav-child > a,
html[dir="ltr"] .sub-menu .zappy-nav-child > a,
html[dir="ltr"] .zappy-products-dropdown .zappy-nav-child > a {
  padding-left: 28px !important;
  padding-right: 16px !important;
  font-size: 0.9em !important;
  opacity: 0.85 !important;
}
@media (max-width: 768px) {
  [dir="ltr"] .navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  [dir="ltr"] nav.navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  html[dir="ltr"] .navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a,
  html[dir="ltr"] nav.navbar .zappy-products-dropdown > .sub-menu .zappy-nav-child > a {
    padding-left: 36px !important;
    padding-right: 16px !important;
  }
}


/* ZAPPY_MOBILE_NAV_MENU_ITEM_PADDING */
@media (max-width: 768px) {
  .navbar .nav-menu.active > li > a,
  nav.navbar .nav-menu.active > li > a,
  #navMenu.active > li > a,
  .nav-menu.open > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
  }
  .navbar .nav-menu.active > li,
  nav.navbar .nav-menu.active > li,
  #navMenu.active > li,
  .nav-menu.open > li {
    margin: 4px 0 !important;
  }
  .navbar .nav-menu.active > li.zappy-products-dropdown > a,
  nav.navbar .nav-menu.active > li.zappy-products-dropdown > a,
  #navMenu.active > li.zappy-products-dropdown > a,
  .nav-menu.open > li.zappy-products-dropdown > a {
    padding-right: 56px !important;
  }
  html[dir="rtl"] .navbar .nav-menu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] nav.navbar .nav-menu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] #navMenu.active > li.zappy-products-dropdown > a,
  html[dir="rtl"] .nav-menu.open > li.zappy-products-dropdown > a {
    padding-right: 16px !important;
    padding-left: 56px !important;
  }
}

html[dir="rtl"] #mic-access-tool-general-button, html[dir="rtl"] .mic-access-tool-general-button,
html[dir="rtl"] #mic-init-access-tool .mic-access-tool-general-button,
html[dir="rtl"] #mic-init-access-tool #mic-access-tool-general-button,
html[dir="rtl"] ._access-icon { left: 20px !important; right: auto !important; }
html[dir="ltr"] #mic-access-tool-general-button, html[dir="ltr"] .mic-access-tool-general-button,
html[dir="ltr"] #mic-init-access-tool .mic-access-tool-general-button,
html[dir="ltr"] #mic-init-access-tool #mic-access-tool-general-button,
html[dir="ltr"] ._access-icon,
html:not([dir]) #mic-access-tool-general-button, html:not([dir]) .mic-access-tool-general-button,
html:not([dir]) #mic-init-access-tool .mic-access-tool-general-button,
html:not([dir]) #mic-init-access-tool #mic-access-tool-general-button,
html:not([dir]) ._access-icon { right: 20px !important; left: auto !important; }

/* LTR: keep image on left for solution-reverse sections */
html[dir="ltr"] .solution-item.solution-reverse .solution-image { order: -1 !important; }
html[dir="ltr"] .solution-item.solution-reverse .solution-content { order: 1 !important; }
html[dir="ltr"] .service-detail.service-reverse .service-detail-image { order: -1 !important; }
html[dir="ltr"] .service-detail.service-reverse .service-detail-content { order: 1 !important; }

/* ENSURE: navbar-logo-isolation */
.navbar .logo,
.nav-brand .logo,
.logo-link .logo {
  margin: 0 !important;
}


/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX */
/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX_V3 */
/* ZAPPY_MOBILE_NAV_ICON_ALIGNMENT_FIX_V4 */
/* The mobile hamburger / phone buttons are absolutely positioned. Keep the
   navbar itself as a non-collapsing containing block so auto-margin centering
   stays aligned even when generated mobile CSS moves every nav child out of flow. */
@media (max-width: 768px) {
  .navbar,
  nav.navbar {
    min-height: 70px !important;
  }

  /* E-commerce mobile navbar icon-group alignment.
     The icon couples (search after the hamburger; login+cart at the end edge)
     are absolutely positioned with inset-inline offsets — inset-inline-start:52px
     to clear the 36px hamburger that sits at left:12px on the .navbar, and
     inset-inline-end:12px to hug the end edge. Those offsets are authored in the
     NAVBAR's full-width coordinate space (the hamburger uses the same one). But
     the offsets are resolved against the nearest positioned ancestor, and the
     generated CSS makes .nav-container position:relative. When .nav-container is
     ALSO inset by the navbar's horizontal padding (max-width / padding from the
     LLM-authored navbar), the groups resolve to that inset box instead of the
     full-width navbar: the search drifts ~20px away from the hamburger and the
     cart leaves a fat asymmetric gap before the screen edge. Dropping
     .nav-container out of the containing-block chain on mobile makes both couples
     resolve to .navbar (always full-bleed) so they line up tightly with the
     hamburger and sit symmetrically against both edges regardless of any
     navbar/container padding. Scoped via :has() to navbars that actually carry
     the e-commerce icon couples so non-ecommerce navs are untouched. */
  .navbar:has(.nav-ecommerce-icons) .nav-container,
  nav.navbar:has(.nav-ecommerce-icons) .nav-container,
  header:has(.nav-ecommerce-icons) .nav-container {
    position: static !important;
  }

  /* Some generated RTL nav CSS sets both left:50% and right:50% on the
     absolute .nav-brand. That collapses it to 0px wide, so the logo flows
     left from the center instead of being centered on it. */
  .navbar .nav-brand,
  nav.navbar .nav-brand,
  html[dir="rtl"] .navbar .nav-brand,
  html[dir="rtl"] nav.navbar .nav-brand,
  html[lang="he"] .navbar .nav-brand,
  html[lang="he"] nav.navbar .nav-brand,
  html[lang="ar"] .navbar .nav-brand,
  html[lang="ar"] nav.navbar .nav-brand {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: calc(100% - 168px) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .navbar .nav-brand .logo-link,
  nav.navbar .nav-brand .logo-link,
  .navbar .nav-brand a,
  nav.navbar .nav-brand a {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .navbar > .mobile-toggle,
  nav.navbar > .mobile-toggle,
  .navbar .mobile-toggle,
  nav.navbar .mobile-toggle,
  #mobileToggle,
  .navbar > .phone-header-btn,
  nav.navbar > .phone-header-btn,
  .navbar .phone-header-btn,
  nav.navbar .phone-header-btn {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
  }

  .navbar > .mobile-toggle,
  nav.navbar > .mobile-toggle,
  .navbar .mobile-toggle,
  nav.navbar .mobile-toggle,
  #mobileToggle {
    display: flex !important;
  }

  html:not([data-zappy-site-type="ecommerce"]) .navbar > .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) nav.navbar > .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) .navbar .phone-header-btn,
  html:not([data-zappy-site-type="ecommerce"]) nav.navbar .phone-header-btn {
    display: flex !important;
  }

  html[data-zappy-site-type="ecommerce"] .phone-header-btn,
  body[data-zappy-site-type="ecommerce"] .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] header .phone-header-btn,
  html[data-zappy-site-type="ecommerce"] nav .phone-header-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}


/* ZAPPY_FULLSCREEN_HERO_SCRIM_OPACITY_CAP — keep fullscreen hero images visible while preserving text contrast */
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="scrim"],
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > .hero-scrim,
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="hero-scrim"],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"] {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.32) 62%, rgba(0,0,0,0.42) 100%), linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.36) 36%, rgba(0,0,0,0.06) 78%) !important;
  background-color: transparent !important;
}
html[dir="rtl"] section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="scrim"],
html[dir="rtl"] section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"],
html[dir="rtl"] section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > .hero-scrim,
html[dir="rtl"] section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="hero-scrim"],
html[dir="rtl"] section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] [class*="scrim"] {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.32) 62%, rgba(0,0,0,0.42) 100%), linear-gradient(to left, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.36) 36%, rgba(0,0,0,0.06) 78%) !important;
}
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > img[data-hero-bg],
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="hero-bg"] img[data-hero-bg],
section[data-hero-type="fullscreen-scrim"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] img[data-hero-bg],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]):has(> [class*="scrim"]) > img[data-hero-bg],
section[class*="hero"]:not([data-zappy-bg-overlay-opacity]) > [class*="bg-wrapper"] img[data-hero-bg] {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* ZAPPY_PUBLISHED_MOBILE_MEDIA_FIT_FIX */
@media (max-width: 768px) {
  /* Published sites can carry stale editor-generated transform:scale(...) rules.
     Fullscreen hero backgrounds must keep filling their absolute wrapper; mobile
     crop runtime can still override this with inline styles when needed. */
  html body main section[class*="hero"] [data-hero-bg],
  html body main section[class*="hero"] [data-hero-background="true"],
  html body main section[data-hero-type*="fullscreen"] img[data-hero-bg],
  html body main section[data-hero-type*="fullscreen"] img[data-hero-background="true"] {
    transform: none !important;
    transform-origin: center center !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Filter chip rows should wrap on narrow RTL screens instead of hiding most
     options off-canvas behind a horizontal scroller. */
  html body main #showcaseAdvancedFilter .adv-filter-group > .adv-filter-scroll-row,
  html body main .index-showcase-section #showcaseAdvancedFilter .adv-filter-group > .adv-filter-scroll-row,
  html body main .index-showcase-section .adv-filter-group > .adv-filter-scroll-row {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    height: auto !important;
    cursor: default !important;
  }
}

/* Spec table BiDi fix: isolate cells so mixed LTR/RTL content renders correctly */
.specs-table th, .specs-table td { unicode-bidi: plaintext !important; }