/* ==========================================================================
   Storefront - right to left
   --------------------------------------------------------------------------
   Loaded only on an Arabic page, after store.css (and store-home.css on the
   home page). store.css is written in logical properties, so layout already
   mirrors from <html dir="rtl">; what is left here is the typeface, the few
   things drawn with a physical direction, and numbers that must stay
   left-to-right inside Arabic text.
   ========================================================================== */

:root {
	--st-font: "Tajawal", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Arabic sits taller on the line and takes no negative tracking. Plain
   selectors on purpose, so they win over each component's own figures. */
.st-page { line-height: 1.85; }

.st-page h1, .st-page h2, .st-page h3,
.st-page h4, .st-page h5, .st-page h6 {
	letter-spacing: 0;
	line-height: 1.4;
}

.st-logo,
.st-final__logo { letter-spacing: 0; }

/* ------------------------------------------------------------- arrows --- */

/* Arrows point the way the page reads. */
.st-flip { transform: scaleX(-1); }
.st-xcard:hover .st-xcard__arrow { transform: translate(-2px, -2px); }

/* ------------------------------------------------------- directional --- */

/* The views serve a mirrored copy of the hero photograph here, so the crop
   that keeps the model in the arch mirrors with it. */
.st-arch img { object-position: 34% 18%; }

/* An uploaded hero photo has no mirrored twin; the panel can ask for it to
   be flipped here instead. */
.st-arch--flip img { transform: scaleX(-1); }

.st-final__blob { transform: rotate(4deg); }

.st-select,
.st-field select { background-position: left 16px center; }

@media (max-width: 1023px) {
	/* The menu slides in from the reader's side. */
	.st-menu { transform: translateX(-100%); box-shadow: 20px 0 60px rgba(15, 23, 42, .15); }
	.st-menu.is-open { transform: none; }
}

/* ----------------------------------------------------------- numbers --- */

/* Money, quantities and codes stay in Latin digits and must not be dragged
   into the sentence direction around them. */
.st-summary dd,
.st-summary__total strong,
.st-summary__money,
.st-qty input,
.st-pagelink,
.st-tool__count,
.st-summary__thumb em,
.st-ordernote {
	direction: ltr;
	unicode-bidi: isolate;
}