/* ══════════════════════════════════════
   GE SS ARABIC FONT
══════════════════════════════════════ */
@font-face { font-family:'GE SS'; src:url('../fonts/GE_SS_Text_UltraLight.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'GE SS'; src:url('../fonts/GE_SS_Three_Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'GE SS'; src:url('../fonts/GE_SS_Text_Medium.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'GE SS'; src:url('../fonts/GE_SS_Two_Bold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'GE SS'; src:url('../fonts/GE_SS_Text_Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

/* ══════════════════════════════════════
   BASE — direction:rtl on html cascades
   to ALL children automatically.
   We only need to fix flex containers
   and elements with explicit text-align:left
══════════════════════════════════════ */
html[dir="rtl"],
html[dir="rtl"] body {
  direction: rtl;
  font-family: 'GE SS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── TOPBAR ── */

/* ── HEADER ── */

/* ── MOBILE NAV ── */
html[dir="rtl"] .mobile-nav-links li a { text-align: right; }

/* ══════════════════════════════════════
   HERO — HOME PAGE
   Uses .container inside, text right
══════════════════════════════════════ */
html[dir="rtl"] .hero-overlay {
  background: linear-gradient(
    270deg,
    rgba(2,10,18,0.95) 0%,
    rgba(2,10,18,0.85) 30%,
    rgba(15,87,164,0.5) 65%,
    rgba(15,87,164,0.0) 100%
  );
}
html[dir="rtl"] .hero-content    { text-align: right; }
html[dir="rtl"] .hero-content p  { max-width: 100%; }

/* ══════════════════════════════════════
   HERO — ALL INNER PAGES
   These heroes use padding directly on
   the hero div (no container wrapper).
   The *-hero-content div has width:100%
   so text-align:right works correctly.
══════════════════════════════════════ */
html[dir="rtl"] .about-hero-content,
html[dir="rtl"] .sust-hero-content,
html[dir="rtl"] .innov-hero-content,
html[dir="rtl"] .stock-hero-content,
html[dir="rtl"] .contact-hero-content,
html[dir="rtl"] .gallery-hero-content,
html[dir="rtl"] .search-hero-content,
html[dir="rtl"] .tr-page-hero-content,
html[dir="rtl"] .page-hero-content {
  text-align: right;
  /* width:100% is set in each page's own CSS */
}

/* Hero h1 and p inside any page hero */
html[dir="rtl"] .about-hero h1,    html[dir="rtl"] .about-hero p,
html[dir="rtl"] .sust-hero h1,     html[dir="rtl"] .sust-hero p,
html[dir="rtl"] .innov-hero h1,    html[dir="rtl"] .innov-hero p,
html[dir="rtl"] .stock-hero h1,    html[dir="rtl"] .stock-hero p,
html[dir="rtl"] .contact-hero h1,  html[dir="rtl"] .contact-hero p,
html[dir="rtl"] .gallery-hero h1,  html[dir="rtl"] .gallery-hero p,
html[dir="rtl"] .search-hero h1,   html[dir="rtl"] .search-hero p,
html[dir="rtl"] .page-hero h1,     html[dir="rtl"] .page-hero p {
  text-align: right;
}

/* ══════════════════════════════════════
   BREADCRUMBS — all pages
══════════════════════════════════════ */

/* ══════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════ */
html[dir="rtl"] .section-title-wrap { text-align: right; }

/* ══════════════════════════════════════
   HOME PAGE SECTIONS
══════════════════════════════════════ */
/* Stats */
html[dir="rtl"] .stats-grid { direction: rtl; }

/* Products */
html[dir="rtl"] .products-grid { direction: rtl; }
html[dir="rtl"] .product-info  { text-align: right; }

/* Industries */
html[dir="rtl"] .industries-header {
  flex-direction: row;
  align-items: flex-end;
  text-align: right;
}
html[dir="rtl"] .industries-header .section-title-wrap { align-items: flex-start; text-align: right; }
html[dir="rtl"] .industries-grid  { direction: rtl; }
html[dir="rtl"] .industry-info    { text-align: center; }
html[dir="rtl"] .industries-footer{ text-align: right; }

/* Technical Resources (home) */
html[dir="rtl"] .resources-grid   { direction: rtl; }
html[dir="rtl"] .resource-card    { align-items: flex-end; text-align: right; }

/* Sustainability (home) */
html[dir="rtl"] .sustain-content  { text-align: right; }

/* About (home section) */
html[dir="rtl"] .about-grid { direction: rtl; }
html[dir="rtl"] .about-grid > div:first-child { text-align: right; }
html[dir="rtl"] .about-bullet-title,
html[dir="rtl"] .about-bullet-sub { text-align: right; }

/* Articles */
html[dir="rtl"] .articles-grid   { direction: rtl; }
html[dir="rtl"] .article-date    { text-align: right; }
html[dir="rtl"] .article-title,
html[dir="rtl"] .article-excerpt { text-align: right; }

/* ══════════════════════════════════════
   ABOUT CHEMANOL PAGE
══════════════════════════════════════ */
/* Layout grid — sidebar switches sides automatically via direction:rtl */
html[dir="rtl"] .about-body > .container { direction: rtl; }

/* Sidebar */
html[dir="rtl"] .about-sidenav li a { text-align: right; }

/* Content area */
html[dir="rtl"] .about-tab-title { text-align: right; }
html[dir="rtl"] .overview-desc   { text-align: right; }

/* Bullet lists — direction:rtl on the list makes ::before appear on right,
   text flows right-to-left. No flex tricks needed. */
html[dir="rtl"] .ab-bullet-list,
html[dir="rtl"] .quality-bullet-list,
html[dir="rtl"] .innov-card-bullets {
  direction: rtl;
}
html[dir="rtl"] .ab-bullet-list li,
html[dir="rtl"] .quality-bullet-list li,

/* Icon header cards */
html[dir="rtl"] .icon-header-title,
html[dir="rtl"] .icon-header-sub   { text-align: right; }

/* Policy grid */
html[dir="rtl"] .policy-card { text-align: right; }

/* Supply chain */
html[dir="rtl"] .supply-chain-sub-grid { direction: rtl; }
html[dir="rtl"] .supply-chain-desc,
html[dir="rtl"] .supply-chain-label,
html[dir="rtl"] .supply-chain-value    { text-align: right; }

/* Investor relations */
html[dir="rtl"] .investor-stats-row { direction: rtl; }
html[dir="rtl"] .investor-btn-grid  { direction: rtl; }

/* Quality cards */
html[dir="rtl"] .quality-card-title,
html[dir="rtl"] .quality-card-sub,
html[dir="rtl"] .dev-title,
html[dir="rtl"] .dev-desc            { text-align: right; }

/* Media center */
html[dir="rtl"] .media-card { text-align: right; }

/* Careers */
html[dir="rtl"] .career-card { text-align: right; }

/* ══════════════════════════════════════
   SUSTAINABILITY PAGE
══════════════════════════════════════ */
html[dir="rtl"] .sust-body > .container { direction: rtl; }
html[dir="rtl"] .sust-sidenav li a { text-align: right; }
html[dir="rtl"] .sust-section-title,
html[dir="rtl"] .sust-card-title,
html[dir="rtl"] .sust-card-desc { text-align: right; }
html[dir="rtl"] .sust-ehss-grid { direction: rtl; }

/* ══════════════════════════════════════
   INNOVATION PAGE
══════════════════════════════════════ */
html[dir="rtl"] .innov-body > .container { direction: rtl; }
html[dir="rtl"] .innov-intro-card { text-align: right; }
html[dir="rtl"] .innov-focus-grid { direction: rtl; }
html[dir="rtl"] .innov-card { text-align: right; }

html[dir="rtl"] .innov-stats-grid { direction: rtl; }

/* ══════════════════════════════════════
   TECHNICAL RESOURCES PAGE
══════════════════════════════════════ */
html[dir="rtl"] .tr-body > .container { direction: rtl; }
html[dir="rtl"] .tr-sidenav li a { text-align: right; }
html[dir="rtl"] .tr-content-area { text-align: right; }
html[dir="rtl"] .tr-doc-title,
html[dir="rtl"] .tr-doc-meta { text-align: right; }

/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */
html[dir="rtl"] .contact-grid    { direction: rtl; }
html[dir="rtl"] .contact-section-title,
html[dir="rtl"] .locate-title    { text-align: right; }
html[dir="rtl"] .form-tab        { text-align: right; align-items: flex-end; }
html[dir="rtl"] .d-text          { text-align: right; }
html[dir="rtl"] .f-input,
html[dir="rtl"] .f-select,
html[dir="rtl"] .f-textarea      { text-align: right; direction: rtl; }
html[dir="rtl"] .f-check-group,
html[dir="rtl"] .f-radio-group   { text-align: right; }
html[dir="rtl"] .f-ci,
html[dir="rtl"] .f-group-label   { text-align: right; }
html[dir="rtl"] .f-row           { direction: rtl; }

/* ══════════════════════════════════════
   STOCK PAGE
══════════════════════════════════════ */
html[dir="rtl"] .stock-row1     { direction: rtl; }
html[dir="rtl"] .sec-title,
html[dir="rtl"] .sec-title-bold,
html[dir="rtl"] .sec-subtitle   { text-align: right; }
html[dir="rtl"] .s-table thead th { text-align: right; }
html[dir="rtl"] .s-table thead th:last-child { text-align: left; }
html[dir="rtl"] .s-table tbody td.val { text-align: left; }
html[dir="rtl"] .sh-table thead th { text-align: center; }
html[dir="rtl"] .sh-table thead th:first-child { text-align: right; }
html[dir="rtl"] .sh-table tbody td:first-child { text-align: right; }
html[dir="rtl"] .investor-stats-row { direction: rtl; }
html[dir="rtl"] .investor-btn-grid  { direction: rtl; }
html[dir="rtl"] .tabs-wrap { direction: rtl; }
html[dir="rtl"] .fo-header h3,
html[dir="rtl"] .fo-header p,
html[dir="rtl"] .fo-header h4 { text-align: right; }

/* ══════════════════════════════════════
   SEARCH PAGE
══════════════════════════════════════ */
html[dir="rtl"] .search-card-heading,
html[dir="rtl"] .search-card-sub { text-align: right; }
html[dir="rtl"] .popular-label   { text-align: right; }
html[dir="rtl"] .search-input    { text-align: right; direction: rtl; }
html[dir="rtl"] .search-result-card    { text-align: right; }

/* ══════════════════════════════════════
   GALLERY PAGE
══════════════════════════════════════ */
html[dir="rtl"] .filter-wrap  { direction: rtl; }
html[dir="rtl"] .gallery-item-label { text-align: right; }

/* ══════════════════════════════════════
   PRODUCTS PAGE
══════════════════════════════════════ */
html[dir="rtl"] .products-page-body > .container { direction: rtl; }
html[dir="rtl"] .products-sidebar { text-align: right; }
html[dir="rtl"] .sidebar-nav li a { text-align: right; }
html[dir="rtl"] .product-card-info { text-align: right; }
html[dir="rtl"] .page-hero-content { text-align: right; }

/* ══════════════════════════════════════
   INDUSTRIES PAGE
══════════════════════════════════════ */
html[dir="rtl"] .industries-page-body > .container { direction: rtl; }
html[dir="rtl"] .ind-sidebar li a { text-align: right; }
html[dir="rtl"] .ind-content-area { text-align: right; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
html[dir="rtl"] .footer-top         { direction: rtl; }
html[dir="rtl"] .footer-col-title,
html[dir="rtl"] .footer-col-subtitle { text-align: right; }
html[dir="rtl"] .footer-links li a   { text-align: right; }
html[dir="rtl"] .footer-form input,
html[dir="rtl"] .footer-form textarea { text-align: right; direction: rtl; }

/* ══════════════════════════════════════
   BUTTONS — flip arrow direction
══════════════════════════════════════ */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .btn-navy svg,
html[dir="rtl"] .btn-blue svg,
html[dir="rtl"] .btn-primary svg,
html[dir="rtl"] .btn-white svg,
html[dir="rtl"] .btn-outline-white svg,
html[dir="rtl"] .btn-resource svg { transform: scaleX(-1); }

/* ══════════════════════════════════════
   APPLICATIONS — RTL
══════════════════════════════════════ */
html[dir="rtl"] .application-card-tag { left: auto; right: 12px; }
html[dir="rtl"] .application-card-title,
html[dir="rtl"] .application-card-product { text-align: right; }
html[dir="rtl"] .application-card-product { flex-direction: row-reverse; }
html[dir="rtl"] .app-hero-content { text-align: right; }
html[dir="rtl"] .app-hero-tags { justify-content: flex-start; }
html[dir="rtl"] .app-hero-back { flex-direction: row-reverse; }
html[dir="rtl"] .app-breadcrumb .container { direction: rtl; }
html[dir="rtl"] .app-desc,
html[dir="rtl"] .app-section-title,
html[dir="rtl"] .app-block-title { text-align: right; }
html[dir="rtl"] .app-industry-tags { justify-content: flex-start; }
html[dir="rtl"] .app-sidebar-title { text-align: right; }
html[dir="rtl"] .app-product-name { text-align: right; }
html[dir="rtl"] .app-product-arrow { transform: scaleX(-1); }
html[dir="rtl"] .app-back-link { flex-direction: row-reverse; }

/* Innovation focus area image — RTL flips alternating back */
html[dir="rtl"] .focus-area-card--has-image { direction: rtl; }
html[dir="rtl"] .focus-area-card--has-image .focus-area-content { direction: rtl; }
html[dir="rtl"] .focus-area-card--has-image:nth-child(even) { direction: ltr; }
html[dir="rtl"] .focus-area-card--has-image:nth-child(even) .focus-area-content { direction: rtl; }

/* ── RTL Header ── */
html[dir="rtl"] .header .container {
    direction: rtl;
}
html[dir="rtl"] .nav {
    direction: rtl;
}
html[dir="rtl"] .header-right {
    direction: ltr; /* keep search/lang icons in natural order */
}
html[dir="rtl"] .nav-item::after {
    transform-origin: right center;
}
html[dir="rtl"] .nav-item.active::after,
html[dir="rtl"] .nav-item:hover::after {
    transform: scaleX(1);
    transform-origin: right center;
}

/* ══════════════════════════════════════
   RTL BORDER FIXES — active indicators
   All border-left accents → border-right
══════════════════════════════════════ */

/* Products sidebar */
html[dir="rtl"] .sidebar-nav li a {
    border-left: none;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .sidebar-nav li a.active,
html[dir="rtl"] .sidebar-nav li a:hover {
    border-left: none;
    border-right-color: #0F57A4;
}

/* About sidebar */
html[dir="rtl"] .about-sidenav li a {
    border-left: none;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .about-sidenav li a.active,
html[dir="rtl"] .about-sidenav li a:hover {
    border-left: none;
    border-right-color: #0F57A4;
}

/* Sustainability sidebar */
html[dir="rtl"] .sust-nav li a,
html[dir="rtl"] .sust-sidenav li a {
    border-left: none;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .sust-nav li a.active,
html[dir="rtl"] .sust-nav li a:hover,
html[dir="rtl"] .sust-sidenav li a.active,
html[dir="rtl"] .sust-sidenav li a:hover {
    border-left: none;
    border-right-color: #0F57A4;
}

/* Technical Resources sidebar */
html[dir="rtl"] .tr-sidenav li a {
    border-left: none;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .tr-sidenav li a.active,
html[dir="rtl"] .tr-sidenav li a:hover {
    border-left: none;
    border-right-color: #0F57A4;
}

/* Industries sidebar */
html[dir="rtl"] .ind-sidebar li a {
    border-left: none;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .ind-sidebar li a.active,
html[dir="rtl"] .ind-sidebar li a:hover {
    border-left: none;
    border-right-color: #0F57A4;
}

/* About — Mission/Vision/Values blocks */
html[dir="rtl"] .mvv-block {
    border-left: none;
    border-right: 4px solid #0F57A4;
}

/* ── RTL Dropdown ── */
html[dir="rtl"] .nav-dropdown {
    left: auto;
    right: 0;
}
html[dir="rtl"] .nav-chevron {
    margin-left: 0;
    margin-right: 4px;
}

/* ══════════════════════════════════════
   RTL BORDER FIXES — CORRECTED SELECTORS
══════════════════════════════════════ */

/* Industries sidebar — correct class is .ind-sidebar-nav */
html[dir="rtl"] .ind-sidebar-nav li a {
    border-left: none;
    border-right: 3px solid transparent;
    padding-left: 16px;
    padding-right: 16px;
}
html[dir="rtl"] .ind-sidebar-nav li a.active,
html[dir="rtl"] .ind-sidebar-nav li a:hover {
    border-left: none;
    border-right-color: #0F57A4;
}

/* Products sidebar */
html[dir="rtl"] .sidebar-nav li a {
    border-left: none !important;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .sidebar-nav li a.active,
html[dir="rtl"] .sidebar-nav li a:hover {
    border-left: none !important;
    border-right-color: #0F57A4;
}

/* Sustainability sidebar */
html[dir="rtl"] .sust-sidenav li a {
    border-left: none !important;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .sust-sidenav li a.active,
html[dir="rtl"] .sust-sidenav li a:hover {
    border-left: none !important;
    border-right-color: #0F57A4;
}

/* MVV blocks — fix wrong .rtl selector in about.css */
html[dir="rtl"] .mvv-block {
    border-left: none !important;
    border-right: 4px solid #0F57A4 !important;
}

/* Privacy policy sections */
html[dir="rtl"] .pp-section h2 {
    border-left: none !important;
    border-right: 3px solid var(--blue);
    padding-left: 0;
    padding-right: 14px;
}

/* Blog sidebar */
html[dir="rtl"] .single-blog-sidebar .blog-sidebar-title {
    text-align: right;
}

/* ══════════════════════════════════════
   RTL MOBILE FIXES — Home & About
   Proper fix: constrain widths, no overflow-x hiding
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Fix container so RTL direction doesn't push content out */
  html[dir="rtl"] .container {
    box-sizing: border-box;
    width: 100%;
  }

  /* Stats grid — already 2-col on mobile, just ensure it fits */
  html[dir="rtl"] .stats-grid {
    width: 100%;
    box-sizing: border-box;
  }
  html[dir="rtl"] .stats-grid > * {
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Home about grid */
  html[dir="rtl"] .about-grid {
    width: 100%;
    box-sizing: border-box;
  }
  html[dir="rtl"] .about-grid > * {
    min-width: 0;
    box-sizing: border-box;
  }

  /* Products grid */
  html[dir="rtl"] .products-grid {
    width: 100%;
    box-sizing: border-box;
  }
  html[dir="rtl"] .products-grid > * {
    min-width: 0;
    box-sizing: border-box;
  }

  /* Articles */
  html[dir="rtl"] .articles-grid {
    width: 100%;
    box-sizing: border-box;
  }

  /* Industries */
  html[dir="rtl"] .industries-grid {
    width: 100%;
    box-sizing: border-box;
  }

  /* Prevent long Arabic words from overflowing */
  html[dir="rtl"] .stats-number,
  html[dir="rtl"] .stats-label,
  html[dir="rtl"] .hero-title,
  html[dir="rtl"] .hero-sub,
  html[dir="rtl"] .section-title,
  html[dir="rtl"] .about-bullet-title,
  html[dir="rtl"] .about-bullet-sub,
  html[dir="rtl"] .product-card-title,
  html[dir="rtl"] .product-card-desc,
  html[dir="rtl"] .article-title,
  html[dir="rtl"] .article-excerpt {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  /* About page sidebar hidden on mobile — already hidden but ensure it doesn't affect layout */
  html[dir="rtl"] .about-body > .container {
    box-sizing: border-box;
    width: 100%;
  }

  /* Overview stats on about page */
  html[dir="rtl"] .overview-stats {
    width: 100%;
    box-sizing: border-box;
  }
  html[dir="rtl"] .overview-stat {
    min-width: 0;
    box-sizing: border-box;
  }

  /* MVV grid */
  html[dir="rtl"] .mvv-grid {
    width: 100%;
    box-sizing: border-box;
  }
  html[dir="rtl"] .mvv-block {
    min-width: 0;
    box-sizing: border-box;
  }

  /* Hero content */
  html[dir="rtl"] .hero-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* Section headers */
  html[dir="rtl"] .section-header {
    box-sizing: border-box;
    width: 100%;
  }
}

/* ══════════════════════════════════════
   RTL MOBILE — ABOUT PAGE SPECIFIC FIXES
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* About hero — fix clipping */
  html[dir="rtl"] .about-hero {
    box-sizing: border-box;
    width: 100%;
    text-align: right;
  }
  html[dir="rtl"] .about-hero h1,
  html[dir="rtl"] .about-hero p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Sidebar pill nav — fix RTL scroll direction */
  html[dir="rtl"] .about-sidenav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Scroll from right in RTL */
    direction: rtl;
  }
  html[dir="rtl"] .about-sidenav ul {
    direction: rtl;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
  }
  html[dir="rtl"] .about-sidenav li a {
    white-space: nowrap;
    display: inline-block;
  }

  /* About body container */
  html[dir="rtl"] .about-body > .container {
    direction: rtl;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }

  /* About content area */
  html[dir="rtl"] .about-content-area {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }

  /* All grids inside about */
  html[dir="rtl"] .overview-stats-row,
  html[dir="rtl"] .mvv-grid,
  html[dir="rtl"] .policy-grid,
  html[dir="rtl"] .quality-top-grid,
  html[dir="rtl"] .media-grid,
  html[dir="rtl"] .careers-grid,
  html[dir="rtl"] .supply-chain-sub-grid {
    box-sizing: border-box;
    width: 100%;
  }
  html[dir="rtl"] .overview-stats-row > *,
  html[dir="rtl"] .mvv-grid > *,
  html[dir="rtl"] .policy-grid > *,
  html[dir="rtl"] .media-grid > *,
  html[dir="rtl"] .careers-grid > * {
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Investor stats */
  html[dir="rtl"] .investor-stats-row {
    box-sizing: border-box;
    width: 100%;
    direction: rtl;
  }

  /* Breadcrumb */
  html[dir="rtl"] .breadcrumb-nav {
    direction: rtl;
    text-align: right;
    flex-wrap: wrap;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  html[dir="rtl"] .about-sidenav ul {
    flex-wrap: nowrap;
  }
}
/* ══════════════════════════════════════
   RTL BREADCRUMB SEPARATOR FIX
   Flip SVG arrows and replace › with ‹
══════════════════════════════════════ */

/* SVG breadcrumb separators replaced with CSS content */

/* Text separators: override CSS content to show < for Arabic */
html[dir="rtl"] .breadcrumb-sep::before,
html[dir="rtl"] .about-breadcrumb-sep::before,
html[dir="rtl"] .contact-breadcrumb-sep::before,
html[dir="rtl"] .gallery-breadcrumb-sep::before,
html[dir="rtl"] .stock-breadcrumb-sep::before,
html[dir="rtl"] .search-breadcrumb-sep::before { content: '\003C'; }

/* ══════════════════════════════════════
   RTL BUTTON & ICON ARROW FLIP
   All right-pointing arrows → flip to left
══════════════════════════════════════ */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .btn-primary svg,
html[dir="rtl"] .btn-navy svg,
html[dir="rtl"] .btn-blue svg,
html[dir="rtl"] .btn-outline-white svg,
html[dir="rtl"] .btn-resource svg,
html[dir="rtl"] .btn-investor-dl svg,
html[dir="rtl"] .view-all-btn svg,
html[dir="rtl"] .app-product-arrow,
html[dir="rtl"] .slr-item .slr-link svg,
html[dir="rtl"] .application-card-product svg,
html[dir="rtl"] .ind-view-all svg,
html[dir="rtl"] .cs-view-all svg,
html[dir="rtl"] .blog-read-more svg,
html[dir="rtl"] .btn-send svg,
html[dir="rtl"] .btn-tr-contact svg,
html[dir="rtl"] .btn-tr-portfolio svg,
html[dir="rtl"] .btn-cs-view-all svg,
html[dir="rtl"] .btn-contact svg,
html[dir="rtl"] .btn-request svg,
html[dir="rtl"] .btn-portfolio svg,
html[dir="rtl"] .other-products-mobile-btn svg,
html[dir="rtl"] .tr-mobile-portfolio-btn svg {
    transform: scaleX(-1);
}

/* Popular tag arrow text → flip */
html[dir="rtl"] .popular-tag-arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* btn-view-all arrow flip */
html[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

/* Sustainability sidebar — swap padding for RTL so text has gap from right border */
html[dir="rtl"] .sust-nav li a {
    padding: 12px 0 12px 16px;
}
html[dir="rtl"] .sust-nav li a.active {
    padding-right: 16px;
    padding-left: 16px;
}


/* Sustainability content sections — gap from sidebar on RTL */
html[dir="rtl"] .sust-section {
    margin-right: 2rem;
}

/* About - Values list: move bullets to right side for RTL */
html[dir="rtl"] .mvv-values-list {
    padding-left: 0;
    padding-right: 0;
    list-style: none;
}
html[dir="rtl"] .mvv-values-list li {
    position: relative;
    padding-right: 20px;
    text-align: right;
    list-style: none;
}
html[dir="rtl"] .mvv-values-list li::before {
    content: '–';
    position: absolute;
    right: 0;
    color: #444;
}