/*
 * Product page. WHM-56.
 *
 * Loaded only on is_product() and only when the flag allows the chrome, so it
 * never reaches a page it does not style.
 *
 * This is the LIGHT half of the system. The reason is the photography: every
 * product shot on this store is cut out on white, and the Tiva pens are branded
 * red. A white-background image on a dark card reads as a floating box, and a
 * saturated purple surface fights the red packaging. So the page is white and
 * near-white, the accent appears only on the things you can press, and the
 * products supply the colour.
 *
 * WooCommerce's own markup is styled here rather than replaced: .quantity,
 * .single_add_to_cart_button, .woocommerce-tabs and the gallery all keep their
 * classes so the cart, variation and review behaviour is untouched.
 */

/* ---------------------------------------------------------------------------
   1. FRAME
   --------------------------------------------------------------------------- */
.ep-pdp {
	background: var(--ep-lt-bg);
	color: var(--ep-lt-ink);
	font-family: var(--ep-font);
}

.ep-pdp a { color: var(--ep-vio-deep); text-decoration: none; }
/* Explicit, for the same reason as home.css. */
.ep-pdp h1, .ep-pdp h2, .ep-pdp h3, .ep-pdp h4 { color: var(--ep-lt-ink); }
.ep-pdp a:hover { text-decoration: underline; }

.ep-pdp :focus-visible {
	outline: var(--ep-focus);
	outline-offset: var(--ep-focus-offset);
	border-radius: var(--ep-r-xs);
}

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

.ep-pdp__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ep-s-8);
	padding-top: var(--ep-s-6);
	padding-bottom: var(--ep-s-10);
}

/* ---------------------------------------------------------------------------
   2. GALLERY

   WooCommerce prints .woocommerce-product-gallery here. It is given a white
   card because the images are cut out on white; a tinted ground would show as
   a halo around every product.
   --------------------------------------------------------------------------- */
.ep-pdp__gallery .woocommerce-product-gallery {
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-xl);
	padding: var(--ep-s-4);
	margin: 0;
	width: 100% !important; /* the theme sets a percentage width for its own grid */
}
.ep-pdp__gallery .woocommerce-product-gallery__image img { border-radius: var(--ep-r-md); display: block; }
.ep-pdp__gallery .flex-control-thumbs { display: flex; gap: var(--ep-s-3); margin: var(--ep-s-3) 0 0; padding: 0; list-style: none; }
.ep-pdp__gallery .flex-control-thumbs li { width: auto; margin: 0; }
.ep-pdp__gallery .flex-control-thumbs img {
	width: 76px; height: 76px; object-fit: contain;
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-card);
	opacity: 1;
}
.ep-pdp__gallery .flex-control-thumbs img.flex-active { border-color: var(--ep-vio-deep); border-width: 2px; }

/* ---------------------------------------------------------------------------
   3. BUY COLUMN
   --------------------------------------------------------------------------- */
.ep-pdp__brandline { display: flex; align-items: center; gap: var(--ep-s-3); flex-wrap: wrap; margin-bottom: var(--ep-s-2); }
.ep-pdp__brand { font-size: var(--ep-t-sm); font-weight: var(--ep-w-bold); color: var(--ep-vio-deep); }
.ep-pdp__sku { font-size: var(--ep-t-sm); color: var(--ep-lt-mut); }

.ep-pdp__title {
	font-size: var(--ep-t-2xl);
	font-weight: var(--ep-w-black);
	line-height: 1.05;
	letter-spacing: var(--ep-track-head);
	margin: 0 0 var(--ep-s-3);
	color: var(--ep-lt-ink);
}

.ep-pdp__sub { font-size: var(--ep-t-base); color: var(--ep-lt-mut); margin-bottom: var(--ep-s-5); max-width: 46ch; }
.ep-pdp__sub p { margin: 0 0 var(--ep-s-2); }

/* Price. WooCommerce prints <del>/<ins> for a sale, so both are handled. */
.ep-pdp__price { margin-bottom: var(--ep-s-5); line-height: 1; }
.ep-pdp__price .price,
.ep-pdp__price > .amount {
	font-size: var(--ep-t-3xl);
	font-weight: var(--ep-w-black);
	letter-spacing: -0.04em;
	color: var(--ep-lt-ink);
	display: inline-flex;
	align-items: baseline;
	gap: var(--ep-s-3);
	flex-wrap: wrap;
}
.ep-pdp__price del { font-size: var(--ep-t-lg); font-weight: var(--ep-w-medium); color: var(--ep-lt-mut); opacity: 1; }
.ep-pdp__price ins { text-decoration: none; }

/* --- payment methods --- */
.ep-pay {
	border: 1px solid var(--ep-lt-line);
	background: var(--ep-lt-card);
	border-radius: var(--ep-r-lg);
	padding: var(--ep-s-4);
	margin-bottom: var(--ep-s-5);
}
.ep-pay__lbl { font-size: var(--ep-t-sm); color: var(--ep-lt-mut); margin-bottom: var(--ep-s-3); }
.ep-pay__list { display: flex; gap: var(--ep-s-2); flex-wrap: wrap; }
.ep-pay__m {
	display: inline-flex; align-items: center; gap: var(--ep-s-2);
	min-height: var(--ep-control-sm);
	padding: 0 var(--ep-s-3);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink-2);
}

/* --- specification strip --- */
.ep-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--ep-lt-line);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-lg);
	overflow: hidden;
	margin-bottom: var(--ep-s-5);
}
.ep-specs__c { background: var(--ep-lt-card); padding: var(--ep-s-3) var(--ep-s-4); }
.ep-specs__k { display: block; font-size: var(--ep-t-xs); color: var(--ep-lt-mut); margin-bottom: 2px; }
.ep-specs__v { font-size: var(--ep-t-base); font-weight: var(--ep-w-bold); letter-spacing: var(--ep-track-tight); }

/* --- availability --- */

/* ---------------------------------------------------------------------------
   4. ADD TO CART

   WooCommerce's markup, restyled in place. Class names are its own, so the
   cart, variation and AJAX behaviour is untouched.
   --------------------------------------------------------------------------- */
/* WooCommerce prints its own .stock line ("22 in stock") inside the cart form.
   The availability row above already says In stock with the delivery date, so
   the two sat one under the other in the first preview saying the same thing
   twice. Woo's is suppressed and the quantity is folded into ours instead,
   where it does useful work as scarcity rather than as a duplicate. */
.ep-pdp__cart .stock { display: none; }

.ep-pdp__cart form.cart {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	flex-wrap: wrap;
	margin: 0 0 var(--ep-s-4);
}
.ep-pdp__cart .quantity {
	display: flex; align-items: center;
	border: 1px solid var(--ep-lt-line);
	background: var(--ep-lt-card);
	border-radius: var(--ep-r-md);
	height: var(--ep-control);
	overflow: hidden;
}
.ep-pdp__cart .quantity input[type="number"],
.ep-pdp__cart .quantity .qty {
	width: 74px; height: 100%;
	border: 0; background: transparent;
	text-align: center;
	font-family: inherit;
	font-size: var(--ep-t-md);
	font-weight: var(--ep-w-semi);
	font-variant-numeric: tabular-nums;
	color: var(--ep-lt-ink);
	-moz-appearance: textfield;
}
.ep-pdp__cart .quantity input::-webkit-outer-spin-button,
.ep-pdp__cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ep-pdp__cart .single_add_to_cart_button,
.ep-pdp__cart button[type="submit"] {
	flex: 1 1 200px;
	max-width: 100%;
	min-height: var(--ep-control);
	padding: 0 var(--ep-s-8);
	border: 0;
	border-radius: var(--ep-r-md);
	background: var(--ep-vio-deep);
	color: var(--ep-white);
	font-family: inherit;
	font-size: var(--ep-t-md);
	font-weight: var(--ep-w-bold);
	letter-spacing: var(--ep-track-tight);
	cursor: pointer;
	transition: background var(--ep-dur-1) var(--ep-ease);
}
.ep-pdp__cart .single_add_to_cart_button:hover { background: var(--ep-vio); color: var(--ep-vio-ink); }
.ep-pdp__cart .single_add_to_cart_button.disabled,
.ep-pdp__cart .single_add_to_cart_button:disabled {
	background: var(--ep-lt-line);
	color: var(--ep-lt-mut);
	cursor: not-allowed;
}

/* Variation selects, for the variable products. */
.ep-pdp__cart .variations { width: 100%; margin: 0 0 var(--ep-s-4); border-collapse: collapse; }
.ep-pdp__cart .variations th,
.ep-pdp__cart .variations td { padding: 0 0 var(--ep-s-2); text-align: left; }
.ep-pdp__cart .variations label { font-size: var(--ep-t-sm); font-weight: var(--ep-w-bold); }
.ep-pdp__cart .variations select {
	width: 100%; min-height: var(--ep-control-md);
	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-base);
	color: var(--ep-lt-ink);
}
.ep-pdp__cart .woocommerce-variation-price { margin-bottom: var(--ep-s-3); font-weight: var(--ep-w-bold); }

/* ---------------------------------------------------------------------------
   5. FREE DELIVERY METER
   --------------------------------------------------------------------------- */
.ep-meter { margin-bottom: var(--ep-s-5); }
.ep-meter__t { font-size: var(--ep-t-sm); margin-bottom: var(--ep-s-2); }
.ep-meter__t b { font-weight: var(--ep-w-bold); }
.ep-meter__bar { height: 6px; border-radius: 3px; background: var(--ep-lt-line); overflow: hidden; }
.ep-meter__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ep-vio-deep), var(--ep-vio)); border-radius: 3px; }
.ep-meter__done { font-size: var(--ep-t-sm); font-weight: var(--ep-w-semi); color: var(--ep-lt-ok); margin: 0 0 var(--ep-s-5); }

/* ---------------------------------------------------------------------------
   6. CERTIFICATE PANEL

   The one element on the page allowed a tint, because it is the differentiator
   and should read as its own object. Rendered only when batch data exists;
   see class-lab.php for why an empty panel is worse than none.
   --------------------------------------------------------------------------- */
.ep-coa {
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-tint-e);
	border-radius: var(--ep-r-lg);
	overflow: hidden;
	margin-bottom: var(--ep-s-5);
}
.ep-coa__top {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--ep-s-3);
	padding: var(--ep-s-4) var(--ep-s-5);
	background: linear-gradient(120deg, var(--ep-lt-tint), var(--ep-lt-card));
	border-bottom: 1px solid var(--ep-lt-line-2);
	flex-wrap: wrap;
}
.ep-coa__top b {
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-tight);
	display: flex; align-items: center; gap: var(--ep-s-2);
	color: var(--ep-lt-ink);
}
.ep-coa__top b svg { color: var(--ep-vio-deep); }
.ep-coa__top a { font-size: var(--ep-t-sm); font-weight: var(--ep-w-bold); white-space: nowrap; }
.ep-coa__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ep-lt-line-2); }
.ep-coa__c { background: var(--ep-lt-card); padding: var(--ep-s-3) var(--ep-s-4); }
.ep-coa__k { display: block; font-size: var(--ep-t-xs); color: var(--ep-lt-mut); margin-bottom: 2px; }
.ep-coa__v { font-size: var(--ep-t-md); font-weight: var(--ep-w-black); letter-spacing: var(--ep-track-tight); }
.ep-coa__v--ok { color: var(--ep-lt-ok); }

/* ---------------------------------------------------------------------------
   7. ASSURANCE
   --------------------------------------------------------------------------- */
.ep-assure { display: flex; gap: var(--ep-s-5); flex-wrap: wrap; font-size: var(--ep-t-sm); color: var(--ep-lt-mut); }
.ep-assure span { display: inline-flex; align-items: center; gap: var(--ep-s-2); }
.ep-assure svg { color: var(--ep-vio-deep); flex: none; }

/* ---------------------------------------------------------------------------
   8. TABS + RELATED

   WooCommerce markup again, restyled rather than replaced so third party tabs
   and the review form keep working.
   --------------------------------------------------------------------------- */
.ep-pdp__detail { background: var(--ep-lt-card); border-top: 1px solid var(--ep-lt-line); border-bottom: 1px solid var(--ep-lt-line); }
.ep-pdp__detail .woocommerce-tabs { padding: var(--ep-s-8) 0; }
.ep-pdp__detail .wc-tabs { display: flex; gap: var(--ep-s-6); list-style: none; margin: 0 0 var(--ep-s-6); padding: 0 0 var(--ep-s-3); border-bottom: 1px solid var(--ep-lt-line); flex-wrap: wrap; }
.ep-pdp__detail .wc-tabs li { margin: 0; }
.ep-pdp__detail .wc-tabs li a { color: var(--ep-lt-mut); font-size: var(--ep-t-base); font-weight: var(--ep-w-medium); }
.ep-pdp__detail .wc-tabs li.active a { color: var(--ep-vio-deep); font-weight: var(--ep-w-bold); }
.ep-pdp__detail .woocommerce-Tabs-panel 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-3); }
.ep-pdp__detail .woocommerce-Tabs-panel p { color: var(--ep-lt-ink-2); max-width: 66ch; }

.ep-pdp__related { padding: var(--ep-s-10) 0 var(--ep-s-12); }
.ep-pdp__related h2 { font-size: var(--ep-t-2xl); font-weight: var(--ep-w-black); letter-spacing: var(--ep-track-head); margin: 0 0 var(--ep-s-6); }

/* ---------------------------------------------------------------------------
   9. DESKTOP
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.ep-pdp__main {
		grid-template-columns: 1fr 1fr;
		gap: var(--ep-s-12);
		padding-top: var(--ep-s-10);
		padding-bottom: var(--ep-s-12);
	}
	.ep-pdp__title { font-size: var(--ep-t-3xl); }
	.ep-specs { grid-template-columns: repeat(4, 1fr); }
	}

/* ---------------------------------------------------------------------------
   THE DISPATCH PROMISE

   The strongest commercial line on the page, so it is given weight rather than
   tucked into the availability row. Filled by cutoff.js in UK time on every
   view; the markup ships with a true clockless sentence for the case where the
   script never runs. See assets/js/cutoff.js for why it cannot be PHP.

   The carrier is named on purpose: "next day delivery" from an unnamed courier
   is a weaker promise than the same words with Royal Mail attached.
   --------------------------------------------------------------------------- */
.ep-ship {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: var(--ep-s-3);
	padding: var(--ep-s-3) var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-left: 3px solid var(--ep-lt-mut);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-ink-2);
	transition: border-color var(--ep-dur-2) var(--ep-ease), background var(--ep-dur-2) var(--ep-ease);
}
/* Green only while it is genuinely true. Outside dispatch hours the panel goes
   neutral and says so in words, rather than keeping a colour that implies a
   deadline nobody is working to. */
.ep-ship.is-live {
	border-left-color: var(--ep-lt-ok);
	background: var(--ep-lt-ok-bg);
	border-color: #CFE7DA;
}
.ep-ship.is-urgent {
	border-left-color: var(--ep-lt-warn);
	background: var(--ep-lt-warn-bg);
	border-color: #EDDFB6;
}
.ep-ship__t { line-height: 1.4; }
.ep-ship__t b { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
.ep-ship.is-live .ep-ship__t b { color: var(--ep-lt-ok); }
.ep-ship.is-urgent .ep-ship__t b { color: var(--ep-lt-warn); }
.ep-ship__c {
	font-size: var(--ep-t-xs);
	color: var(--ep-lt-mut);
	font-weight: var(--ep-w-semi);
}

/* The shared payment row, on the light product page. chrome.css styles it for
   the dark footer, so only the colours change here. */
.ep-pdp .ep-foot__pay { margin-top: var(--ep-s-4); }
.ep-pdp .ep-foot__payl { color: var(--ep-lt-mut); font-size: var(--ep-t-xs); }
.ep-pdp .ep-foot__pmset { color: var(--ep-lt-ink-2); opacity: 0.6; }
.ep-pdp .ep-foot__gw {
	border-color: var(--ep-lt-line);
	color: var(--ep-lt-ink);
	font-size: var(--ep-t-xs);
}

/* FLEXSLIDER'S ARROWS PUSHED THE PAGE SIDEWAYS.
   The theme's gallery ships prev/next controls positioned outside the gallery
   box, and at 1280px they extended the document 87px past the viewport, so
   every product page had a horizontal scrollbar. The gallery here is navigated
   by its thumbnail strip, so the arrows are redundant as well as harmful. */
.ep-pdp .woocommerce-product-gallery { overflow: hidden; }
.ep-pdp .flex-direction-nav { display: none; }

/* ---------------------------------------------------------------------------
   THE BUY ROW, AND COMMERCEKIT'S WRAPPERS

   The quantity box and the Add button were stacked, with the primary call to
   action rendering 98px wide UNDER a 188px quantity field. The CSS above was
   right and was addressing the wrong elements: CommerceKit wraps the form
   contents in three nested divs, so

     form.cart > .commercekit-pdp-sticky-inner
               > .commercekit-pdp-simple-form
               > .commercekit-sticky-atc-intersector
               > .quantity + button

   and the flex rules on form.cart were laying out a single block child.

   The wrappers are given widths and the real parent is made the flex row,
   rather than collapsing them with display: contents. That intersector is what
   CommerceKit watches to decide when to show its sticky add-to-cart bar, and an
   element with no box is an element an observer cannot measure.
   --------------------------------------------------------------------------- */
.ep-pdp__cart form.cart > .commercekit-pdp-sticky-inner,
.ep-pdp__cart .commercekit-pdp-simple-form { width: 100%; }

.ep-pdp__cart .commercekit-sticky-atc-intersector {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	width: 100%;
}

/* The quantity field takes only what it needs; the button takes the rest. It
   is the primary action on the page and should look like it. */
.ep-pdp__cart .commercekit-sticky-atc-intersector .quantity { flex: 0 0 auto; }
.ep-pdp__cart .commercekit-sticky-atc-intersector .single_add_to_cart_button { flex: 1 1 auto; }


/* ---------------------------------------------------------------------------
   THE STORE RATING

   Labelled "store reviews", not product reviews, because that is what they
   are: twenty real reviews of the shop, migrated out of Elementor. Claiming
   them as ratings of this product would be inventing data.
   --------------------------------------------------------------------------- */
.ep-rate {
	display: inline-flex;
	align-items: center;
	gap: var(--ep-s-2);
	margin-bottom: var(--ep-s-4);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-mut) !important;
}
.ep-rate__s { display: inline-flex; gap: 1px; color: #E0AC42; }
.ep-rate b { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
.ep-rate:hover { color: var(--ep-lt-ink) !important; }

/* ---------------------------------------------------------------------------
   THE DELIVERY CARD

   Stock, the live cutoff, the arrival date, the carrier and the free delivery
   meter were five separate things scattered down the column, and the promise
   itself was squeezed onto a shared row at 432px. They answer one question, so
   they are one card.
   --------------------------------------------------------------------------- */
.ep-deliv {
	margin: var(--ep-s-5) 0;
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	background: var(--ep-lt-card);
	overflow: hidden;
}
.ep-deliv__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ep-s-2) var(--ep-s-4);
	padding: var(--ep-s-3) var(--ep-s-4);
	border-bottom: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-sm);
}
.ep-deliv__stock {
	display: inline-flex; align-items: center; gap: var(--ep-s-2);
	font-weight: var(--ep-w-bold); color: var(--ep-lt-ok);
}
.ep-deliv__stock i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: block; }
.ep-deliv__stock.is-out { color: var(--ep-lt-warn); }
.ep-deliv__carrier {
	display: inline-flex; align-items: center; gap: var(--ep-s-2);
	color: var(--ep-lt-mut); font-size: var(--ep-t-xs); font-weight: var(--ep-w-semi);
}

/* The promise sits inside the card now, so it drops its own border and keeps
   only the state colour. */
.ep-deliv .ep-ship {
	display: block;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-left: 3px solid var(--ep-lt-line);
	background: var(--ep-lt-sunk);
	padding: var(--ep-s-3) var(--ep-s-4);
}
.ep-deliv .ep-ship.is-live { border-left-color: var(--ep-lt-ok); background: var(--ep-lt-ok-bg); }
.ep-deliv .ep-ship.is-urgent { border-left-color: var(--ep-lt-warn); background: var(--ep-lt-warn-bg); }
.ep-deliv .ep-meter { margin: 0; padding: var(--ep-s-3) var(--ep-s-4); border-top: 1px solid var(--ep-lt-line); }
.ep-deliv .ep-meter__done { margin: 0; padding: var(--ep-s-3) var(--ep-s-4); border-top: 1px solid var(--ep-lt-line); }

/* ---------------------------------------------------------------------------
   TRUST TILES

   Was a plain inline list that wrapped into a ragged three and one. A two by
   two grid of iconed tiles, each a fact with a line of detail under it.
   --------------------------------------------------------------------------- */
.ep-assure {
	list-style: none;
	margin: var(--ep-s-5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--ep-lt-line);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	overflow: hidden;
}
.ep-assure li {
	display: flex;
	align-items: flex-start;
	gap: var(--ep-s-2);
	margin: 0;
	padding: var(--ep-s-3);
	background: var(--ep-lt-card);
}
.ep-assure svg { flex: none; color: var(--ep-vio-deep); margin-top: 1px; }
.ep-assure span { display: block; font-size: var(--ep-t-xs); color: var(--ep-lt-mut); line-height: 1.35; }
.ep-assure b { display: block; font-size: var(--ep-t-sm); color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }

/* ---------------------------------------------------------------------------
   THE RESELLER CREDENTIAL

   Being the official re-seller is the strongest thing this shop can say about
   a house brand product, and it was only being said on the homepage.
   --------------------------------------------------------------------------- */
.ep-reseller {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	margin-top: var(--ep-s-3);
	padding: var(--ep-s-3) var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	background: var(--ep-lt-sunk);
}
.ep-reseller__mk { display: block; line-height: 0; height: 20px; flex: none; }
.ep-reseller__mk svg { display: block; height: 100%; width: auto; filter: brightness(0); opacity: 0.78; }
.ep-reseller__t { font-size: var(--ep-t-xs); color: var(--ep-lt-mut); }
.ep-reseller__t b { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }


/* The Overview tab holding the short description that used to sit above the
   price. */
.ep-tab-overview { font-size: var(--ep-t-base); color: var(--ep-lt-ink-2); max-width: 70ch; }

/* Related products use .ep-cards, the same grid as the homepage and archives,
   so cards.css does the work and there is nothing to restyle here. */
.ep-pdp__related .ep-cards { margin: 0; }

/* ---------------------------------------------------------------------------
   THE QUANTITY STEPPER

   WooCommerce ships a bare number input, which on a phone means opening the
   numeric keyboard to change 1 to 2, and the browser's own spinner arrows are
   roughly 10px tall. pdp.js wraps the existing input rather than replacing it,
   so its name, min, max and step survive untouched.
   --------------------------------------------------------------------------- */
.ep-pdp__cart .quantity.ep-qty { display: flex; align-items: center; }
.ep-qty__b {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	align-self: stretch;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ep-lt-mut);
	cursor: pointer;
	transition: color var(--ep-dur-1) var(--ep-ease), background var(--ep-dur-1) var(--ep-ease);
}
.ep-qty__b:hover { color: var(--ep-lt-ink); background: var(--ep-lt-sunk); }
.ep-qty__b:active { background: var(--ep-lt-line); }
.ep-pdp__cart .quantity.ep-qty input[type="number"],
.ep-pdp__cart .quantity.ep-qty .qty { width: 44px; }

/* ---------------------------------------------------------------------------
   THE CUTOFF, WHILE IT IS STILL RUNNING

   A live deadline should look different from a statement of opening hours. The
   dot only exists while the countdown is genuinely counting, so its presence is
   information rather than decoration: no dot means we are not dispatching today
   and the panel says so in words.
   --------------------------------------------------------------------------- */
/* THE DOT IS PART OF THE SENTENCE, not a thing positioned near it.
   
   It used to be absolutely positioned at top:50% of the panel. That is the
   panel's middle, which is only the first line's middle while the text fits on
   one line. On a phone the sentence wraps to two, so the dot slid down into the
   gap between them and sat against the second line. Setting it inline before
   the text means there is no measurement to get wrong: it sits on the first
   line because it IS on the first line, at any width and any wrap. */
.ep-ship { position: relative; }
.ep-ship.is-live .ep-ship__t::before,
.ep-ship.is-urgent .ep-ship__t::before {
	content: "";
	display: inline-block;
	vertical-align: 0.08em;
	width: 7px;
	height: 7px;
	margin-right: var(--ep-s-2);
	border-radius: 50%;
	background: var(--ep-lt-ok);
}
.ep-ship.is-live .ep-ship__t::before { animation: epShipPulse 2.2s ease-out infinite; }
.ep-ship.is-urgent .ep-ship__t::before { background: var(--ep-lt-warn); }
@keyframes epShipPulse {
	0%   { box-shadow: 0 0 0 0 rgba(15, 123, 79, 0.45); }
	70%  { box-shadow: 0 0 0 8px rgba(15, 123, 79, 0); }
	100% { box-shadow: 0 0 0 0 rgba(15, 123, 79, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ep-ship.is-live .ep-ship__t::before { animation: none; }
}

/* ---------------------------------------------------------------------------
   PRODUCT DESCRIPTIONS

   Every long description was rewritten from the product name. They used to be
   Elementor exports carrying @import rules and whole CSS blocks, which is the
   same content that broke the homepage earlier when kses stripped its <style>
   and left the rules on screen as text. They are now plain semantic markup
   with no styling of their own, so this file dresses all 95 identically.
   --------------------------------------------------------------------------- */
.ep-desc { max-width: 70ch; color: var(--ep-lt-ink-2); }
.ep-desc h3 {
	margin: var(--ep-s-6) 0 var(--ep-s-2);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-desc h3:first-child { margin-top: 0; }
.ep-desc p { margin: 0 0 var(--ep-s-3); font-size: var(--ep-t-base); line-height: 1.6; }
.ep-desc p b { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }

/* The parsed facts. A definition row rather than a sentence, because these are
   the numbers someone scans for before they read anything. */
.ep-desc__facts {
	list-style: none;
	margin: 0 0 var(--ep-s-4);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--ep-lt-line);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	overflow: hidden;
	max-width: 460px;
}
.ep-desc__facts li {
	margin: 0;
	padding: var(--ep-s-2) var(--ep-s-3);
	background: var(--ep-lt-card);
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ep-desc__facts span { font-size: 11px; color: var(--ep-lt-mut); }
.ep-desc__facts b {
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-ink);
	font-weight: var(--ep-w-bold);
	font-variant-numeric: tabular-nums;
}
.ep-desc__note {
	margin-top: var(--ep-s-4);
	padding-top: var(--ep-s-3);
	border-top: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-xs);
	color: var(--ep-lt-mut);
}

/* ---------------------------------------------------------------------------
   TAB PANES

   Description, Specs, Shipping and Testing. The description content is the
   client's own copy, recovered out of its Elementor wrapper and reskinned, so
   everything below dresses their words rather than replacing them.
   --------------------------------------------------------------------------- */
.ep-tabpane { max-width: 70ch; color: var(--ep-lt-ink-2); }
.ep-tabpane p { margin: 0 0 var(--ep-s-3); font-size: var(--ep-t-base); line-height: 1.6; }

/* The opening claim, set larger because on most products it is the one line
   carrying the measured result. */
.ep-desc__lead {
	font-size: var(--ep-t-lg) !important;
	font-weight: var(--ep-w-bold);
	color: var(--ep-lt-ink);
	letter-spacing: var(--ep-track-sub);
	line-height: 1.3 !important;
}
.ep-desc ul { margin: 0 0 var(--ep-s-5); padding-left: var(--ep-s-5); }
.ep-desc li { margin: 0 0 var(--ep-s-1); font-size: var(--ep-t-base); line-height: 1.55; }

/* The measured trio: label strength, tested strength, verified purity. */
.ep-desc__stats {
	list-style: none;
	margin: var(--ep-s-4) 0 var(--ep-s-5) !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--ep-lt-line);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	overflow: hidden;
	max-width: 480px;
}
.ep-desc__stats li {
	margin: 0;
	padding: var(--ep-s-3);
	background: var(--ep-lt-card);
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}
.ep-desc__stats b {
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	color: var(--ep-lt-ink);
	letter-spacing: var(--ep-track-head);
	font-variant-numeric: tabular-nums;
}
.ep-desc__stats span { font-size: 11px; color: var(--ep-lt-mut); }

/* Shared key and value list, used by Specs, Shipping and Testing. */
.ep-spec-list {
	list-style: none;
	margin: 0 0 var(--ep-s-4);
	padding: 0;
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	overflow: hidden;
}
.ep-spec-list li {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-s-4);
	padding: var(--ep-s-3) var(--ep-s-4);
	background: var(--ep-lt-card);
	font-size: var(--ep-t-sm);
}
.ep-spec-list li + li { border-top: 1px solid var(--ep-lt-line); }
.ep-spec-list span { color: var(--ep-lt-mut); }
.ep-spec-list b { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); text-align: right; }

/* The shipping panel reuses the live cutoff, so it needs the standalone frame
   the buy column version drops when it sits inside the delivery card. */
.ep-ship--tab {
	display: block;
	margin: 0 0 var(--ep-s-4);
	padding: var(--ep-s-3) var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-left: 3px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
}
.ep-ship--tab.is-live { border-left-color: var(--ep-lt-ok); background: var(--ep-lt-ok-bg); }
.ep-ship--tab.is-urgent { border-left-color: var(--ep-lt-warn); background: var(--ep-lt-warn-bg); }

/* Results pending. Stated plainly rather than dressed as a badge, because an
   absence of test data should not look like a credential. */
.ep-testing__wait {
	padding: var(--ep-s-4);
	border: 1px dashed var(--ep-lt-line-2);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
	color: var(--ep-lt-mut);
}
.ep-testing__wait b { display: block; color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); margin-bottom: 2px; }

/* ---------------------------------------------------------------------------
   BRANDED PRODUCT DESCRIPTIONS

   The words are the client's own, recovered from their original copy. This
   dresses them, and dresses them differently by house: gold and near black for
   Toro, teal and navy for Tiva, house violet for pharmacy stock. One set of
   structural rules, three palettes, driven by a single modifier class on the
   wrapper, so a fourth brand is a block of custom properties rather than a
   second stylesheet.
   --------------------------------------------------------------------------- */
.ep-pd {
	--pd-ink:    var(--ep-lt-ink);
	--pd-accent: var(--ep-vio-deep);
	--pd-soft:   var(--ep-lt-tint);
	--pd-edge:   var(--ep-lt-tint-e);
	--pd-dark:   #201238;
	--pd-mark:   none;
	max-width: 74ch;
	color: var(--ep-lt-ink-2);
}
.ep-pd--toro {
	--pd-accent: #A9761B;
	--pd-soft:   #FBF4E4;
	--pd-edge:   #E8D3A4;
	--pd-dark:   #17130B;
	--pd-mark:   url('../img/toro-logo.svg');
}
.ep-pd--tiva {
	--pd-accent: #0A8A99;
	--pd-soft:   #E9F7F9;
	--pd-edge:   #B3E0E6;
	--pd-dark:   #04222B;
	--pd-mark:   url('../img/tiva-logo.svg');
}

/* The claim, in a dark plate. It is the one line that carries the measured
   result on most products, so it leads. */
.ep-pd__tldr {
	background: var(--pd-dark);
	border-radius: var(--ep-r-md);
	padding: var(--ep-s-4) var(--ep-s-5);
	margin-bottom: var(--ep-s-4);
}
.ep-pd__tag {
	display: block;
	font-size: 10px;
	font-weight: var(--ep-w-semi);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pd-accent);
	margin-bottom: var(--ep-s-1);
}
.ep-pd--none .ep-pd__tag { color: var(--ep-vio-2); }
/* Scoped to .ep-pdp__detail on purpose. The blanket
   ".ep-pdp__detail .woocommerce-Tabs-panel p" earlier in this file is (0,2,1)
   and a bare ".ep-pd__tldr p" is (0,1,1), so the plate rendered dark purple ink
   on a near black ground: invisible. Same trap as the hero headline. */
.ep-pdp__detail .ep-pd__tldr p {
	margin: 0 !important;
	font-size: var(--ep-t-lg);
	/* Was 900 with tight tracking, which on a near black plate read as
	   shouting rather than as a summary. Three changes, all pulling the same
	   way: weight down to 600, tracking back to normal, and more line height,
	   so a three line claim reads as a sentence instead of a headline. */
	font-weight: var(--ep-w-semi);
	letter-spacing: normal;
	line-height: 1.45;
	/* Slightly off pure white. Full white on near black is the harshest pair
	   available and it is doing the heavy lifting on how loud this felt. */
	color: rgba(255, 255, 255, 0.92);
}

/* The re-seller strip, carrying the brand's real mark as a background so no
   SVG has to live in the product row. */
.ep-pd__brand {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	padding: var(--ep-s-3) var(--ep-s-4);
	margin-bottom: var(--ep-s-5);
	border: 1px solid var(--pd-edge);
	border-left: 3px solid var(--pd-accent);
	border-radius: var(--ep-r-sm);
	background: var(--pd-soft);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	color: var(--pd-ink);
}
.ep-pd__brand::before {
	content: "";
	display: block;
	width: 58px;
	height: 20px;
	flex: none;
	background: var(--pd-mark) left center / contain no-repeat;
}
.ep-pd--none .ep-pd__brand::before { display: none; }

.ep-pd__intro { margin: 0 0 var(--ep-s-3); font-size: var(--ep-t-base); line-height: 1.62; }

.ep-pd__badges { list-style: none; margin: 0 0 var(--ep-s-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--ep-s-2); }
.ep-pd__badges li {
	margin: 0;
	padding: 5px 11px;
	border-radius: var(--ep-r-full);
	background: var(--pd-soft);
	border: 1px solid var(--pd-edge);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	color: var(--pd-ink);
}

/* Measured result. Given real weight, because on the products that have it it
   is the strongest thing on the page. */
.ep-pd__measured {
	margin: 0 0 var(--ep-s-5);
	border: 1px solid var(--pd-edge);
	border-radius: var(--ep-r-md);
	overflow: hidden;
}
.ep-pd__mhead {
	display: block;
	padding: var(--ep-s-2) var(--ep-s-4);
	background: var(--pd-soft);
	border-bottom: 1px solid var(--pd-edge);
	font-size: 10px;
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pd-accent);
}
.ep-pd__stats {
	list-style: none; margin: 0 !important; padding: 0 !important;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px; background: var(--pd-edge);
}
.ep-pd__stats li {
	margin: 0; padding: var(--ep-s-3);
	background: var(--ep-lt-card);
	display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.ep-pd__stats b {
	font-size: var(--ep-t-lg); font-weight: var(--ep-w-black);
	color: var(--pd-ink); letter-spacing: var(--ep-track-head);
	font-variant-numeric: tabular-nums;
}
.ep-pd__stats span { font-size: 11px; color: var(--ep-lt-mut); }

.ep-pd__sec { margin: 0 0 var(--ep-s-5); }
.ep-pd__sec h3 {
	margin: 0 0 var(--ep-s-3);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pd-accent);
	padding-bottom: var(--ep-s-2);
	border-bottom: 1px solid var(--pd-edge);
}
.ep-pd__sec--box {
	padding: var(--ep-s-4);
	border: 1px solid var(--pd-edge);
	border-radius: var(--ep-r-md);
	background: var(--pd-soft);
}
.ep-pd__sec--box h3 { border-bottom: 0; padding-bottom: 0; }

.ep-pd__list { list-style: none; margin: 0; padding: 0; }
.ep-pd__list li {
	margin: 0 0 var(--ep-s-2);
	padding-left: var(--ep-s-5);
	position: relative;
	font-size: var(--ep-t-base);
	line-height: 1.55;
}
.ep-pd__list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.58em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--pd-accent);
}
.ep-pd__list--check li::before {
	top: 0.36em;
	width: 12px; height: 7px;
	border-radius: 0;
	background: none;
	border-left: 2px solid var(--pd-accent);
	border-bottom: 2px solid var(--pd-accent);
	transform: rotate(-45deg);
}
.ep-pd__list span { font-weight: var(--ep-w-bold); color: var(--pd-ink); }

.ep-pd__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px; background: var(--pd-edge);
	border: 1px solid var(--pd-edge);
	border-radius: var(--ep-r-sm);
	overflow: hidden;
}
.ep-pd__grid li {
	margin: 0; padding: var(--ep-s-3);
	background: var(--ep-lt-card);
	display: flex; flex-direction: column; gap: 2px;
}
.ep-pd__grid li.is-wide { grid-column: 1 / -1; }
.ep-pd__grid span { font-size: 11px; color: var(--ep-lt-mut); }
.ep-pd__grid b { font-size: var(--ep-t-sm); color: var(--pd-ink); font-weight: var(--ep-w-bold); }

@media (max-width: 560px) {
	.ep-pd__grid, .ep-pd__stats { grid-template-columns: 1fr; }
}

/* Pending test results, stated plainly. An absence of data must not be dressed
   up to look like a credential. */
.ep-testing__wait {
	display: inline-block;
	padding: var(--ep-s-2) var(--ep-s-4);
	border: 1px dashed var(--ep-lt-line-2);
	border-radius: var(--ep-r-full);
	background: var(--ep-lt-sunk);
	color: var(--ep-lt-mut);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
}

/* Safety net: if anything ever re-adds auto paragraphs, an empty one must not
   open a hole in the layout. */
.ep-pd p:empty { display: none; }

/* ---------------------------------------------------------------------------
   THE TABS, AND THE LAST OF THE ORANGE

   The theme draws the active tab's underline as an ::after on the LINK, with
   border-bottom: 3px solid #F1770D. Nothing that styles the li or the anchor
   itself touches it, which is why the orange survived every previous pass.

   The earlier rules here also aimed at ".wc-tabs li a" at (0,2,2) while the
   theme's own ".woocommerce-tabs ul.tabs li a" is (0,2,3), so they lost. These
   are scoped to match and beat it.
   --------------------------------------------------------------------------- */
.ep-pdp__detail .woocommerce-tabs ul.tabs li a { color: var(--ep-lt-mut); }
/* !important, and not out of laziness. This rule matches, and by every
   specificity calculation including the browser's own cascade walk it should
   win, yet the computed colour stayed at the muted idle value through a hard
   reload. Something in the theme's stack is resolving it away in a manner the
   CSSOM does not report. The underline already marks the active tab, so this
   is emphasis rather than a fix, and forcing it costs nothing. */
.ep-pdp__detail .woocommerce-tabs ul.tabs li.active a,
.ep-pdp__detail .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ep-lt-ink) !important;
	font-weight: var(--ep-w-bold);
}
.ep-pdp__detail .woocommerce-tabs ul.tabs li a::after { border-bottom-color: var(--ep-vio-deep) !important; }
.ep-pdp__detail .woocommerce-tabs ul.tabs li { border-bottom-color: var(--ep-lt-line); }

/* ---------------------------------------------------------------------------
   CENTRE THE READING COLUMN ON DESKTOP

   The panel runs the full width of the page while the text is capped at 74ch,
   so the block sat hard left against a wide empty right. Centring the column
   keeps the measure readable and the page balanced. Left aligned on a phone,
   where there is no spare width to centre within.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.ep-pd, .ep-tabpane { margin-inline: auto; }
	.ep-pdp__detail .woocommerce-tabs ul.tabs { justify-content: center; }
}

/* The About section: ordinary prose for search, set apart from the lists above
   it so it does not read as another spec block. */
.ep-pd__about { margin-top: var(--ep-s-6); padding-top: var(--ep-s-5); border-top: 1px solid var(--pd-edge); }
.ep-pd__about p { margin: 0; font-size: var(--ep-t-sm); line-height: 1.65; color: var(--ep-lt-mut); }

/* The measured grid is sized to what it actually holds. A single result in a
   three column grid left two empty cells, which read as a broken panel rather
   than as one measurement. */
.ep-pd__stats.is-1 { grid-template-columns: minmax(0, 1fr); }
.ep-pd__stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ep-pd__stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
   THE TESTING TAB'S CERTIFICATE LINK

   WHM-87. The report itself is in the product gallery, so a customer can see it
   without leaving the page; this is the direct link to the full size file for
   anyone who wants to read the small print.
   --------------------------------------------------------------------------- */
.ep-pdp__detail .ep-testing__coa { margin: var(--ep-s-4) 0 0; }
.ep-pdp__detail .ep-testing__coa a {
	display: inline-flex;
	align-items: center;
	gap: var(--ep-s-2);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	color: var(--ep-vio-deep);
}
.ep-pdp__detail .ep-testing__coa a::before {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--ep-icon-doc) center / contain no-repeat;
	mask: var(--ep-icon-doc) center / contain no-repeat;
}


/* ---------------------------------------------------------------------------
   PREVIOUS TESTS (WHM-104)

   Sits under the current batch panel. Deliberately quieter than the panel
   above it: the current batch is what is in the box being bought, and the
   history is context. Same rhythm as the certificate panel so the two read as
   one block rather than two components that happen to be adjacent.
   --------------------------------------------------------------------------- */
.ep-hist {
	margin-top: var(--ep-s-3);
	padding-top: var(--ep-s-3);
	border-top: 1px solid var(--ep-lt-line);
}
.ep-hist__h {
	display: block;
	margin-bottom: var(--ep-s-2);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-hist__l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ep-s-2); }
.ep-hist__i {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ep-s-2) var(--ep-s-3);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-mut);
}
.ep-hist__d { font-weight: var(--ep-w-semi); color: var(--ep-lt-ink); }
/* The figures keep their own spacing so a date, a batch and a result do not
   run together into one string on a narrow screen. */
.ep-hist__m { display: flex; flex-wrap: wrap; gap: var(--ep-s-2) var(--ep-s-3); flex: 1 1 auto; min-width: 0; }
.ep-hist__lab { font-style: normal; opacity: 0.85; }
.ep-hist__i a { color: var(--ep-vio-deep); font-weight: var(--ep-w-semi); white-space: nowrap; }

/* Explains a withheld batch number rather than leaving a gap the customer has
   to interpret. */
.ep-testing__note {
	margin-top: var(--ep-s-3);
	padding-top: var(--ep-s-3);
	border-top: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-mut);
}
.ep-tabpane .ep-spec-list + .ep-testing__coa { margin-bottom: var(--ep-s-5); }


/* =========================================================================
   UI RULE (2026-09-26): the buy button is one line. Next to the quantity box
   it needs 220px; when the row cannot give it that, it takes its own row at
   full width instead of wrapping "Add to cart" onto three lines.
   ========================================================================= */
.ep-pdp__cart .single_add_to_cart_button,
.ep-pdp__cart button[type="submit"] { white-space: nowrap; flex: 1 1 220px; justify-content: center; }
.ep-pdp__cart .commercekit-sticky-atc-intersector .single_add_to_cart_button { white-space: nowrap; }