/* ==========================================================================
   GEAR HOUSE — Arabic pages (/ar/): right-to-left layout and Arabic type.
   Loaded after the other stylesheets, only on pages with <html lang="ar" dir="rtl">.
   Flex and grid rows mirror by themselves; this file fixes what is placed with
   left/right, arrows that point the wrong way, and type that doesn't suit Arabic.
   ========================================================================== */

/* Arabic text in IBM Plex Sans Arabic; Latin words (brands, models) keep Inter. */
html[lang="ar"] {
  --font-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "Inter Tight", "IBM Plex Sans Arabic", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Sans Arabic", monospace;
}
/* Arabic letters join: spacing between them or capitals would break words apart. */
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.7; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .display { line-height: 1.25; font-weight: 700; }
html[lang="ar"] .lede, html[lang="ar"] p { line-height: 1.8; }
/* Numbers, prices, phone numbers and dates read left to right inside Arabic text */
html[lang="ar"] input[type="tel"], html[lang="ar"] input[type="email"], html[lang="ar"] input[type="date"] { direction: ltr; text-align: right; }

/* Arrows and chevrons point the other way */
[dir="rtl"] .nav-chev { transform: none; }
[dir="rtl"] .ms-row > svg:last-child, [dir="rtl"] .back-btn svg, [dir="rtl"] .footer-news-field button svg, [dir="rtl"] .ms-news button svg { transform: scaleX(-1); }

/* Small Latin-style labels (mono, uppercase, 10-12px) are too small for Arabic letters */
html[lang="ar"] .btn { font-size: 14px; font-weight: 600; text-transform: none; }
html[lang="ar"] .btn-sm { font-size: 13px; }
html[lang="ar"] .kicker, html[lang="ar"] .slate, html[lang="ar"] .footer h3, html[lang="ar"] .footer h4,
html[lang="ar"] .crew-cta, html[lang="ar"] .tabbar .tb-l, html[lang="ar"] .hc-field label, html[lang="ar"] .search-overlay .results .m { font-size: 13px; text-transform: none; }
html[lang="ar"] .crew-cta { font-size: 13px; }
html[lang="ar"] .footer-bottom { font-size: 12px; text-transform: none; }
html[lang="ar"] .btn-lg { font-size: 15px; }

/* Things placed with left/right: menus open from the start side, badges sit on the start corner */
[dir="rtl"] .nav-sub { left: auto; right: -14px; }
[dir="rtl"] .acct-menu { right: auto; left: 0; }
[dir="rtl"] .acct-btn .dot { right: auto; left: 8px; }
[dir="rtl"] .gearlist-btn .count { right: auto; left: -6px; }
[dir="rtl"] .search-overlay .close-search { right: auto; left: var(--gutter); }
[dir="rtl"] .toast .toast-act { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .toast a { margin-left: 0; margin-right: 6px; }
@media (max-width: 760px) {
  [dir="rtl"] .tabbar .count { right: auto; left: 2px; }
}
/* Legal line (company numbers) stays in reading order */
[dir="rtl"] .footer-bottom span[dir="ltr"] { display: inline-block; }

/* Photo viewer (item, kit, studio pages): "previous" on the right, "next" on the left */
[dir="rtl"] .lightbox .lb-nav.prev { left: auto; right: 16px; }
[dir="rtl"] .lightbox .lb-nav.next { right: auto; left: 16px; }

/* Kit page: "in the case" label keeps its gap on the reading side */
[dir="rtl"] .kp-case span { margin-right: 0; margin-left: 8px; }
/* Data still in English (descriptions): each line takes its own direction, so "…" lands at its end */
[dir="rtl"] .product .short, [dir="rtl"] .kp-case, [dir="rtl"] .lcard p { unicode-bidi: plaintext; }

/* Card badges: type badge on the start (right) corner, "Featured" on the end corner */
[dir="rtl"] .pbadge { left: auto; right: 12px; }
[dir="rtl"] .pbadge.pfeat { right: auto; left: 12px; }
/* Photo count on studio space photos */
[dir="rtl"] .st-count { left: auto; right: 10px; }
html[lang="ar"] .pk { font-size: 13px; text-transform: none; }