/** Shopify CDN: Minification failed

Line 190:0 Unexpected "}"

**/

html[dir="rtl"] body {
  direction: rtl;
  unicode-bidi: plaintext;
}

/* Default text alignment for content (desktop/tablet) */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] label,
html[dir="rtl"] summary,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: center;
}

/* Keep “technical” fields readable in RTL */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[name*="email" i],
html[dir="rtl"] input[name*="phone" i],
html[dir="rtl"] input[name*="tel" i] {
  direction: ltr;
  text-align: left;
}

/* Helpers */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* -------------------------
   2) Header / navigation
   ------------------------- */
html[dir="rtl"] #header-group,
html[dir="rtl"] #header-group nav,
html[dir="rtl"] #header-group ul {
  direction: rtl;
}

/* If theme uses flex in header, reverse icon/menu flow */
html[dir="rtl"] #header-group .header__content,
html[dir="rtl"] #header-group .header__icons {
  flex-direction: row-reverse;
}

/* -------------------------
   3) Drawers / modals
   ------------------------- */
html[dir="rtl"] .drawer,
html[dir="rtl"] .menu-drawer,
html[dir="rtl"] .cart-drawer,
html[dir="rtl"] .search-modal {
  direction: rtl;
}

html[dir="rtl"] .drawer[open],
html[dir="rtl"] .menu-drawer[open],
html[dir="rtl"] .cart-drawer[open] {
  transform-origin: right center;
}

/* -------------------------
   4) Icons / arrows
   ------------------------- */
html[dir="rtl"] .icon-arrow,
html[dir="rtl"] .icon--arrow,
html[dir="rtl"] .slider-button,
html[dir="rtl"] .swiper-button-next,
html[dir="rtl"] .swiper-button-prev {
  transform: scaleX(-1);
}

/* -------------------------
   5) Product / collection grids
   ------------------------- */
html[dir="rtl"] .grid,
html[dir="rtl"] .product-grid,
html[dir="rtl"] .collection,
html[dir="rtl"] .facets,
html[dir="rtl"] .filters {
  direction: rtl;
}

html[dir="rtl"] .facets__summary,
html[dir="rtl"] .facets__display,
html[dir="rtl"] .facets__form {
  text-align: right;
}

/* -------------------------
   6) Accessibility: hide "Skip to content" visually (keep accessible)
   ------------------------- */
.skip-to-content-link {
  position: absolute;
  top: -1000px;
  inset-inline-start: -1000px;
}

.skip-to-content-link:focus {
  top: 1rem;
  inset-inline-start: 1rem;
  z-index: 10000;
}

/* =========================================================
   7) DRIVE THEME FIXES: Mobile centering for Hero + text blocks
   ========================================================= */
/* @media (max-width: 768px) {
  /* Many Drive sections (including hero) use this flex wrapper */
  [dir="rtl"] .group-block-content.layout-panel-flex {
    align-items: center !important;
    text-align: center !important;
  }

  /* Drive text blocks force left alignment using class + CSS var */
  [dir="rtl"] .text-block--align-left,
  [dir="rtl"] .text-block--align-left * {
    --text-align: center !important;
    text-align: center !important;
  }

  /* Catch inline --text-align:left styles */
  [dir="rtl"] [style*="--text-align: left"] {
    --text-align: center !important;
    text-align: center !important;
  }

  /* Drive rich text component host */
  [dir="rtl"] rte-formatter,
  [dir="rtl"] rte-formatter * {
    --text-align: center !important;
    text-align: center !important;
  }

  /* If your hero uses ai-hero classes, ensure centered as well */
  [dir="rtl"] .ai-hero,
  [dir="rtl"] .ai-hero-content,
  [dir="rtl"] .ai-hero-texts {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  [dir="rtl"] .ai-hero-title {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  [dir="rtl"] .ai-hero-texts,
  [dir="rtl"] .ai-hero-texts p {
    text-align: center !important;
    margin-inline: auto !important;
  }

  /* HERO CTA BUTTON — this is the exact one you inspected */
  [dir="rtl"] a.size-style.button {
    --size-style-width: fit-content !important; /* overrides inline 136% */
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    display: block !important;
    justify-self: center !important; /* grid */
    align-self: center !important;   /* flex */
  }

  /* If there is a wrapper around buttons, force it to center */
  [dir="rtl"] .ai-hero .ai-hero-buttons,
  [dir="rtl"] .ai-hero .buttons,
  [dir="rtl"] .ai-hero .button-group,
  [dir="rtl"] .ai-hero .cta,
  [dir="rtl"] .ai-hero .actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
} */

/* =========================================================
   DRIVE: media-with-content (your hero) — RTL MOBILE CENTER
   ========================================================= */
@media screen and (max-width: 749px) {
  /* Target THIS exact section type */
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] {
    text-align: center !important;
  }

  /* The content column wrapper in your CSS */
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .media-with-content__content,
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .media-with-content__content > .group-block-content {
    text-align: center !important;
  }

  /* This is the key: Drive stacks blocks in a flex column wrapper.
     Force that column to center items on mobile RTL. */
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .layout-panel-flex--column,
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .layout-panel-flex.layout-panel-flex--column,
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .group-block-content.layout-panel-flex {
    align-items: center !important;     /* centers children horizontally */
    justify-content: center !important; /* centers distribution if needed */
    text-align: center !important;
  }

  /* Drive text blocks sometimes force left via --text-align */
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .text-block--align-left,
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .text-block--align-left * {
    --text-align: center !important;
    text-align: center !important;
  }

  /* Rich text host element */
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] rte-formatter,
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] rte-formatter * {
    --text-align: center !important;
    text-align: center !important;
  }

  /* Center the CTA wrapper if it’s flex */
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .button-block,
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .button-group,
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] .buttons {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Your CTA anchor (you showed this exact pattern) */
  [dir="rtl"] .media-with-content[data-testid="media-with-content"] a.size-style.button {
    --size-style-width: fit-content !important; /* overrides inline 136% */
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    display: block !important;
    align-self: center !important;
    justify-self: center !important;
  }
}