/**
 * Video card («بطاقة فيديو», "إطار المتجر"): a product's vertical video in the
 * store's cream card with the orange frame, in a horizontal swipeable row.
 *
 * - The row and its affordances (arrows, dots, hint, edge fade, phone
 *   full-bleed) come from product-scroll.css; here only the list itself, since
 *   it is not WooCommerce's `ul.products`.
 * - Each item is the size container: everything inside is in cqi. The card is
 *   about 80% of a phone's width (the next one peeks on the RTL left) and never
 *   taller than the screen leaves room for; about four fit a desktop row.
 * - ⤢ opens the viewer (.ht-vviewer, at the end): the whole video, with sound
 *   and a seek bar. YouTube / Vimeo cards (.is-embed) play in the card on a tap
 *   (.is-inline: their player over the picture, under our price, ⤢ and
 *   column as on every card, as the owner chose), and ⤢ opens it with their player.
 * - The like / comments / share / contact buttons are the product card's own
 *   markup (same scripts), restyled here as a column on the video's side.
 * - «شراء» is the product page's key (product-page.css .ht-pdp__buy), scaled to
 *   the card, with the same hanging bag.
 * - States come from video-card.js: is-playing, is-waiting, is-started,
 *   is-error, is-hearting.
 */

@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;
}

/* ---------- The row ---------- */

.ht-scroll ul.ht-vrow__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	margin: 0;
	padding: 4px 2px 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	list-style: none;
}

.ht-scroll ul.ht-vrow__row::-webkit-scrollbar {
	display: none;
}

/*
 * Card width: ~80% of a phone (the next card peeks), capped so the whole card
 * (9:16 video + name and «شراء») stays shorter than the screen; ~4 per desktop row.
 */
.ht-scroll ul.ht-vrow__row > li.ht-vrow__item {
	--ht-vw: clamp(270px, 24vw, 330px);

	container-type: inline-size;
	display: flex;
	flex: 0 0 var(--ht-vw);
	inline-size: var(--ht-vw);
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

@media (max-width: 767.98px) {
	.ht-scroll ul.ht-vrow__row {
		gap: 10px;
		padding-inline: 12px;
		scroll-padding-inline: 12px;
	}

	.ht-scroll ul.ht-vrow__row > li.ht-vrow__item {
		--ht-vw: max(220px, min(80vw, 360px, (100vh - 250px) * 9 / 16));
	}

	@supports (height: 100svh) {
		.ht-scroll ul.ht-vrow__row > li.ht-vrow__item {
			--ht-vw: max(220px, min(80vw, 360px, (100svh - 250px) * 9 / 16));
		}
	}
}

/* Arrows on the middle of the video, not of the whole card. */
.ht-vrow .ht-scroll__nav {
	inset-block-start: 40%;
}

/* ---------- Card ---------- */

.ht-vcard {
	--ht-orange: #e2803f;
	--ht-cream: #fbf5f3;
	--ht-ink: #161616;
	--ht-red: #e10600;
	--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-disc: 15.5cqi;
	--ht-lift: 0 1cqi 3cqi rgb(0 0 0 / 0.22);

	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3.2cqi;
	box-sizing: border-box;
	inline-size: 100%;
	padding: 3.4cqi 3.4cqi 3.8cqi;
	background: var(--ht-cream);
	border: max(2px, 0.6cqi) solid var(--ht-orange);
	border-radius: 6px;
	color: var(--ht-ink);
	font-family: var(--ht-font);
	line-height: 1.4;
	text-align: start;
}

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

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

.ht-vcard__icon {
	inline-size: 1em;
	block-size: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Video ---------- */

.ht-vcard__stage {
	position: relative;
}

.ht-vcard__media {
	position: relative;
	isolation: isolate;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #1d1714;
	border-radius: 4cqi;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* A pixel past each edge, so rounding never leaves a dark hairline beside the picture. */
.ht-vcard__media > :is(.ht-vcard__poster, .ht-vcard__video) {
	position: absolute;
	inset: -1px;
	display: block;
	inline-size: calc(100% + 2px);
	block-size: calc(100% + 2px);
	max-inline-size: none;
	margin: 0;
	object-fit: cover;
}

/* The poster covers the video until its first frame plays. */
.ht-vcard__poster {
	z-index: 1;
	transition: opacity 0.35s ease;
}

.ht-vcard.is-started .ht-vcard__poster {
	opacity: 0;
}

/* Soft shade at the top so the sound and ⤢ buttons read on any picture. */
.ht-vcard__media::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	block-size: 24%;
	background: linear-gradient(rgb(0 0 0 / 0.3), transparent);
	pointer-events: none;
}

/* Progress along the video's bottom edge, inside its rounded corners. */
.ht-vcard__progress {
	position: absolute;
	inset: auto 0 0;
	z-index: 3;
	block-size: max(3px, 1cqi);
	background: rgb(255 255 255 / 0.3);
}

.ht-vcard__progress > span {
	display: block;
	inline-size: calc(var(--ht-p, 0) * 100%);
	block-size: 100%;
	background: var(--ht-orange);
}

/* Big ▶ while the video is not playing (also says "this is a video" on posters). */
.ht-vcard button.ht-vcard__play {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	inline-size: 21cqi;
	block-size: 21cqi;
	margin: auto;
	padding: 0;
	background: rgb(0 0 0 / 0.4);
	border: max(2px, 0.6cqi) solid rgb(255 255 255 / 0.9);
	border-radius: 50%;
	box-shadow: none;
	color: #fff;
	font-size: 9cqi;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ht-vcard button.ht-vcard__play:is(:hover, :focus, :focus-visible) {
	background: rgb(0 0 0 / 0.5);
	color: #fff;
}

.ht-vcard__play .ht-vcard__icon {
	margin-inline-start: 0.12em;
	fill: currentColor;
	stroke: none;
}

[dir="rtl"] .ht-vcard__play .ht-vcard__icon {
	margin-inline: 0 0.12em;
}

.ht-vcard:is(.is-playing, .is-waiting) .ht-vcard__play {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.8);
}

/* Buffering: a ring, only if the wait lasts. */
.ht-vcard__spin {
	position: absolute;
	inset: 0;
	z-index: 4;
	inline-size: 14cqi;
	block-size: 14cqi;
	margin: auto;
	border: max(3px, 1cqi) solid rgb(255 255 255 / 0.35);
	border-block-start-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.ht-vcard.is-waiting .ht-vcard__spin {
	animation: ht-vcard-spin 0.8s linear infinite, ht-vcard-show 0.2s ease 0.35s both;
}

@keyframes ht-vcard-spin {
	to {
		rotate: 1turn;
	}
}

@keyframes ht-vcard-show {
	to {
		opacity: 1;
	}
}

/* Double tap: a heart bursts where the video is. */
.ht-vcard__heart {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	color: #ff3b47;
	font-size: 30cqi;
	opacity: 0;
	pointer-events: none;
}

.ht-vcard__heart .ht-vcard__icon {
	fill: currentColor;
	stroke: #fff;
	stroke-width: 0.8;
	filter: drop-shadow(0 1cqi 3cqi rgb(0 0 0 / 0.35));
}

.ht-vcard.is-hearting .ht-vcard__heart {
	animation: ht-vcard-heart 0.8s ease both;
}

@keyframes ht-vcard-heart {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}

	25% {
		opacity: 1;
		transform: scale(1.15);
	}

	45% {
		transform: scale(0.95);
	}

	70% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.1) translateY(-6cqi);
	}
}

.ht-vcard__error,
.ht-vcard__stock {
	position: absolute;
	inset-block-end: 4cqi;
	inset-inline-start: 4cqi;
	z-index: 4;
	margin: 0;
	padding: 1.2cqi 3.4cqi;
	background: rgb(22 22 22 / 0.82);
	border-radius: 999px;
	color: #fff;
	font: 700 3.8cqi / 1.3 var(--ht-font);
}

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

.ht-vcard__stock {
	background: var(--ht-ink);
}

/* ---------- Price tag on the video's corner ---------- */

.ht-vcard__price {
	position: absolute;
	inset-block-start: -1.8cqi;
	inset-inline-start: -1.8cqi;
	z-index: 6;
	padding: 2cqi 5cqi;
	color: #fff;
	font-size: 7.4cqi;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

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

.ht-vcard__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);
}

.ht-vcard .ht-vcard__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;
}

.ht-vcard .ht-vcard__price del {
	color: inherit;
	font-size: max(11px, 0.45em);
	font-weight: 600;
	opacity: 0.9;
}

.ht-vcard .ht-vcard__price ins {
	color: inherit;
	background: none;
	text-decoration: none;
}

.ht-vcard .ht-vcard__price .woocommerce-Price-amount {
	color: inherit;
}

/* ---------- Sound and ⤢, stacked on the corner opposite the price ---------- */

.ht-vcard__tools {
	position: absolute;
	inset-block-start: 3.6cqi;
	inset-inline-end: 3.6cqi;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 2.4cqi;
}

.ht-vcard .ht-vcard__tools > button {
	display: grid;
	place-items: center;
	inline-size: 12.5cqi;
	block-size: 12.5cqi;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	background: rgb(0 0 0 / 0.42);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: #fff;
	font-size: 6.6cqi;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ht-vcard .ht-vcard__tools > button:is(:hover, :focus, :focus-visible) {
	background: rgb(0 0 0 / 0.58);
	color: #fff;
}

.ht-vcard__expand .ht-vcard__icon {
	font-size: 0.86em;
	stroke-width: 2.2;
}

.ht-vcard.is-error .ht-vcard__expand {
	display: none;
}

:is(.ht-vcard__sound, .ht-vviewer__sound)[aria-pressed="false"] .ht-vcard__sound-on,
:is(.ht-vcard__sound, .ht-vviewer__sound)[aria-pressed="true"] .ht-vcard__sound-off {
	display: none;
}

/* ---------- Side column: like, comments, share, contact ---------- */

.ht-vcard__rail {
	position: absolute;
	inset-block-end: 4.6cqi;
	inset-inline-end: 3cqi;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.2cqi;
}

/* Like: the card's white pill, standing up — a heart over the real count. */
.ht-vcard .ht-card__vote {
	justify-content: center;
	inline-size: auto;
	min-inline-size: var(--ht-disc);
	min-block-size: 0;
	padding: 2.4cqi 2.8cqi 2.1cqi;
	background: #fff;
	border-radius: 999px;
	box-shadow: var(--ht-lift);
}

.ht-vcard button.ht-card__like {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9cqi;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--ht-orange);
	font: 700 3.9cqi / 1 var(--ht-font);
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
}

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

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

.ht-vcard .ht-card__vote .ht-card__icon {
	inline-size: 7.8cqi;
	block-size: 7.8cqi;
}

/* The heart: an outline, then full and red once liked (the pill turns red too). */
.ht-vcard .ht-card__vote .ht-card__icon--off {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.ht-vcard .ht-card__vote .ht-card__icon--on {
	fill: currentColor;
	stroke: none;
}

/* Comments: the orange bubble in the same white pill, count under it. */
.ht-vcard a.ht-vcard__comments {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6cqi;
	min-inline-size: var(--ht-disc);
	padding: 2.4cqi 1.8cqi 2.1cqi;
	background: #fff;
	border-radius: 999px;
	box-shadow: var(--ht-lift);
	color: var(--ht-orange);
	font: 700 4.1cqi / 1 var(--ht-font);
	text-decoration: none;
}

.ht-vcard a.ht-vcard__comments:is(:hover, :focus-visible) {
	color: #c9652a;
}

.ht-vcard .ht-vcard__comments .ht-card__icon {
	inline-size: 8.1cqi;
	block-size: 8.1cqi;
	stroke-width: 1.8;
}

/* Share and contact: white and coloured discs. */
.ht-vcard button.ht-vcard__share {
	display: grid;
	place-items: center;
	inline-size: var(--ht-disc);
	block-size: var(--ht-disc);
	min-block-size: 0;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: var(--ht-lift);
	color: var(--ht-ink);
	cursor: pointer;
}

.ht-vcard button.ht-vcard__share:is(:hover, :focus, :focus-visible) {
	background: #f0f0f0;
	color: var(--ht-ink);
}

.ht-vcard__share .ht-card__icon {
	inline-size: 7.2cqi;
	block-size: 7.2cqi;
}

.ht-vcard .ht-card__contact {
	display: grid;
	place-items: center;
	inline-size: var(--ht-disc);
	block-size: var(--ht-disc);
	min-block-size: 0;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 max(2px, 0.8cqi) #fff, var(--ht-lift);
	color: #fff;
}

.ht-vcard .ht-card__contact:is(:hover, :focus-visible) {
	color: #fff;
}

/* The list of channels opens upwards, over the video (the row cuts anything below it). */
.ht-vcard .ht-contact__menu {
	inset-block: auto calc(100% + 10px);
	inset-inline-end: 0;
}

.ht-vcard .ht-contact__menu::before {
	inset-block: auto -6px;
}

/* ---------- Under the video: name and «شراء» ---------- */

.ht-vcard__foot {
	display: flex;
	align-items: center;
	gap: 2.6cqi;
	min-block-size: 17cqi;
}

.ht-vcard h3.ht-vcard__title {
	display: -webkit-box;
	flex: 1;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--ht-ink);
	font: 700 5cqi / 1.4 var(--ht-font);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ht-vcard .ht-vcard__title a {
	color: inherit;
	text-decoration: none;
}

.ht-vcard .ht-vcard__title a:is(:hover, :focus-visible) {
	color: var(--ht-orange);
}

/* «شراء»: the product page's key — a peach ring around a raised pale key — with the bag beside it. */
.ht-vcard__buy-wrap {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	padding-inline-end: 10cqi;
}

.ht-vcard a.ht-vcard__buy {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 33cqi;
	block-size: 16cqi;
	border: max(1px, 0.24cqi) solid var(--ht-peach);
	border-radius: 4.3cqi;
	color: #ff6300;
	font: 400 12cqi / 1 var(--ht-display);
	text-decoration: none;
}

.ht-vcard a.ht-vcard__buy::before {
	content: "";
	position: absolute;
	inset: 1.9cqi 2cqi;
	background: #fcf7f6;
	border-radius: 2.8cqi;
	box-shadow: 0 1cqi 1.8cqi rgb(120 90 80 / 0.28), 0 0 0.5cqi rgb(120 90 80 / 0.12);
	transition: box-shadow 0.12s ease, transform 0.12s ease;
}

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

.ht-vcard a.ht-vcard__buy:is(:hover, :focus-visible) {
	color: #e55900;
}

.ht-vcard a.ht-vcard__buy:active::before {
	box-shadow: 0 0.3cqi 0.8cqi rgb(120 90 80 / 0.28);
	transform: translateY(0.5cqi);
}

/* The arm holding the bag, reaching in from the key's outer end. */
.ht-vcard__bag {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	inline-size: 13cqi;
	aspect-ratio: 240 / 282;
	background: url("../images/cart-bag.webp") center / contain no-repeat;
	pointer-events: none;
}

[dir="rtl"] .ht-vcard__bag {
	transform: scaleX(-1);
}

.ht-vcard__buy-wrap:has(.ht-vcard__buy:is(:hover, :active)) .ht-vcard__bag {
	transform-origin: 50% 10%;
	animation: ht-vcard-bag-swing 0.7s ease;
}

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

	60% {
		rotate: 6deg;
	}
}

/* ---------- YouTube / Vimeo card: its picture and ▶; a tap plays it in the card ---------- */

.ht-vcard.is-embed .ht-vcard__media::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	block-size: 30%;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.28));
	pointer-events: none;
}

/* YouTube / Vimeo playing in its card (a tap): its own player over the picture; our price, ⤢ and column stay where they are. */
.ht-vcard__frame {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: #000;
	transition: opacity 0.25s ease;
}

/* Loading: unseen and untouchable; the picture and the ring under it show through until it plays. */
.ht-vcard__frame.is-loading {
	opacity: 0;
	pointer-events: none;
}

.ht-vcard .ht-vcard__frame iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* The cookie notice (SureCookie) stands in for the player until YouTube / Vimeo are allowed. */
.ht-vcard .ht-vcard__frame > .surecookie-placeholder {
	inline-size: 100% !important;
	block-size: 100% !important;
	min-block-size: 0 !important;
	aspect-ratio: auto !important;
	margin: 0;
}

/* Its words beside the button column, not under it. */
.ht-vcard .ht-vcard__frame .surecookie-placeholder-content {
	box-sizing: border-box !important;
	padding-inline: 5cqi 24cqi !important;
}

.ht-vcard.is-inline .ht-vcard__play,
.ht-vcard.is-inline .ht-vcard__media::before {
	display: none;
}

/* ---------- Viewer: the whole video over the page, with sound and a seek bar ---------- */

html.ht-vviewer-open,
html.ht-vviewer-open body {
	overflow: hidden;
}

.ht-vviewer {
	--ht-orange: #e2803f;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	box-sizing: border-box;
	padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	background: #0c0908;
	color: #fff;
	font-family: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	line-height: 1.4;
	overscroll-behavior: contain;
	animation: ht-vviewer-in 0.2s ease;
}

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

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

@keyframes ht-vviewer-in {
	from {
		opacity: 0;
	}
}

.ht-vviewer :is(a, button, input):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ht-vviewer .ht-vcard__icon {
	inline-size: 1em;
	block-size: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The video fills the stage without being cut: bars where the shapes differ. */
.ht-vviewer__stage {
	position: relative;
	container-type: size;
	display: grid;
	place-items: center;
	min-block-size: 0;
	overflow: hidden;
	border-radius: 12px;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.ht-vviewer .ht-vviewer__stage > video {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	object-fit: contain;
}

/* YouTube / Vimeo: their player at the video's own shape, as large as fits. */
.ht-vviewer__frame {
	position: absolute;
	inset: 0;
	inline-size: min(100cqw, 100cqh * var(--ar, 0.5625));
	block-size: min(100cqh, 100cqw / var(--ar, 0.5625));
	margin: auto;
	overflow: hidden;
	background: #000;
	border-radius: 12px;
}

.ht-vviewer .ht-vviewer__frame iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* The cookie notice (SureCookie) stands in for the player until YouTube / Vimeo are allowed. */
.ht-vviewer .ht-vviewer__frame > .surecookie-placeholder {
	inline-size: 100% !important;
	block-size: 100% !important;
	min-block-size: 0 !important;
	aspect-ratio: auto !important;
	margin: 0;
}

.ht-vviewer button.ht-vviewer__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 76px;
	block-size: 76px;
	margin: auto;
	padding: 0;
	background: rgb(0 0 0 / 0.45);
	border: 2px solid rgb(255 255 255 / 0.9);
	border-radius: 50%;
	box-shadow: none;
	color: #fff;
	font-size: 32px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ht-vviewer.is-paused button.ht-vviewer__play {
	opacity: 1;
	pointer-events: auto;
}

.ht-vviewer__play .ht-vcard__icon {
	margin-inline-start: 0.12em;
	fill: currentColor;
	stroke: none;
}

[dir="rtl"] .ht-vviewer__play .ht-vcard__icon {
	margin-inline: 0 0.12em;
}

.ht-vviewer__spin {
	position: absolute;
	inset: 0;
	z-index: 2;
	inline-size: 52px;
	block-size: 52px;
	margin: auto;
	border: 4px solid rgb(255 255 255 / 0.3);
	border-block-start-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.ht-vviewer.is-waiting .ht-vviewer__spin {
	animation: ht-vcard-spin 0.8s linear infinite, ht-vcard-show 0.2s ease 0.35s both;
}

.ht-vviewer__top {
	position: absolute;
	inset-block-start: max(18px, calc(env(safe-area-inset-top) + 6px));
	inset-inline-end: max(18px, calc(env(safe-area-inset-left) + 6px));
	z-index: 3;
	display: flex;
	gap: 10px;
}

.ht-vviewer .ht-vviewer__top > button {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	background: rgb(255 255 255 / 0.16);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ht-vviewer .ht-vviewer__top > button:is(:hover, :focus, :focus-visible) {
	background: rgb(255 255 255 / 0.28);
	color: #fff;
}

/* Seek bar and time, then the name and «شراء»; narrow and centred on a computer. */
.ht-vviewer__bar,
.ht-vviewer__foot {
	inline-size: min(100%, 560px);
	justify-self: center;
}

.ht-vviewer__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px 2px;
}

.ht-vviewer input.ht-vviewer__seek {
	--p: 0%;

	flex: 1;
	min-inline-size: 0;
	block-size: 24px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Above Astra's own range styles (input[type="range"]…). */
.ht-vviewer input.ht-vviewer__seek::-webkit-slider-runnable-track {
	block-size: 4px;
	background: linear-gradient(to right, var(--ht-orange) var(--p), rgb(255 255 255 / 0.3) var(--p));
	border-radius: 2px;
	box-shadow: none;
}

.ht-vviewer input.ht-vviewer__seek::-moz-range-track {
	block-size: 4px;
	background: linear-gradient(to right, var(--ht-orange) var(--p), rgb(255 255 255 / 0.3) var(--p));
	border-radius: 2px;
	box-shadow: none;
}

[dir="rtl"] .ht-vviewer input.ht-vviewer__seek::-webkit-slider-runnable-track {
	background: linear-gradient(to left, var(--ht-orange) var(--p), rgb(255 255 255 / 0.3) var(--p));
}

[dir="rtl"] .ht-vviewer input.ht-vviewer__seek::-moz-range-track {
	background: linear-gradient(to left, var(--ht-orange) var(--p), rgb(255 255 255 / 0.3) var(--p));
}

.ht-vviewer input.ht-vviewer__seek::-webkit-slider-thumb {
	inline-size: 16px;
	block-size: 16px;
	margin-block-start: -6px;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
	-webkit-appearance: none;
	appearance: none;
}

.ht-vviewer input.ht-vviewer__seek::-moz-range-thumb {
	inline-size: 16px;
	block-size: 16px;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}

.ht-vviewer__time {
	flex: none;
	color: rgb(255 255 255 / 0.85);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.ht-vviewer__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 4px 0;
}

.ht-vviewer p.ht-vviewer__title {
	display: -webkit-box;
	flex: 1;
	min-inline-size: 0;
	margin: 0;
	overflow: hidden;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ht-vviewer a.ht-vviewer__buy {
	flex: none;
	padding: 6px 26px 10px;
	background: linear-gradient(135deg, #ff9e60, #e2803f);
	border-radius: 999px;
	color: #fff;
	font: 400 26px / 1 "HT Lalezar", "HT Cairo", system-ui, sans-serif;
	text-decoration: none;
}

.ht-vviewer a.ht-vviewer__buy:is(:hover, :focus-visible) {
	background: #e2803f;
	color: #fff;
}

.ht-vviewer a.ht-vviewer__buy[hidden] {
	display: none;
}

/* YouTube / Vimeo bring their own controls and sound. */
.ht-vviewer.is-embed :is(.ht-vviewer__play, .ht-vviewer__spin, .ht-vviewer__bar, .ht-vviewer__sound) {
	display: none;
}

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

	.ht-vcard.is-waiting .ht-vcard__spin,
	.ht-vviewer.is-waiting .ht-vviewer__spin {
		opacity: 1;
	}

	.ht-vviewer,
	.ht-vviewer * {
		transition: none !important;
		animation: none !important;
	}
}

/* French and English pages (v76): «Acheter» is longer than «شراء», so a smaller face keeps it on the key. */
:root:not([dir="rtl"]) .ht-vcard a.ht-vcard__buy {
	font-size: 7.6cqi;
	text-transform: none;
}

/* ---------- Card badge in place of the contact icon (v94) ----------
 * BEST SELLER in the side column at the contact disc's width, SPECIAL OFFER on
 * the video under the price tag (which holds the top corner).
 */
.ht-vcard .ht-vcard__corner {
	display: block;
	line-height: 0;
}

.ht-vcard .ht-vcard__corner img {
	display: block;
	inline-size: calc(var(--ht-disc) * 1.25);
	block-size: auto;
	max-inline-size: none;
	margin: 0;
	filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.35));
}

.ht-vcard .ht-vcard__ribbon {
	position: absolute;
	inset-block-start: 13cqi;
	inset-inline: 0;
	z-index: 5;
	inline-size: 50%;
	block-size: auto;
	margin: 0 auto;
	pointer-events: none;
	filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.3));
}