/* =========================================================================
   DecantQ in Arabic — typography and the few things rtlcss cannot flip.
   Loaded only on Arabic pages (/ar/…), after every other stylesheet.
   One typeface for headings and text: IBM Plex Sans Arabic (clear at every size, with good Latin letters for
   brand names). Headings get a little more weight instead of a different face.
   ====================================================================== */

/* IBM Plex Sans Arabic, served from the site (SIL Open Font License, see assets/fonts/). Two weights: 400 for text,
   600 for headings and buttons (700 falls back to 600). Latin letters download only when a page needs them. */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
	unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

html[lang^="ar"] body[class] {
	font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}
html[lang^="ar"] body[class] :is(input, select, textarea, button) {
	font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}
/* every component reads its display face from --dq-display */
html[lang^="ar"] body[class],
html[lang^="ar"] body[class] * {
	/* one typeface for headings and text in Arabic */
	--dq-display: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}

/* Letter-spacing breaks the joins between Arabic letters: never in Arabic (the Latin logo keeps its own). */
html[lang^="ar"] body[class] *:not(.dq-logo):not(.dq-logo *) {
	letter-spacing: normal !important;
}

/* Arabic reads more comfortably with a little more line height */
html[lang^="ar"] body[class] :is(p, li, dd, .dq-section__text, .dq-sp__prose, .dq-about2__text, .dq-topic__text) {
	line-height: 1.85;
}
/* headings: same face as the text, set apart by weight */
html[lang^="ar"] body[class] :is(h1, h2, h3) {
	line-height: 1.35;
	font-weight: 600;
}

/* Directional arrows point the other way (chevrons, "View all →", slider and gallery arrows, ↗). */
html[dir="rtl"] svg:has(> path[d^="M5 12h14"]),
html[dir="rtl"] svg:has(> path[d^="M9 6l6 6"]),
html[dir="rtl"] svg:has(> path[d^="M15 6l-6 6"]),
html[dir="rtl"] svg:has(> path[d^="M7 17 17 7"]),
html[dir="rtl"] svg:has(> path[d^="M13 6l6 6"]) {
	transform: scaleX(-1);
}

/* Latin brand and product names, sizes and numbers keep their own direction inside Arabic text */
html[dir="rtl"] :is(.dq-card__brand, .dq-card__name, .dq-sp__brand, .dq-result__brand, .dq-result__name, .dq-box__brand, .dq-box__name, .dq-mini__name) {
	unicode-bidi: plaintext;
}
html[dir="rtl"] :is(.dq-size__label, .dq-card__size-hint, .dq-stage__ml, .dq-stage__tick, bdi) {
	unicode-bidi: isolate;
}

/* Brand strip: the house names are Latin, so the rows run left to right, with their own movement defined here
   (this file is not flipped by rtlcss; the flipped copy moved the rows off screen and the strip looked empty).
   The title and the count above stay right to left. */
html[dir="rtl"] .dq-marquee__row {
	direction: ltr;
}
html[dir="rtl"] body[class] .dq-marquee__track {
	animation-name: dq-marquee-ar;
}
@keyframes dq-marquee-ar {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Brand header photo in Arabic: on the left, fading towards the text on the right (rtlcss does not turn
   gradient directions). */
@media (min-width: 720px) {
	html[dir="rtl"] body.dq-band-photo .dq-shop .dq-band__photo {
		-webkit-mask-image: linear-gradient(to left, transparent 0, #000 22%);
		mask-image: linear-gradient(to left, transparent 0, #000 22%);
	}
}

/* Home slider in Arabic. The photos are not flipped (they carry labels and their own text), so each slide keeps
   the layout it was designed for: the text sits where the photo leaves room (home.css slider rules are excluded
   from rtlcss). The strip scrolls left to right like a film strip (the slider script counts that way); the text
   inside each slide reads right to left. */
html[dir="rtl"] .dq-slider__track {
	direction: ltr;
}
html[dir="rtl"] .dq-slide__content {
	direction: rtl;
}