/**
 * Built entirely on WoodMart's own custom properties, so the bridge inherits the
 * theme's palette, form height, border radius, fonts and alignment. There is not
 * a single hardcoded colour here — restyling the theme restyles this.
 *
 * Logical properties (inline-start/end) keep RTL correct without overrides.
 */

/* -------------------------------------------------------------------------
 * Price block — lives inside WoodMart's .price, so it inherits .price colour,
 * weight and font size, and .price del / .price ins keep working for sales.
 * ---------------------------------------------------------------------- */

.hadas-cup-price-main {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	justify-content: inherit;
}

/* .wd-price-unit is a WoodMart class; this only tightens the spacing. */
.price .hadas-cup-unit {
	margin-inline-start: 2px;
	font-size: 85%;
	white-space: nowrap;
}

.hadas-cup-hint {
	display: block;
	margin-top: 2px;
	color: var(--color-gray-500, #767676);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
}

.hadas-cup-sep {
	opacity: 0.55;
	padding-inline: 2px;
}

/* WoodMart clips .product-rating-price to one line height when a product has
   stars, which would cut the hint off. Let these cards breathe.

   Note what this costs: that fixed height is also how the theme keeps every card
   in a row the same height. Releasing it means the plugin has to reserve those
   lines itself — see "Equal card heights" below, which is what .hadas-cup-equal
   is for. */
.hadas-cup-product .product-rating-price {
	overflow: visible !important;
	height: auto !important;
}

.hadas-cup-product .wrapp-product-price {
	transform: none !important;
}

/* -------------------------------------------------------------------------
 * Mode switcher — pills in WoodMart's form/primary colours.
 * ---------------------------------------------------------------------- */

.hadas-cup {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: var(--wd-align, center);
	margin-top: 6px;
	width: 100%;
}

/* When neither the switcher nor the total is shown, the wrapper still carries the
   pricing data the script needs — it just must not take up space. */
.hadas-cup:empty {
	display: none;
}

.hadas-cup-modes {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 3px;
	border-radius: calc(var(--wd-form-brd-radius, 5px) + 3px);
	background-color: var(--wd-form-bg, rgba(0, 0, 0, 0.04));
	box-shadow: inset 0 0 0 var(--wd-form-brd-width, 1px) var(--wd-form-brd-color, rgba(0, 0, 0, 0.1));
	max-width: 100%;
}

.hadas-cup-mode-input {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hadas-cup-mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--wd-form-brd-radius, 5px);
	color: var(--wd-text-color, inherit);
	font-family: var(--wd-text-font, inherit);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	user-select: none;
	white-space: nowrap;
}

.hadas-cup-mode:hover {
	color: var(--wd-primary-color, #333);
}

.hadas-cup-mode-input:checked + .hadas-cup-mode {
	background-color: var(--wd-primary-color, #333);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.hadas-cup-mode-input:focus-visible + .hadas-cup-mode {
	outline: 2px solid var(--wd-primary-color, #333);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Live total.
 * ---------------------------------------------------------------------- */

.hadas-cup-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	color: var(--wd-text-color, inherit);
	font-size: 13px;
	line-height: 1.4;
}

.hadas-cup-total-label {
	color: var(--color-gray-500, #767676);
	font-weight: 400;
}

.hadas-cup-total-value {
	color: var(--wd-primary-color, inherit);
	font-weight: 600;
}

.hadas-cup-total-value .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.hadas-cup-total-weight {
	color: var(--color-gray-500, #767676);
	font-size: 12px;
}

.hadas-cup-total-weight:not(:empty)::before {
	content: "·";
	padding-inline: 4px;
	opacity: 0.55;
}

.hadas-cup-total-single {
	flex-basis: 100%;
	margin-top: 8px;
	font-size: 15px;
}

/* -------------------------------------------------------------------------
 * The stepper: "− 0 יחידה +".
 *
 * direction:ltr keeps minus on the left and plus on the right in both RTL and
 * LTR pages, matching the reference design. The unit label re-isolates itself.
 * ---------------------------------------------------------------------- */

.hadas-cup-stepper {
	direction: ltr;
	display: inline-flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 2px;
	box-sizing: border-box;
	user-select: none;
	transition: opacity 0.2s ease;
}

.hadas-cup-stepper.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.hadas-cup-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.hadas-cup-btn:hover {
	transform: scale(1.18);
}

.hadas-cup-btn:active {
	transform: scale(0.94);
}

.hadas-cup-btn:focus {
	outline: none;
}

.hadas-cup-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 3px;
}

.hadas-cup-stepper-value {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.15;
}

.hadas-cup-stepper-qty {
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hadas-cup-stepper-unit {
	direction: rtl;
	unicode-bidi: isolate;
	font-size: 11px;
	font-weight: 400;
	opacity: 0.85;
	white-space: nowrap;
}

/* --- Variant: overlaid on the product image --------------------------- */

.hadas-cup-stepper--image {
	position: absolute;
	z-index: 3;
	inset-inline: 8%;
	bottom: 50%;
	transform: translateY(50%);
	width: 84%;
	min-height: 46px;
	padding: 6px 10px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
	color: var(--wd-text-color, #333);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* In the cart: solid rather than translucent, so "in your basket" reads clearly. */
.hadas-cup-stepper--image.is-active {
	background-color: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

/* --- Reveal on hover --------------------------------------------------- */

.hadas-cup-stepper--image.is-reveal-hover {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(50%) translateY(6px);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease,
		background-color 0.2s ease, box-shadow 0.2s ease;
}

/* .hadas-cup-product sits on the card root itself (post_class), so it holds in
   all 13 card layouts. .state-hover is WoodMart's own JS-applied hover class —
   following it rather than fighting it keeps the timing identical to the
   theme's own hover block. */
.hadas-cup-product:hover .hadas-cup-stepper--image.is-reveal-hover,
.hadas-cup-product.state-hover .hadas-cup-stepper--image.is-reveal-hover,
.wd-product:hover .hadas-cup-stepper--image.is-reveal-hover,
.wd-product.state-hover .hadas-cup-stepper--image.is-reveal-hover,
li.product:hover .hadas-cup-stepper--image.is-reveal-hover,
.hadas-cup-stepper--image.is-reveal-hover:focus-within {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(50%);
}

/* Opt-in only ("בריחוף — ונשאר כשהמוצר בסל"): once the product is in the cart,
   keep the stepper on screen so the shopper can see and change what they
   picked without hunting for the card. */
.hadas-cup-stepper--image.is-reveal-hover.is-reveal-sticky.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(50%);
}

/* Devices that genuinely cannot hover — without this the shop could not be
   used on a phone at all. Deliberately not (pointer: coarse): a touchscreen
   laptop reports coarse while still having a mouse, and would wrongly get the
   always-visible stepper.

   On these devices the stepper is normally collapsed to a floating button (see
   the .is-fab block at the end of this file) so it does not cover the photo. */
@media (hover: none) {
	.hadas-cup-stepper--image.is-reveal-hover {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(50%);
	}
}

.hadas-cup-stepper--image .hadas-cup-btn {
	width: 34px;
	color: var(--wd-primary-color, #333);
}

.hadas-cup-stepper--image .hadas-cup-stepper-qty {
	color: var(--wd-primary-color, #333);
}

/* The thumb is the positioning context — and the sizing reference for the
   overlay stepper, so it scales to the card, not the viewport. container-type
   inline-size applies only layout/style/inline-size containment (no paint
   clipping), so WoodMart's own badges and hover overlays are unaffected. */
.hadas-cup-product .wd-product-thumb {
	position: relative;
	container-type: inline-size;
	container-name: hadascard;
}

/* --- Variant: beside the add-to-cart button --------------------------- */

.hadas-cup-btn-wrapp {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: var(--wd-align, center);
	width: 100%;
}

.hadas-cup-stepper--button {
	min-height: var(--wd-form-height, 36px);
	padding: 2px 6px;
	border: var(--wd-form-brd-width, 1px) solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.15));
	border-radius: var(--wd-form-brd-radius, 5px);
	background-color: var(--wd-form-bg, transparent);
	color: var(--wd-form-color, inherit);
	min-width: 104px;
}

.hadas-cup-stepper--button .hadas-cup-btn {
	width: 26px;
	font-size: 18px;
}

.hadas-cup-stepper--button .hadas-cup-stepper-qty {
	font-size: 15px;
}

/* Let the button take the remaining width rather than being squeezed. */
.hadas-cup-btn-wrapp > a.button,
.hadas-cup-btn-wrapp > a.add-to-cart-loop {
	flex: 1 1 auto;
	min-width: 0;
}

/* Icon-only buttons in carousels must stay square. */
.hadas-cup-btn-wrapp > a.wd-action-btn {
	flex: 0 0 auto;
}

.hadas-cup-product.wd-fade-off .wd-product-card-hover {
	margin-top: 8px;
}

.hadas-cup-product .wd-add-btn {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * The row under the product image: "ק״ג | יח׳" on one side, the quantity on
 * the other, above the product title.
 *
 * The switcher is first in the markup — a shopper chooses how they are buying
 * before how much, and that is the order a screen reader and the tab key should
 * follow — while `order` puts the quantity at the inline start visually, as in
 * the reference design.
 * ---------------------------------------------------------------------- */

.hadas-cup-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 8px;
	margin-bottom: var(--hadas-cup-row-gap, 8px);
}

/* Nothing to show: no switcher, no total, no stepper. The .hadas-cup inside is
   still needed — it carries the pricing JSON the script reads. */
.hadas-cup-row.is-empty {
	display: none;
}

.hadas-cup-row .hadas-cup {
	flex: 0 1 auto;
	align-items: stretch;
	margin-top: 0;
	width: auto;
	max-width: 100%;
}

.hadas-cup-row .hadas-cup-stepper--row {
	order: -1;
}

/* Compact pills: the card gets "ק״ג", the product page gets "לפי משקל". Tight
   enough that the switcher and the stepper still share one line in a narrow
   column — a 190px card in a 4-up grid is the case that decides these numbers. */
.hadas-cup-row .hadas-cup-mode {
	padding: 3px 8px;
	font-size: 11px;
}

.hadas-cup-row .hadas-cup-modes {
	padding: 2px;
	gap: 2px;
}

.hadas-cup-row .hadas-cup-total {
	flex-basis: 100%;
	font-size: 12px;
}

/* --- Variant: the stepper in that row --------------------------------- */

.hadas-cup-stepper--row {
	gap: 3px;
	align-items: center;
}

.hadas-cup-stepper--row .hadas-cup-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--wd-form-bg, rgba(0, 0, 0, 0.05));
	box-shadow: inset 0 0 0 var(--wd-form-brd-width, 1px) var(--wd-form-brd-color, rgba(0, 0, 0, 0.1));
	color: var(--wd-primary-color, #333);
	font-size: 18px;
}

.hadas-cup-stepper--row .hadas-cup-stepper-value {
	min-width: 26px;
	padding-inline: 2px;
}

.hadas-cup-stepper--row .hadas-cup-stepper-qty {
	font-size: 16px;
}

.hadas-cup-stepper--row .hadas-cup-stepper-unit {
	font-size: 10px;
}

/* With the pills on screen the unit under the number is saying "ק״ג" twice —
   and the width it costs is exactly what pushes the row onto a second line in a
   narrow card. The class comes from PHP, which knows whether the switcher was
   rendered, so no :has() and no guessing. */
.hadas-cup-row.has-switcher .hadas-cup-stepper--row .hadas-cup-stepper-unit {
	display: none;
}

/* In the cart, the number carries the theme's primary colour, the same signal
   the overlay stepper gives. */
.hadas-cup-stepper--row.is-active .hadas-cup-stepper-qty {
	color: var(--wd-primary-color, inherit);
}

/* -------------------------------------------------------------------------
 * Equal card heights.
 *
 * A card priced per kilo carries a weight line ("180 גרם"); one priced per unit
 * has nothing to put there. A product with two pricing methods carries a row of
 * pills; one with a single method has none. Left alone, each of those is a line
 * that exists on some cards and not others, so a grid comes out ragged and a
 * carousel — which sizes every slide to its own content — comes out staggered.
 *
 * The fix is to reserve the slot rather than to remove the content: each
 * optional line always occupies exactly one line's worth of space, whether or
 * not it has anything in it. PHP and the script both emit an empty hint element
 * for this reason, and rows with nothing to show keep their height and hide
 * their contents (.is-reserved) instead of collapsing (.is-empty).
 *
 * Every value is a custom property, so a shop with a different type scale can
 * retune the reserved heights without touching a selector.
 * ---------------------------------------------------------------------- */

.hadas-cup-equal {
	--hadas-cup-hint-line: 1.45em;
	--hadas-cup-row-line: 30px;
	--hadas-cup-row-gap: 8px;

	/*
	 * What a visible row actually costs the card, to the pixel: its own height,
	 * its bottom margin, and the flex gap the theme puts between card rows —
	 * which also disappears along with the row. --wd-prod-gap is WoodMart's own
	 * variable and resolves to 0 on themes that have no such gap.
	 *
	 * Both sides of the sum read these same tokens on purpose. The first version
	 * of this hardcoded the height on one side and left the margin out of the
	 * other, which is exactly how you end up 8px short.
	 */
	--hadas-cup-row-slot: calc(
		var(--hadas-cup-row-line) + var(--hadas-cup-row-gap) + var(--wd-prod-gap, 0px)
	);
}

/* One line, always — and never two. A hint long enough to wrap would put the
   ragged heights straight back, so it is clipped with an ellipsis instead. That
   only ever bites when several hint lines are switched on at once in a narrow
   card. */
.hadas-cup-equal .hadas-cup-hint {
	min-height: var(--hadas-cup-hint-line);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * A row with nothing in it is removed outright, never merely hidden.
 *
 * An invisible-but-present element next to the product title is a real risk:
 * the title's alignment depends on how a given card template lays its children
 * out, and a reserved-but-empty sibling was reported pulling titles to the wrong
 * side on a live shop. Nothing this plugin does for the sake of height should be
 * able to move the theme's own text around.
 *
 * So the height that row would have taken is reserved *below* the title, inside
 * markup this plugin owns and controls: the hint line, and — for a product with
 * no price element at all — the price wrapper. Either way the total comes to the
 * same number, which is all that equal heights actually requires. Where the
 * space sits is invisible; a shifted title is not.
 */
.hadas-cup-row.is-reserved {
	display: none;
}

.hadas-cup-equal .hadas-cup-row.is-reserved ~ * .hadas-cup-hint {
	min-height: calc(var(--hadas-cup-hint-line) + var(--hadas-cup-row-slot));
}

/* The safety net for a product whose price block is missing entirely, which
   WooCommerce renders as no .price element at all rather than an empty one —
   so there is no hint element either. Same total, reserved one level up. */
.hadas-cup-equal .wrapp-product-price {
	min-height: calc(1.4em + var(--hadas-cup-hint-line));
}

.hadas-cup-equal .hadas-cup-row.is-reserved ~ * .wrapp-product-price,
.hadas-cup-equal .hadas-cup-row.is-reserved ~ .wrapp-product-price {
	min-height: calc(1.4em + var(--hadas-cup-hint-line) + var(--hadas-cup-row-slot));
}

/* A row that *does* have something to show stays in flow, and is kept as a
   full-width block so that no card layout can treat it as an inline or
   shrink-to-fit item sitting beside the title. */
.hadas-cup-row {
	width: 100%;
	align-self: stretch;
}

/* The row is pinned to the same height it is reserved at. Without this it is
   whatever the pills happen to measure — 25.4px at the default type scale — and
   a card that shows the row ends up a few pixels taller than a card that
   reserves it. Both sides of the sum have to use the same number. */
.hadas-cup-equal .hadas-cup-row {
	min-height: var(--hadas-cup-row-line);
}

/* -------------------------------------------------------------------------
 * Dotted dividers between title / price / weight, as in the reference design.
 * ---------------------------------------------------------------------- */

.hadas-cup-dividers .wrapp-product-price {
	position: relative;
	padding-top: 8px;
}

.hadas-cup-dividers .wrapp-product-price::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	border-top: 1px dotted var(--wd-form-brd-color, rgba(0, 0, 0, 0.16));
}

.hadas-cup-dividers .hadas-cup-hint {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dotted var(--wd-form-brd-color, rgba(0, 0, 0, 0.16));
}

/* -------------------------------------------------------------------------
 * "Flies to the cart" — a copy of the product photo arcs into the cart icon.
 *
 * The element is created by frontend.js, parked on <body> so no card's
 * overflow, stacking context or transform can clip it, and removed when the
 * animation ends. Position and keyframes are set inline from measured
 * coordinates; what belongs in CSS is only how it looks.
 * ---------------------------------------------------------------------- */

.hadas-cup-fly {
	position: fixed;
	z-index: 100000;
	box-sizing: border-box; /* The script measures the size including the ring. */
	margin: 0;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	object-fit: cover;
	pointer-events: none;

	/* The animation only touches transform and opacity, both composited, so a
	   shopper tapping + down a long grid never drops a frame. */
	will-change: transform, opacity;
}

/* The catch: the icon takes the hit as the count updates. Scoped to a class the
   script adds and removes, so the theme's own cart markup is untouched. */
.hadas-cup-cart-pop {
	animation: hadas-cup-cart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hadas-cup-cart-pop {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.28);
	}
	100% {
		transform: scale(1);
	}
}

/* Someone who asked their system for less motion gets the quantity and the cart
   count, and nothing thrown across the screen. The script checks this too, and
   never even builds the element. */
@media (prefers-reduced-motion: reduce) {
	.hadas-cup-fly {
		display: none;
	}

	.hadas-cup-cart-pop {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * The always-present hook the cart-state fragment replaces.
 * ---------------------------------------------------------------------- */

.hadas-cup-cart-state {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Product page.
 * ---------------------------------------------------------------------- */

.single-product .hadas-cup {
	align-items: flex-start;
	margin-bottom: 10px;
}

.single-product .hadas-cup-modes {
	font-size: 13px;
}

.single-product .hadas-cup-mode {
	padding: 6px 16px;
	font-size: 13px;
}

.hadas-cup-qty-unit {
	display: inline-block;
	margin-inline-start: 6px;
	color: var(--color-gray-500, #767676);
	font-size: 12px;
}

/* -------------------------------------------------------------------------
 * Side cart / mini cart.
 * ---------------------------------------------------------------------- */

.hadas-cup-mini {
	display: block;
	line-height: 1.6;
}

.hadas-cup-mini-qty {
	font-weight: 600;
}

.hadas-cup-mini-weight {
	color: var(--color-gray-500, #767676);
}

.hadas-cup-mini-rate {
	color: var(--color-gray-500, #767676);
	font-size: 92%;
	white-space: nowrap;
}

.hadas-cup-mini-rate .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.hadas-cup-mini-total {
	display: block;
	margin-top: 2px;
	color: var(--wd-primary-color, inherit);
	font-weight: 600;
}

.hadas-cup-mini-total-label {
	color: var(--color-gray-500, #767676);
	font-weight: 400;
}

.hadas-cup-mini-total .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.hadas-cup-times {
	opacity: 0.6;
	padding-inline: 1px;
}

.hadas-cup-order-qty {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Small screens.
 * ---------------------------------------------------------------------- */

@media (max-width: 768.98px) {
	.hadas-cup-mode {
		padding: 4px 9px;
		font-size: 11px;
	}

	.hadas-cup-hint {
		font-size: 11px;
	}

	.hadas-cup-btn-wrapp {
		gap: 6px;
	}

	.hadas-cup-stepper--image {
		inset-inline: 6%;
		width: 88%;
		min-height: 40px;
		padding: 4px 8px;
	}

	.hadas-cup-stepper--image .hadas-cup-btn {
		width: 30px;
		font-size: 20px;
	}

	.hadas-cup-stepper-qty {
		font-size: 16px;
	}

	.hadas-cup-stepper-unit {
		font-size: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Adaptive sizing — the overlay stepper scales to the width of the CARD it
 * sits on (dense grids, carousels, related / upsell strips, narrow mobile
 * columns), so the +/- controls never look oversized on a small product nor
 * cramped on a large one. Browsers without container-query support keep the
 * fixed sizes defined above.
 * ---------------------------------------------------------------------- */

@supports (container-type: inline-size) {
	.hadas-cup-stepper--image {
		min-height: clamp(30px, 15cqi, 46px);
		padding: clamp(3px, 2cqi, 6px) clamp(6px, 3cqi, 10px);
		gap: clamp(1px, 0.6cqi, 3px);
	}

	.hadas-cup-stepper--image .hadas-cup-btn {
		width: clamp(24px, 12cqi, 34px);
		font-size: clamp(15px, 8cqi, 22px);
	}

	.hadas-cup-stepper--image .hadas-cup-stepper-qty {
		font-size: clamp(12px, 6.5cqi, 18px);
	}

	.hadas-cup-stepper--image .hadas-cup-stepper-unit {
		font-size: clamp(8px, 3.5cqi, 11px);
	}

	/* Very narrow cards: widen the pill a touch and drop the unit word so the
	   number and the +/- stay legible and tappable. */
	@container hadascard (max-width: 150px) {
		.hadas-cup-stepper--image {
			inset-inline: 5%;
			width: 90%;
			border-radius: 14px;
		}

		.hadas-cup-stepper--image .hadas-cup-stepper-unit {
			display: none;
		}
	}
}

/* The beside-the-button stepper must be free to shrink in a narrow column
   instead of forcing the add-to-cart row to overflow. */
.hadas-cup-stepper--button {
	min-width: 84px;
	flex: 0 1 auto;
}

/* -------------------------------------------------------------------------
 * Touch devices — the collapsed floating button.
 *
 * A phone has no hover, so the overlay stepper would otherwise have to sit on
 * the photo permanently and cover the produce. Instead it collapses to a small
 * round button in the corner of the image and expands to the full
 * "− 1 יחידה +" pill on tap (frontend.js adds .is-open), then folds back on its
 * own. Not in the cart: the + itself is the button. In the cart: the quantity
 * is, in the theme's primary colour, so the card still reads as "in my basket"
 * at a glance.
 *
 * Everything here is scoped to .is-fab (added by Loop::stepper_markup when the
 * "בורר הכמות בנייד" setting is on) inside @media (hover: none), so desktop and
 * the always-on option are untouched.
 *
 * transform is forced off: the reveal rules above centre the pill with
 * translateY(50%) at a higher specificity than a two-class selector here, and
 * the floating button is bottom-anchored instead.
 *
 * Physical right/left rather than inset-inline: .hadas-cup-stepper sets
 * direction:ltr on itself to keep − on the left, which would fight the RTL
 * mirroring we want for the button's corner.
 * ---------------------------------------------------------------------- */

@media (hover: none) {
	.hadas-cup-stepper--image.is-fab {
		inset-inline: auto;
		right: 8px;
		left: auto;
		bottom: 8px;
		width: auto;
		min-width: 0;
		min-height: 0;
		gap: 0;
		padding: 0;
		border-radius: 999px;
		background-color: rgba(255, 255, 255, 0.94);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
		transform: none !important;
		transition: background-color 0.2s ease, box-shadow 0.2s ease;

		/* cursor:pointer is load-bearing, not cosmetic: iOS Safari does not bubble
		   click from a non-interactive element (the quantity <span> that becomes the
		   button once the product is in the cart) to document, where the delegated
		   handler lives, unless the element looks clickable.

		   touch-action removes the 300ms double-tap-zoom wait, so + feels instant. */
		cursor: pointer;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.hadas-cup-stepper--image.is-fab .hadas-cup-stepper-value {
		cursor: pointer;
	}

	[dir="rtl"] .hadas-cup-stepper--image.is-fab {
		right: auto;
		left: 8px;
	}

	/* --- Collapsed ---------------------------------------------------- */

	.hadas-cup-stepper--image.is-fab:not(.is-open) .hadas-cup-minus,
	.hadas-cup-stepper--image.is-fab:not(.is-open) .hadas-cup-stepper-unit {
		display: none;
	}

	.hadas-cup-stepper--image.is-fab:not(.is-open):not(.is-active) .hadas-cup-stepper-value {
		display: none;
	}

	.hadas-cup-stepper--image.is-fab.is-active:not(.is-open) .hadas-cup-plus {
		display: none;
	}

	/* One square tap target either way, comfortably over the 44px guideline
	   once the shadow and the card gap are counted. */
	.hadas-cup-stepper--image.is-fab:not(.is-open) .hadas-cup-btn,
	.hadas-cup-stepper--image.is-fab:not(.is-open) .hadas-cup-stepper-value {
		flex: 0 0 auto;
		width: 38px;
		min-width: 38px;
		height: 38px;
		font-size: 21px;
	}

	.hadas-cup-stepper--image.is-fab:not(.is-open) .hadas-cup-stepper-qty {
		font-size: 15px;
	}

	/* In the cart: filled, so the quantity reads as a badge. */
	.hadas-cup-stepper--image.is-fab.is-active:not(.is-open) {
		background-color: var(--wd-primary-color, #333);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
	}

	.hadas-cup-stepper--image.is-fab.is-active:not(.is-open) .hadas-cup-stepper-qty {
		color: #fff;
	}

	/* --- Expanded ----------------------------------------------------- */

	.hadas-cup-stepper--image.is-fab.is-open {
		right: 6%;
		left: 6%;
		bottom: 8px;
		width: 88%;
		min-height: 42px;
		padding: 4px 8px;
		gap: 2px;
		background-color: #fff;
		box-shadow: 0 3px 16px rgba(0, 0, 0, 0.22);
		animation: hadas-cup-fab-open 0.18s ease;
	}

	/* The individual `scale` property, not transform: the rule above has to force
	   transform off with !important to beat the centring reveal rules, and an
	   !important declaration also wins over an animation. */
	@keyframes hadas-cup-fab-open {
		from {
			opacity: 0.4;
			scale: 0.94;
		}
		to {
			opacity: 1;
			scale: 1;
		}
	}

	.hadas-cup-stepper--image.is-fab.is-open .hadas-cup-btn {
		width: 34px;
		font-size: 22px;
	}

	.hadas-cup-stepper--image.is-fab.is-open .hadas-cup-stepper-qty {
		font-size: 17px;
	}

	.hadas-cup-stepper--image.is-fab.is-open .hadas-cup-stepper-unit {
		font-size: 11px;
	}

	/* A tap on a touchscreen leaves :hover stuck on the element it landed on, so
	   the grow-on-hover effect would freeze the + at 1.18×. The :active press
	   feedback below it still works. */
	.hadas-cup-stepper--image.is-fab .hadas-cup-btn:hover {
		transform: none;
	}

	.hadas-cup-stepper--image.is-fab .hadas-cup-btn:active {
		transform: scale(0.92);
	}

	/* Rapid tapping must stay possible while a cart write is in flight — the
	   script already coalesces the clicks into one request, so only the dimming
	   is kept here. */
	.hadas-cup-stepper.is-busy {
		pointer-events: auto;
	}
}

/* Respect a reduced-motion preference: no grow animation, just appear. */
@media (hover: none) and (prefers-reduced-motion: reduce) {
	.hadas-cup-stepper--image.is-fab.is-open {
		animation: none;
	}
}