/* ═══════════════════════════════════════════
   Scout RTL Stylesheet — Arabic Store (ar_SA)
   Loaded after all other styles to ensure
   RTL overrides take precedence.
═══════════════════════════════════════════ */

/* ── Sticky header fix for RTL ───────────────────────────────────────────
   overflow-x:hidden on html/body creates a scroll container that breaks
   position:sticky on all descendant elements (iOS Safari + Chrome mobile).
   overflow-x:clip prevents horizontal scroll WITHOUT creating a scroll
   container. Applied here with !important because rtl.css loads LAST and
   needs to win over any other stylesheet that sets overflow-x:hidden.     ── */
html[dir="rtl"],
html[lang="ar"] {
    overflow-x: clip !important;
}
html[dir="rtl"] body,
html[lang="ar"] body {
    overflow-x: clip !important;
}

/* ── Base typography ─────────────────────────────────────────────────────
   Almarai is the standard Arabic UI font for premium regional e-commerce
   (Noon, Ounass, LEVEL Shoes). Geometric, screen-optimised, 4 weights.
   The fallback stack covers Windows (Segoe UI), macOS/iOS (system-ui),
   and generic sans-serif for any remaining platforms.
   This !important beats all per-template [dir="rtl"] Georgia overrides.
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] {
    font-family: 'Almarai', 'Segoe UI', Tahoma, Arial, sans-serif !important;
    direction: rtl;
    text-align: start;
    line-height: 1.75; /* Arabic script needs more vertical breathing room than Latin */
}

/* Headings keep the dedicated Arabic serif (Noto Serif Arabic is loaded
   by root.phtml for the AR store via Google Fonts) */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'Noto Serif Arabic', serif !important;
    line-height: 1.4;
}

/* ── BiDi isolation ──────────────────────────────────────────────────────
   Prevents directionality "leakage" on mixed Arabic/English strings
   (e.g. "See all العناية" — the English word stays LTR, Arabic stays RTL).
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-viewall,
[dir="rtl"] .scout-nl-btn,
[dir="rtl"] .scout-seller-btn-primary,
[dir="rtl"] .scout-seller-btn-secondary {
    unicode-bidi: isolate;
}

/* ── Header ── */
[dir="rtl"] .bg-scout-gradient > div > div.flex {
    flex-direction: row !important;
}
[dir="rtl"] #header .flex.items-center.gap-3,
[dir="rtl"] #header .flex.items-center.gap-5 {
    flex-direction: row !important;
}
[dir="rtl"] nav ul.flex { flex-direction: row !important; }
[dir="rtl"] #header input { text-align: right !important; direction: rtl !important; }
[dir="rtl"] #header .text-left { text-align: right !important; }

/* Desktop nav dropdown — open from inline-end (right in LTR → left in RTL) */
[dir="rtl"] nav .absolute.left-0.top-full {
    left: auto !important;
    right: 0 !important;
}
/* BiDi isolation on all nav links — prevents mixed Arabic/English strings
   (e.g. "See all العناية والرفاهية") from having their words reordered
   by the browser's bidirectional algorithm */
[dir="rtl"] nav a,
[dir="rtl"] nav a span,
[dir="rtl"] nav button span {
    unicode-bidi: isolate;
}

/* ── Mobile menu — directional chevrons ──────────────────────────────────
   Hyvä's mobile.phtml uses chevronRight to "drill into" a submenu and
   chevronLeft to "go back". In RTL, "forward" points LEFT and "back"
   points RIGHT, so both need to mirror.

   IMPORTANT: We only flip chevrons in the mobile nav — NOT globally.
   Flipping all SVGs ([dir="rtl"] svg) would also flip the logo, search
   glass, cart, wishlist, and other non-directional icons. Use specific
   Alpine x-ref attribute selectors instead.
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] [x-ref="openSubMenuBtn"] svg,
[dir="rtl"] [x-ref="closeSubMenuBtn"] svg {
    transform: scaleX(-1);
}

/* Spacing: mobile nav items use ms-7 (margin-inline-start).
   This is already a logical property so it flips correctly in RTL — no fix needed. */

/* ── Featured categories ── */
[dir="rtl"] .scout-featured-categories .flex.items-center.justify-between {
    flex-direction: row !important;
}
[dir="rtl"] .scout-section-title { text-align: start !important; }
[dir="rtl"] .scout-fc-grid { direction: rtl !important; }

/* ── Occasion hub ── */
/* The <html dir="rtl"> causes CSS grid to reverse column order.
   Force ltr on the grid to keep hero-left / upcoming-right (same as EN),
   then restore rtl on each cell so Arabic text flows correctly inside. */
[dir="rtl"] .scout-occ-grid               { direction: ltr !important; }
[dir="rtl"] .scout-occ-left,
[dir="rtl"] .scout-occ-right              { direction: rtl !important; }
[dir="rtl"] .scout-occ-left               { align-items: flex-start !important; }
[dir="rtl"] .scout-occ-header             { flex-direction: row !important; }
[dir="rtl"] .scout-occ-future-title       { flex-direction: row !important; }
[dir="rtl"] .scout-occ-hero-body          { align-items: flex-start !important; }
[dir="rtl"] .scout-occ-now-active-badge,
[dir="rtl"] .scout-occ-hero-name,
[dir="rtl"] .scout-occ-hero-desc          { text-align: start !important; }

/* ── New arrivals ── */
[dir="rtl"] .scout-na-section { direction: rtl; }
[dir="rtl"] .scout-na-header { flex-direction: row !important; }
[dir="rtl"] .scout-na-header-left { align-items: flex-start !important; }
[dir="rtl"] .scout-section-eyebrow {
    align-self: flex-start !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}
[dir="rtl"] .scout-na-cards { direction: rtl !important; }
[dir="rtl"] .scout-na-info { align-items: flex-start !important; text-align: start !important; }
[dir="rtl"] .scout-na-badge { text-align: start !important; }
[dir="rtl"] .scout-na-arrow-prev svg,
[dir="rtl"] .scout-na-arrow-next svg { transform: scaleX(-1) !important; }
/* Font-size bumps removed — they were compensating for Georgia's optical
   smallness. Almarai renders at correct optical size. */

/* ── Best sellers ── */
[dir="rtl"] .scout-bs-section { direction: rtl; }
[dir="rtl"] .scout-bs-header { flex-direction: row !important; }
[dir="rtl"] .scout-bs-inner > .scout-bs-header > div { text-align: start !important; }
[dir="rtl"] .scout-bs-track { direction: rtl !important; }
[dir="rtl"] .scout-bs-info { align-items: flex-start !important; text-align: start !important; }
[dir="rtl"] .scout-bs-name { text-align: start !important; font-size: 17px !important; }
[dir="rtl"] .scout-bs-price { flex-direction: row !important; }
[dir="rtl"] .scout-bs-sold { flex-direction: row !important; font-size: 15px !important; }
[dir="rtl"] .scout-bs-price-final,
[dir="rtl"] .scout-bs-price-regular { font-size: 19px !important; }
[dir="rtl"] .scout-bs-price-old     { font-size: 15px !important; }
[dir="rtl"] .scout-bs-actions { flex-direction: row !important; }
[dir="rtl"] .scout-atc-btn     { font-size: 17px !important; }
/* .scout-bs-badges positioning handled by inset-inline-start in base CSS */
[dir="rtl"] .scout-bs-arrow-prev svg,
[dir="rtl"] .scout-bs-arrow-next svg { transform: scaleX(-1) !important; }

/* Fix: Stop product images from mirroring/flipping in RTL (including hover and transition states).
   Without this, the base scaleX(-1) RTL flip conflicts with hover scale(1.05),
   causing the image to visually jump or un-flip during hover animation. */
[dir="rtl"] img.scout-bs-img,
[dir="rtl"] .scout-bs-card:hover img.scout-bs-img,
[dir="rtl"] .scout-bs-img-wrap:hover img.scout-bs-img {
    transform: none !important;
    transition: none !important;
    scale: none !important;
}

/* ── Seller CTA ── */
[dir="rtl"] .scout-seller-cta { direction: rtl; }
[dir="rtl"] .scout-seller-inner { flex-direction: row !important; }
[dir="rtl"] .scout-seller-left {
    align-items: flex-start !important;
    text-align: start !important;
}
[dir="rtl"] .scout-seller-eyebrow,
[dir="rtl"] .scout-seller-title,
[dir="rtl"] .scout-seller-sub { text-align: start !important; }
[dir="rtl"] .scout-seller-stats { flex-direction: row !important; }
[dir="rtl"] .scout-seller-right { align-items: flex-start !important; }

/* ── Why Scout ── */
[dir="rtl"] .why-scout-section { direction: rtl; }
[dir="rtl"] .why-scout-grid-4,
[dir="rtl"] .why-scout-grid-2 { direction: rtl !important; }
/* Product and section images must NEVER be mirrored in RTL —
   flipping would reverse text/labels printed on products.
   Directional arrows are handled per-slider above. */

/* ── Newsletter ── */
/* Desktop: keep input+button as a joined side-by-side pill in RTL */
@media (min-width: 641px) {
    [dir="rtl"] .scout-nl-wrap { flex-direction: row !important; }
    [dir="rtl"] .scout-nl-input {
        border-radius: 0 6px 6px 0 !important;
        border-right: 1px solid #e5e7eb !important;
        border-left: none !important;
        text-align: right !important;
    }
    [dir="rtl"] .scout-nl-btn { border-radius: 6px 0 0 6px !important; }
}
/* Mobile: stacked layout — input and button each get full rounded corners */
@media (max-width: 640px) {
    [dir="rtl"] .scout-nl-input { border-radius: 14px !important; border: 1px solid rgba(43,33,27,0.12) !important; text-align: right !important; }
    [dir="rtl"] .scout-nl-btn  { border-radius: 14px !important; }
}

/* ── Footer ── */
/* ── Footer ── */
[dir="rtl"] .scout-footer-unified { direction: rtl; }
[dir="rtl"] .scout-footer-inner { direction: rtl; }
[dir="rtl"] .scout-footer-top { direction: rtl; }

/* Brand column — right-aligned in RTL */
[dir="rtl"] .scout-footer-brand { align-items: flex-start !important; text-align: right !important; }
[dir="rtl"] .scout-footer-tagline { text-align: right !important; }
[dir="rtl"] .scout-footer-social { direction: rtl; }
[dir="rtl"] .scout-footer-contact { align-items: flex-start !important; }
[dir="rtl"] .scout-footer-contact-item { direction: rtl; }

/* Navigation columns — headings and links right-aligned */
[dir="rtl"] .scout-footer-links-grid { direction: rtl !important; }
[dir="rtl"] .scout-footer-links-grid nav { align-items: flex-start !important; text-align: right !important; }
[dir="rtl"] .scout-footer-links-title { text-align: right !important; }
[dir="rtl"] .scout-footer-links-grid nav a { text-align: right !important; display: block; width: 100%; }

/* Mid row */
[dir="rtl"] .scout-footer-mid { direction: rtl !important; }
[dir="rtl"] .scout-footer-mid-label { text-align: right !important; }
[dir="rtl"] .scout-footer-pay-row { direction: rtl; }
[dir="rtl"] .scout-footer-lang-row { direction: rtl; }
[dir="rtl"] .scout-footer-app-row { direction: rtl; }
[dir="rtl"] .scout-footer-app-btn { direction: rtl; }
[dir="rtl"] .scout-footer-app-text { text-align: right !important; }

/* Legal strip */
[dir="rtl"] .scout-footer-legal { direction: rtl; }
[dir="rtl"] .scout-footer-legal-left { direction: rtl; text-align: right !important; }
[dir="rtl"] .scout-footer-mid-right { align-items: flex-end !important; }

/* Made in Jordan */
[dir="rtl"] .scout-footer-made-jordan { direction: rtl; }

/* ── PDP ── */
[dir="rtl"] .scout-pdp-info-panel { text-align: right !important; }
[dir="rtl"] .scout-pdp-shipping-callout,
[dir="rtl"] .scout-pdp-stock-urgent,
[dir="rtl"] .scout-pdp-trust-item,
[dir="rtl"] .scout-pdp-secondary-actions,
[dir="rtl"] .scout-pdp-qty-row,
[dir="rtl"] .scout-pdp-price,
[dir="rtl"] .scout-pdp-attribute { flex-direction: row !important; }

/* ── Qty stepper — RTL button order ──────────────────────────────────────
   In RTL flex, DOM order [-][input][+] renders as [+][input][-] visually
   (right-to-left reversal). Arabic convention is [-][input][+] left-to-right
   so that [+] stays nearest the reading end (left) and [-] nearest start.
   Using direction:ltr on the stepper inner preserves the DOM order visually
   without row-reverse (which would double-flip in RTL context).
────────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-qty-stepper {
    direction: ltr;
}
[dir="rtl"] .scout-qty-btn--minus { border-inline-end: 1px solid #E8DCCF; border-inline-start: none; }
[dir="rtl"] .scout-qty-btn--plus  { border-inline-start: 1px solid #E8DCCF; border-inline-end: none; }

/* ── Buy Now button — icon position in RTL ── */
[dir="rtl"] .scout-pdp-buynow {
    flex-direction: row-reverse;
}

/* ── WhatsApp share card — RTL fixes ─────────────────────────────────────
   The directional arrow (→) must flip to (←) in RTL. The inline style in
   product-info.phtml already has this, but we add it here with !important
   to ensure it beats any compiled stylesheet cascade.
   On mobile, reduce icon size and padding to keep the card compact.
────────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-right-wa-arrow {
    transform: scaleX(-1) !important;
}

@media (max-width: 767px) {
    [dir="rtl"] .scout-right-wa-link {
        gap: 10px;
        padding: 12px 14px;
    }
    [dir="rtl"] .scout-right-wa-icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    [dir="rtl"] .scout-right-wa-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    [dir="rtl"] .scout-right-wa-title { font-size: 12px; }
    [dir="rtl"] .scout-right-wa-desc  { font-size: 11px; }
}

/* ── Gallery arrows — mobile RTL fix ─────────────────────────────────────
   On mobile, styles.css (compiled from tailwind-source.css) has:
     .scout-gallery-arrow-prev { left: 8px !important }
     .scout-gallery-arrow-next { right: 8px !important }
   These !important rules override the RTL positioning in gallery.phtml
   (which has no !important). Result in RTL mobile: both arrows land on the
   right side, overlapping. We fix with higher-specificity !important rules.
   In RTL:  prev = right side  ·  next = left side
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    [dir="rtl"] .scout-gallery-arrow-prev {
        left: auto !important;
        right: 6px !important;
    }
    [dir="rtl"] .scout-gallery-arrow-next {
        right: auto !important;
        left: 6px !important;
    }
}

/* ── PDP — mobile RTL overrides ──────────────────────────────────────────
   The global `flex-direction: row !important` above is correct at desktop.
   On mobile (≤767px), the product actions must stack vertically so they
   fill the full card width and remain tappable. We restore the mobile-first
   column layout here using !important to beat the global RTL rule above.
   The qty-row, price, attribute, shipping-callout rows can stay as `row`
   since they are short label+value pairs that fit on one line even at 390px.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    [dir="rtl"] .scout-pdp-secondary-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    [dir="rtl"] .scout-pdp-wishlist,
    [dir="rtl"] .scout-pdp-whatsapp {
        width: 100% !important;
        justify-content: center !important;
    }
    [dir="rtl"] .scout-right-seller-row {
        flex-wrap: wrap !important;
    }
    [dir="rtl"] .scout-right-seller-cta {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Qty stepper: tighten gap on mobile so label+stepper aren't far apart */
    [dir="rtl"] .scout-qty-wrap {
        gap: 8px !important;
    }
    [dir="rtl"] .scout-qty-stepper {
        margin-inline-start: 0 !important;
    }
}
/* Gallery arrows use logical inset-inline-start/end in template CSS */

/* ── Breadcrumbs ── */
[dir="rtl"] .breadcrumbs { direction: rtl; }
[dir="rtl"] .breadcrumbs .items { direction: rtl; justify-content: flex-start; }
[dir="rtl"] .breadcrumbs .item { direction: rtl; }

/* ── Forms ── */
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
[dir="rtl"] select,
[dir="rtl"] textarea { text-align: right !important; direction: rtl !important; }

/* ── Banner arrows ── */
[dir="rtl"] .scout-banner-slider button[aria-label*="previous"],
[dir="rtl"] .scout-banner-slider button[aria-label*="السابق"] {
    left: auto !important; right: 1rem !important;
}
[dir="rtl"] .scout-banner-slider button[aria-label*="next"],
[dir="rtl"] .scout-banner-slider button[aria-label*="التالي"] {
    right: auto !important; left: 1rem !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RTL AUDIT FIX BLOCK — 2026-05-23 (v3: maximum-specificity parent chain)
   Selector: html[dir="rtl"] body#html-body
   Specificity: html[0,0,0,1] + [dir="rtl"][0,0,1,0] + body[0,0,0,1]
                + #html-body[0,1,0,0] = [0,1,1,2] base
   Beats any theme rule using a single class or element selector.
   Scoped to [dir="rtl"] — English store is never affected.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Heading alignment ─────────────────────────────────────────────────*/
html[dir="rtl"] body#html-body h1,
html[dir="rtl"] body#html-body h2,
html[dir="rtl"] body#html-body h3,
html[dir="rtl"] body#html-body h4,
html[dir="rtl"] body#html-body h5,
html[dir="rtl"] body#html-body h6,
html[dir="rtl"] body#html-body .login-title,
html[dir="rtl"] body#html-body .create-account-title,
html[dir="rtl"] body#html-body .forgot-pass-title,
html[dir="rtl"] body#html-body .page-wrapper .login-title,
html[dir="rtl"] body#html-body .page-wrapper .create-account-title,
html[dir="rtl"] body#html-body .page-wrapper .forgot-pass-title {
    text-align: right !important;
    text-align: start !important;
}

/* ── 2. Typography & readability ──────────────────────────────────────────*/
html[dir="rtl"] body#html-body {
    font-family: "Almarai", "Segoe UI", Tahoma, Arial, sans-serif !important;
    line-height: 1.8 !important;
}

html[dir="rtl"] body#html-body p,
html[dir="rtl"] body#html-body li,
html[dir="rtl"] body#html-body td,
html[dir="rtl"] body#html-body th,
html[dir="rtl"] body#html-body label,
html[dir="rtl"] body#html-body span,
html[dir="rtl"] body#html-body div {
    line-height: 1.8;
}

/* ── 3. Directional icon mirroring ───────────────────────────────────────
   Broad mirror on all button/link SVGs, then explicit un-mirror for
   non-directional icons (logo, search, cart, wishlist, close, social).
──────────────────────────────────────────────────────────────────────── */
html[dir="rtl"] body#html-body button svg,
html[dir="rtl"] body#html-body a svg,
html[dir="rtl"] body#html-body .icon svg {
    transform: scaleX(-1) !important;
    display: inline-block;
}

html[dir="rtl"] body#html-body .logo svg,
html[dir="rtl"] body#html-body .scout-logo svg,
html[dir="rtl"] body#html-body [aria-label*="search" i] svg,
html[dir="rtl"] body#html-body [aria-label*="cart" i] svg,
html[dir="rtl"] body#html-body [aria-label*="account" i] svg,
html[dir="rtl"] body#html-body [aria-label*="wishlist" i] svg,
html[dir="rtl"] body#html-body [aria-label*="close" i] svg,
html[dir="rtl"] body#html-body [aria-label*="menu" i] svg,
html[dir="rtl"] body#html-body [aria-label*="إغلاق" i] svg,
html[dir="rtl"] body#html-body [aria-label*="قائمة" i] svg,
html[dir="rtl"] body#html-body .social-links a svg,
html[dir="rtl"] body#html-body .scout-footer-social a svg {
    transform: none !important;
}

/* ── 4. Logical property migration ───────────────────────────────────────*/
html[dir="rtl"] body#html-body nav .absolute.left-0.top-full {
    left: unset !important;
    right: unset !important;
    inset-inline-start: 0 !important;
}

html[dir="rtl"] body#html-body [class*="tooltip"],
html[dir="rtl"] body#html-body [class*="popover"] {
    left: unset !important;
    inset-inline-start: 0;
}

/* Desktop only — joined pill form in RTL */
@media (min-width: 641px) {
    html[dir="rtl"] body#html-body .scout-nl-input {
        border-radius: 0 !important;
        border-start-end-radius: 6px !important;
        border-end-end-radius: 6px !important;
        border-inline-start: none !important;
        border-inline-end: 1px solid #e5e7eb !important;
    }

    html[dir="rtl"] body#html-body .scout-nl-btn {
        border-radius: 0 !important;
        border-start-start-radius: 6px !important;
        border-end-start-radius: 6px !important;
    }
}

html[dir="rtl"] body#html-body .product-label-wrapper,
html[dir="rtl"] body#html-body .product-badge {
    left: unset !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0.5rem !important;
}

/* ── 5. Skip-link — RTL visually-hidden (no off-screen positioning) ───────
   NEVER use inset-inline-start:-9999px or right:-9999px here.
   In RTL, inset-inline-start maps to the `right` property, so -9999px would
   place the element 9,999px past the RIGHT edge of the viewport, creating a
   ~10,389px scrollWidth on every AR page and causing the "drag left/right"
   scroll leak on mobile.
   The clip-based SR-only pattern used in header.phtml is already correct for
   both LTR and RTL — we just reinforce it here with !important so no other
   rule accidentally overrides it. ──────────────────────────────────────── */
html[dir="rtl"] body#html-body .scout-skip-link {
    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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    /* NO left/right/inset-inline-start with large values — causes scroll overflow */
}

html[dir="rtl"] body#html-body .scout-skip-link:focus {
    /* Become visible and accessible when keyboard-focused */
    position: fixed !important;
    inset-inline-start: 0 !important;  /* = right:0 in RTL — safe, no overflow */
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

/* ── 6. Form validation & messages ───────────────────────────────────────*/
html[dir="rtl"] body#html-body .mage-error,
html[dir="rtl"] body#html-body .field-error,
html[dir="rtl"] body#html-body div.mage-error[generated] {
    text-align: start !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

html[dir="rtl"] body#html-body .message,
html[dir="rtl"] body#html-body .messages .message {
    text-align: start !important;
    padding-inline-start: 1.25rem !important;
    padding-inline-end: 1rem !important;
}

/* ── 7. Checkout totals ───────────────────────────────────────────────────*/
html[dir="rtl"] body#html-body .totals td,
html[dir="rtl"] body#html-body .cart-totals td {
    text-align: start !important;
    padding-inline-end: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE UI AUDIT FIXES — 2026-05-27
   Issues: breadcrumb overflow, PDP star rating (zero reviews), language
   switcher tap targets, homepage section arrow directions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb mobile overflow ── */
@media (max-width: 767px) {
    .breadcrumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        /* Hide scrollbar but keep scrollability */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .breadcrumbs::-webkit-scrollbar { display: none; }
    .breadcrumbs .items {
        flex-wrap: nowrap;
        white-space: nowrap;
        display: inline-flex;
    }
    .breadcrumbs .item {
        white-space: nowrap;
        max-width: none;
    }
    /* Truncate only the last (current page) crumb */
    .breadcrumbs .item:last-child {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }
}

/* ── PDP star rating — hide empty rating block ── */
/* When Hyvä renders 0 reviews, the summary wrapper is still present but empty.
   Hide the surrounding wrapper if no actual star fill is rendered. */
.scout-pdp-rating-wrap:empty { display: none; }

/* ── Language switcher minimum tap target ── */
@media (max-width: 767px) {
    .scout-lang-switcher a,
    .scout-lang-switcher button,
    [data-lang-switcher] a,
    [data-lang-switcher] button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Homepage section "Explore all" arrow — flip for RTL ── */
[dir="rtl"] .scout-section-cta svg,
[dir="rtl"] .scout-see-all svg,
[dir="rtl"] .scout-occ-cta svg {
    transform: scaleX(-1);
}