/**
 * HomeTech product card, from the Canva design "بطاقة منتج" (page 1).
 *
 * Every size is in cqi (percent of the card width), so the card keeps the
 * design's proportions in any column width. Rules that must beat Astra's
 * WooCommerce styles are prefixed with "ul.products li.product .ht-card".
 */

/* Cairo, self-hosted (SIL Open Font License). */
@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;
}

/*
 * Size containment gives the cards no intrinsic width, so the grid must clear
 * the floated sort/result-count bar itself (WooCommerce only does it once its JS runs).
 */
ul.products:has(> li.product > .ht-card) {
	clear: both;
}

/*
 * Phones: the grid also uses the side space. It spans the screen with the
 * same 12px edge as the scroll rows and a slightly narrower gap, so each card
 * gets a little wider. The card is sized in cqi, so it grows as a whole —
 * its design and buttons stay exactly as they are, only larger.
 * (The scroll rows have their own layout and are left out.)
 */
@media (max-width: 767.98px) {
	ul.products.products:has(> li.product > .ht-card):not(.ht-scroll__row) {
		box-sizing: border-box;
		inline-size: 100vw;
		max-inline-size: 100vw;
		margin-inline: calc(50% - 50vw);
		padding-inline: 12px;
		column-gap: 14px;
	}
}

/* The list item becomes the size container for its card. */
ul.products li.product:has(> .ht-card) {
	container-type: inline-size;
	display: flex;
	padding: 0;
	text-align: start;
}

.ht-card {
	--ht-orange: #e2803f;
	--ht-cream: #fbf5f3;
	--ht-ink: #161616;
	--ht-gray: #f0f0f0;
	--ht-shadow: #cdcdcd;
	--ht-red: #e10600;
	--ht-teal: #2e7d72;
	--ht-whatsapp: #25d366;
	--ht-telegram: #229ed9;
	--ht-font: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--ht-text: clamp(12px, 4.2cqi, 19px);

	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3.4cqi;
	box-sizing: border-box;
	inline-size: 100%;
	padding: 3.6cqi 4cqi 4.4cqi;
	background: var(--ht-cream);
	border: max(2px, 0.4cqi) solid var(--ht-orange);
	border-radius: 6px;
	color: var(--ht-ink);
	font-family: var(--ht-font);
	line-height: 1.4;
}

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

.ht-card__icon {
	flex: none;
	inline-size: 1.3em;
	block-size: 1.3em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

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

.ht-card__top {
	display: flex;
	align-items: center;
	gap: 3cqi;
	min-block-size: 13cqi;
}

.ht-card__price {
	position: relative;
	z-index: 0;
	flex: 0 1 auto;
	min-inline-size: 0;
	padding: 1.8cqi 4.6cqi;
	color: #fff;
	font-size: clamp(16px, 7.4cqi, 38px);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

/* Slanted orange tag with an offset black outline behind it. */
.ht-card__price::before,
.ht-card__price::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ht-orange);
	transform: skewX(-12deg) rotate(-2deg);
}

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

ul.products li.product .ht-card .ht-card__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;
}

ul.products li.product .ht-card .ht-card__price del {
	font-size: max(11px, 0.45em);
	font-weight: 600;
	color: inherit;
	opacity: 0.9;
}

ul.products li.product .ht-card .ht-card__price ins {
	color: inherit;
	background: none;
	text-decoration: none;
}

ul.products li.product .ht-card .ht-card__price .woocommerce-Price-amount {
	color: inherit;
}

.ht-card__top-actions {
	display: flex;
	align-items: center;
	gap: 2.4cqi;
	margin-inline-start: auto;
}

.ht-card .ht-card__share {
	display: inline-flex;
	align-items: center;
	gap: 1.6cqi;
	min-block-size: 36px;
	margin: 0;
	padding: 1.6cqi 4cqi;
	background: var(--ht-gray);
	border: 0;
	border-radius: 999px;
	color: var(--ht-ink);
	font: 600 var(--ht-text) / 1 var(--ht-font);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

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

.ht-card .ht-card__share:hover,
.ht-card .ht-card__share:focus-visible {
	background: #e4e4e4;
	color: var(--ht-ink);
}

.ht-card .ht-card__contact {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: clamp(40px, 13cqi, 66px);
	aspect-ratio: 1;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 0 0 max(3px, 1cqi) #fff, 0 2px 8px rgb(0 0 0 / 0.12);
	transition: transform 0.15s ease;
}

.ht-card .ht-card__contact:hover,
.ht-card .ht-card__contact:focus-visible {
	color: #fff;
	transform: scale(1.06);
}

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

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

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

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

.ht-card__contact--phone {
	background: #16a34a; /* Call: a deeper green than WhatsApp's so the two stay apart. */
}

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

/*
 * Several contact channels: one icon (orange, a speech bubble) opens a small
 * list — WhatsApp / Telegram / Instagram / phone — below it (product-card.js). Shared
 * with the product page, which only positions it (product-page.css).
 */
.ht-contact {
	position: relative;
	z-index: 3;
	flex: none;
}

/* Beats the theme's own button colours, including on hover and focus. */
.ht-contact > button:is(.ht-card__contact--multi, .ht-pdp__contact--multi),
.ht-contact > button:is(.ht-card__contact--multi, .ht-pdp__contact--multi):is(:hover, :focus, :focus-visible) {
	min-block-size: 0;
	padding: 0;
	background: linear-gradient(135deg, #ff9e60, #e2803f);
	border: 0;
	color: #fff;
	cursor: pointer;
}

.ht-contact__menu {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-end: 0;
	display: grid;
	gap: 4px;
	min-inline-size: 148px;
	padding: 6px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
	font-family: "HT Cairo", system-ui, sans-serif;
}

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

/* A little arrow pointing at the icon. */
.ht-contact__menu::before {
	content: "";
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: 16px;
	inline-size: 12px;
	block-size: 12px;
	background: #fff;
	transform: rotate(45deg);
}

a.ht-contact__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px 7px 14px;
	border-radius: 10px;
	color: #161616;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

a.ht-contact__item:is(:hover, :focus-visible) {
	background: #fbf1ea;
	color: #161616;
}

.ht-contact__dot {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	color: #fff;
}

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

.ht-contact__item--whatsapp .ht-contact__dot {
	background: #25d366;
}

.ht-contact__item--telegram .ht-contact__dot {
	background: #229ed9;
}

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

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

.ht-contact__item--youtube .ht-contact__dot {
	background: #f00;
}

/* ---------- Image in the orange frame ---------- */

.ht-card .ht-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #fff;
	border: max(2px, 0.45cqi) solid var(--ht-orange);
	border-radius: 6px;
}

ul.products li.product .ht-card .ht-card__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}

ul.products li.product .ht-card .ht-card__media:hover img {
	transform: scale(1.04);
}

ul.products li.product .ht-card .ht-card__media :is(.onsale, .ast-onsale-card),
.ht-card__badge {
	position: absolute;
	inset-block-start: 2.4cqi;
	inset-inline-start: 2.4cqi;
	inset-inline-end: auto;
	z-index: 1;
	min-inline-size: 0;
	min-block-size: 0;
	margin: 0;
	padding: 0.25em 0.8em;
	background: var(--ht-red);
	border-radius: 999px;
	color: #fff;
	font: 700 clamp(11px, 3.4cqi, 16px) / 1.4 var(--ht-font);
}

.ht-card__badge--stock {
	inset-inline-start: auto;
	inset-inline-end: 2.4cqi;
	background: var(--ht-ink);
}

/* ---------- Bottom row: like, reviews, add to cart ---------- */

.ht-card__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2.6cqi 3cqi;
}

.ht-card__social {
	display: flex;
	align-items: center;
	gap: 2.6cqi;
}

/*
 * White pill from the design: thumb up + count.
 * Orange by default; the thumb turns solid red once liked.
 */
.ht-card__vote {
	display: inline-flex;
	align-items: center;
	min-block-size: 42px;
	padding: 0.8cqi 4.6cqi;
	background: #fff;
	border-radius: 999px;
}

.ht-card .ht-card__like {
	display: inline-flex;
	align-items: center;
	gap: 2.4cqi;
	min-block-size: 36px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--ht-orange);
	font: 600 clamp(14px, 5.2cqi, 24px) / 1 var(--ht-font);
	cursor: pointer;
	touch-action: manipulation;
}

.ht-card .ht-card__like:hover,
.ht-card .ht-card__like:focus-visible {
	background: none;
	color: #c9652a;
}

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

.ht-card__vote .ht-card__icon {
	inline-size: 1.55em;
	block-size: 1.55em;
	fill: currentColor;
	stroke: none;
}

.ht-card__vote [aria-pressed="false"] .ht-card__icon--on,
.ht-card__vote [aria-pressed="true"] .ht-card__icon--off {
	display: none;
}

.ht-card__vote .is-popping .ht-card__icon {
	animation: ht-card-pop 0.35s ease;
}

@keyframes ht-card-pop {
	50% {
		scale: 1.3;
	}
}

/* Round outline speech bubble with its tail at the bottom right, as in the design. */
.ht-card .ht-card__comments {
	display: inline-flex;
	align-items: center;
	gap: 1cqi;
	color: var(--ht-orange);
	font: 600 var(--ht-text) / 1 var(--ht-font);
	text-decoration: none;
}

.ht-card .ht-card__comments:hover,
.ht-card .ht-card__comments:focus-visible {
	color: #c9652a;
}

.ht-card__comments .ht-card__icon {
	inline-size: clamp(34px, 11.5cqi, 52px);
	block-size: clamp(34px, 11.5cqi, 52px);
	stroke-width: 1.4;
	transform: scaleX(-1);
}

/*
 * The arm holding a shopping bag from the design hangs on the button's outer end.
 * The wrapper's end padding stops the button where the bag starts.
 */
.ht-card__cart-wrap {
	--ht-bag-w: clamp(48px, 17cqi, 66px);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-inline-start: auto;
	padding-inline-end: calc(var(--ht-bag-w) * 0.6 - 3.4cqi);
}

.ht-card__cart-wrap::after {
	content: "";
	position: absolute;
	/* Bag bottom level with the 40px button's bottom; the arm rises above it. */
	inset-block-start: calc(40px + 0.6cqi - var(--ht-bag-w) * 282 / 240);
	inset-inline-end: -3.4cqi;
	inline-size: var(--ht-bag-w);
	aspect-ratio: 240 / 282;
	background: url("../images/cart-bag.webp") center / contain no-repeat;
	pointer-events: none;
}

/* Mirrored on Arabic pages so the arm still reaches in from the button's side. */
[dir="rtl"] .ht-card__cart-wrap::after {
	transform: scaleX(-1);
}

/*
 * Orange sticker in the shape of the price tag: a slanted orange face over a
 * black copy of itself shifted down and across, drawn as two background layers.
 */
ul.products li.product .ht-card .button.ht-card__cart {
	--ht-sticker: var(--ht-orange);
	--ht-sticker-shift: 0px;
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 1.4cqi;
	min-block-size: 40px;
	margin: 0;
	padding: 2cqi 6cqi 2.6cqi;
	background:
		linear-gradient(100deg, transparent 5%, var(--ht-sticker) 5%, var(--ht-sticker) 95%, transparent 95%) var(--ht-sticker-shift) var(--ht-sticker-shift) / calc(100% - 5px) calc(100% - 5px) no-repeat,
		linear-gradient(100deg, transparent 5%, var(--ht-ink) 5%, var(--ht-ink) 95%, transparent 95%) 5px 5px / calc(100% - 5px) calc(100% - 5px) no-repeat;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font: 800 var(--ht-text) / 1.2 var(--ht-font);
	text-align: center;
	white-space: nowrap;
}

/* Shopping bag drawn in the button's text colour. */
ul.products li.product .ht-card .button.ht-card__cart::before {
	content: "";
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
	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-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%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-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

ul.products li.product .ht-card .button.ht-card__cart:hover,
ul.products li.product .ht-card .button.ht-card__cart:focus-visible {
	--ht-sticker: #cf6c2c;
	background-color: transparent;
	color: #fff;
}

/* Pressing pushes the orange face onto its shadow. */
ul.products li.product .ht-card .button.ht-card__cart:active {
	--ht-sticker-shift: 3px;
}

/* Once the product is in the cart, the hand swings the bag. */
.ht-card__cart-wrap:has(> .added)::after {
	transform-origin: 50% 10%;
	animation: ht-card-bag-swing 0.7s ease;
}

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

	60% {
		rotate: 6deg;
	}
}

ul.products li.product .ht-card .added_to_cart {
	flex-basis: 100%;
	margin: 0;
	padding: 0;
	color: var(--ht-teal);
	font: 700 clamp(12px, 3.6cqi, 16px) / 1.4 var(--ht-font);
	text-align: end;
}

/* ---------- Caption: product name and category hashtag ---------- */

.ht-card__caption {
	margin-block-start: auto;
}

ul.products li.product .ht-card .ht-card__title {
	display: -webkit-box;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--ht-ink);
	font: 700 clamp(14px, 4.8cqi, 22px) / 1.45 var(--ht-font);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

ul.products li.product .ht-card .ht-card__title a {
	color: inherit;
	text-decoration: none;
}

.ht-card .ht-card__tag {
	display: inline-block;
	margin-block-start: 0.2em;
	color: var(--ht-teal);
	font: 700 clamp(12px, 4cqi, 18px) / 1.3 var(--ht-font);
	text-decoration: none;
}

.ht-card .ht-card__tag:hover,
.ht-card .ht-card__tag:focus-visible {
	color: var(--ht-ink);
}

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

/* ---------- Narrow cards (two columns on phones) ---------- */

@container (max-width: 300px) {
	.ht-card .ht-card__share {
		padding: 1.6cqi;
		aspect-ratio: 1;
		justify-content: center;
	}

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

	.ht-card__cart-wrap {
		flex-basis: 100%;
		margin-inline-start: 0;
	}
}

@container (max-width: 210px) {
	.ht-card__top {
		flex-wrap: wrap;
	}
}

/* ---------- "Link copied" message from the share button ---------- */

.ht-toast {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 24px;
	z-index: 99999;
	inline-size: max-content;
	max-inline-size: calc(100% - 32px);
	margin-inline: auto;
	padding: 10px 18px;
	background: #161616;
	border-radius: 999px;
	color: #fff;
	font: 600 14px / 1.4 "HT Cairo", system-ui, sans-serif;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ht-toast.is-visible {
	opacity: 1;
	transform: none;
}

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

/* French and English pages (v76): «Partager» in its own case, not Astra's button capitals. */
:root:not([dir="rtl"]) .ht-card .ht-card__share {
	text-transform: none;
}

/* ---------- Card badge in place of the contact icon (v94) ----------
 * Only on a product with no contact icon, chosen in «إعدادات التواصل» or the
 * product's «البطاقات» box: BEST SELLER where the icon would be, SPECIAL OFFER
 * a ribbon hanging from the top of the picture.
 */
.ht-card .ht-card__corner {
	display: block;
	flex: none;
	line-height: 0;
}

.ht-card .ht-card__corner img {
	display: block;
	inline-size: auto;
	block-size: clamp(40px, 13cqi, 66px);
	max-inline-size: none;
	margin: 0;
}

.ht-card .ht-card__ribbon,
ul.products li.product .ht-card .ht-card__media img.ht-card__ribbon,
ul.products li.product .ht-card .ht-card__media:hover img.ht-card__ribbon {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 2;
	inline-size: 46%;
	block-size: auto;
	margin: 0 auto;
	object-fit: contain;
	transform: none;
	pointer-events: none;
}