/**
 * CHANGE-LB — component layer (deferred).
 * Author: Hady Salam — LinkedIn: https://www.linkedin.com/in/hadysalam/ · GitHub: https://github.com/hadysalam
 *
 * Phase 0 ships the core design-system primitives so every later template
 * composes from these instead of inventing one-off styles:
 * buttons, links, badges, cards, forms, quantity stepper, state styles.
 */

/* =========================================================================
 * Icons — override critical.css's generic `svg { display: block }` reset.
 * Block-level SVGs force a line break whenever an icon sits inline next to
 * text (e.g. "Link Label →" in a sentence) — inline-flex keeps every
 * change_icon() output flowing on the same line as its adjacent text while
 * still centring perfectly against the text baseline.
 * ===================================================================== */
.chg-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; }

/* =========================================================================
 * Buttons — pill, two voices: ink (default) and coral (buy actions).
 * ===================================================================== */

.chg-btn,
.woocommerce a.button,
.woocommerce button.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.8em 1.6em;
	border: 1.5px solid var(--chg-btn-bg);
	border-radius: var(--chg-radius-xs);
	background: var(--chg-btn-bg);
	color: var(--chg-btn-fg);
	font-weight: 600;
	font-size: var(--chg-text-sm);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--chg-dur) var(--chg-ease),
		border-color var(--chg-dur) var(--chg-ease),
		color var(--chg-dur) var(--chg-ease),
		transform var(--chg-dur-fast) var(--chg-ease);
}
.chg-btn:hover { background: var(--chg-btn-hover-bg); border-color: var(--chg-btn-hover-bg); color: var(--chg-btn-hover-fg); }
.chg-btn:active { transform: scale(0.98); }

/* Buy voice — add to cart, checkout. One warm colour, used sparingly.
   `.alt` selectors match WooCommerce's own (0,3,1) `:where()` primary-button
   rule so ours wins at equal specificity + later load order (WC ships brand
   purple on .button.alt otherwise). */
.chg-btn--buy,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--chg-cta);
	border-color: var(--chg-cta);
	color: var(--chg-on-cta);
}
.chg-btn--buy:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--chg-cta-hover);
	border-color: var(--chg-cta-hover);
	color: var(--chg-on-cta);
}
/* Variable-product "select options first" state: WC repaints .button.alt
   brand-purple via `.button.alt.disabled` (0,4,1) — match it so the buy
   colour holds, just dimmed to read as not-yet-actionable. */
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce #respond input#submit.alt.disabled {
	background: var(--chg-cta);
	border-color: var(--chg-cta);
	color: var(--chg-on-cta);
	opacity: 0.55;
}

/* Price colour — WC 10 ships an olive #958E09 on `div.product p.price` /
   loop prices. Reclaim it: regular price reads ink, the struck was-price
   goes muted, and the on-sale now-price takes the sale colour. Specificity
   matched/beaten against WC's `:where()`-wrapped defaults. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.chg-pcard .price {
	color: var(--chg-text);
	font-weight: 700;
}
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del,
.chg-pcard .price del {
	color: var(--chg-text-muted);
	font-weight: 500;
}
.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins,
.chg-pcard .price ins {
	color: var(--chg-sale);
	text-decoration: none;
}

/* Quiet voice — secondary actions. */
.chg-btn--ghost {
	background: transparent;
	color: var(--chg-text);
	border-color: var(--chg-btn-bg);
}
.chg-btn--ghost:hover { background: var(--chg-btn-bg); color: var(--chg-btn-fg); }

.chg-btn[disabled],
.chg-btn[aria-disabled="true"],
.woocommerce button.button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Loading state: content dims, spinner appears. */
.chg-btn.is-loading { position: relative; color: transparent; }
.chg-btn.is-loading::after {
	content: "";
	position: absolute;
	inline-size: 1.1em; block-size: 1.1em;
	border: 2px solid currentColor;
	border-color: var(--chg-btn-fg) var(--chg-btn-fg) transparent;
	border-radius: 50%;
	animation: chg-spin 0.7s linear infinite;
}
@keyframes chg-spin { to { transform: rotate(360deg); } }

/* =========================================================================
 * Badges — product labels. Small caps, tinted pills.
 * ===================================================================== */

.chg-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: var(--chg-radius-pill);
	font-size: var(--chg-text-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.6;
}
.chg-badge--sale  { background: var(--chg-sale); color: var(--chg-on-cta); }
.chg-badge--new   { background: var(--chg-badge-new); color: var(--chg-ink); }
.chg-badge--best  { background: var(--chg-btn-bg); color: var(--chg-btn-fg); }
.chg-badge--low   { background: var(--chg-tint-warm); color: var(--chg-text); }
.chg-badge--eco   { background: var(--chg-tint-cool); color: var(--chg-brand-deep); }

/* PDP sale badge — product.js moves it inside .woocommerce-product-gallery
   (they render as independent sibling template hooks in WC core, so by
   default it floats above the gallery as its own block); this overlays it
   on the image's top-left corner, matching every other badge in the theme. */
.woocommerce-product-gallery { position: relative; }
.chg-onsale { position: absolute; inset-block-start: 0.8rem; inset-inline-start: 0.8rem; z-index: 2; }

/* =========================================================================
 * Cards — shared surface for products, categories, content.
 * ===================================================================== */

.chg-card {
	background: var(--chg-surface);
	border-radius: var(--chg-radius-lg);
	overflow: hidden;
	box-shadow: var(--chg-shadow-sm);
	transition: box-shadow var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease-out);
}
@media (hover: hover) {
	.chg-card:hover { box-shadow: var(--chg-shadow); transform: translateY(-3px); }
}
.chg-card__media { aspect-ratio: 4 / 5; background: var(--chg-tint-warm); }
.chg-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.chg-card__body { padding: var(--chg-space-sm) var(--chg-space-md) var(--chg-space-md); }

/* =========================================================================
 * Forms
 * ===================================================================== */

.chg-input,
.woocommerce .input-text,
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"],
select, textarea {
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 0.7em 1em;
	border: 1.5px solid var(--chg-line);
	border-radius: var(--chg-radius);
	background: var(--chg-surface);
	color: var(--chg-text);
	transition: border-color var(--chg-dur) var(--chg-ease);
}
.chg-input:focus, .woocommerce .input-text:focus,
input:focus, select:focus, textarea:focus { border-color: var(--chg-brand); outline-offset: 0; }

/* Native checkboxes/radios keep intrinsic size (block-editor lesson). */
input[type="checkbox"], input[type="radio"] { inline-size: auto; flex: none; }

label { font-weight: 600; font-size: var(--chg-text-sm); }

.chg-field-error { color: var(--chg-error); font-size: var(--chg-text-sm); margin-block-start: 0.25rem; }
.chg-notice { padding: 0.9em 1.2em; border-radius: var(--chg-radius); font-size: var(--chg-text-sm); }
.chg-notice--success { background: color-mix(in srgb, var(--chg-success) 12%, var(--chg-surface)); color: var(--chg-success); }
.chg-notice--error   { background: color-mix(in srgb, var(--chg-error) 10%, var(--chg-surface)); color: var(--chg-error); }

/* =========================================================================
 * Quantity stepper (used on PDP + cart)
 * ===================================================================== */

.chg-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--chg-line);
	border-radius: var(--chg-radius-xs);
	overflow: hidden;
}
.chg-qty button {
	inline-size: 2.6em;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: var(--chg-text-md);
	line-height: 1;
}
.chg-qty button:hover { background: var(--chg-tint-warm); }
.chg-qty input {
	inline-size: 3em;
	border: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.chg-qty input::-webkit-inner-spin-button,
.chg-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* =========================================================================
 * Price
 * ===================================================================== */

.chg-price { font-weight: 700; font-family: var(--chg-font-display); }
.chg-price del { color: var(--chg-text-muted); font-weight: 400; margin-inline-end: 0.4em; }
.chg-price ins { text-decoration: none; color: var(--chg-sale); }

/* =========================================================================
 * Utility
 * ===================================================================== */

.chg-eyebrow {
	display: inline-block;
	font-size: var(--chg-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chg-brand);
	margin-block-end: var(--chg-space-xs);
}
.chg-lede { font-size: var(--chg-text-md); color: var(--chg-text-muted); max-inline-size: 42ch; }

/* =========================================================================
 * Phase 1 — header, navigation, drawers, footer
 * ===================================================================== */

/* --- Announcement bar (non-sticky; scrolls away) --- */
.chg-announce { background: var(--chg-ink); color: var(--chg-paper); border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent); position: relative; overflow: clip; }
@media (prefers-reduced-motion: no-preference) {
	.chg-announce { animation: chg-announce-in 0.45s var(--chg-ease-out); }
}
@keyframes chg-announce-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
/* Flex-centred inner keeps the message optically centred regardless of the
   dismiss button (which is absolutely positioned and never shifts the text). */
.chg-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 0.9rem;
	flex-wrap: wrap;
	min-block-size: 34px;
	padding-block: 0.4rem;
	padding-inline-end: 2rem; /* room for the close button so text never sits under it */
	padding-inline-start: 2rem;
}
.chg-announce__text {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	justify-content: center;
	font-size: var(--chg-text-xs); font-weight: 600;
	letter-spacing: 0.02em; text-align: center;
}
.chg-announce__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0.95;
	transition: opacity var(--chg-dur-fast) var(--chg-ease);
}
.chg-announce__link:hover { color: inherit; opacity: 1; text-decoration-thickness: 2px; }

/* --- Masthead --- */
.chg-header {
	background: var(--chg-bg);
	border-block-end: 1px solid var(--chg-line);
}
/* The header group (top bar + masthead) is one sticky unit; the top bar
   collapses on scroll-down by translating the wrapper up its own height. */
.chg-headwrap {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	transition: transform var(--chg-dur) var(--chg-ease);
}
/* Height of the top bar, so the wrapper can translate up exactly its height.
   :has() gives a CSS-only fallback; theme.js sets the measured value on init. */
.chg-headwrap:has(.chg-topbar) { --chg-topbar-h: 42px; }
.chg-headwrap.is-condensed { transform: translateY(calc(-1 * var(--chg-topbar-h, 0px))); }
.chg-headwrap--static { position: static; }

/* --- Utility top bar --- */
.chg-topbar {
	background: var(--chg-ink);
	color: color-mix(in srgb, var(--chg-paper) 82%, transparent);
	font-size: var(--chg-text-xs);
	border-block-end: 1px solid color-mix(in srgb, var(--chg-paper) 12%, transparent);
	overflow: clip;
}
@media (prefers-reduced-motion: no-preference) {
	.chg-topbar { animation: chg-topbar-in 0.4s var(--chg-ease-out); }
}
@keyframes chg-topbar-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
.chg-topbar__inner {
	display: flex;
	align-items: center;
	gap: var(--chg-space-md);
	min-block-size: 40px;
	padding-block: 0.35rem;
}
.chg-topbar__msg { margin: 0; letter-spacing: 0.01em; }
.chg-topbar__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--chg-space-md);
	margin-inline-start: auto;
}
.chg-topbar__link {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.85;
	transition: opacity var(--chg-dur-fast) var(--chg-ease);
}
.chg-topbar__link:hover { opacity: 1; color: inherit; }
.chg-topbar__socials {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* When links are absent, socials still sit on the right. */
.chg-topbar__inner > .chg-topbar__socials:not(:nth-child(2)) { margin-inline-start: 0; }
.chg-topbar__inner > .chg-topbar__msg + .chg-topbar__socials,
.chg-topbar__inner > .chg-topbar__socials:first-child { margin-inline-start: auto; }
.chg-topbar__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: var(--chg-radius-xs);
	color: inherit;
	opacity: 0.85;
	transition: opacity var(--chg-dur-fast) var(--chg-ease), background var(--chg-dur-fast) var(--chg-ease);
}
.chg-topbar__social:hover {
	opacity: 1;
	color: inherit;
	background: color-mix(in srgb, var(--chg-paper) 14%, transparent);
}
@media (max-width: 640px) {
	/* Links always scroll horizontally on phones regardless of what's hidden. */
	.chg-topbar__links { margin-inline-start: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.chg-topbar__links::-webkit-scrollbar { display: none; }
}
/* Desktop/mobile visibility + per-piece mobile hides are admin-controlled
   (CHANGE-LB settings → Top bar) rather than hardcoded — see template-parts/
   top-bar.php. 767px matches the theme's other mobile breakpoints (bottom
   nav, social FAB). */
@media (min-width: 768px) {
	.chg-topbar--no-desktop { display: none; }
}
@media (max-width: 767px) {
	.chg-topbar--no-mobile { display: none; }
	.chg-topbar__msg--hide-mobile,
	.chg-topbar__links--hide-mobile,
	.chg-topbar__socials--hide-mobile { display: none; }
}
@supports (backdrop-filter: blur(1px)) {
	.chg-header { background: color-mix(in srgb, var(--chg-bg) 85%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
}
.chg-header__inner {
	display: flex; align-items: center; gap: var(--chg-space-md);
	min-block-size: 64px;
}
.chg-header__brand { text-decoration: none; display: inline-flex; align-items: center; }

.chg-wordmark {
	font-family: var(--chg-font-display);
	font-weight: 800; font-size: 1.5rem; letter-spacing: 0.01em;
	color: var(--chg-heading); display: inline-flex; align-items: baseline; gap: 0.15em;
}
.chg-wordmark__spin { color: var(--chg-sea); display: inline-flex; transition: transform var(--chg-dur-slow) var(--chg-ease-out); }
.chg-header__brand:hover .chg-wordmark__spin { transform: rotate(180deg); }
.chg-wordmark--footer { color: var(--chg-paper); }

/* Admin logo images. Two are rendered; CSS shows the one for the active theme
   (stamped pre-paint on <html>, so no flash). Single logo shows always. */
.chg-logo { display: block; height: auto; max-width: 160px; object-fit: contain; }
.chg-header__brand--logo { gap: 0; }
.chg-logo--dark { display: none; }
:root[data-chg-theme="dark"] .chg-logo--light { display: none; }
:root[data-chg-theme="dark"] .chg-logo--dark  { display: block; }
:root[data-chg-theme="light"] .chg-logo--dark { display: none; }
:root[data-chg-theme="light"] .chg-logo--light { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-chg-theme="light"]) .chg-logo--light { display: none; }
	:root:not([data-chg-theme="light"]) .chg-logo--dark  { display: block; }
}
.chg-drawer__brand { display: inline-flex; align-items: center; text-decoration: none; }
.chg-drawer__brand .chg-wordmark { font-size: 1.25rem; }

/* --- Primary nav (desktop) --- */
.chg-nav { margin-inline-start: var(--chg-space-sm); }
.chg-nav__menu { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.chg-nav__menu > li { position: relative; }
.chg-nav__link {
	display: inline-block; padding: 0.5rem 0.7rem;
	color: var(--chg-text); text-decoration: none;
	font-weight: 600; font-size: var(--chg-text-xs);
	letter-spacing: 0.06em; text-transform: uppercase;
	position: relative;
	transition: color var(--chg-dur) var(--chg-ease);
}
/* Underline-grow on hover — retail-nav feel, accent-coloured. */
.chg-nav__link::after {
	content: ""; position: absolute; inset-inline: 0.7rem; inset-block-end: 0.15rem;
	block-size: 2px; background: var(--chg-accent); border-radius: 2px;
	transform: scaleX(0); transform-origin: inline-start;
	transition: transform var(--chg-dur) var(--chg-ease);
}
.chg-nav__item:hover > .chg-nav__row > .chg-nav__link::after,
.chg-nav__item:hover > .chg-nav__link::after,
.chg-nav__link:focus-visible::after,
.chg-nav__item.current-menu-item > .chg-nav__link::after { transform: scaleX(1); }
.chg-nav__row { display: inline-flex; align-items: center; }
.chg-nav__mega-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 24px; block-size: 24px; margin-inline-start: -0.3rem;
	border: 0; background: transparent; color: var(--chg-text-muted); cursor: pointer;
}
.chg-nav__mega-toggle .chg-icon { transition: transform var(--chg-dur) var(--chg-ease); }
.chg-nav__item--mega:hover .chg-nav__mega-toggle .chg-icon,
.chg-nav__mega-toggle[aria-expanded="true"] .chg-icon { transform: rotate(180deg); }
/* Submenu — hover + :focus-within so it is keyboard-reachable. */
.chg-nav__menu .sub-menu {
	position: absolute; inset-inline-start: 0; top: 100%;
	min-inline-size: 220px; padding: 0.5rem; margin: 0; list-style: none;
	background: var(--chg-surface); border-radius: var(--chg-radius);
	box-shadow: var(--chg-shadow); border: 1px solid var(--chg-line);
	opacity: 0; visibility: hidden; translate: 0 6px;
	transition: opacity var(--chg-dur) var(--chg-ease), translate var(--chg-dur) var(--chg-ease), visibility 0s linear var(--chg-dur);
}
.chg-nav__menu > li:hover > .sub-menu,
.chg-nav__menu > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
}
.chg-nav__menu .sub-menu a {
	display: block; padding: 0.5rem 0.75rem; border-radius: var(--chg-radius-sm);
	color: var(--chg-text); text-decoration: none; font-size: var(--chg-text-sm);
}
.chg-nav__menu .sub-menu a:hover { background: var(--chg-tint-warm); }

/* --- Header actions --- */
.chg-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.25rem; }
.chg-header__actionlist { display: flex; align-items: center; gap: 0.25rem; }
.chg-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 42px; block-size: 42px;
	border: 0; border-radius: var(--chg-radius-pill);
	background: transparent; color: var(--chg-text); cursor: pointer;
	transition: background var(--chg-dur) var(--chg-ease);
}
.chg-iconbtn:hover { background: var(--chg-tint-warm); }

.chg-cartbtn { position: relative; }
.chg-cartbtn__count {
	position: absolute; inset-block-start: 2px; inset-inline-end: 0;
	min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--chg-cta); color: var(--chg-on-cta);
	border-radius: var(--chg-radius-pill);
	font-size: 11px; font-weight: 700; line-height: 1;
	transition: transform var(--chg-dur-fast) var(--chg-ease);
}
.chg-cartbtn__count.is-empty { display: none; }
.chg-cartbtn__count.is-bump { transform: scale(1.35); }

.chg-header__wish { position: relative; }
.chg-wish-count {
	position: absolute; inset-block-start: 2px; inset-inline-end: 0;
	min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--chg-cta); color: var(--chg-on-cta);
	border-radius: var(--chg-radius-pill);
	font-size: 11px; font-weight: 700; line-height: 1;
	transition: transform var(--chg-dur-fast) var(--chg-ease);
}
.chg-wish-count.is-empty { display: none; }
.chg-wish-count.is-bump { transform: scale(1.35); }

/* --- Slide-down search bar --- */
.chg-searchbar { border-block-start: 1px solid var(--chg-line); background: var(--chg-bg); }
.chg-searchbar[hidden] { display: none; }
.chg-searchbar__form { display: flex; gap: 0.5rem; align-items: center; padding-block: 0.75rem; }
.chg-searchbar__field { flex: 1 1 12rem; min-inline-size: 0; }

/* --- Burger hidden on desktop; nav hidden on mobile --- */
.chg-header__burger { display: none; }
@media (max-width: 989px) {
	.chg-header__burger { display: inline-flex; }
	.chg-nav { display: none; }
	.chg-header__account { display: none; }
	.chg-header__inner { gap: var(--chg-space-xs); }
}

/* --- Squeeze zone: nav is still visible (≥990px) but there isn't room for
   both the full menu and the full icon row without cramping/gapping oddly.
   Two bands: spacing tightens across the whole 990-1219px range, and the
   action icons additionally collapse into a single "more" button + dropdown
   in the narrower 990-1150px sub-range where even the tightened row doesn't
   fit. Below 990px the burger takes over and everything resets. --- */
@media (min-width: 990px) and (max-width: 1219px) {
	.chg-header__inner { gap: var(--chg-space-xs); }
	.chg-nav { margin-inline-start: 0; }
	.chg-nav__link { padding-inline: 0.4rem; }
}
.chg-header__more { display: none; }
@media (min-width: 990px) and (max-width: 1150px) {
	/* With icons collapsed into the "more" dropdown, the nav no longer needs
	   to hug the logo to make room — center it in the space between the
	   logo and the (now much narrower) actions cluster. */
	.chg-nav { flex: 1; }
	.chg-nav__menu { justify-content: center; }
	.chg-header__actions { position: relative; }
	.chg-header__more { display: inline-flex; }
	.chg-header__actionlist {
		position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-end: 0;
		flex-direction: column; align-items: stretch; gap: 0.15rem;
		background: var(--chg-surface); border: 1px solid var(--chg-line); border-radius: var(--chg-radius);
		box-shadow: var(--chg-shadow-lg); padding: 0.4rem;
		opacity: 0; visibility: hidden; translate: 0 -6px;
		transition: opacity var(--chg-dur) var(--chg-ease), translate var(--chg-dur) var(--chg-ease), visibility 0s linear var(--chg-dur);
		z-index: 50;
	}
	.chg-header__actionlist.is-open {
		opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
	}
}

/* --- Drawers (cart end / nav start) --- */
.chg-drawer-overlay {
	position: fixed; inset: 0; z-index: 180;
	background: rgb(22 33 31 / 0.5);
	backdrop-filter: blur(2px);
}
.chg-drawer-overlay[hidden] { display: none; }
.chg-drawer {
	position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 190;
	inline-size: min(92vw, 420px);
	display: flex; flex-direction: column;
	background: var(--chg-bg);
	box-shadow: var(--chg-shadow-lg);
}
.chg-drawer[hidden] { display: none; }
.chg-drawer--start { inset-inline-end: auto; inset-inline-start: 0; }
@media (prefers-reduced-motion: no-preference) {
	.chg-drawer:not([hidden]) { animation: chg-drawer-in var(--chg-dur-slow) var(--chg-ease-out); }
	.chg-drawer--start:not([hidden]) { animation-name: chg-drawer-in-start; }
	.chg-drawer-overlay:not([hidden]) { animation: chg-fade var(--chg-dur) var(--chg-ease); }
}
@keyframes chg-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes chg-drawer-in-start { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes chg-fade { from { opacity: 0; } to { opacity: 1; } }
/* Reverse slide-out on close (theme.js closeAnimated adds .is-closing, waits
   for this to finish, then actually hides) — was previously just vanishing
   via [hidden] with no exit animation. Same specificity as the entrance
   rule above, so source order (this comes later) decides the winner. */
@media (prefers-reduced-motion: no-preference) {
	.chg-drawer.is-closing { animation: chg-drawer-out var(--chg-dur-slow) var(--chg-ease-out) forwards; }
	.chg-drawer--start.is-closing { animation-name: chg-drawer-out-start; }
	.chg-drawer-overlay.is-closing { animation: chg-fade-out var(--chg-dur) var(--chg-ease) forwards; }
}
@keyframes chg-drawer-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes chg-drawer-out-start { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes chg-fade-out { from { opacity: 1; } to { opacity: 0; } }
.chg-drawer { inset-block-start: var(--chg-adminbar); }

.chg-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--chg-space-sm) var(--chg-space-md);
	border-block-end: 1px solid var(--chg-line);
}
.chg-drawer__title { margin: 0; font-size: var(--chg-text-md); }
.chg-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--chg-space-md); }

/* Mini-cart inside the drawer */
.chg-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--chg-space-sm); }
.chg-drawer .woocommerce-mini-cart-item {
	position: relative;
	padding-block-end: var(--chg-space-sm);
	padding-inline-end: 32px; /* room for the remove control */
	border-block-end: 1px solid var(--chg-line);
}
/* Woo nests the thumbnail inside the title link — grid the LINK, not the li. */
.chg-drawer .woocommerce-mini-cart-item a:not(.remove) {
	display: grid; grid-template-columns: 72px 1fr; gap: var(--chg-space-sm);
	align-items: center;
	color: var(--chg-text); text-decoration: none; font-weight: 600; font-size: var(--chg-text-sm);
}
.chg-drawer .woocommerce-mini-cart-item img {
	inline-size: 72px; block-size: 90px; object-fit: cover;
	border-radius: var(--chg-radius-sm); background: var(--chg-tint-warm);
	float: none; margin: 0;
}
/* qty × price line aligns under the title, clear of the image column */
.chg-drawer .woocommerce-mini-cart-item .quantity {
	display: block; margin-inline-start: calc(72px + var(--chg-space-sm));
	color: var(--chg-text-muted); font-size: var(--chg-text-sm);
}
.chg-drawer .woocommerce-mini-cart-item .remove {
	position: absolute; inset-inline-end: 0; inset-block-start: 0;
	inline-size: 26px; block-size: 26px; line-height: 24px;
	border-radius: var(--chg-radius-pill); text-align: center;
	color: var(--chg-mist) !important; text-decoration: none; font-size: 18px;
}
.chg-drawer .woocommerce-mini-cart-item .remove:hover { background: var(--chg-tint-warm); color: var(--chg-error) !important; }
.chg-drawer .woocommerce-mini-cart__total {
	display: flex; justify-content: space-between;
	padding-block: var(--chg-space-sm); margin: 0;
	font-size: var(--chg-text-md);
}
.chg-drawer .woocommerce-mini-cart__buttons {
	display: grid; gap: 0.5rem; margin: 0;
}
.chg-drawer .woocommerce-mini-cart__empty-message {
	text-align: center; color: var(--chg-text-muted);
	padding-block: var(--chg-space-xl); margin: 0;
}

/* Shipping meter */
.chg-drawer__shipnote { font-size: var(--chg-text-sm); margin: 0 0 0.5rem; }
.chg-drawer__shipnote--met { color: var(--chg-success); font-weight: 600; }
.chg-drawer__shipbar {
	block-size: 6px; border-radius: var(--chg-radius-pill);
	background: var(--chg-tint-warm); overflow: hidden; margin-block-end: var(--chg-space-md);
}
.chg-drawer__shipbar span {
	display: block; block-size: 100%;
	background: var(--chg-sea); border-radius: inherit;
	transition: inline-size var(--chg-dur-slow) var(--chg-ease-out);
}

/* Mobile nav drawer menu */
.chg-mobilenav { list-style: none; margin: 0; padding: var(--chg-space-sm) var(--chg-space-md); overflow-y: auto; }
.chg-mobilenav > li > a {
	display: block; padding: 0.8rem 0.25rem;
	color: var(--chg-text); text-decoration: none;
	font-family: var(--chg-font-display); font-weight: 700; font-size: var(--chg-text-md);
	border-block-end: 1px solid var(--chg-line);
}
.chg-mobilenav .sub-menu { list-style: none; margin: 0; padding: 0 0 0.5rem 0.75rem; }
.chg-mobilenav .sub-menu a { display: block; padding: 0.45rem 0.25rem; color: var(--chg-text-muted); text-decoration: none; }

/* Category items (top-level links pointing at a product-category archive,
   tagged with menu-cat-{slug} by the nav_menu_css_class filter in
   inc/nav-walker.php) each get their own category-tinted background —
   same --chg-cat-* system as the mega menu / category rail — rather than
   all reading as identical plain rows. */
.chg-mobilenav > li[class*="menu-cat-"] { --chg-accent: var(--chg-brand); }
.chg-mobilenav > li.menu-cat-drinkware        { --chg-accent: var(--chg-cat-drinkware); }
.chg-mobilenav > li.menu-cat-kitchen-products { --chg-accent: var(--chg-cat-kitchen); }
.chg-mobilenav > li.menu-cat-personal-care    { --chg-accent: var(--chg-cat-personal); }
.chg-mobilenav > li.menu-cat-straws,
.chg-mobilenav > li.menu-cat-straws-cutlery   { --chg-accent: var(--chg-cat-straws); }
.chg-mobilenav > li.menu-cat-bundles          { --chg-accent: var(--chg-cat-bundles); }
.chg-mobilenav > li[class*="menu-cat-"] > a {
	position: relative; overflow: hidden; isolation: isolate;
	background: color-mix(in srgb, var(--chg-accent) 14%, transparent);
	border-radius: var(--chg-radius-sm);
	border-block-end: 0; margin-block-end: 0.3rem;
	transition: background var(--chg-dur) var(--chg-ease), color var(--chg-dur) var(--chg-ease);
}
.chg-mobilenav > li[class*="menu-cat-"] > a:hover,
.chg-mobilenav > li[class*="menu-cat-"] > a:focus-visible {
	background: var(--chg-accent); color: #fff;
}
/* Tap feedback: no size change — instead a solid fill sweeps in from empty,
   like a quick loading bar, playing out during the tap even though the link
   navigates away right after. The ::before pseudo (not the row itself)
   carries the color and animates its scale, so the row's own box never
   moves or resizes. */
.chg-mobilenav > li[class*="menu-cat-"] > a::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--chg-accent); transform: scaleX(0); transform-origin: left;
}
.chg-mobilenav > li[class*="menu-cat-"] > a:active { color: #fff; }
.chg-mobilenav > li[class*="menu-cat-"] > a:active::before {
	animation: chg-mobilenav-fill 0.45s var(--chg-ease-out);
}
@keyframes chg-mobilenav-fill {
	0%   { transform: scaleX(0); }
	20%  { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.chg-mobilenav > li[class*="menu-cat-"] > a:active::before { animation: none; transform: scaleX(1); }
}

/* Menu items settle in one after another as the drawer slides open — its
   own distinct beat on top of the drawer's slide-in. animation-fill-mode:
   backwards holds each item invisible until its delay elapses (no flash). */
@media (prefers-reduced-motion: no-preference) {
	.chg-drawer:not([hidden]) .chg-mobilenav > li {
		animation: chg-navlink-in 0.35s var(--chg-ease-out) backwards;
	}
	.chg-drawer:not([hidden]) .chg-mobilenav > li:nth-child(1) { animation-delay: 80ms; }
	.chg-drawer:not([hidden]) .chg-mobilenav > li:nth-child(2) { animation-delay: 120ms; }
	.chg-drawer:not([hidden]) .chg-mobilenav > li:nth-child(3) { animation-delay: 160ms; }
	.chg-drawer:not([hidden]) .chg-mobilenav > li:nth-child(4) { animation-delay: 200ms; }
	.chg-drawer:not([hidden]) .chg-mobilenav > li:nth-child(5) { animation-delay: 240ms; }
	.chg-drawer:not([hidden]) .chg-mobilenav > li:nth-child(n+6) { animation-delay: 280ms; }
}
@keyframes chg-navlink-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* --- Honeypot --- */
.chg-hp { position: absolute !important; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; margin: 0; }

/* --- Footer --- */
.chg-footer { background: var(--chg-ink); color: color-mix(in srgb, var(--chg-paper) 88%, transparent); margin-block-start: var(--chg-space-2xl); }
.chg-footer a { color: var(--chg-paper); }

.chg-footer__newsletter { background: var(--chg-sea-deep); }
.chg-footer__newsinner {
	display: grid; gap: var(--chg-space-md);
	grid-template-columns: 1.2fr 1fr; align-items: center;
	padding-block: var(--chg-space-lg);
}
@media (max-width: 800px) { .chg-footer__newsinner { grid-template-columns: 1fr; } }
.chg-footer__newstitle { color: var(--chg-paper); margin: 0 0 0.25rem; font-size: var(--chg-text-lg); }
.chg-footer__newslede { margin: 0; color: color-mix(in srgb, var(--chg-paper) 75%, transparent); font-size: var(--chg-text-sm); }
.chg-footer__newsform { display: flex; gap: 0.5rem; position: relative; }
.chg-footer__newsform .chg-input { flex: 1 1 auto; min-inline-size: 0; background: var(--chg-paper); border-color: transparent; }

.chg-footer__main {
	display: grid; gap: var(--chg-space-lg);
	grid-template-columns: 2fr 1fr 1fr;
	padding-block: var(--chg-space-xl);
}
@media (max-width: 800px) { .chg-footer__main { grid-template-columns: 1fr; } }
.chg-footer__tagline { max-inline-size: 34ch; font-size: var(--chg-text-sm); color: color-mix(in srgb, var(--chg-paper) 70%, transparent); }
.chg-footer__coltitle { color: var(--chg-paper); font-size: var(--chg-text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.75rem; }
.chg-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.chg-footer__menu a { text-decoration: none; font-size: var(--chg-text-sm); color: color-mix(in srgb, var(--chg-paper) 80%, transparent); }
.chg-footer__menu a:hover { color: var(--chg-paper); text-decoration: underline; }

.chg-social { list-style: none; display: flex; gap: 0.5rem; margin: var(--chg-space-sm) 0 0; padding: 0; }
.chg-social__link {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 38px; block-size: 38px; border-radius: var(--chg-radius-pill);
	border: 1px solid color-mix(in srgb, var(--chg-paper) 25%, transparent);
	color: var(--chg-paper); transition: background var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease);
}
.chg-social__link:hover { background: var(--chg-sea); border-color: var(--chg-sea); transform: translateY(-2px); }

.chg-footer__legalrow { border-block-start: 1px solid color-mix(in srgb, var(--chg-paper) 12%, transparent); }
.chg-footer__legalinner {
	display: flex; flex-wrap: wrap; gap: var(--chg-space-sm);
	justify-content: space-between; align-items: center;
	padding-block: var(--chg-space-sm);
	font-size: var(--chg-text-xs); color: color-mix(in srgb, var(--chg-paper) 60%, transparent);
}
.chg-footer__legalmenu { list-style: none; display: flex; gap: var(--chg-space-sm); margin: 0; padding: 0; }
.chg-footer__credit {
	margin: 0; margin-inline-start: auto;
	display: flex; align-items: center; gap: 0.5em;
}
.chg-footer__credit-heart { color: var(--chg-coral); }
.chg-footer__credit a {
	color: inherit; text-decoration: underline; text-underline-offset: 2px;
	transition: color var(--chg-dur) var(--chg-ease);
}
.chg-footer__credit a:hover,
.chg-footer__credit a:focus-visible { color: var(--chg-paper); }

/* =========================================================================
 * Feature phase batch 1 — theme toggle + dismissible announcement
 * ===================================================================== */

/* Toggle shows the icon of the mode you'd land in: moon in light, sun in dark.
   Binary only — light is the default for every visitor, no OS following. */
.chg-themetoggle .chg-themetoggle__sun { display: none; }
.chg-themetoggle .chg-themetoggle__moon { display: block; }
:root[data-chg-theme="dark"] .chg-themetoggle .chg-themetoggle__sun { display: block; }
:root[data-chg-theme="dark"] .chg-themetoggle .chg-themetoggle__moon { display: none; }
@media (max-width: 900px) {
	.chg-header__actions .chg-themetoggle { display: none; } /* lives in the menu drawer instead */
}

/* Announcement dismiss control */
.chg-announce__close {
	position: absolute; inset-block-start: 50%; inset-inline-end: 0.5rem;
	translate: 0 -50%;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 28px; block-size: 28px;
	border: 0; border-radius: var(--chg-radius-pill);
	background: transparent; color: inherit; cursor: pointer;
	opacity: 0.7;
}
.chg-announce__close:hover { opacity: 1; background: color-mix(in srgb, var(--chg-paper) 15%, transparent); }
.chg-announce[hidden] { display: none; }

/* =========================================================================
 * Phase 2 — homepage sections
 * ===================================================================== */

.chg-hero { padding-block: var(--chg-space-xl) var(--chg-space-2xl); overflow: clip; }
.chg-hero__inner {
	display: grid; gap: var(--chg-space-lg);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
}
@media (max-width: 900px) { .chg-hero__inner { grid-template-columns: 1fr; } }
.chg-hero__title { font-size: var(--chg-text-hero); margin: 0 0 0.35em; max-inline-size: 12ch; }
.chg-hero__lede { font-size: var(--chg-text-md); color: var(--chg-text-muted); max-inline-size: 46ch; margin: 0 0 var(--chg-space-md); }
.chg-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Collage: three arch-cropped product tiles at staggered heights. */
.chg-hero__collage {
	display: grid; gap: var(--chg-space-sm);
	grid-template-columns: repeat(3, 1fr);
	align-items: end;
}
.chg-hero__tile {
	display: block; overflow: hidden;
	border-radius: 999px 999px var(--chg-radius-lg) var(--chg-radius-lg);
	background: var(--chg-tint-warm);
	transition: transform var(--chg-dur-slow) var(--chg-ease-out);
}
.chg-hero__tile img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.chg-hero__tile--0 { aspect-ratio: 3 / 4.6; }
.chg-hero__tile--1 { aspect-ratio: 3 / 3.6; }
.chg-hero__tile--2 { aspect-ratio: 3 / 4.2; }
@media (hover: hover) { .chg-hero__tile:hover { transform: translateY(-6px); } }
@media (max-width: 900px) { .chg-hero__collage { max-inline-size: 480px; } }

.chg-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--chg-space-sm); margin-block-end: var(--chg-space-md);
}
.chg-section__head h2 { margin: 0; font-size: var(--chg-text-xl); }
.chg-section__more {
	display: inline-flex; align-items: center; gap: 0.35em;
	font-weight: 600; font-size: var(--chg-text-sm); text-decoration: none;
	color: var(--chg-brand-deep); white-space: nowrap;
}
.chg-section__more:hover { text-decoration: underline; }

/* Mission strip — ink panel, identity-constant in both themes */
.chg-mission { background: var(--chg-ink); color: var(--chg-paper); }
.chg-mission__inner { display: grid; gap: var(--chg-space-lg); grid-template-columns: 1fr 1.3fr; align-items: center; }
@media (max-width: 900px) { .chg-mission__inner { grid-template-columns: 1fr; } }
.chg-eyebrow--onink { color: var(--chg-sun); }
.chg-mission__title { color: var(--chg-paper); font-size: var(--chg-text-2xl); margin: 0 0 0.3em; }
.chg-mission__lede { color: color-mix(in srgb, var(--chg-paper) 75%, transparent); max-inline-size: 44ch; margin: 0; }
.chg-mission__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--chg-space-md); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .chg-mission__points { grid-template-columns: 1fr; } }
.chg-mission__points .chg-icon { color: var(--chg-sun); }
.chg-mission__points h3 { color: var(--chg-paper); font-size: var(--chg-text-base); margin: 0.5rem 0 0.25rem; }
.chg-mission__points p { margin: 0; font-size: var(--chg-text-sm); color: color-mix(in srgb, var(--chg-paper) 70%, transparent); }

/* Materials that matter — same 3/4-up pillar grid shape as mission points,
   on the normal page background rather than the ink panel. */
.chg-materials__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--chg-space-lg); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .chg-materials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chg-materials__grid { grid-template-columns: 1fr; } }
.chg-materials__grid .chg-icon { color: var(--chg-brand); }
.chg-materials__grid h3 { font-size: var(--chg-text-base); margin: 0.5rem 0 0.25rem; }
.chg-materials__grid p { margin: 0; font-size: var(--chg-text-sm); color: var(--chg-text-muted); }

/* Customer reviews — real, approved store reviews only (section hides
   itself in front-page.php when there are fewer than 3). */
.chg-reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--chg-space-md); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .chg-reviews__grid { grid-template-columns: 1fr; } }
.chg-reviews__card {
	border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius-lg);
	padding: var(--chg-space-md); background: var(--chg-surface);
}
.chg-reviews__stars { display: flex; gap: 0.1em; margin-block-end: 0.5rem; }
.chg-reviews__stars .chg-icon { color: var(--chg-line); }
.chg-reviews__stars .chg-icon.is-filled { color: var(--chg-sun); fill: currentColor; }
.chg-reviews__text { margin: 0 0 0.8rem; color: var(--chg-text); }
.chg-reviews__meta { margin: 0; font-size: var(--chg-text-sm); color: var(--chg-text-muted); }
.chg-reviews__author { font-weight: 700; color: var(--chg-text); }
.chg-reviews__meta a { color: var(--chg-brand-deep); }

.chg-bundles__lede { margin-block: -0.5rem var(--chg-space-md); }

/* =========================================================================
 * Phase 3 — product cards
 * ===================================================================== */

ul.products {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--chg-space-md);
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* Woo's clearfix pseudo-elements (higher-specificity .woocommerce rules,
   display:table) would become real grid items and hijack the first cell. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
ul.products::before, ul.products::after { display: none !important; content: none; }
/* Woo's layout stylesheet floats loop items at % widths — neutralise inside
   the grid (works whatever .woocommerce wrapper specificity it ships with). */
.woocommerce ul.products li.product.chg-pcard,
.woocommerce-page ul.products li.product.chg-pcard,
ul.products li.chg-pcard {
	float: none; clear: none;
	inline-size: 100%; width: 100%;
	margin: 0; padding: 0;
}

.chg-pcard { position: relative; display: flex; flex-direction: column; }
.chg-pcard__media {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--chg-radius-lg);
	background: var(--chg-tint-warm);
}
.chg-pcard__link { display: block; block-size: 100%; }
.chg-pcard__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.chg-pcard__img--alt {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity var(--chg-dur) var(--chg-ease);
}
@media (hover: hover) and (pointer: fine) {
	.chg-pcard__media:hover .chg-pcard__img--alt { opacity: 1; }
}
.chg-pcard__badges {
	position: absolute; inset-block-start: 0.6rem; inset-inline-start: 0.6rem;
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
}

/* Quick add: revealed on hover/focus for pointers, always present on touch. */
.chg-pcard__quick {
	position: absolute; inset-inline: 0.6rem; inset-block-end: 0.6rem;
}
.chg-pcard__quick .chg-btn,
.chg-pcard__quick a.button {
	inline-size: 100%;
	padding-block: 0.65em;
	font-size: var(--chg-text-xs);
	box-shadow: var(--chg-shadow);
}
@media (hover: hover) and (pointer: fine) {
	.chg-pcard__quick { opacity: 0; translate: 0 6px; transition: opacity var(--chg-dur) var(--chg-ease), translate var(--chg-dur) var(--chg-ease-out); }
	.chg-pcard:hover .chg-pcard__quick,
	.chg-pcard:focus-within .chg-pcard__quick { opacity: 1; translate: 0 0; }
}
/* Woo appends "View cart →" after ajax add — keep the card tidy. */
.chg-pcard .added_to_cart { display: none; }

.chg-pcard__body { padding: 0.75rem 0.25rem 0; }
.chg-pcard__title { margin: 0 0 0.25rem; font-size: var(--chg-text-base); line-height: 1.3; }
.chg-pcard__title a { color: var(--chg-text); text-decoration: none; }
.chg-pcard__title a:hover { color: var(--chg-brand-deep); }
.chg-pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.chg-pcard__swatches { display: inline-flex; align-items: center; gap: 0.3rem; }
.chg-swatchdot {
	inline-size: 12px; block-size: 12px; border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--chg-text) 25%, transparent);
	display: inline-block;
}
.chg-pcard__swatchcount { font-size: var(--chg-text-xs); color: var(--chg-text-muted); }

/* Archive toolbar (count + sorting on one line) */
.chg-archivebar { display: flex; align-items: center; justify-content: space-between; gap: var(--chg-space-sm); margin-block-end: var(--chg-space-md); flex-wrap: wrap; }
.chg-archivebar .woocommerce-result-count { margin: 0; color: var(--chg-text-muted); font-size: var(--chg-text-sm); }
.chg-archivebar .woocommerce-ordering { margin: 0; }
.chg-woo { padding-block: var(--chg-space-md) var(--chg-space-2xl); }
.chg-woo .woocommerce-products-header h1 { font-size: var(--chg-text-2xl); }
.chg-woo .woocommerce-breadcrumb { font-size: var(--chg-text-xs); color: var(--chg-text-muted); margin-block-end: var(--chg-space-xs); }
.chg-woo .woocommerce-breadcrumb a { color: var(--chg-text-muted); }

/* =========================================================================
 * Feature batch 2 — share row + WhatsApp inquiry
 * ===================================================================== */

.chg-share {
	position: relative;
	display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap;
	/* Was margin-block-start + padding-block-start both at --chg-space-sm
	   plus a border, stacking to ~2x the gap every other summary block uses
	   before it. A smaller margin above the divider line + the existing
	   padding below it reads as one proportionate section break instead. */
	margin-block-start: var(--chg-space-xs);
	padding-block-start: var(--chg-space-sm);
	border-block-start: 1px solid var(--chg-line);
}
.chg-share__label { font-size: var(--chg-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--chg-text-muted); margin-inline-end: 0.4rem; }
.chg-share__btn { inline-size: 38px; block-size: 38px; color: var(--chg-text-muted); }
.chg-share__btn:hover { color: var(--chg-text); }
/* Copy button: swaps to a green check while "copied" is showing, via a
   dual-icon + class toggle (same pattern as the theme toggle sun/moon and
   the FAB open/close icons) rather than replacing SVG markup at runtime. */
.chg-share__icon--check { display: none; color: var(--chg-success); }
.chg-share__copybtn.is-copied .chg-share__icon--copy { display: none; }
.chg-share__copybtn.is-copied .chg-share__icon--check { display: inline-flex; }
.chg-share__toast {
	position: absolute; inset-block-start: -0.4rem; inset-inline-start: 0;
	translate: 0 -100%;
	background: var(--chg-ink); color: var(--chg-paper);
	font-size: var(--chg-text-xs); font-weight: 600;
	padding: 0.35em 0.8em; border-radius: var(--chg-radius-pill);
	box-shadow: var(--chg-shadow);
	white-space: nowrap;
	/* JS centers this above whichever button triggered it (inset-inline-start
	   set inline, in px, relative to .chg-share) rather than always sitting
	   over the row's left edge regardless of which button was pressed. */
	transform: translateX(-50%);
}
.chg-share__toast[hidden] { display: none; }

.chg-whatsapp { margin-block-start: var(--chg-space-sm); }
/* Solid-filled like .chg-btn--buy, not outline — this reads as a lesser
   afterthought action right when it matters least: an out-of-stock product
   has no add-to-cart button at all, so this IS the primary (only) CTA. The
   WhatsApp green keeps it visually distinct from the coral buy button
   without demoting it to secondary-button treatment. */
.chg-btn--whatsapp {
	background: #25D366; color: #073B2A;
	border-color: #25D366; /* WhatsApp brand green — recognisable in both themes */
}
.chg-btn--whatsapp .chg-icon { color: #073B2A; }
.chg-btn--whatsapp:hover { background: #1ebd5a; border-color: #1ebd5a; color: #073B2A; }
.chg-btn--whatsapp:hover .chg-icon { color: #073B2A; }
.chg-whatsapp__note { margin: 0.4rem 0 0; font-size: var(--chg-text-xs); color: var(--chg-text-muted); }

/* =========================================================================
 * Feature batch 3 — wishlist, PDP accordions, sticky bar, recently viewed
 * ===================================================================== */

/* Wishlist heart on cards */
.chg-pcard__wish { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; z-index: 2; }

/* Quick-view trigger — stacks below the wishlist heart, same pill-button
   language, revealed with the rest of the hover cluster on pointer devices. */
.chg-pcard__quickview {
	position: absolute; inset-block-start: calc(0.6rem + 38px + 0.4rem); inset-inline-end: 0.6rem; z-index: 2;
	inline-size: 38px; block-size: 38px; border-radius: var(--chg-radius-pill);
	background: color-mix(in srgb, var(--chg-surface) 82%, transparent);
	backdrop-filter: blur(6px); box-shadow: var(--chg-shadow-sm);
	transition: transform var(--chg-dur-fast) var(--chg-ease), background var(--chg-dur) var(--chg-ease);
}
.chg-pcard__quickview:hover { transform: scale(1.08); background: var(--chg-surface); }
.chg-pcard__quickview:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
	.chg-pcard__quickview { opacity: 0; translate: 0 -6px; transition: opacity var(--chg-dur) var(--chg-ease), translate var(--chg-dur) var(--chg-ease-out), transform var(--chg-dur-fast) var(--chg-ease), background var(--chg-dur) var(--chg-ease); }
	.chg-pcard:hover .chg-pcard__quickview, .chg-pcard:focus-within .chg-pcard__quickview { opacity: 1; translate: none; }
}

/* Quick-view modal — same centered dialog + backdrop shape as
   .chg-searchoverlay, sized for a two-up product preview. */
.chg-quickview-overlay {
	position: fixed; inset-block-start: var(--chg-adminbar); inset-inline: 0; inset-block-end: 0; z-index: 200;
	background: color-mix(in srgb, var(--chg-ink) 52%, transparent);
	backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
	display: flex; justify-content: center; align-items: center;
	padding: var(--chg-gutter);
	animation: chg-fade var(--chg-dur-fast) var(--chg-ease);
}
.chg-quickview-overlay[hidden] { display: none; }
.chg-quickview__panel {
	position: relative; inline-size: 100%; max-inline-size: 780px;
	background: var(--chg-surface); border: 1px solid var(--chg-line);
	border-radius: var(--chg-radius-lg); box-shadow: var(--chg-shadow-lg);
	max-block-size: min(85vh, 620px); overflow-y: auto;
	animation: chg-search-in var(--chg-dur) var(--chg-ease-out);
}
.chg-quickview__close { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; z-index: 2; background: var(--chg-surface); box-shadow: var(--chg-shadow-sm); }
.chg-quickview__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--chg-space-lg); padding: var(--chg-space-lg); }
@media (max-width: 640px) { .chg-quickview__content { grid-template-columns: 1fr; padding: var(--chg-space-md); } }
.chg-quickview__media { aspect-ratio: 4/5; border-radius: var(--chg-radius-sm); overflow: hidden; background: var(--chg-tint-warm); }
.chg-quickview__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.chg-quickview__title { margin: 0 0 0.4em; font-size: var(--chg-text-xl); max-inline-size: 20ch; }
.chg-quickview__price { display: block; font-size: var(--chg-text-lg); margin-block-end: 0.6em; }
.chg-quickview__desc { color: var(--chg-text-muted); margin-block-end: 0.8em; }
.chg-quickview__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 0.8em; }
.chg-quickview__loading { display: grid; gap: var(--chg-space-md); grid-template-columns: 1fr 1fr; padding: var(--chg-space-lg); }
.chg-quickview__loading .chg-skel:first-child { aspect-ratio: 4/5; }
.chg-quickview__loading .chg-skel:last-child { block-size: 220px; }
@media (max-width: 640px) { .chg-quickview__loading { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .chg-quickview-overlay, .chg-quickview__panel { animation: none; } }

/* Delivery estimate line under the buy button */
.chg-delivery-estimate { display: flex; align-items: center; gap: 0.5em; color: var(--chg-text-muted); font-size: var(--chg-text-sm); margin-block: var(--chg-space-sm) 0; }
.chg-delivery-estimate .chg-icon { flex: none; color: var(--chg-brand); }

/* WooCommerce core's SKU/category meta row (priority 40) had zero theme
   styling — the only "naked" block in the summary column, breaking the
   --chg-space-sm rhythm every sibling above/below it uses. */
.product_meta {
	margin-block-start: var(--chg-space-sm);
	font-size: var(--chg-text-sm); color: var(--chg-text-muted);
}
.product_meta > span { display: block; margin-block-end: 0.2rem; }
.product_meta a { color: var(--chg-brand-deep); }

/* Cookie notice bar */
.chg-cookienotice {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 150;
	background: var(--chg-ink); color: var(--chg-paper);
	box-shadow: var(--chg-shadow-lg);
	animation: chg-cookienotice-in var(--chg-dur) var(--chg-ease-out);
}
.chg-cookienotice[hidden] { display: none; }
@keyframes chg-cookienotice-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .chg-cookienotice { animation: none; } }
.chg-cookienotice__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--chg-space-md);
	padding-block: var(--chg-space-sm);
}
.chg-cookienotice__text { margin: 0; font-size: var(--chg-text-sm); max-inline-size: 68ch; }
.chg-cookienotice__accept { flex: none; }
.chg-wish {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 38px; block-size: 38px;
	border: 0; border-radius: var(--chg-radius-pill);
	background: color-mix(in srgb, var(--chg-surface) 82%, transparent);
	backdrop-filter: blur(6px);
	color: var(--chg-text); cursor: pointer;
	box-shadow: var(--chg-shadow-sm);
	transition: transform var(--chg-dur-fast) var(--chg-ease), color var(--chg-dur) var(--chg-ease), background var(--chg-dur) var(--chg-ease);
}
.chg-wish:hover { transform: scale(1.08); }
.chg-wish:active { transform: scale(0.94); }
.chg-wish .chg-icon { fill: transparent; transition: fill var(--chg-dur) var(--chg-ease); }
.chg-wish.is-saved { color: var(--chg-cta); }
.chg-wish.is-saved .chg-icon { fill: currentColor; }
.chg-wish__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* PDP variant sits inline with a visible label */
.chg-wish--pdp {
	inline-size: auto; block-size: auto; gap: 0.5em;
	padding: 0.6em 1.1em; background: transparent;
	border: 1.5px solid var(--chg-line); backdrop-filter: none;
}
.chg-wish--pdp .chg-wish__label { position: static; width: auto; height: auto; clip: auto; font-size: var(--chg-text-sm); font-weight: 600; }
.chg-wish--pdp:hover { border-color: var(--chg-cta); color: var(--chg-cta); transform: none; }
.chg-pdp-secondary { display: flex; gap: 0.5rem; margin-block-start: var(--chg-space-sm); flex-wrap: wrap; }

/* Wishlist page */
.chg-wishlist__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--chg-space-md); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.chg-wishlist__grid > * { list-style: none; }
.chg-wishlist__empty { font-size: var(--chg-text-md); color: var(--chg-text-muted); padding-block: var(--chg-space-lg); }
.chg-wishlist__loading { display: grid; gap: var(--chg-space-md); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* [hidden] and .chg-wishlist__grid/__loading are equal specificity (one
   attribute selector vs one class), and this file loads after the UA
   stylesheet, so without this override `display: grid` always won the tie —
   the loading skeleton stayed on-screen forever regardless of the `hidden`
   attribute theme.js toggles once real items arrive. */
.chg-wishlist__grid[hidden], .chg-wishlist__loading[hidden] { display: none; }
.chg-skel { display: block; aspect-ratio: 4 / 5; border-radius: var(--chg-radius-lg); background: linear-gradient(100deg, var(--chg-tint-warm) 30%, color-mix(in srgb, var(--chg-tint-warm) 60%, var(--chg-surface)) 50%, var(--chg-tint-warm) 70%); background-size: 200% 100%; animation: chg-shimmer 1.3s linear infinite; }
@keyframes chg-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .chg-skel { animation: none; } }

/* PDP accordions (native details/summary) */
.chg-accordion { margin-block-start: var(--chg-space-lg); border-block-start: 1px solid var(--chg-line); }
.chg-accordion__item { border-block-end: 1px solid var(--chg-line); }
.chg-accordion__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding-block: var(--chg-space-sm); cursor: pointer; list-style: none;
	font-family: var(--chg-font-display); font-weight: 700; font-size: var(--chg-text-md);
	color: var(--chg-heading);
}
.chg-accordion__summary::-webkit-details-marker { display: none; }
.chg-accordion__summary:focus-visible { outline: 3px solid var(--chg-focus); outline-offset: 2px; }
.chg-accordion__chev { flex: none; transition: transform var(--chg-dur) var(--chg-ease); color: var(--chg-text-muted); }
.chg-accordion__item[open] .chg-accordion__chev { transform: rotate(180deg); }
.chg-accordion__body { padding-block-end: var(--chg-space-md); color: var(--chg-text-muted); }
.chg-accordion__body > :first-child { margin-block-start: 0; }
.chg-deliverylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.chg-deliverylist li { display: flex; gap: 0.5rem; align-items: center; }
.chg-deliverylist__icon { flex: none; color: var(--chg-brand); }

/* Sticky mobile purchase bar */
.chg-stickybar {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 150;
	background: color-mix(in srgb, var(--chg-surface) 94%, transparent);
	backdrop-filter: blur(12px);
	border-block-start: 1px solid var(--chg-line);
	box-shadow: 0 -6px 24px rgb(0 0 0 / 0.12);
	padding-block-end: env(safe-area-inset-bottom, 0);
	animation: chg-sticky-in var(--chg-dur) var(--chg-ease-out);
}
.chg-stickybar[hidden] { display: none; }
@keyframes chg-sticky-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .chg-stickybar { animation: none; } }
.chg-stickybar__inner { display: flex; align-items: center; gap: var(--chg-space-sm); padding-block: 0.6rem; }
.chg-stickybar__info { display: flex; flex-direction: column; min-inline-size: 0; flex: 1 1 auto; }
.chg-stickybar__title { font-weight: 600; font-size: var(--chg-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chg-stickybar__price { font-family: var(--chg-font-display); font-weight: 700; }
.chg-stickybar__price .price { margin: 0; }
.chg-stickybar__btn { flex: none; }
/* Desktop keeps the in-page button; sticky bar is a mobile affordance. */
@media (min-width: 768px) { .chg-stickybar { display: none !important; } }

/* Horizontal product rail (recently viewed) */
.chg-recent { padding-block: var(--chg-space-xl); border-block-start: 1px solid var(--chg-line); }
.chg-recent__title { font-size: var(--chg-text-xl); margin-block-end: var(--chg-space-md); }
.chg-rail {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 1fr);
	gap: var(--chg-space-md);
	overflow-x: auto; scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-block-end: var(--chg-space-xs);
	scrollbar-width: thin;
}
.chg-rail > * { scroll-snap-align: start; }
@media (min-width: 1024px) {
	.chg-rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}

/* Shop-page category showcase — swipeable rail, each card tinted with its
   own category accent (same --chg-cat-* system as the mega menu/masthead). */
.chg-catrail { padding-block: var(--chg-space-lg) var(--chg-space-md); }
.chg-catrail__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--chg-space-md); margin-block-end: var(--chg-space-sm); }
.chg-catrail__title { font-size: var(--chg-text-xl); margin: 0; }
.chg-catrail__track {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: minmax(150px, 30vw);
	gap: var(--chg-space-sm);
	overflow-x: auto; scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-inline: var(--chg-gutter);
	padding-block-end: var(--chg-space-xs);
}
.chg-catrail__card {
	scroll-snap-align: start;
	display: block; text-decoration: none; color: var(--chg-text);
	--chg-accent: var(--chg-brand); /* fallback until a data-cat match below applies */
}
.chg-catrail__media {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 3/4; border-radius: var(--chg-radius-lg);
	background: var(--chg-accent);
}
.chg-catrail__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--chg-dur-slow) var(--chg-ease-out); }
.chg-catrail__card:hover .chg-catrail__media img { transform: scale(1.06); }
.chg-catrail__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--chg-accent) 75%, transparent) 0%, transparent 55%);
	mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { .chg-catrail__overlay { mix-blend-mode: normal; opacity: 0.55; } }
:root[data-chg-theme="dark"] .chg-catrail__overlay { mix-blend-mode: normal; opacity: 0.55; }
.chg-catrail__name { display: block; margin-block-start: 0.6rem; font-weight: 700; font-size: var(--chg-text-sm); }
.chg-catrail__count { display: block; font-size: var(--chg-text-xs); color: var(--chg-text-muted); }
@media (min-width: 640px) { .chg-catrail__track { grid-auto-columns: minmax(180px, 22vw); } }
/* Switches from a swipeable strip to a plain wrapping grid — fully "boxed"
   inside the safe-area padding, nothing bleeding to the viewport edge —
   once there's realistically enough room for it. Was gated at 1024px, which
   left ordinary ~900-1023px laptop/half-split widths showing a partially
   cropped, edge-bleeding strip instead of the original static grid's look. */
@media (min-width: 860px) {
	.chg-catrail__track { grid-auto-columns: unset; grid-template-columns: repeat(5, 1fr); overflow: visible; padding-inline: 0; }
	.chg-catrail .chg-container > .chg-catrail__title { margin-block-end: var(--chg-space-md); }
}

/* .chg-catrail--wrap (homepage only) — the original static grid this
   replaced never scrolled at ANY width, it just wrapped to fewer columns
   (5 → 3 → 2), always fully boxed inside the safe-area padding. Override
   the shared swipeable-strip mechanics unconditionally so the homepage
   keeps that exact non-scrolling behaviour regardless of viewport, while
   the shop page (no --wrap class) keeps its swipe-on-mobile rail. The
   track itself (unlike .chg-catrail__head) isn't wrapped in .chg-container,
   so it needs the same width/margin/padding primitives applied directly
   or it bleeds edge-to-edge instead of sitting in the safe area. */
.chg-catrail--wrap .chg-catrail__track {
	grid-auto-flow: unset; grid-auto-columns: unset; grid-template-columns: repeat(5, 1fr);
	overflow: visible;
	width: 100%; max-width: var(--chg-wide); margin-inline: auto; padding-inline: var(--chg-gutter);
}
@media (max-width: 1000px) { .chg-catrail--wrap .chg-catrail__track { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .chg-catrail--wrap .chg-catrail__track { grid-template-columns: repeat(2, 1fr); } }

/* Each card tints its accent from the category system (mirrors .chg-mega). */
.chg-catrail__card[data-cat="drinkware"]       { --chg-accent: var(--chg-cat-drinkware); }
.chg-catrail__card[data-cat="kitchen-products"]{ --chg-accent: var(--chg-cat-kitchen); }
.chg-catrail__card[data-cat="personal-care"]   { --chg-accent: var(--chg-cat-personal); }
.chg-catrail__card[data-cat="straws"],
.chg-catrail__card[data-cat="straws-cutlery"]  { --chg-accent: var(--chg-cat-straws); }
.chg-catrail__card[data-cat="bundles"]         { --chg-accent: var(--chg-cat-bundles); }

/* =========================================================================
 * Category card layouts (admin-selectable — inc/admin/settings.php
 * shop_cat_style). Base rules above already ARE "caption-below" (text in
 * normal flow under the image); every other style is an override scoped
 * under .chg-catrail[data-catstyle="..."].
 * ===================================================================== */

/* Overlay bottom — name/count lift out of flow onto the image itself. */
.chg-catrail[data-catstyle="overlay-bottom"] .chg-catrail__card { position: relative; }
.chg-catrail[data-catstyle="overlay-bottom"] .chg-catrail__name,
.chg-catrail[data-catstyle="overlay-bottom"] .chg-catrail__count {
	position: absolute; inset-inline: 0.9rem; margin: 0; color: #fff; z-index: 2;
}
.chg-catrail[data-catstyle="overlay-bottom"] .chg-catrail__name { inset-block-end: 2.1rem; }
.chg-catrail[data-catstyle="overlay-bottom"] .chg-catrail__count { inset-block-end: 0.8rem; color: rgba(255,255,255,0.85); }
.chg-catrail[data-catstyle="overlay-bottom"] .chg-catrail__overlay { background: linear-gradient(to top, color-mix(in srgb, var(--chg-accent) 85%, black 15%) 0%, transparent 65%); opacity: 0.9; }

/* Centered badge — a pill with the name floats mid-image; count is dropped. */
.chg-catrail[data-catstyle="centered-badge"] .chg-catrail__card { position: relative; }
.chg-catrail[data-catstyle="centered-badge"] .chg-catrail__name {
	position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
	margin: 0; background: var(--chg-surface); color: var(--chg-text);
	padding: 0.5em 1.1em; border-radius: var(--chg-radius-pill); font-size: var(--chg-text-sm);
	box-shadow: var(--chg-shadow-sm); white-space: nowrap; z-index: 2; max-inline-size: 90%; overflow: hidden; text-overflow: ellipsis;
}
.chg-catrail[data-catstyle="centered-badge"] .chg-catrail__count { display: none; }

/* Horizontal split — small square image on the left (spanning both text
   rows), category name above / product count below on the right (not
   side-by-side), each item its own rounded color-tinted card so items
   read as separate rather than one continuous row. Cards size to their
   own content instead of sharing the other 5 styles' fixed column width,
   at every breakpoint including desktop (where the other styles switch to
   an equal-fifths grid that would defeat "fit to content"). */
.chg-catrail[data-catstyle="horizontal"] .chg-catrail__track {
	grid-auto-flow: column; grid-auto-columns: max-content; grid-template-columns: none;
	overflow-x: auto; padding-inline: var(--chg-gutter);
}
.chg-catrail[data-catstyle="horizontal"] .chg-catrail__card {
	display: grid; grid-template-columns: 64px auto; grid-template-rows: auto auto;
	column-gap: 0.85rem; align-items: center;
	background: color-mix(in srgb, var(--chg-accent) 16%, var(--chg-surface));
	border-radius: var(--chg-radius-lg);
	padding: 0.6rem 1.25rem 0.6rem 0.6rem;
	inline-size: max-content;
	transition: background var(--chg-dur) var(--chg-ease);
}
.chg-catrail[data-catstyle="horizontal"] .chg-catrail__card:hover { background: color-mix(in srgb, var(--chg-accent) 26%, var(--chg-surface)); }
.chg-catrail[data-catstyle="horizontal"] .chg-catrail__media { grid-column: 1; grid-row: 1 / 3; inline-size: 64px; aspect-ratio: 1; border-radius: var(--chg-radius-sm); }
.chg-catrail[data-catstyle="horizontal"] .chg-catrail__name { grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap; }
.chg-catrail[data-catstyle="horizontal"] .chg-catrail__count { grid-column: 2; grid-row: 2; margin: 0; white-space: nowrap; }

/* Minimal outline — no photo at all, a quiet bordered card. */
.chg-catrail[data-catstyle="minimal-outline"] .chg-catrail__media { display: none; }
.chg-catrail[data-catstyle="minimal-outline"] .chg-catrail__card {
	display: grid; place-items: center; text-align: center; gap: 0.3rem;
	aspect-ratio: 3/4; border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius-lg);
	padding: var(--chg-space-md); transition: border-color var(--chg-dur) var(--chg-ease);
}
.chg-catrail[data-catstyle="minimal-outline"] .chg-catrail__card:hover { border-color: var(--chg-accent); }
.chg-catrail[data-catstyle="minimal-outline"] .chg-catrail__name { margin: 0; color: var(--chg-accent); font-size: var(--chg-text-md); font-family: var(--chg-font-display); font-weight: 700; }

/* Color block — solid accent card, small circular image inset, white text. */
.chg-catrail[data-catstyle="color-block"] .chg-catrail__card {
	position: relative; display: block; aspect-ratio: 3/4;
	border-radius: var(--chg-radius-lg); background: var(--chg-accent);
	padding: var(--chg-space-md); color: #fff;
}
.chg-catrail[data-catstyle="color-block"] .chg-catrail__media {
	position: absolute; inset-block-start: var(--chg-space-md); inset-inline-start: var(--chg-space-md);
	inline-size: 30%; aspect-ratio: 1; border-radius: 50%; box-shadow: var(--chg-shadow-sm);
}
.chg-catrail[data-catstyle="color-block"] .chg-catrail__overlay { display: none; }
.chg-catrail[data-catstyle="color-block"] .chg-catrail__name,
.chg-catrail[data-catstyle="color-block"] .chg-catrail__count { position: absolute; inset-inline: var(--chg-space-md); margin: 0; color: #fff; }
.chg-catrail[data-catstyle="color-block"] .chg-catrail__name { inset-block-end: 2.6rem; font-size: var(--chg-text-md); }
.chg-catrail[data-catstyle="color-block"] .chg-catrail__count { inset-block-end: var(--chg-space-md); color: rgba(255,255,255,0.8); }

/* =========================================================================
 * Visual reconstruction batch 1 — blended type + accent utilities
 * ===================================================================== */

/*
 * Campaign display type — the Dripple half of the fusion: heavy, tight,
 * UPPERCASE, controlled line breaks. Used for hero + big campaign headings
 * only. Section headings stay sentence-case (the Hydro Flask half).
 */
.chg-display {
	font-family: var(--chg-font-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.chg-display--tight { letter-spacing: -0.025em; }

/* Overline / eyebrow already exists; add a numeric-statistic + label style
   matching the references' confident retail numerals. */
.chg-stat { font-family: var(--chg-font-display); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chg-label { font-size: var(--chg-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/*
 * Category accent binding. Each product-category context sets --chg-accent,
 * and accent-aware components (eyebrows, section rules, category mastheads,
 * hover states) pick it up — one system, many hues.
 */
.tax-product_cat.term-drinkware,
.tax-product_cat.term-drinkware-2 { --chg-accent: var(--chg-cat-drinkware); }
.tax-product_cat.term-kitchen-products { --chg-accent: var(--chg-cat-kitchen); }
.tax-product_cat.term-personal-care { --chg-accent: var(--chg-cat-personal); }
.tax-product_cat.term-straws,
.tax-product_cat.term-straws-cutlery { --chg-accent: var(--chg-cat-straws); }
.tax-product_cat.term-bundles { --chg-accent: var(--chg-cat-bundles); }

/* Accent-driven eyebrow (overrides the fixed brand colour when in context). */
.chg-eyebrow { color: var(--chg-accent); }

/* =========================================================================
 * Visual batch 2 — mega menu
 * ===================================================================== */

/* Override the Phase-1 `.chg-nav__menu > li { position: relative }` so the
   mega anchors to the header (full width), not the narrow list item. */
.chg-nav__menu > li.chg-nav__item--mega { position: static; }
.chg-mega {
	position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 90;
	background: var(--chg-surface);
	border-block-start: 1px solid var(--chg-line);
	box-shadow: var(--chg-shadow-lg);
	opacity: 0; visibility: hidden; translate: 0 8px;
	transition: opacity var(--chg-dur) var(--chg-ease), translate var(--chg-dur) var(--chg-ease-out), visibility 0s linear var(--chg-dur);
}
.chg-nav__item--mega:hover > .chg-mega,
.chg-nav__item--mega:focus-within > .chg-mega,
.chg-mega.is-open {
	opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
}
.chg-mega__inner {
	display: grid; grid-template-columns: 0.9fr 1.6fr 1fr; gap: var(--chg-space-lg);
	padding-block: var(--chg-space-lg);
	align-items: start;
}
.chg-mega__heading {
	font-family: var(--chg-font-display); font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.04em; font-size: var(--chg-text-xs); color: var(--chg-text-muted);
	margin: 0 0 var(--chg-space-sm);
}
.chg-mega__col--links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.chg-mega__col--links a { color: var(--chg-text); text-decoration: none; font-weight: 600; font-size: var(--chg-text-base); }
.chg-mega__col--links a:hover { color: var(--chg-accent); }
.chg-mega__all { color: var(--chg-accent) !important; }

.chg-mega__prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--chg-space-sm); }
.chg-mega__prod { display: block; text-decoration: none; color: var(--chg-text); }
.chg-mega__prodimg { display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--chg-radius-sm); background: var(--chg-tint-warm); margin-block-end: 0.5rem; }
.chg-mega__prodimg img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--chg-dur-slow) var(--chg-ease-out); }
.chg-mega__prod:hover .chg-mega__prodimg img { transform: scale(1.06); }
.chg-mega__prodname { display: block; font-size: var(--chg-text-sm); font-weight: 600; line-height: 1.25; }
.chg-mega__prodprice { display: block; font-size: var(--chg-text-sm); }

.chg-mega__campaign {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: 4/3; border-radius: var(--chg-radius-lg);
	background: var(--chg-accent);
}
.chg-mega__campaign img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--chg-dur-slow) var(--chg-ease-out); }
.chg-mega__campaign:hover img { transform: scale(1.05); }
.chg-mega__campaigncta {
	position: absolute; inset-inline: 0.9rem; inset-block-end: 0.9rem;
	display: inline-flex; align-items: center; gap: 0.3em;
	background: var(--chg-surface); color: var(--chg-text);
	padding: 0.5em 1em; border-radius: var(--chg-radius-xs);
	font-family: var(--chg-font-display); font-weight: 800; text-transform: uppercase;
	font-size: var(--chg-text-xs); letter-spacing: 0.04em;
	box-shadow: var(--chg-shadow-sm);
}

/* Each mega tints its accent from the category system. */
.chg-mega[data-cat="drinkware"]      { --chg-accent: var(--chg-cat-drinkware); }
.chg-mega[data-cat="kitchen-products"]{ --chg-accent: var(--chg-cat-kitchen); }
.chg-mega[data-cat="personal-care"]  { --chg-accent: var(--chg-cat-personal); }
.chg-mega[data-cat="straws"],
.chg-mega[data-cat="straws-cutlery"] { --chg-accent: var(--chg-cat-straws); }
.chg-mega[data-cat="bundles"]        { --chg-accent: var(--chg-cat-bundles); }

@media (max-width: 900px) { .chg-mega, .chg-nav__mega-toggle { display: none; } }

/* --- Menu-editor controls (Appearance → Menus, per item) ---
   .chg-menuitem--hide-mobile / --hide-desktop / --button / the badge span
   are applied via nav_menu_css_class / nav_menu_item_title from item
   postmeta (inc/admin/nav-menu-controls.php) — they land on whichever <li>
   a given menu location renders (desktop mega nav, mobile drawer, footer),
   so one control in wp-admin covers every place that menu appears. The
   980px/989px split mirrors the existing burger↔nav breakpoint: the mobile
   drawer only ever renders below it, the desktop nav only at/above it, so a
   flat display:none per class correctly targets the right render context. */
@media (max-width: 989px) { .chg-menuitem--hide-mobile { display: none !important; } }
@media (min-width: 990px) { .chg-menuitem--hide-desktop { display: none !important; } }

.chg-menuitem__badge {
	display: inline-block; margin-inline-start: 0.35em;
	padding: 0.1em 0.5em; border-radius: 999px;
	font-size: 0.65em; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	background: var(--chg-brand); color: var(--chg-paper); vertical-align: 0.15em;
}
.chg-menuitem--button > .chg-nav__link {
	padding-inline: 0.9rem; border-radius: var(--chg-radius); color: var(--chg-paper);
	background: var(--chg-brand); transition: background var(--chg-dur) var(--chg-ease);
}
.chg-menuitem--button > .chg-nav__link::after { display: none; }
.chg-menuitem--button > .chg-nav__link:hover,
.chg-menuitem--button > .chg-nav__link:focus-visible { background: var(--chg-brand-deep); }
.chg-menuitem--button > .chg-nav__link .chg-menuitem__badge { background: var(--chg-paper); color: var(--chg-brand-deep); }
.chg-mobilenav > li.chg-menuitem--button > a { font-weight: 700; color: var(--chg-brand); }

/* =========================================================================
 * Visual batch 3 — homepage art-direction
 * ===================================================================== */

/* Hero: saturated campaign colour-field behind the collage (Hydro Flask
   colour-blocking) with an offset ink panel behind the type (layering). */
.chg-hero { position: relative; }
.chg-hero__collage { position: relative; }
.chg-hero__collage::before {
	content: ""; position: absolute; z-index: -1;
	inset-block: -6% -6%; inset-inline-start: 12%; inset-inline-end: -12%;
	background: linear-gradient(150deg, var(--chg-cat-drinkware), var(--chg-blue-deep));
	border-radius: var(--chg-radius-lg);
	opacity: 0.16;
}
@media (max-width: 900px) { .chg-hero__collage::before { inset-inline-end: -6%; } }

/* Editorial alternating module — oversized image + type, colour-blocked. */
.chg-editorial__inner {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--chg-space-2xl);
	align-items: center;
}
@media (max-width: 900px) { .chg-editorial__inner { grid-template-columns: 1fr; gap: var(--chg-space-lg); } }
.chg-editorial__media {
	position: relative; overflow: hidden;
	aspect-ratio: 3/2; border-radius: var(--chg-radius-lg);
	background: var(--chg-cat-drinkware);
}
.chg-editorial__media::after {
	content: ""; position: absolute; inset-block-end: -18%; inset-inline-start: -8%;
	inline-size: 46%; aspect-ratio: 1; border-radius: 50%;
	background: var(--chg-sun); opacity: 0.9; mix-blend-mode: multiply; z-index: 0;
}
.chg-editorial__media img { position: relative; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; }
.chg-editorial__title { font-size: var(--chg-text-2xl); margin: 0.2em 0 0.3em; max-inline-size: 14ch; }
/* Reverse every alternate editorial block if more are added later. */
.chg-editorial:nth-of-type(even) .chg-editorial__media { order: 2; }

/* Spotlight — alternating category-promo banners (razor, cutlery, etc.),
   same alternating-module shape as Editorial but accent-tinted per category
   via data-cat instead of a fixed drinkware/sun color-block. */
.chg-spotlight__inner {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--chg-space-2xl);
	align-items: center;
}
@media (max-width: 900px) { .chg-spotlight__inner { grid-template-columns: 1fr; gap: var(--chg-space-lg); } }
.chg-spotlight__media {
	position: relative; overflow: hidden;
	aspect-ratio: 3/2; border-radius: var(--chg-radius-lg);
	background: var(--chg-accent);
}
.chg-spotlight__media::after {
	content: ""; position: absolute; inset-block-end: -18%; inset-inline-end: -8%;
	inline-size: 46%; aspect-ratio: 1; border-radius: 50%;
	background: var(--chg-accent); opacity: 0.35; mix-blend-mode: multiply; z-index: 0;
}
.chg-spotlight__media img { position: relative; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; }
.chg-spotlight__title { font-size: var(--chg-text-2xl); margin: 0.2em 0 0.3em; max-inline-size: 16ch; }
.chg-spotlight--flip .chg-spotlight__media { order: 2; }
.chg-spotlight[data-cat="personal-care"]   { --chg-accent: var(--chg-cat-personal); }
.chg-spotlight[data-cat="straws"],
.chg-spotlight[data-cat="straws-cutlery"]  { --chg-accent: var(--chg-cat-straws); }
.chg-spotlight[data-cat="drinkware"]       { --chg-accent: var(--chg-cat-drinkware); }
.chg-spotlight[data-cat="kitchen-products"]{ --chg-accent: var(--chg-cat-kitchen); }
.chg-spotlight[data-cat="bundles"]         { --chg-accent: var(--chg-cat-bundles); }

/* Follow/Instagram grid — real product imagery standing in for social post
   thumbnails (no fake placeholder content), each tile opening the real
   profile in a new tab; a centered icon on hover signals it's a link out. */
.chg-instagrid__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--chg-space-sm); }
@media (max-width: 900px) { .chg-instagrid__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .chg-instagrid__grid { grid-template-columns: repeat(2, 1fr); } }
.chg-instagrid__item a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--chg-radius-sm); }
.chg-instagrid__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--chg-dur-slow) var(--chg-ease-out); }
.chg-instagrid__overlay {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: color-mix(in srgb, var(--chg-ink) 45%, transparent);
	color: var(--chg-paper); opacity: 0; transition: opacity var(--chg-dur) var(--chg-ease);
}
@media (hover: hover) {
	.chg-instagrid__item a:hover img { transform: scale(1.06); }
	.chg-instagrid__item a:hover .chg-instagrid__overlay { opacity: 1; }
}

/* Numbered steps — big editorial numerals, accent-tinted per step. */
.chg-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--chg-space-lg); grid-template-columns: repeat(3, 1fr); counter-reset: none; }
@media (max-width: 800px) { .chg-steps__list { grid-template-columns: 1fr; gap: var(--chg-space-md); } }
.chg-steps__item { position: relative; padding-block-start: var(--chg-space-sm); border-block-start: 3px solid var(--chg-accent); }
.chg-steps__item[data-cat="drinkware"] { --chg-accent: var(--chg-cat-drinkware); }
.chg-steps__item[data-cat="kitchen"]   { --chg-accent: var(--chg-cat-kitchen); }
.chg-steps__item[data-cat="bundles"]   { --chg-accent: var(--chg-cat-bundles); }
.chg-steps__num { display: block; font-size: clamp(2.5rem, 5vw, 4rem); color: var(--chg-accent); margin-block-end: 0.2rem; }
.chg-steps__title { font-size: var(--chg-text-md); margin: 0 0 0.35rem; }
.chg-steps__item p { margin: 0; color: var(--chg-text-muted); font-size: var(--chg-text-sm); }

/* =========================================================================
 * Visual batch 4 — archive mastheads (colour-blocked)
 * ===================================================================== */

.chg-masthead {
	position: relative;
	background: var(--chg-accent);
	color: var(--chg-on-brand);
	margin-block-end: var(--chg-space-lg);
	overflow: hidden;
}
/* Category accent binding for the masthead itself (body class covers the page,
   but the masthead sets it directly too so it's robust on the Shop page). */
.chg-masthead[data-cat="drinkware"]       { --chg-accent: var(--chg-cat-drinkware); }
.chg-masthead[data-cat="kitchen-products"]{ --chg-accent: var(--chg-cat-kitchen); }
.chg-masthead[data-cat="personal-care"]   { --chg-accent: var(--chg-cat-personal); }
.chg-masthead[data-cat="straws"],
.chg-masthead[data-cat="straws-cutlery"]  { --chg-accent: var(--chg-cat-straws); }
.chg-masthead[data-cat="bundles"]         { --chg-accent: var(--chg-cat-bundles); }

.chg-masthead__inner {
	display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--chg-space-lg);
	align-items: center;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	min-block-size: 300px;
}
.chg-masthead:not(.chg-masthead--image) .chg-masthead__inner { grid-template-columns: 1fr; }
@media (max-width: 800px) { .chg-masthead__inner { grid-template-columns: 1fr; } }

.chg-masthead__copy { position: relative; z-index: 2; }
.chg-masthead .chg-eyebrow { color: color-mix(in srgb, var(--chg-on-brand) 80%, transparent); }
.chg-masthead__title { color: var(--chg-on-brand); font-size: var(--chg-text-2xl); margin: 0 0 0.3em; }
.chg-masthead__desc { color: color-mix(in srgb, var(--chg-on-brand) 88%, transparent); max-inline-size: 52ch; }
.chg-masthead__count { color: color-mix(in srgb, var(--chg-on-brand) 75%, transparent); margin-block-start: var(--chg-space-sm); }

.chg-masthead__crumbs { margin-block-end: var(--chg-space-sm); }
.chg-masthead__crumbs .woocommerce-breadcrumb {
	color: color-mix(in srgb, var(--chg-on-brand) 70%, transparent);
	font-size: var(--chg-text-xs); margin: 0;
}
.chg-masthead__crumbs a { color: color-mix(in srgb, var(--chg-on-brand) 85%, transparent); text-decoration: none; }
.chg-masthead__crumbs a:hover { color: var(--chg-on-brand); }

.chg-masthead__subcats { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: var(--chg-space-md) 0 0; padding: 0; }
.chg-masthead__subcats a {
	display: inline-block; padding: 0.4em 1em;
	background: color-mix(in srgb, var(--chg-on-brand) 14%, transparent);
	color: var(--chg-on-brand); text-decoration: none;
	border-radius: var(--chg-radius-pill); font-size: var(--chg-text-sm); font-weight: 600;
	transition: background var(--chg-dur) var(--chg-ease);
}
.chg-masthead__subcats a:hover { background: color-mix(in srgb, var(--chg-on-brand) 26%, transparent); }

.chg-masthead__media {
	position: relative; z-index: 1;
	aspect-ratio: 4/3; border-radius: var(--chg-radius-lg); overflow: hidden;
	box-shadow: var(--chg-shadow-lg);
}
.chg-masthead__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Result count + ordering share the archive toolbar line. */
.chg-archivebar .woocommerce-ordering select { padding-block: 0.5em; }

/* =========================================================================
 * Visual batch 5 — circular colour swatches
 * ===================================================================== */

.chg-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.25rem 0.5rem; }
.chg-swatch {
	/* 44×44 interactive target with a smaller visible circle inside */
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 44px; block-size: 44px; padding: 0;
	border: 0; background: transparent; cursor: pointer;
	border-radius: 50%;
}
.chg-swatch__fill {
	inline-size: 28px; block-size: 28px; border-radius: 50%;
	background: var(--chg-tint-warm);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chg-ink) 22%, transparent);
	transition: transform var(--chg-dur-fast) var(--chg-ease);
	position: relative;
}
.chg-swatch:hover .chg-swatch__fill { transform: scale(1.1); }
/* Precise selected ring — accent-agnostic, uses the current text colour so it
   stays visible over white and pale fills in both themes. */
.chg-swatch.is-selected {
	box-shadow: 0 0 0 2px var(--chg-bg), 0 0 0 4px var(--chg-text);
}
.chg-swatch:focus-visible { outline: 3px solid var(--chg-focus); outline-offset: 2px; }
/* Unavailable combinations: dimmed + struck, never removed (keeps layout). */
.chg-swatch.is-unavailable { cursor: not-allowed; }
.chg-swatch.is-unavailable .chg-swatch__fill { opacity: 0.4; }
.chg-swatch.is-unavailable::after {
	content: ""; position: absolute; inline-size: 34px; block-size: 1.5px;
	background: var(--chg-text-muted); transform: rotate(-45deg);
}
.chg-swatch { position: relative; }

/* When swatches are active, tidy the Woo variations table spacing. */
.woocommerce div.product form.cart .variations td.value { padding-block: 0.4rem; }

/* =========================================================================
 * Visual batch 6 — search overlay
 * ===================================================================== */

/* Modern command-palette: a floating card near the top over a strong
   translucent blur — snappy scale-in, compact input, internally scrolling. */
.chg-searchoverlay {
	position: fixed;
	inset-block-start: var(--chg-adminbar);
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 200;
	background: color-mix(in srgb, var(--chg-ink) 52%, transparent);
	backdrop-filter: blur(10px) saturate(1.15);
	-webkit-backdrop-filter: blur(10px) saturate(1.15);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(0.75rem, 7vh, 6rem) var(--chg-gutter) var(--chg-gutter);
	animation: chg-fade var(--chg-dur-fast) var(--chg-ease);
}
.chg-searchoverlay[hidden] { display: none; }
.chg-searchoverlay__panel {
	inline-size: 100%;
	max-inline-size: 620px;
	display: flex;
	flex-direction: column;
	background: var(--chg-surface);
	border: 1px solid var(--chg-line);
	border-radius: var(--chg-radius-lg);
	box-shadow: var(--chg-shadow-lg);
	max-block-size: min(72vh, 620px);
	overflow: hidden; /* rounded corners clip; the body scrolls internally */
	animation: chg-search-in var(--chg-dur) var(--chg-ease-out);
}
@keyframes chg-search-in { from { transform: translateY(-10px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
/* Reverse of the open animation — same closeAnimated() helper used for the
   drawers/sheet, so closing (Esc, backdrop click, or the close button)
   fades/scales back out instead of vanishing instantly. The backdrop must
   fade on the SAME duration as the panel (both var(--chg-dur)), not the
   shorter --chg-dur-fast: the panel is a DOM child of the backdrop, so its
   rendered opacity is backdrop-opacity × panel-own-opacity. With a shorter
   backdrop fade, the backdrop hit 0 before the panel's slide/scale finished,
   making the last ~40% of the panel's exit motion invisible — the reverse
   animation looked like an instant vanish instead of a reversing scale/fade. */
.chg-searchoverlay.is-closing { animation: chg-fade-out var(--chg-dur) var(--chg-ease) forwards; }
.chg-searchoverlay.is-closing .chg-searchoverlay__panel { animation: chg-search-out var(--chg-dur) var(--chg-ease) forwards; }
@keyframes chg-search-out { from { transform: none; opacity: 1; } to { transform: translateY(-10px) scale(0.97); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chg-searchoverlay, .chg-searchoverlay__panel { animation: none; } }

/* The form + body carry .chg-container for the no-JS full-page fallback;
   inside the panel neutralise only the wide max-width — each element's own
   rule below (padding: ... 1rem) already sets the horizontal gutter we
   want, but this compound selector's 2-class specificity was overriding it
   with padding-inline: 0 regardless of source order, leaving the form/body
   flush against the panel edges. */
.chg-searchoverlay__form.chg-container,
.chg-searchoverlay__body.chg-container { max-inline-size: none; }

.chg-searchoverlay__form {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.85rem 1rem;
	border-block-end: 1px solid var(--chg-line);
	flex: none;
}
.chg-searchoverlay__icon { color: var(--chg-brand); flex: none; display: inline-flex; }
.chg-searchoverlay__field {
	flex: 1 1 auto; min-inline-size: 0;
	border: 0; background: transparent; color: var(--chg-text);
	font-family: var(--chg-font-body); font-weight: 600;
	font-size: var(--chg-text-md); line-height: 1.4; padding: 0.2rem 0;
}
.chg-searchoverlay__field:focus { outline: none; }
.chg-searchoverlay__field::placeholder { color: var(--chg-text-muted); font-weight: 500; }
.chg-searchoverlay__close { flex: none; }

.chg-searchoverlay__body { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem 1rem 1rem; }
.chg-searchoverlay__rowhead { display: flex; align-items: baseline; justify-content: space-between; }
.chg-searchoverlay__clear { border: 0; background: transparent; color: var(--chg-brand-deep); cursor: pointer; font-size: var(--chg-text-xs); font-weight: 600; }
.chg-label { color: var(--chg-text-muted); margin: var(--chg-space-sm) 0 0.6rem; }
.chg-searchoverlay__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--chg-space-sm); padding: 0; }
.chg-searchoverlay__chip {
	display: inline-block; padding: 0.4em 1em;
	background: var(--chg-tint-warm); color: var(--chg-text);
	border: 0; border-radius: var(--chg-radius-pill);
	font-size: var(--chg-text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
	transition: background var(--chg-dur) var(--chg-ease);
}
.chg-searchoverlay__chip:hover { background: var(--chg-accent); color: var(--chg-on-brand); }

.chg-searchoverlay__results { display: grid; gap: 0.25rem; margin-block-start: var(--chg-space-sm); }
.chg-searchoverlay__result {
	display: grid; grid-template-columns: 56px 1fr auto; gap: var(--chg-space-sm);
	align-items: center; padding: 0.5rem; border-radius: var(--chg-radius-sm);
	text-decoration: none; color: var(--chg-text);
}
.chg-searchoverlay__result:hover,
.chg-searchoverlay__result:focus-visible { background: var(--chg-tint-warm); outline: none; }
.chg-searchoverlay__result img { inline-size: 56px; block-size: 70px; object-fit: cover; border-radius: var(--chg-radius-xs); background: var(--chg-tint-warm); }
.chg-searchoverlay__resulttitle { font-weight: 600; font-size: var(--chg-text-sm); }
.chg-searchoverlay__state { color: var(--chg-text-muted); font-size: var(--chg-text-sm); padding-block: var(--chg-space-sm); margin: 0; }
.chg-searchoverlay__all { display: inline-block; margin-block-start: var(--chg-space-sm); font-weight: 700; color: var(--chg-brand-deep); text-decoration: none; }
.chg-searchoverlay__all:hover { text-decoration: underline; }

/* =========================================================================
 * Visual batch 7 — cart drawer quality-of-life
 * ===================================================================== */

.chg-minicart-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: 0.4rem; }
.chg-qty--mini { border-radius: var(--chg-radius-xs); }
.chg-qty--mini button { inline-size: 2em; font-size: var(--chg-text-base); }
.chg-qty--mini input { inline-size: 2.4em; font-size: var(--chg-text-sm); }
.chg-minicart-qtystatic { color: var(--chg-text-muted); font-size: var(--chg-text-sm); }
.chg-minicart-price { font-weight: 700; font-family: var(--chg-font-display); font-size: var(--chg-text-sm); white-space: nowrap; }

/* Busy state: dim + block interaction while a cart request is in flight. */
.chg-drawer__body.is-busy { opacity: 0.6; pointer-events: none; transition: opacity var(--chg-dur) var(--chg-ease); }

/* Undo bar */
.chg-drawer__undo {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	margin: var(--chg-space-sm) var(--chg-space-md) 0;
	padding: 0.7em 1em;
	background: var(--chg-ink); color: var(--chg-paper);
	border-radius: var(--chg-radius-xs);
	font-size: var(--chg-text-sm);
	animation: chg-fade var(--chg-dur) var(--chg-ease);
}
.chg-drawer__undo[hidden] { display: none; }
.chg-drawer__undo button {
	border: 0; background: transparent; color: var(--chg-sun);
	font-weight: 700; text-decoration: underline; cursor: pointer; flex: none;
}

/* =========================================================================
 * Visual batch 8 — app-like mobile (bottom nav + filter sheet)
 * ===================================================================== */

.chg-bottomnav { display: none; }
@media (max-width: 767px) {
	.chg-bottomnav {
		position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 140;
		display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
		background: color-mix(in srgb, var(--chg-surface) 96%, transparent);
		backdrop-filter: blur(12px);
		border-block-start: 1px solid var(--chg-line);
		padding-block-end: env(safe-area-inset-bottom, 0);
	}
	.chg-bottomnav__item {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		min-block-size: 56px; padding-block: 6px;
		border: 0; background: transparent; color: var(--chg-text-muted);
		font-size: 10px; font-weight: 600; text-decoration: none; cursor: pointer;
		letter-spacing: 0.02em;
	}
	.chg-bottomnav__item.is-active { color: var(--chg-accent); }
	.chg-bottomnav__item:active { transform: scale(0.94); }
	.chg-bottomnav__carticon { position: relative; display: inline-flex; }
	.chg-bottomnav__carticon .chg-cartbtn__count { inset-block-start: -6px; inset-inline-end: -8px; }
	/* Lift the sticky product bar + FAB above the bottom nav. */
	.chg-stickybar { inset-block-end: calc(56px + env(safe-area-inset-bottom, 0)); }
	body { padding-block-end: calc(56px + env(safe-area-inset-bottom, 0)); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.chg-bottomnav { animation: chg-bottomnav-in 0.4s var(--chg-ease-out); }
}
@keyframes chg-bottomnav-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* Filter button: mobile only, in the archive bar. */
.chg-filterbtn { display: none; }
@media (max-width: 767px) {
	.chg-filterbtn { display: inline-flex; padding-block: 0.55em; font-size: var(--chg-text-xs); }
	.chg-archivebar .woocommerce-ordering { display: none; } /* sorting lives in the sheet */
}

/* Bottom sheet */
.chg-sheet-overlay { position: fixed; inset: 0; z-index: 195; background: rgb(16 26 24 / 0.5); backdrop-filter: blur(2px); }
.chg-sheet-overlay[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.chg-sheet-overlay:not([hidden]) { animation: chg-fade var(--chg-dur) var(--chg-ease); }
}
.chg-sheet {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 196;
	max-block-size: 82vh; overflow-y: auto;
	background: var(--chg-bg);
	border-start-start-radius: var(--chg-radius-lg); border-start-end-radius: var(--chg-radius-lg);
	box-shadow: var(--chg-shadow-lg);
	padding-block-end: calc(env(safe-area-inset-bottom, 0) + var(--chg-space-md));
	animation: chg-sheet-in var(--chg-dur-slow) var(--chg-ease-out);
	touch-action: pan-y;
}
.chg-sheet[hidden] { display: none; }
@keyframes chg-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .chg-sheet { animation: none; } }
/* Reverse slide-down on close (theme.js closeAnimated) instead of vanishing. */
@media (prefers-reduced-motion: no-preference) {
	.chg-sheet.is-closing { animation: chg-sheet-out var(--chg-dur-slow) var(--chg-ease-out) forwards; }
	.chg-sheet-overlay.is-closing { animation: chg-fade-out var(--chg-dur) var(--chg-ease) forwards; }
}
@keyframes chg-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
.chg-sheet__grip { inline-size: 40px; block-size: 4px; border-radius: 999px; background: var(--chg-line); margin: 0.6rem auto 0; }
.chg-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--chg-space-sm) var(--chg-space-md); border-block-end: 1px solid var(--chg-line); }
.chg-sheet__title { margin: 0; font-size: var(--chg-text-md); }
.chg-sheet__body { padding: var(--chg-space-md); }
.chg-sheet__sort, .chg-sheet__cats { list-style: none; margin: 0 0 var(--chg-space-md); padding: 0; }
.chg-sheet__sort a, .chg-sheet__cats a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.85em 0.25em; color: var(--chg-text); text-decoration: none;
	border-block-end: 1px solid var(--chg-line); font-weight: 600;
}
.chg-sheet__sort a.is-active { color: var(--chg-accent); }
.chg-sheet__catcount { color: var(--chg-text-muted); font-weight: 400; font-size: var(--chg-text-sm); }
/* Desktop: sheet + overlay never shown. */
@media (min-width: 768px) { .chg-sheet, .chg-sheet-overlay { display: none !important; } }

/* =========================================================================
 * My Account — modern, hyper-responsive
 * ===================================================================== */

.woocommerce-account .chg-woo { padding-block-start: var(--chg-space-lg); }
.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-block-start: 0; }
/* Grid items default to a min size of their content's intrinsic width, so a
   wide table/tile-grid child grows the whole track (and the page) instead of
   scrolling inside its own pane — min-inline-size: 0 lets it shrink so
   overflow-x can actually do its job. */
.woocommerce-account .woocommerce:has(.chg-account-nav) .woocommerce-MyAccount-content { min-inline-size: 0; }

/* Two-pane layout only when the account nav is present (logged in). */
.woocommerce-account .woocommerce:has(.chg-account-nav) {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: var(--chg-space-lg);
	align-items: start;
}
/* Neutralise WooCommerce's clearfix pseudos — in a grid they become phantom
   items that seize columns and shove the nav/content off their cells
   (same trap as the product loop, D-014). */
.woocommerce-account .woocommerce:has(.chg-account-nav)::before,
.woocommerce-account .woocommerce:has(.chg-account-nav)::after {
	content: none;
}

/* --- Navigation rail --- */
/* Clears the sticky header (which itself sits below --chg-adminbar) — the
   old hardcoded 90px never accounted for the WordPress admin bar (32/46px),
   so the rail could overlap the header for logged-in staff. */
.chg-account-nav { position: sticky; inset-block-start: calc(var(--chg-adminbar) + 90px); }
/* WooCommerce's own woocommerce-layout.css still ships
   `.woocommerce-account .woocommerce-MyAccount-navigation { float:left;
   width:30% }` (the old float-based 2-column layout) — grid items ignore
   float, but the literal width still applies, and that selector's two
   classes out-specificity our plain `.chg-account-nav` rule above, so it was
   winning regardless of file order. At desktop the pills silently
   overflowed the real (30%-of-250px ≈ 75px) nav box with nothing to clip
   them, so it *looked* fine; the moment overflow-x:auto starts clipping in
   the mobile media query below, that 30% box became visibly, badly cut off.
   Match WC's own specificity to guarantee this wins. */
.woocommerce-account .chg-account-nav { inline-size: 100%; }
.chg-account-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.chg-account-nav__list a {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.7rem 0.9rem; border-radius: var(--chg-radius-sm);
	color: var(--chg-text); text-decoration: none; font-weight: 600; font-size: var(--chg-text-sm);
	transition: background var(--chg-dur) var(--chg-ease), color var(--chg-dur) var(--chg-ease);
}
.chg-account-nav__list a .chg-icon { color: var(--chg-text-muted); flex: none; transition: color var(--chg-dur) var(--chg-ease); }
.chg-account-nav__list a:hover { background: var(--chg-tint-warm); }
.chg-account-nav__list .is-active a { background: var(--chg-ink); color: var(--chg-paper); }
.chg-account-nav__list .is-active a .chg-icon { color: var(--chg-sun); }
.chg-account-nav__list .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--chg-text-muted); }
.chg-account-nav__list .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--chg-error); background: color-mix(in srgb, var(--chg-error) 10%, transparent); }
.chg-account-nav__label--nowrap { white-space: nowrap; }

/* --- Dashboard --- */
.chg-account-dash__hi { font-size: var(--chg-text-2xl); margin: 0.1em 0 0.25em; }
.chg-account-tiles {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--chg-space-sm); margin-block: var(--chg-space-lg);
}
.chg-account-tile {
	display: grid; gap: 0.15rem; align-content: start;
	padding: var(--chg-space-md); border-radius: var(--chg-radius-sm);
	background: var(--chg-surface); border: 1.5px solid var(--chg-line);
	text-decoration: none; color: var(--chg-text);
	transition: border-color var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease-out), box-shadow var(--chg-dur) var(--chg-ease);
}
.chg-account-tile:hover { border-color: var(--chg-brand); transform: translateY(-2px); box-shadow: var(--chg-shadow); }
.chg-account-tile .chg-icon { color: var(--chg-brand); margin-block-end: 0.4rem; }
.chg-account-tile__label { font-family: var(--chg-font-display); font-weight: 700; font-size: var(--chg-text-md); }
.chg-account-tile__sub { color: var(--chg-text-muted); font-size: var(--chg-text-sm); }

.chg-account-latest { border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius-sm); padding: var(--chg-space-md); }
.chg-account-latest__head { display: flex; align-items: baseline; justify-content: space-between; margin-block-end: var(--chg-space-sm); }
.chg-account-latest__head h3 { margin: 0; font-size: var(--chg-text-md); }
.chg-account-latest__all { font-size: var(--chg-text-sm); font-weight: 600; text-decoration: none; color: var(--chg-brand-deep); white-space: nowrap; }
.chg-account-latest__row { display: flex; align-items: center; gap: var(--chg-space-md); flex-wrap: wrap; }
.chg-account-latest__num { display: block; font-family: var(--chg-font-display); font-weight: 700; }
.chg-account-latest__date { display: block; color: var(--chg-text-muted); font-size: var(--chg-text-sm); }
.chg-account-latest__total { font-weight: 700; margin-inline-start: auto; }
.chg-account-latest__view { padding-block: 0.45em; }

/* Order-status pills (shared: dashboard + orders table) */
.chg-orderstatus { display: inline-block; padding: 0.25em 0.75em; border-radius: var(--chg-radius-pill); font-size: var(--chg-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.chg-orderstatus--completed, .order-status.status-completed { background: color-mix(in srgb, var(--chg-success) 18%, var(--chg-surface)); color: var(--chg-success); }
.chg-orderstatus--processing, .order-status.status-processing { background: var(--chg-tint-cool); color: var(--chg-brand-deep); }
.chg-orderstatus--on-hold, .order-status.status-on-hold { background: color-mix(in srgb, var(--chg-sun) 30%, var(--chg-surface)); color: #7a5a10; }
.chg-orderstatus--pending, .chg-orderstatus--cancelled, .chg-orderstatus--failed { background: var(--chg-tint-warm); color: var(--chg-text-muted); }

/* --- Account tables (orders, downloads, order-detail view) → cards on
   mobile. Was scoped to .woocommerce-orders-table only, so the Downloads
   table (class .my_account_downloads, not .woocommerce-orders-table) never
   got padding/font sizing OR the mobile card transform — fixed by covering
   every .shop_table-family selector uniformly. --- */
.woocommerce-orders-table, .woocommerce-table--order-details, .shop_table {
	inline-size: 100%; border-collapse: collapse; text-align: start;
}
.woocommerce-orders-table th, .woocommerce-orders-table td,
.shop_table th, .shop_table td,
.woocommerce-table--order-details th, .woocommerce-table--order-details td {
	padding: 0.85rem 0.75rem; border-block-end: 1px solid var(--chg-line); font-size: var(--chg-text-sm);
}
.woocommerce-orders-table thead th, .shop_table thead th, .woocommerce-table--order-details thead th {
	font-size: var(--chg-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--chg-text-muted);
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { text-align: end; }
.woocommerce-orders-table .button, .shop_table .button { padding: 0.5em 1em; font-size: var(--chg-text-xs); }
@media (max-width: 640px) {
	.woocommerce-orders-table thead, .shop_table thead {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
	}
	.woocommerce-orders-table tr, .shop_table tr {
		display: block; border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius-sm);
		padding: 0.5rem 0.9rem; margin-block-end: var(--chg-space-sm);
	}
	.woocommerce-orders-table td, .shop_table td {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0; padding: 0.4rem 0;
	}
	.woocommerce-orders-table td::before, .shop_table td::before {
		content: attr(data-title); font-weight: 700; color: var(--chg-text-muted); font-size: var(--chg-text-xs); text-transform: uppercase; letter-spacing: 0.04em;
	}
	.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { justify-content: flex-start; }
	/* Downloads rows carry a file link + a remaining-count + a link column
	   whose value cell has no meaningful single line — keep it left-aligned
	   rather than space-between so long filenames don't collide with it. */
	.shop_table td.download-file { justify-content: flex-start; gap: 0.6rem; }
}

/* --- Addresses --- */
.woocommerce-Addresses.col2-set, .woocommerce-Addresses.u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--chg-space-md); }
.woocommerce-Address { border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius-sm); padding: var(--chg-space-md); }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.woocommerce-Address-title h3 { margin: 0; font-size: var(--chg-text-md); }
.woocommerce-Address address { font-style: normal; color: var(--chg-text-muted); line-height: 1.7; margin-block-start: 0.5rem; }

/* --- Forms (edit account, addresses, login, register) --- */
.woocommerce form .form-row { margin-block-end: var(--chg-space-sm); }
.woocommerce form .form-row label { display: block; margin-block-end: 0.3rem; }
.woocommerce-EditAccountForm fieldset { border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius-sm); padding: var(--chg-space-md); margin-block-start: var(--chg-space-lg); }
.woocommerce-EditAccountForm legend { font-family: var(--chg-font-display); font-weight: 700; padding-inline: 0.5rem; }
/* WooCommerce's own .form-row-first/-last float at ~47% with no built-in
   mobile stacking — on a narrow phone that leaves two cramped, hard-to-tap
   fields side by side (Account details, Addresses). Stack them below 520px. */
@media (max-width: 520px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { float: none; inline-size: 100%; }
}

/* --- Logged-out: login / register split --- */
.woocommerce-account .u-columns.col2-set,
.woocommerce-account .woocommerce > .u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--chg-space-lg); }
.woocommerce-account .col-1, .woocommerce-account .col-2 {
	border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius); padding: var(--chg-space-lg);
	background: var(--chg-surface);
}
.woocommerce-account .col-1 h2, .woocommerce-account .col-2 h2 { font-size: var(--chg-text-lg); margin-block-start: 0; }
.woocommerce form.login, .woocommerce form.register { border: 0; padding: 0; margin: 0; }
.woocommerce-form-login__rememberme { font-weight: 400; }

/* --- Account nav → horizontal scroll bar on mobile --- */
@media (max-width: 860px) {
	.woocommerce-account .woocommerce:has(.chg-account-nav) { grid-template-columns: 1fr; }
	/* A grid item's default min-inline-size is its content's natural (un-
	   wrapped) width, even when that content has overflow-x: auto — so
	   without this, the nowrap nav list's full intrinsic width (well over
	   800px for 7 items) forced the single 1fr column, and the whole page,
	   wider than the viewport instead of scrolling inside the nav strip. */
	.woocommerce-account .woocommerce:has(.chg-account-nav) { min-inline-size: 0; }
	.chg-account-nav {
		position: static; min-inline-size: 0; margin-block-end: var(--chg-space-md); margin-inline: calc(var(--chg-gutter) * -1);
		/* Fades the trailing edge so a partially-cut pill reads as "more to
		   scroll" rather than "cut off" — the scrollbar itself is hidden
		   below, so without this the overflow had zero visual affordance. */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	}
	.chg-account-nav__list {
		grid-auto-flow: column; grid-auto-columns: max-content;
		overflow-x: auto; min-inline-size: 0; gap: 0.35rem;
		padding-inline: var(--chg-gutter); padding-inline-end: calc(var(--chg-gutter) + 2.5rem);
		padding-block-end: 0.5rem;
		scrollbar-width: none;
	}
	.chg-account-nav__list::-webkit-scrollbar { display: none; }
	.chg-account-nav__list a {
		white-space: nowrap; border: 1.5px solid var(--chg-line);
		padding: 0.55rem 0.75rem; gap: 0.5rem; font-size: var(--chg-text-xs);
	}
	.chg-account-nav__list .is-active a { border-color: var(--chg-ink); }
	.chg-account-latest__row { gap: var(--chg-space-sm); }
	.chg-account-latest__total { margin-inline-start: 0; }
}

/* --- My Account content: never let a wide child (tile grid, un-transformed
   table between 640-768px, wishlist grid) overflow the whole page. There was
   no width guard on .woocommerce-MyAccount-content itself, so a single wide
   element pushed the entire viewport wider instead of scrolling internally. */
@media (max-width: 768px) {
	.woocommerce-MyAccount-content { max-inline-size: 100%; overflow-x: auto; }
	.chg-account-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* =========================================================================
 * Floating social buttons — desktop rail + mobile expandable FAB
 * ===================================================================== */

.chg-fab { position: fixed; z-index: 95; display: none; }
.chg-fab--right { inset-inline-end: 0; }
.chg-fab--left  { inset-inline-start: 0; }
.chg-fab__list { list-style: none; margin: 0; padding: 0; display: flex; }
.chg-fab__link {
	--chg-fab-border: var(--chg-line);
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 44px; block-size: 44px;
	background: var(--chg-surface); color: var(--chg-text);
	/* An inset box-shadow instead of `border` — it's drawn INSIDE the box, so
	   it never gets visually cropped by a parent's overflow/border-radius
	   clipping at the rail's rounded ends, and hover's background swap can't
	   leave a stray sliver of the old border color poking out past the edge. */
	box-shadow: inset 0 0 0 1px var(--chg-fab-border), var(--chg-shadow-sm);
	text-decoration: none;
	transition: background var(--chg-dur) var(--chg-ease), color var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease);
}
.chg-fab__link:hover { background: var(--chg-brand); color: var(--chg-on-brand); }

/* Native brand colors (fab_colors=native) — each chip fills with that
   platform's real brand color instead of the theme's own palette. */
.chg-fab--native .chg-fab__link--instagram { --chg-fab-border: #E4405F; background: #E4405F; color: #fff; }
.chg-fab--native .chg-fab__link--facebook  { --chg-fab-border: #1877F2; background: #1877F2; color: #fff; }
.chg-fab--native .chg-fab__link--tiktok    { --chg-fab-border: #000000; background: #000000; color: #fff; }
.chg-fab--native .chg-fab__link--x         { --chg-fab-border: #000000; background: #000000; color: #fff; }
.chg-fab--native .chg-fab__link--youtube   { --chg-fab-border: #FF0000; background: #FF0000; color: #fff; }
.chg-fab--native .chg-fab__link--linkedin  { --chg-fab-border: #0A66C2; background: #0A66C2; color: #fff; }
.chg-fab--native .chg-fab__link--whatsapp  { --chg-fab-border: #25D366; background: #25D366; color: #fff; }
.chg-fab--native .chg-fab__link:hover { filter: brightness(1.1); background: inherit; color: inherit; }
.chg-fab__toggle {
	display: none;
	align-items: center; justify-content: center;
	inline-size: 52px; block-size: 52px;
	border: 0; border-radius: 50%;
	background: var(--chg-brand); color: var(--chg-on-brand);
	box-shadow: var(--chg-shadow);
	cursor: pointer;
	transition: background var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease);
}
.chg-fab__toggle:hover { transform: scale(1.05); }
.chg-fab__icon { display: inline-flex; }
.chg-fab__icon--close { display: none; }
.chg-fab.is-open .chg-fab__toggle { background: var(--chg-ink); color: var(--chg-paper); }
.chg-fab.is-open .chg-fab__icon--open  { display: none; }
.chg-fab.is-open .chg-fab__icon--close { display: inline-flex; }

/* --- Desktop: a vertical rail hugging the edge, always expanded --- */
@media (min-width: 768px) {
	.chg-fab--show-desktop { display: block; inset-block-start: 50%; transform: translateY(-50%); }
	.chg-fab--show-desktop .chg-fab__toggle { display: none; }
	.chg-fab--show-desktop .chg-fab__list { flex-direction: column; gap: 0; }
	/* Shares one hairline between stacked items instead of doubling it up —
	   same 4-side inset shadow as the base rule, minus the bottom inset, so
	   the next item's top inset supplies that shared edge. */
	.chg-fab--show-desktop .chg-fab__item:not(:last-child) .chg-fab__link {
		box-shadow: inset 1px 0 0 0 var(--chg-fab-border), inset -1px 0 0 0 var(--chg-fab-border), inset 0 1px 0 0 var(--chg-fab-border);
	}
	/* Round only the outer corners so the rail reads as one unit. */
	.chg-fab--right.chg-fab--show-desktop .chg-fab__item:first-child .chg-fab__link { border-start-start-radius: var(--chg-radius); }
	.chg-fab--right.chg-fab--show-desktop .chg-fab__item:last-child  .chg-fab__link { border-end-start-radius: var(--chg-radius); }
	.chg-fab--left.chg-fab--show-desktop  .chg-fab__item:first-child .chg-fab__link { border-start-end-radius: var(--chg-radius); }
	.chg-fab--left.chg-fab--show-desktop  .chg-fab__item:last-child  .chg-fab__link { border-end-end-radius: var(--chg-radius); }
	.chg-fab--right.chg-fab--show-desktop .chg-fab__link:hover { transform: translateX(-3px); }
	.chg-fab--left.chg-fab--show-desktop  .chg-fab__link:hover { transform: translateX(3px); }
}

/* --- Mobile: a single FAB that fans its icons out on tap --- */
@media (max-width: 767px) {
	.chg-fab--show-mobile { display: block; inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); }
	.chg-fab--right.chg-fab--show-mobile { inset-inline-end: 1rem; }
	.chg-fab--left.chg-fab--show-mobile  { inset-inline-start: 1rem; }
	.chg-fab--show-mobile .chg-fab__toggle { display: inline-flex; }
	.chg-fab--show-mobile .chg-fab__list {
		position: absolute;
		inset-block-end: calc(100% + 0.6rem);
		inset-inline-end: 4px;
		flex-direction: column-reverse;
		gap: 0.55rem;
		align-items: center;
	}
	.chg-fab--left.chg-fab--show-mobile .chg-fab__list { inset-inline-end: auto; inset-inline-start: 4px; }
	.chg-fab--show-mobile .chg-fab__link { border-radius: 50%; box-shadow: inset 0 0 0 1px var(--chg-fab-border), var(--chg-shadow); }
	/* Collapsed by default; fan out (with a little stagger) when open. */
	.chg-fab--show-mobile .chg-fab__item {
		opacity: 0;
		transform: scale(0.4) translateY(8px);
		pointer-events: none;
		transition: opacity var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease-out);
	}
	.chg-fab--show-mobile.is-open .chg-fab__item { opacity: 1; transform: none; pointer-events: auto; }
	.chg-fab--show-mobile.is-open .chg-fab__item:nth-child(2) { transition-delay: 30ms; }
	.chg-fab--show-mobile.is-open .chg-fab__item:nth-child(3) { transition-delay: 60ms; }
	.chg-fab--show-mobile.is-open .chg-fab__item:nth-child(4) { transition-delay: 90ms; }
	.chg-fab--show-mobile.is-open .chg-fab__item:nth-child(5) { transition-delay: 120ms; }
	.chg-fab--show-mobile.is-open .chg-fab__item:nth-child(n+6) { transition-delay: 150ms; }
}
@media (prefers-reduced-motion: reduce) {
	.chg-fab__item, .chg-fab__link, .chg-fab__toggle { transition: none; }
}

/* =========================================================================
 * Homepage hero carousel
 * ===================================================================== */

.chg-carousel { position: relative; overflow: hidden; background: var(--chg-ink); }
.chg-carousel__viewport { overflow: hidden; }
.chg-carousel__track { display: flex; transition: transform var(--chg-dur-slow) var(--chg-ease-out); will-change: transform; }
.chg-carousel--no-anim .chg-carousel__track { transition: none; }
.chg-carousel__slide {
	--scrim: var(--chg-ink);
	flex: 0 0 100%;
	position: relative;
	block-size: var(--chg-carousel-h, 560px);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.chg-carousel__slide--dark { --scrim: #ffffff; }
.chg-carousel__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.chg-carousel__scrim { position: absolute; inset: 0; }

/* Scrim shape follows content alignment so the copy always sits over the
   darkest (or, for dark-text slides, lightest) region. */
.chg-carousel__slide--align-start .chg-carousel__scrim {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--scrim) 74%, transparent) 0%, color-mix(in srgb, var(--scrim) 28%, transparent) 45%, transparent 68%),
		linear-gradient(0deg, color-mix(in srgb, var(--scrim) 36%, transparent), transparent 40%);
}
.chg-carousel__slide--align-end .chg-carousel__scrim {
	background:
		linear-gradient(270deg, color-mix(in srgb, var(--scrim) 74%, transparent) 0%, color-mix(in srgb, var(--scrim) 28%, transparent) 45%, transparent 68%),
		linear-gradient(0deg, color-mix(in srgb, var(--scrim) 36%, transparent), transparent 40%);
}
.chg-carousel__slide--align-center .chg-carousel__scrim {
	background:
		radial-gradient(ellipse at center, color-mix(in srgb, var(--scrim) 55%, transparent), color-mix(in srgb, var(--scrim) 18%, transparent) 72%),
		linear-gradient(0deg, color-mix(in srgb, var(--scrim) 34%, transparent), transparent 46%);
}

.chg-carousel__content {
	position: relative; z-index: 1;
	max-inline-size: 40rem;
	color: var(--chg-paper);
	padding-block: var(--chg-space-xl);
}
.chg-carousel__slide--align-start  .chg-carousel__content { margin-inline-end: auto; }
.chg-carousel__slide--align-center .chg-carousel__content { margin-inline: auto; text-align: center; }
.chg-carousel__slide--align-center .chg-carousel__text { margin-inline: auto; }
.chg-carousel__slide--align-end    .chg-carousel__content { margin-inline-start: auto; text-align: end; }
.chg-carousel__slide--align-end    .chg-carousel__text { margin-inline-start: auto; }

.chg-carousel__eyebrow { color: color-mix(in srgb, var(--chg-paper) 88%, var(--chg-sun)); }
.chg-carousel__heading { color: var(--chg-paper); font-size: var(--chg-text-2xl); margin-block: 0.15em 0.35em; }
.chg-carousel__text { color: color-mix(in srgb, var(--chg-paper) 88%, transparent); font-size: var(--chg-text-md); max-inline-size: 34rem; }
.chg-carousel__cta { margin-block-start: var(--chg-space-md); }

/* Dark-text slides (over a light scrim / bright image). */
.chg-carousel__slide--dark .chg-carousel__heading { color: var(--chg-ink); }
.chg-carousel__slide--dark .chg-carousel__text { color: color-mix(in srgb, var(--chg-ink) 82%, transparent); }
.chg-carousel__slide--dark .chg-carousel__eyebrow { color: color-mix(in srgb, var(--chg-ink) 78%, var(--chg-sea)); }

/* Fade transition mode: slides stack + cross-fade instead of sliding. */
.chg-carousel--fade .chg-carousel__track { display: block; transition: none; }
.chg-carousel--fade .chg-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--chg-dur-slow) var(--chg-ease); pointer-events: none; }
.chg-carousel--fade .chg-carousel__slide.is-active,
.chg-carousel--fade:not(.chg-carousel--js) .chg-carousel__slide:first-child { position: relative; opacity: 1; pointer-events: auto; }

/* Arrows — nudge outward + the chevron slides on hover ("move when hovered"). */
.chg-carousel__arrow {
	position: absolute; inset-block-start: 50%; transform: translateY(-50%);
	z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 46px; block-size: 46px;
	border: 0; border-radius: 50%;
	background: color-mix(in srgb, var(--chg-paper) 90%, transparent);
	color: var(--chg-ink);
	cursor: pointer;
	box-shadow: var(--chg-shadow);
	transition: background var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease-out), opacity var(--chg-dur) var(--chg-ease);
}
.chg-carousel__arrow .chg-icon { transition: transform var(--chg-dur) var(--chg-ease-out); }
.chg-carousel__arrow--prev { inset-inline-start: clamp(0.5rem, 2vw, 1.25rem); }
.chg-carousel__arrow--next { inset-inline-end: clamp(0.5rem, 2vw, 1.25rem); }
.chg-carousel__arrow:hover { background: var(--chg-paper); }
.chg-carousel__arrow--prev:hover { transform: translateY(-50%) translateX(-4px) scale(1.06); }
.chg-carousel__arrow--next:hover { transform: translateY(-50%) translateX(4px) scale(1.06); }
.chg-carousel__arrow--prev:hover .chg-icon { transform: translateX(-3px); }
.chg-carousel__arrow--next:hover .chg-icon { transform: translateX(3px); }
.chg-carousel__arrow[disabled] { opacity: 0.35; cursor: default; box-shadow: none; }
.chg-carousel__arrow[disabled]:hover { transform: translateY(-50%); background: color-mix(in srgb, var(--chg-paper) 90%, transparent); }
.chg-carousel__arrow[disabled]:hover .chg-icon { transform: none; }

/* Dots */
.chg-carousel__dots {
	position: absolute; inset-block-end: var(--chg-space-md); inset-inline: 0;
	z-index: 2;
	display: flex; justify-content: center; gap: 0.5rem;
}
.chg-carousel__dot {
	inline-size: 10px; block-size: 10px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: color-mix(in srgb, var(--chg-paper) 45%, transparent);
	transition: background var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease);
}
.chg-carousel__dot:hover { background: color-mix(in srgb, var(--chg-paper) 70%, transparent); }
.chg-carousel__dot.is-active { background: var(--chg-paper); transform: scale(1.25); }
.chg-carousel__dot:focus-visible { outline: 3px solid var(--chg-paper); outline-offset: 2px; }

@media (max-width: 640px) {
	.chg-carousel__arrow { inline-size: 40px; block-size: 40px; }
	.chg-carousel__slide { block-size: var(--chg-carousel-h-mobile, 460px); }
	.chg-carousel__content { padding-block: var(--chg-space-lg); }
}
@media (prefers-reduced-motion: reduce) {
	.chg-carousel__track { transition: none; }
	.chg-carousel--fade .chg-carousel__slide { transition: none; }
}

/* =========================================================================
 * WordPress / WooCommerce standard chrome — notices, forms, tables, tabs,
 * reviews, pagination, blocks, empty states, 404/search/comments. Styled to
 * the CHANGE-LB system so stock messages and flows never break the design.
 * main.css loads AFTER woocommerce.css, so equal-specificity rules win.
 * ===================================================================== */

/* --- Notices (success / info / error) + block notice banners.
   These also ARE the empty states ("No order has been made yet.", empty
   downloads, etc.). Replace WC's grey box + top-border + font-icon. --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	padding: 0.9rem 1.1rem;
	margin: 0 0 var(--chg-space-md);
	background: var(--chg-surface-tint);
	color: var(--chg-text);
	border: 1px solid var(--chg-line);
	border-inline-start: 4px solid var(--chg-brand);
	border-block-start: 0;
	border-radius: var(--chg-radius-sm);
	font-size: var(--chg-text-sm);
	list-style: none;
	box-shadow: none;
}
.woocommerce-message { padding-inline-start: 1.1rem; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before { content: none; }
.woocommerce-message { border-inline-start-color: var(--chg-success); background: color-mix(in srgb, var(--chg-success) 9%, var(--chg-surface)); }
.woocommerce-error   { border-inline-start-color: var(--chg-error);   background: color-mix(in srgb, var(--chg-error) 9%, var(--chg-surface)); }
.woocommerce-info,
.woocommerce-noreviews { border-inline-start-color: var(--chg-secondary); background: color-mix(in srgb, var(--chg-secondary) 8%, var(--chg-surface)); }
.woocommerce-error li { margin: 0; }
/* The action link/button (View cart, Browse products) sits to the right. */
.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error > .button { margin-inline-start: auto; padding: 0.5em 1.1em; font-size: var(--chg-text-xs); }
/* Store notice (cookie/coming-soon strip) */
.woocommerce-store-notice, p.demo_store { background: var(--chg-ink); color: var(--chg-paper); border-radius: var(--chg-radius-sm); padding: 0.9rem 1.1rem; }

/* --- Secondary buttons: WC's non-.alt .button (View order, Cancel, etc.) --- */
.woocommerce a.button:not(.alt):not(.single_add_to_cart_button),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
	background: var(--chg-surface);
	color: var(--chg-text);
	border: 1.5px solid var(--chg-btn-bg);
	border-radius: var(--chg-radius-xs);
	font-weight: 600;
	transition: background var(--chg-dur) var(--chg-ease), color var(--chg-dur) var(--chg-ease);
}
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover { background: var(--chg-btn-bg); color: var(--chg-btn-fg); }

/* --- Quantity stepper (product page + classic cart) --- */
.quantity { display: inline-flex; align-items: stretch; }
.woocommerce .quantity .qty {
	inline-size: 4.5em; text-align: center;
	border: 1.5px solid var(--chg-line);
	border-radius: var(--chg-radius-xs);
	padding: 0.5em 0.4em; background: var(--chg-surface); color: var(--chg-text);
}

/* --- select2 (country / state selectors) to match native inputs --- */
.select2-container--default .select2-selection--single {
	block-size: auto; min-block-size: 44px;
	display: flex; align-items: center;
	border: 1.5px solid var(--chg-line);
	border-radius: var(--chg-radius-xs);
	background: var(--chg-surface);
	padding: 0.2rem 0.5rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--chg-text); line-height: 1.6; padding-inline-start: 0.25rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { block-size: 100%; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single { border-color: var(--chg-brand); }
.select2-dropdown { border: 1.5px solid var(--chg-line); background: var(--chg-surface); border-radius: var(--chg-radius-xs); }
.select2-search--dropdown .select2-search__field { border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius-xs); background: var(--chg-bg); color: var(--chg-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--chg-brand); color: var(--chg-on-brand); }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--chg-surface-tint); color: var(--chg-text); }

/* --- Pagination (shop). WC uses `.woocommerce nav.woocommerce-pagination
   ul li a/span` (0,3,4) — match/exceed it so ours wins. --- */
.woocommerce nav.woocommerce-pagination { margin-block-start: var(--chg-space-lg); }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 0.35rem; border: 0; list-style: none; padding: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-inline-size: 42px; min-block-size: 42px; padding: 0 0.6em;
	border: 1.5px solid var(--chg-line);
	border-radius: var(--chg-radius-xs);
	color: var(--chg-text); text-decoration: none; font-weight: 600;
	background: var(--chg-surface);
	transition: background var(--chg-dur) var(--chg-ease), color var(--chg-dur) var(--chg-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus { background: var(--chg-btn-bg); color: var(--chg-btn-fg); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--chg-ink); color: var(--chg-paper); border-color: var(--chg-ink); }

/* --- Product tabs + panels --- */
.woocommerce-tabs .tabs {
	display: flex; flex-wrap: wrap; gap: 0.25rem;
	list-style: none; margin: 0 0 var(--chg-space-md); padding: 0;
	border-block-end: 1px solid var(--chg-line);
}
.woocommerce-tabs .tabs::before, .woocommerce-tabs .tabs::after { content: none !important; }
.woocommerce-tabs .tabs li {
	margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
.woocommerce-tabs .tabs li a {
	display: inline-block; padding: 0.7em 1.1em;
	color: var(--chg-text-muted); text-decoration: none; font-weight: 700;
	font-family: var(--chg-font-display);
	border-block-end: 2px solid transparent; margin-block-end: -1px;
}
.woocommerce-tabs .tabs li a:hover { color: var(--chg-text); }
.woocommerce-tabs .tabs li.active a { color: var(--chg-text); border-block-end-color: var(--chg-brand); }
.woocommerce-tabs .panel { padding-block-start: var(--chg-space-md); }
.woocommerce-tabs .panel h2:first-child { font-size: var(--chg-text-lg); }

/* --- Reviews + star ratings --- */
.star-rating { color: var(--chg-sun); }
.woocommerce p.stars a { color: var(--chg-sun); }
.woocommerce #reviews #comments ol.commentlist { list-style: none; margin: 0; padding: 0; }
.woocommerce #reviews #comments li.review, .woocommerce #reviews #comments li.comment {
	border: 1px solid var(--chg-line); border-radius: var(--chg-radius-sm);
	padding: var(--chg-space-md); margin-block-end: var(--chg-space-sm);
}
.woocommerce #reviews .comment-text { margin: 0; }
.woocommerce #review_form_wrapper { border: 1px solid var(--chg-line); border-radius: var(--chg-radius-sm); padding: var(--chg-space-md); margin-block-start: var(--chg-space-md); }
.comment-form-rating label { display: block; margin-block-end: 0.3rem; font-weight: 600; }

/* --- Cart totals + coupon (classic fallbacks) --- */
.cart_totals { border: 1.5px solid var(--chg-line); border-radius: var(--chg-radius); padding: var(--chg-space-md); background: var(--chg-surface); }
.cart_totals h2 { font-size: var(--chg-text-lg); margin-block-start: 0; }
.woocommerce .coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.woocommerce-cart-form .actions { display: flex; align-items: center; justify-content: space-between; gap: var(--chg-space-sm); flex-wrap: wrap; }

/* --- WooCommerce blocks (cart/checkout): keep CHANGE-LB colours + type --- */
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-button, .wc-block-checkout__actions_row .wc-block-components-button {
	background: var(--chg-cta) !important; color: var(--chg-on-cta) !important;
	border-radius: var(--chg-radius-xs) !important; font-weight: 700 !important;
}
.wc-block-components-title, .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--chg-font-display); }
.wc-block-components-notice-banner.is-error { border-inline-start-color: var(--chg-error); }
.wc-block-components-notice-banner.is-success { border-inline-start-color: var(--chg-success); }

/* --- WordPress: 404, search results, comments --- */
.chg-notfound { text-align: center; padding-block: var(--chg-space-2xl); }
.chg-notfound__title { font-size: var(--chg-text-2xl); }
.search-no-results .chg-main, .error404 .chg-main { min-block-size: 40vh; }
#comments { margin-block-start: var(--chg-space-xl); }
#respond { border: 1px solid var(--chg-line); border-radius: var(--chg-radius-sm); padding: var(--chg-space-md); margin-block-start: var(--chg-space-md); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment-body { border: 1px solid var(--chg-line); border-radius: var(--chg-radius-sm); padding: var(--chg-space-md); margin-block-end: var(--chg-space-sm); }

/* =========================================================================
 * Back-to-top button
 * ===================================================================== */
.chg-totop {
	position: fixed;
	inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
	inset-inline-end: 1rem;
	z-index: 110;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 44px; block-size: 44px;
	border: 1px solid var(--chg-line);
	border-radius: 50%;
	background: var(--chg-surface); color: var(--chg-text);
	box-shadow: var(--chg-shadow);
	cursor: pointer;
	opacity: 0; transform: translateY(8px);
	transition: opacity var(--chg-dur) var(--chg-ease), transform var(--chg-dur) var(--chg-ease), background var(--chg-dur) var(--chg-ease);
}
.chg-totop[hidden] { display: none; }
.chg-totop.is-visible { opacity: 1; transform: none; }
.chg-totop:hover { background: var(--chg-btn-bg); color: var(--chg-btn-fg); }
.chg-totop__icon { transform: rotate(90deg); }

/* Sits above the mobile bottom nav when present. Matches the mobile FAB's
   footprint (48px) and default corner so the pair reads as one deliberate
   group rather than two buttons landing on top of each other. */
@media (max-width: 767px) {
	.chg-totop {
		inline-size: 48px; block-size: 48px;
		inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px));
	}
	/* The mobile social FAB (chg-fab--show-mobile) is a later sibling in the
	   footer markup — when it's active, stack back-to-top directly above it
	   on the SAME edge (whichever side the FAB is configured for) with a
	   deliberate gap, instead of the two occupying the same corner. */
	.chg-fab--show-mobile.chg-fab--right ~ .chg-totop {
		inset-inline-end: 1rem;
		inset-inline-start: auto;
		inset-block-end: calc(72px + 52px + 16px + env(safe-area-inset-bottom, 0px));
	}
	.chg-fab--show-mobile.chg-fab--left ~ .chg-totop {
		inset-inline-start: 1rem;
		inset-inline-end: auto;
		inset-block-end: calc(72px + 52px + 16px + env(safe-area-inset-bottom, 0px));
	}
	/* The FAB's fan-out reaches up past back-to-top's stacked slot while open
	   — step back-to-top aside for that moment rather than let them collide. */
	.chg-fab--show-mobile.is-open ~ .chg-totop {
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
	}
}
@media (prefers-reduced-motion: reduce) { .chg-totop { transition: opacity var(--chg-dur) var(--chg-ease); } }

/* =========================================================================
 * Site-wide micro-animations — load-in reveal + press feedback.
 * Hover states are untouched; this layers in (a) a gentle fade/rise as
 * content enters the viewport and (b) a quick, consistent press-down on tap/
 * click for every interactive control. Both respect prefers-reduced-motion.
 * ===================================================================== */

/* --- Hero / carousel entrance ------------------------------------------
   Same fade+rise character as the scroll-reveal below, but for above-the-
   fold content that can't wait for a scroll: theme.js (initHeroEntrance)
   adds .chg-enter to the hero copy/collage children and the carousel's
   first-slide content on load, then staggers in .is-in per element. */
.chg-enter {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s var(--chg-ease-out), transform 0.6s var(--chg-ease-out);
}
.chg-enter.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.chg-enter { opacity: 1; transform: none; transition: none; }
}

/* --- Load-in reveal --------------------------------------------------- */
/* theme.js (initScrollReveal) adds .chg-reveal to candidate elements on
   DOMContentLoaded and .is-inview the moment each crosses the viewport via
   IntersectionObserver — server-rendered content is never hidden from
   crawlers or no-JS visitors (the class is only ever added by JS, and the
   observer reveals immediately for anything already on-screen at load). */
.chg-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s var(--chg-ease-out), transform 0.55s var(--chg-ease-out);
}
.chg-reveal.is-inview { opacity: 1; transform: none; }
/* Staggered reveal for grids/rows of cards — each subsequent sibling lags
   slightly so the group animates in as a wave, not a flat pop. */
.chg-reveal:nth-child(2) { transition-delay: 60ms; }
.chg-reveal:nth-child(3) { transition-delay: 120ms; }
.chg-reveal:nth-child(4) { transition-delay: 180ms; }
.chg-reveal:nth-child(5) { transition-delay: 240ms; }
.chg-reveal:nth-child(n+6) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
	.chg-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Press feedback (not hover) ---------------------------------------
   A quick scale-down while actively pressed, consistent across every
   clickable control. Composed WITH each element's own positioning transform
   (translateY(-50%) centering, etc.) where one exists, never replacing it. */
.chg-iconbtn:active,
.chg-fab__toggle:active,
.chg-carousel__dot:active,
.chg-swatch:active .chg-swatch__fill,
.chg-pcard__wish:active,
.chg-searchoverlay__chip:active,
.chg-account-tile:active {
	transform: scale(0.92);
}
.chg-fab__link:active { transform: scale(0.9); }
.chg-carousel__arrow:active { transform: translateY(-50%) scale(0.9); }
.chg-totop.is-visible:active { transform: scale(0.9); }
.chg-social__link:active,
.chg-footer__col a:active { opacity: 0.7; }

.chg-iconbtn,
.chg-fab__toggle,
.chg-pcard__wish,
.chg-searchoverlay__chip,
.chg-account-tile {
	transition: transform var(--chg-dur-fast) var(--chg-ease), background var(--chg-dur) var(--chg-ease), color var(--chg-dur) var(--chg-ease);
}
.chg-swatch__fill { transition: transform var(--chg-dur-fast) var(--chg-ease); }

@media (prefers-reduced-motion: reduce) {
	.chg-iconbtn:active, .chg-fab__toggle:active, .chg-carousel__dot:active,
	.chg-swatch:active .chg-swatch__fill, .chg-pcard__wish:active,
	.chg-searchoverlay__chip:active, .chg-account-tile:active,
	.chg-fab__link:active,
	.chg-carousel__arrow:active, .chg-totop.is-visible:active { transform: none; }
}