/*
 * Product archive and the product card. WHM-56.
 *
 * Loaded on the shop page, category and tag archives, and product search.
 *
 * The card is the most repeated object on the storefront, so it sets the tone
 * more than any hero does. It is WHITE, deliberately: every product shot here
 * is cut out on white and the Tiva pens are branded red, so a tinted card
 * background shows as a halo and a saturated one fights the packaging. The
 * accent appears on one thing per card, the button.
 *
 * WooCommerce's own class names are styled in place: .products, .button,
 * .added_to_cart, .woocommerce-ordering, .page-numbers, so AJAX add, sorting
 * and pagination keep working.
 */

/* ---------------------------------------------------------------------------
   1. FRAME
   --------------------------------------------------------------------------- */
.ep-arch {
	background: var(--ep-lt-bg);
	color: var(--ep-lt-ink);
	font-family: var(--ep-font);
}
.ep-arch a { color: var(--ep-vio-deep); text-decoration: none; }
/* Explicit, for the same reason as home.css: a bare heading loses to the
   theme's own h1-h4 rules. */
.ep-arch h1, .ep-arch h2, .ep-arch h3 { color: var(--ep-lt-ink); }
.ep-arch :focus-visible { outline: var(--ep-focus); outline-offset: var(--ep-focus-offset); border-radius: var(--ep-r-xs); }

.ep-arch__crumb {
	background: var(--ep-lt-card);
	border-bottom: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-mut);
}
.ep-arch__crumb .ep-wrap { min-height: var(--ep-tap); display: flex; align-items: center; }
.ep-arch__crumb a { color: var(--ep-lt-mut); }
.ep-arch__sep { opacity: 0.5; padding: 0 var(--ep-s-2); }

/* ---------------------------------------------------------------------------
   2. HEADER
   --------------------------------------------------------------------------- */
.ep-arch__head {
	background: var(--ep-lt-card);
	border-bottom: 1px solid var(--ep-lt-line);
	padding: var(--ep-s-8) 0;
}
.ep-arch__title {
	font-size: var(--ep-t-2xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-head);
	line-height: 1.06;
	margin: 0 0 var(--ep-s-2);
	color: var(--ep-lt-ink);
}
.ep-arch__count { margin: 0; font-size: var(--ep-t-sm); color: var(--ep-lt-mut); }
.ep-arch__desc { margin-top: var(--ep-s-4); color: var(--ep-lt-ink-2); max-width: 66ch; font-size: var(--ep-t-base); }
.ep-arch__desc p { margin: 0 0 var(--ep-s-3); }

.ep-arch__kids { display: flex; gap: var(--ep-s-2); flex-wrap: wrap; margin-top: var(--ep-s-5); }
.ep-chip {
	display: inline-flex; align-items: center; gap: var(--ep-s-2);
	min-height: var(--ep-tap);
	padding: 0 var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-full);
	background: var(--ep-lt-sunk);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink) !important;
	transition: border-color var(--ep-dur-1) var(--ep-ease), background var(--ep-dur-1) var(--ep-ease);
}
.ep-chip:hover { border-color: var(--ep-vio-deep); background: var(--ep-lt-tint); }
.ep-chip__n { color: var(--ep-lt-mut); font-weight: var(--ep-w-medium); }

/* ---------------------------------------------------------------------------
   3. TOOLBAR
   --------------------------------------------------------------------------- */
.ep-arch__body { padding-top: var(--ep-s-6); padding-bottom: var(--ep-s-12); }

.ep-arch__bar { display: flex; justify-content: flex-end; margin-bottom: var(--ep-s-5); }
.ep-arch__bar .woocommerce-ordering { margin: 0; }
.ep-arch__bar select {
	min-height: var(--ep-tap);
	padding: 0 var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	background: var(--ep-lt-card);
	font-family: inherit;
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-medium);
	color: var(--ep-lt-ink);
}

/* ---------------------------------------------------------------------------
   4. THE CARD

   Grid rather than the theme's floats. wc_product_class() prints WooCommerce's
   own classes onto each card, several of which set float and percentage width
   for the theme's layout, so both are reset here.
   --------------------------------------------------------------------------- */
.ep-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ep-s-4);
}

.ep-card {
	display: flex;
	flex-direction: column;
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-lg);
	overflow: hidden;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	transition: border-color var(--ep-dur-1) var(--ep-ease);
}
.ep-card:hover { border-color: var(--ep-lt-tint-e); }

.ep-card__shot {
	position: relative;
	display: block;
	background: var(--ep-lt-card);
	border-bottom: 1px solid var(--ep-lt-line-2);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.ep-card__shot img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
}

.ep-card__badge {
	position: absolute; top: var(--ep-s-3); left: var(--ep-s-3);
	background: var(--ep-vio-deep);
	color: var(--ep-white);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	padding: 5px var(--ep-s-3);
	border-radius: var(--ep-r-xs);
}
.ep-card__badge--off { background: var(--ep-lt-warn-bg); color: var(--ep-lt-warn); }

.ep-card__body {
	padding: var(--ep-s-4);
	display: flex;
	flex-direction: column;
	gap: var(--ep-s-2);
	flex: 1;
}
.ep-card__brand { font-size: var(--ep-t-xs); font-weight: var(--ep-w-bold); color: var(--ep-vio-deep); }
.ep-card__title {
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-bold);
	line-height: 1.25;
	letter-spacing: var(--ep-track-tight);
	margin: 0;
}
.ep-card__title a { color: var(--ep-lt-ink) !important; }
.ep-card__title a:hover { color: var(--ep-vio-deep) !important; }

.ep-card__ver { display: inline-flex; align-items: center; gap: var(--ep-s-2); font-size: var(--ep-t-xs); font-weight: var(--ep-w-semi); color: var(--ep-lt-ok); }
.ep-card__ver i { width: 6px; height: 6px; border-radius: 50%; background: var(--ep-lt-ok); display: block; flex: none; }

.ep-card__foot {
	margin-top: auto;
	padding-top: var(--ep-s-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-s-3);
	flex-wrap: wrap;
}
.ep-card__price {
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-tight);
	color: var(--ep-lt-ink);
}
.ep-card__price del { font-size: var(--ep-t-sm); font-weight: var(--ep-w-medium); color: var(--ep-lt-mut); opacity: 1; margin-right: var(--ep-s-2); }
.ep-card__price ins { text-decoration: none; }

/* --- prices ---------------------------------------------------------------
   Three parts, and the order matters: the price you pay first and largest, the
   old price struck through beside it, then the saving as a figure rather than
   a percentage. The percentage is on the image badge; the pounds go here,
   because "save £35" persuades and "-16%" only informs.
   --------------------------------------------------------------------------- */
.ep-card__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--ep-s-2);
}
.ep-card__was {
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-medium);
	color: var(--ep-lt-mut);
	text-decoration: line-through;
}
/* ONE tag, both figures, VIOLET.
   Green is spoken for in this system: it means in stock, or a purity figure
   that passed. Spending it on a discount as well makes the two greens argue
   about what green means, and it is also the other shop's exact treatment.
   The percentage sits inside the same tag as a lighter second half rather than
   as a separate chip in the image corner. */
.ep-card__save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	color: var(--ep-vio-deep);
	background: var(--ep-lt-tint);
	border: 1px solid var(--ep-lt-tint-e);
	padding: 3px var(--ep-s-2);
	border-radius: var(--ep-r-xs);
	white-space: nowrap;
}
.ep-card__save i {
	font-style: normal;
	font-weight: var(--ep-w-semi);
	padding-left: 6px;
	border-left: 1px solid var(--ep-lt-tint-e);
	opacity: 0.75;
}

/* --- buy row --------------------------------------------------------------
   THIS IS shoptimizer-qty-cart's MARKUP, styled in place.

   That plugin filters WooCommerce's loop button into .sqtc-card-atc: a number
   input carrying the product's real stock ceiling, up and down buttons, a
   nonce and its own AJAX handler. An earlier version of this card shipped a
   hand-built stepper next to it, a duplicate of a working control, and a
   worse one. It was deleted.

   So none of the rules below change behaviour. They only make somebody else's
   working control look like it belongs to this design.
   --------------------------------------------------------------------------- */
.ep-card__buy {
	margin-top: auto;
	padding-top: var(--ep-s-2);
}

.ep-card .sqtc-card-atc {
	display: flex;
	align-items: stretch;
	gap: var(--ep-s-2);
	margin: 0;
}

.ep-card .sqtc-qty {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: none;
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-card);
	overflow: hidden;
}

.ep-card .sqtc-qty__input {
	width: 46px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--ep-font);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	font-variant-numeric: tabular-nums;
	color: var(--ep-lt-ink);
	padding: 0 0 0 var(--ep-s-2);
	-moz-appearance: textfield;
	appearance: textfield;
}
/* The native spinners would sit next to sqtc's own up/down buttons. */
.ep-card .sqtc-qty__input::-webkit-outer-spin-button,
.ep-card .sqtc-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ep-card .sqtc-qty__buttons {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--ep-lt-line);
}
.ep-card .sqtc-qty__btn {
	flex: 1;
	width: 26px;
	border: 0;
	background: transparent;
	color: var(--ep-lt-mut);
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}
.ep-card .sqtc-qty__btn:hover { background: var(--ep-lt-tint); color: var(--ep-vio-deep); }
.ep-card .sqtc-qty__btn + .sqtc-qty__btn { border-top: 1px solid var(--ep-lt-line); }
.ep-card .sqtc-qty__btn svg { width: 10px; height: 10px; }

.ep-card .sqtc-add {
	flex: 1;
	min-height: var(--ep-control-sm);
	padding: 0 var(--ep-s-3);
	border: 0;
	border-radius: var(--ep-r-sm);
	background: var(--ep-vio-deep);
	color: var(--ep-white);
	font-family: var(--ep-font);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	line-height: 1.1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: background var(--ep-dur-1) var(--ep-ease), color var(--ep-dur-1) var(--ep-ease);
}
.ep-card .sqtc-add:hover { background: var(--ep-vio); color: var(--ep-vio-ink); }
.ep-card .sqtc-add[disabled],
.ep-card .sqtc-add.is-loading { opacity: 0.65; cursor: default; }

/* ---------------------------------------------------------------------------
   PHONE: the Add button becomes a cart icon.

   Two cards to a 375px row leaves about 132px inside a card for the whole buy
   row. A quantity control and the words "Add to cart" do not fit in that, and
   the label was clipping mid-word to "dd to ca".

   font-size:0 hides the TEXT, not the element: the label stays in the
   accessibility tree, so a screen reader still hears "Add to cart" and the
   button keeps its name. Nothing is removed from sqtc's markup, this is
   still their button, their nonce and their AJAX.

   The icon is a mask rather than a background image, so it inherits
   currentColor and follows the hover state instead of needing a second asset
   in the hover colour.
   --------------------------------------------------------------------------- */
@media (max-width: 699px) {

	/* The wrapper is in the selector to raise specificity to (0,3,0): sqtc's
	   own stylesheet sets font-size on this button at the same specificity as
	   a plain .ep-card .sqtc-add rule and loads AFTER ours, so mine lost and
	   the label stayed at 13px, still clipping, just with an icon beside it. */
	/* !important, and it is earned. shoptimizer-qty-cart ships its own
	   stylesheet for this button, it loads after ours, and raising specificity
	   was not enough, verified by forcing the same declarations from the
	   console, where they applied immediately. This is the same case as hiding
	   the theme chrome at the top of chrome.css: overriding another plugin's
	   own styling of its own element. It is scoped to the phone media query and
	   to two declarations, not sprayed across the file. */
	.ep-card .sqtc-card-atc .sqtc-add {
		font-size: 0 !important;
		line-height: 0 !important;
		padding: 0;
		flex: 1;
		gap: 0;
	}

	/* display:block is REQUIRED. A ::before with content:"" is an inline box by
	   default and width does not apply to inline boxes, so the icon computed to
	   0px wide and drew nothing. Its height read as 20px only because
	   line-height supplied it, which is what made the rule look half-applied
	   rather than broken. */
	.ep-card .sqtc-card-atc .sqtc-add::before {
		content: "" !important;
		display: block !important;
		width: 20px !important;
		height: 20px !important;
		background-color: currentColor;
		-webkit-mask: var(--ep-icon-cart) center / 20px 20px no-repeat;
		mask: var(--ep-icon-cart) center / 20px 20px no-repeat;
	}

	/* The stepper gives up width so the icon button keeps a real target. */
	.ep-card .sqtc-qty__input { width: 32px; padding-left: 4px; font-size: var(--ep-t-xs); }
	.ep-card .sqtc-qty__btn { width: 22px; }

	/* One line, clipped. "Tiva Pharmaceuticals" wrapped to two lines in a
	   164px card and pushed the title, price and buy row further down every
	   card on the page. */
	.ep-card__brand {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Two lines maximum, so a long name cannot make one card in a row taller
	   than the rest. */
	.ep-card__title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Woo's loop button, restyled in place. *//* Woo's loop button, restyled in place. */
.ep-card .button,
.ep-card .added_to_cart {
	flex: 1;
	justify-content: center;
	display: inline-flex;
	align-items: center;
	min-height: var(--ep-control-sm);
	padding: 0 var(--ep-s-4);
	border: 0;
	border-radius: var(--ep-r-sm);
	background: var(--ep-vio-deep);
	color: var(--ep-white) !important;
	font-family: inherit;
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	line-height: 1;
	margin: 0;
	transition: background var(--ep-dur-1) var(--ep-ease), color var(--ep-dur-1) var(--ep-ease);
}
.ep-card .button:hover { background: var(--ep-vio); color: var(--ep-vio-ink) !important; }
.ep-card .added_to_cart { background: var(--ep-lt-ok-bg); color: var(--ep-lt-ok) !important; }
.ep-card .button.loading { opacity: 0.7; }
/* Woo prints a tick after an AJAX add; it lands mid-button without this. */
.ep-card .button.added::after { display: none; }

/* ---------------------------------------------------------------------------
   5. PAGINATION
   --------------------------------------------------------------------------- */
.ep-arch .woocommerce-pagination { margin-top: var(--ep-s-10); }
.ep-arch .woocommerce-pagination ul {
	display: flex; gap: var(--ep-s-2); flex-wrap: wrap;
	list-style: none; margin: 0; padding: 0; border: 0;
}
.ep-arch .woocommerce-pagination li { border: 0; margin: 0; }
.ep-arch .woocommerce-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--ep-tap); min-height: var(--ep-tap);
	padding: 0 var(--ep-s-3);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-card);
	color: var(--ep-lt-ink) !important;
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	font-variant-numeric: tabular-nums;
}
.ep-arch .woocommerce-pagination .page-numbers.current {
	background: var(--ep-vio-deep);
	border-color: var(--ep-vio-deep);
	color: var(--ep-white) !important;
}

/* ---------------------------------------------------------------------------
   6. EMPTY STATE
   --------------------------------------------------------------------------- */
.ep-arch__empty {
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-lg);
	padding: var(--ep-s-12) var(--ep-s-6);
	text-align: center;
}
.ep-arch__empty h2 { font-size: var(--ep-t-xl); font-weight: var(--ep-w-black); letter-spacing: var(--ep-track-sub); margin: 0 0 var(--ep-s-2); }
.ep-arch__empty p { color: var(--ep-lt-mut); margin: 0 0 var(--ep-s-5); }
.ep-arch__back {
	display: inline-flex; align-items: center;
	min-height: var(--ep-control-md);
	padding: 0 var(--ep-s-6);
	border-radius: var(--ep-r-md);
	background: var(--ep-vio-deep);
	color: var(--ep-white) !important;
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-bold);
}

/* ---------------------------------------------------------------------------
   7. WIDER SCREENS
   --------------------------------------------------------------------------- */
@media (min-width: 600px) {
	.ep-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.ep-arch__head { padding: var(--ep-s-10) 0; }
	.ep-arch__title { font-size: var(--ep-t-3xl); }
	.ep-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ep-s-5); }
	.ep-arch__body { padding-top: var(--ep-s-8); }
}


/* ---------------------------------------------------------------------------
   9. NUMBERED PRODUCT SECTIONS (homepage)

   The number is a real ordinal, not decoration: these are ranked, and
   home_sections() numbers what survived rather than the original list, so a
   dropped section never leaves a gap in the count.
   --------------------------------------------------------------------------- */
.ep-brandsec__h {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	margin-bottom: var(--ep-s-5);
	padding-bottom: var(--ep-s-3);
	border-bottom: 2px solid var(--ep-lt-ink);
	flex-wrap: wrap;
}
.ep-brandsec__num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-ink);
	color: var(--ep-white);
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-tight);
}
.ep-brandsec__t { flex: 1; min-width: 0; }
.ep-brandsec__eyebrow {
	display: block;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	color: var(--ep-vio-deep);
	margin-bottom: 1px;
}
.ep-brandsec__h h2 {
	margin: 0;
	font-size: var(--ep-t-xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-head);
	line-height: 1.05;
	color: var(--ep-lt-ink);
}
.ep-brandsec__all {
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	color: var(--ep-vio-deep) !important;
	white-space: nowrap;
	min-height: var(--ep-tap);
	display: inline-flex;
	align-items: center;
}

/* On a phone the shop-all drops under the heading and spans it, rather than
   squeezing onto the same row and forcing the title to wrap awkwardly. */
.ep-brandsec__all { width: 100%; }

@media (min-width: 700px) {
	.ep-brandsec__all { width: auto; margin-left: auto; }
	.ep-brandsec__h h2 { font-size: var(--ep-t-2xl); }
	.ep-brandsec__num { min-width: 46px; height: 46px; font-size: var(--ep-t-xl); }
}


/* =========================================================================
   UI RULE (2026-09-26): every card in a row is the same height. Each row of
   the body reserves its space whether or not it has content, so the price and
   the buy row sit on the same line across the grid.
   ========================================================================= */
.ep-card__title { min-height: calc(1.25em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-card__brand { min-height: 1.4em; }
.ep-card__ver { min-height: 18px; }
.ep-card__ver--none { visibility: hidden; }
.ep-card__prices { min-height: 46px; align-content: flex-start; }
.ep-card__foot { min-height: 44px; }
.ep-card__foot .button, .ep-card .sqtc-add, .ep-card .added_to_cart { white-space: nowrap; }
.ep-cards { align-items: stretch; }

/* UI RULE: on phones the name drops one size so two lines hold the full name more often. */
@media (max-width: 480px) {
	.ep-card__title { font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; min-height: calc(1.2em * 2); }
	.ep-card__brand { font-size: 12px; }
}


/* =========================================================================
   CARD v2 (2026-09-26, UI rule). The rules above still style the old rows;
   these override them for the rebuilt card in templates/parts/product-card.php.
   Structure: tile · brand · name (two lines) · price row · buy row.
   ========================================================================= */
.ep-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	row-gap: 24px;
	align-items: stretch;
}
@media (min-width: 700px)  { .ep-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; row-gap: 28px; } }
@media (min-width: 1000px) { .ep-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .ep-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ep-card {
	border-radius: var(--ep-r-lg);
	border: 1px solid var(--ep-lt-line);
	transition: border-color var(--ep-dur-1) var(--ep-ease), box-shadow var(--ep-dur-1) var(--ep-ease);
}
.ep-card:hover { border-color: #DCD0F5; box-shadow: 0 8px 24px rgba(26, 16, 48, 0.06); }

/* --- tile: the photo fills the square; the tile is the studio grey and a soft
   inner fade hides any difference between shots. Badges sit above the fade. */
.ep-card__shot {
	background: #F4F4F5;
	border-bottom: 1px solid var(--ep-lt-line-2);
	aspect-ratio: 1 / 1;
}
.ep-card__shot img { width: 100%; height: 100%; object-fit: contain; padding: 0; margin: 0; background: #F4F4F5; }
.ep-card__shot::after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 1;
	box-shadow: inset 0 0 28px 14px #F4F4F5;
}
.ep-card__badge {
	z-index: 2;
	top: 10px; left: 10px;
	font-size: 11.5px;
	padding: 4px 9px;
	border-radius: var(--ep-r-full, 980px);
	white-space: nowrap;
	letter-spacing: -0.01em;
}
.ep-card__off {
	position: absolute; z-index: 2;
	top: 10px; right: 10px;
	font-size: 11.5px;
	font-weight: var(--ep-w-black, 900);
	padding: 4px 8px;
	border-radius: var(--ep-r-full, 980px);
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	white-space: nowrap;
}

/* --- body: fixed rows --- */
.ep-card__body { padding: 10px 12px 12px; gap: 4px; }
.ep-card__brand {
	display: block;
	height: 16px; min-height: 0;
	font-size: 12px; font-weight: var(--ep-w-semi, 600);
	color: var(--ep-lt-mut);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-card__title {
	margin: 0;
	font-size: 15px;
	line-height: 18px;
	height: 36px; min-height: 0;
	letter-spacing: -0.02em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The size steps live in the inline fit script (class-assets.php card_fit_script): each name is fitted to the two-line box. */
.ep-card__ver, .ep-card__save { display: none !important; }
.ep-card__prices {
	display: flex; align-items: baseline; gap: 8px;
	height: 24px; min-height: 0;
	margin-top: 2px;
	flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
}
.ep-card__price { font-size: 17px; font-weight: var(--ep-w-black, 900); letter-spacing: -0.02em; }
.ep-card__price del { display: none; }
.ep-card__was { font-size: 13px; color: var(--ep-lt-mut); text-decoration: line-through; margin: 0; }
.ep-card__was .woocommerce-Price-amount { text-decoration: line-through; }

/* --- buy row: one control, full width, always the same size --- */
.ep-card__buy { margin-top: auto; padding-top: 6px; min-height: 0; }
.ep-card__foot { display: none !important; }
.ep-card .ep-card__btn,
.ep-card .ep-card__btn.button {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; height: 40px; min-height: 40px;
	padding: 0 12px; margin: 0;
	border: 0; border-radius: var(--ep-r-md, 10px);
	background: var(--ep-vio-deep); color: var(--ep-white) !important;
	font-family: inherit; font-size: 14px; font-weight: var(--ep-w-bold);
	letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
	cursor: pointer; line-height: 1;
	transition: background var(--ep-dur-1) var(--ep-ease);
}
.ep-card .ep-card__btn:hover { background: #5B21B6; color: var(--ep-white) !important; }
.ep-card .ep-card__btn svg { width: 16px; height: 16px; flex: none; }
.ep-card .ep-card__btn--off { background: var(--ep-lt-sunk); color: var(--ep-lt-mut) !important; cursor: not-allowed; }
.ep-card .ep-card__btn-done { display: none; }
.ep-card .ep-card__btn.loading { opacity: 0.7; }
.ep-card .ep-card__btn.added { background: var(--ep-lt-ok, #0F7B4F); }
.ep-card .ep-card__btn.added .ep-card__btn-label { display: none; }
.ep-card .ep-card__btn.added .ep-card__btn-done { display: inline; }
.ep-card .added_to_cart { display: none !important; }