/* =========================================================================
   Hebrew / RTL layer.
   Loaded AFTER bootstrap.rtl.css and style.rtl.css.
   The site's original custom fonts (SourceSansVariable_Roman, DIN Condensed
   Bold, FF_DIN_*) contain no Hebrew glyphs, so every selector that used them
   is remapped here to a Hebrew web font:
       body text  -> Heebo
       display/headings -> Rubik
   Latin text (tyre model names, sizes) still renders fine in these fonts.
   ========================================================================= */

:root {
  --he-body:    'Heebo', 'SourceSansVariable_Roman', 'Segoe UI', Arial, sans-serif;
  --he-display: 'Rubik', 'DIN Condensed Bold', 'Segoe UI', Arial, sans-serif;
}

/* ---- Global defaults ---- */
html[dir="rtl"] body {
  font-family: var(--he-body) !important;
  text-align: right;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
  font-family: var(--he-display) !important;
}

/* ---- Body-text group -> Heebo ---- */
[dir="rtl"] .font-source-sans,
[dir="rtl"] .nav-link,
[dir="rtl"] .homepage-article-title,
[dir="rtl"] .homepage-article-subtitle,
[dir="rtl"] .homepage-second-article-topic,
[dir="rtl"] .homepage-second-article-title,
[dir="rtl"] .homepage-third-article-topic,
[dir="rtl"] .homepage-third-article-title,
[dir="rtl"] .homepage-product-subtitle,
[dir="rtl"] .homepage-product-feature-desc,
[dir="rtl"] .products-details-subtitle,
[dir="rtl"] .products-product-feature-desc,
[dir="rtl"] .headline-topic,
[dir="rtl"] .side-headline-topic,
[dir="rtl"] .side-headline-title,
[dir="rtl"] .news-topic,
[dir="rtl"] .news-title {
  font-family: var(--he-body) !important;
}

/* ---- Display / heading group -> Rubik ---- */
[dir="rtl"] .font-din-condensed-bold,
[dir="rtl"] .font-din-medium,
[dir="rtl"] .font-din-pro-black-italic,
[dir="rtl"] .font-din-pro-bold-italic,
[dir="rtl"] .font-din-pro-regular-italic,
[dir="rtl"] .carousel-indicators-numbers li,
[dir="rtl"] .heading-title,
[dir="rtl"] .homepage-product-title,
[dir="rtl"] .homepage-product-feature-title,
[dir="rtl"] .products-header-section-title,
[dir="rtl"] .products-header-section-search-title,
[dir="rtl"] .products-header-section-search-category,
[dir="rtl"] .products-header-section-search-category-item-btn,
[dir="rtl"] .products-header-section-search-category-item-search-btn,
[dir="rtl"] .products-products-title,
[dir="rtl"] .products-products-subtitle,
[dir="rtl"] .header-title,
[dir="rtl"] .winner-header-title,
[dir="rtl"] .winner-description,
[dir="rtl"] .related-article-title,
[dir="rtl"] .distribution-map-search-title,
[dir="rtl"] .products-details-title,
[dir="rtl"] .products-product-feature-title,
[dir="rtl"] .selectr-container.products-tire-size-select.selectr-desktop,
[dir="rtl"] .selectr-container.products-tire-size-select.selectr-mobile {
  font-family: var(--he-display) !important;
  letter-spacing: normal !important;   /* condensed spacing hurts Hebrew legibility */
}

/* ---- Keep Latin runs (model names, sizes, tel/email) left-to-right ---- */
[dir="rtl"] .ltr,
[dir="rtl"] .dir-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---- Small RTL polish rtlcss can't infer ---- */
[dir="rtl"] .navbar-nav .nav-item { text-align: right; }
[dir="rtl"] ul { padding-right: 0; }

/* ---- Products client-side filter (carousel -> filterable grid) ---- */
.products-products-carousel.pf-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.products-products-carousel.pf-grid .products-products-carousel-item { display: contents; }
.products-products-carousel.pf-grid .my-5 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .products-products-carousel.pf-grid .my-5 { flex: 0 0 50%; max-width: 50%; }
}
.products-products-carousel .pf-card.pf-hide { display: none !important; }
/* slick positions prev/next correctly in RTL; the arrow icons themselves must be mirrored */
[dir="rtl"] img.slick-arrow { transform: scaleX(-1); }
.products-header-section-search-category-item-btn.pf-active { background: #fff !important; color: #000 !important; }
#pf-noresults { color: #fff; font-size: 1.05rem; }