/**
 * HomeTech product page, from the Canva design "نسخة احترافية متكاملة".
 *
 * The post is 100cqi wide and every position is the design's, in percent of
 * its width (design px / 7.94), measured from the left as in the design.
 * Simple and variable products use those fixed positions (variable products
 * add their options below the buttons, .ht-pdp--variable); grouped and
 * external products (.ht-pdp--flow) keep the same look in normal flow.
 * The design rules are written down in docs/product-page-design.md.
 * Rules that must beat Astra's WooCommerce styles start with ".ht-pdp-wrap .ht-pdp",
 * or with "div.product" where Astra's own rule does.
 */

/* Lalezar, self-hosted (SIL Open Font License): the design's display font. */
@font-face {
	font-family: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-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: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-latin.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;
}

/* ---------- Page: the post replaces the image + summary columns ---------- */

.ht-pdp-product > .summary {
	float: none;
	clear: both;
	inline-size: auto;
	max-inline-size: 736px;
	margin-inline: auto;
}

.ht-pdp-product > .summary:not(:has(*)) {
	display: none;
}

/* Less of Astra's empty space above the post. */
body.ast-separate-container.single-product #primary:has(.ht-pdp-wrap) {
	margin-block-start: 24px;
}

.ast-separate-container .ast-woocommerce-container:has(.ht-pdp-wrap) {
	padding-block-start: 24px;
}

/*
 * Phones and tablets: the post fills the white box edge to edge, so it (and
 * every size inside it) grows with the screen.
 */
@media (max-width: 921px) {
	body.ast-separate-container.single-product #primary:has(.ht-pdp-wrap) {
		margin-block-start: 10px;
	}

	.ast-separate-container .ast-woocommerce-container:has(.ht-pdp-wrap) {
		padding-block-start: 0;
		padding-inline: 0;
	}

	/* What comes before and after the post keeps its side padding. */
	.ast-woocommerce-container:has(.ht-pdp-wrap) > .woocommerce-notices-wrapper,
	.ht-pdp-product > :not(.ht-pdp-wrap) {
		padding-inline: 1em;
	}
}

/* 736px puts the main image at WooCommerce's 600px single image width. */
.ht-pdp-wrap {
	--ht-orange: #e2803f;
	--ht-cream: #fbf5f3;
	--ht-ink: #161616;
	--ht-gray: #f0f0f0;
	--ht-red: #e10600;
	--ht-teal: #2e7d72;
	--ht-peach: #ff9e60;
	--ht-whatsapp: #25d366;
	--ht-telegram: #229ed9;
	--ht-font: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--ht-display: "HT Lalezar", "HT Cairo", system-ui, sans-serif;
	--ht-line: max(2px, 0.42cqi);

	container-type: inline-size;
	clear: both;
	inline-size: 100%;
	max-inline-size: 736px;
	margin: 0 auto 32px;
	overflow-x: clip;
}

.ht-pdp {
	position: relative;
	box-sizing: border-box;
	padding-block-end: 4cqi;
	background: var(--ht-cream);
	border: var(--ht-line) solid var(--ht-orange);
	color: var(--ht-ink);
	font-family: var(--ht-font);
	line-height: 1.4;
	text-align: start;
}

.ht-pdp *,
.ht-pdp *::before,
.ht-pdp *::after {
	box-sizing: border-box;
}

.ht-pdp :is(a, button):focus-visible {
	outline: 2px solid var(--ht-ink);
	outline-offset: 2px;
}

/* ---------- Top: price tag, share, contact ---------- */

/*
 * The share pill sits where the design has it (right edge at 77.4cqi); a long
 * price pushes it to the right instead of running under it.
 */
.ht-pdp__top {
	position: relative;
	display: flex;
	align-items: flex-start;
	block-size: 17.4cqi;
}

.ht-pdp__price {
	position: relative;
	z-index: 0;
	flex: none;
	margin: 2.6cqi 0 0 3.4cqi;
	padding: 1.9cqi 4.6cqi;
	color: #fff;
	font-size: 7.4cqi;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

/* Same slanted tag with an offset outline as the product card. */
.ht-pdp__price::before,
.ht-pdp__price::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ht-orange);
	transform: skewX(-12deg) rotate(-2deg);
}

.ht-pdp__price::after {
	inset: 1cqi -1.2cqi -1.2cqi 1cqi;
	z-index: -2;
	background: none;
	border: 1px solid var(--ht-ink);
	transform: skewX(-12deg) rotate(1.5deg);
}

div.product .ht-pdp-wrap .ht-pdp__price .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15em;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

div.product .ht-pdp-wrap .ht-pdp__price del {
	color: inherit;
	font-size: 0.45em;
	font-weight: 600;
	opacity: 0.9;
}

/* A price range ("120 – 160") stays on one line, smaller, until a variation is chosen. */
div.product .ht-pdp-wrap .ht-pdp__price .price:has(> .woocommerce-Price-amount ~ .woocommerce-Price-amount) {
	display: block;
	font-size: 0.5em;
}

div.product .ht-pdp-wrap .ht-pdp__price ins {
	color: inherit;
	background: none;
	text-decoration: none;
}

div.product .ht-pdp-wrap .ht-pdp__price .woocommerce-Price-amount {
	color: inherit;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__share {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 1.6cqi;
	min-inline-size: 28cqi;
	block-size: 9.2cqi;
	margin: 4cqi 22.6cqi 0 auto;
	padding: 0 4cqi;
	background: var(--ht-gray);
	border: 0;
	border-radius: 999px;
	color: var(--ht-ink);
	font: 600 max(13px, 4.2cqi) / 1 var(--ht-font);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__share:is(:hover, :focus-visible) {
	background: #e4e4e4;
	color: var(--ht-ink);
}

.ht-pdp__share .ht-card__icon {
	inline-size: 1.5em;
	block-size: 1.5em;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__contact {
	position: absolute;
	inset-block-start: 2.2cqi;
	right: 2.4cqi;
	display: grid;
	place-items: center;
	inline-size: 13cqi;
	aspect-ratio: 1;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 0 0 1cqi #fff, 0 2px 8px rgb(0 0 0 / 0.12);
	transition: transform 0.15s ease;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__contact:is(:hover, :focus-visible) {
	color: #fff;
	transform: scale(1.06);
}

.ht-pdp__contact .ht-card__icon {
	inline-size: 58%;
	block-size: 58%;
	fill: currentColor;
	stroke: none;
}

.ht-pdp__contact--whatsapp {
	background: var(--ht-whatsapp);
}

.ht-pdp__contact--telegram {
	background: var(--ht-telegram);
}

.ht-pdp__contact--instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.ht-pdp__contact--phone {
	background: #16a34a;
}

.ht-pdp__contact--youtube {
	background: #f00;
}

/* Several channels: the icon stays in its corner; its list opens below it (product-card.css). */
.ht-pdp__top .ht-contact {
	position: static;
}

.ht-pdp__top .ht-contact__menu {
	inset-block-start: 18cqi;
	inset-inline-end: auto;
	right: 2.4cqi;
	z-index: 5;
}

.ht-pdp__top .ht-contact__menu::before {
	inset-inline-end: auto;
	right: 4.5cqi;
}

/* ---------- Image slider in the white frame ---------- */

/* WooCommerce's sale badge on the image's top left corner, like on the product card. */
div.product .ht-pdp-wrap .ht-pdp__frame :is(.onsale, .ast-onsale-card) {
	position: absolute;
	inset: 4cqi auto auto 4cqi;
	z-index: 2;
	min-inline-size: 0;
	min-block-size: 0;
	margin: 0;
	padding: 0.3em 0.9em;
	background: var(--ht-red);
	border-radius: 999px;
	color: #fff;
	font: 700 max(12px, 3.4cqi) / 1.4 var(--ht-font);
}

.ht-pdp__frame {
	position: relative;
	margin: 0 5.3cqi 0 7.3cqi;
	padding: 2.1cqi 2.1cqi 4.6cqi;
	background: #fff;
	border: var(--ht-line) solid var(--ht-orange);
}

.ht-pdp__slides {
	display: flex;
	aspect-ratio: 3 / 4;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	background: #f6efec;
	border-radius: 0 0 1.7cqi 1.7cqi;
}

.ht-pdp__slides::-webkit-scrollbar {
	display: none;
}

.ht-pdp__slides:focus-visible {
	outline: 2px solid var(--ht-ink);
	outline-offset: 2px;
}

.ht-pdp__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.ht-pdp-wrap .ht-pdp__slide img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	object-fit: cover;
}

/* Arrows: centred on the image (the frame's bottom border is wider than its top). */
.ht-pdp-wrap .ht-pdp .ht-pdp__nav {
	position: absolute;
	inset-block-start: calc(50% - 1.25cqi);
	display: grid;
	place-items: center;
	inline-size: max(34px, 7.5cqi);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	background: rgb(255 255 255 / 0.85);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 6px rgb(0 0 0 / 0.15);
	color: var(--ht-orange);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__nav:is(:hover, :focus-visible) {
	background: #fff;
	color: var(--ht-orange);
}

.ht-pdp__nav::before {
	content: "";
	inline-size: 32%;
	aspect-ratio: 1;
	border: solid currentColor;
	border-width: 0 0 3px 3px;
	translate: 15% 0;
	rotate: 45deg;
}

.ht-pdp__nav--prev {
	left: 3.4cqi;
}

.ht-pdp__nav--next {
	right: 3.4cqi;
}

.ht-pdp__nav--next::before {
	translate: -15% 0;
	rotate: -135deg;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/*
 * Zoom button: the image's free top-right corner, in the arrows' style (white
 * circle, orange icon). Opens the full-screen viewer below; tapping the image
 * does the same.
 */
.ht-pdp-wrap .ht-pdp .ht-pdp__zoom {
	position: absolute;
	inset-block-start: 4cqi;
	right: 4cqi;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: max(34px, 7.5cqi);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	background: rgb(255 255 255 / 0.85);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 6px rgb(0 0 0 / 0.15);
	color: var(--ht-orange);
	cursor: zoom-in;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__zoom:is(:hover, :focus-visible) {
	background: #fff;
	color: var(--ht-orange);
}

.ht-pdp__zoom svg {
	inline-size: 52%;
	block-size: 52%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.ht-pdp__slide img {
	cursor: zoom-in;
}

/* ---------- Full-screen image viewer (built by product-page.js) ---------- */

.ht-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	background: rgb(12 12 12 / 0.96);
	overscroll-behavior: contain;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.ht-viewer[hidden] {
	display: none;
}

.ht-viewer__track {
	display: flex;
	block-size: 100%;
	will-change: transform;
}

.ht-viewer__track.is-animating {
	transition: transform 0.28s ease;
}

/* Flex, not grid: the image's max-block-size needs the slide's definite height. */
.ht-viewer__slide {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ht-viewer .ht-viewer__img {
	display: block;
	flex: none;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 100%;
	margin: 0;
	object-fit: contain;
	transform-origin: center;
	-webkit-user-drag: none;
}

.ht-viewer__img.is-animating {
	transition: transform 0.25s ease;
}

/* Two classes: Astra's button:focus / button:hover rules must not paint these. */
.ht-viewer .ht-viewer__btn {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	background: rgb(255 255 255 / 0.14);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ht-viewer .ht-viewer__btn:is(:hover, :focus-visible) {
	background: rgb(255 255 255 / 0.28);
	color: #fff;
}

.ht-viewer__btn svg {
	inline-size: 22px;
	block-size: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ht-viewer .ht-viewer__close {
	inset-block-start: max(12px, env(safe-area-inset-top));
	right: 12px;
}

.ht-viewer .ht-viewer__prev,
.ht-viewer .ht-viewer__next {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.ht-viewer .ht-viewer__prev {
	right: 12px;
}

.ht-viewer .ht-viewer__next {
	left: 12px;
}

.ht-viewer .ht-viewer__btn[disabled] {
	opacity: 0;
	pointer-events: none;
}

.ht-viewer__count {
	position: absolute;
	inset-block-start: max(22px, calc(env(safe-area-inset-top) + 10px));
	left: 50%;
	margin: 0;
	color: #fff;
	font: 600 15px / 1 var(--ht-font, system-ui);
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
	transform: translateX(-50%);
	direction: ltr;
}

/* Phones swipe; the side arrows are for mouse users. */
@media (hover: none) {
	.ht-viewer .ht-viewer__prev,
	.ht-viewer .ht-viewer__next {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ht-viewer__track.is-animating,
	.ht-viewer__img.is-animating {
		transition: none;
	}
}

/* ---------- Like, comments, "في سلة", bag and "شراء" ---------- */

/*
 * The top 23.2cqi of the stage holds the buttons at their fixed places; anything
 * WooCommerce adds in flow (stock line, variation options) comes below them.
 * On phones it is a little taller where needed, so the 35px cart button keeps a gap above the thumbnails.
 */
.ht-pdp__actions {
	position: relative;
	padding: max(23.2cqi, calc(14.35cqi + 35px)) 4.2cqi 0;
}

.ht-pdp-wrap .ht-pdp__actions form.cart {
	display: contents;
}

/*
 * Like pill and comments bubble on one row, centred on each other; the bubble
 * follows the pill however long the count gets.
 */
.ht-pdp__social {
	position: absolute;
	inset-block-start: 0.9cqi;
	left: 4.2cqi;
	display: flex;
	align-items: center;
	gap: 3.4cqi;
}

/* White pill with the thumb and count where the design has them. */
.ht-pdp__vote {
	display: flex;
	align-items: center;
	min-inline-size: 26cqi;
	block-size: 8.4cqi;
	min-block-size: 0;
	padding: 0 4.6cqi;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 0.3cqi 1.4cqi rgb(204 160 140 / 0.18);
}

.ht-pdp-wrap .ht-pdp .ht-card__like {
	display: inline-flex;
	align-items: center;
	gap: 3.6cqi;
	block-size: 100%;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--ht-orange);
	font: 600 max(14px, 5.3cqi) / 1 var(--ht-font);
	cursor: pointer;
	touch-action: manipulation;
}

.ht-pdp-wrap .ht-pdp .ht-card__like:is(:hover, :focus-visible) {
	background: none;
	color: #c9652a;
}

.ht-pdp-wrap .ht-pdp .ht-card__like[aria-pressed="true"] {
	color: var(--ht-red);
}

.ht-pdp__vote .ht-card__icon {
	inline-size: 1.2em;
	block-size: 1.2em;
}

/*
 * Round outline speech bubble, tail at the bottom right; the count sits inside,
 * close to the like count's size. Longer counts (125, 1.2K) step down so they
 * stay inside the bubble (data-len: the count's length in characters).
 */
.ht-pdp-wrap .ht-pdp .ht-pdp__comments {
	display: grid;
	place-items: center;
	inline-size: 11.4cqi;
	aspect-ratio: 1;
	color: var(--ht-orange);
	font: 700 max(14px, 4.4cqi) / 1 var(--ht-font);
	text-decoration: none;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__comments:is(:hover, :focus-visible) {
	color: #c9652a;
}

.ht-pdp__comments > * {
	grid-area: 1 / 1;
}

.ht-pdp__comments .ht-card__icon {
	inline-size: 100%;
	block-size: 100%;
	stroke-width: 1.2;
	transform: scaleX(-1);
}

.ht-pdp__comments span {
	margin-block-end: 0.3em;
	white-space: nowrap;
}

/* 100 and more: the bubble grows around its centre, so the row keeps its height. */
.ht-pdp-wrap .ht-pdp .ht-pdp__comments:has(span[data-len="3"]) {
	inline-size: 13.6cqi;
	margin-block: -1.1cqi;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__comments:has(span[data-len="4"]) {
	inline-size: 14.8cqi;
	margin-block: -1.7cqi;
}

/* Same line weight as the usual bubble. */
.ht-pdp__comments:has(span[data-len="3"]) .ht-card__icon {
	stroke-width: 1;
}

.ht-pdp__comments:has(span[data-len="4"]) .ht-card__icon {
	stroke-width: 0.92;
}

.ht-pdp__comments span[data-len="3"] {
	font-size: max(12px, 3.8cqi);
}

.ht-pdp__comments span[data-len="4"] {
	font-size: max(11px, 3.4cqi);
	letter-spacing: -0.03em;
}

.ht-pdp-wrap .ht-pdp__actions .quantity {
	display: none;
}

/* WooCommerce's stock line ("3 in stock", backorders), under the buttons. */
.ht-pdp-wrap .ht-pdp__actions .stock:not(.out-of-stock) {
	margin: 0 0 1.5cqi;
	direction: rtl;
	color: var(--ht-teal);
	font: 600 max(13px, 3.4cqi) / 1.4 var(--ht-font);
}

/*
 * White pill with a soft shadow, a thin orange edge and a cart before the words,
 * right under the like pill and the same width (left 4.2, 26 wide), so it never
 * reaches the comments bubble. 35px tall on phones (an easier tap); the top
 * stays where it was and it grows downwards.
 */
div.product .ht-pdp-wrap .ht-pdp form.cart .single_add_to_cart_button.button {
	position: absolute;
	inset-block-start: 12.85cqi;
	left: 4.2cqi;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4cqi;
	inline-size: 26cqi;
	min-inline-size: 0;
	block-size: max(7.4cqi, 35px);
	min-block-size: 0;
	margin: 0;
	padding: 0 1cqi 0.4cqi;
	background: #fff;
	border: max(1.5px, 0.3cqi) solid var(--ht-orange);
	border-radius: 999px;
	box-shadow: 0 0.3cqi 1.4cqi rgb(204 160 140 / 0.18);
	color: #ec7a34;
	font: 400 5.2cqi / 1 var(--ht-display);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	direction: rtl;
}

/* The owner's cart drawing (assets/images/cart-icon.svg), as drawn; external products link elsewhere, so no cart there. */
div.product .ht-pdp-wrap .ht-pdp:not(.ht-pdp--external) form.cart .single_add_to_cart_button.button::before {
	content: "";
	flex: none;
	inline-size: 1.1em;
	block-size: 1.1em;
	/* The button's bottom padding lifts the Lalezar words; this keeps the drawing centred in the pill. */
	margin-block-start: 0.8cqi;
	background: currentColor;
	-webkit-mask: url("../images/cart-icon.svg") center / contain no-repeat;
	mask: url("../images/cart-icon.svg") center / contain no-repeat;
}

div.product .ht-pdp-wrap .ht-pdp form.cart .single_add_to_cart_button.button:is(:hover, :focus-visible) {
	background: #fff8f3;
	color: #d9651f;
}

div.product .ht-pdp-wrap .ht-pdp form.cart .single_add_to_cart_button.button:active {
	box-shadow: 0 0.1cqi 0.6cqi rgb(204 160 140 / 0.18);
	transform: translateY(0.3cqi);
}

div.product .ht-pdp-wrap .ht-pdp form.cart .single_add_to_cart_button.button:is(.disabled, :disabled) {
	opacity: 0.55;
}

/* The arm holding the bag from the design, behind the right-hand button's end. */
.ht-pdp__bag {
	position: absolute;
	inset-block-start: 0.6cqi;
	left: 87.6cqi;
	inline-size: 11.6cqi;
	aspect-ratio: 240 / 282;
	background: url("../images/cart-bag.webp") center / contain no-repeat;
	pointer-events: none;
}

/* The hand gives the bag a little swing when either button is used. */
.ht-pdp__actions:has(:is(.single_add_to_cart_button, .ht-pdp__buy):is(:hover, :active)) .ht-pdp__bag {
	transform-origin: 50% 10%;
	animation: ht-pdp-bag-swing 0.7s ease;
}

@keyframes ht-pdp-bag-swing {
	30% {
		rotate: -8deg;
	}

	60% {
		rotate: 6deg;
	}
}

/* "شراء": an orange ring around a raised pale key, centred where the design has the cart button. */
.ht-pdp-wrap .ht-pdp .ht-pdp__buy {
	position: absolute;
	inset-block-start: 4.15cqi;
	left: 63.5cqi;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 26cqi;
	block-size: 12.7cqi;
	margin: 0;
	padding: 0;
	background: none;
	border: max(1px, 0.17cqi) solid var(--ht-peach);
	border-radius: 3.4cqi;
	box-shadow: none;
	color: #ff6300;
	font: 400 9.5cqi / 1 var(--ht-display);
	cursor: pointer;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__buy::before {
	content: "";
	position: absolute;
	inset: 1.5cqi 1.6cqi;
	background: #fcf7f6;
	border-radius: 2.2cqi;
	box-shadow: 0 0.8cqi 1.4cqi rgb(120 90 80 / 0.28), 0 0 0.4cqi rgb(120 90 80 / 0.12);
	transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.ht-pdp__buy span {
	position: relative;
	margin-block-start: -0.6cqi;
	white-space: nowrap;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__buy:is(:hover, :focus-visible) {
	background: none;
	color: #e55900;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__buy:active::before {
	box-shadow: 0 0.2cqi 0.6cqi rgb(120 90 80 / 0.28);
	transform: translateY(0.4cqi);
}

/*
 * Out of stock: WooCommerce's notice takes the cart button's place. It stays
 * between that place and the bag, on two lines when it needs them, so its
 * first word («غير») is never hidden under the bag.
 */
.ht-pdp-wrap .ht-pdp__actions > .stock.out-of-stock {
	position: absolute;
	inset-block-start: 6.8cqi;
	left: 58cqi;
	inline-size: 29.6cqi;
	margin: 0;
	direction: rtl;
	color: var(--ht-red);
	font: 400 5cqi / 1.2 var(--ht-display);
	text-align: center;
	text-wrap: balance;
}

/* ---------- Name line ---------- */

.ht-pdp__caption {
	margin: -0.6cqi 4cqi 0;
	color: var(--ht-orange);
	font: 500 max(14px, 3.3cqi) / 1.3 var(--ht-font);
	text-align: center;
}

/* Under the thumbnails, at the owner's request; a product with no image keeps the name close to the buttons. */
.ht-pdp__thumbs + .ht-pdp__caption {
	margin-block-start: 1.6cqi;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__title.product_title {
	display: inline;
	margin: 0;
	padding: 0;
	color: var(--ht-orange);
	/* Chosen under WooCommerce → بطاقة المنتج (class-hometech-title-font.php); Lalezar by default. */
	font: var(--ht-title-weight, 400) 1.55em / 1.35 var(--ht-title-font, var(--ht-display));
	letter-spacing: 0;
	text-transform: none;
}

.ht-pdp__tagline {
	color: #c47a4e;
}

/* WooCommerce's stars and review count, under the name once there are ratings. */
.ht-pdp-wrap .ht-pdp__caption .woocommerce-product-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5cqi;
	margin: 0.6cqi 0 0;
	font-size: max(13px, 3cqi);
}

.ht-pdp-wrap .ht-pdp__caption .star-rating {
	float: none;
	margin: 0;
	color: var(--ht-orange);
}

.ht-pdp-wrap .ht-pdp__caption .woocommerce-review-link {
	color: var(--ht-teal);
	text-decoration: none;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__tag {
	color: var(--ht-teal);
	font-weight: 700;
	text-decoration: none;
	unicode-bidi: isolate;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__tag:is(:hover, :focus-visible) {
	color: var(--ht-ink);
}

/* ---------- Thumbnails ---------- */

.ht-pdp__thumbs {
	display: flex;
	gap: 2.8cqi;
	margin-block-start: 0.8cqi;
	padding: 0.4cqi 3.2cqi 1cqi 4.4cqi;
	overflow-x: auto;
	/* Snap thumbnails to the row's padding, not its edge, so the first one keeps the design's inset. */
	scroll-padding-inline: 4.4cqi 3.2cqi;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.ht-pdp__thumbs::-webkit-scrollbar {
	display: none;
}

/* As in the design: a rounded photo inside a thin white rim, a pale outline and a soft shadow. */
.ht-pdp-wrap .ht-pdp .ht-pdp__thumb {
	flex: 0 0 21cqi;
	aspect-ratio: 167 / 129;
	margin: 0;
	padding: 0.3cqi;
	overflow: hidden;
	background: #fff;
	border: 1px solid #ddd0ca;
	border-radius: 1.5cqi;
	box-shadow: 0.2cqi 0.35cqi 0.7cqi rgb(120 90 80 / 0.22);
	cursor: pointer;
	scroll-snap-align: start;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ht-pdp-wrap .ht-pdp .ht-pdp__thumb:is(:hover, :focus-visible) {
	background: #fff;
	transform: translateY(-0.3cqi);
}

/* The image showing above gets an orange ring. */
.ht-pdp-wrap .ht-pdp .ht-pdp__thumb[aria-current="true"] {
	box-shadow: 0 0 0 max(1.5px, 0.25cqi) var(--ht-orange), 0.2cqi 0.35cqi 0.7cqi rgb(120 90 80 / 0.22);
}

.ht-pdp-wrap .ht-pdp__thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	border-radius: 1.2cqi;
	object-fit: cover;
}

/* ---------- Service badges ---------- */

/*
 * Two pills side by side under the images: what the customer gains, said
 * clearly. Each carries a small icon; the first is a light cream pill with an
 * orange ring, the second a warm orange fill, both with a soft shadow.
 * v78: the row sits as far in from the frame as the order form (4.3cqi), and
 * the words are in the FAQ questions' font (HT Cairo 700), not Lalezar.
 */
.ht-pdp__badges {
	display: flex;
	align-items: stretch;
	gap: 2.2cqi;
	margin: 5cqi 4.3cqi 0;

	/* Longer words shrink to stay on one line: these over their length (--n) give the size. */
	--ht-badge-k1: 38cqi;
	--ht-badge-k2: 74cqi;
}

.ht-pdp__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4cqi;
	min-inline-size: 0;
	block-size: 11cqi;
	padding: 0 2.6cqi;
	border-radius: 999px;
	box-shadow: 0 0.8cqi 2.4cqi rgb(226 128 63 / 0.18);
	font-family: var(--ht-font);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.ht-pdp__badge::before {
	content: "";
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
	background: currentColor;
	-webkit-mask: var(--ht-badge-icon) center / contain no-repeat;
	mask: var(--ht-badge-icon) center / contain no-repeat;
}

.ht-pdp__badge--outline {
	--ht-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.4 7.5 9.5 4.3-1.1 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m8.5 12 2.4 2.4L15.6 9.7'/%3E%3C/svg%3E");

	flex: 1.56 1 0;
	background: #fff8f3;
	border: max(1.5px, 0.3cqi) solid var(--ht-orange);
	color: #d9662a;
	font-size: 3.7cqi;
}

.ht-pdp__badge--fill {
	--ht-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5h12v11h-12zM13.5 9h4.5l3.5 3.5V16h-8'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Ccircle cx='17.5' cy='18' r='1.8'/%3E%3C/svg%3E");

	flex: 1 1 0;
	background: linear-gradient(135deg, var(--ht-peach), var(--ht-orange));
	color: #fff;
	font-size: 4.2cqi;
}

/* The truck faces the way the text reads (RTL). */
[dir="rtl"] .ht-pdp__badge--fill::before {
	transform: scaleX(-1);
}

/*
 * The owner's own badges (HomeTech_Reels_Badge::pdp()), at the same size:
 * longer words shrink to stay on one line (--n, their length). The first is
 * the reels card's button: its colour (--ht-ship-bg, from a lighter shade to
 * it, as the peach to the orange), its icon drawn inline, and a button with a
 * little quill when it opens the quill's card.
 */
.ht-pdp__badge--outline.is-custom {
	font-size: min(3.7cqi, calc(var(--ht-badge-k2, 74cqi) / var(--n, 22)));
}

.ht-pdp__badge--fill.is-custom {
	color: var(--ht-ship-ink, #fff);
	font-size: min(4.2cqi, calc(var(--ht-badge-k1, 38cqi) / var(--n, 9)));
}

.ht-pdp__badge--fill.is-custom::before {
	content: none;
}

.ht-pdp__badge--fill.has-color {
	background: var(--ht-ship-bg);
}

@supports (background: color-mix(in srgb, red 50%, #fff)) {
	.ht-pdp__badge--fill.has-color {
		background: linear-gradient(135deg, color-mix(in srgb, var(--ht-ship-bg) 72%, #fff), var(--ht-ship-bg));
	}
}

.ht-pdp__badge-icon,
.ht-pdp__badge-pen {
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ht-pdp__badge-pen {
	inline-size: 0.95em;
	block-size: 0.95em;
}

[dir="rtl"] .ht-pdp__badge-icon[data-icon="truck"] {
	transform: scaleX(-1);
}

.ht-pdp__badge-text {
	min-inline-size: 0;
}

/* A badge that opens the quill's card: a button that looks the same (Astra's button style undone). */
div.product .ht-pdp-wrap .ht-pdp button.ht-pdp__badge--fill {
	position: relative;
	overflow: hidden;
	min-block-size: 0;
	block-size: 11cqi;
	margin: 0;
	padding: 0 2.6cqi;
	background: linear-gradient(135deg, var(--ht-peach), var(--ht-orange));
	border: 0;
	border-radius: 999px;
	box-shadow: 0 0.8cqi 2.4cqi rgb(226 128 63 / 0.18);
	color: var(--ht-ship-ink, #fff);
	font-family: var(--ht-font);
	font-size: min(4.2cqi, calc(var(--ht-badge-k1, 38cqi) / var(--n, 9)));
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;

	/* v78: it hops now and then (then the gleam crosses it): it opens a card. */
	animation: ht-pdp-bounce 4.5s ease-out 1.5s infinite;
}

div.product .ht-pdp-wrap .ht-pdp button.ht-pdp__badge--fill.has-color {
	background: var(--ht-ship-bg);
}

@supports (background: color-mix(in srgb, red 50%, #fff)) {
	div.product .ht-pdp-wrap .ht-pdp button.ht-pdp__badge--fill.has-color {
		background: linear-gradient(135deg, color-mix(in srgb, var(--ht-ship-bg) 72%, #fff), var(--ht-ship-bg));
	}
}

div.product .ht-pdp-wrap .ht-pdp button.ht-pdp__badge--fill:is(:hover, :focus) {
	color: var(--ht-ship-ink, #fff);
}

@media (hover: hover) {
	div.product .ht-pdp-wrap .ht-pdp button.ht-pdp__badge--fill:hover {
		box-shadow: 0 1.2cqi 3cqi rgb(0 0 0 / 0.18);
		transform: translateY(-1px);
	}
}

div.product .ht-pdp-wrap .ht-pdp button.ht-pdp__badge--fill:focus-visible {
	outline: 2px solid #161616;
	outline-offset: 2px;
}

/* A gold gleam crosses it now and then: it can be pressed. */
div.product .ht-pdp-wrap .ht-pdp button.ht-pdp__badge--fill::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	inline-size: 40%;
	background: linear-gradient(100deg, transparent, rgb(255 244 200 / 0.75), transparent);
	transform: translateX(-130%) skewX(-18deg);
	animation: ht-pdp-gleam 4.5s ease-in-out 1.5s infinite;
	pointer-events: none;
}

@keyframes ht-pdp-gleam {
	0%,
	70% {
		transform: translateX(-130%) skewX(-18deg);
	}

	100% {
		transform: translateX(330%) skewX(-18deg);
	}
}

/*
 * The hop (v78): up, down, a smaller hop, still; at the start of the gleam's
 * 4.5s, so the gleam crosses it once it is still. `translate`, not
 * `transform`, so the hover lift stays as it was.
 */
@keyframes ht-pdp-bounce {
	0%,
	24%,
	100% {
		translate: 0 0;
	}

	6% {
		translate: 0 -0.34em;
	}

	12% {
		translate: 0 0;
	}

	17% {
		translate: 0 -0.15em;
	}
}

/* ---------- WooCommerce description ---------- */

.ht-pdp__desc {
	margin-block: 8cqi -4cqi;
	padding: 1.2cqi 2.5cqi 6cqi;
	border-block-start: var(--ht-line) solid var(--ht-orange);
	font: 700 clamp(15px, 3.6cqi, 27px) / 1.45 var(--ht-font);
	text-align: center;
}

.ht-pdp__desc-text > :first-child {
	margin-block-start: 0;
}

.ht-pdp__desc-text > :last-child {
	margin-block-end: 0;
}

.ht-pdp__desc-text :is(p, ul, ol) {
	margin: 0 0 0.7em;
}

.ht-pdp__desc-text :is(ul, ol) {
	display: inline-block;
	text-align: start;
}

/* WooCommerce's short description, above the full one. */
.ht-pdp__desc .woocommerce-product-details__short-description {
	margin-block-end: 1em;
	font-weight: 600;
}

.ht-pdp__desc .woocommerce-product-details__short-description > :last-child {
	margin-block-end: 0;
}

/* SKU, categories and tags, small at the end of the post. */
.ht-pdp-wrap .ht-pdp__desc .product_meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3em 1.4em;
	margin: 5cqi 0 0;
	padding: 0;
	border: 0;
	color: #6b5a50;
	font-size: max(13px, 0.6em);
	font-weight: 500;
}

.ht-pdp-wrap .ht-pdp__desc .product_meta a {
	color: var(--ht-teal);
	text-decoration: none;
}

.ht-pdp-wrap .ht-pdp__desc .shop_attributes {
	inline-size: 100%;
	margin: 5cqi 0 0;
	font-size: max(14px, 0.75em);
	font-weight: 500;
}

/* ---------- Variable products: the same fixed buttons, options underneath ---------- */

/*
 * The like row, the cart button, "شراء" and the bag keep the simple product's
 * exact places in the top 23.2cqi of the stage. WooCommerce's options, the
 * variation price and its stock line flow below them. The wrappers WooCommerce
 * puts around the buttons are display: contents (forced, as its script toggles
 * them with inline styles) so the buttons still measure from the stage.
 */
.ht-pdp--variable .ht-pdp__actions {
	block-size: auto;
	padding: max(23.2cqi, calc(14.35cqi + 35px)) 4.2cqi 0;
}

.ht-pdp-wrap .ht-pdp--variable :is(.single_variation_wrap, .woocommerce-variation-add-to-cart) {
	display: contents !important;
}

.ht-pdp-wrap .ht-pdp--variable :is(table.variations, .woocommerce-variation, .ht-pdp__chosen-price) {
	direction: rtl;
	font-family: var(--ht-font);
}

.ht-pdp-wrap .ht-pdp--variable table.variations {
	margin: 0 0 1cqi;
}

/*
 * Each option (colour, size...) on its own row, its choices sharing the row in
 * equal white pills like the like button; the chosen one gets an orange ring.
 */
div.product .ht-pdp-wrap .ht-pdp--variable table.variations :is(tbody, tr, td.value) {
	display: block;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.ht-pdp-wrap .ht-pdp--variable .cfvsw-swatches-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 2.4cqi;
	inline-size: 100%;
	margin: 0 0 2.4cqi;
}

.ht-pdp-wrap .ht-pdp--variable .cfvsw-swatches-option {
	display: grid;
	flex: 1 1 0;
	place-items: center;
	min-inline-size: 0;
	block-size: 9cqi;
	margin: 0;
	padding: 0 2cqi;
	background: #fff;
	border: max(1.5px, 0.25cqi) solid transparent;
	border-radius: 999px !important; /* The plugin sets 3px inline. */
	box-shadow: 0 0.3cqi 1.4cqi rgb(204 160 140 / 0.18);
	color: var(--ht-ink);
	font: 600 max(14px, 4.4cqi) / 1 var(--ht-font);
}

/* The plugin draws its own 1px black frame on the chosen swatch. */
.ht-pdp-wrap .ht-pdp--variable .cfvsw-swatches-option.cfvsw-selected-swatch {
	border: max(1.5px, 0.25cqi) solid var(--ht-orange) !important;
	color: var(--ht-orange);
}

/*
 * Colour options (product-page.js recognises names like «أحمر» or "Green"):
 * the name is written in its colour with a small dot of it, and the chosen
 * one gets a ring and a light tint of that colour instead of orange. Light
 * colours (white, beige…) keep dark text so they stay readable.
 */
.ht-pdp-wrap .ht-pdp--variable .cfvsw-swatches-option.ht-swatch-color {
	color: var(--ht-swatch-ink);
}

.ht-pdp-wrap .ht-pdp--variable .ht-swatch-color .cfvsw-swatch-inner::before {
	content: "";
	display: inline-block;
	inline-size: 0.75em;
	block-size: 0.75em;
	margin-inline-end: 0.4em;
	background: var(--ht-swatch);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
	vertical-align: -0.05em;
}

.ht-pdp-wrap .ht-pdp--variable .cfvsw-swatches-option.ht-swatch-color.cfvsw-selected-swatch {
	border-color: var(--ht-swatch-ink) !important;
	background: color-mix(in srgb, var(--ht-swatch) 12%, #fff);
	color: var(--ht-swatch-ink);
}

/* The same colours on the colour choices of the COD order form. */
.htcod .htcod__pill.ht-swatch-color span {
	color: var(--ht-swatch-ink);
}

.htcod .htcod__pill.ht-swatch-color span::before {
	content: "";
	display: inline-block;
	inline-size: 0.75em;
	block-size: 0.75em;
	margin-inline-end: 0.4em;
	background: var(--ht-swatch);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
	vertical-align: -0.05em;
}

.htcod .htcod__pill.ht-swatch-color input:checked + span {
	border-color: var(--ht-swatch-ink);
	background: color-mix(in srgb, var(--ht-swatch) 12%, #fff);
	box-shadow: 0 0 0 1px var(--ht-swatch-ink);
	color: var(--ht-swatch-ink);
}

/*
 * The chosen price, under «إزالة»: a green tag (product-page.js), in place of
 * WooCommerce's own, which waits for every option and slides in late.
 */
.ht-pdp-wrap .ht-pdp--variable .woocommerce-variation-price {
	display: none;
}

div.product .ht-pdp-wrap .ht-pdp--variable .ht-pdp__chosen-price .price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15em 0.5em;
	margin: 1cqi 0 2.4cqi;
	padding: 1.2cqi 4cqi;
	background: #eaf6ec;
	border: max(1.5px, 0.25cqi) solid #2e8b3d;
	border-radius: 999px;
	box-shadow: 0 0.3cqi 1.4cqi rgb(46 139 61 / 0.18);
	color: #2e8b3d;
	font: 800 max(20px, 6.4cqi) / 1.2 var(--ht-font);
}

div.product .ht-pdp-wrap .ht-pdp--variable .ht-pdp__chosen-price :is(ins, .woocommerce-Price-amount) {
	color: inherit;
	background: none;
	text-decoration: none;
}

div.product .ht-pdp-wrap .ht-pdp--variable .ht-pdp__chosen-price del {
	color: #8a8a8a;
	font-size: 0.6em;
	font-weight: 600;
	text-decoration: line-through;
	opacity: 1;
}

div.product .ht-pdp-wrap .ht-pdp--variable .ht-pdp__chosen-price del .woocommerce-Price-amount {
	color: inherit;
	text-decoration: line-through;
}

/* WooCommerce's variation script shows the quantity with an inline style when a variation is chosen. */
.ht-pdp-wrap .ht-pdp .variations_form .quantity {
	display: none !important;
}

/* ---------- Grouped and external products: the same fixed buttons ---------- */

/* Grouped: the list of products with their quantities comes below the buttons. */
.ht-pdp-wrap .ht-pdp--grouped .woocommerce-grouped-product-list {
	inline-size: 100%;
	margin: 0 0 2cqi;
	direction: rtl;
	font-family: var(--ht-font);
}

.ht-pdp-wrap .ht-pdp--grouped .ht-pdp__actions .grouped_form .quantity {
	display: inline-flex;
}

/* External: one button to the other shop at the cart button's place, as wide as its own text. */
div.product .ht-pdp-wrap .ht-pdp--external form.cart .single_add_to_cart_button.button {
	inline-size: auto;
	min-inline-size: 29.6cqi;
	padding-inline: 3cqi;
}

/* No "شراء" on external products, so no bag hanging from it. */
.ht-pdp--external .ht-pdp__bag {
	display: none;
}

/* ---------- Other product types: same look, in normal flow ---------- */

.ht-pdp--flow .ht-pdp__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3cqi;
	block-size: auto;
	padding: 2.4cqi 4.2cqi 0;
}

.ht-pdp--flow .ht-pdp__social {
	position: static;
}

.ht-pdp--flow .ht-pdp__bag {
	display: none;
}

/* The options and buttons read right to left, like the rest of the Arabic text. */
.ht-pdp-wrap .ht-pdp--flow .ht-pdp__actions form.cart {
	display: block;
	flex-basis: 100%;
	margin: 0;
	direction: rtl;
}

.ht-pdp--flow :is(.woocommerce-variation-add-to-cart, .woocommerce-grouped-product-list + .single_add_to_cart_button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4cqi;
}

div.product .ht-pdp-wrap .ht-pdp--flow form.cart .single_add_to_cart_button.button,
.ht-pdp-wrap .ht-pdp--flow .ht-pdp__buy {
	position: relative;
	inset: auto;
}

/* Grouped products need a quantity per item; the others hide it as on simple products. */
.ht-pdp-wrap .ht-pdp--flow .ht-pdp__actions .grouped_form .quantity {
	display: inline-flex;
}

.ht-pdp--flow table.variations {
	margin-block-end: 2cqi;
	font-family: var(--ht-font);
}

.ht-pdp-wrap .ht-pdp--flow .ht-pdp__actions > .stock.out-of-stock {
	position: static;
	inline-size: auto;
	direction: inherit;
	text-align: start;
	text-wrap: wrap;
}

/* ---------- Reviews under the post ---------- */

.ht-pdp-reviews {
	clear: both;
	max-inline-size: 736px;
	margin: 0 auto 40px;
	font-family: "HT Cairo", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	.ht-pdp *,
	.ht-pdp *::before,
	.ht-pdp *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ */
/* French and English pages (v76): left to right                       */
/* ------------------------------------------------------------------ */

/* The page keeps its layout (the article is laid out left to right in every language); the texts set right to left here read left to right. */
:root:not([dir="rtl"]) .ht-pdp-wrap .ht-pdp__actions .stock:not(.out-of-stock),
:root:not([dir="rtl"]) div.product .ht-pdp-wrap .ht-pdp form.cart .single_add_to_cart_button.button,
:root:not([dir="rtl"]) .ht-pdp-wrap .ht-pdp__actions > .stock.out-of-stock,
:root:not([dir="rtl"]) .ht-pdp-wrap .ht-pdp--variable :is(table.variations, .woocommerce-variation, .ht-pdp__chosen-price),
:root:not([dir="rtl"]) .ht-pdp-wrap .ht-pdp--grouped .woocommerce-grouped-product-list,
:root:not([dir="rtl"]) .ht-pdp-wrap .ht-pdp--flow .ht-pdp__actions form.cart {
	direction: ltr;
}

/* In the viewer, «previous» is on the left and points left. */
:root:not([dir="rtl"]) .ht-viewer .ht-viewer__prev {
	right: auto;
	left: 12px;
}

:root:not([dir="rtl"]) .ht-viewer .ht-viewer__next {
	right: 12px;
	left: auto;
}

:root:not([dir="rtl"]) .ht-viewer :is(.ht-viewer__prev, .ht-viewer__next) svg {
	transform: scaleX(-1);
}

/* «Acheter» is longer than «شراء»: a smaller face so the word stays on the key, in its own case (not Astra's capitals). */
:root:not([dir="rtl"]) .ht-pdp-wrap .ht-pdp .ht-pdp__buy {
	font-size: 6cqi;
	text-transform: none;
}

:root:not([dir="rtl"]) .ht-pdp-wrap .ht-pdp .ht-pdp__share {
	text-transform: none;
}

/* «Au panier» is wider than «في سلة»: a little smaller so it stays in its pill. */
:root:not([dir="rtl"]) div.product .ht-pdp-wrap .ht-pdp form.cart .single_add_to_cart_button.button {
	font-size: 4.4cqi;
}

/* Latin letters are narrower than Arabic ones: the owner's own badge words, once translated, shrink less (v78). */
:root:not([dir="rtl"]) .ht-pdp__badges {
	--ht-badge-k1: 50cqi;
	--ht-badge-k2: 92cqi;
}