/* ============================================================
   i18n: Heebo (Hebrew) webfont, language toggle button, RTL
   mirroring. Every rule here is scoped so the default English
   LTR rendering is untouched.
   ============================================================ */

/* ---- Heebo for Hebrew glyphs via unicode-range font shadowing ----
   Heebo (self-hosted Google Fonts hebrew subset) is registered as an EXTRA
   face of every font family the site declares, limited to the Hebrew unicode
   range. Hebrew glyphs pick it up automatically; Latin text, the cascade,
   colors, weights and every original font-family declaration stay untouched
   in BOTH languages — no overrides needed. */
@font-face {
  font-family: 'Satoshi-Variable';
  font-style: normal;
  font-weight: 300 900; /* mirrors the original Satoshi face */
  font-display: swap;
  src: url('./fonts/heebo-NGS6v5_NC0k9P9H0TbFzsQ.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}

@font-face {
  font-family: 'NeueHaasDisplayMediu';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/heebo-NGS6v5_NC0k9P9H0TbFzsQ.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}

@font-face {
  font-family: 'NeueHaasDisplayBold';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/heebo-NGS6v5_NC0k9P9H0TbFzsQ.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}

@font-face {
  font-family: 'NeueHaasDisplayRoman';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/heebo-NGS6v5_NC0k9P9H0TbFzsQ.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}

@font-face {
  font-family: 'NeueHaasDisplayXThinItalic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/heebo-NGS6v5_NC0k9P9H0TbFzsQ.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}

/* Standalone Heebo family for the few elements that use the browser's default
   UI font (unstyled <button>s), which cannot be shadowed by name. */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/heebo-NGS6v5_NC0k9P9H0TbFzsQ.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/heebo-NGS6v5_NC0k9P9H2TbE.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Unstyled <button>s render in the OS UI font, which would serve Hebrew from
   the system instead of Heebo — give them Heebo in Hebrew mode only. */
html[lang='he'] button {
  font-family: 'Heebo', sans-serif;
}

/* While the language toggle swaps content and flips direction, freeze all
   transitions/animations so the browser paints the new state exactly once. */
html.lang-switching *,
html.lang-switching *::before,
html.lang-switching *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

/* ---- Language toggle ----
   Absolutely positioned into the header's empty space so the original
   menu/logo layout keeps its exact pixel positions in both languages. */
#btnLang {
  cursor: pointer;
  white-space: nowrap;
  position: absolute;
  top: 0;
  right: 280px;
  height: 100%;
}

html[dir='rtl'] #btnLang {
  right: auto;
  left: 280px;
}

#btnLangMobile {
  display: none !important;
}

@media only screen and (max-width: 1081px) {
  #btnLang {
    display: none !important;
  }

  #btnLangMobile {
    display: flex !important;
    position: absolute;
    top: 0;
    right: 75px;
    height: 60px;
    align-items: center;
    align-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
    cursor: pointer;
  }

  html[dir='rtl'] #btnLangMobile {
    right: auto;
    left: 75px;
  }
}

/* ============================================================
   RTL mirroring — active only when Hebrew is selected.
   ============================================================ */

/* Landing (index) sections. The bottle artwork is the same video in both
   languages, so only the symmetric two-column sections (2/3/4/5/8/9, bottle
   centered) swap sides; sections 0/1/6/7 keep their original placement where
   the artwork leaves clear space. Desktop-scoped — mobile centers everything. */
@media only screen and (min-width: 1082px) {
  html[dir='rtl'] #section-2 .wrapper:nth-child(1),
  html[dir='rtl'] #section-3 .wrapper:nth-child(1),
  html[dir='rtl'] #section-4 .wrapper:nth-child(1),
  html[dir='rtl'] #section-5 .wrapper:nth-child(1),
  html[dir='rtl'] #section-8 .wrapper:nth-child(1),
  html[dir='rtl'] #section-9 .wrapper:nth-child(1) {
    text-align: left !important;
  }

  html[dir='rtl'] #section-2 .wrapper:nth-child(2),
  html[dir='rtl'] #section-3 .wrapper:nth-child(2),
  html[dir='rtl'] #section-4 .wrapper:nth-child(2),
  html[dir='rtl'] #section-5 .wrapper:nth-child(2),
  html[dir='rtl'] #section-8 .wrapper:nth-child(2),
  html[dir='rtl'] #section-9 .wrapper:nth-child(2) {
    text-align: right !important;
  }

  /* keep the hero pinned to the clear beige area (artwork does not mirror) */
  html[dir='rtl'] #section-0 .wrapper {
    padding-left: 10vw !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  html[dir='rtl'] #section-1 .box {
    padding-left: 0 !important;
    padding-right: 5vw !important;
  }

  html[dir='rtl'] .section-panel .wrapper.center {
    text-align: center !important;
  }

  /* wrappers keep their designed edge inset after mirroring */
  html[dir='rtl'] #section-2 .wrapper:nth-child(2),
  html[dir='rtl'] #section-3 .wrapper:nth-child(2),
  html[dir='rtl'] #section-9 .wrapper:nth-child(2) {
    margin-right: 0 !important;
    margin-left: 6vw !important;
  }

  html[dir='rtl'] #section-5 .wrapper:nth-child(2) {
    margin-right: 0 !important;
    margin-left: 4vw !important;
  }

  html[dir='rtl'] #section-8 .wrapper:nth-child(1) {
    margin-left: 0 !important;
    margin-right: 5vw !important;
  }

  html[dir='rtl'] #section-8 .wrapper:nth-child(2) {
    margin-right: 0 !important;
    margin-left: 2vw !important;
  }
}

/* Footer small print (original forces text-align:left over .center) */
html[dir='rtl'] .info {
  text-align: right !important;
}

html[dir='rtl'] .info.center {
  text-align: right !important;
}

/* Directional arrow icons that imply forward motion */
html[dir='rtl'] #section-10 .button img,
html[dir='rtl'] footer #btnSubmit img,
html[dir='rtl'] footer .btnSubmit img,
html[dir='rtl'] .landing-page-footer #btnSubmit img {
  transform: scaleX(-1);
}

/* Newsletter submit button hugs the input's inline end */
html[dir='rtl'] #btnSubmit,
html[dir='rtl'] .btnSubmit {
  margin-left: 0 !important;
  margin-right: -40px !important;
}

/* Mini-cart drawer: docks to the left automatically in RTL (column flex
   align-items:flex-end mirrors with direction) — only the one-sided corner
   radii and shadow need explicit flipping. */
html[dir='rtl'] .mini-cart .wrapper-cart {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 35px !important;
  border-bottom-right-radius: 35px !important;
  box-shadow: -10px 10px 30px #00000070 !important;
}

html[dir='rtl'] button.btn-close.text-reset {
  right: auto !important;
  left: 20px !important;
}

/* Password reveal icon inside the field */
html[dir='rtl'] #btnEye {
  right: auto !important;
  left: 25px !important;
}

/* Logout link icon spacing */
html[dir='rtl'] #btnLogout span {
  margin-left: 0 !important;
  margin-right: 5px !important;
}

/* Fixed scroll-to-bottom control */
html[dir='rtl'] .scroll-to-bottom-button {
  right: auto !important;
  left: 32px !important;
}

/* Tables read right-to-left */
html[dir='rtl'] table th {
  text-align: right !important;
}

html[dir='rtl'] table th:has(img) {
  text-align: center !important;
}

/* Mobile header mirroring (styles.css header — index/contact/science/login/…) */
@media only screen and (max-width: 1081px) {
  html[dir='rtl'] #burgerMenu {
    right: auto !important;
    left: 0 !important;
    margin-right: 0 !important;
    margin-left: -25px !important;
  }

  html[dir='rtl'] #btnLogo {
    margin-left: 0 !important;
    margin-right: -10px !important;
  }

  html[dir='rtl'] .menu {
    left: auto;
    right: -3px;
    align-content: flex-start;
    align-items: flex-start;
  }

  html[dir='rtl'] a {
    margin-left: 0;
    margin-right: -5px;
  }
}

/* about/shop use styles2.css's flex mobile header (1024px breakpoint, relative
   positioning) — neutralize the absolute-header mirror above and flip its
   physical edge paddings instead. Must come after the block above. */
@media only screen and (max-width: 1081px) {
  html[dir='rtl'] body:has(.page-about) #burgerMenu,
  html[dir='rtl'] body:has(.page-shop) #burgerMenu {
    left: auto !important;
    margin-left: 0 !important;
    padding: 0px 0px 0px 10px !important;
  }

  html[dir='rtl'] body:has(.page-about) #btnLogo,
  html[dir='rtl'] body:has(.page-shop) #btnLogo {
    margin-right: 0 !important;
    padding: 0px 10px 0px 0px !important;
  }
}

/* Mini-cart SAVE badge pins to the image's mirrored corner */
html[dir='rtl'] .product-box .product-img .save_am {
  left: auto !important;
  right: 20px !important;
}

/* Checkbox/label gap in login/register/forgot/cart forms */
html[dir='rtl'] .content form input[type='checkbox'] {
  margin-right: 0 !important;
  margin-left: 7px !important;
}

/* Science FAQ answers follow the RTL reading edge */
html[dir='rtl'] .page-science .faq .accordion p {
  text-align: right !important;
}

/* Shop product description + mobile product-information columns */
html[dir='rtl'] .page-shop .content p {
  text-align: right !important;
}

@media only screen and (max-width: 1024px) {
  html[dir='rtl'] .page-shop .product-information .column {
    text-align: right !important;
  }
}

/* About hero scene + shop "Purify in Style" scene: intentionally NOT mirrored.
   Their bottle imagery is animated by GSAP with physical margin/offset values
   (identical in both languages), so text blocks must keep the original
   positions and alignment that the choreography keeps clear of the bottle.
   Pin the scene geometry to LTR (block margin resolution is direction-
   dependent), while keeping Hebrew bidi inside the text elements. */
html[dir='rtl'] .page-about #section01-about,
html[dir='rtl'] #section03-shop {
  direction: ltr;
}

html[dir='rtl'] .page-about #section01-about h1,
html[dir='rtl'] .page-about #section01-about h2,
html[dir='rtl'] .page-about #section01-about p,
html[dir='rtl'] #section03-shop h1,
html[dir='rtl'] #section03-shop h2,
html[dir='rtl'] #section03-shop p {
  direction: rtl;
}

/* Science comparison table: first column keeps its designed inset */
html[dir='rtl'] .page-science .comparison table th:nth-child(1) {
  padding-left: 15px !important;
  padding-right: 50px !important;
}

html[dir='rtl'] .page-science .comparison table .title th:nth-child(1) {
  padding-right: 40px !important;
}

@media only screen and (max-width: 1081px) {
  html[dir='rtl'] .page-science .comparison table th:nth-child(1) {
    padding-right: 20px !important;
  }
}

/* styles2 pages animate the drawer in; enter from the left in RTL */
html[dir='rtl'] body:has(.page-about) .mini-cart .wrapper-cart.slide-from-right,
html[dir='rtl'] body:has(.page-shop) .mini-cart .wrapper-cart.slide-from-right {
  transform: translateX(-200%);
}

html[dir='rtl'] body:has(.page-about) .mini-cart .wrapper-cart.slide-from-right.show,
html[dir='rtl'] body:has(.page-shop) .mini-cart .wrapper-cart.slide-from-right.show {
  transform: translateX(0);
}

/* Forgot-password link inset */
html[dir='rtl'] .content form .forgot {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* Mobile password-reveal eye mirrors outside the field edge.
   Must come after the desktop #btnEye rule above. */
@media only screen and (max-width: 1081px) {
  html[dir='rtl'] #btnEye {
    left: -30px !important;
  }
}

/* Preloader percentage counter mirrors to the bottom-left */
html[dir='rtl'] .counter-container {
  right: auto;
  left: 1rem;
}