/**
 * YouBeauty — WooCommerce shared chrome.
 *
 * Loaded on the shop, single product, cart and checkout. Holds only what all four share:
 * breadcrumb, page title, notices, buttons, price atoms, the sale flag, form controls and the
 * section-heading treatment the comp uses. Anything true of one page only lives in that page's
 * stylesheet.
 *
 * Every value comes from the csl-homepage token layer, which reaches this page through the
 * `csl-scope` class on `<body>`. Nothing here declares a `font-family`: the pages sit inside the
 * Divi theme and must match it, exactly as the token file itself does.
 *
 * Two conventions worth knowing before editing:
 *
 *   - Rules are scoped to `#left-area` (the WooCommerce content column) or to a WooCommerce class
 *     name, never to bare `body.woocommerce`. That class is on the body, so an unscoped selector
 *     would also match the Divi Theme Builder header and footer.
 *
 *   - `!important` appears only where Divi's own WooCommerce stylesheet used it first, since
 *     nothing else can win against it. Each one names the declaration it answers. It is not used
 *     anywhere else.
 */

/* ------------------------------------------------------------------ page width */

/*
 * The content column on every WooCommerce page.
 *
 * Divi's `.container` is `width: 80%; max-width: 1080px`, which on a 1600px screen leaves the shop
 * grid two tiles wide and squeezes the checkout summary panel to 278px. 1450px is the width the
 * client asked for.
 *
 * Both halves of the declaration are needed: raising `max-width` alone does nothing, because at
 * these viewports Divi's `width: 80%` is the smaller of the two and wins. `min()` keeps a
 * proportional gutter below 1576px and pins the column at 1450px above it.
 *
 * Scoped to `#main-content` so it cannot reach a Theme Builder header or footer, and to the
 * WooCommerce pages only — the home page is a page-builder layout with its own row widths and is
 * deliberately left alone.
 */
#main-content .container {
	width: min( 92%, 1450px );
	max-width: 1450px;
}

/* ------------------------------------------------------------------ breadcrumb */

.woocommerce-breadcrumb {
	margin: 0 0 var( --csl-space-5 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	line-height: var( --csl-leading-snug );
}

.woocommerce-breadcrumb a {
	color: var( --csl-ink-soft );
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
	color: var( --csl-accent );
	text-decoration: underline;
}

/* ----------------------------------------------------------------- page title */

/*
 * Divi styles bare `h1`-`h6` globally, including a `padding-bottom`. Every heading rule in these
 * stylesheets therefore zeroes padding as well as margin — a class selector that mentions only
 * margin leaves the element padding in place, which has already cost this project a bug.
 */
#left-area > .woocommerce-products-header .woocommerce-products-header__title,
#left-area > article > .entry-title.main_title {
	margin: 0 0 var( --csl-space-6 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-3xl );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-tight );
	line-height: var( --csl-leading-tight );
}

/* ------------------------------------------------------- section heading rule */

/*
 * The comp's band heading: sentence case, navy, and a hairline rule running the full width of the
 * content column directly beneath it. Used for "Customer reviews" and the related-products row on
 * the product page, and for the cart and checkout column heads.
 *
 * Applied by naming the headings WooCommerce actually renders rather than by adding a class,
 * because these are Woo's own templates and there is nowhere to add one without an override.
 */
.yb-section-title {
	margin: 0 0 var( --csl-space-6 );
	padding: 0 0 var( --csl-space-3 );
	border-bottom: 1px solid var( --csl-ink );
	color: var( --csl-ink );
	font-size: var( --csl-text-2xl );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-tight );
	line-height: var( --csl-leading-tight );
	text-transform: none;
}

/*
 * The comp's in-column label: small, uppercase, wide-tracked, with the rule above it instead of
 * below. Separates the stacked panels on the product page and the summary rows on cart/checkout.
 */
.yb-panel-title {
	margin: 0 0 var( --csl-space-3 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

/* -------------------------------------------------------------------- notices */

/*
 * The notices sit on Divi's accent ground, not ours.
 *
 * The Divi Customizer writes `.woocommerce-message,.woocommerce-error,.woocommerce-info {
 * background:#143242 !important }` into `et-cache/` from the theme's accent-colour setting, and
 * pairs it with `color:#fff !important`, `padding:15px !important` and `font-size:18px !important`
 * on the same elements. That accent is a setting the client chose and it is already brand navy, so
 * these are drawn *on* it rather than fought — overriding four `!important` declarations to arrive
 * back at a brand colour would be a lot of noise for no visible gain.
 *
 * What is ours: the left stripe that says which kind of notice this is, the flex row that keeps the
 * action beside the text, and legible links.
 *
 * Consequence worth knowing: the notice type is carried by the stripe alone, and changing the
 * accent colour in the Customizer changes the ground under all three at once.
 */
#left-area .woocommerce-message,
#left-area .woocommerce-info,
#left-area .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --csl-space-4 );
	margin: 0 0 var( --csl-space-6 );
	border: 0;
	border-left: 6px solid var( --csl-brand-orange );
	border-radius: 0;
	line-height: var( --csl-leading-snug );
	list-style: none;
}

#left-area .woocommerce-info {
	border-left-color: var( --csl-brand-yellow );
}

#left-area .woocommerce-error {
	border-left-color: var( --csl-brand-pink );
}

/*
 * Divi already paints these links white for its own dark ground, which is correct here. Only the
 * underline is added — on a navy band a white link and white body copy are otherwise identical.
 */
#left-area .woocommerce-message a:not( .button ),
#left-area .woocommerce-info a:not( .button ),
#left-area .woocommerce-error a:not( .button ) {
	font-weight: var( --csl-weight-semibold );
	text-decoration: underline;
}

/* -------------------------------------------------------------------- buttons */

/*
 * The button family from the token layer, mapped onto the classes WooCommerce renders. Shape,
 * weight and transition come from `.csl-btn`; only the fills differ, so a change to the button
 * language on the homepage reaches these too. White type on every fill, as the Design Tokens
 * sheet draws them (client, 2026-10-05).
 *
 * `.button` alone is far too broad to use unscoped — it is a Divi class as well — so every
 * selector is anchored inside the content column.
 */
#left-area a.button,
#left-area button.button,
#left-area input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --csl-space-2 );
	padding: 0.7em 1.4em;
	border: 2px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-btn );
	background-color: var( --csl-brand-yellow );
	color: #ffffff;
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color var( --csl-transition ), color var( --csl-transition ), border-color var( --csl-transition );
}

#left-area a.button:hover,
#left-area button.button:hover,
#left-area input.button:hover,
#left-area a.button:focus-visible,
#left-area button.button:focus-visible,
#left-area input.button:focus-visible {
	background-color: var( --csl-brand-orange );
	color: #ffffff;
}

/* The primary action on any WooCommerce page — add to cart, place order, update cart. */
#left-area a.button.alt,
#left-area button.button.alt,
#left-area input.button.alt {
	background-color: var( --csl-brand-orange );
	color: #ffffff;
}

#left-area a.button.alt:hover,
#left-area button.button.alt:hover,
#left-area input.button.alt:hover,
#left-area a.button.alt:focus-visible,
#left-area button.button.alt:focus-visible,
#left-area input.button.alt:focus-visible {
	background-color: #ec7a15;
	color: #ffffff;
}

#left-area .button:disabled,
#left-area .button.disabled {
	border-color: var( --csl-rule );
	background-color: var( --csl-surface );
	color: var( --csl-ink-soft );
	cursor: not-allowed;
}

/*
 * Divi's WooCommerce stylesheet hangs a 32px ETmodules arrow off every Woo button as an absolutely
 * positioned `::after`, kept at `opacity: 0` and revealed on hover. That was written against Divi's
 * own padding-based buttons; the buttons above are `inline-flex`, so the glyph becomes a flex item
 * and lands on top of the label rather than beside it — the mark that appears over the text on
 * hover. `::before` carries the same glyph from the same Divi rule when the icon is placed left,
 * so both go.
 *
 * The Customizer's "Show Button Icon" toggle removes this natively, but it is a database setting —
 * it would not travel to staging with the code — and it also forces `padding: .3em 1em !important`
 * onto every Woo button, flattening the sizing set above. Dropping the pseudo-element is narrower.
 *
 * Divi's selector list also covers `input.button` and `#respond input#submit`; those are left out
 * because a replaced element renders no pseudo-element, so there is nothing there to hide.
 */
#left-area a.button::before,
#left-area a.button::after,
#left-area button.button::before,
#left-area button.button::after {
	display: none;
}

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

/*
 * One visible ring for every interactive element on these pages. Never animated — a ring that
 * fades in is a ring the keyboard user has already moved past.
 */
#left-area a:focus-visible,
#left-area button:focus-visible,
#left-area input:focus-visible,
#left-area select:focus-visible,
#left-area textarea:focus-visible,
#left-area [tabindex]:focus-visible {
	outline: 2px solid var( --csl-ink );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------- price */

#left-area .price,
#left-area .amount {
	color: var( --csl-ink );
	font-weight: var( --csl-weight-bold );
}

#left-area .price del,
#left-area .price del .amount {
	margin-right: var( --csl-space-2 );
	color: var( --csl-ink-soft ) !important; /* Divi: `li.product .price del { color:#666 !important }`. */
	font-weight: var( --csl-weight-regular );
	text-decoration: line-through;
}

#left-area .price ins,
#left-area .price ins .amount {
	background: none;
	color: var( --csl-brand-pink-deep );
	font-weight: var( --csl-weight-bold );
	text-decoration: none;
}

/* ------------------------------------------------------------------ sale flag */

/*
 * `b7ectg_wc_sale_flash()` renders the shared `.csl-badge` — pink percentage half, navy OFF half,
 * navy outline — in place of WooCommerce's "Sale!" span, so the flag is the same component the
 * homepage cards and promo rails draw. Appearance is entirely the token layer's; this block only
 * has to undo Divi.
 *
 * Divi's `.woocommerce span.onsale` sets background, border-radius, padding, line-height,
 * font-weight and position with `!important`, at a higher specificity than `.csl-badge`. The
 * selector below adds the `.csl-badge` class so ordinary declarations win on specificity, and
 * carries `!important` on exactly the six Divi marked that way — no others.
 */
.woocommerce span.onsale.csl-badge,
.woocommerce-page span.onsale.csl-badge {
	z-index: 4;
	background: transparent !important; /* Divi: `background:#ef8f61 !important`. */
	border-radius: var( --csl-radius-btn ) !important; /* Divi: `border-radius:3px !important`. */
	padding: 0 !important; /* Divi: `padding:6px 18px !important`. */
	line-height: 1 !important; /* Divi: `line-height:inherit !important`. */
	font-weight: var( --csl-weight-bold ) !important; /* Divi: `font-weight:500 !important`. */
	min-width: 0 !important; /* Divi: `min-width:0 !important`. */
	min-height: 0 !important; /* Divi: `min-height:0 !important`. */
	font-size: var( --csl-text-xs );
	text-shadow: none;
}

/* ---------------------------------------------------------------- pagination */

.woocommerce-pagination {
	margin: var( --csl-space-10 ) 0 0;
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var( --csl-space-2 );
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 var( --csl-space-2 );
	border: 2px solid var( --csl-rule );
	border-radius: var( --csl-radius-btn );
	background: var( --csl-ground );
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	text-decoration: none;
	transition: background-color var( --csl-transition ), border-color var( --csl-transition ), color var( --csl-transition );
}

.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:focus-visible {
	border-color: var( --csl-brand-navy );
	background: var( --csl-surface );
}

.woocommerce-pagination .page-numbers.current {
	border-color: var( --csl-brand-navy );
	background: var( --csl-brand-navy );
	color: #ffffff;
}

.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ------------------------------------------------------------- form controls */

/*
 * Divi restyles `.orderby` and the variation selects with its own grey pill. These are the same
 * controls the rest of the design draws square and navy-ruled, so they are brought back in line
 * here rather than in each page's stylesheet.
 */
#left-area select,
#left-area input[type="text"],
#left-area input[type="email"],
#left-area input[type="tel"],
#left-area input[type="number"],
#left-area input[type="search"],
#left-area input[type="password"],
#left-area textarea {
	padding: 0.55em 0.8em;
	border: 1px solid var( --csl-rule );
	border-radius: var( --csl-radius-sm );
	background-color: var( --csl-ground );
	color: var( --csl-ink ) !important; /* Divi: `.orderby { color:#666 !important }`. */
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-snug );
	transition: border-color var( --csl-transition );
}

#left-area select:hover,
#left-area input:hover,
#left-area textarea:hover {
	border-color: var( --csl-brand-navy );
}

#left-area input[type="checkbox"],
#left-area input[type="radio"] {
	accent-color: var( --csl-brand-pink-deep );
}

/* --------------------------------------------------------------- product tile */

/*
 * One tile, three places. WooCommerce renders `ul.products > li.product` for the shop archive, the
 * related-products row and the upsells row, so the tile is described once here and the page
 * stylesheets only adjust the track size and the image height.
 *
 * It was written twice to begin with — once for the archive, once for the related row — and the
 * two copies immediately disagreed: the related row lost the wishlist positioning and the grid
 * clearfix fix. One decision in two files has now produced a defect three times on this project,
 * so it is one rule.
 *
 * Drawn to match the "Recommended for You" card in the CSL003 comp: white ground, the shared
 * discount flag top-left, the wishlist heart top-right, packshot above the copy, then name, brand,
 * and the sale price beside the struck original.
 */
#left-area ul.products {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
	gap: clamp( 1rem, 2vw, 1.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Divi clearfixes `ul.products` with `::before` / `::after`. On a float layout those are invisible
 * table boxes; on a grid they are grid *items*, and the `::before` takes the first cell — which is
 * why the first product sat in column two with an empty box beside it.
 */
#left-area ul.products::before,
#left-area ul.products::after {
	content: none;
}

/* Woo emits a `columns-N` class; the grid is fluid and must not be pinned to it. */
#left-area ul.products.columns-1,
#left-area ul.products.columns-2,
#left-area ul.products.columns-3,
#left-area ul.products.columns-4,
#left-area ul.products.columns-5,
#left-area ul.products.columns-6 {
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
}

/*
 * Divi floats the tile and gives it a percentage width and a right margin. All three have to go
 * before the grid can place it. `min-width: 0` because the tile holds a clamped title: a grid item
 * defaults to `min-width: auto`, which refuses to shrink below its content and pushes the track
 * wider than 1fr.
 */
/*
 * The tile carries no ground, no border and no padding — it is not a box. The ground belongs to the
 * image well below, and the copy sits on the page beside it. This is `.csl-card--md` from the
 * plugin, which is `background-color: transparent` with the ground on `.csl-card__media`, and it is
 * copied rather than invented so the shop tile and the homepage rows read as one component.
 *
 * Divi floats the tile and gives it a percentage width and a right margin; all three have to go
 * before the grid can place it. `min-width: 0` because the tile holds a clamped title: a grid item
 * defaults to `min-width: auto`, which refuses to shrink below its content and pushes the track
 * wider than 1fr.
 */
/*
 * `width` carries `!important` because the Divi Customizer's own tile width does, and only inside
 * one band. Divi writes this into `et-cache/` from its shop-columns setting:
 *
 *     @media ( min-width: 768px ) and ( max-width: 980px ) {
 *         .woocommerce-page ul.products li.product:nth-child(n) { width: 28.333% !important }
 *     }
 *
 * That is a percentage for Divi's float grid. Against the CSS grid here it makes each tile a
 * fraction of its own track instead of filling it, and `:nth-child(n)` plus `!important` beats the
 * `width: auto` this rule used to set on its own. Measured on the shop archive before this fix:
 * 300px tiles at 1024px, then 81px at 980, 75px at 900 and 98px at 768 — collapsing to a quarter
 * of their track through the whole tablet-portrait band, and correct again at 760px.
 *
 * It affects every `ul.products` on the site, so it is answered here in the shared tile rather than
 * in any one page's stylesheet: the shop archive, the category archives, and the related and upsell
 * rows on the product page all draw this same tile.
 */
#left-area ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	clear: none;
	width: auto !important; /* Divi Customizer: `li.product:nth-child(n) { width:28.333% !important }`, 768-980px. */
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#left-area ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/*
 * The image well: a square box on brand neutral, with the packshot contained inside its padding.
 *
 * Square by `aspect-ratio` rather than a fixed height, so the well grows with the column and the
 * grid keeps its rhythm at every track width — the same shape `.csl-card--md` draws.
 *
 * The ground stops here. `#eee` behind the *copy* would take the brand line from 4.61:1 to 3.98:1
 * and the sale price from 4.79:1 to 4.13:1, both under AA, while leaving the navy title looking
 * fine — a failure that is invisible on inspection. The body below sits on the page ground, which
 * is what those two tones were toned against.
 */
#left-area ul.products li.product .et_shop_image {
	box-sizing: border-box;
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: var( --csl-space-4 );
	padding: var( --csl-space-6 ) var( --csl-space-4 );
	background-color: var( --csl-brand-neutral );
	overflow: hidden;
}

#left-area ul.products li.product img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 !important; /* Divi: `li.product a img { margin:0 0 9px !important }`. */
	object-fit: contain;
	transition: transform var( --csl-transition );
}

/* The lift the plugin card uses on hover, so the two components behave the same way. */
@media ( hover: hover ) and ( pointer: fine ) {
	#left-area ul.products li.product:hover img {
		transform: scale( 1.03 );
	}
}

/*
 * Divi's hover overlay — a translucent wash and a magnifier glyph over the packshot. The comp
 * draws a clean tile, and the whole tile is already the link, so the overlay offers an affordance
 * for something the card does not do.
 */
#left-area ul.products li.product .et_overlay {
	display: none;
}

/*
 * Flag and wishlist anchor to the tile's own corners, inside its padding, rather than to the image
 * well — the same rule the homepage card follows, so a tile reads the same in either place.
 */
#left-area ul.products li.product .onsale {
	top: var( --csl-space-2 ) !important; /* Divi: `span.onsale { top:10px !important }`. */
	left: 0 !important; /* Divi: `li.product .onsale { left:10px !important }`. */
	right: auto !important; /* Divi: `right:auto !important` on the same rule. */
	margin: 0 !important; /* Divi: `margin:0 !important` on the same rule. */
}

#left-area ul.products li.product .tinv-wraper {
	position: absolute;
	top: var( --csl-space-2 );
	right: 0;
	z-index: 5;
	margin: 0;
	line-height: 0;
}

#left-area ul.products li.product .tinvwl_add_to_wishlist_button {
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-lg );
	transition: color var( --csl-transition );
}

#left-area ul.products li.product .tinvwl_add_to_wishlist_button:hover,
#left-area ul.products li.product .tinvwl_add_to_wishlist_button:focus-visible {
	color: var( --csl-brand-pink-deep );
}

/*
 * Clamped to two lines. `padding: 0` is not optional: Divi styles bare `h1`-`h6` with a
 * `padding-bottom`, and inside a `-webkit-box` that padding is part of the clipped box, so the
 * clamp cuts at two lines while the box shows the top of a third.
 *
 * The size carries `!important` because Divi sets `.product .related h2 { font-size:26px
 * !important }` — a rule meant for that row's *heading* which also lands on every tile title in
 * the related row, since those are `h2` as well.
 *
 * A fixed rem size, not a `vw` token: a tile is a grid track, so its width tracks the column, not
 * the viewport, and a `vw`-scaled title grows away from the box that has to contain it.
 */
#left-area ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0 0 var( --csl-space-1 );
	padding: 0 !important; /* Divi: `li.product h3 { padding:.3em 0 }` and the global `h1`-`h6`. */
	color: var( --csl-ink );
	font-size: var( --csl-text-base ) !important; /* Divi: `.product .related h2 { font-size:26px !important }`. */
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-normal );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

/* `b7ectg_wc_loop_brand()` emits this inside the loop link, under the product name. */
#left-area .yb-loop-brand {
	display: block;
	margin: 0 0 var( --csl-space-3 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	line-height: var( --csl-leading-snug );
}

/*
 * The price sits at the bottom of the tile whatever the title's height, so a row of tiles lines up
 * on the price rather than ragging with the names.
 */
#left-area ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --csl-space-2 );
	margin: auto 0 0 !important; /* Divi: `li.product .price { margin:0 !important }`. */
	font-size: var( --csl-text-lg ) !important; /* Divi: `li.product .price { font-size:14px }`. */
	line-height: var( --csl-leading-snug );
}

#left-area ul.products li.product .price del {
	order: 2;
	margin: 0;
	font-size: var( --csl-text-sm );
}

#left-area ul.products li.product .price ins {
	order: 1;
}

@media ( max-width: 479px ) {
	/*
	 * Two tiles still fit at 320px once the track floor comes down — one column at this width
	 * makes the page a very long scroll for a 97-product catalogue.
	 */
	#left-area ul.products,
	#left-area ul.products.columns-1,
	#left-area ul.products.columns-2,
	#left-area ul.products.columns-3,
	#left-area ul.products.columns-4,
	#left-area ul.products.columns-5,
	#left-area ul.products.columns-6 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --csl-space-3 );
	}

	/*
	 * The well keeps its square shape and simply gets less inner padding; the tile has no padding
	 * of its own to give back, and the badge and heart are already on its edge.
	 */
	#left-area ul.products li.product .et_shop_image {
		margin-bottom: var( --csl-space-3 );
		padding: var( --csl-space-3 ) var( --csl-space-2 );
	}

	#left-area ul.products li.product .woocommerce-loop-product__title {
		font-size: var( --csl-text-sm ) !important;
	}

	#left-area ul.products li.product .price {
		font-size: var( --csl-text-base ) !important;
	}
}

/* ---------------------------------------------------------- the review form */

/*
 * Divi's Customizer paints `#respond input#submit` with the site accent and pairs it with its own
 * blue outline. The ground is the client's setting and already brand navy, so only the outline and
 * the corner shape are brought into line with every other button on these pages.
 */
/* Divi's global `.form-submit { text-align: right }` sent the button to the far edge of the column; the design has it under the textarea. */
#left-area #respond p.form-submit {
	text-align: left;
}

#left-area #respond input#submit {
	padding: 0.7em 1.4em;
	border: 2px solid var( --csl-brand-navy );
	border-radius: var( --csl-radius-btn );
	color: #ffffff;
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-wide );
	text-transform: uppercase;
	cursor: pointer;
}

/* ---------------------------------------------------- packshot height on store pages
 *
 * WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto }`. That is
 * (0,1,1) — a class plus a type selector — and the card's own `.csl-card__image` is (0,1,0),
 * so on any page carrying the `woocommerce` body class Woo wins and every packshot renders at
 * its intrinsic ratio. A 389x1024 bottle then stands ~2.6x taller than a square box beside it,
 * which is what breaks the row heights. The homepage never showed it because that body class
 * is only present on store pages.
 *
 * Two classes deep to outrank Woo without `!important`. The well's `aspect-ratio: 1 / 1` also
 * stops resolving while the image overflows it, so capping the image fixes the square too.
 *
 * Lives here rather than in `shop.css` because the card is now on the product page too: a fix
 * written into one page's stylesheet is a fix the next page silently does without.
 */
.csl-card .csl-card__image {
	height: var( --csl-card-img-h );
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ------------------------------------------------------------------- utility */

/*
 * The wishlist plugin drops its own "Add to Wishlist" text label into the loop and the add-to-cart
 * form. The comp draws a heart glyph and nothing else; the plugin's own icon font supplies it, so
 * only the text has to go — and it goes visually, not from the accessibility tree.
 */
.tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	#left-area *,
	#left-area *::before,
	#left-area *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}