/**
 * "بطاقات صور قابلة للتمرير" block (class HT_Image_Cards).
 *
 * A swipeable row of square image cards, like the product rows. Every list
 * item is a size container and everything in the card is in cqi (percent of
 * the card width): the card is 143cqi tall (CARD_H in PHP; taller when an
 * image sits in a slot), so a badge or image placed at (x, y) sits at the same
 * spot on every screen and in the editor. Layers are centred on their point.
 *
 * Colours and fonts are the --hti-* variables below: their defaults are the
 * original design; the settings page prints other values on .ht-icards, a row
 * with its own colours carries them in its style attribute. A font variable
 * set to "initial" means "inherit" (the theme's font, or the cards' text font).
 *
 * Loaded on the site only where the block is, and in the editor.
 */

@font-face {
	font-family: "HT Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-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 Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-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;
}

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

:where(.ht-icards) {
	--hti-bg1: #fffaf6;
	--hti-bg2: #fbefe6;
	--hti-accent: #e2803f;
	--hti-btn1: #ff9e60;
	--hti-btn2: #e2803f;
	--hti-btn-text: #fff;
	--hti-price: #fff;
	--hti-title: #4a2c1d;
	--hti-sub: #8d7f77;
	--hti-fade: #fff;
	--hti-font: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--hti-display: "HT Lalezar", "HT Cairo", system-ui, sans-serif;
}

.ht-icards {
	--hti-card-w: min(80vw, 380px);
	--hti-bw: max(2px, 0.4cqi);

	position: relative;
	box-sizing: border-box;
	font-family: var(--hti-font);
}

/*
 * Phones: the row spans the screen (the attribute beats page builders'
 * "> * { margin: 0 }"), with a small gutter so the next card peeks on the
 * RTL left. Wider screens: up to the content width, centred.
 */
@media (max-width: 767.98px) {
	.ht-icards.is-bleed[data-ht-icards] {
		inline-size: 100vw;
		max-inline-size: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

@media (min-width: 768px) {
	.ht-icards {
		--hti-card-w: clamp(260px, 28vw, 330px);
	}

	.ht-icards[data-ht-icards] {
		max-inline-size: 1200px;
		margin-inline: auto;
	}
}

.ht-icards h2.ht-icards__title {
	margin: 0 0 10px;
	padding-inline: 12px;
	color: var(--hti-title);
	font: 400 clamp(20px, 5.6vw, 28px) / 1.3 sans-serif;
	font-family: var(--hti-display);
}

.ht-icards .ht-scroll__viewport {
	position: relative;
}

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

.ht-icards ul.ht-icards__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	padding: 6px 12px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 12px;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
	-webkit-overflow-scrolling: touch;
}

.ht-icards ul.ht-icards__row::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.ht-icards ul.ht-icards__row {
		gap: 18px;
		padding-inline: 4px;
		scroll-padding-inline: 4px;
	}

	.ht-icards h2.ht-icards__title {
		padding-inline: 4px;
	}
}

/* Each item is the card's size container: nothing in it may pad or border it. */
.ht-icards .ht-icards__item {
	flex: 0 0 var(--hti-card-w);
	inline-size: var(--hti-card-w);
	max-inline-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	container-type: inline-size;
	list-style: none;
	scroll-snap-align: start;
}

/* ---------- The card ---------- */

.ht-icards .ht-icard {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	inline-size: 100cqi;
	/* 143cqi, or taller with slot images; a row's cards share the tallest height. */
	min-block-size: 143cqi;
	block-size: 100%;
	padding: 3cqi;
	overflow: hidden;
	background: linear-gradient(170deg, var(--hti-bg1) 0%, var(--hti-bg2) 100%);
	border: var(--hti-bw) solid var(--hti-accent);
	border-radius: 7cqi;
	box-shadow: 0 1.2cqi 4cqi -1.5cqi rgb(74 44 29 / 0.28);
	color: var(--hti-title);
	font-family: var(--hti-font);
	text-align: start;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ht-icards a.ht-icard:hover,
.ht-icards a.ht-icard:focus-visible {
	color: var(--hti-title);
	text-decoration: none;
	box-shadow: 0 2cqi 6cqi -1.5cqi rgb(74 44 29 / 0.38);
	transform: translateY(-2px);
}

.ht-icards a.ht-icard:focus-visible {
	outline: 2px solid var(--hti-accent);
	outline-offset: 3px;
}

.ht-icards .ht-icard__media {
	position: relative;
	display: block;
	flex: none;
	inline-size: 94cqi;
	block-size: 94cqi;
	overflow: hidden;
	background: linear-gradient(135deg, #f4e4d8, #ecd6c6);
	border-radius: 5cqi;
}

.ht-icards .ht-icard__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
}

/* Title, small line and the button: a fixed band, so the card height never changes. */
.ht-icards .ht-icard__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-block-size: 0;
	padding: 3cqi 1.5cqi 0;
}

.ht-icards .ht-icard__title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--hti-title);
	font: 400 6.6cqi / 1.25 sans-serif;
	font-family: var(--hti-display);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}

.ht-icards .ht-icard__sub {
	display: block;
	margin-block-start: 0.8cqi;
	overflow: hidden;
	color: var(--hti-sub);
	font: 600 3.7cqi / 1.4 sans-serif;
	font-family: var(--hti-font);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ht-icards .ht-icard__cta {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 2cqi;
	block-size: 13cqi;
	margin-block-start: auto;
	padding-inline: 4.5cqi;
	background: linear-gradient(135deg, var(--hti-btn1) 0%, var(--hti-btn2) 100%);
	border-radius: 4cqi;
	box-shadow: inset 0 -0.6cqi 0 rgb(0 0 0 / 0.08);
	color: var(--hti-btn-text);
}

.ht-icards .ht-icard__cta-text {
	overflow: hidden;
	font: 800 4.6cqi / 1.2 sans-serif;
	font-family: var(--hti-font);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ht-icards .ht-icard__prices {
	display: flex;
	flex: none;
	align-items: baseline;
	gap: 2cqi;
	white-space: nowrap;
}

.ht-icards .ht-icard__old {
	color: color-mix(in srgb, var(--hti-btn-text) 80%, transparent);
	font: 600 3.8cqi / 1 sans-serif;
	font-family: var(--hti-font);
	text-decoration: line-through;
}

.ht-icards .ht-icard__price {
	color: var(--hti-price);
	font: 400 7.2cqi / 1 sans-serif;
	font-family: var(--hti-display);
	text-shadow: 0 0.3cqi 0.8cqi rgb(123 56 18 / 0.35);
}

.ht-icards .ht-icard__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Slot images: they take their own room and the card grows ---------- */

.ht-icards .ht-icard__slot {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 2cqi;
}

.ht-icards .ht-icard__slot--top,
.ht-icards .ht-icard__slot--above-title {
	margin-block-end: 2.5cqi;
}

.ht-icards .ht-icard__slot--below-title {
	margin-block: 2.5cqi 3cqi;
}

.ht-icards .ht-icard__flow {
	display: block;
	flex: none;
	block-size: auto;
	max-inline-size: 100%;
	margin: 0;
	border-radius: 0;
}

.ht-icards .ht-icard__flow.is-center {
	align-self: center;
}

.ht-icards .ht-icard__flow.is-start {
	align-self: flex-start;
}

.ht-icards .ht-icard__flow.is-end {
	align-self: flex-end;
}

/* ---------- Layers: badges and floating images, centred on their point ---------- */

.ht-icards .ht-icard__layers {
	position: absolute;
	/* Over the border too: positions are measured from the card's outer edge. */
	inset: calc(-1 * var(--hti-bw));
	z-index: 2;
	pointer-events: none;
}

.ht-icards .ht-icard__layer {
	position: absolute;
	margin: 0;
	transform: translate(-50%, -50%);
}

.ht-icards img.ht-icard__sticker,
.ht-icards .ht-icard__sticker img {
	display: block;
	block-size: auto;
	max-inline-size: none;
	margin: 0;
	border-radius: 0;
}

.ht-icards .ht-icard__sticker img {
	inline-size: 100%;
}

/* As wide as its icon, text and emoji, on every browser (never squeezed by the card edge). */
.ht-icards .ht-icard__badge {
	display: inline-flex;
	inline-size: max-content;
	align-items: center;
	gap: 0.35em;
	padding: 0.38em 0.95em;
	border-radius: 999px;
	box-shadow: 0 0.35em 0.9em -0.35em rgb(0 0 0 / 0.45);
	font: 800 calc(3.6cqi * var(--s, 1)) / 1.2 sans-serif;
	font-family: var(--hti-font);
	white-space: nowrap;
}

.ht-icards .ht-icard__badge > span {
	flex: none;
}

.ht-icards .ht-icard__icon {
	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-icard__badge.is-orange {
	background: linear-gradient(135deg, #ff9e60, #e2803f);
	color: #fff;
}

.ht-icard__badge.is-red {
	background: linear-gradient(135deg, #ff3b30, #c40500);
	color: #fff;
}

.ht-icard__badge.is-brown {
	background: #4a2c1d;
	color: #ffe9d4;
}

.ht-icard__badge.is-green {
	background: linear-gradient(135deg, #3f9e8f, #2e7d72);
	color: #fff;
}

.ht-icard__badge.is-white {
	background: #fff;
	color: #4a2c1d;
}

.ht-icard__badge.is-yellow {
	background: linear-gradient(135deg, #ffe17a, #ffc93c);
	color: #4a2c1d;
}

/* ---------- Edge fade, arrows (pointer devices), dots and hint ---------- */

.ht-icards .ht-scroll__viewport::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 3;
	inline-size: 28px;
	background: linear-gradient(to right, var(--hti-fade), transparent);
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ht-icards.is-end .ht-scroll__viewport::after,
.ht-icards.is-single .ht-scroll__viewport::after {
	opacity: 0;
}

.ht-icards .ht-scroll__nav {
	position: absolute;
	inset-block-start: calc(6px + var(--hti-card-w) * 0.5);
	z-index: 4;
	display: none;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 2px solid var(--hti-accent);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
	color: var(--hti-accent);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.ht-icards .ht-scroll__nav::before {
	content: "";
	inline-size: 42%;
	block-size: 42%;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ht-icards .ht-scroll__nav--prev {
	inset-inline-start: -6px;
}

.ht-icards .ht-scroll__nav--next {
	inset-inline-end: -6px;
}

/* The chevron points left; in RTL "previous" points right. */
[dir="rtl"] .ht-icards .ht-scroll__nav--prev::before,
.ht-icards .ht-scroll__nav--next::before {
	transform: rotate(180deg);
}

[dir="rtl"] .ht-icards .ht-scroll__nav--next::before {
	transform: none;
}

.ht-icards .ht-scroll__nav:is(:hover, :focus-visible) {
	background: var(--hti-accent);
	color: #fff;
}

.ht-icards .ht-scroll__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (min-width: 768px) {
	.ht-icards .ht-scroll__nav {
		display: grid;
	}
}

.ht-icards .ht-scroll__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-block-start: 6px;
}

.ht-icards .ht-scroll__dot {
	inline-size: 8px;
	block-size: 8px;
	margin: 0;
	padding: 0;
	background: #d9d2cd;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, inline-size 0.2s ease;
}

.ht-icards .ht-scroll__dot[aria-selected="true"] {
	inline-size: 22px;
	background: var(--hti-accent);
}

.ht-icards .ht-scroll__hint {
	margin: 5px 0 0;
	color: var(--hti-accent);
	font: 600 clamp(11px, 3vw, 13px) / 1.3 sans-serif;
	font-family: var(--hti-font);
	text-align: center;
	opacity: 0.85;
}

.ht-icards .ht-scroll__hint-arrow {
	display: inline-block;
	margin-inline-start: 5px;
	animation: ht-icards-nudge 1.4s ease-in-out infinite;
}

@keyframes ht-icards-nudge {

	50% {
		transform: translateX(-5px);
	}
}

/* Left-to-right pages: the next cards are on the right. */
.ht-icards.is-ltr .ht-scroll__viewport::after {
	background: linear-gradient(to left, var(--hti-fade), transparent);
}

.ht-icards.is-ltr .ht-scroll__hint-arrow {
	animation-name: ht-icards-nudge-ltr;
}

@keyframes ht-icards-nudge-ltr {

	50% {
		transform: translateX(5px);
	}
}

@media (min-width: 768px) {
	.ht-icards .ht-scroll__hint {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ht-icards .ht-icard,
	.ht-icards .ht-scroll__nav,
	.ht-icards .ht-scroll__dot,
	.ht-icards .ht-scroll__viewport::after {
		transition: none;
	}

	.ht-icards .ht-scroll__hint-arrow {
		animation: none;
	}
}