/**
 * Craftrove by T — WooCommerce stylesheet.
 *
 * Branded ecommerce layer on top of assets/css/site.css tokens (GRO-432 §3.5
 * card spec, GRO-435 §4/§9 swatches + quick actions). Loads only when
 * WooCommerce is active (see functions.php).
 *
 * Contents:
 *   1.  Shared woo shell / breadcrumb
 *   2.  Shop archive: filter bar, chips, price, sorting
 *   3.  Product grid + loop card + quick actions
 *   4.  Badges
 *   5.  Pagination + empty state
 *   6.  Single product: layout, gallery, summary
 *   7.  Variation swatches / chips
 *   8.  Quantity, add-to-cart, Buy It Now
 *   9.  Product video poster/embed primitives (reused by Product Details media)
 *   11. Notices
 *   12. Cart
 *   13. Checkout + thank-you
 *   14. My Account shell + wishlist
 *   15. Forms/tables shared
 *   16. Responsive
 *   17. Specificity shim vs WooCommerce core styles
 *   18. Product page rebuild (GRO-487): info tabs, product details,
 *       why-love, reviews, recommended carousel, gallery/wishlist restyle
 */

/* =====================================================================
   1. Shared woo shell / breadcrumb
   ===================================================================== */

.crt-woo-main {
	display: block;
	background: #fff;
	padding-bottom: var(--crt-section-pad);
}

.crt-breadcrumb {
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	line-height: 1.5;
	color: var(--crt-heading);
	margin: 0 auto 0.375rem;
}

.crt-breadcrumb a {
	color: var(--crt-heading);
	text-decoration: none;
}

.crt-breadcrumb a:hover,
.crt-breadcrumb a:focus-visible {
	color: var(--crt-berry);
	text-decoration: underline;
}

.woocommerce-page .crt-page-title {
	margin-bottom: 0.625rem;
}

/* =====================================================================
   2. Shop archive: tabs, toolbar, filters sidebar, price/chips/swatches
   ===================================================================== */

/* GRO-481 §7: no `overflow` here at all — ANY ancestor with a non-visible
   overflow on either axis becomes the containing/clipping context for
   `position: sticky` descendants (confirmed via getBoundingClientRect()
   tracking scrollY 1:1 with zero clamp, i.e. behaving exactly like
   position:static). This also rules out `overflow-x: hidden; overflow-y:
   visible;` as a half-measure: per the CSS overflow spec, setting only one
   axis to a non-visible value forces the browser to compute the other axis as
   `auto` (never a real `visible`), so that combination still silently blocks
   sticky. The original `overflow: hidden` here existed only to clip
   .crt-shop-archive__blob's horizontal bleed (right:-3.75rem) — that decorative
   blob isn't rendered by any template yet, and the site-wide `html, body {
   overflow-x: hidden; }` reset (site.css) already guards against horizontal
   bleed everywhere, including here, so dropping the local rule trades an
   already-redundant guarantee for a required, ticketed sticky behavior. */
.crt-shop-archive {
	position: relative;
	padding: 1.5rem 0 var(--crt-section-pad);
}

.crt-shop-archive__blob {
	position: absolute;
	top: -2.5rem;
	right: -3.75rem;
	width: 23.75rem;
	color: var(--crt-pink);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

/* The scrim is a direct child (see crt_render_shop_archive_controls()) but must
   keep its own position:fixed for the mobile off-canvas overlay to work — GRO-480
   bug found via Playwright (rect collapsed to width×0 at a flexed-in position
   instead of covering the viewport) once this reset silently won the specificity
   tie against `.crt-shop-archive__scrim { position: fixed; }`.
   No `z-index` here (position:relative alone doesn't create a stacking context):
   .crt-shop-archive__blob is never actually rendered by any template yet, so
   there is nothing to stack above today, and giving `.crt-shop-archive__body` a
   z-index would trap its descendant `.crt-shop-archive__filters`/`__tabs`
   drawers (z-index:100 at <=56.25rem) inside a stacking context capped below the
   scrim's z-index:99 — the mobile close (×) button becomes unclickable behind
   the scrim (GRO-480 bug, also found via Playwright: "element intercepts
   pointer events"). Revisit with a scoped z-index if a real blob ships later. */
.crt-shop-archive > *:not(.crt-shop-archive__blob):not(.crt-shop-archive__scrim) {
	position: relative;
}

@media (max-width: 56.25rem) {
	.crt-shop-archive {
		padding-inline: 1.25rem;
	}
}

/* ---------- Controls row: category tabs (left) + toolbar/sort (right) ---------- */

.crt-shop-archive__controls {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin: 0 0 1.75rem;
	border-bottom: 0.0625rem solid var(--crt-peach);
	padding-bottom: 0.25rem;
}

.crt-shop-archive__tabs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.375rem;
}

.crt-shop-archive__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 0.125rem 0.875rem;
	border-bottom: 0.1875rem solid transparent;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	color: var(--crt-heading);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--crt-transition), border-color var(--crt-transition);
}

.crt-shop-archive__tab:hover,
.crt-shop-archive__tab:focus-visible {
	color: var(--crt-berry);
	text-decoration: none;
}

.crt-shop-archive__tab.is-active {
	color: var(--crt-berry);
	border-color: var(--crt-berry);
}

.crt-shop-archive__tab-count {
	font-family: var(--crt-font-body);
	font-weight: 600;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	color: var(--crt-heading);
	opacity: 0.55;
}

.crt-shop-archive__tab.is-active .crt-shop-archive__tab-count {
	color: var(--crt-berry);
	opacity: 0.85;
}

.crt-shop-archive__drawer-head {
	display: none;
}

.crt-shop-archive__toolbar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.375rem;
}

.crt-shop-archive__drawer-btn {
	display: none;
	gap: 0.5rem;
	align-items: center;
	padding: 0.625rem 1.125rem;
	min-height: 0;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
}

@media (hover: none) {
	.crt-shop-archive__drawer-btn.crt-btn--outline:hover,
	.crt-shop-archive__drawer-btn.crt-btn--outline:focus-visible {
		background: transparent;
		color: var(--crt-heading);
	}
}

.crt-shop-archive__sort {
	display: flex;
	align-items: center;
}

.crt-shop-archive__sort noscript button {
	margin-left: 0.5rem;
}

/* ---------- Shared mobile scrim for the tabs / filters off-canvas panels ---------- */

.crt-shop-archive__scrim {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(34, 29, 32, 0.45);
	opacity: 0;
	transition: opacity var(--crt-transition);
}

.crt-shop-archive__scrim.is-open {
	opacity: 1;
}

.crt-shop-archive__scrim[hidden] {
	display: none;
}

/* ---------- Body split: filters sidebar (30%) / product grid (70%) ---------- */

.crt-shop-archive__body {
	display: grid;
	grid-template-columns: minmax(0, 30%) minmax(0, 70%);
	gap: 2rem;
	align-items: start;
}

.crt-shop-archive__filters {
	background: var(--crt-pink);
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

/* GRO-481: sticky filter panel on desktop only — `.crt-header` is itself
   `position: sticky; top: 0;` at ~10rem tall once pinned (promo bar scrolls
   away above it), so 11.25rem clears it with a small gap instead of overlapping.
   Capped to the viewport height (minus that same offset) with its own scroll
   so a long filter list never runs under the footer. Scoped to min-width:56.3125rem
   — at/below the `.crt-shop-archive__body` stacked breakpoint this becomes the
   off-canvas drawer instead (position: fixed, set in the max-width:56.25rem block
   below), where sticky positioning doesn't apply. */
@media (min-width: 56.3125rem) {
	.crt-shop-archive__filters {
		position: sticky;
		top: 11.25rem;
		max-height: calc(100vh - 12.5rem);
		overflow-y: auto;
	}
}

.crt-shop-archive__filters-empty {
	margin: 0;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	color: var(--crt-heading);
	opacity: 0.75;
}

.crt-shop-archive__filters form {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

.crt-filters__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.crt-filters__group legend {
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-heading);
	margin-bottom: 0.625rem;
	padding: 0;
}

.crt-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.crt-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.4375rem 1rem;
	border-radius: var(--crt-radius-pill);
	border: 0.09375rem solid var(--crt-border);
	background: #fff;
	color: var(--crt-heading);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--crt-transition), background-color var(--crt-transition), color var(--crt-transition);
}

.crt-chip small {
	font-size: clamp(0.75rem, calc(0.75rem + 0.08vw), 0.7875rem);
	opacity: 0.65;
}

.crt-chip:hover,
.crt-chip:focus-visible,
.crt-chip:focus-within {
	border-color: var(--crt-berry);
	color: var(--crt-berry);
	text-decoration: none;
}

.crt-chip.is-active {
	background: var(--crt-berry);
	border-color: var(--crt-berry);
	color: #fff;
}

.crt-chip.is-active small {
	opacity: 0.85;
}

.crt-chip--check input {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.crt-chip--check {
	position: relative;
}

.crt-chip--check:focus-within {
	outline: 0.125rem solid var(--crt-berry);
	outline-offset: 0.125rem;
}

.crt-swatch-dot {
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	border: 0.0625rem solid rgba(85, 73, 79, 0.25);
	flex: none;
}

/* ---------- Color swatches (real visible tiles, not text chips) ---------- */

.crt-swatchrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.crt-swatch {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.crt-swatch input {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.crt-swatch .crt-swatch-dot {
	width: 1.875rem;
	height: 1.875rem;
	border-width: 0.09375rem;
	transition: box-shadow var(--crt-transition), transform var(--crt-transition);
}

.crt-swatch:hover .crt-swatch-dot,
.crt-swatch:focus-within .crt-swatch-dot {
	transform: scale(1.08);
}

.crt-swatch:focus-within .crt-swatch-dot {
	outline: 0.125rem solid var(--crt-berry);
	outline-offset: 0.125rem;
}

.crt-swatch.is-active .crt-swatch-dot {
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem var(--crt-berry);
}

/* Disabled/unavailable (out of stock in that color): visible, dimmed, struck — matches
   the .crt-varchip.is-unavailable convention used for variation chips elsewhere. */
.crt-swatch.is-unavailable {
	cursor: not-allowed;
}

.crt-swatch.is-unavailable .crt-swatch-dot {
	opacity: 0.4;
}

.crt-swatch.is-unavailable::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.125rem;
	height: 2.125rem;
	background: var(--crt-heading);
	opacity: 0.5;
	transform: rotate(45deg);
	pointer-events: none;
}

.crt-swatch.is-unavailable:hover .crt-swatch-dot,
.crt-swatch.is-unavailable:focus-within .crt-swatch-dot {
	transform: none;
}

/* ---------- Price range: visual dual-handle slider + From/To fields ---------- */

.crt-pricerange {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--crt-heading);
}

.crt-pricerange input[type="number"] {
	width: 6.25rem;
	padding: 0.5rem 0.75rem;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	background: #fff;
	font-family: var(--crt-font-body);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-body);
}

.crt-pricerange input:focus {
	outline: none;
	border-color: var(--crt-berry);
}

.crt-pricerange--slider {
	flex-direction: column;
	align-items: stretch;
	gap: 0.875rem;
}

.crt-pricerange__track {
	position: relative;
	height: 0.25rem;
	border-radius: 0.25rem;
	background: var(--crt-border);
	margin: 0.875rem 0.125rem 0.25rem;
}

.crt-pricerange__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--crt-berry);
	border-radius: 0.25rem;
}

.crt-pricerange__handle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin: 0;
	transform: translateY(-50%);
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	pointer-events: none;
}

.crt-pricerange__handle::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: #fff;
	border: 0.1875rem solid var(--crt-berry);
	box-shadow: 0 0.125rem 0.375rem rgba(85, 73, 79, 0.25);
	cursor: pointer;
}

.crt-pricerange__handle::-moz-range-thumb {
	pointer-events: auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: #fff;
	border: 0.1875rem solid var(--crt-berry);
	box-shadow: 0 0.125rem 0.375rem rgba(85, 73, 79, 0.25);
	cursor: pointer;
	box-sizing: border-box;
}

.crt-pricerange__handle::-webkit-slider-thumb:focus-visible,
.crt-pricerange__handle:focus-visible::-webkit-slider-thumb {
	outline: 0.125rem solid var(--crt-berry);
	outline-offset: 0.125rem;
}

.crt-pricerange__handle::-moz-range-track {
	background: transparent;
	border: 0;
}

.crt-pricerange__fields {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.crt-pricerange__input {
	width: 0;
	flex: 1;
	min-width: 0;
}

.crt-select,
select.crt-select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.5625rem 2.5rem 0.5625rem 0.875rem;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23AC3A7E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.875rem center;
	font-family: var(--crt-font-body);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-body);
	max-width: 100%;
}

.crt-select:focus {
	outline: none;
	border-color: var(--crt-berry);
}

.crt-filters__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.crt-filters__reset {
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 600;
	color: var(--crt-heading);
	text-decoration: underline;
}

.crt-filters__reset:hover,
.crt-filters__reset:focus-visible {
	color: var(--crt-berry);
}

.crt-result-count,
.woocommerce-page .woocommerce-result-count {
	margin: 0.75rem 0.25rem 0;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	color: var(--crt-heading);
	opacity: 0.8;
}

/* =====================================================================
   3. Product grid + loop card + quick actions
   ===================================================================== */

.woocommerce-page ul.products,
ul.products.crt-wishlist-grid,
.crt-product-grid ul.products {
	list-style: none;
	margin: 1.875rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.875rem;
}

.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}

/* GRO-479 card-QA tuning: a persistent (not hover-only) shadow + a border a
   shade darker than --crt-peach so the card boundary reads clearly on white
   page backgrounds; radius pulled in from 1rem so the media panel + card
   shell no longer feel blob-like; a slower ease-out curve on every animatable
   property smooths the lift/border/shadow change instead of a hard snap. */
li.crt-card {
	position: relative;
	align-self: stretch;
	margin: 0;
	background: #fff;
	border: 0.0625rem solid var(--crt-card-border, #E9C3C8);
	border-radius: 0.875rem;
	box-shadow: 0 0.125rem 0.625rem rgba(85, 73, 79, 0.07);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 280ms cubic-bezier(.22, 1, .36, 1), transform 280ms cubic-bezier(.22, 1, .36, 1), border-color 280ms cubic-bezier(.22, 1, .36, 1);
}

li.crt-card:hover,
li.crt-card:focus-within {
	box-shadow: var(--crt-shadow-soft);
	border-color: var(--crt-berry);
	transform: translateY(-0.25rem);
}


.crt-card__media {
	position: relative;
	background: var(--crt-pink);
	/* A compact 4:3 crop keeps equal-height cards visually lighter while the
	   product image remains responsive across grid widths. */
	aspect-ratio: 4 / 3;
	border-radius: 0.75rem;
	overflow: hidden;
}

.crt-card__imglink {
	display: block;
	overflow: hidden;
}

.crt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	opacity: 1;
	transition: transform 380ms cubic-bezier(.2, .8, .2, 1), opacity 180ms cubic-bezier(.65, 0, .35, 1);
}

/* Reference card interaction: main image expands slightly on hover/focus (GRO-479 card addendum). */
li.crt-card:hover .crt-card__img,
li.crt-card:focus-within .crt-card__img {
	transform: scale(1.06);
}

.crt-card__img.is-swapping {
	opacity: 0;
	transform: scale(1.02);
}

/* Gallery-thumbnail / variation preview row under the media panel. Empty-state
   contract: content-product.php only prints this markup when 2+ images exist. */
.crt-card__thumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem 0;
}

.crt-card__thumbs.is-expanded {
	flex-wrap: wrap;
}

.crt-card__thumb {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0.125rem solid transparent;
	border-radius: 0.625rem;
	overflow: hidden;
	background: var(--crt-cream);
	cursor: pointer;
	transition: border-color var(--crt-transition);
}

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

.crt-card__thumb.is-selected {
	border-color: var(--crt-berry);
}

.crt-card__thumb:hover,
.crt-card__thumb:focus-visible {
	border-color: var(--crt-berry);
}

.crt-card__thumb-more {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0.125rem solid var(--crt-berry);
	border-radius: 0.625rem;
	background: var(--crt-cream);
	color: var(--crt-berry);
	font-family: var(--crt-font-body);
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 240ms cubic-bezier(.22, 1, .36, 1), color 240ms cubic-bezier(.22, 1, .36, 1), border-color 240ms cubic-bezier(.22, 1, .36, 1), transform 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms cubic-bezier(.22, 1, .36, 1);
}

.crt-card__thumb-more:hover,
.crt-card__thumb-more:focus-visible {
	border-color: var(--crt-berry-dark);
	background: var(--crt-berry-dark);
	color: #fff;
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.22);
}

.crt-card__thumb-more:focus-visible {
	outline: 0.125rem solid var(--crt-heading);
	outline-offset: 0.125rem;
}

.crt-card__thumb-more:active {
	transform: translateY(0);
}

/* Persistent action row (replaces the old hover-only overlay): one primary
   CTA + a compact icon-only wishlist button, always visible per the operator
   card reference — no hover-dependent affordance to discover on touch/keyboard. */
.crt-card__cta-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	margin-top: auto;
	padding-top: 0.5rem;
}

.crt-card__cta {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 0.4375rem;
	padding: 0.6875rem 1rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-family: var(--crt-font-body);
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 240ms cubic-bezier(.22, 1, .36, 1), color 240ms cubic-bezier(.22, 1, .36, 1), transform 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms cubic-bezier(.22, 1, .36, 1);
}

.crt-card__cta svg {
	width: 1rem;
	height: 1rem;
	flex: none;
}

.crt-card__cta:hover,
.crt-card__cta:focus-visible {
	background: var(--crt-berry-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.28);
}

.crt-card__cta:active {
	transform: translateY(0);
}

.crt-card__cta:focus-visible {
	outline: 0.125rem solid var(--crt-heading);
	outline-offset: 0.125rem;
}

/* Wishlist: compact circular icon-only button (no text label) per the card reference. */
.crt-card__wish {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0.0625rem solid var(--crt-berry);
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	cursor: pointer;
	transition: background-color 240ms cubic-bezier(.22, 1, .36, 1), color 240ms cubic-bezier(.22, 1, .36, 1), border-color 240ms cubic-bezier(.22, 1, .36, 1), transform 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms cubic-bezier(.22, 1, .36, 1);
}

.crt-card__wish .crt-qa__saved-label {
	display: none !important;
}

.crt-card__wish svg {
	width: 1.125rem;
	height: 1.125rem;
}

.crt-card__wish:hover,
.crt-card__wish:focus-visible {
	border-color: var(--crt-berry-dark);
	background: var(--crt-berry-dark);
	color: #fff;
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.22);
}

.crt-card__wish .crt-qa__heart-filled {
	display: none;
}

.crt-card__wish.is-saved {
	border-color: var(--crt-yellow);
	background: var(--crt-yellow);
	color: var(--crt-berry);
}

.crt-card__wish.is-saved:hover,
.crt-card__wish.is-saved:focus-visible {
	border-color: #f3cd47;
	background: #f3cd47;
	color: var(--crt-berry);
}

.crt-card__wish.is-saved .crt-qa__heart-filled {
	display: inline-block;
	color: currentColor;
}

.crt-card__wish.is-saved .crt-qa__heart {
	display: none;
}

.crt-card__wish.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Chevron flips when the in-card options panel is open (GRO-479 card-QA addendum). */
.crt-card__cta--options[aria-expanded="true"] .crt-icon {
	transform: rotate(180deg);
}

.crt-card__cta--options .crt-icon {
	transition: transform 220ms ease;
}

/* Responsive product-card variation modal. The backdrop and dialog animate
   independently so entry feels clear while exit remains quick. */
.crt-card__options[hidden] {
	display: none;
}

body.crt-modal-open {
	overflow: hidden;
}

.crt-card__options {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms cubic-bezier(.7, 0, .84, 0), visibility 0s 220ms;
}

.crt-card__options.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 280ms cubic-bezier(.16, 1, .3, 1);
}

.crt-card__options-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(52, 34, 44, 0.58);
}

.crt-card__options-dialog {
	position: relative;
	display: grid;
	grid-template-columns: minmax(16.25rem, 0.9fr) minmax(20rem, 1.1fr);
	width: min(53.75rem, 100%);
	max-height: min(45rem, calc(100vh - 3rem));
	overflow: auto;
	border: 0.0625rem solid var(--crt-card-border, #E9C3C8);
	border-radius: 1.5rem;
	background: #fffaf7;
	box-shadow: 0 1.75rem 5rem rgba(52, 34, 44, 0.25);
	opacity: 0;
	transform: translateY(1.125rem) scale(0.985);
	transition: opacity 220ms cubic-bezier(.7, 0, .84, 0), transform 220ms cubic-bezier(.7, 0, .84, 0);
}

.crt-card__options.is-open .crt-card__options-dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 360ms cubic-bezier(.16, 1, .3, 1), transform 360ms cubic-bezier(.16, 1, .3, 1);
}

.crt-card__options-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0.0625rem solid rgba(172, 58, 126, 0.2);
	border-radius: 50%;
	background: #fffaf7;
	color: var(--crt-berry);
	cursor: pointer;
	transition: background-color 180ms cubic-bezier(.22, 1, .36, 1), color 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1);
}

.crt-card__options-close:hover,
.crt-card__options-close:focus-visible {
	background: var(--crt-berry);
	color: #fff;
	transform: rotate(5deg);
}

.crt-card__options-close:focus-visible {
	outline: 0.125rem solid var(--crt-heading);
	outline-offset: 0.125rem;
}

.crt-card__options-media {
	position: relative;
	min-height: 26.25rem;
	background: var(--crt-pink);
	overflow: hidden;
}

.crt-card__options-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	opacity: 1;
	transition: opacity 180ms cubic-bezier(.65, 0, .35, 1);
}

.crt-card__options-image.is-swapping {
	opacity: 0;
}

.crt-card__options-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 3.25rem 2.5rem 2.5rem;
}

.crt-card__options-eyebrow {
	color: var(--crt-berry);
	font-family: var(--crt-font-body);
	font-size: clamp(0.6875rem, calc(0.6875rem + 0.08vw), 0.721875rem);
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.crt-card__options-content h2 {
	margin: -0.5rem 3.5rem 0.25rem 0;
	color: var(--crt-heading);
	font-size: clamp(1.5625rem, 3vw, 2.125rem);
	line-height: 1.12;
}

.crt-card__optgroup {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.crt-card__optgroup legend {
	margin-bottom: 0.5rem;
	padding: 0;
	color: var(--crt-heading);
	font-family: var(--crt-font-body);
	font-size: clamp(0.75rem, calc(0.75rem + 0.08vw), 0.7875rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.crt-card__optchips {
	gap: 0.5rem;
}

.crt-card__optstatus {
	min-height: 1.5rem;
	margin: 0;
	color: var(--crt-heading);
	font-family: var(--crt-font-body);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 700;
}

.crt-card__optactions {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin-top: auto;
	padding-top: 0.25rem;
}

.crt-card__cta--confirm {
	min-height: 2.875rem;
}

.crt-card__cta--confirm:disabled {
	background: var(--crt-cream);
	color: var(--crt-muted, #766a70);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.crt-card__optlink {
	flex: none;
	color: var(--crt-berry);
	font-family: var(--crt-font-body);
	font-size: clamp(0.75rem, calc(0.75rem + 0.08vw), 0.7875rem);
	font-weight: 700;
	text-underline-offset: 0.1875rem;
}

.crt-card__optlink:hover,
.crt-card__optlink:focus-visible {
	color: var(--crt-berry-dark);
}

@media (max-width: 43.75rem) {
	.crt-card__options {
		align-items: end;
		padding: 0.75rem;
	}

	.crt-card__options-dialog {
		grid-template-columns: 1fr;
		width: 100%;
		max-height: calc(100vh - 1.5rem);
		border-radius: 1.375rem 1.375rem 0.875rem 0.875rem;
	}

	.crt-card__options-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.crt-card__options-content {
		gap: 1rem;
		padding: 1.75rem 1.25rem 1.5rem;
	}

	.crt-card__options-content h2 {
		margin-right: 3rem;
		font-size: clamp(1.40625rem, calc(1.28125rem + 0.5vw), 1.5625rem);
	}

	.crt-card__optactions {
		align-items: stretch;
		flex-direction: column;
	}

	.crt-card__optlink {
		text-align: center;
	}
}

.crt-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	padding: 0.875rem 1rem 1rem;
	flex: 1;
}

.crt-card__cat {
	display: inline-flex;
	align-items: center;
	padding: 0.3125rem 0.625rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-pink);
	font-family: var(--crt-font-body);
	font-weight: 700;
	font-size: clamp(0.6875rem, calc(0.6875rem + 0.08vw), 0.721875rem);
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--crt-berry);
	text-decoration: none;
	transition: background-color 240ms cubic-bezier(.22, 1, .36, 1), color 240ms cubic-bezier(.22, 1, .36, 1), transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.crt-card__cat:hover,
.crt-card__cat:focus-visible {
	background: var(--crt-berry);
	color: #fff;
	text-decoration: none;
	transform: translateY(-0.0625rem);
}

.crt-card__title {
	margin: 0;
	font-size: clamp(1.25rem, calc(1.25rem + 0.08vw), 1.3125rem);
	line-height: 1.3;
}

.crt-card__title a {
	color: var(--crt-heading);
	text-decoration: none;
}

.crt-card__title a:hover,
.crt-card__title a:focus-visible {
	color: var(--crt-berry);
}

/* Whole-card click affordance without nuking inner links' a11y. */
.crt-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* GRO-479 card-QA fix: the full-card click overlay above (`.crt-card__title
   a::after`, z-index:1, inset:0 relative to li.crt-card) covers the ENTIRE
   card, not just the media. Every interactive element below the title must
   be lifted above it or its clicks silently navigate to the product page
   instead of firing — this previously only exempted the old (renamed/removed)
   `.crt-card__actions` class, so Add to Cart, Choose Options, the wishlist
   icon, and the gallery thumbnails were all actually broken this way. */
.crt-card__cta-row,
.crt-card__thumbs,
.crt-card__cat {
	position: relative;
	z-index: 2;
}

.crt-card__rating .star-rating {
	color: var(--crt-yellow);
	filter: saturate(1.4) brightness(0.92);
}

/* Specificity must match Woo core's `.woocommerce ul.products li.product .price`
   (0,4,2) — a bare `.crt-card__price` class loses that tie outright since this
   element always carries Woo's own `.price` class too; matching it (and relying
   on crt-woo's priority-50 late enqueue to win the tie) is how every other Woo
   override in this file already works. Price text itself stays 100% dynamic
   (WC's own get_price_html() output) — only typography is set here (GRO-476
   addendum §5). */
.woocommerce ul.products li.crt-card .crt-card__price {
	font-family: var(--crt-font-body);
	font-weight: 700;
	font-size: clamp(1.25rem, calc(1.25rem + 0.08vw), 1.3125rem);
	line-height: 1.75rem;
	color: var(--crt-heading);
}

.crt-card__price del {
	font-weight: 600;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	opacity: 0.55;
	margin-right: 0.375rem;
}

.crt-card__price ins {
	text-decoration: none;
	color: var(--crt-berry);
}

/* Woo's AJAX "view cart" link appended after add-to-cart. */
.crt-card__body .added_to_cart {
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 700;
	color: var(--crt-green);
}

/* =====================================================================
   4. Badges
   ===================================================================== */

.crt-card__badges {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: flex;
	gap: 0.375rem;
	z-index: 2;
}

.crt-badge {
	display: inline-block;
	padding: 0.3125rem 0.875rem;
	border-radius: var(--crt-radius-pill);
	font-size: clamp(0.75rem, calc(0.75rem + 0.08vw), 0.7875rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}

.crt-badge--sale {
	background: var(--crt-yellow);
	color: var(--crt-heading);
}

.crt-badge--oos {
	background: var(--crt-heading);
	color: #fff;
}

/* Hide Woo's default onsale flash — badges are rendered by crt_loop_badges(). */
.woocommerce-page .onsale,
.crt-product-grid .onsale {
	display: none;
}

/* =====================================================================
   5. Pagination + empty state
   ===================================================================== */

.woocommerce-page .woocommerce-pagination {
	margin-top: 2.75rem;
	text-align: center;
}

.woocommerce-page .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-page .woocommerce-pagination ul.page-numbers li {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border: 0.0625rem solid var(--crt-berry);
	border-radius: 50%;
	background: var(--crt-paper, #fffaf6);
	transition: background-color 240ms cubic-bezier(.22, 1, .36, 1), border-color 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms cubic-bezier(.22, 1, .36, 1), transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.woocommerce-page .page-numbers a,
.woocommerce-page .page-numbers span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0 !important;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--crt-berry);
	font-weight: 700;
	line-height: 1 !important;
	text-decoration: none;
	transition: color 240ms cubic-bezier(.22, 1, .36, 1);
}

.woocommerce-page .woocommerce-pagination ul.page-numbers li:hover,
.woocommerce-page .woocommerce-pagination ul.page-numbers li:focus-within {
	border-color: var(--crt-berry);
	background: var(--crt-berry);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.125rem rgba(172, 58, 126, 0.22);
}

.woocommerce-page .woocommerce-pagination ul.page-numbers li:hover a,
.woocommerce-page .woocommerce-pagination ul.page-numbers li:focus-within a,
.woocommerce-page .woocommerce-pagination ul.page-numbers li:hover span,
.woocommerce-page .woocommerce-pagination ul.page-numbers li:focus-within span {
	color: #fff;
}

.woocommerce-page .page-numbers span.current,
.woocommerce-page .woocommerce-pagination ul.page-numbers li span.current {
	background: var(--crt-berry) !important;
	border-radius: inherit;
	color: #fff !important;
}

.woocommerce-page .woocommerce-pagination ul.page-numbers li:active {
	transform: translateY(0);
}

/* WooCommerce core paints the inner link on hover/current; keep it aligned
   with the shared berry pagination state instead of its lavender default. */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--crt-berry) !important;
	color: #fff !important;
}

/* Prev/next arrows (GRO-481 §8): both reuse the one `arrow-right` icon —
   `--prev` mirrors it horizontally rather than shipping a second SVG path. */
.woocommerce-page .page-numbers.prev,
.woocommerce-page .page-numbers.next {
	padding: 0;
}

.crt-page-arrow {
	display: grid;
	place-items: center;
	width: 1.125rem;
	height: 1.125rem;
	line-height: 0;
}

.crt-page-arrow--prev {
	transform: scaleX(-1);
}

.crt-empty-state {
	text-align: center;
	padding: 3.75rem 1.25rem;
	background: var(--crt-pink);
	border-radius: var(--crt-radius-card);
	margin: 1.875rem 0;
}

.crt-empty-state__icon {
	display: inline-flex;
	width: 4rem;
	height: 4rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: var(--crt-berry);
	margin-bottom: 1.125rem;
}

.crt-empty-state__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.crt-empty-state p {
	max-width: 46ch;
	margin: 0 auto 1.375rem;
	color: var(--crt-heading);
}

/* =====================================================================
   6. Single product: layout, gallery, summary
   ===================================================================== */

/* GRO-487: `display: flex` here, not `grid`. A `minmax(0, 1fr) minmax(0, 1fr)`
   CSS Grid combined with an intrinsic-ratio (aspect-ratio or padding-percent)
   descendant anywhere under a `grid-column: 1/-1` item is a genuine, reproduced
   Chromium bug: `grid-template-columns` itself resolves to the engine's
   internal layout-unit max (~33,554,27rem) and stays that way for the rest of
   the page, poisoning the width of every full-width child down the page (not
   just the gallery) — confirmed via getComputedStyle() at both 300ms and
   1800ms after load, i.e. steady-state, not a transient reflow. Component-
   level fixes (fixed vw-based heights, `align-items`, `!important`) only ever
   patched the *symptom* on one element at a time; the actual fix has to be
   here, since flexbox's `flex-basis`/`flex-grow` don't have this `fr`-track
   content-measurement circularity at all. */
.woocommerce-page div.product {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem 3.75rem;
	max-width: 80rem;
	margin: 1.625rem auto 0;
	padding: 0 1.25rem;
}

/* Full-width by default (equivalent to the old `grid-column: 1/-1`) — a
   100%-wide flex item can't share a row with anything, so it always starts
   a new line on its own. */
.woocommerce-page div.product > * {
	width: 100%;
}

.woocommerce-page div.product .woocommerce-product-gallery,
.woocommerce-page div.product .summary.entry-summary {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-page .woocommerce-product-gallery__wrapper {
	border-radius: 0.625rem;
	overflow: hidden;
	background: var(--crt-pink);
}

.woocommerce-page .woocommerce-product-gallery img {
	border-radius: 0;
}

.woocommerce-page .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 0.75rem;
	margin: 1.75rem 0 0 !important;
	list-style: none;
	padding: 0;
}

.woocommerce-page .woocommerce-product-gallery .flex-control-thumbs li {
	width: calc((100% - 2.25rem) / 4);
	float: none;
}

.woocommerce-page .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: 0.625rem;
	border: 0.125rem solid transparent;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity var(--crt-transition), border-color var(--crt-transition);
}

.woocommerce-page .woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-page .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--crt-berry);
}

.crt-single__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.875rem;
	margin-bottom: 0.375rem;
}

.crt-qa--wish-single {
	box-shadow: none;
	border: 0.09375rem solid var(--crt-border);
	background: #fff;
}

.crt-qa--wish-single:hover,
.crt-qa--wish-single:focus-visible {
	border-color: var(--crt-berry);
}

.woocommerce-page .product_title {
	font-size: clamp(1.54375rem, calc(1.06875rem + 3vw), 2.375rem);
	line-height: 1.15;
	margin: 0 0 0.625rem;
}

.woocommerce-page .summary .price {
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(1.575rem, calc(1.435rem + 0.5vw), 1.75rem);
	color: var(--crt-berry);
	margin: 0 0 1rem;
	display: block;
}

.woocommerce-page .summary .price del {
	font-size: clamp(1.25rem, calc(1.25rem + 0.08vw), 1.3125rem);
	opacity: 0.5;
	color: var(--crt-heading);
	margin-right: 0.5rem;
}

.woocommerce-page .summary .price ins {
	text-decoration: none;
}

.woocommerce-page .summary .woocommerce-product-details__short-description {
	color: var(--crt-body);
	margin-bottom: 1.125rem;
}

.woocommerce-page .summary .stock {
	font-weight: 700;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
}

.woocommerce-page .summary .stock.in-stock {
	color: var(--crt-green);
}

.woocommerce-page .summary .stock.out-of-stock {
	color: var(--crt-berry-dark);
}

.woocommerce-page .product_meta {
	margin-top: 1.25rem;
	padding-top: 1.125rem;
	border-top: 0.0625rem solid var(--crt-peach);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	color: var(--crt-heading);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.woocommerce-page .product_meta a {
	color: var(--crt-berry);
	font-weight: 600;
}

/* =====================================================================
   7. Variation swatches / chips
   ===================================================================== */

.woocommerce-page table.variations {
	border: 0;
	margin: 0 0 0.5rem;
	width: 100%;
}

.woocommerce-page table.variations td,
.woocommerce-page table.variations th {
	border: 0;
	padding: 0 0 0.875rem;
	vertical-align: top;
	display: block;
	width: 100%;
	text-align: left;
}

.woocommerce-page table.variations th.label {
	padding-bottom: 0.25rem;
}

.woocommerce-page table.variations .label label {
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-heading);
	margin-bottom: 0;
	display: inline-block;
	text-align: left;
}

/* Once JS enhances the wrap, hide the native select but keep it for WC's logic. */
.crt-varwrap.is-enhanced > select {
	position: absolute !important;
	width: 0.0625rem !important;
	min-width: 0.0625rem !important;
	max-width: 0.0625rem !important;
	height: 0.0625rem !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.crt-varwrap > select {
	max-width: 100%;
	padding: 0.5625rem 0.875rem;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	font-family: var(--crt-font-body);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
}

.crt-varchips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Chips render only after enhancement so no-JS keeps the native select. */
.crt-varwrap:not(.is-enhanced) .crt-varchips {
	display: none;
}

.crt-varchip {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5625rem 1.125rem !important;
	border: 0.09375rem solid var(--crt-border) !important;
	border-radius: var(--crt-radius-pill) !important;
	background: transparent !important;
	color: var(--crt-heading) !important;
	font-family: var(--crt-font-body);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 700;
	cursor: pointer;
	transition: border-color var(--crt-transition), color var(--crt-transition);
}

.crt-varchip:hover,
.crt-varchip:focus-visible {
	background: transparent !important;
	border-color: var(--crt-berry) !important;
	color: var(--crt-berry) !important;
}

.crt-varchip:focus-visible {
	outline: 0.125rem solid var(--crt-berry);
	outline-offset: 0.125rem;
}

.crt-varchip[aria-checked="true"] {
	background: transparent !important;
	border-color: var(--crt-berry) !important;
	color: var(--crt-berry) !important;
}

.crt-varchip[aria-checked="true"] .crt-swatch-dot {
	border-color: var(--crt-berry);
}

/* Unavailable for current combination / out of stock: struck + dimmed, not hidden. */
.crt-varchip.is-unavailable {
	opacity: 0.45;
	text-decoration: line-through;
	cursor: not-allowed;
}

.crt-reset-variations {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 600;
	color: var(--crt-heading);
	text-decoration: underline;
}

.crt-reset-variations:hover,
.crt-reset-variations:focus-visible {
	color: var(--crt-berry);
}

.woocommerce-page .woocommerce-variation-price .price {
	font-size: clamp(1.35rem, calc(1.23rem + 0.5vw), 1.5rem);
	margin-bottom: 0.5rem;
}

.woocommerce-page .woocommerce-variation-availability {
	margin-bottom: 0.625rem;
}

.woocommerce-page p.stock {
	margin: 0.875rem 0 0.625rem;
}

.woocommerce-page p.stock::before {
	content: "Availability";
	display: block;
	font-family: var(--crt-font-head);
	font-weight: 800;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-heading);
	margin-bottom: 0.375rem;
}

.woocommerce-page p.stock span {
	display: inline-flex;
	align-items: center;
	padding: 0.5625rem 1.125rem;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-pill);
	background: transparent;
	color: var(--crt-heading);
	font-family: var(--crt-font-body);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 700;
}

/* =====================================================================
   8. Quantity, add-to-cart, Direct Buy
   ===================================================================== */

.woocommerce-page form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.125rem 0 0.375rem;
}

.woocommerce-page form.cart.variations_form {
	display: block;
}

.woocommerce-page form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.woocommerce-page form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-pill);
	overflow: hidden;
	background: #fff;
}

.woocommerce-page form.cart .quantity .qty {
	width: 2.875rem;
	padding: 0.6875rem 0.25rem;
	border: 0;
	border-left: 0.09375rem solid var(--crt-border);
	border-right: 0.09375rem solid var(--crt-border);
	border-radius: 0;
	text-align: center;
	font-family: var(--crt-font-head);
	font-weight: 700;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	color: var(--crt-heading);
	background: transparent;
	-moz-appearance: textfield;
}

.woocommerce-page form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce-page form.cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce-page form.cart .quantity .qty:focus {
	outline: none;
}

.woocommerce-page form.cart .quantity:focus-within {
	border-color: var(--crt-berry);
}

.crt-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.75rem;
	border: 0 !important;
	background: transparent !important;
	color: var(--crt-heading) !important;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: color var(--crt-transition);
}

.crt-qty-btn:hover,
.crt-qty-btn:focus-visible,
.crt-qty-btn:active {
	background: transparent !important;
	color: var(--crt-berry) !important;
	outline: none;
}

.woocommerce-page form.cart button[name="add-to-cart"],
.woocommerce-page form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 3.5rem;
	padding: 0.8125rem 1.875rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-family: var(--crt-font-body);
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	font-weight: 700;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color var(--crt-transition), transform var(--crt-transition);
}

.woocommerce-page form.cart .single_add_to_cart_button::before {
	content: "";
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17' cy='20' r='1.6'/%3E%3Cpath d='M3 4h2l2.4 12.2a1.5 1.5 0 0 0 1.48 1.2h7.9a1.5 1.5 0 0 0 1.46-1.14L20.5 8H6'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.woocommerce-page form.cart .single_add_to_cart_button:hover,
.woocommerce-page form.cart .single_add_to_cart_button:focus-visible {
	filter: brightness(0.95);
	transform: translateY(-0.125rem);
}

.woocommerce-page form.cart .single_add_to_cart_button.disabled,
.woocommerce-page form.cart .single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Color/shape come from the shared .crt-btn / .crt-btn--ink system (site.css) —
   this just sizes it to match the single_add_to_cart_button next to it. */
.crt-buy-now-single {
	padding: 0.8125rem 1.625rem;
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	min-height: 0;
}

/* =====================================================================
   9. Product video poster/embed primitives — inc/product-videos.php,
      reused by the Product Details media card (section 18, GRO-487).
      The default Woo tabs widget, its "Additional Information" attributes
      table, and the default related/upsell blocks that used to be styled
      here are gone — section 18 replaces all three with the approved
      Product Info Tabs / Recommended Products systems.
   ===================================================================== */

.crt-video-card__poster {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--crt-heading);
	cursor: pointer;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.crt-video-card__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.92;
	transition: opacity var(--crt-transition), transform 0.35s ease;
}

.crt-video-card__poster:hover img,
.crt-video-card__poster:focus-visible img {
	opacity: 1;
	transform: scale(1.03);
}

.crt-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.125rem;
	height: 4.125rem;
	border-radius: 50%;
	background: var(--crt-berry);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.5rem 1.5rem rgba(172, 58, 126, 0.45);
	transition: transform var(--crt-transition), background-color var(--crt-transition);
	pointer-events: none;
}

.crt-video-card__play svg {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.1875rem;
}

.crt-video-card__poster:hover .crt-video-card__play,
.crt-video-card__poster:focus-visible .crt-video-card__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--crt-berry-dark);
}

.crt-video-card__poster--playing .crt-video-card__play {
	display: none;
}

.crt-video-embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
}

/* =====================================================================
   11. Notices
   ===================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	position: relative;
	max-width: 80rem;
	margin: 1.125rem auto;
	padding: 1rem 1.375rem 1rem 3.375rem;
	border: 0;
	border-left: 0.25rem solid var(--crt-green);
	border-radius: var(--crt-radius-field);
	background: var(--crt-cream);
	color: var(--crt-body);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	line-height: 1.6;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: absolute;
	left: 1.375rem;
	top: 1rem;
	font-family: WooCommerce; /* stylelint-disable-line */
	color: inherit;
}

.woocommerce-message {
	border-left-color: var(--crt-green);
}

.woocommerce-message::before {
	color: var(--crt-green);
}

.woocommerce-info {
	border-left-color: var(--crt-berry);
	background: var(--crt-pink);
}

.woocommerce-info::before {
	color: var(--crt-berry);
}

.woocommerce-error {
	border-left-color: #b3261e;
	background: #fdf1f0;
}

.woocommerce-error::before {
	color: #b3261e;
}

.woocommerce-error li {
	margin: 0;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: right;
	margin-left: 1rem;
	padding: 0.4375rem 1.125rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-weight: 700;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	text-decoration: none;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--crt-berry-dark);
	color: #fff;
}

/* =====================================================================
   12. Cart
   ===================================================================== */

.woocommerce-page .woocommerce-cart-form,
.woocommerce-page .cart-collaterals,
.woocommerce-page .woocommerce > .cart-empty,
.woocommerce-page .return-to-shop {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

body.woocommerce-cart .entry-content > .woocommerce,
body.woocommerce-checkout .entry-content > .woocommerce,
body.woocommerce-account .entry-content > .woocommerce {
	max-width: 80rem;
	margin: 1.25rem auto 0;
	padding: 0 1.25rem;
}

.woocommerce-page table.shop_table {
	width: 100%;
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
	border: 0;
	border-bottom: 0.0625rem solid var(--crt-peach);
	padding: 1rem 1.125rem;
	text-align: left;
	vertical-align: middle;
}

.woocommerce-page table.shop_table thead th {
	background: var(--crt-pink);
	font-family: var(--crt-font-head);
	font-weight: 800;
	color: var(--crt-heading);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
}

.woocommerce-page table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce-page table.shop_table td.product-thumbnail img {
	width: 4.5rem;
	border-radius: 0.625rem;
	display: block;
}

.woocommerce-page table.shop_table td.product-name a {
	font-family: var(--crt-font-head);
	font-weight: 700;
	color: var(--crt-heading);
	text-decoration: none;
}

.woocommerce-page table.shop_table td.product-name a:hover {
	color: var(--crt-berry);
}

.woocommerce-page table.shop_table .product-remove a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--crt-pink);
	color: var(--crt-berry) !important;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--crt-transition), color var(--crt-transition);
}

.woocommerce-page table.shop_table .product-remove a:hover,
.woocommerce-page table.shop_table .product-remove a:focus-visible {
	background: var(--crt-berry);
	color: #fff !important;
}

.woocommerce-page .woocommerce-cart-form .quantity {
	display: inline-flex;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-pill);
	overflow: hidden;
}

.woocommerce-page .woocommerce-cart-form .quantity .qty {
	width: 4rem;
	border: 0;
	padding: 0.5rem;
	text-align: center;
	font-weight: 700;
}

.woocommerce-page .woocommerce-cart-form .coupon {
	display: flex;
	gap: 0.625rem;
	align-items: center;
}

.woocommerce-page .woocommerce-cart-form .coupon .input-text {
	width: 11.25rem;
}

.woocommerce-page .woocommerce-cart-form td.actions {
	background: var(--crt-cream);
}

.woocommerce-page .woocommerce-cart-form td.actions > .button,
.woocommerce-page .woocommerce-cart-form .coupon .button {
	border-radius: var(--crt-radius-pill);
	border: 0;
	padding: 0.6875rem 1.5rem;
	background: var(--crt-berry);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--crt-font-body);
}

.woocommerce-page .woocommerce-cart-form td.actions > .button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.woocommerce-page .cart-collaterals {
	margin-top: 2.125rem;
	display: flex;
	justify-content: flex-end;
}

.woocommerce-page .cart-collaterals .cart_totals {
	width: 100%;
	max-width: 30rem;
	float: none;
	background: var(--crt-cream);
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	padding: 1.75rem 1.875rem;
}

.woocommerce-page .cart_totals > h2 {
	font-size: clamp(1.35rem, calc(1.23rem + 0.5vw), 1.5rem);
	margin: 0 0 0.875rem;
}

.woocommerce-page .cart_totals table.shop_table {
	border: 0;
	background: transparent;
}

.woocommerce-page .cart_totals table.shop_table th,
.woocommerce-page .cart_totals table.shop_table td {
	padding: 0.75rem 0.25rem;
	background: transparent;
}

.woocommerce-page .cart_totals .order-total .amount {
	font-family: var(--crt-font-head);
	font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
	font-weight: 800;
	color: var(--crt-berry);
}

.woocommerce-page .wc-proceed-to-checkout {
	padding: 0.625rem 0 0;
}

.woocommerce-page .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	justify-content: center;
	padding: 0.9375rem 1.875rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	font-weight: 800;
	text-decoration: none;
	transition: background-color var(--crt-transition);
}

.woocommerce-page .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background: var(--crt-berry-dark);
}

.woocommerce-page .cart-empty.woocommerce-info {
	margin-top: 2.5rem;
}

.woocommerce-page .return-to-shop {
	text-align: center;
	padding-bottom: 1.875rem;
}

.woocommerce-page .return-to-shop .button {
	display: inline-block;
	padding: 0.8125rem 1.875rem;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-page .cross-sells > h2 {
	font-size: clamp(1.575rem, calc(1.435rem + 0.5vw), 1.75rem);
}

/* =====================================================================
   13. Checkout + thank-you
   ===================================================================== */

.woocommerce-page form.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 2.5rem;
	align-items: start;
}

.woocommerce-page form.woocommerce-checkout #customer_details {
	grid-column: 1;
	width: 100%;
}

.woocommerce-page form.woocommerce-checkout #customer_details .col-1,
.woocommerce-page form.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	margin-bottom: 1.625rem;
}

.woocommerce-page form.woocommerce-checkout #order_review_heading,
.woocommerce-page form.woocommerce-checkout #order_review {
	grid-column: 2;
	width: 100%;
}

.woocommerce-page form.woocommerce-checkout #order_review_heading {
	grid-row: 1;
	margin: 0 0 -1.75rem;
	font-size: clamp(1.35rem, calc(1.23rem + 0.5vw), 1.5rem);
}

.woocommerce-page form.woocommerce-checkout #order_review {
	grid-row: 1 / span 2;
	margin-top: 2.75rem;
	background: var(--crt-cream);
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	padding: 1.625rem 1.75rem;
	position: sticky;
	top: 6.25rem;
}

.woocommerce-page .woocommerce-billing-fields > h3,
.woocommerce-page .woocommerce-shipping-fields > h3,
.woocommerce-page .woocommerce-additional-fields > h3 {
	font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
	margin-bottom: 0.875rem;
}

.woocommerce-page #order_review table.shop_table {
	border: 0;
	background: transparent;
}

.woocommerce-page #order_review table.shop_table th,
.woocommerce-page #order_review table.shop_table td {
	padding: 0.625rem 0.25rem;
	background: transparent;
}

.woocommerce-page #order_review .order-total .amount {
	font-family: var(--crt-font-head);
	font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
	color: var(--crt-berry);
}

.woocommerce-page #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-page #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 1rem 0;
	border-top: 0.0625rem solid var(--crt-peach);
	border-bottom: 0.0625rem solid var(--crt-peach);
}

.woocommerce-page #payment ul.payment_methods li {
	margin-bottom: 0.625rem;
}

.woocommerce-page #payment div.payment_box {
	background: #fff;
	border-radius: var(--crt-radius-field);
	padding: 0.875rem 1rem;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	margin-top: 0.5rem;
}

.woocommerce-page #payment div.payment_box::before {
	content: none;
}

.woocommerce-page #payment #place_order {
	width: 100%;
	padding: 1rem 1.875rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-family: var(--crt-font-body);
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	font-weight: 800;
	cursor: pointer;
	transition: background-color var(--crt-transition);
	float: none;
	margin-top: 1.125rem;
}

.woocommerce-page #payment #place_order:hover,
.woocommerce-page #payment #place_order:focus-visible {
	background: var(--crt-berry-dark);
}

.woocommerce-page .woocommerce-terms-and-conditions-wrapper {
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	margin-top: 0.875rem;
}

.woocommerce-page .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-page .woocommerce-form-login-toggle .woocommerce-info {
	margin-left: 0;
	margin-right: 0;
}

.woocommerce-page form.woocommerce-form-login,
.woocommerce-page form.woocommerce-form-coupon {
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	padding: 1.5rem 1.625rem;
	margin-bottom: 1.625rem;
}

/* Thank-you / order received */
.woocommerce-page .woocommerce-order {
	max-width: 56.25rem;
	margin: 1.875rem auto 0;
}

.woocommerce-page .woocommerce-thankyou-order-received {
	font-family: var(--crt-font-head);
	font-size: clamp(1.4625rem, calc(1.3325rem + 0.5vw), 1.625rem);
	font-weight: 800;
	color: var(--crt-green);
	background: var(--crt-cream);
	border-radius: var(--crt-radius-card);
	padding: 1.625rem 1.875rem;
	margin-bottom: 1.625rem;
}

.woocommerce-page ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 1.875rem;
	padding: 0;
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	overflow: hidden;
}

.woocommerce-page ul.woocommerce-order-overview li {
	flex: 1 1 10rem;
	margin: 0;
	padding: 1.125rem 1.25rem;
	border-right: 0.0625rem solid var(--crt-peach);
	border-bottom: 0;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--crt-heading);
	float: none;
}

.woocommerce-page ul.woocommerce-order-overview li:last-child {
	border-right: 0;
}

.woocommerce-page ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.375rem;
	font-family: var(--crt-font-head);
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	text-transform: none;
	letter-spacing: 0;
	color: var(--crt-body);
}

.woocommerce-page .woocommerce-order-details,
.woocommerce-page .woocommerce-customer-details {
	margin-top: 1.875rem;
}

.woocommerce-page .woocommerce-order-details__title,
.woocommerce-page .woocommerce-customer-details > h2 {
	font-size: clamp(1.35rem, calc(1.23rem + 0.5vw), 1.5rem);
}

.woocommerce-page .woocommerce-customer-details address {
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	padding: 1.25rem 1.5rem;
	font-style: normal;
}

/* =====================================================================
   14. My Account shell + wishlist
   ===================================================================== */

body.woocommerce-account:not(.woocommerce-checkout) .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: 17.5rem minmax(0, 1fr);
	gap: 2.75rem;
	align-items: start;
}

/* WooCommerce's own core CSS puts a float-era clearfix (content:" "; display:
   table) on .woocommerce::before/::after. Once this container is switched to
   grid, those pseudo-elements stop being harmless and become two extra grid
   items, bumping the real nav/content into the wrong cells (nav into column
   2, content wrapping to row 2 under column 1). Neutralize them here so only
   the real nav + content participate in placement. */
body.woocommerce-account:not(.woocommerce-checkout) .entry-content > .woocommerce::before,
body.woocommerce-account:not(.woocommerce-checkout) .entry-content > .woocommerce::after {
	content: none;
}

/* Login/register + lost password screens: single centered card. */
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce,
body.woocommerce-account.woocommerce-lost-password .entry-content > .woocommerce {
	display: block;
	max-width: 35rem;
}

.woocommerce-page .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	background: var(--crt-pink);
	border-radius: var(--crt-radius-card);
	padding: 1.125rem 0.875rem;
	position: sticky;
	top: 6.25rem;
}

.woocommerce-page .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.woocommerce-page .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-page .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6875rem 1rem;
	border-radius: var(--crt-radius-pill);
	color: var(--crt-heading);
	font-family: var(--crt-font-head);
	font-weight: 700;
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	text-decoration: none;
	transition: background-color var(--crt-transition), color var(--crt-transition);
}

.woocommerce-page .woocommerce-MyAccount-navigation li a svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

.woocommerce-page .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-page .woocommerce-MyAccount-navigation li a:focus-visible {
	background: rgba(255, 255, 255, 0.7);
	color: var(--crt-berry);
}

.woocommerce-page .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--crt-berry);
	color: #fff;
}

.woocommerce-page .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
	min-height: 18.75rem;
	/* Grid items default to min-width:auto — without this, a non-wrapping child
	   (orders table, long order-overview line) forces the `minmax(0,1fr)` content
	   column past the viewport instead of scrolling internally (GRO-479). */
	min-width: 0;
}

.woocommerce-page .woocommerce-MyAccount-content {
	font-family: var(--crt-font-body);
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	line-height: 1.6;
	color: var(--crt-body);
}

.woocommerce-page .woocommerce-MyAccount-content > p:first-child {
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
}

.woocommerce-page .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.crt-card a) {
	color: var(--crt-berry);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}

.woocommerce-page .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.crt-card a):hover {
	color: var(--crt-berry-dark);
}

.crt-account__heading {
	font-size: clamp(1.4625rem, calc(1.3325rem + 0.5vw), 1.625rem);
	margin: 0 0 1.125rem;
}

/* Orders table CTA buttons */
.woocommerce-page .woocommerce-MyAccount-content .woocommerce-button.button,
.woocommerce-page .woocommerce-MyAccount-content .woocommerce-Button.button {
	display: inline-block;
	margin: 0.125rem 0.25rem 0.125rem 0;
	padding: 0.5rem 1.125rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--crt-font-body);
}

.woocommerce-page .woocommerce-MyAccount-content .woocommerce-button.button:hover,
.woocommerce-page .woocommerce-MyAccount-content .woocommerce-Button.button:hover {
	background: var(--crt-berry-dark);
	color: #fff;
}

.woocommerce-page .woocommerce-EditAccountForm fieldset {
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}

.woocommerce-page .woocommerce-EditAccountForm legend {
	font-family: var(--crt-font-head);
	font-weight: 800;
	color: var(--crt-heading);
	padding: 0 0.5rem;
}

.woocommerce-page .woocommerce-Addresses .woocommerce-Address {
	background: var(--crt-cream);
	border-radius: var(--crt-radius-card);
	padding: 1.375rem 1.625rem;
}

.woocommerce-page .woocommerce-Address address {
	font-style: normal;
}

.woocommerce-page .woocommerce-Address-title h3 {
	font-size: clamp(1.25rem, calc(1.25rem + 0.08vw), 1.3125rem);
}

.woocommerce-page .woocommerce-Address-title .edit {
	font-weight: 700;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
}

/* Login / register card */
.woocommerce-page form.woocommerce-form-login,
.woocommerce-page form.woocommerce-form-register,
.woocommerce-page form.woocommerce-ResetPassword {
	background: var(--crt-cream);
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	padding: 1.875rem 2.125rem;
}

.woocommerce-page form.woocommerce-form-login .button,
.woocommerce-page form.woocommerce-form-register .button,
.woocommerce-page form.woocommerce-ResetPassword .button {
	padding: 0.75rem 1.875rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-weight: 700;
	font-family: var(--crt-font-body);
	cursor: pointer;
}

.woocommerce-page .lost_password a {
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
}

/* Wishlist page (account endpoint) */
.crt-wishlist-page .crt-empty-state {
	margin-top: 0.375rem;
}

ul.products.crt-wishlist-grid {
	margin-top: 0.375rem;
}

/* Downloads */
.woocommerce-page table.woocommerce-table--order-downloads td,
.woocommerce-page table.woocommerce-table--order-downloads th {
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
}

/* =====================================================================
   15. Forms/tables shared
   ===================================================================== */

.woocommerce-page .form-row {
	margin-bottom: 1rem;
}

.woocommerce-page .form-row label {
	display: block;
	font-weight: 600;
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	color: var(--crt-heading);
	margin-bottom: 0.375rem;
}

.woocommerce-page .form-row .required {
	color: var(--crt-berry);
	text-decoration: none;
}

.woocommerce-page .input-text,
.woocommerce-page .form-row input.input-text,
.woocommerce-page .form-row textarea,
.woocommerce-page .form-row select,
.woocommerce-page select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
	background: #fff;
	font-family: var(--crt-font-body);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	color: var(--crt-body);
	transition: border-color var(--crt-transition);
}

.woocommerce-page .input-text:focus,
.woocommerce-page .form-row textarea:focus,
.woocommerce-page .form-row select:focus {
	outline: none;
	border-color: var(--crt-berry);
}

.woocommerce-page .form-row.woocommerce-invalid input.input-text,
.woocommerce-page .form-row.woocommerce-invalid select {
	border-color: #b3261e;
}

.woocommerce-page .form-row.woocommerce-validated input.input-text {
	border-color: var(--crt-green);
}

.woocommerce-page .select2-container--default .select2-selection--single {
	height: auto;
	padding: 0.5625rem 0.75rem;
	border: 0.09375rem solid var(--crt-border);
	border-radius: var(--crt-radius-field);
}

.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 0.5rem;
}

.woocommerce-page .woocommerce-password-strength {
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	padding: 0.375rem 0.625rem;
	border-radius: var(--crt-radius-field);
}

/* =====================================================================
   16. Responsive
   ===================================================================== */

@media (max-width: 64rem) {
	.woocommerce-page ul.products,
	ul.products.crt-wishlist-grid,
	.crt-product-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.375rem;
	}

	.woocommerce-page div.product {
		gap: 1.875rem;
	}

	.woocommerce-page div.product .woocommerce-product-gallery,
	.woocommerce-page div.product .summary.entry-summary {
		flex: 1 1 100%;
	}

	.woocommerce-page form.woocommerce-checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce-page form.woocommerce-checkout #order_review_heading,
	.woocommerce-page form.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
		margin-top: 0;
		position: static;
	}

	.woocommerce-page form.woocommerce-checkout #order_review_heading {
		margin-bottom: 0.875rem;
	}

	body.woocommerce-account:not(.woocommerce-checkout) .entry-content > .woocommerce {
		grid-template-columns: 1fr;
		gap: 1.625rem;
	}

	.woocommerce-page .woocommerce-MyAccount-navigation {
		position: static;
		padding: 0.625rem;
		/* The row-tabs layout below is intentionally non-wrapping (nowrap tabs that
		   scroll horizontally within the nav) — without min-width:0 the grid item
		   sizes to that content's un-wrapped min-content instead of the viewport,
		   so the whole My Account grid overflows past 100% width (GRO-479). */
		min-width: 0;
	}

	.woocommerce-page .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 0.375rem;
		padding-bottom: 0.25rem;
	}

	.woocommerce-page .woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
	}

}

@media (max-width: 48rem) {
	.woocommerce-page .product_title {
		font-size: clamp(1.6875rem, calc(1.5375rem + 0.5vw), 1.875rem);
	}

	.woocommerce-page #reviews {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.woocommerce-page #reviews .woocommerce-Reviews-title {
		font-size: clamp(1.25rem, calc(1.25rem + 0.08vw), 1.3125rem);
	}

	.woocommerce-page #reviews .comment-reply-title {
		font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
		line-height: 1.4;
	}

	.woocommerce-page #reviews .comment-form-rating,
	.woocommerce-page #reviews .comment-form-comment,
	.woocommerce-page #reviews p {
		max-width: 100%;
	}

	.woocommerce-page #reviews #respond textarea,
	.woocommerce-page #reviews #respond input[type="text"],
	.woocommerce-page #reviews #respond input[type="email"] {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	/* Cart page: outer wrapper already gives 1.25rem inline padding — drop the
	   inner form/collaterals padding so it isn't doubled to 2.5rem on mobile. */
	.woocommerce-page .woocommerce-cart-form,
	.woocommerce-page .cart-collaterals,
	.woocommerce-page .woocommerce > .cart-empty,
	.woocommerce-page .return-to-shop {
		padding-left: 0;
		padding-right: 0;
	}

	.woocommerce-page .cart_totals {
		padding: 1.375rem 1.25rem;
	}

	.woocommerce-page .cart_totals > h2 {
		font-size: clamp(1.25rem, calc(1.25rem + 0.08vw), 1.3125rem);
	}

	/* Cart table stacks into cards. */
	.woocommerce-page .woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table,
	.woocommerce-page .woocommerce-cart-form table.shop_table tbody,
	.woocommerce-page .woocommerce-cart-form table.shop_table tr,
	.woocommerce-page .woocommerce-cart-form table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table tr.cart_item {
		position: relative;
		padding: 1rem;
		border-bottom: 0.0625rem solid var(--crt-peach);
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td {
		border: 0;
		padding: 0.25rem 0;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td.product-thumbnail {
		display: block !important;
		position: static;
		width: 100%;
		margin-top: 2.5rem;
		padding: 0 0 0.75rem;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td.product-thumbnail img {
		width: 100% !important;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td {
		text-align: left !important;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td.product-name,
	.woocommerce-page .woocommerce-cart-form table.shop_table td.product-price,
	.woocommerce-page .woocommerce-cart-form table.shop_table td.product-quantity,
	.woocommerce-page .woocommerce-cart-form table.shop_table td.product-subtotal {
		width: 100%;
		padding-top: 0.625rem;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td.product-remove {
		position: absolute;
		right: 0.625rem;
		top: 0.75rem;
		width: auto;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td[data-title] {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.625rem;
	}

	.woocommerce-page .woocommerce-cart-form table.shop_table td[data-title]::before {
		content: attr(data-title) ":";
		font-weight: 700;
		color: #000;
		font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	}

	.woocommerce-page .woocommerce-cart-form td.actions {
		padding: 1rem;
	}

	.woocommerce-page .woocommerce-cart-form .coupon {
		flex-wrap: wrap;
	}

	.woocommerce-page .woocommerce-cart-form .coupon .input-text {
		width: 100% !important;
	}

	.woocommerce-page .woocommerce-cart-form .coupon .button {
		width: 100% !important;
		justify-content: center;
	}

	.woocommerce-page .woocommerce-cart-form td.actions > .button {
		width: 100% !important;
		display: flex;
		justify-content: center;
	}

	/* Order/downloads tables scroll rather than crush. */
	.woocommerce-page .woocommerce-MyAccount-content .woocommerce-orders-table {
		display: block;
		overflow-x: auto;
	}

	.woocommerce-page ul.woocommerce-order-overview li {
		flex-basis: 100%;
		border-right: 0;
		border-bottom: 0.0625rem solid var(--crt-peach);
	}

	.woocommerce-page ul.woocommerce-order-overview li:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 32.5rem) {
	.woocommerce-page ul.products,
	ul.products.crt-wishlist-grid,
	.crt-product-grid ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce-page form.cart .single_add_to_cart_button,
	.crt-buy-now-single {
		width: 100%;
		justify-content: center;
	}

	.woocommerce-page form.cart .quantity {
		width: 100%;
		justify-content: center;
	}

}

/* Motion safety: card + main-image zoom off for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
	li.crt-card,
	li.crt-card:hover,
	.crt-card__img,
	.crt-video-card__poster img,
	.crt-video-card__play {
		transition: none;
		transform: none;
	}

	li.crt-card:hover .crt-card__img,
	li.crt-card:focus-within .crt-card__img {
		transform: none;
	}

	.crt-card__cta,
	.crt-card__wish,
	.crt-card__thumb-more,
	.woocommerce-page .woocommerce-pagination ul.page-numbers li,
	.woocommerce-page .woocommerce-pagination ul.page-numbers li a,
	.woocommerce-page .woocommerce-pagination ul.page-numbers li span,
	.crt-card__cat,
	.crt-card__options,
	.crt-card__options.is-open,
	.crt-card__options-dialog,
	.crt-card__options-image,
	.crt-card__options-close,
	.crt-card__cta--options .crt-icon,
	.crt-card__cta--options[aria-expanded="true"] .crt-icon {
		transition: none;
		transform: none;
	}
}

/* ---------- GRO-480/481 shop archive: tabs / toolbar / sidebar responsive ----------
   Declared after the generic ul.products rules above so it wins same-specificity
   ties at every width. Section 17 below re-declares `.woocommerce-page
   ul.products` at the same (0,2,1) specificity later in the file, so these
   selectors add the `.woocommerce-page` ancestor to outrank it by specificity
   (0,3,1) instead of relying on source order.

   GRO-481: desktop must show 3 cards per row (the archive's 70% grid column is
   wide enough — the generic ul.products rule above already defaults to 3 for
   every other product loop on the site); this scoped override had pinned the
   archive specifically to 2 regardless of viewport, so it dropped to 2-up even
   on desktop. Tablet keeps 2-up (matches `.crt-shop-archive__body` collapsing
   to a single stacked column at the same 56.25rem breakpoint), mobile keeps 1-up. */

.woocommerce-page .crt-shop-archive__grid ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 56.25rem) {
	.woocommerce-page .crt-shop-archive__grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 56.25rem) {
	.crt-shop-archive__body {
		grid-template-columns: 1fr;
	}

	.crt-shop-archive__drawer-btn {
		display: inline-flex;
	}

	.crt-shop-archive__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1.125rem;
	}

	/* Both panels become off-canvas drawers: fixed, off-screen until .is-open.
	   visibility (delayed on close, instant on open) keeps them out of the tab
	   order while off-screen without relying on the [hidden] attribute, which
	   must stay off these two elements so they render normally above 56.25rem. */
	.crt-shop-archive__tabs,
	.crt-shop-archive__filters {
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		width: min(22.5rem, 88vw);
		z-index: 100;
		background: #fff;
		border: 0;
		border-radius: 0;
		box-shadow: -1.125rem 0 2.5rem rgba(85, 73, 79, 0.18);
		padding: 1.5rem;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.crt-shop-archive__tabs.is-open,
	.crt-shop-archive__filters.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s ease, visibility 0s linear 0s;
	}

	.crt-shop-archive__tabs-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	.crt-shop-archive__tab {
		border-bottom: 0;
		border-radius: var(--crt-radius-field);
		padding: 0.75rem 0.875rem;
	}

	.crt-shop-archive__tab.is-active {
		background: var(--crt-pink);
	}

	/* GRO-481 §5: full-width + wrapping from 56.25rem down, not just below 35rem —
	   `.crt-shop-archive__toolbar` is a flex row, and flex items default to
	   `min-width: auto` (refuse to shrink below their own content's intrinsic
	   width) unless told otherwise. Below 35rem `.crt-shop-archive__sort` had
	   `flex: 1` (which resets that default), but from 900–35rem it was still
	   just an unconstrained auto-width flex item pinned to the far right by
	   `margin-left: auto` — on a long category label or a long selected sort
   option there was nothing stopping it being squeezed/pushed towards the
	   right edge and the two drawer buttons colliding into it on the left, the
	   "cut off toward the left" report. Making every rule below unconditional
	   from this breakpoint down removes the dependency on viewport-specific
	   content width entirely: the sort control is always its own full-width row. */
	.crt-shop-archive__toolbar {
		width: 100%;
		flex-wrap: wrap;
	}

	.crt-shop-archive__sort {
		margin-left: 0;
		width: 100%;
		min-width: 0;
	}

	.crt-shop-archive__sort .crt-select {
		width: 100%;
		min-width: 0;
		flex: 1;
	}
}

@media (max-width: 35rem) {
	.woocommerce-page .crt-shop-archive__grid ul.products {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crt-shop-archive__tabs,
	.crt-shop-archive__filters,
	.crt-shop-archive__scrim {
		transition: none;
	}
}

/* =====================================================================
   17. Specificity shim vs WooCommerce core styles
   Woo's stylesheet outranks the branded rules above in several spots
   (li.product floats, div.images/div.summary widths, grey/purple .button
   defaults). These selectors mirror Woo's own specificity to win cleanly.
   ===================================================================== */

/* Grid items: kill Woo's float/width wherever the Craftrove grid runs. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.crt-products ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

/* The product-grid block (Home) + any Woo loop share the same 3-up grid. */
.woocommerce ul.products,
.woocommerce-page ul.products,
.crt-products ul.products {
	list-style: none;
	margin: 1.875rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.875rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.crt-products ul.products::before,
.crt-products ul.products::after {
	content: none;
}

.crt-products .onsale {
	display: none;
}

/* Single product: the grid owns the columns — Woo floats/widths off. */
.woocommerce div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.summary {
	width: 100%;
	float: none;
	margin-bottom: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

/* Berry pills beat Woo's grey/purple .button defaults everywhere except the
   custom card/quick-action controls, which carry their own styling. */
.woocommerce #respond input#submit,
.woocommerce a.button:not(.crt-qa),
.woocommerce button.button:not(.crt-varchip),
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt:not(.crt-qa),
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page #respond input#submit,
.woocommerce-page a.button:not(.crt-qa),
.woocommerce-page button.button:not(.crt-varchip),
.woocommerce-page input.button,
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce #payment #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.625rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-family: var(--crt-font-body);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--crt-transition);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:not(.crt-qa):hover,
.woocommerce button.button:not(.crt-varchip):hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:not(.crt-qa):hover,
.woocommerce-page button.button:not(.crt-varchip):hover,
.woocommerce-page input.button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce #respond input#submit:focus-visible,
.woocommerce a.button:not(.crt-qa):focus-visible,
.woocommerce button.button:not(.crt-varchip):focus-visible,
.woocommerce #payment #place_order:focus-visible {
	background: var(--crt-berry-dark);
	color: #fff;
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--crt-berry);
	color: #fff;
	opacity: 0.45;
	cursor: not-allowed;
	padding: 0.75rem 1.625rem;
}

/* Buy It Now stays ink-strong (high-contrast) even with the generic shim above. */
.woocommerce div.product form.cart button.button.crt-buy-now-single,
.woocommerce button.button.crt-buy-now-single {
	background: var(--crt-color-ink-strong);
	color: #fff;
}

.woocommerce button.button.crt-buy-now-single:hover,
.woocommerce button.button.crt-buy-now-single:focus-visible {
	background: var(--crt-color-ink-strong);
	filter: brightness(1.15);
	color: #fff;
}

/* Checkout CTA slightly larger. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	padding: 0.9375rem 1.875rem;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	font-weight: 800;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	width: 100%;
	padding: 1rem 1.875rem;
	font-size: clamp(1.0625rem, calc(1.0625rem + 0.08vw), 1.115625rem);
	font-weight: 800;
	float: none;
}

/* Quantity input keeps its pill treatment inside Woo forms. */
.woocommerce .quantity .qty {
	border: 0;
	background: transparent;
}

/* Woo table borders off — the branded card border wraps instead. */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: 0.0625rem solid var(--crt-peach);
	border-radius: var(--crt-radius-card);
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
	border-top: 0;
	border-bottom: 0.0625rem solid var(--crt-peach);
}

.woocommerce table.shop_table thead th,
.woocommerce-page table.shop_table thead th {
	background: var(--crt-pink);
	font-family: var(--crt-font-head);
	font-weight: 800;
	color: var(--crt-heading);
}

.woocommerce table.shop_table tbody tr:last-child td,
.woocommerce-page table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

/* Responsive grid re-declared after the shim so the media queries win. */
@media (max-width: 64rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.crt-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.375rem;
	}
}

@media (max-width: 32.5rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.crt-products ul.products {
		grid-template-columns: 1fr;
	}
}

/* ---- High-specificity card overrides ----
   Woo's columns-N selectors (0,4,2) and GP's customizer `a.button` inline CSS
   outrank the base card rules; these mirror-or-exceed that specificity. */

.woocommerce ul.products[class*=columns-] li.product,
.woocommerce-page ul.products[class*=columns-] li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.crt-products ul.products[class*=columns-] li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

/* Quick-action pills — white pills that flip berry on hover/focus. */
.woocommerce ul.products li.product .crt-qa,
.woocommerce-page ul.products li.product .crt-qa,
.crt-products ul.products li.product .crt-qa,
.woocommerce div.product .crt-qa,
.woocommerce-page div.product .crt-qa {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.5625rem 0.875rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 0.25rem 0.875rem rgba(85, 73, 79, 0.18);
	color: var(--crt-heading);
	font-family: var(--crt-font-body);
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce ul.products li.product .crt-qa:hover,
.woocommerce-page ul.products li.product .crt-qa:hover,
.crt-products ul.products li.product .crt-qa:hover,
.woocommerce div.product .crt-qa:hover,
.woocommerce ul.products li.product .crt-qa:focus-visible,
.woocommerce-page ul.products li.product .crt-qa:focus-visible,
.crt-products ul.products li.product .crt-qa:focus-visible,
.woocommerce div.product .crt-qa:focus-visible {
	background: var(--crt-berry);
	color: #fff;
}

.woocommerce ul.products li.product .crt-qa--buy:hover,
.woocommerce-page ul.products li.product .crt-qa--buy:hover,
.crt-products ul.products li.product .crt-qa--buy:hover,
.woocommerce ul.products li.product .crt-qa--buy:focus-visible,
.crt-products ul.products li.product .crt-qa--buy:focus-visible {
	background: var(--crt-yellow);
	color: var(--crt-heading);
}

/* Single-product summary wishlist pill keeps its outline look. */
.woocommerce div.product .crt-qa--wish-single,
.woocommerce-page div.product .crt-qa--wish-single {
	box-shadow: none;
	border: 0.09375rem solid var(--crt-border);
	background: #fff;
}

.woocommerce div.product .crt-qa--wish-single:hover,
.woocommerce div.product .crt-qa--wish-single:focus-visible {
	border-color: var(--crt-berry);
	background: #fff;
	color: var(--crt-berry);
}

/* Single-product add to cart — berry (Woo's form.cart .button is 0,4,3). */
.woocommerce div.product form.cart .button,
.woocommerce-page div.product form.cart .button,
.woocommerce #content div.product form.cart .button {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.8125rem 1.875rem;
	border: 0;
	border-radius: var(--crt-radius-pill);
	background: var(--crt-berry);
	color: #fff;
	font-family: var(--crt-font-body);
	font-size: clamp(1rem, calc(1rem + 0.08vw), 1.05rem);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--crt-transition);
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .button:focus-visible {
	background: var(--crt-berry-dark);
	color: #fff;
}

.woocommerce div.product form.cart .button.crt-buy-now-single,
.woocommerce-page div.product form.cart .button.crt-buy-now-single {
	background: var(--crt-color-ink-strong);
	color: #fff;
	font-weight: 800;
}

.woocommerce div.product form.cart .button.crt-buy-now-single:hover,
.woocommerce div.product form.cart .button.crt-buy-now-single:focus-visible {
	background: var(--crt-color-ink-strong);
	filter: brightness(1.15);
	color: #fff;
}

.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled {
	background: var(--crt-berry);
	color: #fff;
	opacity: 0.5;
	cursor: not-allowed;
}

/* =====================================================================
   18. Product page rebuild (GRO-487)
   ===================================================================== */

/* ---------- Gallery: square card, zoom hint, hide default SKU/category meta row ---------- */

/* Neither a plain `aspect-ratio` on the <img> nor a padding-percentage
   intrinsic-ratio box is safe here: this element is a direct child of the
   page's top-level `minmax(0, 1fr) minmax(0, 1fr)` grid (gallery/summary),
   and a percentage-based/intrinsic-ratio height on a grid item's descendant
   can hit a genuine Chromium grid-sizing bug where the "auto" row track's
   content-height measurement never resolves and gets clamped to its internal
   layout-unit max (~33,554,27rem) instead of erroring — verified via
   getComputedStyle() on a real mobile-viewport render during GRO-487 QA (the
   `align-items: start` fix above rules out the stretch variant of this bug,
   but not this content-measurement variant). A `vw`-based fixed height has no
   such dependency: it resolves against the viewport, never against this (or
   any) ancestor's own layout, so it can't feed back into the grid's track
   measurement regardless of nesting. The clamp range approximates a square
   at both the ~21.875rem mobile column and the ~36.875rem desktop column (this
   container's max-width of 80rem, minus the two-column gap, halved). */
.crt-commerce--product .woocommerce-product-gallery__image {
	position: relative;
	display: block;
	height: clamp(13.75rem, 45vw, 38.125rem);
	overflow: hidden;
}

.crt-commerce--product .woocommerce-product-gallery__image img {
	position: absolute;
	inset: 0;
	/* !important: the core specificity-shim rule above (`height: auto`, higher
	   specificity) otherwise wins on `height` specifically and the image
	   escapes this now-fixed-size box entirely — same pattern this stylesheet
	   already uses elsewhere (e.g. .crt-varchip) to win the same kind of war. */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.crt-gallery-zoom-hint {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background: var(--crt-color-surface);
	color: var(--crt-color-heading);
	box-shadow: var(--crt-shadow-soft);
	pointer-events: none;
}

.crt-gallery-zoom-hint .crt-icon svg {
	width: 1rem;
	height: 1rem;
}

.crt-commerce--product .product_meta {
	display: none;
}

/* ---------- Wishlist: absolute, top-right of the summary column ---------- */

.crt-commerce--product .crt-single__topline {
	position: relative;
}

.crt-commerce--product .crt-qa--wish-single {
	position: absolute;
	top: 0;
	right: 0;
}

/* ---------- Badge (title/rating/meta line) ---------- */

.crt-product-badge {
	margin: 0 0 0.875rem;
	color: var(--crt-color-text);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
	font-weight: 600;
}

/* ---------- Service icons row ---------- */

.crt-service-icons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.625rem;
	margin: 1.375rem 0 0;
	padding: 1.125rem 0 0;
	border-top: 0.0625rem solid var(--crt-color-border);
	list-style: none;
}

.crt-service-icons__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: clamp(0.78125rem, calc(0.78125rem + 0.08vw), 0.820313rem);
	font-weight: 700;
	color: var(--crt-color-heading);
	line-height: 1.3;
}

.crt-service-icons__icon {
	color: var(--crt-berry);
	font-size: clamp(1.2375rem, calc(1.1275rem + 0.5vw), 1.375rem);
}

/* ---------- Quick feature bullets (last item in the column) ---------- */

.crt-quick-features {
	display: grid;
	gap: 0.625rem;
	margin: 1.125rem 0 0;
	padding: 0;
	list-style: none;
}

.crt-quick-features__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: clamp(0.90625rem, calc(0.90625rem + 0.08vw), 0.951563rem);
	color: var(--crt-color-text);
}

.crt-quick-features__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--crt-color-accent-soft);
	color: var(--crt-heading);
}

.crt-quick-features__icon .crt-icon svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* ---------- Product info tabs (desktop) / accordion (≤ tablet) ---------- */

/* Desktop: two columns (tab list / content panel). Each row wrapper is
   `display:contents` so its button and panel become direct grid items —
   buttons stack in column 1, the active panel fills column 2 (inactive
   panels are `display:none`, so they never compete for that cell). On
   mobile (media query below) the grid collapses to `display:block` and
   `display:contents` simply unwraps each row in place, so the button and
   its own panel end up adjacent in normal flow — a real accordion, not a
   shared content slot at the bottom of the list. */
.crt-info-tabs {
	display: grid;
	grid-template-columns: 16.25rem minmax(0, 1fr);
	gap: 0.75rem 2.5rem;
	margin-top: var(--crt-section-pad);
	padding: 1.75rem;
	background: var(--crt-color-surface-warm);
	border-radius: var(--crt-radius-card);
	align-items: start;
}

.crt-info-tabs__row {
	display: contents;
}

.crt-info-tabs__tab {
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.8125rem 1rem;
	border: 0;
	border-radius: var(--crt-radius-field);
	background: transparent;
	color: var(--crt-color-heading);
	font-family: var(--crt-font-body);
	font-size: clamp(0.9375rem, calc(0.9375rem + 0.08vw), 0.984375rem);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--crt-transition), color var(--crt-transition);
}

.crt-info-tabs__tab span:not(.crt-info-tabs__marker) {
	flex: 1;
}

.crt-info-tabs__tab .crt-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.crt-info-tabs__marker {
	display: none;
}

.crt-info-tabs__tab:hover,
.crt-info-tabs__tab:focus-visible {
	background: var(--crt-color-surface);
}

.crt-info-tabs__tab.is-active {
	background: var(--crt-color-surface);
	color: var(--crt-berry);
	box-shadow: var(--crt-shadow-soft);
}

/* Desktop grid placement: every panel is placed in the same column-2 cell
   spanning all rows — only the `.is-active` one is ever visible
   (`display:none` removes the rest from the grid entirely), so there's
   never more than one panel actually there. */
.crt-info-tabs__panel {
	display: none;
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: start;
	background: var(--crt-color-surface);
	border-radius: var(--crt-radius-card);
	padding: 1.75rem 2rem;
}

.crt-info-tabs__panel.is-active {
	display: block;
}

.crt-info-tabs__panel .crt-info-tabs__panel-title {
	display: none; /* desktop: the active tab label already names the panel */
}

.crt-info-tabs__body {
	color: var(--crt-color-text);
	line-height: 1.7;
}

.crt-info-tabs__benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.375rem 0 0;
	padding: 1.375rem 0 0;
	border-top: 0.0625rem dashed var(--crt-color-border);
	list-style: none;
	text-align: center;
}

.crt-info-tabs__benefits li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	font-weight: 600;
	color: var(--crt-color-heading);
}

.crt-info-tabs__benefits .crt-icon {
	color: var(--crt-berry);
	font-size: clamp(1.4625rem, calc(1.3325rem + 0.5vw), 1.625rem);
}

/* ---------- Product Details ---------- */

.crt-product-details {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
	margin-top: var(--crt-section-pad);
	padding: 2rem;
	background: var(--crt-color-surface);
	border: 0.0625rem solid var(--crt-color-border);
	border-radius: var(--crt-radius-card);
	box-shadow: var(--crt-shadow-soft);
}

.crt-product-details__body h2 {
	margin: 0 0 1rem;
}

.crt-product-details__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
}

.crt-product-details__row {
	display: flex;
	gap: 1.125rem;
	padding-bottom: 0.75rem;
	border-bottom: 0.0625rem dashed var(--crt-color-border);
}

.crt-product-details__row dt {
	flex: none;
	width: 40%;
	font-weight: 700;
	color: var(--crt-color-heading);
}

.crt-product-details__row dd {
	margin: 0;
	color: var(--crt-color-text);
}

/* This figure sits inside a nested grid (`.crt-product-details`, not the
   page's own top-level gallery/summary grid), and that combination made even
   the padding-percentage intrinsic-ratio trick circular here — verified via
   getComputedStyle() during GRO-487 QA: `.crt-product-details`'s own
   `grid-template-columns` resolved to the same absurd clamped value once a
   percentage-height descendant was in the mix. A `vw`-based height sidesteps
   it entirely: `vw` resolves against the viewport, never against an
   ancestor's own layout, so there is no feedback loop regardless of what
   grid/flex context this ends up nested in. */
.crt-product-details__media {
	position: relative;
	height: clamp(13.75rem, 32vw, 23.75rem);
	margin: 0;
	border-radius: var(--crt-radius-card);
	overflow: hidden;
	box-shadow: var(--crt-shadow-soft);
}

.crt-product-details__media img,
.crt-product-details__media .crt-video-card__poster,
.crt-product-details__media-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.crt-product-details__media img {
	object-fit: cover;
	display: block;
}

.crt-product-details__media-fallback {
	display: grid;
	place-items: center;
	background: var(--crt-color-surface-warm);
	color: var(--crt-berry);
	font-size: clamp(1.95rem, calc(1.35rem + 3vw), 3rem);
}

.crt-product-details__media figcaption {
	padding: 0.75rem 0.25rem 0;
	color: var(--crt-color-text);
	font-size: clamp(0.8125rem, calc(0.8125rem + 0.08vw), 0.853125rem);
	text-align: center;
}

/* ---------- Why customers love it ---------- */

.crt-why-love {
	margin-top: var(--crt-section-pad);
}

.crt-why-love__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.crt-why-love__card {
	padding: 1.75rem 1.5rem;
	text-align: center;
	background: var(--crt-color-surface);
	border: 0.0625rem solid var(--crt-color-border);
	border-radius: var(--crt-radius-card);
	box-shadow: var(--crt-shadow-soft);
}

.crt-why-love__icon {
	display: inline-grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 0.875rem;
	border-radius: 50%;
	background: var(--crt-color-accent-soft);
	color: var(--crt-heading);
}

.crt-why-love__card h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.125rem, calc(1.125rem + 0.08vw), 1.18125rem);
}

.crt-why-love__card p {
	margin: 0;
	color: var(--crt-color-text);
	font-size: clamp(0.90625rem, calc(0.90625rem + 0.08vw), 0.951563rem);
	line-height: 1.6;
}

/* ---------- Customer Reviews ---------- */

.crt-reviews-section {
	margin-top: var(--crt-section-pad);
	scroll-margin-top: 1.5rem;
}

.crt-curated-reviews {
	margin-bottom: 0.5rem;
	overflow: hidden;
}

.crt-curated-reviews .swiper-wrapper {
	align-items: flex-start; /* see the recommended-carousel comment above */
}

.crt-review-card {
	height: auto;
	padding: 1.625rem;
	background: var(--crt-color-surface);
	border: 0.0625rem solid var(--crt-color-border);
	border-radius: var(--crt-radius-card);
	box-shadow: var(--crt-shadow-soft);
}

.crt-review-card__stars .star-rating {
	color: var(--crt-color-accent);
	filter: saturate(1.4) brightness(0.92);
}

.crt-review-card__quote {
	margin: 0.875rem 0;
	color: var(--crt-color-text);
	line-height: 1.6;
}

.crt-review-card__by {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.crt-review-card__by img {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	object-fit: cover;
}

.crt-review-card__by strong {
	display: block;
	color: var(--crt-color-heading);
	font-size: clamp(0.875rem, calc(0.875rem + 0.08vw), 0.91875rem);
}

.crt-review-card__verified {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--crt-color-success);
	font-size: clamp(0.75rem, calc(0.75rem + 0.08vw), 0.7875rem);
	font-weight: 700;
	font-style: normal;
}

.crt-review-card__verified .crt-icon svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.crt-curated-reviews .swiper-pagination {
	position: static;
	margin-top: 1.125rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.crt-curated-reviews .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.5rem;
	background: var(--crt-color-border);
	opacity: 1;
}

.crt-curated-reviews .swiper-pagination-bullet-active {
	background: var(--crt-color-accent);
}

.crt-native-reviews #reviews {
	margin-top: 0;
}

/* ---------- Recommended products carousel (reuses .crt-card as-is) ---------- */

.crt-recommended {
	margin-top: var(--crt-section-pad);
}

.crt-recommended__carousel {
	position: relative;
}

/* `ul` tag added to match the specificity-shim rules in section 17 (also
   `ul.products`), which otherwise win the tie and force `display:grid` back
   on regardless of source order. */
ul.crt-recommended__track.swiper-wrapper {
	display: flex;
	/* Not `stretch` (the flex default): `.crt-card`'s aspect-ratio media box
	   combined with a stretch-to-fill cross size is circular — the browser
	   ends up resolving it to an absurd clamped height (verified via a real
	   mobile-viewport screenshot, ~33.5M px). align-items:flex-start gives
	   every slide its own natural content height instead. */
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.crt-recommended__track > li.swiper-slide,
.crt-recommended__track > li.product {
	width: auto;
	height: auto;
	float: none;
	margin: 0;
}

/* `.crt-card__media` (woocommerce.css §3) uses `aspect-ratio: 1/1` — fine in
   its usual CSS Grid contexts, but combined with Swiper's own JS-driven slide
   measurement it hits the same intrinsic-ratio-in-an-auto-sized-container
   Chromium bug documented above (gallery comment) — reproduced identically
   here with a huge clamped height. Scoped to this carousel only (not touching
   the shared card CSS): swap the ratio for a `vw`-based fixed height, which
   can't feed back into Swiper's measurement pass. */
.crt-recommended__track .crt-card__media {
	aspect-ratio: unset;
	height: clamp(10rem, 26vw, 18.75rem);
}

/* `.crt-card__imglink` (the <a> wrapping the image) has no explicit height of
   its own — normally harmless, but its child img's `height: 100%` then has no
   definite basis except by circularly measuring the img itself, which is the
   same bug class as above. Giving the link an explicit height (now definite,
   from the clamp() above) breaks that chain. */
.crt-recommended__track .crt-card__imglink {
	display: block;
	height: 100%;
}

.crt-recommended__track .crt-card__media img {
	aspect-ratio: unset !important;
	height: 100% !important;
	width: 100% !important;
	object-fit: cover;
}

.crt-recommended__nav {
	position: absolute;
	top: 40%;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0.0625rem solid var(--crt-color-border);
	border-radius: 50%;
	background: var(--crt-color-surface);
	color: var(--crt-color-heading);
	box-shadow: var(--crt-shadow-soft);
	cursor: pointer;
	z-index: 2;
	transition: color var(--crt-transition), border-color var(--crt-transition);
}

.crt-recommended__nav:hover,
.crt-recommended__nav:focus-visible {
	color: var(--crt-berry);
	border-color: var(--crt-berry);
}

.crt-recommended__nav--prev {
	left: -1.375rem;
}

.crt-recommended__nav--prev .crt-icon svg {
	transform: rotate(180deg);
}

.crt-recommended__nav--next {
	right: -1.375rem;
}

.crt-recommended__nav.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ---------- Responsive ---------- */

@media (max-width: 56.25rem) {
	/* Accordion mode: `.crt-info-tabs__row` is `display:contents`, so once the
	   grid collapses to a single block column each button and its own panel
	   fall into normal flow immediately next to each other — a real per-item
	   accordion, not a shared content slot at the end of the list. */
	.crt-info-tabs {
		display: block;
		padding: 1rem;
	}

	.crt-info-tabs__tab {
		border-radius: 0;
		border-bottom: 0.0625rem solid var(--crt-color-border);
	}

	.crt-info-tabs__marker {
		display: grid;
		place-items: center;
	}

	.crt-info-tabs__marker svg {
		width: 0.875rem;
		height: 0.875rem;
	}

	.crt-info-tabs__marker-minus {
		display: none;
	}

	.crt-info-tabs__tab.is-active .crt-info-tabs__marker-plus {
		display: none;
	}

	.crt-info-tabs__tab.is-active .crt-info-tabs__marker-minus {
		display: inline-flex;
	}

	.crt-info-tabs__panel {
		grid-column: auto;
		grid-row: auto;
		padding: 1rem 0.25rem 1.25rem;
		border-bottom: 0.0625rem solid var(--crt-color-border);
	}

	.crt-product-details {
		grid-template-columns: 1fr;
	}

	.crt-product-details__media {
		order: -1;
	}

	.crt-why-love__grid {
		grid-template-columns: 1fr;
	}

	.crt-recommended__nav {
		display: none;
	}
}

@media (max-width: 40rem) {
	.crt-service-icons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.crt-info-tabs__benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}