/* ==========================================================================
   Wejha Store — product card (every product loop: homepage Product Collections, /shop/, category / tag archives,
   product search, related products, upsells)
   --------------------------------------------------------------------------
   One quiet component, product first. A warm square stage carries the photograph and is the card's only shape:
   no border, background, shadow, badge or lift around it. Under the stage, two short lines — the title, then a row
   with the price at the start and one 44px navy action at the end. That action slot is the card's signature: it reads
   "Choose" for a variable product until a variation is resolved, then becomes the navy plus, and in the cart morphs
   in place into the − n + stepper. Variable products carry their colour dots / value chips on the stage's
   bottom-start corner, touching the product they change. Motion: the photograph eases up on hover; nothing else moves.
   Navy is the only accent on cards; teal, yellow and coral stay out of them.

   Markup: WooCommerce's product blocks (image, title, price, button — inc/patterns.php wejha_product_card_blocks())
   inside the <li class="wc-block-product"> WooCommerce renders in a Product Collection, or inside the
   .wc-block-product wrapper inc/woocommerce.php prints on the classic loop's standard hook; that file adds the stepper, the add control
   and the swatch row; assets/js/product-qty.js drives them on WooCommerce's cart store. The grids around the cards
   belong to their contexts (home.css for the homepage collections, the parent theme for ul.products) — nothing here
   styles a grid. Colours, type, spacing and radii come from tokens.css. Logical properties only: Arabic (RTL) is the
   primary layout, English mirrors it. Loaded by inc/enqueue.php wherever a product loop can render.
   ========================================================================== */

/* Card root: the <li> WooCommerce renders in a Product Collection (.wc-block-product-template), or the card wrapper
   the theme prints inside WooCommerce's <li class="product"> in the classic loop (ul.products; the standard loop-item
   hooks stay live around it and any output they add stacks under the card). Grid: [ stage ] / [ title ] /
   [ price · action ]; the four inner blocks are placed by grid area; the root itself stays transparent. */
.wc-block-product-template > li.wc-block-product,
.products > li.product > .wc-block-product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto auto;
	column-gap: var(--wejha-space-3);
	align-content: start;
	align-items: stretch;
	width: 100%; /* the parent theme aligns loop-item children to the start */
	margin: 0; /* list-item margins would make the last card of a row taller than its neighbours */
	padding: 0;
	text-align: start;
}

/* Every block sets its own margins below (the parent theme gives loop-item children a bottom margin otherwise). */

/* Stage: warm, square, 16px radius. The photograph (white studio shot, blended onto the tint) fills the frame and
   is drawn slightly larger than the frame, so the product — not its white margins — sets the card's presence. */
.wc-block-product .wc-block-components-product-image {
	grid-area: 1 / 1 / 2 / 3;
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--wejha-radius-lg);
	background: var(--wejha-stage);
	overflow: hidden;
	isolation: isolate;
}

.wc-block-product .wc-block-components-product-image a {
	display: block;
	height: 100%;
}

.wc-block-product .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	padding: 0;
	object-fit: contain !important; /* the block writes object-fit: cover inline */
	mix-blend-mode: multiply;
	transform: scale(1.04);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}

/* Variation image switch (assets/js/product-qty.js): one transition — opacity and a very small scale, ≈ 200ms
   out, source swap once the new image is painted, ≈ 200ms back. No reload, no layout change. */
.wc-block-product .wc-block-components-product-image img.is-switching {
	opacity: .3;
	transform: scale(1.02);
	transition-duration: .2s;
}

/* Title: semibold navy, two lines at most */
.wc-block-product .wp-block-post-title {
	grid-area: 2 / 1 / 3 / 3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	margin: 14px 0 6px; /* under the stage / above the price row */
	font-size: var(--wejha-text-md); /* 16px */
	font-weight: 600;
	line-height: 1.4;
}

.wc-block-product .wp-block-post-title a {
	color: var(--wejha-heading);
	text-decoration: none;
	transition: color .18s ease;
}

.wc-block-product .wp-block-post-title a:hover {
	color: var(--wejha-teal-text);
}

.wc-block-product .wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wejha-focus-ring);
	outline-offset: 2px;
	border-radius: var(--wejha-radius-sm);
}

/* Price: the start of the last row; a quieter currency; a sale keeps the current price strong */
.wc-block-product .wp-block-woocommerce-product-price {
	grid-area: 3 / 1;
	align-self: center;
	min-width: 0;
	margin: 0;
}

.wc-block-product .wc-block-components-product-price {
	color: var(--wejha-heading);
	font-size: 1.25rem; /* 20px */
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wc-block-product .woocommerce-Price-currencySymbol {
	margin-inline-start: .15em;
	font-size: .6em;
	font-weight: 500;
	color: var(--wejha-text-muted);
}

.wc-block-product .wc-block-components-product-price del {
	margin-inline-end: .35em;
	font-size: .8em;
	font-weight: 500;
	color: var(--wejha-text-muted);
	text-decoration-thickness: 1px;
}

.wc-block-product .wc-block-components-product-price ins {
	color: var(--wejha-heading);
	text-decoration: none;
}

/* Action slot: the end of the last row. WooCommerce's Product Button block, 44px tall; its states (add, Choose,
   stepper, out of stock) share that height so the row never jumps. */
.wc-block-product .wp-block-woocommerce-product-button {
	grid-area: 3 / 2;
	align-self: center;
	justify-self: end;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 44px;
	margin: 0;
}

.wc-block-product .wp-block-woocommerce-product-button :is(.wp-block-button__link, .wejha-qty, .wejha-variations__soldout, span)[hidden] {
	display: none;
}

/* WooCommerce's "View cart" link (revealed after its own button is used) is not part of this interaction */
.wc-block-product .wp-block-woocommerce-product-button .added_to_cart {
	display: none;
}

/* Add: one 44px navy circle with an 18px plus (its text stays for assistive tech) */
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 22px;
	background-color: var(--wejha-navy);
	color: var(--wejha-text-on-primary);
	font-size: var(--wejha-text-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover {
	background-color: var(--wejha-navy-deep);
	color: var(--wejha-text-on-primary);
}

.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:active {
	transform: scale(.94);
	transition-duration: .08s;
}

.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wejha-focus-ring);
	outline-offset: 2px;
}

.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link > span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Blocksy's button hover shine (an absolutely positioned ::before) has no place on a 40px control */
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link::before {
	content: none;
}

.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--wejha-action-icon) center / contain no-repeat;
	mask: var(--wejha-action-icon) center / contain no-repeat;
	--wejha-action-icon: 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.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* Choose (variable product, no variation resolved yet): WooCommerce's own "Select options" link to the product
   page, drawn as a quiet outlined pill in the same slot */
.wc-block-product .wp-block-woocommerce-product-button .product_type_variable {
	width: auto;
	padding: 0 16px 0 14px;
	border: 1.5px solid rgba(5, 48, 90, 0.3);
	background-color: transparent;
	color: var(--wejha-navy);
}

[dir="ltr"] .wc-block-product .wp-block-woocommerce-product-button .product_type_variable {
	padding: 0 14px 0 16px;
}

.wc-block-product .wp-block-woocommerce-product-button .product_type_variable:hover {
	border-color: var(--wejha-navy);
	background-color: var(--wejha-navy);
	color: var(--wejha-text-on-primary);
}

/* The link's own text ("Choose" — set at render, inc/woocommerce.php) is the visible label here */
.wc-block-product .wp-block-woocommerce-product-button .product_type_variable > span {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

.wc-block-product .wp-block-woocommerce-product-button .product_type_variable::after {
	width: 14px;
	height: 14px;
	--wejha-action-icon: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); /* ‹ forward in RTL */
}

[dir="ltr"] .wc-block-product .wp-block-woocommerce-product-button .product_type_variable::after {
	--wejha-action-icon: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); /* › forward in LTR */
}

/* Out of stock (the resolved variation cannot be bought): plain words in the slot, nothing to press */
.wc-block-product .wejha-variations__soldout {
	display: inline-flex;
	align-items: center;
	height: 44px;
	color: var(--wejha-text-muted);
	font-size: var(--wejha-text-sm);
	font-weight: 500;
	white-space: nowrap;
}

/* In cart: the same slot becomes one 44px navy pill — [ remove / − ] [ n ] [ + ] — inc/woocommerce.php appends it
   after WooCommerce's button (order: decrease · count · increase, so the plus is always the outer control at the
   row's end in both directions) and assets/js/product-qty.js keeps it on WooCommerce's cart store. */
.wc-block-product .wejha-qty {
	display: inline-flex;
	align-items: stretch;
	height: 44px;
	border-radius: 22px;
	background: var(--wejha-navy);
	color: var(--wejha-text-on-primary);
	overflow: hidden;
}

.wc-block-product .wejha-qty__btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color .15s ease;
}

.wc-block-product .wejha-qty__btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.wc-block-product .wejha-qty__btn:active::before {
	transform: scale(.85);
}

.wc-block-product .wejha-qty__btn:focus-visible {
	outline: 2px solid var(--wejha-yellow);
	outline-offset: -4px;
	border-radius: 22px;
}

.wc-block-product .wejha-qty__btn::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--wejha-qty-icon) center / contain no-repeat;
	mask: var(--wejha-qty-icon) center / contain no-repeat;
	transition: transform .12s ease;
}

.wc-block-product .wejha-qty__inc::before {
	--wejha-qty-icon: 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.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.wc-block-product .wejha-qty__dec::before {
	--wejha-qty-icon: 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.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* Quantity 1: the decrease control is a remove control — one tap empties this product from the cart. Only the icon
   changes; the control keeps its place. */
.wc-block-product .wejha-qty__dec.is-remove::before {
	width: 19px;
	height: 19px;
	--wejha-qty-icon: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
}

.wc-block-product .wejha-qty__dec.is-remove:hover {
	background: var(--wejha-red);
}

.wc-block-product .wejha-qty__count {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 32px;
	padding: 0 2px;
	color: var(--wejha-text-on-primary);
	font-size: var(--wejha-text-md); /* 16px */
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Variation choices on the stage (inc/woocommerce.php places the row inside the image block): colour dots with a
   white edge, or small white value chips, in the bottom-start corner — the choice sits with the product it changes.
   Tap targets: an invisible area extends each control to ≥ 44px. */
.wc-block-product .wejha-variations {
	position: absolute;
	inset-inline-start: 12px;
	inset-block-end: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: calc(100% - 24px);
}

.wc-block-product .wejha-variations__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.wc-block-product .wejha-swatch {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wejha-radius-pill);
	background: var(--wejha-white);
	color: var(--wejha-navy);
	font: inherit;
	font-size: var(--wejha-text-xs);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.wc-block-product .wejha-swatch::before {
	content: "";
	position: absolute;
	inset: -9px; /* hit area ≥ 36px */
}

.wc-block-product .wejha-swatch:focus-visible {
	outline: 2px solid var(--wejha-focus-ring);
	outline-offset: 3px;
}

.wc-block-product .wejha-swatch:active {
	transform: scale(.92);
	transition-duration: .08s;
}

/* Colour dots (26px): the value's colour inside a white edge and a faint outer ring; the chosen one gets a 2px
   navy ring */
.wc-block-product .wejha-swatch--color {
	width: 26px;
	height: 26px;
	background: var(--wejha-swatch, var(--wejha-border));
	box-shadow: 0 0 0 2px var(--wejha-white), 0 0 0 3px rgba(5, 48, 90, 0.14);
}

.wc-block-product .wejha-swatch--color:hover {
	box-shadow: 0 0 0 2px var(--wejha-white), 0 0 0 3px rgba(5, 48, 90, 0.5);
}

.wc-block-product .wejha-swatch--color.is-selected {
	box-shadow: 0 0 0 2px var(--wejha-white), 0 0 0 4px var(--wejha-navy);
}

/* Value chips: [ 0.5 ] [ 0.7 ] [ 1.0 ] — white, the chosen one navy */
.wc-block-product .wejha-swatch--chip,
.wc-block-product .wejha-swatch--more {
	height: 28px;
	min-width: 34px;
	padding: 0 10px;
	font-size: var(--wejha-text-sm);
}

.wc-block-product .wejha-swatch--chip:hover {
	box-shadow: 0 0 0 1.5px rgba(5, 48, 90, 0.35);
}

.wc-block-product .wejha-swatch--chip.is-selected {
	background: var(--wejha-navy);
	color: var(--wejha-text-on-primary);
}

/* Unavailable (no purchasable variation with this value and the other chosen values): dimmed and struck through,
   still selectable so the "Out of stock" state is explicit */
.wc-block-product .wejha-swatch.is-unavailable {
	opacity: .55;
}

.wc-block-product .wejha-swatch--chip.is-unavailable {
	color: var(--wejha-text-muted);
	text-decoration: line-through;
}

.wc-block-product .wejha-swatch--color.is-unavailable::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, transparent calc(50% - 1px), var(--wejha-white) calc(50% - 1px), var(--wejha-white) calc(50% + 1px), transparent calc(50% + 1px));
}

/* "+N": the remaining values live on the product page */
.wc-block-product .wejha-swatch--more {
	color: var(--wejha-text-muted);
}

.wc-block-product .wejha-swatch--more:hover {
	color: var(--wejha-navy);
	box-shadow: 0 0 0 1.5px rgba(5, 48, 90, 0.35);
}

/* Hover (pointer devices): the photograph eases up 4% more; the card, stage and controls stay still */
@media (hover: hover) {
	.wc-block-product:hover .wc-block-components-product-image img {
		transform: scale(1.08);
	}

	.wc-block-product:hover .wc-block-components-product-image img.is-switching {
		transform: scale(1.02);
	}
}

/* Phones (two columns, ≈ 166px cards): 15px title, 17px price, the add control keeps 44px; the stepper keeps the
   44px height with 38px segments so the price row still fits three-digit prices; an 8px gap in the last row; a price
   too wide for what the stepper leaves (rare) wraps its currency instead of colliding */
@media (max-width: 689.98px) {
	.wc-block-product-template > li.wc-block-product,
	.products > li.product > .wc-block-product {
		column-gap: var(--wejha-space-2);
	}

	.wc-block-product .wc-block-components-product-image {
		border-radius: 14px;
	}

	.wc-block-product .wp-block-post-title {
		margin: 10px 0 4px;
		font-size: 0.9375rem; /* 15px */
	}

	.wc-block-product .wc-block-components-product-price {
		font-size: 1.0625rem; /* 17px */
		white-space: normal;
	}

	.wc-block-product .wejha-qty__btn {
		width: 38px;
	}

	.wc-block-product .wejha-qty__count {
		min-width: 26px;
		font-size: 0.9375rem;
	}

	.wc-block-product .wejha-variations {
		inset-inline-start: 10px;
		inset-block-end: 10px;
	}
}

/* Reduced motion: transitions off, hover/switch transforms off, everything instantly visible ------------------- */
@media (prefers-reduced-motion: reduce) {
	.wc-block-product .wc-block-components-product-image img,
	.wc-block-product .wc-block-components-product-image img.is-switching,
	.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
	.wc-block-product .wp-block-post-title a,
	.wc-block-product .wejha-swatch,
	.wc-block-product .wejha-qty__btn,
	.wc-block-product .wejha-qty__btn::before {
		transition: none;
	}

	.wc-block-product .wc-block-components-product-image img.is-switching,
	.wc-block-product .wejha-swatch:active,
	.wc-block-product:hover .wc-block-components-product-image img {
		transform: scale(1.04);
	}
}

/* Motion layer (only when the visitor allows motion): transform + opacity only ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes wejha-bump {
		0% { transform: scale(1); }
		40% { transform: scale(1.1); }
		100% { transform: scale(1); }
	}

	@keyframes wejha-icon-in {
		from { opacity: 0; transform: scale(.6); }
		to { opacity: 1; transform: scale(1); }
	}

/* Cart action: when the product enters the cart the stepper appears in the action slot and unclips towards the
   inline start (the plus end is visible from the first frame, so the circle reads as expanding into the pill).
   Plays again whenever the stepper is shown, including hydration with items already in the cart. */
@keyframes wejha-qty-expand {
	from { clip-path: inset(0 calc(100% - 44px) 0 0 round 22px); }
	to { clip-path: inset(0 0 0 0 round 22px); }
}

@keyframes wejha-qty-expand-ltr {
	from { clip-path: inset(0 0 0 calc(100% - 44px) round 22px); }
	to { clip-path: inset(0 0 0 0 round 22px); }
}

.wc-block-product .wejha-qty:not([hidden]) {
	animation: wejha-qty-expand .32s cubic-bezier(.2, .7, .2, 1) both;
}

[dir="ltr"] .wc-block-product .wejha-qty:not([hidden]) {
	animation-name: wejha-qty-expand-ltr;
}

/* Quantity stepper feedback: the number bumps when it changes; the trash / minus icon swaps with a scale-in */
.wc-block-product .wejha-qty__count.is-bump {
	animation: wejha-bump .28s cubic-bezier(.2, .7, .2, 1);
}

.wc-block-product .wejha-qty__dec.is-remove::before,
.wc-block-product .wejha-qty__dec:not(.is-remove)::before {
	animation: wejha-icon-in .22s cubic-bezier(.2, .7, .2, 1);
}
}