/**
 * Premium Category Page Redesign
 *
 * Enqueued only on category archives enabled in
 * inc/category-page-functions.php, and every rule is additionally prefixed
 * with body.eternity-category-page (added on those archives only), so
 * nothing here can reach any other category, the Shop page, single-product
 * pages (or their related-product cards), Cart or Checkout. Blocksy's
 * WooCommerce CSS prints after this file, so selectors carry the body-class
 * prefix for specificity rather than !important, and Blocksy's own custom
 * properties (--shop-columns, --grid-columns-gap ...) are set wherever it
 * exposes one.
 *
 * Visual reference: Category Redesign/References/approved-category-mockup.png.
 * Palette tokens match the Cart / Checkout / Single Product redesigns.
 *
 * Breakpoints follow Blocksy's: 1000px (desktop), 690px (mobile), 480px.
 */

body.eternity-category-page {
	--eternity-cat-navy: var(--theme-palette-color-1, #0D2A4D);
	--eternity-cat-navy-deep: var(--theme-palette-color-4, #10243D);
	--eternity-cat-gold: var(--theme-palette-color-2, #C99A73);
	--eternity-cat-cream: var(--theme-palette-color-5, #F8F5F1);
	--eternity-cat-mist: #F3F4F6;
	--eternity-cat-badge-bg: #F4EEE7;
	--eternity-cat-text: var(--theme-text-color, #1B1B1B);
	--eternity-cat-muted: #4F5866;
	--eternity-cat-line: #E3E6EA;
	/* ~3:1 against white -- meets WCAG non-text contrast for field outlines */
	--eternity-cat-field-border: #8A94A3;
	--eternity-cat-radius: 6px;
	--eternity-cat-card-radius: 8px;
	--eternity-cat-heading-font: Georgia, 'Times New Roman', serif;
	--eternity-cat-body-font: var(--theme-font-family, Helvetica), Helvetica, Arial, sans-serif;

	/* Blocksy's top/bottom content spacing (60px) -- the gap between the
	   benefits strip and the toolbar. */
	--theme-content-vertical-spacing: 28px;
}

body.eternity-category-page .eternity-cat-icon {
	flex: 0 0 auto;
}

/* ============================================
   SITE HEADER -- more compact on these pages only
   Blocksy's Customizer sets a 180px logo (desktop / tablet) and 120px
   (mobile), which sets the row height. The logo file is a square with wide
   white margins (artwork spans ~22-79% of its height), so the logo is shown
   slightly smaller and the row is clipped to the artwork's height: the
   blank margins disappear while the mark keeps its proportions. Nothing in
   the Customizer, header markup, menu, search, cart, Book Appointment
   button or announcement bar is changed, and other pages are untouched.
   ============================================ */

body.eternity-category-page[data-header*="type-1"] .ct-header [data-row*="middle"] {
	--height: 100px;
}

body.eternity-category-page[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
	--logo-max-height: 136px;
	display: flex;
	align-items: center;
	height: 100px;
	overflow: hidden;
}

/* The logo keeps its own (larger) size inside the shorter, clipping box. */
body.eternity-category-page[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container img {
	flex: 0 0 auto;
	width: auto;
	height: var(--logo-max-height);
	max-height: none;
}

/* Desktop menu dropdowns hang from the bottom of their menu item, which is
   as tall as the row, then move up by the Customizer's -65px dropdown
   offset. That offset was set for the standard 180px row; in the 80px
   shorter row above, the same offset would start the dropdown over the
   menu labels. Raising it by half the difference (40px) keeps the label's
   distance to the dropdown the same as on every other page (29px). Nested
   flyouts reset their offset to 0 in Blocksy, so only the top level moves. */
body.eternity-category-page[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
	--dropdown-top-offset: -25px;
}

@media (max-width: 999.98px) {
	body.eternity-category-page[data-header*="type-1"] .ct-header [data-row*="middle"] {
		--height: 84px;
	}

	body.eternity-category-page[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
		--logo-max-height: 120px;
		height: 84px;
	}
}

@media (max-width: 689.98px) {
	body.eternity-category-page[data-header*="type-1"] .ct-header [data-row*="middle"] {
		--height: 76px;
	}

	body.eternity-category-page[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
		--logo-max-height: 112px;
		height: 76px;
	}
}

body.eternity-category-page :is(.eternity-cat-toolbar, .eternity-cat-hero, [data-products]) :is(a, button, select, input):focus-visible {
	outline: 2px solid var(--eternity-cat-navy);
	outline-offset: 2px;
}

/* ============================================
   HERO
   ============================================ */

body.eternity-category-page .eternity-cat-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--eternity-cat-cream);
}

body.eternity-category-page .eternity-cat-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 250px;
	padding-block: 44px;
}

body.eternity-category-page .eternity-cat-hero__text {
	max-width: 60%;
}

body.eternity-category-page .eternity-cat-hero__text > :last-child {
	margin-bottom: 0;
}

body.eternity-category-page .eternity-cat-hero__title {
	margin: 0 0 16px;
	font-family: var(--eternity-cat-heading-font);
	font-size: clamp(32px, 3.3vw, 50px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--eternity-cat-navy-deep);
}

body.eternity-category-page .eternity-cat-hero__intro {
	max-width: 600px;
	margin: 0;
	font-family: var(--eternity-cat-heading-font);
	font-size: 18px;
	line-height: 1.5;
	color: var(--eternity-cat-muted);
}

/* The image fills the right-hand side and fades into the cream ground. */
body.eternity-category-page .eternity-cat-hero__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 46%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 36%);
	mask-image: linear-gradient(to right, transparent 0, #000 36%);
}

body.eternity-category-page .eternity-cat-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 52%;
}

/* Zoomed images (hero_image_zoom in the settings): object-position puts the
   focal point -- the subject's centre -- at the same spot in the box, the
   image is enlarged about it, then moved so the subject sits right of
   centre, clear of the fade. A 2x zoom leaves room to move it by up to a
   quarter of the box, so the image still covers it at every width. */
body.eternity-category-page .eternity-cat-hero__img.is-zoomed {
	--eternity-cat-hero-target-x: 66%;
	--eternity-cat-hero-target-y: 54%;
	transform-origin: var(--eternity-cat-hero-focus-x) var(--eternity-cat-hero-focus-y);
	transform:
		translate(
			calc(var(--eternity-cat-hero-target-x) - var(--eternity-cat-hero-focus-x)),
			calc(var(--eternity-cat-hero-target-y) - var(--eternity-cat-hero-focus-y))
		)
		scale(var(--eternity-cat-hero-zoom));
}

/* ============================================
   BENEFITS STRIP
   ============================================ */

body.eternity-category-page .eternity-cat-benefits {
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--eternity-cat-line);
}

body.eternity-category-page .eternity-cat-benefits__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block: 0;
	/* Compact strip: 16px + the items' 4px = 20px above / below the text. */
	padding-block: 16px;
	padding-inline: 0;
	list-style: none;
}

body.eternity-category-page .eternity-cat-benefits__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 4px 18px;
	text-align: left;
}

body.eternity-category-page .eternity-cat-benefits__item + .eternity-cat-benefits__item {
	border-left: 1px solid var(--eternity-cat-line);
}

body.eternity-category-page .eternity-cat-benefits__item .eternity-cat-icon {
	width: 28px;
	height: 28px;
	color: var(--eternity-cat-navy);
}

body.eternity-category-page .eternity-cat-benefits__text {
	font-family: var(--eternity-cat-heading-font);
	font-size: 16px;
	line-height: 1.35;
	color: var(--eternity-cat-navy-deep);
	text-decoration: none;
}

/* Wide screens: one line per benefit, each item as wide as its text. */
@media (min-width: 1200px) {
	/* Single-row strip: 11px + the items' 4px = 15px above / below the
	   text (about 59px tall); the dividers keep their full height. */
	body.eternity-category-page .eternity-cat-benefits__list {
		display: flex;
		justify-content: space-between;
		padding-block: 11px;
	}

	body.eternity-category-page .eternity-cat-benefits__item {
		flex: 1 1 auto;
		padding-inline: 16px;
	}

	body.eternity-category-page .eternity-cat-benefits__text {
		font-size: 15px;
		white-space: nowrap;
	}
}

body.eternity-category-page a.eternity-cat-benefits__text:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================
   TOOLBAR
   ============================================ */

body.eternity-category-page .eternity-cat-toolbar {
	margin-bottom: 8px;
}

body.eternity-category-page .eternity-cat-toolbar__form {
	margin: 0;
}

body.eternity-category-page .eternity-cat-toolbar__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: var(--eternity-cat-card-radius);
	background-color: var(--eternity-cat-mist);
}

body.eternity-category-page .eternity-cat-toolbar__filters {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

body.eternity-category-page .eternity-cat-toolbar__drawer-toggle,
body.eternity-category-page .eternity-cat-toolbar__drawer-head {
	display: none;
}

body.eternity-category-page .eternity-cat-toolbar__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	min-width: 210px;
	padding: 0 14px;
	border: 1px solid var(--eternity-cat-line);
	border-radius: var(--eternity-cat-radius);
	background-color: #FFFFFF;
	color: var(--eternity-cat-navy);
}

/* One focus indicator, on the outer control only: a 2px navy edge (border
   + 1px ring) with a soft halo -- for mouse, touch and keyboard alike.
   Blocksy gives every select / input its own 2px focus outline (inside our
   control's border), which produced the second, inner box; that outline is
   removed on these controls below. */
body.eternity-category-page .eternity-cat-toolbar__field:focus-within {
	border-color: var(--eternity-cat-navy);
	box-shadow: 0 0 0 1px var(--eternity-cat-navy), 0 0 0 4px rgba(13, 42, 77, 0.14);
}

/* While a styled option list is open, focus sits inside the list; the
   control keeps the same focus ring. (Own block: browsers without :open
   would otherwise drop the rule above.) */
@supports selector(:open) {
	body.eternity-category-page .eternity-cat-toolbar__field:has(select:open) {
		border-color: var(--eternity-cat-navy);
		box-shadow: 0 0 0 1px var(--eternity-cat-navy), 0 0 0 4px rgba(13, 42, 77, 0.14);
	}
}

@media (forced-colors: active) {
	body.eternity-category-page .eternity-cat-toolbar__field:focus-within {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

body.eternity-category-page .eternity-cat-toolbar__field .eternity-cat-icon {
	width: 20px;
	height: 20px;
}

body.eternity-category-page .eternity-cat-toolbar__field :is(select, input) {
	--theme-form-field-border-width: 0;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 24px 0 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	background-color: transparent;
	font-family: var(--eternity-cat-heading-font);
	font-size: 16px;
	color: var(--eternity-cat-navy-deep);
}

/* Blocksy's own focus outline on selects / inputs, and the generic
   :focus-visible outline above, would draw the inner box -- the outer
   control shows focus instead (see :focus-within). */
body.eternity-category-page .eternity-cat-toolbar__field :is(select, input):is(:focus, :focus-visible) {
	outline: none;
	box-shadow: none;
}

/* Dropdowns: the <select> itself fills the whole control, with the icon
   (and the "Sort by:" label) laid over its left padding. A browser opens a
   select's option list at the select's own width and left edge, so the list
   is now always at least as wide as the control and aligned with it; the
   control grows to fit its longest option, so no option text is clipped. */
body.eternity-category-page .eternity-cat-toolbar__field:has(> select) {
	padding: 0;
}

body.eternity-category-page .eternity-cat-toolbar__field:has(> select) > :is(.eternity-cat-icon, .eternity-cat-toolbar__sort-label) {
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	pointer-events: none;
}

body.eternity-category-page .eternity-cat-toolbar__field:has(> select) > .eternity-cat-icon {
	left: 14px;
}

body.eternity-category-page .eternity-cat-toolbar__field select {
	-webkit-appearance: none;
	appearance: none;
	height: 48px;
	padding: 0 40px 0 44px;
	border-radius: inherit;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310243D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}

body.eternity-category-page .eternity-cat-toolbar__field--price {
	min-width: 190px;
}

body.eternity-category-page .eternity-cat-toolbar__field--price input {
	flex: 1 1 100px;
	width: 100px;
	padding-right: 0;
	-moz-appearance: textfield;
}

body.eternity-category-page .eternity-cat-toolbar__field--price input::-webkit-outer-spin-button,
body.eternity-category-page .eternity-cat-toolbar__field--price input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.eternity-category-page .eternity-cat-toolbar__currency {
	font-family: var(--eternity-cat-heading-font);
	font-size: 16px;
	color: var(--eternity-cat-navy-deep);
}

body.eternity-category-page .eternity-cat-toolbar__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

body.eternity-category-page .eternity-cat-toolbar__apply {
	height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--eternity-cat-radius);
	background-color: var(--eternity-cat-navy);
	font-family: var(--eternity-cat-body-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

body.eternity-category-page .eternity-cat-toolbar__apply:hover {
	background-color: var(--eternity-cat-navy-deep);
}

body.eternity-category-page .eternity-cat-toolbar__reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-left: 16px;
	border-left: 1px solid #CDD3DA;
	font-family: var(--eternity-cat-heading-font);
	font-size: 16px;
	color: var(--eternity-cat-navy-deep);
	text-decoration: none;
	white-space: nowrap;
}

body.eternity-category-page .eternity-cat-toolbar__reset:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.eternity-category-page .eternity-cat-toolbar__reset .eternity-cat-icon {
	width: 18px;
	height: 18px;
}

/* Wide enough for the longest sort option ("Sort by price: high to low",
   177px) after the icon + "Sort by:" label, so a selected option is never
   clipped -- including in base-select mode, which does not size the control
   to its longest option. */
body.eternity-category-page .eternity-cat-toolbar__field--sort {
	flex: 0 0 auto;
	min-width: 340px;
	margin-left: auto;
}

body.eternity-category-page .eternity-cat-toolbar__sort-label {
	left: 44px;
	margin: 0;
	font-family: var(--eternity-cat-heading-font);
	font-size: 16px;
	white-space: nowrap;
	color: var(--eternity-cat-navy-deep);
}

/* Room for the icon + "Sort by:" label before the selected option. */
body.eternity-category-page .eternity-cat-toolbar__field--sort select {
	padding-left: 114px;
}

/* ============================================
   DROPDOWN OPTION LISTS -- refined styling where supported
   Chromium-based browsers (Edge, Chrome 135+) can style a native <select>'s
   option list with appearance: base-select. It stays a real <select>: the
   browser keeps keyboard handling (arrows, Home/End, type-ahead, Enter /
   Space, Escape, Tab), screen-reader semantics, form submission and
   viewport-edge positioning. Applied for mouse / trackpad users only;
   touch devices keep their native pickers. Other browsers show their own
   list, which is still full control width (see above).
   ============================================ */

@supports (appearance: base-select) {
	@media (hover: hover) and (pointer: fine) {
		body.eternity-category-page .eternity-cat-toolbar__field select,
		body.eternity-category-page .eternity-cat-toolbar__field select::picker(select) {
			appearance: base-select;
		}

		/* Selected option text vertically centred, as in the closed native
		   control. */
		body.eternity-category-page .eternity-cat-toolbar__field select {
			display: flex;
			align-items: center;
			line-height: 1.2;
		}

		/* Our own chevron is kept (background image). */
		body.eternity-category-page .eternity-cat-toolbar__field select::picker-icon {
			display: none;
		}

		body.eternity-category-page .eternity-cat-toolbar__field select::picker(select) {
			box-sizing: border-box;
			min-inline-size: anchor-size(self-inline);
			max-block-size: min(420px, 70vh);
			margin-block: 6px;
			padding: 6px;
			border: 1px solid var(--eternity-cat-line);
			border-radius: var(--eternity-cat-radius);
			background-color: #FFFFFF;
			box-shadow: 0 16px 40px rgba(16, 36, 61, 0.14);
		}

		body.eternity-category-page .eternity-cat-toolbar__field select option {
			display: flex;
			align-items: center;
			gap: 10px;
			min-block-size: 40px;
			padding: 8px 14px;
			border-radius: 4px;
			font-family: var(--eternity-cat-heading-font);
			font-size: 15px;
			white-space: nowrap;
			color: var(--eternity-cat-navy-deep);
			cursor: pointer;
		}

		body.eternity-category-page .eternity-cat-toolbar__field select option:is(:hover, :focus) {
			background-color: var(--eternity-cat-mist);
		}

		body.eternity-category-page .eternity-cat-toolbar__field select option:focus-visible {
			outline: 2px solid var(--eternity-cat-navy);
			outline-offset: -2px;
		}

		body.eternity-category-page .eternity-cat-toolbar__field select option:checked {
			font-weight: 600;
			background-color: var(--eternity-cat-badge-bg);
		}

		body.eternity-category-page .eternity-cat-toolbar__field select option::checkmark {
			color: var(--eternity-cat-navy);
		}
	}
}

body.eternity-category-page .eternity-cat-toolbar__results {
	margin: 18px 2px 16px;
	font-family: var(--eternity-cat-body-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eternity-cat-muted);
}

/* WooCommerce's own result count + sort are removed on these pages, which
   leaves Blocksy's wrapper around them empty. */
body.eternity-category-page .woo-listing-top:empty {
	display: none;
}

/* ============================================
   PRODUCT GRID + CARDS
   ============================================ */

body.eternity-category-page [data-products] {
	--shop-columns: repeat(4, minmax(0, 1fr));
	--grid-columns-gap: 24px;
	--grid-rows-gap: 24px;
}

body.eternity-category-page [data-products] .product {
	--product-element-spacing: 10px;
	/* Lets the specification row adapt to the card's own width. */
	container: eternity-card / inline-size;
	padding: 16px 16px 18px;
	border: 1px solid var(--eternity-cat-line);
	border-radius: var(--eternity-cat-card-radius);
	background-color: #FFFFFF;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
	body.eternity-category-page [data-products] .product:hover {
		border-color: #D3D8DF;
		box-shadow: 0 12px 30px rgba(13, 42, 77, 0.08);
	}
}

body.eternity-category-page [data-products] .product figure {
	margin-bottom: 14px;
}

/* Product images: one square, pure-white frame per card, with each image
   scaled down whole (contain) inside a padded area -- never cropped,
   stretched or zoomed -- and centred both ways. Blocksy draws the image box
   at 4:3 (inline style) while every catalogue thumbnail is square, which
   squeezed tall side-angle rings against the top and bottom edges and under
   the badge. The secondary (hover) image, .ct-swap, sits exactly over the
   main one, so Blocksy's swap-on-hover keeps working unchanged. */
body.eternity-category-page [data-products] figure .ct-media-container {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #FFFFFF;
}

body.eternity-category-page [data-products] figure .ct-media-container img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 9%;
	object-fit: contain;
	object-position: center;
	background-color: #FFFFFF;
	transform: none;
}

/* Category badge in the image corner (also clears Blocksy's own badges). */
body.eternity-category-page [data-products] .eternity-cat-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 4px;
	background-color: var(--eternity-cat-badge-bg);
	font-family: var(--eternity-cat-body-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eternity-cat-navy-deep);
	pointer-events: none;
}

body.eternity-category-page [data-products] .eternity-cat-card__badge .eternity-cat-icon {
	width: 13px;
	height: 13px;
}

/* Title: three lines at most, always three lines tall, so prices,
   specifications and buttons line up across every card in a row. */
body.eternity-category-page [data-products] .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	width: 100%;
	min-height: calc(1.32em * 3);
	margin-bottom: 8px;
	font-family: var(--eternity-cat-heading-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.32;
	--theme-link-initial-color: var(--eternity-cat-navy-deep);
	--theme-link-hover-color: var(--eternity-cat-navy);
}

/* Body font, as on the single-product page (lining figures). */
body.eternity-category-page [data-products] .product .price {
	font-family: var(--eternity-cat-body-font);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--eternity-cat-navy-deep);
	--theme-text-color: var(--eternity-cat-navy-deep);
}

/* Blocksy's category meta line -- replaced by the badge on these pages. */
body.eternity-category-page [data-products] .product > .entry-meta {
	display: none;
}

/* Compact specifications (eternity_category_page_card_spec()): one centred
   row -- e.g. Round Brilliant | 1.00ct | 9k Yellow Gold -- with hairline
   separators. A value never breaks mid-word; on narrower cards the row
   adapts (see the eternity-card container queries below). */
body.eternity-category-page .eternity-cat-card__specs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	row-gap: 6px;
	width: 100%;
	margin: 2px 0 8px;
	padding: 0;
	list-style: none;
}

body.eternity-category-page .eternity-cat-card__spec {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0 8px;
	font-family: var(--eternity-cat-body-font);
	font-size: 12.5px;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--eternity-cat-muted);
}

body.eternity-category-page .eternity-cat-card__spec:first-child {
	padding-left: 0;
}

body.eternity-category-page .eternity-cat-card__spec:last-child {
	padding-right: 0;
}

body.eternity-category-page .eternity-cat-card__spec + .eternity-cat-card__spec::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 14px;
	background-color: #CDD3DA;
	transform: translateY(-50%);
}

body.eternity-category-page .eternity-cat-card__spec .eternity-cat-icon {
	width: 14px;
	height: 14px;
	color: var(--eternity-cat-navy);
}

body.eternity-category-page .eternity-cat-card__metal {
	display: inline-block;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--eternity-cat-line);
	box-shadow: inset 0 0 0 1px rgba(16, 36, 61, 0.12);
}

body.eternity-category-page .eternity-cat-card__metal--yellow {
	background: radial-gradient(circle at 35% 30%, #F1D78C, #C9A240 70%);
}

body.eternity-category-page .eternity-cat-card__metal--rose {
	background: radial-gradient(circle at 35% 30%, #F2C6B4, #C98B74 70%);
}

body.eternity-category-page .eternity-cat-card__metal--white {
	background: radial-gradient(circle at 35% 30%, #F4F5F7, #BCC3CB 70%);
}

body.eternity-category-page .eternity-cat-card__metal--two-tone {
	background: linear-gradient(90deg, #D4B157 50%, #C6CCD3 50%);
}

/* Two metals: the dot's halves follow the stored order ("Rose + White
   Gold" = rose, then white). Single metals and other materials (neutral
   dot) are unaffected. */
body.eternity-category-page .eternity-cat-card__metal--two-tone.eternity-cat-card__metal--white-yellow {
	background: linear-gradient(90deg, #C6CCD3 50%, #D4B157 50%);
}

body.eternity-category-page .eternity-cat-card__metal--two-tone.eternity-cat-card__metal--rose-white {
	background: linear-gradient(90deg, #D49A84 50%, #C6CCD3 50%);
}

body.eternity-category-page .eternity-cat-card__metal--two-tone.eternity-cat-card__metal--white-rose {
	background: linear-gradient(90deg, #C6CCD3 50%, #D49A84 50%);
}

body.eternity-category-page .eternity-cat-card__metal--two-tone.eternity-cat-card__metal--yellow-rose {
	background: linear-gradient(90deg, #D4B157 50%, #D49A84 50%);
}

body.eternity-category-page .eternity-cat-card__metal--two-tone.eternity-cat-card__metal--rose-yellow {
	background: linear-gradient(90deg, #D49A84 50%, #D4B157 50%);
}

/* Button row: always visible, full width, pinned to the card bottom. */
body.eternity-category-page [data-products] .product .ct-woo-card-actions {
	width: 100%;
	margin-inline: 0;
	margin-top: auto;
	padding: 0;
	border: 0;
}

body.eternity-category-page [data-products] .eternity-cat-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 0 16px;
	border: 0;
	border-radius: 4px;
	background-color: var(--eternity-cat-navy);
	font-family: var(--eternity-cat-body-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

body.eternity-category-page [data-products] .eternity-cat-card__button:hover {
	background-color: var(--eternity-cat-navy-deep);
	color: #FFFFFF;
}

body.eternity-category-page [data-products] .eternity-cat-card__button .eternity-cat-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}

body.eternity-category-page [data-products] .eternity-cat-card__button:hover .eternity-cat-icon {
	transform: translateX(3px);
}

/* ============================================
   PAGINATION (Blocksy .ct-pagination)
   ============================================ */

body.eternity-category-page .ct-pagination {
	--theme-link-initial-color: var(--eternity-cat-navy-deep);
	--theme-link-hover-color: var(--eternity-cat-navy);
	margin-top: 40px;
}

body.eternity-category-page .ct-pagination .page-numbers {
	border-radius: var(--eternity-cat-radius);
	font-family: var(--eternity-cat-heading-font);
}

body.eternity-category-page .ct-pagination .page-numbers.current {
	background-color: var(--eternity-cat-navy);
	color: #FFFFFF;
}

/* ============================================
   WHATSAPP ASSISTANCE -- phones only
   Same approach as the premium Cart / Checkout pages (assets/css/cart.css,
   checkout.css): on phones the floating Social Chat (wp-whatsapp-chat)
   button is hidden -- it covered the benefits strip, product cards, View
   Ring buttons and pagination -- and this inline panel after the
   pagination (same card as the Cart / Checkout WhatsApp panel) offers
   WhatsApp instead, with the plugin's own number and message. Tablet and
   desktop keep the floating button exactly as before, without the panel.
   ============================================ */

body.eternity-category-page .eternity-cat-whatsapp {
	display: none;
}

@media (max-width: 689.98px) {
	body.eternity-category-page .qlwapp {
		display: none;
	}

	body.eternity-category-page .eternity-cat-whatsapp {
		display: block;
		margin: 28px 0 8px;
	}

	body.eternity-category-page .eternity-cat-whatsapp__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 14px 16px;
		border: 1px solid var(--eternity-cat-line);
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	body.eternity-category-page .eternity-cat-whatsapp__text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		font-family: var(--eternity-cat-body-font);
		font-size: 13px;
		line-height: 1.45;
		color: var(--eternity-cat-muted);
	}

	body.eternity-category-page .eternity-cat-whatsapp__text strong {
		font-size: 14px;
		font-weight: 600;
		color: var(--eternity-cat-navy);
	}

	body.eternity-category-page .eternity-cat-whatsapp__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid var(--eternity-cat-navy);
		border-radius: var(--eternity-cat-radius);
		font-family: var(--eternity-cat-body-font);
		font-size: 14px;
		font-weight: 600;
		color: var(--eternity-cat-navy);
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	body.eternity-category-page .eternity-cat-whatsapp__link:hover,
	body.eternity-category-page .eternity-cat-whatsapp__link:focus-visible {
		background-color: var(--eternity-cat-navy);
		color: #FFFFFF;
	}

	body.eternity-category-page .eternity-cat-whatsapp__link:focus-visible {
		outline: 2px solid var(--eternity-cat-gold);
		outline-offset: 2px;
	}
}

/* ============================================
   TABLET (690px - 999px)
   ============================================ */

@media (max-width: 999.98px) {
	body.eternity-category-page .eternity-cat-hero__inner {
		min-height: 260px;
		padding-block: 36px;
	}

	body.eternity-category-page .eternity-cat-hero__text {
		max-width: 58%;
	}

	body.eternity-category-page .eternity-cat-hero__media {
		width: 46%;
	}

	body.eternity-category-page .eternity-cat-benefits__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 14px;
	}

	body.eternity-category-page .eternity-cat-benefits__item {
		justify-content: flex-start;
	}

	body.eternity-category-page .eternity-cat-benefits__item:nth-child(odd) {
		border-left: 0;
	}

	body.eternity-category-page .eternity-cat-toolbar__bar {
		flex-wrap: wrap;
	}

	body.eternity-category-page .eternity-cat-toolbar__field,
	body.eternity-category-page .eternity-cat-toolbar__field--price {
		min-width: 170px;
	}

	body.eternity-category-page .eternity-cat-toolbar__field--sort {
		flex: 1 1 100%;
		margin-left: 0;
	}

	body.eternity-category-page [data-products] {
		--shop-columns: repeat(3, minmax(0, 1fr));
		--grid-columns-gap: 18px;
		--grid-rows-gap: 18px;
	}
}

/* ============================================
   MOBILE (< 690px)
   ============================================ */

@media (max-width: 689.98px) {
	body.eternity-category-page {
		--theme-content-vertical-spacing: 20px;
	}

	/* Hero: image banner on top, text below. */
	body.eternity-category-page .eternity-cat-hero {
		display: flex;
		flex-direction: column;
	}

	body.eternity-category-page .eternity-cat-hero__media {
		position: relative;
		inset: auto;
		order: -1;
		width: 100%;
		height: 170px;
		-webkit-mask-image: none;
		mask-image: none;
	}

	body.eternity-category-page .eternity-cat-hero__img.is-zoomed {
		--eternity-cat-hero-target-y: 52%;
	}

	body.eternity-category-page .eternity-cat-hero__inner {
		min-height: 0;
		padding-block: 24px;
	}

	body.eternity-category-page .eternity-cat-hero__text {
		max-width: none;
	}

	body.eternity-category-page .eternity-cat-hero__title {
		margin-bottom: 10px;
		font-size: 30px;
	}

	body.eternity-category-page .eternity-cat-hero__intro {
		font-size: 16px;
	}

	body.eternity-category-page .eternity-cat-benefits__list {
		column-gap: 10px;
		padding-block: 12px;
	}

	body.eternity-category-page .eternity-cat-benefits__item {
		gap: 10px;
		padding: 2px 0;
	}

	body.eternity-category-page .eternity-cat-benefits__item + .eternity-cat-benefits__item {
		border-left: 0;
	}

	body.eternity-category-page .eternity-cat-benefits__item .eternity-cat-icon {
		width: 22px;
		height: 22px;
	}

	body.eternity-category-page .eternity-cat-benefits__text {
		font-size: 13px;
	}

	/* Toolbar: "Filters" + sort side by side; filters live in the drawer. */
	body.eternity-category-page .eternity-cat-toolbar__bar {
		flex-wrap: nowrap;
		gap: 10px;
		padding: 10px;
	}

	body.eternity-category-page .eternity-cat-toolbar__field,
	body.eternity-category-page .eternity-cat-toolbar__field--sort,
	body.eternity-category-page .eternity-cat-toolbar__field--price {
		min-width: 0;
	}

	body.eternity-category-page .eternity-cat-toolbar__field--sort {
		flex: 1 1 50%;
		gap: 8px;
		padding: 0 12px;
	}

	body.eternity-category-page .eternity-cat-toolbar__sort-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	body.eternity-category-page .eternity-cat-toolbar__field :is(select, input) {
		font-size: 15px;
	}

	/* "Sort by:" is visually hidden here, so only the icon needs room; a
	   tighter fit keeps "Default sorting" fully visible in the half-width
	   control (the native picker shows every option in full). */
	body.eternity-category-page .eternity-cat-toolbar__field--sort select {
		padding-right: 30px;
		padding-left: 38px;
		background-position: right 10px center;
		font-size: 14px;
	}

	body.eternity-category-page .eternity-cat-toolbar__field--sort > .eternity-cat-icon {
		left: 11px;
	}
}

/* Narrow phones: the sort icon gives way so "Default sorting" stays fully
   readable; the chevron still marks the control as a dropdown. */
@media (max-width: 419.98px) {
	body.eternity-category-page .eternity-cat-toolbar__field--sort > .eternity-cat-icon {
		display: none;
	}

	body.eternity-category-page .eternity-cat-toolbar__field--sort select {
		padding-left: 12px;
	}
}

/* Phones (continued): filter drawer, two-column grid and compact cards for
   every phone width below 690px. Kept after the narrow-phone rules above so
   the cascade below 420px is unchanged. */
@media (max-width: 689.98px) {
	/* Without JavaScript the fields simply stack above the sort control. */
	body.eternity-category-page .eternity-cat-toolbar:not(.has-js) .eternity-cat-toolbar__bar {
		flex-wrap: wrap;
	}

	body.eternity-category-page .eternity-cat-toolbar:not(.has-js) .eternity-cat-toolbar__filters,
	body.eternity-category-page .eternity-cat-toolbar:not(.has-js) .eternity-cat-toolbar__field {
		flex: 1 1 100%;
	}

	body.eternity-category-page .eternity-cat-toolbar.has-js .eternity-cat-toolbar__drawer-toggle {
		display: inline-flex;
		flex: 1 1 50%;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 50px;
		padding: 0 12px;
		border: 1px solid var(--eternity-cat-line);
		border-radius: var(--eternity-cat-radius);
		background-color: #FFFFFF;
		font-family: var(--eternity-cat-heading-font);
		font-size: 15px;
		color: var(--eternity-cat-navy-deep);
		cursor: pointer;
	}

	body.eternity-category-page .eternity-cat-toolbar__count-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 999px;
		background-color: var(--eternity-cat-navy);
		font-family: var(--eternity-cat-body-font);
		font-size: 12px;
		color: #FFFFFF;
	}

	/* The drawer: a bottom sheet above the page and the WhatsApp button. */
	body.eternity-category-page .eternity-cat-toolbar.has-js .eternity-cat-toolbar__filters {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100001;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 14px;
		max-height: 85vh;
		overflow-y: auto;
		padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
		border-radius: 16px 16px 0 0;
		background-color: #FFFFFF;
		box-shadow: 0 -12px 40px rgba(16, 36, 61, 0.18);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0.3s ease;
	}

	body.eternity-category-page .eternity-cat-toolbar.has-js.is-drawer-open .eternity-cat-toolbar__filters {
		transform: none;
		visibility: visible;
	}

	body.eternity-category-page .eternity-cat-toolbar.has-js .eternity-cat-toolbar__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--eternity-cat-line);
	}

	body.eternity-category-page .eternity-cat-toolbar__drawer-title {
		margin: 0;
		font-family: var(--eternity-cat-heading-font);
		font-size: 20px;
		color: var(--eternity-cat-navy-deep);
	}

	body.eternity-category-page .eternity-cat-toolbar__drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--eternity-cat-navy-deep);
		cursor: pointer;
	}

	body.eternity-category-page .eternity-cat-toolbar.has-js .eternity-cat-toolbar__field {
		width: 100%;
		border-color: var(--eternity-cat-field-border);
	}

	body.eternity-category-page .eternity-cat-toolbar__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 4px;
	}

	body.eternity-category-page .eternity-cat-toolbar__apply {
		width: 100%;
	}

	body.eternity-category-page .eternity-cat-toolbar__reset {
		justify-content: center;
		min-height: 44px;
		padding-left: 0;
		border-left: 0;
	}

	body.eternity-category-page .eternity-cat-toolbar__backdrop {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background-color: rgba(16, 36, 61, 0.45);
	}

	body.eternity-category-page .eternity-cat-toolbar__backdrop[hidden] {
		display: none;
	}

	body.eternity-category-page.eternity-cat-drawer-open {
		overflow: hidden;
	}

	/* Social Chat's floating WhatsApp button (z-index 9999999) would sit on
	   top of the open drawer's Apply button. Phones now hide it altogether
	   (see WHATSAPP ASSISTANCE); this stays as a safeguard for the drawer. */
	body.eternity-category-page.eternity-cat-drawer-open .qlwapp {
		visibility: hidden;
	}

	body.eternity-category-page .eternity-cat-toolbar__results {
		margin: 14px 2px 12px;
		font-size: 11px;
	}

	/* Two-column product grid. */
	body.eternity-category-page [data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
		--grid-columns-gap: 12px;
		--grid-rows-gap: 12px;
	}

	body.eternity-category-page [data-products] .product {
		--product-element-spacing: 8px;
		padding: 10px 10px 12px;
	}

	body.eternity-category-page [data-products] .product figure {
		margin-bottom: 8px;
	}

	body.eternity-category-page [data-products] .eternity-cat-card__badge {
		gap: 4px;
		padding: 3px 7px;
		font-size: 9.5px;
		letter-spacing: 0.1em;
	}

	body.eternity-category-page [data-products] .eternity-cat-card__badge .eternity-cat-icon {
		width: 11px;
		height: 11px;
	}

	/* Narrow cards: up to four title lines, still a fixed height. */
	body.eternity-category-page [data-products] .woocommerce-loop-product__title {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		min-height: calc(1.32em * 4);
		margin-bottom: 4px;
		font-size: 14px;
	}

	body.eternity-category-page [data-products] .product .price {
		font-size: 18px;
	}

	body.eternity-category-page .eternity-cat-card__specs {
		margin-bottom: 4px;
	}

	body.eternity-category-page [data-products] .eternity-cat-card__button {
		gap: 6px;
		min-height: 44px;
		padding: 0 8px;
		font-size: 14px;
	}

	body.eternity-category-page [data-products] .eternity-cat-card__button .eternity-cat-icon {
		width: 15px;
		height: 15px;
	}
}

@media (max-width: 479.98px) {
	body.eternity-category-page .eternity-cat-benefits__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================
   COMPACT SPECIFICATIONS -- card-width adaptations
   Measured against each card (container "eternity-card", content-box
   width), not the viewport, so every grid width is covered. The server
   tags each row with its text length (data-length s / m / l, see
   eternity_category_page_card_price_after()); thresholds below are the
   widest one-row width measured in the browser for each length class
   (all 118 distinct engagement-ring combinations) plus a 4px margin.
   Desktop size: s 247px, m 258px, l 260px (longest: "Round Brilliant |
   2.00ct | 18k Yellow Gold"), so every row fits a 1440px-wide grid card.
   Narrower than that, the last specification moves to its own centred
   line -- never a value broken mid-word, never a dangling separator.
   ============================================ */

/* Long rows: slightly tighter type so they still fit on one line on
   full-width desktop cards. */
body.eternity-category-page .eternity-cat-card__specs[data-length="l"] .eternity-cat-card__spec {
	gap: 4px;
	padding-inline: 5px;
	font-size: 11.5px;
}

body.eternity-category-page .eternity-cat-card__specs[data-length="l"] .eternity-cat-card__spec:first-child {
	padding-left: 0;
}

body.eternity-category-page .eternity-cat-card__specs[data-length="l"] .eternity-cat-card__spec:last-child {
	padding-right: 0;
}

/* Desktop / tablet cards too narrow for their row: wrap the last item. */
@container eternity-card (min-width: 221px) and (max-width: 263px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="l"] .eternity-cat-card__spec:nth-child(2) { padding-right: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="l"] .eternity-cat-card__spec:last-child { flex-basis: 100%; justify-content: center; padding-left: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="l"] .eternity-cat-card__spec:last-child::before { display: none; }
}

@container eternity-card (min-width: 221px) and (max-width: 261px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="m"] .eternity-cat-card__spec:nth-child(2) { padding-right: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="m"] .eternity-cat-card__spec:last-child { flex-basis: 100%; justify-content: center; padding-left: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="m"] .eternity-cat-card__spec:last-child::before { display: none; }
}

@container eternity-card (min-width: 221px) and (max-width: 249px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="s"] .eternity-cat-card__spec:nth-child(2) { padding-right: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="s"] .eternity-cat-card__spec:last-child { flex-basis: 100%; justify-content: center; padding-left: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="s"] .eternity-cat-card__spec:last-child::before { display: none; }
}

/* Smaller cards (narrow desktop / tablet / mobile): smaller type, line
   icons dropped (the metal colour dot stays). Measured one-row widths here:
   s 185px, m 196px, l 214px. */
@container eternity-card (max-width: 220px) {
	body.eternity-category-page .eternity-cat-card__specs {
		row-gap: 4px;
	}

	body.eternity-category-page .eternity-cat-card__specs .eternity-cat-card__spec,
	body.eternity-category-page .eternity-cat-card__specs[data-length="l"] .eternity-cat-card__spec {
		gap: 4px;
		padding-inline: 6px;
		font-size: 11.5px;
	}

	body.eternity-category-page .eternity-cat-card__specs .eternity-cat-card__spec:first-child { padding-left: 0; }
	body.eternity-category-page .eternity-cat-card__specs .eternity-cat-card__spec:last-child { padding-right: 0; }

	body.eternity-category-page .eternity-cat-card__spec .eternity-cat-icon {
		display: none;
	}

	body.eternity-category-page .eternity-cat-card__metal {
		width: 10px;
		height: 10px;
	}

	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="l"] .eternity-cat-card__spec:nth-child(2) { padding-right: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="l"] .eternity-cat-card__spec:last-child { flex-basis: 100%; justify-content: center; padding-left: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="l"] .eternity-cat-card__spec:last-child::before { display: none; }
}

@container eternity-card (max-width: 199px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="m"] .eternity-cat-card__spec:nth-child(2) { padding-right: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="m"] .eternity-cat-card__spec:last-child { flex-basis: 100%; justify-content: center; padding-left: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="m"] .eternity-cat-card__spec:last-child::before { display: none; }
}

@container eternity-card (max-width: 188px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="s"] .eternity-cat-card__spec:nth-child(2) { padding-right: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="s"] .eternity-cat-card__spec:last-child { flex-basis: 100%; justify-content: center; padding-left: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="3"][data-length="s"] .eternity-cat-card__spec:last-child::before { display: none; }
}

/* Two-column phone cards: the long pair ("Round Brilliant | 1.00ct") no
   longer fits beside itself, so long rows stack one value per line. */
@container eternity-card (max-width: 160px) {
	body.eternity-category-page .eternity-cat-card__specs .eternity-cat-card__spec,
	body.eternity-category-page .eternity-cat-card__specs[data-length="l"] .eternity-cat-card__spec {
		font-size: 11px;
	}

	body.eternity-category-page .eternity-cat-card__specs[data-length="l"] .eternity-cat-card__spec {
		flex-basis: 100%;
		justify-content: center;
		padding-inline: 0;
	}

	body.eternity-category-page .eternity-cat-card__specs[data-length="l"] .eternity-cat-card__spec::before {
		display: none;
	}
}

/* Two-specification rows (wedding bands: diamond size or band width |
   metal). Widest one-row widths measured in the browser across all 42
   ladies' bands -- desktop type: s 220px, m 237px, l 290px; smaller type
   (cards up to 220px): s 181px, m 197px, l 272px. A row that doesn't fit
   stacks: one centred value per line, no separator, and a long value
   (e.g. "3.5mm marquise + 1.8mm round", "2mm, 1.7mm, 1.5mm, 1.3mm") may
   break between words rather than overflow the card. Long rows never fit
   one line, so they always stack. */
body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="l"] .eternity-cat-card__spec {
	flex-basis: 100%;
	justify-content: center;
	padding-inline: 0;
	white-space: normal;
	text-align: center;
}

body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="l"] .eternity-cat-card__spec::before {
	display: none;
}

@container eternity-card (min-width: 221px) and (max-width: 241px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="m"] .eternity-cat-card__spec { flex-basis: 100%; justify-content: center; padding-inline: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="m"] .eternity-cat-card__spec::before { display: none; }
}

@container eternity-card (min-width: 221px) and (max-width: 224px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="s"] .eternity-cat-card__spec { flex-basis: 100%; justify-content: center; padding-inline: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="s"] .eternity-cat-card__spec::before { display: none; }
}

@container eternity-card (max-width: 201px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="m"] .eternity-cat-card__spec { flex-basis: 100%; justify-content: center; padding-inline: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="m"] .eternity-cat-card__spec::before { display: none; }
}

@container eternity-card (max-width: 185px) {
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="s"] .eternity-cat-card__spec { flex-basis: 100%; justify-content: center; padding-inline: 0; }
	body.eternity-category-page .eternity-cat-card__specs[data-count="2"][data-length="s"] .eternity-cat-card__spec::before { display: none; }
}

/* Ladies' wedding band titles are longer than ring titles (up to "Lab-Grown
   Marquise & Round Wedding Band -- 3.5mm Marquise + 1.8mm Round"), so
   these pages allow four title lines -- still a fixed height, so prices,
   specifications and buttons stay level across each row -- but only on
   cards narrow enough for one of the page's titles to need a fourth line.
   Widest title measured at 18px: three lines need 246px (All / Lab-Grown)
   and 216px (Natural); Plain titles always fit three lines. Phones already
   allow four lines. Engagement Rings and other categories are unchanged. */
@container eternity-card (max-width: 245px) {
	body.eternity-category-page.eternity-category-page--ladies-wedding-bands [data-products] .woocommerce-loop-product__title,
	body.eternity-category-page.eternity-category-page--lab-grown-ladies-wedding-bands [data-products] .woocommerce-loop-product__title {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		min-height: calc(1.32em * 4);
	}
}

@container eternity-card (max-width: 215px) {
	body.eternity-category-page.eternity-category-page--natural-diamond-ladies-wedding-bands [data-products] .woocommerce-loop-product__title {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		min-height: calc(1.32em * 4);
	}
}

/* Men's wedding band titles (up to "Sleeve Set Two-Tone Dual Stripe White &
   Yellow Gold Wedding Band -- 8mm"): three lines at 18px need 218px, so
   narrower cards allow a fourth line, still at a fixed height. */
@container eternity-card (max-width: 217px) {
	body.eternity-category-page.eternity-category-page--mens-wedding-bands [data-products] .woocommerce-loop-product__title {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		min-height: calc(1.32em * 4);
	}
}

/* Long Men's Band Style badges ("Bevelled Edge" ... "Two-Tone Centre
   Brushed") on narrower cards: slightly tighter letter-spacing and a compact
   line height, so "Two-Tone Brushed" stays on one line and "Two-Tone Centre
   Brushed" wraps to at most two lines, both clear of the band in the photo
   (badge bottom measured against the top of each product image's jewellery
   at every width). */
@container eternity-card (max-width: 245px) {
	body.eternity-category-page.eternity-category-page--mens-wedding-bands [data-products] .eternity-cat-card__badge[data-length="l"] {
		padding: 3px 7px;
		line-height: 1.15;
		letter-spacing: 0.06em;
	}
}

@container eternity-card (max-width: 143px) {
	body.eternity-category-page.eternity-category-page--mens-wedding-bands [data-products] .eternity-cat-card__badge[data-length="l"] {
		padding-inline: 4px;
		letter-spacing: 0.03em;
	}
}

@container eternity-card (max-width: 125px) {
	body.eternity-category-page.eternity-category-page--mens-wedding-bands [data-products] .eternity-cat-card__badge[data-length="l"] {
		padding-block: 2px;
		font-size: 9px;
		line-height: 1.1;
		letter-spacing: 0.02em;
	}
}

/* Jewellery titles (up to "3.30mm Square Wire Paperclip Diamond Cut Bracelet
   -- 19cm"): three lines at 18px need 171px on the widest title of the
   Jewellery, Chains and Bracelets pages (Dress Rings 170px, Earrings 164px,
   Pendants 162px), so narrower cards allow a fourth line, still at a fixed
   height. One threshold for all six pages leaves room for new titles. */
@container eternity-card (max-width: 170px) {
	body.eternity-category-page:is(.eternity-category-page--jewellery, .eternity-category-page--earrings, .eternity-category-page--pendants, .eternity-category-page--chains, .eternity-category-page--bracelets, .eternity-category-page--dress-rings) [data-products] .woocommerce-loop-product__title {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		min-height: calc(1.32em * 4);
	}
}

/* Jewellery benefits with longer delivery wording ("Gold earrings generally
   delivered in approximately 3 working days"): on wide screens the four
   benefits share the width equally and wrap, as the strip already does
   below 1200px, instead of one nowrap line each -- measured, the Earrings
   strip is 1473px wide on one line and Pendants / Chains / Bracelets
   1169px, wider than the 1080-1290px container. All Jewellery and Dress
   Rings fit one line at every width and are unchanged. */
@media (min-width: 1200px) {
	body.eternity-category-page:is(.eternity-category-page--earrings, .eternity-category-page--pendants, .eternity-category-page--chains, .eternity-category-page--bracelets) .eternity-cat-benefits__item {
		flex: 1 1 0;
		min-width: 0;
	}

	body.eternity-category-page:is(.eternity-category-page--earrings, .eternity-category-page--pendants, .eternity-category-page--chains, .eternity-category-page--bracelets) .eternity-cat-benefits__text {
		white-space: normal;
	}
}

/* Long category badges (data-length="l", e.g. "Natural Diamond") on the
   narrowest phone cards: the icon gives way so the label stays on one line
   inside the image. Short badges ("Lab-Grown") are unchanged. */
@container eternity-card (max-width: 143px) {
	body.eternity-category-page [data-products] .eternity-cat-card__badge[data-length="l"] .eternity-cat-icon {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.eternity-category-page :is(.eternity-cat-toolbar__filters, .eternity-cat-card__button, .eternity-cat-card__button .eternity-cat-icon, [data-products] .product, .eternity-cat-whatsapp__link) {
		transition: none;
	}
}