/**
 * Product Page Styles — e-Potion (Slices 1+2)
 *
 * Loaded conditionally on is_product() pages only — keeps PageSpeed scores
 * unaffected on non-product pages.
 *
 * Inherits global tokens from design-tokens.css and design-system.css.
 *
 * Architecture:
 *   .ep-product       container scope (sets local CSS vars)
 *   .ep-product__*    structural blocks (grid, sections, sticky bar)
 *   .ep-{component}   buy-box component blocks (BEM)
 */

/* -------------------------------------------------------------------------
 * Local CSS variables (scoped to product page only)
 * ------------------------------------------------------------------------- */
.ep-product {
	--ep-orange: #ff6b1a;
	--ep-orange-tint: #fff3eb;
	--ep-orange-strong: #9a3412;
	--ep-orange-border: #fed7aa;
	--ep-orange-soft: #fff8f0;
	--ep-black: #000;
	--ep-text: #0e1116;
	--ep-text-muted: #6b7280;
	--ep-text-soft: #4a5058;
	--ep-text-faint: #9ca3af;
	--ep-border: #e5e7eb;
	--ep-border-soft: #f0f0f2;
	--ep-border-soft2: #d1d5db;
	--ep-bg-muted: #fafafa;
	--ep-bg-tint: #f6f7f9;
	--ep-yellow-bg: #fffbeb;
	--ep-yellow-border: #fde68a;
	--ep-yellow-icon: #f59e0b;
	--ep-green: #10b981;
	--ep-green-bg: #ecfdf5;
	--ep-green-text: #065f46;
	--ep-green-text2: #047857;
	--ep-red: #dc2626;
	--ep-red-text: #b91c1c;

	max-width: 1280px;
	margin: 0 auto;
	color: var(--ep-text);
	background: #fff;
}

/* -------------------------------------------------------------------------
 * Above-the-fold grid: Gallery + Buy Box
 * ------------------------------------------------------------------------- */
.ep-product__main {
	display: grid;
	grid-template-columns: 11fr 9fr; /* 55% gallery / 45% buy box — was 13fr 7fr (65/35) */
	gap: 28px;
	padding: 24px 32px;
}

.ep-product__gallery,
.ep-product__buybox {
	min-width: 0;
}

@media (max-width: 768px) {
	.ep-product__main {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 14px;
	}
}

/* -------------------------------------------------------------------------
 * +18 Age warning area
 * ------------------------------------------------------------------------- */
.ep-product__age-warning {
	padding: 4px 32px 16px;
}

@media (max-width: 768px) {
	.ep-product__age-warning {
		padding: 4px 14px 14px;
	}
}

/* -------------------------------------------------------------------------
 * Default WooCommerce content below the +18 warning
 * (description tabs, related products, upsells — until custom sections rebuild)
 * ------------------------------------------------------------------------- */
.ep-product__default {
	padding: 0 32px;
	margin-top: 24px;
}

@media (max-width: 768px) {
	.ep-product__default {
		padding: 0 14px;
		margin-top: 14px;
	}
}

/* -------------------------------------------------------------------------
 * Sections (01–08)
 * ------------------------------------------------------------------------- */
.ep-product__section {
	padding: 24px 32px 4px;
	border-top: 1px solid var(--ep-border);
}

.ep-product__section:last-of-type {
	padding-bottom: 24px;
}

@media (max-width: 768px) {
	.ep-product__section {
		padding: 16px 14px 4px;
	}
}
/* -------------------------------------------------------------------------
 * Long description — restore bullets killed by mega-menu.css ".ep-site ul"
 * Two-class chain (0,2,1) out-specifies the .ep-site ul reset (0,1,1).
 * ------------------------------------------------------------------------- */
.ep-product .ep-product__default ul,
.ep-product .ep-product__section ul,
.ep-product .woocommerce-Tabs-panel ul {
	list-style: disc;
	margin: 8px 0 12px;
	padding-left: 22px;
}

.ep-product .ep-product__default ol,
.ep-product .ep-product__section ol,
.ep-product .woocommerce-Tabs-panel ol {
	list-style: decimal;
	margin: 8px 0 12px;
	padding-left: 22px;
}

.ep-product .ep-product__default li,
.ep-product .ep-product__section li,
.ep-product .woocommerce-Tabs-panel li {
	margin-bottom: 5px;
	line-height: 1.6;
}

/* Keep the FAQ accordion clean — no bullets on its internal lists */
.ep-product .ep-faq ul,
.ep-product .ep-faq ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Meta strip
 * ------------------------------------------------------------------------- */
.ep-product__meta {
	background: var(--ep-bg-muted);
	padding: 12px 32px;
	border-top: 1px solid var(--ep-border);
	margin-top: 22px;
}

@media (max-width: 768px) {
	.ep-product__meta {
		padding: 12px 14px 80px;
	}
}

/* -------------------------------------------------------------------------
 * Sticky mobile bar
 * ------------------------------------------------------------------------- */
.ep-product__sticky-mobile {
	display: none;
}

@media (max-width: 768px) {
	.ep-product__sticky-mobile {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--ep-border);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
		z-index: 50;
	}
}

/* -------------------------------------------------------------------------
 * Placeholder boxes (slices that aren't built yet)
 * ------------------------------------------------------------------------- */
.ep-placeholder {
	background: var(--ep-orange-tint);
	border: 1px dashed var(--ep-border-soft2);
	border-radius: 6px;
	padding: 14px 18px;
	color: var(--ep-text-muted);
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
}

/* =========================================================================
 * GALLERY
 * ========================================================================= */
.ep-gallery__main {
	position: relative;
	background: #fff;
	border-radius: 12px;
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 8px;
}

.ep-gallery__main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ep-gallery__sale {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	background: var(--ep-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
	z-index: 2;
}

.ep-gallery__viewers {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	border-radius: 4px;
	z-index: 2;
}

.ep-gallery__thumbs {
	display: flex;
	gap: 6px;
	overflow-x: auto;    /* scrollable when > 5 images */
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ep-gallery__thumbs::-webkit-scrollbar { display: none; }

.ep-gallery__thumb {
	position: relative;
	width: 64px;         /* fixed width so strip doesn't compress */
	flex-shrink: 0;
	aspect-ratio: 1;
	background: var(--ep-bg-tint);
	border: 1px solid var(--ep-border);
	border-radius: 6px;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.ep-gallery__thumb:hover {
	border-color: var(--ep-text-muted);
}

.ep-gallery__thumb.is-active {
	border: 1.5px solid var(--ep-black);
}

.ep-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* +N overlay no longer needed — arrows cycle through all images */

/* ── Gallery navigation arrows ─────────────────────────────────────────────
 * Positioned absolutely over the main image, vertically centred.
 * Semi-transparent white circle with an orange hover state.
 * ─────────────────────────────────────────────────────────────────────────── */
.ep-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255,255,255,.88);
	border: 0.5px solid var(--ep-border);
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #0e1116;
	padding: 0;
	transition: background .12s, border-color .12s, color .12s;
}

.ep-gallery__arrow svg {
	stroke: currentColor;
	fill: none;
	display: block;
}

.ep-gallery__arrow:hover {
	background: #fff;
	border-color: var(--ep-orange);
	color: var(--ep-orange);
}

.ep-gallery__arrow--prev { left:  8px; }
.ep-gallery__arrow--next { right: 8px; }

/* ── Image counter badge ────────────────────────────────────────────────────
 * Bottom-right corner of the main image. Shows "N / total".
 * Updated by JS when image changes.
 * ─────────────────────────────────────────────────────────────────────────── */
.ep-gallery__counter {
	position: absolute;
	bottom: 8px;
	right: 10px;
	z-index: 3;
	background: rgba(14,17,22,.55);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	border-radius: 20px;
	padding: 2px 8px;
	pointer-events: none;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.ep-gallery__main {
		border-radius: 10px;
	}
	.ep-gallery__sale {
		top: 10px;
		left: 10px;
		font-size: 10px;
	}
	.ep-gallery__viewers {
		top: 10px;
		right: 10px;
		font-size: 9px;
	}
	.ep-gallery__thumbs {
		gap: 5px;
	}
}

/* =========================================================================
 * BUY BOX wrapper
 * ========================================================================= */
.ep-buybox {
	display: flex;
	flex-direction: column;
}

/* -------------------------------------------------------------------------
 * Bestseller pill
 * ------------------------------------------------------------------------- */
.ep-bestseller {
	background: var(--ep-orange-soft);
	border: 1px solid var(--ep-orange-border);
	border-radius: 5px;
	padding: 4px 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	color: var(--ep-orange-strong);
	font-weight: 500;
	margin-bottom: 8px;
	align-self: flex-start;
}

.ep-bestseller svg {
	color: var(--ep-orange);
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.ep-bestseller {
		font-size: 9px;
	}
}

/* -------------------------------------------------------------------------
 * Brand line
 * ------------------------------------------------------------------------- */
.ep-brand {
	font-size: 11px;
	color: var(--ep-text-soft);
	margin-bottom: 6px;
}

.ep-brand__label {
	color: var(--ep-text-muted);
}

.ep-brand__name {
	color: var(--ep-black);
	font-weight: 700;
}

@media (max-width: 768px) {
	.ep-brand {
		font-size: 10px;
		margin-bottom: 4px;
	}
}

/* -------------------------------------------------------------------------
 * H1 title
 * ------------------------------------------------------------------------- */
.ep-title {
	font-size: 27px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
	letter-spacing: -0.4px;
	color: var(--ep-black);
}

@media (max-width: 768px) {
	.ep-title {
		font-size: 17px;
		letter-spacing: -0.2px;
		margin: 0 0 10px;
	}
}

/* -------------------------------------------------------------------------
 * Price block
 * ------------------------------------------------------------------------- */
.ep-price {
	margin-bottom: 12px;
}

.ep-price__row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 3px;
	flex-wrap: wrap;
}

.ep-price__current,
.ep-price__current .woocommerce-Price-amount,
.ep-price__current bdi {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--ep-black);
}

.ep-price__regular,
.ep-price__regular .woocommerce-Price-amount,
.ep-price__regular bdi {
	font-size: 13px;
	color: var(--ep-text-faint);
	text-decoration: line-through;
}

.ep-price__savings {
	padding: 2px 6px;
	background: var(--ep-orange-tint);
	color: var(--ep-orange);
	font-size: 10px;
	font-weight: 700;
	border-radius: 4px;
}

.ep-price__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}

.ep-price__vat {
	color: var(--ep-text-muted);
}

.ep-price__points {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ep-price__points svg {
	color: var(--ep-orange);
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.ep-price__current,
	.ep-price__current .woocommerce-Price-amount,
	.ep-price__current bdi {
		font-size: 24px;
		letter-spacing: -0.4px;
	}
	.ep-price__regular,
	.ep-price__regular .woocommerce-Price-amount,
	.ep-price__regular bdi {
		font-size: 12px;
	}
	.ep-price__meta {
		font-size: 12px;
		gap: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Stock badge
 * ------------------------------------------------------------------------- */
.ep-stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 12px;
	align-self: flex-start;
}

.ep-stock--in {
	background: var(--ep-green-bg);
	color: var(--ep-green-text);
}

.ep-stock--out {
	background: #fef2f2;
	color: #7f1d1d;
}

.ep-stock__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.ep-stock--in .ep-stock__dot {
	background: var(--ep-green);
}

.ep-stock--out .ep-stock__dot {
	background: #ef4444;
}

.ep-stock__hours {
	color: var(--ep-green-text2);
	font-weight: 500;
}

@media (max-width: 768px) {
	.ep-stock {
		font-size: 12px;
		padding: 5px 10px;
	}
	.ep-stock__dot {
		width: 6px;
		height: 6px;
	}
}

/* -------------------------------------------------------------------------
 * Short description (between stock badge and cart row)
 * Light gray box for visual separation. Renders WC post_excerpt with
 * standard filter chain (wpautop, shortcodes). Supports paragraphs,
 * lists, bold inline.
 * ------------------------------------------------------------------------- */
.ep-short-desc {
	background: #fafafa;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	color: #2a3038;
	margin-bottom: 14px;
}

.ep-short-desc p {
	margin: 0 0 8px;
}

.ep-short-desc p:last-child {
	margin-bottom: 0;
}

.ep-short-desc ul,
.ep-short-desc ol {
	margin: 6px 0;
	padding-left: 18px;
}

.ep-short-desc li {
	margin-bottom: 3px;
}

.ep-short-desc strong,
.ep-short-desc b {
	color: #0e1116;
	font-weight: 700;
}

.ep-short-desc a {
	color: var(--ep-orange);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.ep-short-desc {
		padding: 10px 12px;
		font-size: 13px;
		line-height: 1.55;
		margin-bottom: 12px;
	}
}

/* -------------------------------------------------------------------------
 * Linked variations (WPC Linked Variation plugin)
 * Wrapper-only styling. The plugin renders its own swatches with its own CSS.
 * Tame the plugin's default heading + spacing so it sits cleanly in our buybox.
 * ------------------------------------------------------------------------- */
.ep-linked-variations {
	margin-bottom: 14px;
}

.ep-linked-variations .wpclv-attribute {
	margin-bottom: 8px;
}

.ep-linked-variations .wpclv-attribute:last-child {
	margin-bottom: 0;
}

.ep-linked-variations .wpclv-name,
.ep-linked-variations .wpclv-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--ep-black);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 6px;
	display: block;
}

@media (max-width: 768px) {
	.ep-linked-variations {
		margin-bottom: 12px;
	}
	.ep-linked-variations .wpclv-name,
	.ep-linked-variations .wpclv-label {
		font-size: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Cart form (qty stepper + ADAUGĂ ÎN COȘ + heart)
 * ------------------------------------------------------------------------- */
.ep-cart-form {
	margin-bottom: 10px;
}

.ep-cart-row {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* -------------------------------------------------------------------------
 * Out-of-stock waitlist row (replaces cart form when !is_in_stock)
 * Slot grows to fill space; CommerceKit Waitlist injection lands here.
 * Heart sits to the right exactly like the in-stock layout.
 * ------------------------------------------------------------------------- */
.ep-waitlist-row {
	display: flex;
	gap: 6px;
	/* center: now that the injected .stock paragraph is hidden, the slot
	   height ≈ the Alertă Stoc button height (50px) ≈ the heart height (46px).
	   center alignment keeps both buttons on the same visual baseline. */
	align-items: center;
	margin-bottom: 10px;
}

/* Hide CommerceKit's "Stoc epuizat" paragraph rendered inside the waitlist
   form by do_action('woocommerce_simple_add_to_cart'). We already show stock
   status via .ep-stock--out in the buybox header. Showing it again inside the
   form pushes the Alertă Stoc button downward, breaking its horizontal
   alignment with the wishlist heart button beside it. */
.ep-waitlist-slot .stock,
.ep-waitlist-slot .woocommerce-variation-availability {
	display: none;
}

.ep-waitlist-slot {
	flex: 1;
	min-width: 0;
}

/* Tame plugin-injected button/form so it fits our row */
.ep-waitlist-slot > * {
	margin: 0;
}

.ep-waitlist-slot button,
.ep-waitlist-slot .button,
.ep-waitlist-slot input[type="submit"] {
	width: 100%;
	min-height: 46px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
}

.ep-waitlist-slot:empty::before {
	content: "Stoc epuizat — produs indisponibil momentan";
	display: block;
	width: 100%;
	min-height: 38px;
	padding: 10px 12px;
	background: #fef2f2;
	color: #7f1d1d;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
	line-height: 1.4;
}

/* Qty stepper */
.ep-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ep-border);
	border-radius: 5px;
	background: #fff;
}

.ep-qty__btn {
	background: #fff;
	border: 0;
	color: var(--ep-text-muted);
	width: 32px;
	height: 46px;
	font-size: 18px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.ep-qty__btn:hover {
	color: var(--ep-black);
}

.ep-product .ep-qty__input {
	min-width: 38px;
	width: 38px;
	height: 46px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	border: 0;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
	color: var(--ep-text);
	box-shadow: none;
}

.ep-product .ep-qty__input::-webkit-outer-spin-button,
.ep-product .ep-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ADAUGĂ ÎN COȘ button */
.ep-product .ep-cart-btn,
.ep-product .ep-cart-btn:hover,
.ep-product .ep-cart-btn:focus {
	flex: 1;
	height: 46px;
	background: var(--ep-black);
	color: #fff;
	border: 0;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
	padding: 0 16px;
	line-height: 1;
}

.ep-product .ep-cart-btn:hover {
	background: #2a2d33;
}

/* Wishlist heart (anchor link, inline SVG)
   — Forced color via .ep-product specificity to beat Shoptimizer button rules.
   — SVG uses stroke="currentColor" so color flows from this rule.
   — Fixed 46px height matches the min-height of the CommerceKit trigger button
     so both buttons visually align at the top edge of the waitlist row. */
.ep-product .ep-wishlist {
	width: 46px;
	height: 46px;
	background: #fff;
	border: 1px solid var(--ep-border);
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #0e1116;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	padding: 0;
	flex-shrink: 0;
	text-decoration: none;
	box-sizing: border-box;
}

.ep-product .ep-wishlist:hover,
.ep-product .ep-wishlist:focus {
	color: #ef4444;
	border-color: #ef4444;
	text-decoration: none;
}

.ep-product .ep-wishlist svg {
	width: 18px;
	height: 18px;
	display: block;
}

.ep-product .ep-wishlist.is-active {
	color: #ef4444;
	border-color: #ef4444;
	background: #fef2f2;
}

.ep-product .ep-wishlist.is-active svg {
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Wishlist wrapper — isolates CK's `parent.innerHTML = json.html` swap.
 *
 * Why: CK 2.5.2 `processWishlistAction()` replaces the anchor's parent
 *      innerHTML with the response HTML. Without a dedicated wrapper, CK
 *      would wipe the qty stepper and Add-to-Cart button (in-stock row)
 *      or the waitlist form (out-of-stock row) on every heart click,
 *      forcing a page refresh to restore them.
 *
 * How: `display: contents` makes the wrapper transparent to layout, so
 *      .ep-cart-row / .ep-waitlist-row see the inner <a> directly as a
 *      flex child — visual layout is unchanged from before the wrapper
 *      was introduced.
 *
 * After CK's swap, the inner anchor has class `commercekit-save-wishlist`
 * (often with `.active` when the product is in the wishlist) but NOT our
 * `.ep-wishlist` class. The rules below re-style any CK-injected anchor
 * inside .ep-wishlist-wrap so the heart remains visually consistent.
 * ------------------------------------------------------------------------- */

.ep-wishlist-wrap {
	display: contents;
}

/* CK-swapped anchor: replicate .ep-wishlist box styling so visual frame
   survives the innerHTML replacement. We target via the wrapper to avoid
   restyling category-list hearts which also use .commercekit-save-wishlist. */
.ep-product .ep-wishlist-wrap > a,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist {
	width: 46px;
	height: 46px;
	background: #fff;
	border: 1px solid var(--ep-border);
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #0e1116;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	padding: 0;
	flex-shrink: 0;
	text-decoration: none;
	box-sizing: border-box;
}

.ep-product .ep-wishlist-wrap > a:hover,
.ep-product .ep-wishlist-wrap > a:focus,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist:hover,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist:focus {
	color: #ef4444;
	border-color: #ef4444;
	text-decoration: none;
}

.ep-product .ep-wishlist-wrap > a svg,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* CK uses <em class="cg-wishlist"></em> as a CSS-only heart glyph after the
   innerHTML swap. Force it to a sensible size so it doesn't render as
   browser-default italic text. The actual icon comes from CK's CSS via
   ::before / background — we just size and color the container. */
.ep-product .ep-wishlist-wrap > a .cg-wishlist,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist .cg-wishlist {
	display: inline-block;
	width: 18px;
	height: 18px;
	font-style: normal;
	line-height: 1;
}

/* Saved state — CK marks the anchor with .active after a successful save.
   Mirror the same red-tint styling as our .ep-wishlist.is-active rule above. */
.ep-product .ep-wishlist-wrap > a.active,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist.active {
	color: #ef4444;
	border-color: #ef4444;
	background: #fef2f2;
}

.ep-product .ep-wishlist-wrap > a.active svg,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist.active svg {
	fill: currentColor;
}

/* Prevent the anchor's `processing` state (added by CK during AJAX) from
   making the heart look broken. Just dim it slightly to signal pending. */
.ep-product .ep-wishlist-wrap > a.processing,
.ep-product .ep-wishlist-wrap > .commercekit-save-wishlist.processing {
	opacity: 0.6;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Toast notification (wishlist confirmation, future flash messages)
 * Single element, reused across calls. Bottom-center, fades in/out.
 * ------------------------------------------------------------------------- */
.ep-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 20px);
	background: #0e1116;
	color: #fff;
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	max-width: calc(100vw - 32px);
	text-align: center;
}

.ep-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.ep-toast--error {
	background: #b91c1c;
}

@media (max-width: 768px) {
	.ep-toast {
		bottom: 80px; /* leave room for sticky mobile bar (Slice 6) */
		font-size: 12px;
		padding: 8px 14px;
	}
}

/* -------------------------------------------------------------------------
 * Showroom widget (dark) — only the "Adresă →" CTA is clickable
 * ------------------------------------------------------------------------- */
.ep-showroom {
	background: var(--ep-black);
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 8px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ep-showroom__icon {
	color: var(--ep-orange);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.ep-showroom__text {
	flex: 1;
	font-size: 12px;
	line-height: 1.4;
}

.ep-showroom__text strong {
	display: block;
}

.ep-showroom__text span {
	color: rgba(255, 255, 255, 0.65);
	font-size: 10px;
}

.ep-showroom__cta {
	padding: 4px 8px;
	background: rgba(255, 107, 26, 0.18);
	color: var(--ep-orange);
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	flex-shrink: 0;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ep-showroom__cta:hover,
.ep-showroom__cta:focus {
	background: rgba(255, 107, 26, 0.30);
	color: var(--ep-orange);
	text-decoration: none;
}

@media (max-width: 768px) {
	.ep-showroom {
		padding: 9px 11px;
		gap: 9px;
		margin-bottom: 7px;
	}
	.ep-showroom__text {
		font-size: 12px;
	}
	.ep-showroom__text span {
		font-size: 9px;
	}
}

/* -------------------------------------------------------------------------
 * Google review card (yellow)
 * ------------------------------------------------------------------------- */
.ep-review-card {
	background: var(--ep-yellow-bg);
	border: 1.5px solid var(--ep-yellow-border);
	border-radius: 8px;
	padding: 9px 13px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ep-review-card__google {
	flex-shrink: 0;
}

.ep-review-card__stars {
	display: flex;
	gap: 1px;
	flex-shrink: 0;
}

.ep-review-card__rating {
	font-size: 22px;
	font-weight: 900;
	color: var(--ep-black);
	line-height: 1;
	letter-spacing: -0.5px;
	flex-shrink: 0;
}

.ep-review-card__meta {
	margin-left: auto;
	text-align: right;
	line-height: 1.25;
}

.ep-review-card__count {
	font-size: 11px;
	color: var(--ep-text-soft);
}

.ep-review-card__brand {
	font-size: 12px;
	color: var(--ep-black);
}

.ep-review-card__brand strong {
	font-weight: 800;
}

@media (max-width: 768px) {
	.ep-review-card {
		padding: 8px 10px;
		gap: 8px;
	}
	.ep-review-card__google {
		width: 32px;
		height: 32px;
	}
	.ep-review-card__rating {
		font-size: 18px;
		letter-spacing: -0.4px;
	}
	.ep-review-card__count,
	.ep-review-card__brand {
		font-size: 10px;
	}
	.ep-review-card__stars svg {
		width: 13px;
		height: 13px;
	}
}

/* -------------------------------------------------------------------------
 * Plătești în siguranță (centered title + 4 badges space-evenly)
 * ------------------------------------------------------------------------- */
.ep-payment {
	background: var(--ep-bg-muted);
	border: 1px solid var(--ep-border);
	border-radius: 6px;
	padding: 9px 12px;
	margin-bottom: 0; /* gap to ep-trust controlled by ep-trust margin-top: 14px */
}

.ep-payment__title {
	font-size: 11px;
	color: var(--ep-black);
	font-weight: 600;
	margin-bottom: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.ep-payment__title svg {
	color: var(--ep-green);
	flex-shrink: 0;
}

.ep-payment__badges {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

@media (max-width: 768px) {
	.ep-payment {
		padding: 9px 11px;
		margin-bottom: 14px; /* was 7px */
	}
	.ep-payment__title {
		font-size: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Payment badges (VISA, MC, Apple Pay, G Pay)
 * ------------------------------------------------------------------------- */
.ep-pay-badge {
	height: 22px;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	line-height: 1;
}

.ep-pay-badge--visa {
	background: #1a1f71;
	color: #fff;
	padding: 0 7px;
	font-size: 11px;
	font-weight: 800;
	font-style: italic;
	font-family: Arial, sans-serif;
	letter-spacing: -0.4px;
}

.ep-pay-badge--mc {
	background: #fff;
	border: 1px solid var(--ep-border-soft2);
	padding: 0 6px;
}

.ep-pay-badge--apple {
	background: var(--ep-black);
	padding: 0 8px;
	gap: 3px;
}

.ep-pay-badge--apple span {
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.ep-pay-badge--gpay {
	background: #fff;
	border: 1px solid var(--ep-border-soft2);
	padding: 0 8px;
	gap: 3px;
}

.ep-pay-badge--gpay span {
	color: #5f6368;
	font-size: 11px;
	font-weight: 500;
}

/* ── ep-trust — unified grey block ─────────────────────────────────────────
 * One container with the same background and border as ep-payment so both
 * blocks read as a visual family. Three items share the container background
 * — no individual card borders or border-radius. Thin vertical dividers
 * separate the three sections. margin-top: 14px creates the exact gap
 * requested between ep-payment and ep-trust.
 *
 * Specificity: .ep-buybox .ep-trust beats any single-class parent-theme rule.
 * ─────────────────────────────────────────────────────────────────────────── */
.ep-buybox .ep-trust {
	background: var(--ep-bg-muted);
	border: 1px solid var(--ep-border);
	border-radius: 6px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 14px;
	/* The WP Mega Menu plugin stylesheet (mega-menu.css) coincidentally uses
	   the .ep-trust class name and sets height:50px on it, clamping our
	   container to 50px while the cards inside correctly expand to 70px+.
	   !important on the container is required to win against the plugin's rule.
	   height:auto lets the grid container size itself from its content rows.
	   min-height:70px guarantees the floor even when content is minimal. */
	height: auto      !important;
	min-height: 70px  !important;
}

.ep-buybox .ep-trust__card {
	padding: 11px 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1px solid var(--ep-border-soft);
	/* !important is needed here because the Shoptimizer parent theme sets a
	   competing height:50px on .ep-trust__card that wins the normal cascade.
	   This is the legitimate use case for !important: overriding a parent theme
	   rule we cannot modify directly. Both declarations need !important together —
	   setting only one would allow the other to be overridden by the parent. */
	height: auto      !important;
	min-height: 70px  !important;
	box-sizing: border-box;
}

.ep-buybox .ep-trust__card:last-child {
	border-right: none;
}

.ep-trust__icon {
	color: var(--ep-orange);
	width: 18px;
	height: 18px;
	display: block;
	margin: 0 auto 3px;
}

.ep-trust__head {
	font-size: 10px;
	color: var(--ep-black);
	font-weight: 700;
	line-height: 1.2;
}

.ep-trust__sub {
	font-size: 8.5px;
	color: var(--ep-text-muted);
	margin-top: 1px;
	line-height: 1.3;
}

@media (max-width: 768px) {
	.ep-buybox .ep-trust {
		margin-top: 12px;
	}
	.ep-buybox .ep-trust__card {
		padding: 8px 5px;
	}
	.ep-trust__icon { width: 16px; height: 16px; }
	.ep-trust__head { font-size: 9.5px; }
	.ep-trust__sub  { font-size: 8px; }
}

/* =========================================================================
 * +18 AGE WARNING
 * ========================================================================= */
.ep-age-warning {
	border: 2px solid var(--ep-black);
	border-radius: 10px;
	padding: 14px 18px;
	background: var(--ep-bg-muted);
	display: flex;
	gap: 14px;
	align-items: center;
}

.ep-age-warning__sign {
	flex-shrink: 0;
}

.ep-age-warning__text {
	font-size: 15px;
	line-height: 1.45;
	color: var(--ep-black);
	font-weight: 700;
}

.ep-age-warning__strong {
	color: var(--ep-red-text);
}

@media (max-width: 768px) {
	.ep-age-warning {
		border-radius: 8px;
		padding: 10px 12px;
		gap: 10px;
	}
	.ep-age-warning__sign {
		width: 36px;
		height: 36px;
	}
	.ep-age-warning__text {
		font-size: 13px;
	}
}
/* =========================================================================
 * BREADCRUMB — product page overrides
 * =========================================================================
 * Desktop: prevent wrapping on long category chains, truncate gracefully.
 * Mobile:  horizontal scroll with hidden scrollbar; JS scrolls to the END
 *          so the customer sees the current product name, not "Acasă".
 * ========================================================================= */

.single-product nav.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	/* Align breadcrumb text with the product grid horizontal padding (32px).
	   The left edge of "Acasă" lines up with the left edge of the gallery. */
	padding-left: 32px;
	padding-right: 32px;
}

@media (max-width: 768px) {
	.single-product nav.woocommerce-breadcrumb {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Hide scrollbar visually on all browsers */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.single-product nav.woocommerce-breadcrumb::-webkit-scrollbar {
		display: none;
	}

	/* Fade edge hint: right side fades out when there's more content to the right.
	   Left side fades out when user has scrolled (handled by JS class toggle). */
	.single-product nav.woocommerce-breadcrumb {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
	}
}

/* =========================================================================
 * SECTION 01 — PRODUSE COMPATIBILE (Upsells Carousel)
 * Desktop: 4 columns · Tablet: 3 columns · Mobile: 2 columns
 * Out-of-stock products shown with badge, not hidden.
 * Partial rows (< 4 products) centred via data-count attribute.
 * ========================================================================= */

.ep-upsells {
	border: 1.5px solid var(--ep-border);
	border-radius: 12px;
	padding: 20px 20px 22px;
	margin-top: 20px;
	background: #fff;
}

.ep-upsells__head {
	display: flex;
	align-items: flex-start;
	margin-bottom: 14px;
}

.ep-upsells__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ep-black);
	display: flex;
	align-items: baseline;
	gap: 7px;
	line-height: 1.35;
	margin: 0;
	flex: 1;
}

.ep-upsells__title-icon {
	color: var(--ep-orange);
	flex-shrink: 0;
	position: relative;
	top: 2px; /* optical alignment with baseline text */
}

/* Product name in title — slightly lighter weight so the label reads first */
.ep-upsells__title-product {
	font-weight: 600;
	color: var(--ep-text-soft);
}

/* ── Carousel shell — position:relative anchors the absolute arrows ──────── */
.ep-upsells__carousel {
	position: relative;
}

/* ── Arrow buttons — absolutely positioned over carousel edges ──────────────
 * Arrows live INSIDE .ep-upsells__carousel so root.querySelector() finds them.
 *
 * Positioning strategy: the carousel div contains both the arrows (absolute)
 * and the track (normal flow). We want the arrows centred on the IMAGE part
 * of the cards, not the full card height. The image is aspect-ratio 1/1 and
 * occupies the top portion; below it is the card body (name + price + button).
 * Setting top: 50% and subtracting a few pixels gives a good visual centre on
 * the image for any realistic card height.
 *
 * Explicit color + stroke: currentColor because Shoptimizer has button resets
 * that can strip inherited color from SVG elements.
 * ─────────────────────────────────────────────────────────────────────────── */
.ep-upsells__arrow {
	position: absolute;
	top: 35%; /* sits in the upper half of the card, centred on the product image */
	transform: translateY(-50%);
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid #c8c8d4;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #0e1116; /* hardcoded to bypass any theme button color reset */
	transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
	padding: 0;
}

/* Force SVG stroke to respect the button color */
.ep-upsells__arrow svg {
	stroke: currentColor;
	fill: none;
	display: block;
}

.ep-upsells__arrow:hover {
	border-color: var(--ep-orange);
	background: #fff8f5;
	box-shadow: 0 2px 10px rgba(255,107,26,.25);
	color: var(--ep-orange);
}

.ep-upsells__arrow--prev { left:  -16px; }
.ep-upsells__arrow--next { right: -16px; }

/* On mobile push arrows slightly inward so they don't clip the section border */
@media (max-width: 600px) {
	.ep-upsells__arrow--prev { left:  2px; }
	.ep-upsells__arrow--next { right: 2px; }
}

/* Carousel wiring */
.ep-upsells__track {
	/* overflow-x: scroll makes the element genuinely scrollable so
	   JavaScript's scrollTo() / scrollBy() can move its scroll position.
	   overflow: hidden visually clips content but also prevents programmatic
	   scrolling in most browsers — the carousel engine's scrollTo() calls
	   would silently fail. The scrollbar is hidden visually via CSS. */
	overflow-x: scroll;
	overflow-y: hidden;
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE / Edge legacy */
}
.ep-upsells__track::-webkit-scrollbar {
	display: none;               /* Chrome / Safari */
}

.ep-upsells__list {
	display: flex;
	gap: 10px; /* was 12px — tighter gap matches the smaller cards */
	list-style: none;
	margin: 0; padding: 0;
}

/* ── Partial-row centering ──────────────────────────────────────────────────
 * When fewer products are assigned than the column count, cards would
 * sit left-aligned with a ragged empty right side. data-count lets CSS
 * centre them so the partial row looks intentional, not broken.
 * Applies on desktop (4-col) and tablet (3-col) thresholds only;
 * on mobile (2-col) two cards always fill the row.
 * ─────────────────────────────────────────────────────────────────────────── */
.ep-upsells__list[data-count="1"],
.ep-upsells__list[data-count="2"],
.ep-upsells__list[data-count="3"] {
	justify-content: center;
}

/* ── Product card ──────────────────────────────────────────────────────────── */
.ep-up-card {
	/* Desktop: 4 columns — (100% - 3 gaps) / 4 */
	flex: 0 0 calc((100% - 3 * 10px) / 4);
	min-width: 0;
	border: 1px solid var(--ep-border-soft);
	border-radius: 7px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	transition: border-color .15s;
}
.ep-up-card:hover { border-color: var(--ep-border); }

/* ── Out-of-stock card variant ─────────────────────────────────────────────
 * Card visually dims so in-stock cards draw the eye first,
 * but the product stays visible and the CTA links to the product page.
 * ─────────────────────────────────────────────────────────────────────────── */
.ep-up-card--oos { opacity: .68; }
.ep-up-card--oos:hover { opacity: 1; }

.ep-up-card__img-link {
	display: block;
	background: var(--ep-bg-muted);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative; /* anchor for the oos badge */
}

/* "Stoc epuizat" badge — top-left overlay on the product image */
.ep-up-card__oos-badge {
	position: absolute;
	top: 6px; left: 6px;
	background: rgba(14,17,22,.72);
	color: #fff;
	font-size: 8.5px;
	font-weight: 700;
	border-radius: 3px;
	padding: 2px 5px;
	letter-spacing: .3px;
	z-index: 1;
	pointer-events: none;
}

.ep-up-card__img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .2s ease;
}
.ep-up-card:hover .ep-up-card__img { transform: scale(1.04); }

.ep-up-card__body {
	padding: 7px 8px 9px; /* was 10px 11px 13px — more compact */
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ep-up-card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	font-size: 11.5px; /* was 12.5px */
	font-weight: 600;
	color: var(--ep-black);
	line-height: 1.3;
	text-decoration: none;
	margin-bottom: 4px; /* was 6px */
}
.ep-up-card__name:hover { color: var(--ep-orange); }

.ep-up-card__price {
	font-size: 12px; /* was 13px */
	font-weight: 700;
	color: var(--ep-black);
	margin-bottom: 7px; /* was 10px */
	margin-top: auto;
}
.ep-up-card__price del { font-size: 10px; font-weight: 400; color: var(--ep-text-muted); margin-right: 3px; }
.ep-up-card__price ins { text-decoration: none; color: var(--ep-red, #e53e3e); }

.ep-up-card__btn {
	display: block; width: 100%;
	background: var(--ep-orange); color: #fff;
	border: none; border-radius: 5px;
	padding: 6px 8px; /* was 8px 10px */
	font-size: 10.5px; /* was 12px */
	font-weight: 700;
	text-align: center; cursor: pointer;
	text-decoration: none; letter-spacing: .15px;
	transition: background .15s;
}
.ep-up-card__btn:hover,
.ep-up-card__btn:focus { background: #e05a10; color: #fff; text-decoration: none; }

/* "Vizualizează" — variable products and out-of-stock */
.ep-up-card__btn--view {
	background: transparent;
	color: var(--ep-black);
	border: 1px solid var(--ep-border);
}
.ep-up-card__btn--view:hover { background: var(--ep-bg-muted); color: var(--ep-black); }

/* Dots */
.ep-upsells__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.ep-upsells__dot {
	width: 7px; height: 7px;
	border-radius: 50%; background: var(--ep-border);
	border: none; padding: 0; cursor: pointer;
	transition: background .15s, transform .15s;
}
.ep-upsells__dot.is-active { background: var(--ep-orange); transform: scale(1.3); }

/* ── Tablet: 3 columns ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ep-upsells { padding: 16px 20px 18px; }

	.ep-up-card {
		/* (100% - 2 gaps) / 3 */
		flex: 0 0 calc((100% - 2 * 10px) / 3);
	}

	/* Centre when fewer than 3 products on tablet */
	.ep-upsells__list[data-count="1"],
	.ep-upsells__list[data-count="2"] {
		justify-content: center;
	}
	/* 3 products fills the row — reset centering */
	.ep-upsells__list[data-count="3"] {
		justify-content: flex-start;
	}
}

/* ── Mobile: 2 columns, vertical cards ──────────────────────────────────── */
@media (max-width: 600px) {
	.ep-upsells { padding: 14px 16px 16px; margin-top: 16px; }
	.ep-upsells__title { font-size: 13px; }
	.ep-upsells__list { gap: 8px; }

	.ep-up-card {
		/* (100% - 1 gap) / 2 */
		flex: 0 0 calc((100% - 8px) / 2);
	}

	.ep-upsells__list[data-count="1"] { justify-content: center; }
	.ep-upsells__list[data-count="2"] { justify-content: flex-start; }
	.ep-upsells__list[data-count="3"] { justify-content: flex-start; }

	.ep-up-card__body { padding: 6px 7px 8px; }
	.ep-up-card__name { font-size: 10.5px; min-height: 2.4em; }
	.ep-up-card__price { font-size: 11px; }
	.ep-up-card__btn { font-size: 10px; padding: 5px 6px; }
	.ep-up-card__oos-badge { font-size: 8px; padding: 2px 4px; }
}

/* =========================================================================
 * PRODUCT META — SKU, categories, tags as pill badges
 *
 * Replaces .product_metanew which had width:100vw overflow bug.
 * New design uses a label+pills row layout that handles any number of
 * categories gracefully — collapsible when > 4 assigned categories.
 * ========================================================================= */

/* Override old style.css rules that caused 100vw overflow */
.related-wrapper .product_metanew,
.product_metanew {
	width: 100% !important;
	max-width: 100% !important;
}

/* ── Container ─────────────────────────────────────────────────────────── */
.ep-product-meta {
	margin: 20px 0;
	padding: 14px 16px;
	background: var(--ep-bg-muted);
	border: 1px solid var(--ep-border-soft);
	border-radius: 8px;
}

/* ── Row: label on left, pills on right ────────────────────────────────── */
.ep-meta__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}
.ep-meta__row:last-child { margin-bottom: 0; }

.ep-meta__key {
	font-size: 11px;
	font-weight: 500;
	color: var(--ep-text-muted);
	white-space: nowrap;
	padding-top: 3px;
	min-width: 62px;
	flex-shrink: 0;
}

/* ── Pills container ───────────────────────────────────────────────────── */
.ep-meta__pills-wrap { flex: 1; min-width: 0; }

.ep-meta__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	flex: 1;
}

/* Collapsible state — limits to ~2 rows (~52px) */
.ep-meta__pills--collapsible {
	max-height: 52px;
	overflow: hidden;
	transition: max-height .25s ease;
}
.ep-meta__pills--collapsible.is-open {
	max-height: 400px; /* large enough for any number of categories */
}

/* ── Individual pill ───────────────────────────────────────────────────── */
.ep-meta__pill {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--ep-border-soft);
	border-radius: 20px;
	padding: 3px 10px;
	font-size: 11.5px;
	color: var(--ep-text-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: background .12s, border-color .12s, color .12s;
}
.ep-meta__pill:hover {
	background: #fff3ec;
	border-color: var(--ep-orange);
	color: var(--ep-orange);
	text-decoration: none;
}

/* SKU pill — monospace + blue tint signals it's an identifier, not a link */
.ep-meta__pill--sku {
	background: #f0f4ff;
	border-color: #c7d7f5;
	color: #3a5fa0;
	font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
	font-size: 11px;
	letter-spacing: .3px;
	cursor: default;
}
.ep-meta__pill--sku:hover {
	background: #e8f0ff;
	border-color: #a0baf0;
	color: #2d4f90;
}

/* ── "Show more" toggle button ─────────────────────────────────────────── */
.ep-meta__toggle {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: transparent;
	border: none;
	padding: 3px 4px;
	font-size: 11px;
	color: var(--ep-orange);
	cursor: pointer;
	font-weight: 600;
	margin-top: 4px;
}
.ep-meta__toggle:hover { text-decoration: underline; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.ep-product-meta { padding: 12px 13px; }

	.ep-meta__key {
		font-size: 10px;
		min-width: 52px;
	}

	.ep-meta__pill {
		font-size: 10.5px;
		padding: 3px 8px;
	}

	.ep-meta__pill--sku { font-size: 10px; }
}