/* =========================================================================
   Baze — RTL / Arabic overrides.
   All rules are scoped to [dir="rtl"] so this file is safe to load on every
   page; it only takes effect on Arabic (right-to-left) pages.
   ========================================================================= */

/* Arabic-capable typography (Hanken Grotesk / JetBrains Mono have no Arabic
   glyphs). IBM Plex Sans Arabic matches the geometric, minimal brand. */
[dir="rtl"] {
	--font-head: "IBM Plex Sans Arabic", "Hanken Grotesk", system-ui, sans-serif;
	--font-body: "IBM Plex Sans Arabic", "Hanken Grotesk", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
}

[dir="rtl"] body {
	direction: rtl;
	text-align: right;
}

/* Arabic script is cursive — letter-spacing breaks the joining. Reset it
   everywhere text appears (prices are numeric, handled separately below). */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] label,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] .label, [dir="rtl"] .ui-label, [dir="rtl"] .label-sm, [dir="rtl"] .data-label,
[dir="rtl"] .btn, [dir="rtl"] .primary-nav a, [dir="rtl"] .section-header__link,
[dir="rtl"] .footer-col h4, [dir="rtl"] .page-title, [dir="rtl"] .hero h1,
[dir="rtl"] .product-card__name, [dir="rtl"] .product-card__sub,
[dir="rtl"] .woocommerce-loop-product__title, [dir="rtl"] .contact-card dt,
[dir="rtl"] .value-card h3, [dir="rtl"] .widget__title {
	letter-spacing: normal;
}

/* Numeric mono strings (prices, counts) keep tight spacing but no cursive risk. */
[dir="rtl"] .price-display,
[dir="rtl"] .product-card__price,
[dir="rtl"] .woocommerce-Price-amount,
[dir="rtl"] .cart-count { letter-spacing: 0; }

/* ---- Layout: physical left/right that must flip ---- */

/* Header: reversing the flex row puts nav on the right, actions on the left. */
[dir="rtl"] .site-header__inner { direction: rtl; }

/* Block text that was explicitly left-aligned */
[dir="rtl"] .page-hero:not(.page-hero--center),
[dir="rtl"] .prose,
[dir="rtl"] .story__copy,
[dir="rtl"] .contact-form,
[dir="rtl"] .value-card,
[dir="rtl"] .section-header,
[dir="rtl"] .site-footer__cols,
[dir="rtl"] .site-footer__bottom,
[dir="rtl"] .woocommerce-result-count { text-align: right; }

/* Inputs align to the start (right) */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }

/* Product card price now sits on the opposite (left) side of the meta row */
[dir="rtl"] .product-card__price { text-align: left; }

/* Editorial category label moves to the right corner */
[dir="rtl"] .cat-block__label { left: auto; right: var(--gutter); }

/* Product-detail quantity stepper keeps a sensible − [ ] + order */
[dir="rtl"] .single-product form.cart .quantity { direction: rtl; }

/* Contact info card: keep the definition rows right-aligned */
[dir="rtl"] .contact-card dt,
[dir="rtl"] .contact-card dd { text-align: right; }

/* Footer social + payment rows flow from the right */
[dir="rtl"] .contact-card__social,
[dir="rtl"] .payment-row { justify-content: flex-start; }

/* Keep the centered hero and its button centered */
[dir="rtl"] .hero__inner,
[dir="rtl"] .page-hero--center { text-align: center; }

/* WooCommerce ordering dropdown to the start side */
[dir="rtl"] .woocommerce .woocommerce-ordering { text-align: right; }

/* Numbers inside Arabic UI stay left-to-right (phone, prices in sentences) */
[dir="rtl"] .price-display,
[dir="rtl"] .woocommerce-Price-amount,
[dir="rtl"] .cart-count { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* WooCommerce's product-gallery slider (flexslider) miscalculates slide
   position in RTL and hides the main image. Keep the gallery internals LTR
   (it's just images) so the main photo shows; the grid still places the
   gallery on the correct side. */
[dir="rtl"] .woocommerce-product-gallery,
[dir="rtl"] .woocommerce-product-gallery__wrapper,
[dir="rtl"] .woocommerce-product-gallery .flex-viewport,
[dir="rtl"] .woocommerce-product-gallery .flex-control-thumbs { direction: ltr; }
[dir="rtl"] .woocommerce-product-gallery .flex-control-thumbs { justify-content: flex-start; }