/**
 * Product card quick actions.
 *
 * Geometry read off the home frame's Discover card (`home-figma.png`, the
 * fourth card of the first row) by pixel scan: **32px circles, 8px apart,
 * centred on the image, 21px above its bottom edge**. That card is the only
 * place in the whole design where a hover state is drawn.
 *
 * The row is positioned against the card, not the image — the image block
 * wraps its own `<img>` in two divs and neither is a containing block, and
 * `position: relative` on the image wrapper would clip the buttons behind the
 * next card. The card `<li>` is made the containing block in the theme's
 * stylesheet, where the rest of the hover surface lives.
 */

.hermizon-card-actions {
	/* `aspect-ratio` sizes the **content** box, and this theme ships no
	 * box-sizing reset — so the 21px padding below was added *outside* the
	 * square and the row measured 333 tall on a 312 card, putting the buttons
	 * flush with the image's bottom edge instead of 21px above it. **The
	 * box-sizing trap, eighth occurrence**, and the second in this phase. */
	box-sizing: border-box;
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;

	/* The row covers the image and nothing else, so the buttons can be pinned
	 * to the image's bottom edge at any card width. `aspect-ratio: 1` is what
	 * does it: with `left` and `right` both 0 the width is the card's, and the
	 * ratio then gives a height equal to the square photograph above the title.
	 *
	 * The first version stated `top: 259px` — 312 less the frame's 21px inset
	 * less the 32px button, which is correct at exactly one card width. At 390
	 * the card is 159 wide, so 259px landed **below** the image and printed the
	 * two circles straight through the price. Every assertion passed: the
	 * buttons were 32px, centred, and 19px above the image bottom *on desktop*.
	 * Only a phone screenshot showed it. */
	aspect-ratio: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-block-end: 21px;
	gap: 8px;

	/* The row sits over the image link, which is the card's largest click
	 * target and the one a shopper reaches for. Only the buttons take clicks. */
	pointer-events: none;

	/* Hidden until the card is hovered or something inside it takes focus.
	 * `visibility` rather than `display` so the transition has two states to
	 * move between, and so the buttons stay out of the accessibility tree and
	 * the tab order while they are invisible. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base),
		visibility var(--wp--custom--transition--base);
}

.hermizon-card-actions__button {
	/* The theme ships no `box-sizing` reset — six defects so far, and a control
	 * that states a size must declare its own. */
	box-sizing: border-box;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
	cursor: pointer;
	transition:
		background var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.hermizon-card-actions__button:hover,
.hermizon-card-actions__button:focus-visible {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

.hermizon-card-actions__icon {
	display: block;
}

/* The size tray (Phase 17). It takes the buttons' place at the image bottom
 * while a size is being chosen: the two circles hide, the chips appear, and
 * `.is-choosing` holds the row visible even when the pointer wanders off the
 * card — a tray that vanishes mid-choice loses the sale. Two classes, so it
 * outranks the single-class hidden state above regardless of load order. */
.hermizon-card-actions.is-choosing {
	visibility: visible;
	opacity: 1;
	transform: none;
	/* No transition while choosing: the fade's `visibility` leg keeps the
	 * computed value at `hidden` for the first frame, and `focus()` on the
	 * first chip silently fails against a hidden subtree. */
	transition: none;
}

.hermizon-card-actions.is-choosing .hermizon-card-actions__button {
	display: none;
}

.hermizon-card-actions__tray {
	pointer-events: auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	justify-content: center;
	gap: 6px;
	max-width: calc(100% - 16px);
}

/* `display: flex` above would beat the user agent's `[hidden]` rule — one
 * class outranks one attribute selector's worth of nothing (E68, again). */
.hermizon-card-actions__tray[hidden] {
	display: none;
}

.hermizon-card-actions__chip {
	box-sizing: border-box;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition:
		background var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.hermizon-card-actions__chip:hover:not(:disabled),
.hermizon-card-actions__chip:focus-visible {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

.hermizon-card-actions__chip:disabled {
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
	text-decoration: line-through;
}

.hermizon-card-actions__chip[aria-busy='true'] {
	opacity: 0.6;
	cursor: progress;
}

/* Added. The chip stays `disabled` through the hold, so this must come after
 * the `:disabled` rule to win on order at equal specificity — a struck-through
 * grey tick would read as "unavailable", the opposite of what happened. */
.hermizon-card-actions__chip.is-added {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	opacity: 1;
	cursor: default;
	text-decoration: none;
}

/* A phone has no hover, and a first tap that only reveals a control is a tap
 * the shopper did not ask for. Below the platform's own 782px the buttons are
 * simply present — the frame draws no mobile layout at all, so this is ours to
 * decide, and "always visible" is the only version that can be operated.
 *
 * `@media (hover: hover)` rather than a width query would be the tidier test,
 * except that it also excludes a touchscreen laptop, where the card is 312px
 * wide and there is room. Width is the honest proxy for the room available. */
@media (max-width: 781px) {
	.hermizon-card-actions {
		visibility: visible;
		opacity: 1;
		transform: none;
	}
}

/* And the devices that reasoning did not reach: a tablet.
 *
 * The width query above covers the phone, and the note above it is right that
 * `hover: hover` alone would wrongly exclude a touchscreen laptop — but that
 * laptop has a mouse and reports `hover: hover`, so it is not the gap. The gap
 * is a device with **no pointer at all and more than 781px of it**. Measured on
 * 2026-08-31, every one of these reports `hover: none`:
 *
 *   iPad portrait   768 x 1024   visible    (the width query catches it)
 *   phone           390 x 844    visible    (likewise)
 *   iPad landscape 1024 x 768    HIDDEN
 *   iPad Pro       1366 x 1024   HIDDEN
 *   Android tablet  800 x 1280   HIDDEN     — by nineteen pixels
 *
 * On those, quick view and the in-card size tray could not be reached at all;
 * tapping the card opened the product page instead, so nothing was unbuyable,
 * but two affordances were simply gone. This is additive: a mouse still gets
 * the hover reveal, because a machine with a mouse never matches `hover: none`. */
@media (hover: none) {
	.hermizon-card-actions {
		visibility: visible;
		opacity: 1;
		transform: none;
	}
}