/* Listing cards only (shop, category, tag, search, collection). Loaded apart from frontend.css
   where those cards render, and not on the render-blocking path. Header, drawers, filter, buy box,
   forms and the collection cover stay in frontend.css. */
/* ── بطاقة المنتج: هندسة ثابتة وعناصر مدمجة (TASK-0043) ─────── */

/* الوسائط شبكة من صفين (TASK-0044، D-115): الصف الأول منطقة الصورة 2:3 كاملة، وطبقة المعرض
   (نقاط وأسهم) في الخلية نفسها فتتموضع بالنسبة إلى الصورة لا البطاقة؛ الصف الثاني شريط الألوان
   في التدفق العادي تحت الصورة، فلا يغطيها ولا يقتطع من ارتفاعها. */
/* المحدِّد أخص من قاعدة Blocksy التي تجعل صورة البطاقة flex. */
.products .product figure.debackers-card-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	position: relative;
}

.debackers-card-media > .ct-media-container,
.debackers-card-media > .debackers-card-gallery {
	grid-column: 1;
	grid-row: 1;
}

/* الشريط تحت الصورة يضيف ارتفاعه؛ تقليل مسافة Blocksy بعد الوسائط (25px) يبقي البطاقة مدمجة. */
[data-products] .product figure.debackers-card-media {
	--product-element-spacing: 6px;
}

/* شارة التخفيض تحت صف النقاط العلوي، في الموضع نفسه لكل بطاقات الشبكة. */
.debackers-card-media > .onsale {
	--badge-top: 8px;
}

.debackers-card-media img {
	transition: opacity 120ms ease;
}

/* Dim only after the swap has already waited ~150ms (product-cards.js adds is-slow). */
.debackers-card-media.is-slow img {
	opacity: 0.45;
}

/* سحب أفقي للمعرض دون حجب تمرير الصفحة العمودي. */
.debackers-card-media .ct-media-container {
	touch-action: pan-y;
}

/* One-line names (TASK-0052, supersedes wrapping): equal card heights. A name wider than the card scrolls
   horizontally inside its link (touch, drag, keyboard) from the RTL start; the stored and accessible name
   stay complete and only the scrollbar is hidden. Short names stay centered: an overflowing line is
   start-aligned by CSS itself. */
.products .woocommerce-loop-product__title {
	--product-element-spacing: 4px;
	display: block;
	min-inline-size: 0;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
}

.products .woocommerce-loop-product__title a {
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	white-space: nowrap;
}

.products .woocommerce-loop-product__title a::-webkit-scrollbar {
	display: none;
}

/* The scroller clips its own outline; draw the focus ring inside. */
.products .woocommerce-loop-product__title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.products .woocommerce-loop-product__title a.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.products .price {
	--product-element-spacing: 4px;
	min-block-size: 22px;
	white-space: nowrap;
	text-align: center;
}

/* TASK-0051: show the store currency beside catalog prices. */
.products .price .woocommerce-Price-currencySymbol {
	position: static;
	inline-size: auto;
	block-size: auto;
	overflow: visible;
	clip-path: none;
}
.products .price:empty {
	display: none;
}

/* Both prices share one line when they fit; a long pair wraps the original price under the current
   one instead of overflowing a 157px card (TASK-0048). */
.products .price .sale-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0 6px;
}

.products .price .sale-price del {
	order: 2;
}

/* A genuine former price stays struck and readable, below the current price's emphasis. */
.products .price del {
	color: var(--wp--preset--color--muted);
	font-size: 0.92em;
	font-weight: 500;
	opacity: 1;
	text-decoration-color: currentColor;
	text-decoration-line: line-through;
}

.products .price .sale-price ins {
	order: 1;
}

/* ── لوحة الألوان المدمجة عند الحافة السفلية للصورة (TASK-0045، D-120) ─────── */

/* الصورة تبقى 2:3 كاملة في الصف الأول، وصفّ محجوز تحتها يستوعب لوحة الألوان التي
   تتقاطع قليلًا مع حافة الصورة السفلية (تداخل ضحل مقصود) فتبدو منصهرة بالبطاقة لا
   نموذجًا منفصلًا. ممنوع التمويه الثقيل: سطح شبه معتم بحد وظل خفيفين. */
.debackers-card-colors {
	align-items: center;
	/* TASK-0101 (owner): the page's ground instead of white, a hairline instead of a shadow — lighter on the photo. */
	background: var(--wp--preset--color--ground);
	background: color-mix(in srgb, var(--wp--preset--color--ground) 90%, transparent);
	border: 1px solid rgba(20, 28, 38, 0.1);
	border-radius: 6px;
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	display: flex;
	/* Label, small gap, swatches: the row starts at the RTL start edge (owner, TASK-0048). */
	gap: 6px;
	grid-column: 1;
	grid-row: 2;
	margin-block-start: -30px;
	margin-inline: 4px;
	min-inline-size: 0;
	padding: 3px 4px;
	position: relative;
	z-index: 2;
}

.debackers-card-colors__label {
	flex: none;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
}

.debackers-card-colors__choices {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 0;
	min-inline-size: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}

.debackers-card-colors__choices::-webkit-scrollbar {
	display: none;
}

/* The TASK-0047 centering of colors and sizes is withdrawn (owner, TASK-0048): options start
   directly after their label at the RTL start edge, and a row scrolls only when its options are
   wider than the space left beside the label. */

/* Options wider than the row: a fade on the physical edge that hides more; the card script sets
   data-overflow physically (left/right/both) because the RTL scroll direction is reversed. */
:is(.debackers-card-colors__choices, .debackers-card-options__choices, .woocommerce-loop-product__title a)[data-overflow="left"] {
	mask-image: linear-gradient(to right, transparent, #000 20px);
}

:is(.debackers-card-colors__choices, .debackers-card-options__choices, .woocommerce-loop-product__title a)[data-overflow="right"] {
	mask-image: linear-gradient(to left, transparent, #000 20px);
}

:is(.debackers-card-colors__choices, .debackers-card-options__choices, .woocommerce-loop-product__title a)[data-overflow="both"] {
	mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

/* More colours than fit (owner 26/10): a 2px scroll line shows there is more to swipe; it overlaps the row's own
   bottom margin (negative margin), so the row keeps its height. */
.debackers-card-colors__choices[data-overflow] {
	margin-block-end: -2px;
	scrollbar-color: rgb(0 0 0 / 0.28) transparent;
	scrollbar-width: thin;
}

.debackers-card-colors__choices[data-overflow]::-webkit-scrollbar {
	display: block;
	block-size: 2px;
}

.debackers-card-colors__choices[data-overflow]::-webkit-scrollbar-thumb {
	background: rgb(0 0 0 / 0.28);
	border-radius: 2px;
}

/* زر اللون هدف 44×44 والمعيّن المرئي 28px داخله؛ حلقة الاختيار داخلية فلا تلامس جارًا. */
.debackers-card-color {
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: relative;
}

.debackers-card-color::before {
	background: var(--debackers-swatch-color);
	block-size: 24px;
	border: 1px solid rgba(20, 28, 38, 0.2);
	border-radius: 50%;
	content: "";
	inline-size: 24px;
	transition: box-shadow 120ms ease;
}

/* A 3px ring stays clear of the neighbouring swatch at the compact button spacing (TASK-0048). */
.debackers-card-color.is-active::before {
	box-shadow: 0 0 0 2px var(--wp--preset--color--ground), 0 0 0 3px var(--wp--preset--color--ink);
}

.debackers-card-color:not(.is-active):hover::before {
	box-shadow: 0 0 0 1.5px var(--wp--preset--color--ground), 0 0 0 2.5px var(--wp--preset--color--muted);
}

.debackers-card-color.is-unavailable::after {
	background: linear-gradient(to top left, transparent calc(50% - 1.5px), var(--wp--preset--color--surface) calc(50% - 1.5px), var(--wp--preset--color--surface) calc(50% + 1.5px), transparent calc(50% + 1.5px));
	content: "";
	inset: 8px;
	position: absolute;
}

/* ── صف المقاسات: صف واحد قابل للتمرير بلا لفّ ولا إعادة تدفق عند الاختيار ── */

.debackers-card-options {
	display: grid;
	gap: 4px;
	margin-block-start: 4px;
	text-align: start;
}

/* Size row (owner's final decision, TASK-0048; supersedes the inline label): «المقاس» alone on a
   centered line, the buttons right below it (the 3px scroller padding is the whole gap). The label
   never scrolls. */
.debackers-card-options__row {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-inline-size: 0;
}

/* «المنتج ذو مقاس موحد» (TASK-0081): quiet information in the size area of a product without a size attribute —
   muted, centred, on a soft tint, not a button. Its height follows its text; the row alignment rule below keeps the
   add buttons of a row on one baseline. */
.debackers-card-one-size {
	align-items: center;
	background: var(--wp--preset--color--line, #eef0f2);
	border-radius: 4px;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 12px;
	font-weight: 600;
	justify-content: center;
	line-height: 1.35;
	margin: 0;
	min-block-size: 40px;
	padding-block: 8px;
	padding-inline: 10px;
	text-align: center;
}

.debackers-card-options__label {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.debackers-card-options__choices {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	min-inline-size: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	/* Focus rings stay visible inside the scroller. */
	padding-block: 3px;
	scrollbar-width: none;
}

/* Centered while the buttons fit; auto margins collapse to zero once they do not, so a long list
   (belt cm, inch, numeric sizes) starts at the RTL start edge and scrolls from there instead of
   hiding its first options behind a centered overflow. */
.debackers-card-options__choices > :first-child {
	margin-inline-start: auto;
}

.debackers-card-options__choices > :last-child {
	margin-inline-end: auto;
}

.debackers-card-options__choices::-webkit-scrollbar {
	display: none;
}

/* TASK-0101 (owner, like the Egypt store): squares on the page's ground, a light grey frame, the chosen size framed
   in ink; regular weight throughout. */
.debackers-card-size {
	align-items: center;
	background: transparent;
	border: 1px solid #cac7c4;
	border-radius: 2px;
	box-shadow: none;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font: inherit;
	font-size: 12px;
	font-weight: 400;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: relative;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.debackers-card-size.is-active {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.debackers-card-size:not(.is-unavailable):hover {
	border-color: var(--wp--preset--color--ink);
	transform: translateY(-1px);
}

.debackers-card-size.is-unavailable {
	background: transparent;
	border-style: dashed;
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ── مقايضات معرض البطاقة: نقاط قرب أعلى الصورة وأسهم عند الحواف ── */

/* الغلاف يشغل خلية الصورة في شبكة الوسائط (أطفاله مطلقة الموضع داخله) فيبقى بصندوق حقيقي
   قابل للكشف، والنقر يمر عبره إلا على أزراره. النقاط عند الحافة العليا للصورة والشارة تحتها. */
.debackers-card-gallery {
	pointer-events: none;
	position: relative;
}

.debackers-card-gallery__arrow,
.debackers-card-gallery__dot {
	pointer-events: auto;
}

.debackers-card-gallery__progress {
	display: flex;
	gap: 2px;
	inset-block-end: 32px;
	inset-inline: 0;
	justify-content: center;
	position: absolute;
}

/* زر النقطة 24×24 هدف لمسٍ كافٍ، والنقطة المرئية 8px داخله. */
.debackers-card-gallery__dot {
	align-items: center;
	background: transparent;
	block-size: 24px;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	inline-size: 24px;
	justify-content: center;
	margin: 0;
	padding: 0;
}

/* مقروءة على الصور الفاتحة والداكنة: غير الحالية شبه شفافة بحد داكن خفيف، والحالية بيضاء
   مصمتة أكبر بحلقة داكنة — الفرق بالحجم والتعبئة لا باللون وحده. */
.debackers-card-gallery__dot::before {
	background: rgba(255, 255, 255, 0.6);
	block-size: 8px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(28, 28, 28, 0.45);
	content: "";
	inline-size: 8px;
}

.debackers-card-gallery__dot.is-active::before {
	background: var(--wp--preset--color--surface);
	block-size: 10px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--ink);
	inline-size: 10px;
}

/* TASK-0101 (owner): smaller, no white disc — a thin ink ring only, so the garment stays in front. */
.debackers-card-gallery__arrow {
	align-items: center;
	background: transparent;
	block-size: 28px;
	border: 1px solid rgba(20, 28, 38, 0.45);
	border-radius: 999px;
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	inline-size: 28px;
	inset-block-start: 50%;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
	translate: 0 -50%;
	transition: opacity 120ms ease;
}

.debackers-card-gallery__arrow--prev {
	inset-inline-start: 8px;
}

.debackers-card-gallery__arrow--next {
	inset-inline-end: 8px;
}

.debackers-card-gallery__arrow:disabled {
	cursor: default;
	opacity: 0.35;
}

/* ── صف الإجراءات: الإضافة للسلة وقلب الرغبات (TASK-0045) ────────────────── */

/* بلا سكربت لا إضافة ولا رغبات: يبقى رابط «تحديد أحد الخيارات» إلى صفحة المنتج. */
.debackers-card-actions {
	display: none;
	gap: 4px;
	margin-block-start: 6px;
}

html.debackers-cards-enhanced .debackers-card-actions {
	display: flex;
}

.debackers-card-add {
	align-items: center;
	min-inline-size: 0;
	background: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	display: inline-flex;
	flex: 1;
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	justify-content: center;
	margin: 0;
	/* TASK-0101 (owner): a little lower; the heart beside it follows. */
	min-block-size: 40px;
	padding-inline: 4px;
	white-space: nowrap;
	transition: opacity 120ms ease;
}

.debackers-card-add[disabled] {
	cursor: not-allowed;
	opacity: 0.45;
}

.debackers-card-add[aria-busy="true"] {
	opacity: 0.7;
}

.debackers-card-wish {
	align-items: center;
	background: transparent;
	block-size: 40px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 40px;
	inline-size: 40px;
	justify-content: center;
	margin: 0;
	min-inline-size: 40px;
	padding: 0;
}

/* مع السكربت يحل صف الإجراءات محل زر Blocksy «تحديد أحد الخيارات» في بطاقة لها تنويعات؛
   بدونه يبقى الزر رابطًا إلى صفحة المنتج (العنوان رابط أيضًا). */
html.debackers-cards-enhanced .products .product:has(.debackers-card-actions) .ct-woo-card-actions > .button {
	display: none;
}

/* Row alignment (TASK-0076): grid rows already stretch the cards to one height; Blocksy gives the leftover
   space to its (here empty) action box, so a card without a size row (tie, cufflinks) showed its add button
   one size row higher than its neighbours. The leftover goes above the options instead: sizes and actions sit
   on the card's bottom edge in every card of a row, the image and title keep their places. */
html.debackers-cards-enhanced .products .product:has(.debackers-card-actions) > .debackers-card-options {
	margin-block-start: auto;
	padding-block-start: 4px;
}

html.debackers-cards-enhanced .products .product:has(.debackers-card-actions) > .ct-woo-card-actions {
	margin-block-start: 0;
}

.debackers-card-wish .debackers-card-wish__shape {
	transition: fill 120ms ease, stroke 120ms ease;
}

.debackers-card-wish.is-active {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.debackers-card-wish.is-active .debackers-card-wish__shape {
	fill: currentColor;
}

.debackers-card-add:focus-visible,
.debackers-card-wish:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* شارات متعددة: الثانية تحتها بمسافة موحدة، والوسوم من بيانات الكتالوج وحدها. */
.debackers-card-media > .onsale + .onsale {
	--badge-top: 68px;
}
/* ── Card badges (TASK-0050, D-151) ─────────────────────────────────────────
   Red compact labels on the image. The storefront is RTL, so inline-start is the physical right
   (automatic discount tier) and inline-end the physical left (owner's promotional text). Each badge is
   limited to half the image minus the insets, so a long text is truncated instead of meeting the other
   badge; the full text stays in the element for assistive technology. Gallery arrows sit at mid height
   and the dots at the bottom, so the top corners are free. */
.products .product figure {
	position: relative;
}

.products .product figure > .debackers-card-badge {
	background: var(--wp--preset--color--sale);
	border-radius: 2px;
	box-sizing: border-box;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	inset-block-start: 0;
	line-height: 1.35;
	max-inline-size: calc(50% - 12px);
	overflow: hidden;
	padding-block: 2px;
	padding-inline: 6px;
	pointer-events: none;
	position: absolute;
	text-overflow: ellipsis;
	white-space: nowrap;
	z-index: 3;
}

.products .product figure > .debackers-card-badge--discount {
	inset-block-start: 0;
	inset-inline-start: 0;
	max-inline-size: 49%;
}

.products .product figure > .debackers-card-badge--promo {
	/* TASK-0073: the single editorial badge (a collection or the owner's text) is ink, so red stays the discount. */
	background: var(--wp--preset--color--ink);
	inset-inline-end: 8px;
}

/* TASK-0073 (TASK-0070 note): Blocksy's out-of-stock label shares the physical right corner with the discount;
   it sits under a visible discount instead of over it. */
.products .product figure > .out-of-stock-badge {
	inset-block-start: 8px;
	inset-inline-start: 8px;
	inset-inline-end: auto;
	max-inline-size: calc(50% - 12px);
	z-index: 3;
}

.products .product figure > .debackers-card-badge--discount:not([hidden]) ~ .out-of-stock-badge {
	inset-block-start: 36px;
}

.products .product figure > .debackers-card-badge[hidden] {
	display: none;
}

/* TASK-0086: membership badges (OUTLET, NEW COLLECTION, NEW ARRIVALS…) stack at the physical top left, each one
   compact and whole: several memberships wrap downwards instead of being truncated or hidden. */
.products .product figure > .debackers-card-badges {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 4px;
	inset-block-start: 0;
	inset-inline-end: 0;
	max-inline-size: 51%;
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

.products .product figure > .debackers-card-badges > .debackers-card-badge {
	background: var(--wp--preset--color--ink);
	border-radius: 2px;
	box-sizing: border-box;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	max-inline-size: 100%;
	white-space: nowrap;
	padding-block: 2px;
	padding-inline: 5px;
	text-align: center;
}
/* Phone cards (two-column grid): no gallery dots over the garment; swipe and arrows stay. Arrows sit at the
   physical edges of the image (2px inset) with a 32×44px touch area and a 26px translucent ground-colored
   disc, readable over light and dark garments; the focus ring is drawn inside the image. The color panel
   uses the same translucent ground instead of pure white, with ink label text for contrast. */
@media (max-width: 689.98px) {
	.debackers-card-gallery__progress {
		display: none;
	}

	body .debackers-card-gallery__arrow {
		background: transparent;
		block-size: 44px;
		border: 0;
		border-radius: 0;
		color: var(--wp--preset--color--ink);
		inline-size: 32px;
		min-block-size: 44px;
		min-inline-size: 32px;
	}

	/* TASK-0101 (owner): a 22px ring without a filled disc. */
	body .debackers-card-gallery__arrow::before {
		background: transparent;
		border-radius: 50%;
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
		content: "";
		inset-block: 11px;
		inset-inline: 5px;
		position: absolute;
	}

	body .debackers-card-gallery__arrow svg {
		block-size: 10px;
		inline-size: 10px;
		position: relative;
	}

	body .debackers-card-gallery__arrow--prev {
		inset-inline-start: 2px;
	}

	body .debackers-card-gallery__arrow--next {
		inset-inline-end: 2px;
	}

	body .debackers-card-gallery__arrow:focus-visible {
		outline-offset: -2px;
	}

	.debackers-card-colors {
		background: color-mix(in srgb, var(--wp--preset--color--ground) 90%, transparent);
		border-color: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
		box-shadow: none;
	}

	.debackers-card-colors__label {
		color: var(--wp--preset--color--ink);
	}
}
/* TASK-0089: approved discount text remains whole on one line. */
.products .product figure > .debackers-card-badge--discount {
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}

/* Sale price pairs stay together; genuine variation ranges retain their values. */
.products .product .price {
	flex-wrap: nowrap;
	max-inline-size: 100%;
	white-space: nowrap;
	gap: 4px;
}

.products .product .price .woocommerce-Price-currencySymbol {
	/* TASK-0102 (owner): «ل.س.ج» at 0.8 of its price in both prices, standing on the numbers' line. */
	font-size: 0.8em;
}

.products .product .price:not(:has(ins)) {
	flex-wrap: wrap;
	white-space: normal;
}
/* TASK-0089: membership labels remain one line without truncation. */
.products .product figure > .debackers-card-badges > .debackers-card-badge {
	overflow-wrap: normal;
	word-break: keep-all;
}

@media (max-width: 400px) {
	.products .product figure > .debackers-card-badges {
		inset-block-start: 0;
		inset-inline-end: 0;
		max-inline-size: 56%;
	}

	.products .product figure > .debackers-card-badges > .debackers-card-badge {
		font-size: 9px;
		letter-spacing: 0;
		padding-inline: 2px;
	}
	.products .product figure > .debackers-card-badge--discount { font-size: 9px; padding-inline: 2px; max-inline-size: 44%; }
}
/* ── TASK-0091: one badge height, 2px stack gap, a frame taller by two badges ─────── */
/* Every card badge (membership and discount) shares one font, line box and padding, so both backgrounds have the
   same height and top edge at every width. The frame gains exactly two badge heights plus the gap (and 2px air)
   above the whole 2:3 photo; the photo keeps its size and sits at the bottom, so the garment starts below the
   badges. The band is the image element's own padding painted with the photo's top-edge colour (Card_Frame). */
.products .product figure {
	--debackers-badge-font: 10px;
	--debackers-badge-line: 14px;
	--debackers-badge-gap: 2px;
	--debackers-badge-h: calc(var(--debackers-badge-line) + 4px);
	/* TASK-0093: the band above the photo is one badge plus 6px (24px; was two badges + gap, 40px). A second stacked
	   badge now sits over the photo's own empty top margin instead of lengthening every card. */
	--debackers-badge-band: calc(var(--debackers-badge-h) + 6px);
}

.products .product figure > .debackers-card-badges {
	gap: var(--debackers-badge-gap);
}

.products .product figure > .debackers-card-badges > .debackers-card-badge,
.products .product figure > .debackers-card-badge--discount {
	block-size: var(--debackers-badge-h);
	font-size: var(--debackers-badge-font);
	line-height: var(--debackers-badge-line);
	padding-block: 2px;
	padding-inline: 5px;
}

.products .product figure > a.ct-media-container img {
	aspect-ratio: 2 / 3;
	background-color: var(--debackers-edge, transparent);
	block-size: auto;
	box-sizing: content-box;
	object-fit: contain;
	object-position: 50% 100%;
	padding-block-start: var(--debackers-badge-band);
}

@media (max-width: 400px) {
	.products .product figure {
		--debackers-badge-font: 9px;
		--debackers-badge-line: 13px;
	}

	.products .product figure > .debackers-card-badges > .debackers-card-badge,
	.products .product figure > .debackers-card-badge--discount {
		padding-inline: 3px;
	}
}
/* ── TASK-0093: a card photo that failed to load ──────────────────────────────────────────────────── */
/* The browser draws a broken-image icon with the alt text, lets the box shrink to that text and never retries.
   product-cards.js repeats the request and marks the frame meanwhile: the link itself holds the 2:3 box plus the
   badge band, and the image is laid over it unseen (not `display: none`, which would stop a lazy image loading). */
/* The theme animates every property of the image link (0.12s): its box must switch between the two states at once,
   in both directions, or the frame is 24px too tall for a moment when the photo arrives. */
.products .product figure > a.ct-media-container {
	transition-property: color, background-color, opacity, box-shadow, transform;
}

.products .product figure.is-image-missing > a.ct-media-container {
	aspect-ratio: 2 / 3;
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent);
	box-sizing: content-box;
	display: block;
	padding-block-start: var(--debackers-badge-band);
	position: relative;
}

.products .product figure.is-image-missing > a.ct-media-container img {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	padding: 0;
	position: absolute;
	visibility: hidden;
}
/* ── TASK-0101 (owner round 3): lighter shop cards, like the Egypt store ─────────────────────────────────────────
   Name and price in regular weight with tight line spacing (the price pattern itself is in the TASK-0102 block). */
.products .woocommerce-loop-product__title,
.products .woocommerce-loop-product__title a {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
}

.products .woocommerce-loop-product__title {
	margin-block: 6px 0;
}

.products .price {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin-block-end: 2px;
}

.debackers-card-actions {
	margin-block-start: 4px;
}
/* ── Shop cards (owner): lighter name, muted «الألوان», tighter colour strip, little space under it ── */
body ul.products li.product .woocommerce-loop-product__title,
body ul.products li.product .woocommerce-loop-product__title a {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

body ul.products li.product .woocommerce-loop-product__title {
	margin-block-start: 6px;
}

body ul.products li.product .debackers-card-media {
	margin-block-end: 0;
}

body ul.products li.product .price {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

body ul.products li.product .price del {
	font-size: calc(1em - 1px);
}

/* The colour strip stays on the page's own ground (owner): merged with the photo, shown as a strip by its edge. */
body .debackers-card-colors {
	gap: 4px;
	padding: 2px 4px;
}

body .debackers-card-colors__label {
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
}

.debackers-card-color {
	block-size: 32px;
	inline-size: 28px;
}

/* Gallery arrows (owner): readable on a light packshot and on a dark close-up alike, still without a filled disc —
   an ink arrow with a light halo, inside a double ring (ink, then a light outer line). */
.debackers-card-gallery__arrow {
	border-color: rgb(28 28 28 / 55%);
	box-shadow: 0 0 0 1px rgb(233 229 226 / 75%);
}

.debackers-card-gallery__arrow svg {
	filter: drop-shadow(0 0 1px rgb(233 229 226 / 95%)) drop-shadow(0 0 2px rgb(233 229 226 / 70%));
}

@media (max-width: 689.98px) {
	body .debackers-card-gallery__arrow {
		box-shadow: none;
	}

	body .debackers-card-gallery__arrow::before {
		box-shadow: 0 0 0 1px rgb(28 28 28 / 55%), 0 0 0 2px rgb(233 229 226 / 75%);
	}

	body ul.products li.product .woocommerce-loop-product__title,
	body ul.products li.product .woocommerce-loop-product__title a {
		font-size: 14px;
	}
}

@media (min-width: 1000px) {
	body ul.products li.product .woocommerce-loop-product__title,
	body ul.products li.product .woocommerce-loop-product__title a,
	body ul.products li.product .price {
		font-size: 15px;
	}
}
/* ── TASK-0143 (owner) ───────────────────────────────────────────────────────────────────────────────────────── */
/* Phones: the card arrows are a smaller 18px ring (the 32×44 touch area stays), so they cover less of the garment. */
@media (max-width: 689.98px) {
	body .debackers-card-gallery__arrow::before {
		inset-block: 13px;
		inset-inline: 7px;
	}

	body .debackers-card-gallery__arrow svg {
		block-size: 8px;
		inline-size: 8px;
	}
}

/* TASK-0144 (owner): every card badge is 2px lower (16px), with the same 5px before the first letter and after the
   last; the collection badge is never narrower than its words (on a 360px phone the old 51–56% cap let
   «WINTER COLLECTION» run past its background, which looked cut). English capitals have no descenders, so their
   text sits 1px lower to look centred like the Arabic discount badge beside it. */
.products .product figure {
	--debackers-badge-line: 12px;
}

.products .product figure > .debackers-card-badges {
	max-inline-size: calc(100% - 52px);
}

.products .product figure > .debackers-card-badges > .debackers-card-badge,
.products .product figure > .debackers-card-badge--discount {
	max-inline-size: none;
	padding-inline: 5px;
}

/* TASK-0145 (owner): the collection badges (not the discount) hug their words — 3px at each side, and the capitals are
   centred on their own height (cap height to baseline, text-box trim) instead of the line box, which left room below. */
.products .product figure > .debackers-card-badges > .debackers-card-badge {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	line-height: 1;
	padding-block: 0;
	padding-inline: 3px;
	text-box: trim-both cap alphabetic;
}

@media (max-width: 400px) {
	.products .product figure {
		--debackers-badge-line: 12px;
	}

	.products .product figure > .debackers-card-badge--discount {
		padding-inline: 5px;
	}

	.products .product figure > .debackers-card-badges > .debackers-card-badge {
		padding-inline: 3px;
	}
}

/* TASK-0143 (owner): more colours than fit — a small chevron at the hiding edge of the colour box (phones show no
   scroll bar). It never takes a tap: the row still swipes, and choosing any colour moves it on. */
.debackers-card-colors[data-more] {
	position: relative;
}

.debackers-card-colors[data-more]::after {
	align-items: center;
	block-size: 100%;
	color: var(--wp--preset--color--ink);
	content: "‹";
	display: flex;
	font-size: 15px;
	inline-size: 12px;
	inset-block-start: 0;
	justify-content: center;
	line-height: 1;
	opacity: 0.6;
	pointer-events: none;
	position: absolute;
}

/* data-more is physical (as data-overflow). The chevron marks only the reading-forward side (the left edge in this RTL
   store, the right edge in LTR), where colours not seen yet wait; the start side sits on the «الألوان» label. */
.debackers-card-colors[data-more="left"]::after,
.debackers-card-colors[data-more="both"]::after {
	inset-inline-end: 1px;
}

.debackers-card-colors[data-more="right"]::after {
	display: none;
}

:root:not([dir="rtl"]) .debackers-card-colors[data-more="left"]::after {
	display: none;
}

:root:not([dir="rtl"]) .debackers-card-colors[data-more="right"]::after {
	content: "›";
	display: flex;
	inset-inline-end: 1px;
}
@media (max-width: 767px) {
	.debackers-card-options {
		gap: 4px;
		margin-block-start: 4px;
	}
}