/*
Elements — RTL (Arabic) overrides.
Loaded on top of style.css when the locale is right-to-left. Flex and grid
flip on their own via dir="rtl"; this file handles what doesn't: floats,
absolute left/right offsets, directional margins — and letter-spacing,
which must be zero for Arabic (tracking visually disconnects joined script).
*/

/* Arabic script must not be letterspaced */
* { letter-spacing: 0 !important; }

/* Italic serif accent doesn't translate to Arabic */
.module-subtitle { font-style: normal; font-family: inherit; }

/* Header */
.site-branding { margin-right: 0; margin-left: auto; }
.cart-count { right: auto; left: -6px; }
.skip-link:focus { left: auto; right: 8px; }

/* Shop toolbar */
.post-type-archive-product .woocommerce-breadcrumb { float: right; }
.woocommerce .woocommerce-ordering { float: left; }

/* Selects: chevron moves to the left edge */
select {
	background-position: left 12px center;
	padding-right: 14px;
	padding-left: 36px;
}

/* Badges */
.single-product div.product span.onsale { left: auto; right: 12px; }
.woocommerce ul.products li.product .onsale { right: auto; left: 8px; }
.elements-badge-outofstock { right: auto; left: 8px; }

/* Swatches */
.elements-swatch-current { margin-left: 0; margin-right: 6px; }

/* Add-to-cart fine print hugs the row's other edge */
.woocommerce div.product form.cart .elements-cart-note { text-align: left; }

/* Checkout/account columns (billing right, shipping left). Woo's own RTL
   build flips these, then its generated body.rtl rules flip them back —
   this wins over both. */
body.rtl .woocommerce .col2-set .col-1,
body.rtl .woocommerce-page .col2-set .col-1 { float: right; }
body.rtl .woocommerce .col2-set .col-2,
body.rtl .woocommerce-page .col2-set .col-2 { float: left; }

/* Toasts: top-left on desktop (mirrors top-right), centered stays on mobile */
.elements-toasts { right: auto; left: 20px; }
@media (max-width: 768px) {
	.elements-toasts { left: 50%; transform: translateX(-50%); }
}

/* Kuwaiti checkout selects: arrow sits on the left in RTL */
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 14px 0 2em; }