/**
 * Second-generation product card: the large card in a horizontal, swipeable
 * single row. Layout only — the card itself is the shop-loop card (see
 * product-card.css). A wider list item scales the whole card up through its
 * container query, so here we only widen each item, lay the row out
 * horizontally, give the image a portrait frame and add the shipping badge.
 *
 * Also holds the "it scrolls" affordances (edge fade, dots, swipe hint) and
 * fills the screen on phones (bigger card, taller image, first card to the
 * right so the next one peeks on the left — the RTL scroll direction).
 *
 * Nothing here applies outside `.ht-scroll`, so the normal card is unaffected.
 */

.ht-scroll {
	--ht-orange: #e2803f;
	--ht-peach: #ff9e60;
	--ht-fade: #fff;
	--ht-font: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

	position: relative;
}

/*
 * On phones the row breaks out of the theme's content container to span the
 * whole screen, so the side white space is used and the first card reaches the
 * edge. A small row padding keeps a tidy gutter and the next card peeks on the
 * (RTL) left. Desktop stays inside the container.
 *
 * The attribute raises specificity above page builders' "> * { margin: 0 }"
 * (Spectra containers), which would otherwise cancel the break-out, leave a
 * strip on one side and push the row 20px off the other edge.
 */
@media (max-width: 767.98px) {
	.ht-scroll[data-ht-scroll] {
		inline-size: 100vw;
		max-inline-size: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

/* Holds the row (and the arrows/edge fade) so they align to the cards, not the dots below. */
.ht-scroll__viewport {
	position: relative;
}

/* Optional row name above the cards; aligned with the first card's edge. */
.ht-scroll h2.ht-scroll__title {
	margin: 0 0 10px;
	padding-inline: 2px;
	color: #161616;
	font: 800 clamp(18px, 5vw, 26px) / 1.3 var(--ht-font);
}

@media (max-width: 767.98px) {
	.ht-scroll h2.ht-scroll__title {
		padding-inline: 12px;
	}
}

/*
 * Home page rows (the "صفوف الصفحة الرئيسية" block, or the top of the page):
 * breathing room around them and between rows. On wider screens they keep to
 * the page's content width even when the page itself is full width.
 */
.ht-home-rows {
	margin-block: clamp(14px, 3vw, 28px) 0;
}

/*
 * The section after the rows (on the home page: LATEST COLLECTION) keeps its
 * design, but its large top padding — meant to space it from the old banner —
 * becomes a small gap so no empty band is left under the cards. The builder
 * sets that padding per block, hence the !important.
 */
.entry-content > .ht-home-rows + * {
	padding-block-start: clamp(24px, 4vw, 48px) !important;
}

.ht-home-rows > .ht-scroll + .ht-scroll {
	margin-block-start: clamp(28px, 7vw, 44px);
}

@media (min-width: 768px) {
	.ht-home-rows {
		box-sizing: border-box;
		max-inline-size: 1200px;
		margin-inline: auto;
		padding-inline: 20px;
	}
}

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

ul.products.ht-scroll__row {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(14px, 4vw, 26px);
	margin: 0;
	padding: 4px 2px 8px;
	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;
}

ul.products.ht-scroll__row::-webkit-scrollbar {
	display: none;
}

/* WooCommerce/Astra add a clearfix pseudo on ul.products; it must not become a flex item. */
ul.products.ht-scroll__row::before,
ul.products.ht-scroll__row::after {
	display: none;
}

/*
 * Each item carries one full-size card. On phones a big card (72vw, below) snaps to
 * the start — the right edge in RTL — so the next card peeks on the left and
 * the direction to swipe is obvious. From tablet up ≈2.5 cards fit.
 * `margin: 0` beats WooCommerce's and Astra's column margins.
 */
ul.products.ht-scroll__row li.product {
	flex: 0 0 min(85vw, 420px);
	inline-size: min(85vw, 420px);
	max-inline-size: none;
	margin: 0 !important;
	padding: 0;
	scroll-snap-align: start;
}

/*
 * Phones: a tidy gutter so the first card nears the edge and the next peeks.
 * A narrow gap between cards hands the saved space to that peek (card size
 * unchanged), so more of the next card shows.
 */
@media (max-width: 767.98px) {
	ul.products.ht-scroll__row {
		gap: 8px;
		padding-inline: 12px;
		scroll-padding-inline: 12px;
	}

	/*
	 * A card at most 72% of the screen wide, so more of the next one shows
	 * beside it. The card is scaled whole (cqi), so it only gets smaller,
	 * never different (see the container query below).
	 */
	ul.products.ht-scroll__row li.product {
		flex-basis: max(260px, min(72vw, 420px));
		inline-size: max(260px, min(72vw, 420px));
	}
}

/*
 * And at most 84% of the screen tall with its title, dots and hint (the card
 * is about twice as tall as it is wide; the rest takes about 90px), so the top
 * of what follows shows below it. svh: the screen left by the browser's bars.
 */
@media (max-width: 767.98px) {
	@supports (height: 1svh) {
		ul.products.ht-scroll__row li.product {
			flex-basis: max(260px, min(72vw, 420px, (84svh - 90px) / 2));
			inline-size: max(260px, min(72vw, 420px, (84svh - 90px) / 2));
		}
	}
}

/*
 * Narrower than 300px, product-card.css turns a card into the two-column one
 * (share label hidden, cart on its own line). The reels card keeps its own
 * design at any size: the card's usual values, back again.
 */
@container (max-width: 300px) {
	.ht-scroll .ht-card .ht-card__share {
		padding: 1.6cqi 4cqi;
		aspect-ratio: auto;
		justify-content: normal;
	}

	.ht-scroll .ht-card__share-label {
		position: static;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		clip-path: none;
	}

	.ht-scroll .ht-card__cart-wrap {
		flex-basis: auto;
		margin-inline-start: auto;
	}
}

@media (min-width: 768px) {
	ul.products.ht-scroll__row li.product {
		flex-basis: clamp(320px, 38vw, 400px);
		inline-size: clamp(320px, 38vw, 400px);
	}
}

/*
 * Taller, portrait image for this generation — scoped to the scroll row only.
 * Phones get a taller frame (fills the screen); desktop stays a touch shorter.
 */
.ht-scroll .ht-card .ht-card__media {
	aspect-ratio: 3 / 4;
}

@media (min-width: 768px) {
	.ht-scroll .ht-card .ht-card__media {
		aspect-ratio: 4 / 5;
	}
}

/*
 * Raise the cart into the empty band beside the like/comment row.
 *
 * On the big card the social group and the cart wrapped onto two lines, leaving
 * an empty band above the cart button (and its bag). Keeping them on one line
 * fills that band — cart on the left, social on the right — and lets the
 * free-shipping badge move up to where the cart used to sit. The like/comment
 * group keeps its size; only the cart wrapper takes any slack.
 */
.ht-scroll .ht-card__bar {
	flex-wrap: nowrap;
	column-gap: 0;
}

.ht-scroll .ht-card__social {
	flex: 0 0 auto;
}

/* ---------- "توصيل مجاني" badge (now where the cart was, a touch larger) ---------- */

.ht-card__ship-row {
	display: flex;
	justify-content: flex-end;
	margin-block-start: -0.6cqi;
}

.ht-scroll .ht-card__ship {
	display: inline-flex;
	align-items: center;
	gap: 1.8cqi;
	padding: 1.4cqi 4.8cqi;
	background: var(--ht-ship-bg, var(--ht-peach));
	border-radius: 999px;
	color: var(--ht-ship-ink, #fff);
	font: 800 clamp(14px, 4.9cqi, 22px) / 1.2 var(--ht-font);
	white-space: nowrap;
}

.ht-scroll .ht-card__ship::before {
	content: "";
	flex: none;
	inline-size: 1.2em;
	block-size: 1.2em;
	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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h12v11H1zM13 8h5l3 3v4h-8z'/%3E%3Ccircle cx='6' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h12v11H1zM13 8h5l3 3v4h-8z'/%3E%3Ccircle cx='6' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

/*
 * A product's own badge (HomeTech_Reels_Badge): its colour in --ht-ship-bg
 * and --ht-ship-ink, its icon drawn inline (or none) instead of the truck mask.
 */
.ht-scroll .ht-card__ship.is-custom::before {
	content: none;
}

.ht-scroll .ht-card__ship-icon,
.ht-scroll .ht-card__ship-pen {
	flex: none;
	inline-size: 1.2em;
	block-size: 1.2em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

/* The little quill after the words of a badge that opens the card. */
.ht-scroll .ht-card__ship-pen {
	inline-size: 1em;
	block-size: 1em;
}

/* A badge that opens the quill's card: a button that looks the same (Astra's button style undone). */
.ht-scroll .ht-card button.ht-card__ship {
	position: relative;
	overflow: hidden;
	min-block-size: 0;
	margin: 0;
	padding: 1.4cqi 4.8cqi;
	background: var(--ht-ship-bg, var(--ht-peach));
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: var(--ht-ship-ink, #fff);
	font: 800 clamp(14px, 4.9cqi, 22px) / 1.2 var(--ht-font);
	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-ship-bounce 4.5s ease-out 1.5s infinite;
}

.ht-scroll .ht-card button.ht-card__ship:is(:hover, :focus) {
	background: var(--ht-ship-bg, var(--ht-peach));
	color: var(--ht-ship-ink, #fff);
}

@media (hover: hover) {
	.ht-scroll .ht-card button.ht-card__ship:hover {
		box-shadow: 0 0.8cqi 2.4cqi rgb(0 0 0 / 0.18);
		transform: translateY(-1px);
	}
}

.ht-scroll .ht-card button.ht-card__ship:focus-visible {
	outline: 2px solid #161616;
	outline-offset: 2px;
}

/* A gold gleam crosses it now and then: it can be pressed. */
.ht-scroll .ht-card button.ht-card__ship::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-ship-gleam 4.5s ease-in-out 1.5s infinite;
	pointer-events: none;
}

@keyframes ht-ship-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-ship-bounce {
	0%,
	24%,
	100% {
		translate: 0 0;
	}

	6% {
		translate: 0 -0.34em;
	}

	12% {
		translate: 0 0;
	}

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

/* ---------- Edge fade: hints that more cards lie to the (RTL) left ---------- */

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

/* Reaching the far end removes the hint; a lone card never shows it. */
.ht-scroll.is-end .ht-scroll__viewport::after,
.ht-scroll.is-single .ht-scroll__viewport::after {
	opacity: 0;
}

/* ---------- Scroll arrows (pointer devices) ---------- */

.ht-scroll__nav {
	position: absolute;
	inset-block-start: 38%;
	z-index: 3;
	display: none;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	padding: 0;
	background: #fff;
	border: 2px solid var(--ht-orange);
	border-radius: 50%;
	color: var(--ht-orange);
	cursor: pointer;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

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

/* Base chevron points to the physical left; rotate so each points its own way. */
.ht-scroll__nav--prev {
	inset-inline-start: 2px;
}

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

.ht-scroll__nav--next::before {
	transform: rotate(180deg);
}

[dir="rtl"] .ht-scroll__nav--prev::before {
	transform: rotate(180deg);
}

[dir="rtl"] .ht-scroll__nav--next::before {
	transform: rotate(0deg);
}

.ht-scroll__nav:hover,
.ht-scroll__nav:focus-visible {
	background: var(--ht-orange);
	color: #fff;
}

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

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

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

/* ---------- Swipe hint: small standing caption under the dots (phones) ---------- */

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

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

@keyframes ht-scroll-nudge {
	0%,
	100% {
		transform: translateX(0);
	}

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

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

/* ---------- Position dots ---------- */

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	ul.products.ht-scroll__row {
		scroll-behavior: auto;
	}

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

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

	.ht-scroll .ht-card button.ht-card__ship {
		transition: none;
		animation: none;
	}

	.ht-scroll .ht-card button.ht-card__ship::after {
		display: none;
	}
}

/* French and English pages (v76): more cards lie to the right; the fade and the hint's arrow say so. */
:root:not([dir="rtl"]) .ht-scroll__viewport::after {
	background: linear-gradient(to left, var(--ht-fade), transparent);
}

:root:not([dir="rtl"]) .ht-scroll__hint-arrow {
	scale: -1 1;
}