/* ==========================================================================
   Product card — geometry measured from the Figma (node 3-2), 1440 frame:
   "המומלצים שלנו": card 377 wide × 318 tall (0.84), bottle 430 tall (1.14 × W),
     42% of the bottle rises above the card, price strip 24px below the card top,
     name + latin line at the bottom, inside the card.
   "מוצרים חדשים" (.lg-cards-taupe): taupe card that ends just under the bottle,
     small cream price pill in the corner, name below the card.
   Product photos are white-background shots → multiply makes the white
   disappear over the card colour, so no cutouts are needed.
   ========================================================================== */
.wd-product.wd-hover-alt { --lg-card: var(--lg-cream); --lg-pill: var(--lg-taupe); --lg-pill-ink: #fff; --wd-align: center; --text-align: center; text-align: center; }
.wd-product.wd-hover-alt .product-wrapper {
	position: relative;
	isolation: isolate;          /* one stacking context: the photo multiplies onto the card */
	container-type: inline-size; /* geometry follows the card width, not the viewport */
	--lg-pad: 14px;
	--lg-img-h: calc(100cqi * 1.14);
	--lg-card-top: calc(var(--lg-img-h) * .42);
	--lg-strip-top: calc(var(--lg-card-top) + 16px);
	--lg-strip-h: 40px;
	padding: 0 var(--lg-pad) 20px;
	background: none;
}
.wd-product.wd-hover-alt .product-wrapper::before {
	content: "";
	position: absolute;
	inset: var(--lg-card-top) 0 0 0;
	background: var(--lg-card);
	border-radius: var(--lg-radius-card);
	z-index: -1;
	transition: background-color .3s ease;
}
/* price strip at the top edge of the card */
.wd-product.wd-hover-alt .product-wrapper::after {
	content: "";
	position: absolute;
	top: var(--lg-strip-top);
	inset-inline: var(--lg-pad);
	height: var(--lg-strip-h);
	border-radius: var(--lg-radius);
	background: var(--lg-pill);
	z-index: -1;
	pointer-events: none;
}

.wd-product.wd-hover-alt .product-element-top {
	position: static; transform: none !important; margin: 0 0 12px; overflow: visible;
	/* page colour inside the blend group, only ABOVE the card: the white of the photo multiplies into
	   the page there. (Measured here, on a child of the card, so cqi resolves to the card width.) */
	background: linear-gradient(var(--lg-surround, #fff) 0 0) top / 100% var(--lg-card-top) no-repeat !important;
}
.wd-product.wd-hover-alt .product-image-link {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: var(--lg-img-h);
	padding-inline: 22%;   /* frame for the photo: slim bottles are limited by height, boxes by this width;
	                          the side margins leave room for the price + tag in the strip */
	background: none !important;
}
.wd-product.wd-hover-alt .product-image-link img {
	/* the photo fills its frame and keeps its own shape: a slim bottle is limited by the height and
	   rises out of the card; a gift box / wide bottle is limited by the frame width and sits on the card floor */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center bottom !important;
	/* darken, not multiply: the white photo background still disappears, but the bottle keeps its
	   own colours and reads IN FRONT of the price strip instead of being tinted by it */
	mix-blend-mode: darken;
	background: transparent !important;
	border-radius: 0;
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.wd-product.wd-hover-alt:hover .product-image-link img { transform: translateY(-6px); }
.wd-product.wd-hover-alt .hover-img { display: none !important; }

/* price inside the strip, left (end side in RTL) */
.wd-product.wd-hover-alt .wrap-price { position: static; margin: 0 !important; }
.wd-product.wd-hover-alt .product-element-bottom { flex-grow: 0 !important; }
/* a sale price on the strip stacks: the old price small above the new one, so the pill stays as narrow
   as a regular price and never reaches the bottle (side by side it was twice as wide and covered the label) */
@media (min-width: 768px) {
	/* the price follows the card's width, so it keeps clear of the bottle on narrow cards (1025-1100px) too */
	.wd-product.wd-hover-alt .wrap-price span.price { font-size: clamp(15px, 5.6cqi, 20px); }
	.wd-product.wd-hover-alt.lg-price-long .wrap-price span.price { font-size: clamp(12px, 4.6cqi, 17px); } /* 10,000 ₪ and up */
	.wd-product.wd-hover-alt .wrap-price .price:has(del) { flex-direction: column; justify-content: center; align-items: center; gap: 1px; line-height: 1.05; }
	.wd-product.wd-hover-alt .wrap-price .price:has(del) del { font-size: .66em; opacity: .75; }
	.wd-product.wd-hover-alt .wrap-price .price:has(del) ins { text-decoration: none; }
}
/* a grid row is one height: every card fills its cell, and price + button sit on the same line in all of them */
.products .wd-product.wd-hover-alt > .product-wrapper { height: 100%; }
.products .wd-product.wd-hover-alt .product-element-bottom { flex-grow: 1 !important; }
.products .wd-product.wd-hover-alt .wrap-price { margin-top: auto !important; }
.wd-product.wd-hover-alt .wrap-price .price {
	position: absolute;
	top: var(--lg-strip-top);
	inset-inline-end: calc(var(--lg-pad) + 12px);
	height: var(--lg-strip-h);
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 3;
	font-size: 20px;
	line-height: 1;
	color: var(--lg-pill-ink);
	font-weight: 400;
}
.wd-product.wd-hover-alt .wrap-price .price .amount, .wd-product.wd-hover-alt .wrap-price .price bdi { color: inherit; }
/* the old price takes the colour of the new one (white on the strip, ink under the card on phones);
   WoodMart's own light grey faded into the taupe strip */
.wd-product.wd-hover-alt .wrap-price .price del { font-size: 14px; color: inherit; opacity: .7; }
.wd-product.wd-hover-alt .wrap-price .price ins { text-decoration: none; }

/* badge → text tag inside the strip, right (start side in RTL) */
.wd-product.wd-hover-alt .product-labels {
	position: absolute;
	top: var(--lg-strip-top);
	inset-inline-start: calc(var(--lg-pad) + 12px);
	inset-inline-end: auto;
	height: var(--lg-strip-h);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	z-index: 3;
	margin: 0;
}
.wd-product.wd-hover-alt .product-label {
	min-width: 0; min-height: 0; margin: 0;
	padding: 0; border-radius: 0;
	background: none !important;
	color: var(--lg-pill-ink) !important;
	font-size: 16px; font-weight: 400; text-transform: none; line-height: 1;
}

/* name + small latin/category line */
.wd-product.wd-hover-alt .product-element-bottom { position: static; padding: 0; background: none; text-align: center; }
.wd-product.wd-hover-alt .wd-product-header { justify-content: center !important; text-align: center; }
.wd-product.wd-hover-alt .wd-product-header .wd-entities-title { flex: 1 1 100%; }
.wd-product.wd-hover-alt .wd-entities-title { text-align: center !important; font-size: 20px; font-weight: 400; line-height: 1.2; margin-bottom: 2px; }
.wd-product.wd-hover-alt .wd-entities-title a { color: var(--lg-ink); text-align: center !important; }
.wd-product.wd-hover-alt .wd-product-cats { font-size: 0; color: var(--lg-ink-soft); opacity: .85; margin: 0; }
.wd-product.wd-hover-alt .wd-product-cats a { color: inherit; }
.wd-product.wd-hover-alt .wd-product-cats a:first-child { font-size: 14px; }
.wd-product.wd-hover-alt .wd-product-cats a:not(:first-child),
.wd-product.wd-hover-alt .wd-product-cats a:not(:first-child) ~ * { display: none; }

/* add to cart: takes no room in the card — floats over the bottle on hover (desktop),
   sits under the name on touch screens */
.wd-product.wd-hover-alt .swap-wrapp, .wd-product.wd-hover-alt .swap-elements { height: auto !important; overflow: visible; }
.wd-product.wd-hover-alt .swap-elements { transform: none !important; }
.wd-product.wd-hover-alt .wd-add-btn {
	position: absolute;
	top: calc(var(--lg-img-h) - 58px);
	inset-inline: 0;
	display: flex;
	justify-content: center;
	z-index: 4;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.wd-product.wd-hover-alt:hover .wd-add-btn,
.wd-product.wd-hover-alt:focus-within .wd-add-btn { opacity: 1; transform: none; pointer-events: auto; }
.wd-product.wd-hover-alt .wd-add-btn .button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 42px; padding: 0 24px;
	background: var(--lg-ink) !important; color: #fff !important;
	box-shadow: 0 10px 24px rgba(66,19,28,.22) !important;
}
.wd-product.wd-hover-alt .wd-add-btn .button:hover { background: var(--lg-hero) !important; }
.wd-product.wd-hover-alt .wd-add-btn .button .wd-action-icon { display: none; }
/* WoodMart 8.6 paints the button text itself (dark grey, with the underline of its text-link style),
   which vanished into the dark button: the text follows the button again, white, no underline. */
.wd-product.wd-hover-alt .wd-add-btn .button .wd-action-text { display: inline; color: #fff; font-weight: inherit; border-bottom: 0; }
.wd-product.wd-hover-alt .wd-add-btn .button .wd-action-text::before { display: none; }

/* wishlist / quick view: small icons just under the strip, start side */
.wd-product.wd-hover-alt .wd-buttons { top: calc(var(--lg-strip-top) + var(--lg-strip-h) + 10px); inset-inline-start: 18px; inset-inline-end: auto; z-index: 4; }
.wd-product.wd-hover-alt .wd-compare-btn { display: none; }

/* ---------- "מוצרים חדשים" variant: taupe card ends under the bottle, name below ---------- */
.lg-cards-taupe .wd-product.wd-hover-alt .product-wrapper {
	--lg-img-h: calc(100cqi * 1.3);
	--lg-card-top: calc(var(--lg-img-h) * .43);
	padding: 0 0 8px;
}
.lg-cards-taupe .wd-product.wd-hover-alt .product-wrapper::before { inset: var(--lg-card-top) 0 auto 0; height: calc(var(--lg-img-h) * .57 + 18px); background: var(--lg-card); border-radius: 18px; }
.lg-cards-taupe .wd-product.wd-hover-alt .product-wrapper::after { display: none; }
.lg-cards-taupe .wd-product.wd-hover-alt .product-element-top { margin-bottom: 30px; }
.lg-cards-taupe .wd-product.wd-hover-alt .product-labels { display: none; }
.lg-cards-taupe .wd-product.wd-hover-alt .wrap-price .price {
	top: calc(var(--lg-card-top) + 18px);
	inset-inline-end: 20px;
	height: 42px;
	padding: 0 16px;
	border-radius: 8px;
	background: var(--lg-cream);
	color: var(--lg-taupe-deep);
}
.lg-cards-taupe .wd-product.wd-hover-alt .wd-buttons { top: calc(var(--lg-card-top) + 72px); }
.lg-cards-taupe .wd-product.wd-hover-alt .wd-entities-title { font-size: 21px; }
.lg-cards-taupe .wd-product.wd-hover-alt .product-image-link { padding-inline: 16%; }

/* ---------- touch screens / phones ---------- */
@media (hover: none), (max-width: 1024px) {
	.wd-product.wd-hover-alt .wd-add-btn { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 10px; }
	.wd-product.wd-hover-alt .wd-add-btn .button { box-shadow: none !important; }
}
@media (max-width: 767px) {
	.wd-product.wd-hover-alt .product-wrapper { --lg-pad: 8px; padding: 0 var(--lg-pad) 14px; }
	.wd-product.wd-hover-alt .product-wrapper::before { border-radius: 18px; }
	.wd-product.wd-hover-alt .product-wrapper::after { display: none; }
	.wd-product.wd-hover-alt .product-image-link { padding-inline: 12%; }
	/* too narrow for price + bottle side by side → price under the name, tag as a small pill */
	.wd-product.wd-hover-alt .wrap-price .price,
	.lg-cards-taupe .wd-product.wd-hover-alt .wrap-price .price { position: static; height: auto; padding: 0; background: none; justify-content: center; margin: 6px 0 0; font-size: 18px; color: var(--lg-ink); }
	.wd-product.wd-hover-alt .product-labels { position: static; justify-content: center; height: auto; margin: 0 0 6px; }
	.wd-product.wd-hover-alt .product-label { background: var(--lg-pill) !important; padding: 4px 10px !important; border-radius: 20px; font-size: 13px; }
	.wd-product.wd-hover-alt .wd-entities-title { font-size: 16px; }
	.wd-product.wd-hover-alt .wd-add-btn .button { min-height: 36px; padding: 0 14px; font-size: 14px; }
	.wd-product.wd-hover-alt .wd-buttons { inset-inline-start: 10px; }
}

/* Cut-out photos (transparent background): no colour blending, the bottle is a solid object
   standing in front of the price strip — the same on every product. */
.wd-product.wd-hover-alt .product-image-link img.lg-cut { mix-blend-mode: normal !important; position: relative; z-index: 2; filter: drop-shadow(0 10px 14px rgba(66,19,28,.12)); }
.wd-product.wd-hover-alt .product-element-top { background: none !important; }
.lg-box__slot.is-full img, .lg-box__item-img img { mix-blend-mode: normal; }

/* One size for every product (the client saw a gift box next to a bottle at half its height): the frame is
   almost the whole card wide, so every product reaches the same height, and only a product wider than the
   card itself is limited by the width. Price and tag carry the strip colour themselves, so they stay
   readable where a wider product stands in front of the strip. */
.wd-product.wd-hover-alt .product-image-link { padding-inline: 4%; }
.wd-product.wd-hover-alt .wrap-price .price, .wd-product.wd-hover-alt .product-labels { z-index: 3; }
@media (min-width: 768px) {
	.wd-product.wd-hover-alt .wrap-price .price { inset-inline-end: var(--lg-pad); padding: 0 12px; border-radius: var(--lg-radius); background: var(--lg-pill); }
	.wd-product.wd-hover-alt .product-labels { inset-inline-start: var(--lg-pad); padding: 0 12px; border-radius: var(--lg-radius); background: var(--lg-pill); }
	.wd-product.wd-hover-alt .product-labels:not(:has(.product-label)) { display: none; }
}
.lg-cards-taupe .wd-product.wd-hover-alt .product-image-link { padding-inline: 6%; }
@media (max-width: 767px) {
	.wd-product.wd-hover-alt .product-image-link { padding-inline: 4%; }
}