/* ═══════════════════════════════════════════════════════════════════════════
   Scout Arabic Typography System v1.0
   Scope: Arabic / RTL interface only ([dir="rtl"] + html[lang="ar"])
   Fonts:
     Display / Editorial: Noto Serif Arabic (400, 600, 700)
     UI / Body:           Almarai (400, 500, 600)
   Rules:
     - letter-spacing: 0 on all Arabic text (Arabic script doesn't use tracking)
     - Minimum font-weight 400 (avoid thin weights in Arabic)
     - Noto Serif Arabic → premium/editorial/display headings only
     - Almarai → all functional UI, body, nav, forms, checkout
     - English interface: completely unaffected
═══════════════════════════════════════════════════════════════════════════ */

/* ── Global layout ─────────────────────────────────────────────────────── */
/* Spacing around main content — applies to both AR & EN */
main.page-main {
    margin-top: 24px;
    margin-bottom: 32px;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
}

/* ── CSS Variables ─────────────────────────────────────────────────────── */
[dir="rtl"],
html[lang="ar"] {
    /* Font families */
    --font-ar-display: "Noto Serif Arabic", serif;
    --font-ar-ui:      "Almarai", "Segoe UI", Tahoma, Arial, sans-serif;

    /* Display / Editorial sizes (desktop) */
    --ar-hero:         56px;
    --ar-h1:           44px;
    --ar-h2:           36px;
    --ar-h3:           26px;
    --ar-editorial-sm: 22px;

    /* UI / Body sizes (desktop) */
    --ar-body:         18px;
    --ar-body-sm:      16px;
    --ar-product-name: 16px;
    --ar-price:        17px;
    --ar-nav:          15px;
    --ar-button:       15px;
    --ar-label:        13px;
    --ar-form-label:   14px;
    --ar-input:        16px;
    --ar-footer:       14px;
    --ar-micro:        12px;
}

/* ── Mobile overrides ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    [dir="rtl"],
    html[lang="ar"] {
        --ar-hero:         38px;
        --ar-h1:           32px;
        --ar-h2:           28px;
        --ar-h3:           22px;
        --ar-editorial-sm: 19px;
        --ar-body:         16px;
        --ar-body-sm:      15px;
        --ar-product-name: 15px;
        --ar-price:        16px;
        --ar-nav:          15px;
        --ar-button:       15px;
        --ar-label:        12px;
        --ar-form-label:   14px;
        --ar-input:        16px;
        --ar-footer:       14px;
        --ar-micro:        12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"],
html[lang="ar"] body {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-body);
    line-height: 1.8;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISPLAY / EDITORIAL HEADINGS — Noto Serif Arabic
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
[dir="rtl"] .hero-title,
[dir="rtl"] .page-title,
[dir="rtl"] .section-title,
[dir="rtl"] .editorial-title,
[dir="rtl"] .story-title,
[dir="rtl"] .premium-title,
[dir="rtl"] .scout-seller-title,
[dir="rtl"] .scout-nl-title,
[dir="rtl"] .scout-section-title,
[dir="rtl"] .scout-section-title,
[dir="rtl"] .scout-section-title,
[dir="rtl"] .scout-section-title {
    font-family: var(--font-ar-display) !important;
    letter-spacing: 0 !important;
    font-weight: 600;
}

/* Hero headline */
[dir="rtl"] h1,
[dir="rtl"] .hero-title,
html[lang="ar"] h1 {
    font-size: var(--ar-hero);
    font-weight: 700;
    line-height: 1.3;
}

/* Page title / H1 */
[dir="rtl"] .page-title,
html[lang="ar"] .page-title {
    font-size: var(--ar-h1);
    font-weight: 700;
    line-height: 1.35;
}

/* Section title / H2 */
[dir="rtl"] h2,
[dir="rtl"] .section-title,
html[lang="ar"] h2 {
    font-size: var(--ar-h2);
    font-weight: 600;
    line-height: 1.4;
}

/* Card / subsection title / H3 */
[dir="rtl"] h3,
html[lang="ar"] h3 {
    font-size: var(--ar-h3);
    font-weight: 600;
    line-height: 1.45;
}

/* Small editorial / H4–H6 */
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-size: var(--ar-editorial-sm);
    font-weight: 600;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BODY TEXT — Almarai
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] p,
[dir="rtl"] .body-text,
[dir="rtl"] .description,
html[lang="ar"] p,
html[lang="ar"] .body-text,
html[lang="ar"] .description {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-body);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0 !important;
}

[dir="rtl"] .body-small,
[dir="rtl"] .supporting-text,
html[lang="ar"] .body-small,
html[lang="ar"] .supporting-text {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-body-sm);
    line-height: 1.75;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT CARDS & PDP
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] .product-name,
[dir="rtl"] .product-item-name,
[dir="rtl"] .scout-bs-name,
[dir="rtl"] .scout-na-name,
html[lang="ar"] .product-name,
html[lang="ar"] .product-item-name {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-product-name) !important;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0 !important;
}

[dir="rtl"] .price,
[dir="rtl"] .product-price,
[dir="rtl"] .price-box .price,
[dir="rtl"] .scout-bs-price-final,
[dir="rtl"] .scout-bs-price-regular,
html[lang="ar"] .price,
html[lang="ar"] .product-price {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-price) !important;
    font-weight: 600;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] nav a,
[dir="rtl"] .nav-link,
[dir="rtl"] .menu-link,
html[lang="ar"] nav a,
html[lang="ar"] .nav-link {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-nav) !important;
    font-weight: 500;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS & CTAs
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] button,
[dir="rtl"] .button,
[dir="rtl"] .btn,
[dir="rtl"] .action,
[dir="rtl"] .cta,
[dir="rtl"] .scout-seller-btn-primary,
[dir="rtl"] .scout-seller-btn-secondary,
[dir="rtl"] .scout-nl-btn,
[dir="rtl"] .scout-atc-btn,
[dir="rtl"] .scout-atc-btn,
html[lang="ar"] button,
html[lang="ar"] .btn,
html[lang="ar"] .action {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-button) !important;
    font-weight: 600;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS — labels, inputs, selects, textareas
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] label,
[dir="rtl"] .form-label,
[dir="rtl"] .label,
html[lang="ar"] label,
html[lang="ar"] .form-label {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-form-label);
    font-weight: 500;
    letter-spacing: 0 !important;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-input);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES & LABELS
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] .badge,
[dir="rtl"] .label,
[dir="rtl"] .tag,
[dir="rtl"] .scout-occ-now-active-badge,
[dir="rtl"] .scout-section-eyebrow,
[dir="rtl"] .scout-bs-sold,
[dir="rtl"] .scout-seller-eyebrow,
html[lang="ar"] .badge,
html[lang="ar"] .label,
html[lang="ar"] .tag {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-label);
    font-weight: 500;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] footer,
[dir="rtl"] footer a,
[dir="rtl"] .footer-link,
[dir="rtl"] .scout-footer-nav a,
[dir="rtl"] .scout-footer-tagline,
[dir="rtl"] .scout-footer-legal,
html[lang="ar"] footer,
html[lang="ar"] footer a,
html[lang="ar"] .footer-link {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-footer);
    line-height: 1.7;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICROCOPY & LEGAL
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] .microcopy,
[dir="rtl"] .legal,
[dir="rtl"] small,
[dir="rtl"] .scout-footer-jordan,
[dir="rtl"] .scout-footer-legal span,
html[lang="ar"] .microcopy,
html[lang="ar"] .legal,
html[lang="ar"] small {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCOUT-SPECIFIC COMPONENT OVERRIDES
═══════════════════════════════════════════════════════════════════════════ */

/* Newsletter section title stays editorial (Noto Serif Arabic) */
[dir="rtl"] .scout-nl-title {
    font-family: var(--font-ar-display) !important;
    font-size: var(--ar-h2);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0 !important;
}

/* Seller CTA — headline editorial, sub UI */
[dir="rtl"] .scout-seller-title {
    font-family: var(--font-ar-display) !important;
    font-size: var(--ar-h2);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-seller-sub {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-body-sm);
    font-weight: 400;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-seller-stat .scout-seller-num {
    font-family: var(--font-ar-ui) !important;
    font-weight: 700;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-seller-stat .scout-seller-label {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro);
    font-weight: 500;
    letter-spacing: 0 !important;
}

/* Occasion hub heading */
[dir="rtl"] .scout-occ-hero-name {
    font-family: var(--font-ar-display) !important;
    font-weight: 600;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-occ-future-title span {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-label);
    font-weight: 600;
    letter-spacing: 0 !important;
}

/* Best sellers card names + prices */
[dir="rtl"] .scout-bs-name {
    font-size: var(--ar-product-name) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-bs-price-final,
[dir="rtl"] .scout-bs-price-regular {
    font-size: var(--ar-price) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-bs-price-old {
    font-size: var(--ar-body-sm) !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCOUT COMPONENT COVERAGE GAPS — classes not targeted above
   All fall-throughs from English sizes fixed here.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Product grid card name (item.phtml) ────────────────────────────────
   English: 12px → Arabic: var(--ar-product-name) = 16px desktop / 15px mobile
   The `h3` wrapper inherits Noto Serif Arabic from the h-rule above,
   so we scope to the link inside to keep UI font for product names.
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-card-name,
[dir="rtl"] .scout-card-name-link,
html[lang="ar"] .scout-card-name,
html[lang="ar"] .scout-card-name-link {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-product-name) !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

/* ── Collection-view card name (collectionview.phtml) ───────────────────
   English: 13.5px → Arabic: 16px
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-sc-card-name,
[dir="rtl"] .scout-sc-card-name a,
html[lang="ar"] .scout-sc-card-name,
html[lang="ar"] .scout-sc-card-name a {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-product-name) !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

/* ── PDP product description ────────────────────────────────────────────
   English: 14px → Arabic: var(--ar-body-sm) = 16px
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-pdp-description,
[dir="rtl"] .scout-pdp-description p,
[dir="rtl"] .scout-pdp-description li,
html[lang="ar"] .scout-pdp-description,
html[lang="ar"] .scout-pdp-description p,
html[lang="ar"] .scout-pdp-description li {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-body-sm) !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
}

/* ── Trust bar (product-detail-page.phtml) ──────────────────────────────
   Title: 12.5px → 13px  |  Desc: 11px → 12px
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-trust-bar-title,
html[lang="ar"] .scout-trust-bar-title {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-label) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-trust-bar-desc,
html[lang="ar"] .scout-trust-bar-desc {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro) !important;
    letter-spacing: 0 !important;
}

/* ── PDP trust icons (product-info.phtml) ───────────────────────────────
   Trust title: 10px → 12px  |  Trust desc: inherits → 12px
   10px Arabic is illegible — hard floor at var(--ar-micro).
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-pdp-trust-title,
html[lang="ar"] .scout-pdp-trust-title {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-pdp-trust-desc,
html[lang="ar"] .scout-pdp-trust-desc {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro) !important;
    letter-spacing: 0 !important;
}

/* ── Payment section (product-info.phtml) ───────────────────────────────
   Payment label: 11px → 13px  |  Secure text: 10px → 12px
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-pdp-payment-label,
html[lang="ar"] .scout-pdp-payment-label {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-label) !important;
    font-weight: 500 !important;
    text-transform: none !important; /* uppercase tracking breaks Arabic */
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-pdp-pay-secure,
html[lang="ar"] .scout-pdp-pay-secure {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro) !important;
    letter-spacing: 0 !important;
}

/* ── Gallery & card badges ──────────────────────────────────────────────
   Gallery badge: 10px → 12px  |  Card badge (Bestseller/New): 9px → 12px
   9px Arabic is completely unreadable — both floored at var(--ar-micro).
──────────────────────────────────────────────────────────────────────── */
[dir="rtl"] .scout-gallery-badge,
html[lang="ar"] .scout-gallery-badge {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
[dir="rtl"] .scout-card-badge,
html[lang="ar"] .scout-card-badge {
    font-family: var(--font-ar-ui) !important;
    font-size: var(--ar-micro) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL LETTER-SPACING RESET — catches any remaining components
═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] *,
html[lang="ar"] * {
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHROME iOS DIALOG FIX — older bundled WebKit may not apply UA-stylesheet
   display:none to <dialog> elements that are not opened via showModal().
   Without this, closed dialogs render as transparent fixed-position blocks
   that intercept touch events (observed: cart drawer covers header area on AR).
═══════════════════════════════════════════════════════════════════════════ */

html[lang="ar"] dialog:not([open]) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}