/**
 * Shared product card — used by the Product Feature Grid, the Grab-a-Gift
 * carousel, and any future standalone Product Card widget.
 *
 * Values traced from Figma node 2142:57 (default) and 2214:316 (hover).
 * Transition timing is NOT specified in the Figma file (the variant carries no
 * motion data), so the easing below is a considered default, not a spec value.
 */

.ashers-card {
	--ashers-card-radius: 30px;
	--ashers-card-media-bg: #fff5e4;
	--ashers-card-text: #5f3d31;
	--ashers-card-ink: #24150b;
	--ashers-card-cart-bg: #ffffff;
	--ashers-card-cart-bg-hover: #c5a47e;
	--ashers-card-cart-radius: 5px;
	--ashers-card-cart-size: 40px;
	--ashers-card-cart-inset: 20px;
	--ashers-card-cart-width-hover: 149px;
	--ashers-card-shadow: 0 0 10px rgba(36, 21, 11, 0.15);
	--ashers-card-media-height: 320px;
	--ashers-card-ease: 240ms cubic-bezier(0.4, 0, 0.2, 1);

	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
}

.ashers-card--carousel {
	--ashers-card-media-height: 400px;
}

/* ------------------------------------------------------------------ media */

.ashers-card__media {
	position: relative;
	height: var(--ashers-card-media-height);
	border-radius: var(--ashers-card-radius);
	background-color: var(--ashers-card-media-bg);
	overflow: hidden;
}

.ashers-card__media-link {
	display: block;
	height: 100%;
}

.ashers-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	mix-blend-mode: multiply;
}

/* ------------------------------------------------------------- cart button */

.ashers-card__cart {
	position: absolute;
	top: var(--ashers-card-cart-inset);
	right: var(--ashers-card-cart-inset);
	/* The image link fills the media box underneath. Positioned elements already
	   paint above static siblings, but state that explicitly so the button keeps
	   the clicks if the link is ever given a position of its own. */
	z-index: 2;

	display: inline-flex;
	align-items: center;
	/*
	 * Centred in both states, so the icon sits on the button's own centre.
	 * It used to be flex-end, which pinned an 18px icon to the right of a 20px
	 * content box and left it 1px off-centre in the circle.
	 *
	 * There is deliberately NO gap here. A gap applies between the collapsed,
	 * zero-width label and the icon just as much as it does when the label is
	 * open, so it would push the icon off-centre the moment this is centred.
	 * The spacing lives on the label instead, where it collapses with it.
	 */
	justify-content: center;

	width: var(--ashers-card-cart-size);
	height: var(--ashers-card-cart-size);
	padding: 10px;
	box-sizing: border-box;

	border: 0;
	border-radius: var(--ashers-card-cart-radius);
	background-color: var(--ashers-card-cart-bg);
	box-shadow: var(--ashers-card-shadow);
	color: var(--ashers-card-ink);
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;

	transition:
		width var(--ashers-card-ease),
		background-color var(--ashers-card-ease);
}

/* The label is present in the DOM at all times for screen readers, but is
   visually collapsed until the button itself is hovered or focused. */
.ashers-card__cart-label {
	flex: 0 0 auto;
	max-width: 0;
	/* The gap between label and icon, owned by the label so that a collapsed
	   label takes up nothing at all. */
	margin-right: 0;
	opacity: 0;
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 28px;
	text-transform: uppercase;
	transition:
		max-width var(--ashers-card-ease),
		margin-right var(--ashers-card-ease),
		opacity var(--ashers-card-ease);
}

/* Never let the icon be the thing that shrinks when the pill is mid-animation. */
.ashers-card__cart-icon {
	flex: 0 0 auto;
}

.ashers-card__cart-icon::before {
	/* fa-cart-shopping */
	content: "\f07a";
	font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
	font-weight: 900;
	font-size: 16px;
	line-height: 18px;
	font-style: normal;
	display: inline-block;
}

/*
 * The pill opens on the BUTTON's own hover, not the card's. Hovering the card
 * used to trigger it, which read as though the button were hovered from
 * anywhere on the card and made the real hit area impossible to judge.
 */
.ashers-card__cart:hover,
.ashers-card__cart:focus-visible {
	width: var(--ashers-card-cart-width-hover);
	background-color: var(--ashers-card-cart-bg-hover);
}

.ashers-card__cart:hover .ashers-card__cart-label,
.ashers-card__cart:focus-visible .ashers-card__cart-label {
	max-width: 102px;
	margin-right: 7px;
	opacity: 1;
}

/* --------------------------------------------------------- loading/success */

/*
 * Sequence: hover opens the pill -> click collapses it back to the circle with a
 * spinner -> checkmark. Neither state carries text; the label exists only as the
 * hover affordance.
 *
 * WooCommerce's stylesheet decorates ANY .button.loading with a second spinner
 * (::after, in the WooCommerce icon font) plus opacity .25 and a right padding
 * bump. This button carries .button so Woo's JS binds to it, so it inherits all
 * of that and renders two spinners at once. Suppressing it needs !important:
 * Woo's selector includes a type selector (a.button.loading) that a class-only
 * selector cannot outweigh.
 */
.ashers-card__cart.loading::after,
.ashers-card__cart.added::after {
	content: none !important;
	display: none !important;
}

.ashers-card__cart.loading,
.ashers-card__cart.added {
	width: var(--ashers-card-cart-size);
	padding: 10px !important;
	opacity: 1 !important;
}

.ashers-card__cart.loading .ashers-card__cart-label,
.ashers-card__cart.added .ashers-card__cart-label {
	max-width: 0;
	opacity: 0;
}

.ashers-card__cart.loading {
	pointer-events: none;
	position: absolute;
	color: #5F3D31 !important;
}

.ashers-card__cart.loading .ashers-card__cart-icon::before {
	content: "\f110"; /* fa-spinner */
	animation: ashers-card-spin 900ms linear infinite;
}

.ashers-card__cart.added {
	background-color: var(--ashers-card-cart-bg-hover);
}

.ashers-card__cart.added .ashers-card__cart-icon::before {
	content: "\f00c"; /* fa-check */
}

/* WooCommerce injects its own "View cart" link after an AJAX add; it duplicates
   the card link and breaks the 40px button box, so it is suppressed here. */
.ashers-card__media .added_to_cart {
	display: none !important;
}

@keyframes ashers-card-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------- body */

.ashers-card__body {
	display: flex;
	flex-direction: column;
	gap: 15px;
	color: var(--ashers-card-text);
}

.ashers-card__title {
	margin: 0;
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: var(--ashers-card-text);
	font-style: normal;
}

.ashers-card__title a {
	color: inherit;
	text-decoration: none;
}

.ashers-card__price {
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
	color: var(--ashers-card-text);
}

.ashers-card__price del {
	opacity: 0.6;
	font-weight: 400;
	margin-right: 0.35em;
}

/* ------------------------------------------------------------------ focus */

/*
 * The theme's own stylesheet sets `a:focus, button:focus { outline: none
 * !important }` globally, which removes every keyboard focus indicator on the
 * site. These rules restore a visible indicator inside the seasonal widgets and
 * need !important purely to win against that blanket rule.
 */
.ashers-card a:focus-visible,
.ashers-card button:focus-visible {
	outline: 3px solid var(--ashers-card-ink) !important;
	outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
	.ashers-card__cart,
	.ashers-card__cart-label {
		transition-duration: 1ms;
	}
	.ashers-card__cart.loading .ashers-card__cart-icon::before {
		animation: none;
	}
}

/* ------------------------------------------------------------------ badge */

/*
 * Sale / "New" flash. Opt-in via the card's show_badge arg — only the Related
 * Products carousel turns it on, replacing the flash the UAEL widget drew.
 * Sits inside the media box, opposite corner from the cart button so the two
 * never collide.
 */
.ashers-card__badge {
	position: absolute;
	top: var(--ashers-card-cart-inset);
	left: var(--ashers-card-cart-inset);
	z-index: 2;
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--ashers-card-cart-radius);
	background-color: var(--ashers-card-badge-bg, #5f3d31);
	color: var(--ashers-card-badge-color, #ffffff);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ----------------------------------------------------------------- rating */

/*
 * WooCommerce's own star markup. Woo's global styles already draw the stars,
 * so this only positions the block and lets a widget recolour it.
 */
.ashers-card__rating {
	display: flex;
	align-items: center;
	min-height: 1em;
}

.ashers-card__rating .star-rating {
	margin: 0;
	float: none;
	font-size: var(--ashers-card-rating-size, 14px);
	color: var(--ashers-card-rating-color, #c5a47e);
}

/*
 * Woo's own stylesheet hides the text inside .star-rating span (text-indent)
 * and paints the stars with ::before, and the wrapper carries an aria-label
 * with the numeric value. Nothing here should touch either — overriding it is
 * how the stars end up rendered as literal text.
 */