/**
 * YouBeauty — shop and category archive chrome.
 *
 * Loaded only on the shop page and product taxonomy archives. Covers the three things the Divi
 * Theme Builder cannot express on its own: the chevron category banner, the filter sidebar's
 * appearance, and the grid that holds the product cards.
 *
 * The product cards themselves are NOT styled here. They come from the csl-homepage plugin's
 * shared card component and carry their own stylesheet, so the shop grid and the homepage rows
 * stay identical by construction rather than by two sets of rules agreeing with each other.
 *
 * Divi's own class names (.et_pb_post_filter*) are taken from the Post Filter module's style
 * builder, not guessed. If a Divi update renames them the sidebar loses its skin but keeps
 * working, which is the right failure mode.
 */

/* --------------------------------------------------------------- category palette */

/*
 * One accent per top-level category, consumed by the banner below and by anything else that needs
 * to know "what colour is this category".
 *
 * Keyed on `yb-cat-*`, not on the `term-*` class WordPress emits. WordPress names the term you are
 * actually on, and products in this catalogue sit on the children — so `term-make-up` appears on
 * one archive out of ten in that branch, and `/product-category/lipstick/` matched none of these
 * rules and took the navy fallback. `b7ectg_wc_body_class()` resolves the top-level ancestor and
 * emits it, so every archive in a branch gets its branch's colour.
 *
 * Every pairing is WCAG AA against its ink at normal text size:
 *   navy on yellow 7.73:1 · navy on orange 5.29:1 · white on navy 12.7:1 · white on deep pink 4.79:1
 *
 * Brand pink #ef357f is deliberately not used as a banner ground — white on it is 3.83:1, which is
 * large-text only. #d22f70 reads as the same colour and passes.
 */
body {
	--yb-cat-ground: #143242;
	--yb-cat-ink: #ffffff;
}

body.yb-cat-skin-care {
	--yb-cat-ground: #d22f70;
	--yb-cat-ink: #ffffff;
}

body.yb-cat-make-up {
	--yb-cat-ground: #ffb740;
	--yb-cat-ink: #143242;
}

body.yb-cat-hair-care {
	--yb-cat-ground: #143242;
	--yb-cat-ink: #ffffff;
}

body.yb-cat-nail-care {
	--yb-cat-ground: #ff8728;
	--yb-cat-ink: #143242;
}

/* ------------------------------------------------------------------ the banner */

/*
 * Apply `yb-cat-banner` as the CSS class of the banner's Divi row. The label block is a child
 * carrying `yb-cat-banner__label`.
 *
 * The artwork does *not* have to be set on the row: `--yb-cat-banner-image` arrives from
 * `b7ectg_shop_styles()` already resolved to this archive's branch, so one row serves all nineteen
 * category archives and `/shop/`. Set a background image on the row in the builder only to
 * override it — that wins, being a more specific selector than this one.
 *
 * `background-position: center right` matters more than it looks. Each supplied banner has its own
 * chevron and category name baked into the left of the artwork, and the wedge below redraws both
 * as live text. Anchoring right puts the baked-in copy under the CSS label at desktop widths and
 * crops it out entirely once the layout stacks, so only one of the two is ever visible.
 *
 * The wedge is a clip-path, not a bordered triangle: a border triangle cannot take a percentage
 * width, so it would be pinned to a pixel size while the row stays fluid. Same reasoning as the
 * homepage promo rails, and deliberately a separate copy — the shop page should not break if a
 * plugin stylesheet is refactored.
 */
.yb-cat-banner {
	--yb-banner-notch: clamp( 2rem, 6vw, 5rem );

	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp( 96px, 14vw, 150px );
	border: 2px solid #143242;
	background-color: #f2f2f2;
	background-image: var( --yb-cat-banner-image, none );
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.yb-cat-banner__label {
	display: flex;
	align-items: center;
	align-self: stretch;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: min( 42%, 26rem );
	padding: clamp( 1rem, 3vw, 2rem );
	padding-right: calc( var( --yb-banner-notch ) + 1rem );
	background-color: var( --yb-cat-ground );
	color: var( --yb-cat-ink );
	clip-path: polygon(
		0 0,
		calc( 100% - var( --yb-banner-notch ) ) 0,
		100% 50%,
		calc( 100% - var( --yb-banner-notch ) ) 100%,
		0 100%
	);
}

.yb-cat-banner__label h1,
.yb-cat-banner__label h2 {
	margin: 0;
	color: inherit;
	font-size: clamp( 1.25rem, 1rem + 1.6vw, 2.25rem );
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* The tagline sits on the banner's own light ground, so it takes navy rather than the wedge ink. */
.yb-cat-banner__tagline {
	flex: 1 1 auto;
	padding: clamp( 1rem, 3vw, 2rem );
	color: #143242;
	font-size: clamp( 0.875rem, 0.8rem + 0.3vw, 1rem );
	line-height: 1.5;
}

@media ( max-width: 767px ) {
	/* The wedge stops being a wedge when there is no room beside it. */
	.yb-cat-banner {
		flex-direction: column;
		align-items: stretch;
	}

	.yb-cat-banner__label {
		min-width: 0;
		padding-right: clamp( 1rem, 3vw, 2rem );
		clip-path: none;
	}
}

/* ------------------------------------------------------------------- the grid */

/*
 * Give the Loop's item wrapper the `yb-shop-grid` class. `auto-fill` rather than a fixed column
 * count so the grid reflows without a breakpoint per size, and 250px to match the card's own
 * --csl-card-min.
 */
.et_pb_column.yb-shop-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
	gap: clamp( 1rem, 2vw, 1.75rem );
	align-items: start;
}

/*
 * Divi clearfixes its columns. Under `display: grid` those pseudo-elements stop being invisible
 * table boxes and become grid items of their own, taking the first cell and pushing the first
 * product into column two.
 */
.et_pb_column.yb-shop-grid::before,
.et_pb_column.yb-shop-grid::after {
	content: none;
}

/*
 * Divi sizes the looped module with its own flex width -- `.et_flex_column_6_24` resolves to
 * `width: calc( 25% - ... )`. Inside a grid cell that would shrink the card to a quarter of its
 * column, so the loop item and the module it wraps each take the whole cell. Two classes deep
 * because Divi's rule is a single class: this outranks it without `!important`.
 */
.yb-shop-grid > .et_pb_group,
.yb-shop-grid > .et_pb_group > .et_pb_module {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* ---------------------------------------------------------------- the sidebar */

.et_pb_post_filter__controls {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.et_pb_post_filter_item {
	padding-bottom: 1rem;
	border-bottom: 1px solid #d9dee1;
}

.et_pb_post_filter__item-label {
	display: block;
	margin-bottom: 0.625rem;
	color: #143242;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.et_pb_post_filter__item-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.1875rem 0;
	color: #143242;
	font-size: 0.875rem;
	line-height: 1.4;
}

/*
 * Divi sets the real input to `display: none` and paints an `<i>` inside the label as the box
 * (18px, #eee, no checked state). So the control has to be drawn on that element — an
 * `accent-color` on the input can never fire. Three classes deep to clear Divi's own two-class
 * rules without `!important`.
 */
/*
 * Hide the real control ourselves. Divi does this in its own module CSS, but that stylesheet is
 * part of the per-template unified bundle in et-cache — if the bundle predates the Post Filter
 * being added to the layout, the rule is absent and the native checkbox renders *beside* the
 * styled `<i>`, which reads as a duplicate control. Declaring it here makes the sidebar correct
 * whatever state that cache is in.
 */
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="checkbox"],
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.et_pb_post_filter .et_pb_post_filter__item-control-surface .et_pb_post_filter__item-option label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="checkbox"] + label i,
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="radio"] + label i {
	flex: 0 0 auto;
	/*
	 * Declared here, not inherited from Divi: the tick is an absolutely-positioned `::after`, and
	 * Divi's `position: relative` lives in the same et-cache bundle that can go missing. Without
	 * it the tick anchors to an ancestor and lands outside the box.
	 */
	position: relative;
	width: 1rem;
	height: 1rem;
	/* Optical alignment with the first line of a label that wraps to two. */
	margin-top: 0.1875rem;
	border: 1px solid #b9c2c7;
	border-radius: 3px;
	background-color: #ffffff;
}

.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="checkbox"]:checked + label i,
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="radio"]:checked + label i {
	border-color: #ef357f;
	background-color: #ef357f;
}

.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="radio"] + label i {
	border-radius: 50%;
}

/*
 * Divi paints its own tick as `i::before { content: "N"; font-family: ETmodules }` in navy, but
 * only when its module CSS is in the et-cache bundle. Suppress it and keep the drawn one below,
 * so the control looks the same whether that stylesheet is present or not — otherwise the two
 * ticks overlap when it is, and neither appears when it is not.
 */
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="checkbox"]:checked + label i::before,
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="radio"]:checked + label i::before {
	content: none;
}

/* The tick. Drawn rather than a glyph, so it needs no icon font. */
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="checkbox"]:checked + label i::after {
	content: "";
	position: absolute;
	left: 0.3125rem;
	top: 0.125rem;
	width: 0.25rem;
	height: 0.5rem;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="checkbox"]:focus-visible + label i,
.et_pb_post_filter .et_pb_post_filter__item-option .et_pb_post_filter__item-control[type="radio"]:focus-visible + label i {
	outline: 2px solid #ef357f;
	outline-offset: 2px;
}

/*
 * The reset button. Divi renders it as a button inside the controls, and the comp draws it as a
 * quiet full-width action rather than a primary one.
 */
.et_pb_post_filter__controls button[type="reset"] {
	width: 100%;
	padding: 0.625rem 1rem;
	border: 1px solid #d9dee1;
	border-radius: 6px;
	background: #f1f1f1;
	color: #143242;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.et_pb_post_filter__controls button[type="reset"]:hover,
.et_pb_post_filter__controls button[type="reset"]:focus-visible {
	border-color: #143242;
	background: #eeeeee;
}

/*
 * The packshot-height override that used to live here (`.csl-card .csl-card__image`) moved to
 * `woocommerce.css`, which loads on every store page: the card is on the product page now too.
 */

/* ------------------------------------------------------- the price range control
 *
 * Divi renders a dual-range slider and ships no styling for it: two overlapping
 * `input[type=range]` laid over `-range-track` (whose `-range-progress` child is positioned by
 * Divi's own JS with inline `left`/`width` percentages, so nothing here may set those), plus a
 * `-range-values` row of two text inputs.
 *
 * The comp puts the two value chips *above* the track, which is the reverse of the DOM order —
 * hence `column-reverse` rather than reordering markup we do not own.
 *
 * Every selector here carries `.et_pb_post_filter` for specificity. Divi *does* ship a range skin
 * — grey track, `#333` progress, white thumb with a `#333` border — but only enqueues it where its
 * dynamic-assets pass detects the module, which on these archives it does inconsistently: the skin
 * loads on `/product-category/*/` and not on `/shop/`, the same unreliable detection that
 * `b7ectg_wc_archive_filter_scripts()` works around for the module's JavaScript. Divi writes it at
 * two classes, so a bare `.et_pb_post_filter__item-range-*` lost wherever the skin was present and
 * the price slider rendered black on the category archives and pink on the shop. Matching its two
 * classes is enough — this stylesheet loads after Divi's, so source order settles the tie and no
 * `!important` is needed.
 */
.et_pb_post_filter .et_pb_post_filter__item-range {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.875rem;
}

.et_pb_post_filter .et_pb_post_filter__item-range-slider {
	position: relative;
	display: flex;
	align-items: center;
	height: 1.25rem;
	/* Half a thumb of breathing room each side so the handles cannot clip the column. */
	margin: 0 0.5rem;
}

.et_pb_post_filter .et_pb_post_filter__item-range-track {
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 999px;
	background: #e3e6e8;
}

.et_pb_post_filter .et_pb_post_filter__item-range-progress {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 999px;
	background: #ef357f;
}

/*
 * Both inputs span the full track so either thumb can be grabbed anywhere. The input itself must
 * not swallow pointer events or the upper one would block the lower thumb; the thumbs opt back in.
 */
.et_pb_post_filter .et_pb_post_filter__item-range-input {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 1.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.et_pb_post_filter .et_pb_post_filter__item-range-input:focus {
	outline: none;
}

.et_pb_post_filter .et_pb_post_filter__item-range-input::-webkit-slider-runnable-track {
	height: 3px;
	border: 0;
	background: transparent;
}

.et_pb_post_filter .et_pb_post_filter__item-range-input::-moz-range-track {
	height: 3px;
	border: 0;
	background: transparent;
}

.et_pb_post_filter .et_pb_post_filter__item-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 1rem;
	height: 1rem;
	margin-top: -0.40625rem;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #ef357f;
	box-shadow: 0 1px 3px rgba( 20, 50, 66, 0.35 );
	cursor: grab;
}

.et_pb_post_filter .et_pb_post_filter__item-range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 1rem;
	height: 1rem;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #ef357f;
	box-shadow: 0 1px 3px rgba( 20, 50, 66, 0.35 );
	cursor: grab;
}

.et_pb_post_filter .et_pb_post_filter__item-range-input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba( 239, 53, 127, 0.35 );
}

/* The two value chips, side by side above the track as the comp draws them. */
.et_pb_post_filter .et_pb_post_filter__item-range-values {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.et_pb_post_filter__item-range-value {
	flex: 1 1 0;
	min-width: 0;
	padding: 0.3125rem 0.5rem;
	border: 1px solid #d9dee1;
	border-radius: 4px;
	background: #ffffff;
	color: #143242;
	font-size: 0.8125rem;
	line-height: 1.3;
	text-align: center;
}

.et_pb_post_filter__item-range-value:focus-visible {
	border-color: #ef357f;
	outline: none;
}

.et_pb_post_filter__item-range-value--max {
	text-align: center;
}

/*
 * Divi's own range skin sets `min-width: 72px; max-width: 140px; flex: 0 0 auto` on the value
 * chips and `padding: 16px` on every `__item-control`, both at two classes. Two 140px chips
 * cannot sit side by side in a ~162px sidebar, so they overflowed the column and stood 50px
 * tall. Three classes to win, and the chips share the row instead of holding a fixed width.
 */
.et_pb_post_filter .et_pb_post_filter__item-range-values .et_pb_post_filter__item-range-value {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	width: auto;
	padding: 0.3125rem 0.5rem;
	border: 1px solid #d9dee1;
	border-radius: 4px;
	background: #ffffff;
	color: #143242;
	font-size: 0.8125rem;
	line-height: 1.3;
	text-align: center;
}

/* ------------------------------------------------- text-entry controls in the sidebar
 *
 * One rule for every non-toggle control Divi renders here — the Search field and the price
 * range's two value chips. Divi pads them all to 16px via
 * `.et_pb_post_filter .et_pb_post_filter__item-control:not([type=checkbox]):not([type=radio]):not(select)`,
 * which is (0,4,1) because `:not()` carries its argument's specificity. Adding the
 * control-surface class takes this to (0,5,0), so it wins without `!important`.
 */
.et_pb_post_filter .et_pb_post_filter__item-control-surface .et_pb_post_filter__item-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
	width: 100%;
	padding: 0.5rem 0.625rem;
	border: 1px solid #d9dee1;
	border-radius: 4px;
	background: #ffffff;
	color: #143242;
	font-size: 0.875rem;
	line-height: 1.4;
}

.et_pb_post_filter .et_pb_post_filter__item-control-surface .et_pb_post_filter__item-control:not([type="checkbox"]):not([type="radio"]):not([type="range"])::placeholder {
	color: #8a9aa3;
}

.et_pb_post_filter .et_pb_post_filter__item-control-surface .et_pb_post_filter__item-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible {
	border-color: #ef357f;
	outline: none;
}

/* The price chips are narrower and centred, and share the row rather than taking 140px each. */
.et_pb_post_filter .et_pb_post_filter__item-control-surface .et_pb_post_filter__item-range-values .et_pb_post_filter__item-range-value {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	width: auto;
	padding: 0.3125rem 0.5rem;
	font-size: 0.8125rem;
	text-align: center;
}

/* ---------------------------------------------------------------- the toolbar */

/*
 * SORT, VIEW and the page numbers. The comp puts an identical bar above and below the grid,
 * right-aligned, with the three groups reading as one row of equal-height controls.
 *
 * The pagination markup is Divi's `.et_pb_posts_nav` wrapper — that is what makes its links
 * AJAX and what lets Divi swap the bar in step with the grid — so these rules are written to sit
 * on top of whatever Divi's own stylesheet says about that class rather than beside it.
 */
.yb-shop-toolbar {
	/*
	 * Claim the whole row. The bar is a child of the products' own container, and that container
	 * lays its children out — Divi's flex columns at `et_flex_column_6_24`, four across. Without
	 * this the bar is just another item and the first product sits beside it. Both properties are
	 * deliberate: `flex-basis` settles it under Divi's flex, `grid-column` under the grid rules
	 * this stylesheet also defines, and neither has any effect in the other's context.
	 */
	/*
	 * One height for every control in the bar. The selects and the page strip are different
	 * elements with different borders, so without a shared token they drift: the strip's own
	 * border sat outside its 44px cells and made it 46px, two pixels taller than the selects.
	 */
	--yb-ctl-h: 2.75rem;

	flex: 0 0 100%;
	grid-column: 1 / -1;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: clamp( 0.75rem, 2vw, 1.5rem );
	margin: clamp( 1rem, 2.5vw, 1.75rem ) 0;
}

.yb-shop-toolbar__field {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	/* Divi puts padding on paragraphs and margins on most block elements; neither belongs here. */
	margin: 0;
	padding: 0;
}

.yb-shop-toolbar__label {
	color: #143242;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * The caret is drawn on the wrapper, not the select. A `background-image` on the control itself is
 * what Divi and WooCommerce both do, and both then lose it to the other's rule; a wrapper with its
 * own pseudo-element cannot be overwritten by either.
 */
.yb-shop-toolbar__select {
	position: relative;
	display: inline-flex;
}

.yb-shop-toolbar__select::after {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 0;
	height: 0;
	border-top: 6px solid #143242;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: "";
	pointer-events: none;
	transform: translateY( -25% );
}

.yb-shop-toolbar__control {
	min-width: 11.5rem;
	height: var( --yb-ctl-h );
	padding: 0 2.25rem 0 0.875rem;
	border: 1px solid #c9c9c9;
	border-radius: 0;
	background-color: #ffffff;
	color: #143242;
	font-size: 0.9375rem;
	line-height: 1.2;
	/* No native caret: the wrapper draws the one the comp shows. */
	appearance: none;
	-webkit-appearance: none;
}

.yb-shop-toolbar__select--narrow .yb-shop-toolbar__control {
	min-width: 5.5rem;
}

.yb-shop-toolbar__control:focus-visible {
	outline: 2px solid #143242;
	outline-offset: 1px;
}

/* ------------------------------------------------------------- the page numbers */

/*
 * One bordered strip divided by vertical rules, as drawn. Built with a shared border and negative
 * margins rather than a border on each cell, so the rules between cells stay one pixel wide.
 */
.yb-shop-pages {
	box-sizing: border-box;
	display: inline-flex;
	align-items: stretch;
	/* Border-box, so the strip's own border is inside the shared height rather than added to it. */
	height: var( --yb-ctl-h );
	border: 1px solid #c9c9c9;
}

/* Nothing to page through — keep the element for Divi to swap, but take it out of the layout. */
.yb-shop-pages--empty {
	display: none;
}

.yb-shop-pages__page,
.yb-shop-pages__next,
.yb-shop-pages__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --yb-ctl-h );
	/* No height of its own — the strip's align-items: stretch fills it exactly. */
	padding: 0 0.5rem;
	border-left: 1px solid #c9c9c9;
	color: #143242;
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
}

.yb-shop-pages__page:first-child,
.yb-shop-pages > :first-child {
	border-left: 0;
}

.yb-shop-pages__page:hover,
.yb-shop-pages__next:hover {
	background-color: #f6f6f6;
	color: #143242;
}

.yb-shop-pages__page.is-current {
	background-color: #ededed;
	font-weight: 600;
}

.yb-shop-pages__next.is-disabled {
	color: #b6b6b6;
}

.yb-shop-pages__page:focus-visible,
.yb-shop-pages__next:focus-visible {
	outline: 2px solid #143242;
	outline-offset: -2px;
}

.yb-shop-pages__chevron {
	display: block;
}

@media ( max-width: 767px ) {
	/*
	 * Left, not right. Right-aligned on a phone the bar hugs the edge and the tap targets sit
	 * under the thumb's blind spot; and with the groups wrapping, a ragged right edge reads worse
	 * than a ragged left one.
	 */
	.yb-shop-toolbar {
		justify-content: flex-start;
	}

	.yb-shop-toolbar__control {
		min-width: 9rem;
	}
}

/* ------------------------------------------- white type on the card buttons, here too */

/*
 * On a category archive Divi prefixes its own stylesheet with `.et-db #et-boc .et-l`, and its
 * global link rule (`… .et-l a`, an ID and two classes) then outranks the card's own
 * `.csl-card__action--learn` / `--add` colour: Learn more and Add to Bag rendered navy on every
 * category page while staying white on the homepage. Measured 2026-10-05. `#main-content` plus
 * three classes outranks it without `!important`.
 */
#main-content .csl-card .csl-card__actions .csl-card__action--learn,
#main-content .csl-card .csl-card__actions .csl-card__action--learn:hover,
#main-content .csl-card .csl-card__actions .csl-card__action--learn:focus-visible,
#main-content .csl-card .csl-card__actions .csl-card__action--add,
#main-content .csl-card .csl-card__actions .csl-card__action--add:hover,
#main-content .csl-card .csl-card__actions .csl-card__action--add:focus-visible {
	color: #ffffff;
}