/**
 * RTL overrides for the Arabic site. Loaded only when is_rtl() /
 * gomina_is_arabic() is true (see inc/enqueue.php) — the base CSS
 * already uses logical properties (margin-inline-start, padding-inline,
 * border-inline-start, text-align via inline direction) wherever
 * direction-sensitive, so this file only needs to correct the handful
 * of physical-direction and mirrored-icon cases that logical properties
 * don't cover on their own.
 */

html[dir="rtl"] body {
	direction: rtl;
}

/* Chamfer clip-paths are drawn as literal point coordinates, so they
   don't auto-mirror with direction — flip the corner the cut appears on.
   v2 only chamfers .btn--primary and .product-card__whatsapp (the CTA
   tier); everything else moved to border-radius, which mirrors for free. */
html[dir="rtl"] .btn--primary {
	clip-path: polygon(calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%, 0 0);
}

/* Arrow glyphs in copy (offering-card links use a literal "→" character) */
html[dir="rtl"] .offering-card__link {
	display: inline-flex;
	flex-direction: row-reverse;
}

/* Breadcrumb separators */
html[dir="rtl"] .breadcrumbs__item:not(:last-child)::after {
	content: '\\';
}

/* faq +/− toggle glyph stays the same; layout direction handles itself
   via flex + logical properties already in components.css. */

/* Hero decorative circle should sit on the mirrored side */
html[dir="rtl"] .hero::after {
	right: auto;
	left: -8%;
}

/* ---- Catalog additions ---- */

html[dir="rtl"] .product-card__whatsapp {
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 8px), calc(100% - 8px) 0);
}
/* logical `left`/`inset-inline-start` isn't consistently honored by
   this project's older-style physical `left` on .product-card__stock —
   flip explicitly rather than assume. */
html[dir="rtl"] .product-card__stock {
	left: auto;
	right: var(--space-2);
}