/**
 * Buttons.
 *
 * From the canvas — Components.dc.html "כפתורים", with the per-context heights
 * the other artboards draw (card 42, category toolbar 42, cart 50, product and
 * checkout 52). One base class, one modifier for colour, one for size; nothing
 * here is scoped to a body class and nothing uses !important.
 *
 * WooCommerce's own markup ships `.button`, `.add_to_cart_button` and
 * `.checkout-button` rather than these class names, so those are mapped onto
 * the same treatment at the end of the file instead of being restyled twice.
 */

.hp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hp-space-2);
	height: var(--hp-control-height);
	padding-inline: var(--hp-space-7);
	border: 1px solid transparent;
	border-radius: var(--hp-radius-pill);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-base);
	font-weight: 600;
	/* Slightly tightened. At 600 weight on a pill this is what stops a Hebrew
	 * label from looking loose against the two round ends. */
	letter-spacing: -0.005em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--hp-duration-fast) var(--hp-ease),
		border-color var(--hp-duration-fast) var(--hp-ease),
		color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

/* The press state is shared by every variant: whatever colour the button is, it
 * settles back down and loses its shadow while held. Declared once, before the
 * colour rules, so a variant's hover can still raise it. */
.hp-btn:active:not(:disabled):not([aria-disabled="true"]) {
	transform: translateY(0);
	box-shadow: var(--hp-shadow-press);
	transition-duration: var(--hp-duration-fast);
}

.hp-btn:focus-visible {
	outline: 2px solid var(--hp-focus);
	outline-offset: 2px;
}

/* ---- colour ---- */

.hp-btn--primary {
	background-color: var(--hp-brand);
	/* The gloss is a background *image*, so a variant can change its colour
	 * without restating it — and it costs no extra element. */
	background-image: var(--hp-gloss);
	color: var(--hp-text-inverse);
}

.hp-btn--primary:hover,
.hp-btn--primary:focus-visible {
	background-color: var(--hp-brand-hover);
	color: var(--hp-text-inverse);
	transform: translateY(var(--hp-lift));
	box-shadow: var(--hp-shadow-lift);
}

.hp-btn--accent {
	background-color: var(--hp-accent);
	background-image: var(--hp-gloss);
	color: var(--hp-text-inverse);
}

.hp-btn--accent:hover,
.hp-btn--accent:focus-visible {
	background-color: var(--hp-accent-hover);
	color: var(--hp-text-inverse);
	transform: translateY(var(--hp-lift));
	box-shadow: 0 0.875rem 2.25rem color-mix(in srgb, var(--hp-accent) 38%, transparent);
}

/* An outline button fills rather than merely darkening its border. It is the
 * secondary action on a row whose primary is already black, so the two swap
 * emphasis on hover instead of both drifting towards the same grey. */
.hp-btn--outline {
	background-color: transparent;
	color: var(--hp-text);
	border-color: var(--hp-border-strong);
}

.hp-btn--outline:hover,
.hp-btn--outline:focus-visible {
	background-color: var(--hp-brand);
	color: var(--hp-text-inverse);
	border-color: var(--hp-brand);
	transform: translateY(var(--hp-lift));
	box-shadow: var(--hp-shadow-lift);
}

/* ---- size ---- */

.hp-btn--sm {
	height: 2.625rem; /* 42px — product card, category toolbar */
	padding-inline: var(--hp-space-6);
	font-size: var(--hp-text-sm);
}

.hp-btn--lg {
	height: 3.25rem; /* 52px — product page, checkout */
	padding-inline: var(--hp-space-8);
	font-size: var(--hp-text-md);
	font-weight: 700;
}

.hp-btn--block {
	display: flex;
	width: 100%;
}

/* An icon shortens the horizontal padding so the pill does not run wide. */
.hp-btn:has(> svg) {
	padding-inline: var(--hp-space-5);
}

.hp-btn > svg {
	flex: none;
}

/* ---- disabled ----
 * Covers the attribute, the ARIA state and WooCommerce's own `.disabled`.
 */

.hp-btn:disabled,
.hp-btn[aria-disabled="true"],
.hp-btn.disabled {
	background-color: var(--hp-surface-subtle);
	/* No gloss and no lift: a disabled control must not look raised. */
	background-image: none;
	color: var(--hp-text-disabled);
	border-color: transparent;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}

/* ---- icon-only control ----
 * Header actions, the wishlist dot on a product card, drawer close.
 */

.hp-icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: var(--hp-surface);
	color: var(--hp-text);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
	cursor: pointer;
	transition:
		background-color var(--hp-duration-fast) var(--hp-ease),
		border-color var(--hp-duration-fast) var(--hp-ease),
		color var(--hp-duration-fast) var(--hp-ease),
		transform var(--hp-duration) var(--hp-ease-out);
}

.hp-icon-button:hover {
	background: var(--hp-accent-tint);
	border-color: var(--hp-accent);
	color: var(--hp-link);
}

.hp-icon-button:active {
	transform: scale(0.94);
	transition-duration: var(--hp-duration-fast);
}

.hp-icon-button:focus-visible {
	outline: 2px solid var(--hp-focus);
	outline-offset: 2px;
}

/* Bare variant for the header row, which sits on the page rather than on a card.
 *
 * It has no border to colour, so the hover target is a tinted disc drawn behind
 * the glyph. Because it is a pseudo-element it can be larger than the icon
 * without changing the row's metrics — the 76px header row stays 76px.
 */
.hp-icon-button--bare {
	width: auto;
	height: auto;
	background: transparent;
	border-color: transparent;
}

.hp-icon-button--bare::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2.25rem;
	height: 2.25rem;
	translate: -50% -50%;
	border-radius: var(--hp-radius-pill);
	background: var(--hp-accent-tint);
	opacity: 0;
	transition: opacity var(--hp-duration-fast) var(--hp-ease);
}

.hp-icon-button--bare:hover::before,
.hp-icon-button--bare:focus-visible::before {
	opacity: 1;
}

.hp-icon-button--bare:hover {
	background: transparent;
	border-color: transparent;
	color: var(--hp-link);
}

/* The glyph and the count sit above the disc. */
.hp-icon-button--bare > * {
	position: relative;
	z-index: 1;
}

/* ---- WooCommerce's own button markup ----
 * Core and its extensions print these classes directly; mapping them here means
 * the templates stay unmodified and every plugin-rendered button inherits the
 * same treatment.
 */

/**
 * `.alt` is named alongside the plain classes throughout this section.
 *
 * WooCommerce marks the primary action on a page — add to cart, proceed to
 * checkout, place order — with `.alt`, and colours it separately from every
 * other button. Two things follow:
 *
 *  1. Those declarations are guarded by
 *     `:where(body:not(.woocommerce-block-theme-has-button-styles))`, which
 *     inc/setup.php opts out of. That alone is enough to stop the purple.
 *  2. But `.woocommerce` sits on <body>, so core's selector scores (0,3,1)
 *     while a bare `.woocommerce a.button` is (0,2,1). Relying on the opt-out
 *     alone would leave the theme one plugin change away from losing the
 *     shop's three most important buttons, with no rule in this file that even
 *     mentions them.
 *
 * So `.alt` is written out. It takes the same treatment as every other button
 * rather than a louder one: in this palette the brand black already is the
 * loudest thing on the page, and giving the primary action a second colour
 * would put two competing emphases in the cart.
 */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hp-space-2);
	height: var(--hp-control-height);
	padding-inline: var(--hp-space-7);
	background-color: var(--hp-brand);
	background-image: var(--hp-gloss);
	color: var(--hp-text-inverse);
	border: 1px solid transparent;
	border-radius: var(--hp-radius-pill);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-base);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration) var(--hp-ease-out),
		transform var(--hp-duration) var(--hp-ease-out);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: var(--hp-brand-hover);
	color: var(--hp-text-inverse);
	transform: translateY(var(--hp-lift));
	box-shadow: var(--hp-shadow-lift);
}

.woocommerce .button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce #respond input#submit:active {
	transform: translateY(0);
	box-shadow: var(--hp-shadow-press);
	transition-duration: var(--hp-duration-fast);
}

/* The checkout's place-order button is the page's single largest commitment. */
.woocommerce #place_order,
.woocommerce .checkout-button {
	width: 100%;
	height: 3.25rem;
	font-size: var(--hp-text-md);
	font-weight: 700;
}

.woocommerce .button.disabled,
.woocommerce a.button.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled] {
	background-color: var(--hp-surface-subtle);
	background-image: none;
	color: var(--hp-text-disabled);
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}