/* =========================================================================
   Clickety Clak — component stylesheet
   Everything here consumes tokens exposed by theme.json as CSS custom
   properties (--wp--preset--color--*, --wp--preset--font-family--*,
   --wp--preset--font-size--*, --wp--custom--radius--*, --wp--custom--shadow--*,
   --wp--custom--spacing--*). No ad hoc hex/px values — see
   docs/04-design-system-tokens.md for the spec each block below implements.
   Mobile-first: base styles target ~360px, then min-width breakpoints layer
   on tablet (768px) and desktop (1024px+) rules, verified conceptually
   against 360 / 768 / 1440 per the phase's definition of done.
   ========================================================================= */

/* ---------------------------------------------------------------------
   0. Base / accessibility helpers
   --------------------------------------------------------------------- */

* {
	box-sizing: border-box;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal;
}

.cc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--wp--custom--spacing--4, 16px);
	z-index: 10000;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text-inverse);
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--5, 24px);
	border-radius: var(--wp--custom--radius--sm, 8px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	transition: top 0.15s ease;
}
.cc-skip-link:focus {
	top: var(--wp--custom--spacing--4, 16px);
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	position: fixed !important;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}
/* WooCommerce's Interactivity API cart/mini-cart markup ships two <img>
   tags per line item and toggles the `hidden` attribute on whichever one
   shouldn't show (e.g. .wc-block-cart-item__image in the mini-cart drawer
   -- found live 2026-09-22 rendering the product thumbnail twice, stacked,
   because the plain `img { display: block }` rule above has higher
   specificity than the browser's own `[hidden] { display: none }` default
   and was winning). Restoring `[hidden]` for every element, not just
   images, since any future core/plugin markup relying on this native
   attribute would have the same bug otherwise. */
[hidden] {
	display: none !important;
}

/* Generic placeholder image box — CSS-only, used until real product
   photography exists. Never an external/scraped image. */
.cc-placeholder-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-3) 0%, var(--wp--preset--color--background-surface) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.cc-placeholder-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(43, 42, 51, 0.04),
		rgba(43, 42, 51, 0.04) 2px,
		transparent 2px,
		transparent 14px
	);
}
.cc-placeholder-media svg {
	position: relative;
	width: 40%;
	height: 40%;
	color: var(--wp--preset--color--text-muted);
}
.cc-placeholder-media--tile {
	aspect-ratio: auto;
	min-height: 320px;
}
.cc-placeholder-media--wide {
	aspect-ratio: 16 / 9;
}

.cc-placeholder-note {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	font-style: italic;
}

/* ---------------------------------------------------------------------
   1. Buttons — variants beyond core theme.json defaults (Ghost, Pill,
      sizes, disabled/focus states). Primary is set in theme.json styles.elements.button.
   --------------------------------------------------------------------- */

.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--5, 24px);
	box-shadow: var(--wp--custom--shadow--sm);
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	font-size: var(--wp--preset--font-size--body);
}
.wp-block-button__link:hover {
	box-shadow: var(--wp--custom--shadow--md);
}
.wp-block-button__link:active {
	transform: scale(0.98);
}
.wp-block-button:not(.is-style-secondary):not(.is-style-ghost) .wp-block-button__link:focus-visible {
	box-shadow: var(--wp--custom--shadow--md);
}

.wp-block-button.is-style-secondary .wp-block-button__link,
.cc-button-secondary {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--text);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.cc-button-secondary:hover {
	background-color: #f55a42;
	color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-ghost .wp-block-button__link,
.cc-button-ghost {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
	box-shadow: none;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.cc-button-ghost:hover {
	background-color: rgba(58, 99, 216, 0.08);
	box-shadow: none;
}
.wp-block-button.is-style-ghost .wp-block-button__link:active,
.cc-button-ghost:active {
	background-color: rgba(58, 99, 216, 0.14);
}

.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.cc-button-sm {
	min-height: 36px;
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--4, 16px);
	font-size: var(--wp--preset--font-size--caption);
}

.cc-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.cc-icon-button:hover {
	background-color: rgba(58, 99, 216, 0.08);
}
.cc-icon-button:disabled {
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
	cursor: not-allowed;
}

button:disabled,
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"] {
	background-color: var(--wp--preset--color--border) !important;
	color: var(--wp--preset--color--text-muted) !important;
	box-shadow: none !important;
	cursor: not-allowed;
}
.wp-block-button.is-style-ghost .wp-block-button__link:disabled,
.wp-block-button.is-style-ghost .wp-block-button__link[aria-disabled="true"],
.cc-button-ghost:disabled,
.cc-button-ghost[aria-disabled="true"] {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--text-muted);
	color: var(--wp--preset--color--text-muted) !important;
}

/* ---------------------------------------------------------------------
   2. Site header / navigation
   --------------------------------------------------------------------- */

.cc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Three-column grid (not flex space-between) so the centered logo stays
   truly centered regardless of how wide the left cluster (menu/search/nav)
   is versus the right cluster (wishlist/account/cart) -- a flex
   space-between layout only centers the middle child when both outer
   children happen to match in width. */
.cc-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--custom--spacing--4, 16px);
	padding-block: var(--wp--custom--spacing--3, 12px);
}

.cc-header__left {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--3, 12px);
	justify-self: start;
}

.cc-header__logo {
	justify-self: center;
	min-width: 0;
	overflow: hidden;
}

.cc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--2, 8px);
	justify-self: end;
}

/* Mobile compact mode: hamburger + search + centered logo + wishlist/
   account/cart is 6 elements fighting for one row on a ~360-390px phone
   at full desktop sizing (40px icon buttons, 44px hamburger, full wordmark)
   -- shrink every element in that row so the whole header fits without
   wrapping or horizontal overflow, instead of the full-size treatment
   that's fine once the desktop nav frees up on wider screens. */
@media (max-width: 600px) {
	.cc-header.has-global-padding {
		padding-left: var(--wp--custom--spacing--3, 12px) !important;
		padding-right: var(--wp--custom--spacing--3, 12px) !important;
	}
	.cc-header__bar {
		gap: var(--wp--custom--spacing--2, 8px);
	}
	.cc-header__left,
	.cc-header__actions {
		gap: 6px;
	}
	.cc-icon-button {
		width: 34px;
		height: 34px;
		min-width: 34px;
	}
	.cc-icon-button svg {
		width: 15px;
		height: 15px;
	}
	.cc-wordmark__logo {
		width: 86px !important;
		height: 36px !important;
	}
}

/* Wordmark: the real logo (transparent PNG, commissioned via ChatGPT image
   gen, confirmed 2026-08-30), rendered by cc_wordmark_svg() in
   functions.php. Replaces the earlier hand-built "Two-Tone Stack" chip+text
   lockup -- the `.cc-wordmark__chip*` / `__lines` / `__top` / `__bottom`
   rules that styled that version are gone; only the outer `.cc-wordmark`
   link and the `__logo` image itself need styling now. */
.cc-wordmark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
/* width is set explicitly here (not `width: auto`) alongside height,
   with `!important` on both: on some page loads (confirmed live
   2026-08-30 -- cart/account render huge, homepage renders correctly,
   same CSS file, same viewport) the image rendered at its raw HTML
   width/height attributes instead of this rule's height, consistent
   with a grid auto-track-sizing race against the img's intrinsic size
   rather than a real selector/specificity conflict -- Safari's grid
   layout can size the `auto` column from the image's natural dimensions
   before an aspect-ratio-derived width resolves. Giving both dimensions
   as fixed px removes any need for the browser to compute one from the
   other via the image's intrinsic size at all.
   Logo swapped 2026-08-30 to a wide horizontal lockup (icon + wordmark
   side by side, ~2.4:1 aspect, was a ~1:1 square badge before) -- sizes
   below are set by width first (typical header-logo sizing) with height
   computed from the same 1200x500 source ratio, not doubled-square
   values left over from the old logo. */
.cc-wordmark__logo {
	display: block;
	width: 106px !important;
	height: 44px !important;
}
.cc-footer .cc-wordmark__logo {
	width: 134px !important;
	height: 56px !important;
}

/* Primary nav (desktop): core Navigation block styling supplement */
.cc-primary-nav {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}
.cc-primary-nav .wp-block-navigation-item > a {
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--3, 12px);
	border-radius: var(--wp--custom--radius--sm, 8px);
}
.cc-primary-nav .wp-block-navigation-item > a:hover {
	background-color: rgba(58, 99, 216, 0.08);
}
.cc-primary-nav .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

/* Mobile nav disclosure — native <details>/<summary>, works with JS off */
.cc-mobile-nav {
	display: block;
}
/* Sizing/shape/color now come from the shared .cc-icon-button class (same
   pill, 40px, border look as search/wishlist/account/cart) added directly
   on the <summary> in parts/header.html -- only the <details>/<summary>-
   specific behavior lives here. */
.cc-mobile-nav summary {
	list-style: none;
	cursor: pointer;
}
.cc-mobile-nav summary::-webkit-details-marker {
	display: none;
}
.cc-mobile-nav[open] summary {
	background-color: rgba(58, 99, 216, 0.08);
}
.cc-mobile-nav__panel {
	position: fixed;
	inset: 0;
	top: 65px;
	background: var(--wp--preset--color--background);
	padding: var(--wp--custom--spacing--5, 24px);
	overflow-y: auto;
	z-index: 99;
}
.cc-mobile-nav__panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--1, 4px);
}
.cc-mobile-nav__panel a {
	display: block;
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--2, 8px);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-5, 1.125rem);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Full menu from 1280px: below that (small laptops at 1024-1279px) the
   menu plus the right-hand icons didn't fit on one line and the icons
   wrapped onto a second row on every page (2026-10-14). */
@media (min-width: 1280px) {
	.cc-mobile-nav {
		display: none;
	}
}
.cc-desktop-nav {
	display: none;
}
@media (min-width: 1280px) {
	.cc-desktop-nav {
		display: flex;
		align-items: center;
	}
}

/* Region/currency selector placeholder (UI slot only — logic is Phase 4/6) */
.cc-region-selector__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--spacing--1, 4px);
	background: transparent;
	border: none;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text);
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--2, 8px);
	border-radius: var(--wp--custom--radius--sm, 8px);
	cursor: default;
}
.cc-region-selector__trigger:hover {
	background-color: rgba(58, 99, 216, 0.08);
}
.cc-region-selector__icon {
	display: inline-flex;
	color: var(--wp--preset--color--text);
}

/* ---------------------------------------------------------------------
   3. Product card
   --------------------------------------------------------------------- */

/* .cc-product-card is one unified rounded frame split into two color zones
   (media zone tinted, text zone cream) — a CSS grid so the media link, the
   text link, and the floating buttons (all direct children/siblings) can be
   placed by grid cell instead of position:absolute needing a positioning
   context scoped to just the image. Row 1 is the photo (full width); row 2
   is the text zone (category + name take the full card width). The
   add-to-cart button is pinned to the bottom-right corner of the whole card
   via position:absolute — not grid-placed in its own column — because the
   custom homepage/shop card loops render WooCommerce's *classic* add-to-cart
   markup (`<a class="add_to_cart_button">` with no `.wp-block-button`
   wrapper div, confirmed live 2026-08-28), unlike the WooCommerce-Blocks
   archive grid (.wc-block-product below) which does have that wrapper —
   position:absolute-to-card works identically either way. */
.cc-product-card {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--wp--preset--color--accent-3);
	border: none;
	border-radius: var(--wp--custom--radius--lg, 24px);
	box-shadow: var(--wp--custom--shadow--sm);
	overflow: hidden;
	padding: 0;
	position: relative;
}
.cc-product-card__media-link {
	grid-row: 1;
	grid-column: 1;
	display: block;
	background: transparent;
	padding: 0;
}
.cc-product-card__link {
	grid-row: 2;
	grid-column: 1;
	text-decoration: none;
	color: inherit;
	background: transparent;
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--4, 16px) var(--wp--custom--spacing--4, 16px);
	position: relative;
	/* Grid items default to min-width:auto, which floors their width at
	   their content's min-content size -- found live 2026-09-22: once the
	   title below got `white-space: nowrap` (for reliable ellipsis
	   truncation), its min-content size became its full unwrapped text
	   width, which forced this whole grid item wider than the card's own
	   1fr track (measured: card 159px, this element rendering at 266px),
	   silently breaking every width-dependent calculation inside it,
	   including the title's own overflow/ellipsis clipping. */
	min-width: 0;
}
.cc-product-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.cc-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: hidden;
	background: var(--wp--preset--color--background-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cc-product-card__media img,
.cc-product-card__media .cc-placeholder-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.2s ease;
}
.cc-product-card:hover .cc-product-card__media img,
.cc-product-card:hover .cc-product-card__media .cc-placeholder-media {
	transform: scale(1.03);
}

/* Wishlist toggle + quick-view stay overlaid on the photo (row 1). */
.cc-product-card .woosw-btn,
.cc-product-card .cc-quick-view-trigger {
	grid-row: 1;
	grid-column: 1;
	z-index: 3;
	align-self: end;
	margin: 0 0 var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--2, 8px);
}
.cc-product-card .woosw-btn {
	align-self: start;
	justify-self: end;
	margin: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--2, 8px) 0 0;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: rgba(255, 255, 255, 0.85);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--text);
}
/* Add-to-cart, pinned to the card's bottom-right corner with a margin. Not
   grid-placed: works whether or not a .wp-block-button wrapper is present
   (it isn't, for these classic-template cards — see note above). */
.cc-product-card .wp-block-button,
.cc-product-card .add_to_cart_button,
.cc-product-card .wp-block-button__link {
	position: absolute;
	right: var(--wp--custom--spacing--4, 16px);
	bottom: var(--wp--custom--spacing--4, 16px);
	margin: 0;
	z-index: 5;
}
.cc-product-card .add_to_cart_button,
.cc-product-card .wp-block-button__link {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--sm);
	color: var(--wp--preset--color--text-inverse);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-indent: -999px;
	white-space: nowrap;
}
.cc-product-card .add_to_cart_button::before,
.cc-product-card .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	transform: translate(-50%, -50%);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* WooCommerce's AJAX add-to-cart success state injects this link right
   after the button (core behavior, not our markup) -- unstyled, it falls
   back to plain browser blue-underline text and overflows the card. Render
   it as a small pill mirroring the add-to-cart button on the opposite
   corner, since .cc-product-card already provides the positioning context. */
.cc-product-card .added_to_cart,
.wc-block-product .added_to_cart {
	position: absolute;
	left: var(--wp--custom--spacing--3, 12px);
	bottom: var(--wp--custom--spacing--3, 12px);
	z-index: 5;
	background: var(--wp--preset--color--background-surface);
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	box-shadow: var(--wp--custom--shadow--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}
.cc-product-card .added_to_cart:hover,
.wc-block-product .added_to_cart:hover {
	text-decoration: underline;
}

.cc-badge {
	grid-row: 1;
	grid-column: 1;
	align-self: start;
	justify-self: start;
	margin: var(--wp--custom--spacing--3, 12px) 0 0 var(--wp--custom--spacing--3, 12px);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	padding: var(--wp--custom--spacing--1, 4px) var(--wp--custom--spacing--3, 12px);
	box-shadow: var(--wp--custom--shadow--sm);
	z-index: 2;
}
.cc-badge--sale {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--text);
}
.cc-badge--rank {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--text);
}

/* Category pill — sits at the top of the text zone but pulled up so it
   overlaps the seam between the tinted photo zone and the cream text zone
   (matches the reference card). */
.cc-product-card__eyebrow {
	display: inline-flex;
	position: relative;
	z-index: 2;
	margin: -22px 0 var(--wp--custom--spacing--2, 8px);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text-inverse);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: var(--wp--custom--spacing--1, 4px) var(--wp--custom--spacing--2, 8px);
}
.cc-product-card__eyebrow:empty {
	display: none;
}

.cc-product-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	margin: 0 0 var(--wp--custom--spacing--1, 4px);
	/* text-overflow:ellipsis requires a block-level box with a resolved
	   width; this is a <span>, inline by default, which silently ignores
	   white-space/overflow/text-overflow entirely without this. */
	display: block;
	/* Single-line, ellipsis-truncated (found live 2026-09-22: the previous
	   2-line -webkit-line-clamp had a real rendering bug on real devices --
	   a visible sliver of the clipped 2nd/3rd line's glyphs bled through
	   underneath the truncated text, confirmed via computed styles showing
	   correct box height/no real DOM overlap, so it was the clamp
	   mechanism itself misrendering, not a layout bug. Plain ellipsis
	   truncation has no such quirk and the full name is always still
	   reachable on the product's own page). */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Reserve room for the absolutely-positioned add-to-cart button pinned
	   to the card's bottom-right (found live 2026-09-22: on a narrow card
	   a one-line title ran the full card width and rendered underneath the
	   button instead of stopping clear of it -- .cc-price already reserves
	   this same 56px, the title just hadn't gotten the same treatment). */
	padding-right: 56px;
}

.cc-product-card .cc-stock-badge--in-stock {
	display: none;
}
.cc-product-card .cc-stock-badge {
	background: none;
	border-radius: 0;
	padding: 0;
	font-size: 0.7rem;
	margin-top: var(--wp--custom--spacing--1, 4px);
}

.cc-quick-view-trigger {
	justify-self: start;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	color: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--4, 16px);
	box-shadow: var(--wp--custom--shadow--sm);
	opacity: 0;
	transition: opacity 0.15s ease;
}
.cc-product-card:hover .cc-quick-view-trigger,
.cc-product-card:focus-within .cc-quick-view-trigger {
	opacity: 1;
}
.cc-product-card .cc-price {
	display: block;
	font-size: 0.8rem;
	padding-right: 56px;
}
@media (pointer: coarse) {
	.cc-quick-view-trigger {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------
   4. Price display / stock badges
   --------------------------------------------------------------------- */

.cc-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.cc-price--regular-struck {
	text-decoration: line-through;
	color: var(--wp--preset--color--text-muted);
	font-weight: 700;
	margin-right: var(--wp--custom--spacing--2, 8px);
}
.cc-price--sale {
	color: var(--wp--preset--color--error);
}

.cc-stock-badge {
	display: inline-flex;
	align-items: center;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	padding: var(--wp--custom--spacing--1, 4px) var(--wp--custom--spacing--3, 12px);
}
.cc-stock-badge--in-stock {
	background: var(--wp--preset--color--success-bg);
	color: var(--wp--preset--color--success);
}
.cc-stock-badge--low-stock,
.cc-stock-badge--backorder {
	background: var(--wp--preset--color--warning-bg);
	color: var(--wp--preset--color--warning);
}
.cc-stock-badge--out-of-stock {
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
}

/* ---------------------------------------------------------------------
   5. Category tiles, Shop menu, category buttons (2026-10-26 redesign:
      customers didn't see the two categories or that tiles were clickable)
   --------------------------------------------------------------------- */

/* Homepage "Shop by category": tiles side by side at every width. */
.cc-category-grid {
	display: grid;
	grid-template-columns: repeat(var(--cc-cat-cols-sm, 2), minmax(0, 1fr));
	gap: var(--wp--custom--spacing--3, 12px);
}
@media (min-width: 768px) {
	.cc-category-grid {
		grid-template-columns: repeat(var(--cc-cat-cols, 2), minmax(0, 1fr));
		gap: var(--wp--custom--spacing--5, 24px);
	}
}

.cc-category-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--wp--custom--radius--lg, 24px);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--background-surface);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--sm);
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cc-category-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow--md);
}
.cc-category-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.cc-category-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--preset--color--accent-3);
}
@media (min-width: 768px) {
	.cc-category-tile__media {
		aspect-ratio: 3 / 2;
	}
}
.cc-category-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cc-category-tile:hover .cc-category-tile__img {
	transform: scale(1.04);
}
.cc-category-tile__count {
	position: absolute;
	top: var(--wp--custom--spacing--3, 12px);
	left: var(--wp--custom--spacing--3, 12px);
	background: var(--wp--preset--color--background-surface);
	color: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 4px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 800;
	box-shadow: var(--wp--custom--shadow--sm);
}
.cc-category-tile__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--spacing--2, 8px);
	padding: var(--wp--custom--spacing--4, 16px);
	flex: 1;
}
.cc-category-tile__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3, 1.75rem);
	font-weight: 800;
	line-height: 1.15;
}
.cc-category-tile__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text-muted);
}
/* Same look as the site's primary button ("Shop all"): theme.json
   button element (14px corners, bold body font, inverse text) plus the
   section-1 sizing, shadow and press effect. */
.cc-category-tile__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--spacing--2, 8px);
	margin-top: auto;
	min-height: 44px;
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--5, 24px);
	border-radius: 14px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text-inverse);
	box-shadow: var(--wp--custom--shadow--sm);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	white-space: nowrap;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.cc-category-tile:hover .cc-category-tile__button {
	background: var(--wp--preset--color--primary-hover);
	box-shadow: var(--wp--custom--shadow--md);
}
.cc-category-tile:active .cc-category-tile__button {
	transform: scale(0.98);
}
.cc-category-tile__button-name {
	margin-left: -0.25em; /* "Shop Clickers": one normal space, not the flex gap */
}
@media (max-width: 479px) {
	.cc-category-tile__button-name {
		display: none;
	}
}
.cc-category-tile__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}
.cc-category-tile:hover .cc-category-tile__arrow {
	transform: translateX(3px);
}
@media (max-width: 767px) {
	.cc-category-grid > .cc-category-tile:last-child:nth-child(odd):not(:only-child) {
		grid-column: 1 / -1;
	}
	.cc-category-grid > .cc-category-tile:last-child:nth-child(odd):not(:only-child) .cc-category-tile__media {
		aspect-ratio: 2 / 1;
	}
	.cc-category-tile__panel {
		padding: var(--wp--custom--spacing--3, 12px);
	}
	.cc-category-tile__title {
		font-size: var(--wp--preset--font-size--h-5, 1.125rem);
	}
	.cc-category-tile__desc {
		font-size: var(--wp--preset--font-size--caption);
		line-height: 1.35;
	}
	.cc-category-tile__button {
		align-self: stretch;
		padding: 10px 12px;
	}
	.cc-category-tile__count {
		top: 8px;
		left: 8px;
		padding: 3px 9px;
		font-size: 0.75rem;
	}
}

/* Desktop menu with the "Shop" panel. */
.cc-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--1, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cc-nav__item {
	position: relative;
}
.cc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--3, 12px);
	border: 0;
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: none;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
}
.cc-nav__link:hover,
.cc-nav__item--shop.is-open .cc-nav__toggle {
	background-color: rgba(58, 99, 216, 0.08);
}
.cc-nav__link.is-current {
	color: var(--wp--preset--color--primary);
}
.cc-nav__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.cc-nav__caret {
	transition: transform 0.2s ease;
}
.cc-nav__item--shop.is-open .cc-nav__caret {
	transform: rotate(180deg);
}
.cc-shop-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	padding-top: var(--wp--custom--spacing--2, 8px); /* hover bridge */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.cc-nav__item--shop:hover .cc-shop-panel,
.cc-nav__item--shop.is-open .cc-shop-panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.cc-nav__item--shop.is-closing .cc-shop-panel {
	visibility: hidden;
	opacity: 0;
}
.cc-shop-panel__inner {
	display: grid;
	grid-template-columns: repeat(var(--cc-panel-cols, 3), 190px);
	gap: var(--wp--custom--spacing--2, 8px);
	padding: var(--wp--custom--spacing--3, 12px);
	background: var(--wp--preset--color--background-surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg, 24px);
	box-shadow: var(--wp--custom--shadow--lg);
}
.cc-shop-panel__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--2, 8px);
	padding: var(--wp--custom--spacing--2, 8px);
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--md, 16px);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.cc-shop-panel__card:hover,
.cc-shop-panel__card:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}
.cc-shop-panel__thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: var(--wp--preset--color--accent-3);
}
.cc-shop-panel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cc-shop-panel__thumb--all {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.cc-shop-panel__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cc-shop-panel__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}
.cc-shop-panel__meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted);
}
@media (prefers-reduced-motion: reduce) {
	.cc-category-tile,
	.cc-category-tile__img,
	.cc-category-tile__arrow,
	.cc-shop-panel,
	.cc-nav__caret {
		transition: none;
	}
}

/* Mobile menu: "Shop" is a normal row; its categories sit right under it,
   indented, in the same type, with a small photo and count. */
/* Needs the panel prefix: `.cc-mobile-nav__panel ul` (padding: 0) would win otherwise. */
.cc-mobile-nav__panel .cc-mobile-shop__cats {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--6, 32px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
}
.cc-mobile-nav__panel a.cc-mobile-shop__all {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--3, 12px);
	border-bottom: 0;
}
.cc-mobile-nav__panel a.cc-mobile-shop__cat {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--3, 12px);
	padding: 6px var(--wp--custom--spacing--2, 8px);
	border-bottom: 0;
	font-size: 1rem;
}
.cc-mobile-shop__thumb {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border-radius: 9px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--primary);
}
.cc-mobile-shop__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cc-mobile-shop__name {
	flex: 1;
}
.cc-mobile-shop__count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}

/* Category buttons (Shop page, category pages, homepage hero). */
.cc-category-chips {
	display: flex;
	gap: var(--wp--custom--spacing--2, 8px);
	margin-top: var(--wp--custom--spacing--5, 24px);
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.cc-category-chips::-webkit-scrollbar {
	display: none;
}
.cc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	min-height: 44px;
	padding: 8px 18px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--background-surface);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cc-chip:hover {
	border-color: var(--wp--preset--color--primary);
}
.cc-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.cc-chip.is-current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
.cc-chip__count {
	font-weight: 700;
	opacity: 0.7;
}
.cc-chip--outline {
	min-height: 40px;
	padding: 6px 16px;
	border-color: var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
}
.cc-chip--outline:hover {
	background: rgba(58, 99, 216, 0.08);
}
.cc-hero-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--spacing--2, 8px);
	margin-top: var(--wp--custom--spacing--3, 12px);
}

/* Products load as the shopper scrolls (interactions.js
   initInfiniteScroll); the page links are only for Google / no-JS. */
.cc-shop-pagination.is-infinite {
	display: none;
}
.cc-infinite-status {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	min-height: 48px;
	padding: var(--wp--custom--spacing--4, 16px) 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}
.cc-infinite-status__dots {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
.cc-infinite-status__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	animation: cc-dot 0.9s ease-in-out infinite;
}
.cc-infinite-status__dots span:nth-child(2) { animation-delay: 0.15s; }
.cc-infinite-status__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cc-dot {
	0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
	40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.cc-infinite-status__dots span { animation: none; opacity: 0.6; }
}
.cc-infinite-status button {
	min-height: 44px;
	padding: 8px 18px;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--primary);
	font: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   6. Horizontal rail (bestsellers)
   --------------------------------------------------------------------- */

.cc-rail {
	position: relative;
}
.cc-rail__track {
	display: flex;
	gap: var(--wp--custom--spacing--4, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: var(--wp--custom--spacing--2, 8px);
	padding-inline: var(--wp--custom--spacing--1, 4px);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.cc-rail__track > * {
	scroll-snap-align: start;
	flex: 0 0 240px;
}
@media (min-width: 768px) {
	.cc-rail__track > * {
		flex-basis: 280px;
	}
}
.cc-rail__nav {
	display: none;
}
@media (min-width: 1024px) {
	.cc-rail__nav {
		display: flex;
		justify-content: flex-end;
		gap: var(--wp--custom--spacing--2, 8px);
		margin-bottom: var(--wp--custom--spacing--3, 12px);
	}
}

/* ---------------------------------------------------------------------
   7. Stat strip
   --------------------------------------------------------------------- */

.cc-stat-strip {
	background: var(--wp--preset--color--accent-3);
	padding-block: var(--wp--custom--spacing--6, 32px);
	border-radius: var(--wp--custom--radius--lg, 24px);
}
.cc-stat-strip__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--custom--spacing--5, 24px);
	text-align: center;
}
@media (min-width: 768px) {
	.cc-stat-strip__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.cc-stat-strip__icon {
	width: 32px;
	height: 32px;
	margin: 0 auto var(--wp--custom--spacing--2, 8px);
	color: var(--wp--preset--color--accent-2);
}
.cc-stat-strip__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	display: block;
}
.cc-stat-strip__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------
   8. Testimonial carousel
   --------------------------------------------------------------------- */

.cc-testimonial-card {
	background: var(--wp--preset--color--background-surface);
	border-radius: var(--wp--custom--radius--md, 14px);
	box-shadow: var(--wp--custom--shadow--sm);
	padding: var(--wp--custom--spacing--5, 24px);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.cc-testimonial-card__quote-mark {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
.cc-testimonial-card__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--text);
	flex-grow: 1;
	margin-bottom: var(--wp--custom--spacing--4, 16px);
}
.cc-testimonial-card__attribution {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--3, 12px);
}
.cc-testimonial-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--accent-2);
	flex-shrink: 0;
}
.cc-testimonial-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h5);
	font-weight: 600;
	margin: 0;
}
.cc-testimonial-card__meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}
.cc-star-row {
	color: var(--wp--preset--color--accent-1);
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
.cc-star-row .cc-star--empty {
	color: var(--wp--preset--color--border);
}

.cc-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--wp--custom--spacing--2, 8px);
	margin-top: var(--wp--custom--spacing--4, 16px);
}
.cc-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: none;
	background: var(--wp--preset--color--border);
	padding: 0;
	cursor: pointer;
}
.cc-carousel__dot[aria-current="true"] {
	background: var(--wp--preset--color--primary);
	width: 20px;
}

/* ---------------------------------------------------------------------
   9. Newsletter signup
   --------------------------------------------------------------------- */

.cc-newsletter {
	background: var(--wp--preset--color--accent-3);
	border-radius: var(--wp--custom--radius--lg, 24px);
	padding: var(--wp--custom--spacing--6, 32px);
	text-align: center;
}
.cc-newsletter--dark {
	background: transparent;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--spacing--4, 16px);
}
.cc-newsletter--dark .cc-newsletter__heading,
.cc-newsletter--dark .cc-newsletter__desc {
	/* Footer newsletter now sits on the light Soft Lavender footer
	   background (see .cc-footer below), not a dark surface — use
	   standard Ink text, not the inverse (white) text meant for dark
	   backgrounds. Class name kept ("--dark") for markup/shortcode
	   compatibility; only the color mapping changed. */
	color: var(--wp--preset--color--text);
	margin: 0;
}
.cc-newsletter--dark .cc-newsletter__heading {
	font-size: var(--wp--preset--font-size--h3);
	flex: 0 0 auto;
}
@media (min-width: 900px) {
	.cc-newsletter--dark {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
	.cc-newsletter--dark .cc-newsletter__desc {
		flex: 1 1 260px;
	}
	.cc-newsletter--dark .cc-newsletter__form {
		flex: 0 0 auto;
		margin: 0;
	}
}
.cc-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--3, 12px);
	max-width: 450px;
	margin: var(--wp--custom--spacing--4, 16px) auto 0;
}
@media (min-width: 768px) {
	.cc-newsletter__form {
		flex-direction: row;
	}
}
.cc-newsletter__form input[type="email"] {
	flex: 1;
	width: 300px;
	max-width: 100%;
}
.cc-newsletter--dark .cc-newsletter__form input[type="email"] {
	background: var(--wp--preset--color--background-surface);
}

/* ---------------------------------------------------------------------
   10. Form fields
   --------------------------------------------------------------------- */

.cc-field {
	display: block;
	margin-bottom: var(--wp--custom--spacing--4, 16px);
	text-align: left;
}
.cc-field label,
.cc-field__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
.cc-field input[type="text"],
.cc-field input[type="email"],
.cc-field input[type="tel"],
.cc-field input[type="password"],
.cc-field input[type="search"],
.cc-field textarea,
.cc-field select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	min-height: 44px;
	background: var(--wp--preset--color--background-surface);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm, 8px);
	padding: var(--wp--custom--spacing--3, 12px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px rgba(58, 99, 216, 0.2);
	outline: none;
}
.cc-field--error input,
.cc-field--error textarea,
.cc-field--error select {
	border-color: var(--wp--preset--color--error);
}
.cc-catalog-sorting {
	margin: 0;
}
.cc-catalog-sorting__select {
	width: auto;
	min-height: 40px;
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--3, 12px);
	font-size: var(--wp--preset--font-size--caption);
}
.cc-field__error {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--1, 4px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--error);
	margin-top: var(--wp--custom--spacing--1, 4px);
}
.cc-field__help {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--custom--spacing--1, 4px);
}
input:disabled,
textarea:disabled,
select:disabled {
	background: rgba(231, 226, 216, 0.4);
	color: var(--wp--preset--color--text-muted);
}

/* ---------------------------------------------------------------------
   11. Mini-cart / cart drawer (WooCommerce Mini Cart block wrapper)
   --------------------------------------------------------------------- */

.wc-block-mini-cart__drawer,
.cc-cart-drawer {
	background: var(--wp--preset--color--background-surface) !important;
	box-shadow: var(--wp--custom--shadow--lg);
}
.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--h3) !important;
}
.wc-block-mini-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Mini-cart line item (2026-09-22, per owner feedback on a live phone
   screenshot): image was small (64px) with dead space beside it below the
   price, and the quantity stepper was full button-sized, out of proportion
   with the name/price text next to it. */
.wc-block-mini-cart-items .wc-block-cart-item__image {
	width: 96px;
	vertical-align: top;
	padding-top: 0;
}
.wc-block-mini-cart-items .wc-block-cart-item__image a {
	display: block;
	height: 100%;
}
.wc-block-mini-cart-items .wc-block-cart-item__image img {
	width: 96px;
	height: 100%;
	min-height: 96px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 14px);
}
.wc-block-mini-cart-items .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--2, 8px);
	margin-top: var(--wp--custom--spacing--1, 4px);
}
.wc-block-mini-cart-items .wc-block-components-quantity-selector {
	min-height: 0;
	height: 28px;
	border-radius: var(--wp--custom--radius--sm, 8px);
}
.wc-block-mini-cart-items .wc-block-components-quantity-selector__input {
	height: 26px;
	min-height: 0;
	font-size: var(--wp--preset--font-size--caption);
	padding: 0;
}
.wc-block-mini-cart-items .wc-block-components-quantity-selector__button {
	height: 26px;
	min-height: 0;
	width: 26px;
	font-size: var(--wp--preset--font-size--caption);
	padding: 0;
}
.wc-block-mini-cart-items .wc-block-cart-item__remove-link {
	width: 26px;
	height: 26px;
	padding: 0;
}
.wc-block-mini-cart-items .wc-block-cart-item__remove-link svg {
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------------------
   12. Footer
   --------------------------------------------------------------------- */

.cc-footer {
	/* Warm/light footer (Soft Lavender), not stark black — per the locked
	   token spec (docs/04-design-system-tokens.md §1, accent-3): "Decorative
	   section background only ... Always paired with --color-text at >15:1
	   (very light bg)." Replaces the previous Ink 900 / inverse-text pairing. */
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--text);
	padding-block: var(--wp--custom--spacing--7, 48px) var(--wp--custom--spacing--5, 24px);
}
.cc-footer a {
	color: var(--wp--preset--color--text);
}
.cc-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--custom--spacing--6, 32px);
}
/* WordPress's block-gap margin landed on every column but the first, so
   "Shop" sat 24px higher than "Info"/"Support"; the grid gap already
   spaces them. */
.cc-footer__grid > * {
	margin-block-start: 0;
}
@media (min-width: 768px) {
	.cc-footer__grid {
		grid-template-columns: repeat(3, 1fr) 1.5fr;
	}
}
.cc-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	text-align: left;
	gap: var(--wp--custom--spacing--3, 12px);
}
.cc-footer__brand-tagline {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	max-width: 26ch;
	margin: 0;
}
.cc-footer__social {
	display: flex;
	justify-content: center;
	gap: var(--wp--custom--spacing--3, 12px);
	margin-top: var(--wp--custom--spacing--5, 24px);
}
.cc-footer__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h6);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text);
	margin-bottom: var(--wp--custom--spacing--3, 12px);
}
.cc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--2, 8px);
	font-family: var(--wp--preset--font-family--body);
}
.cc-footer__bottom {
	margin-top: var(--wp--custom--spacing--6, 32px);
	padding-top: var(--wp--custom--spacing--4, 16px);
	border-top: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--spacing--3, 12px);
	align-items: center;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
}

/* Phones: footer centered (owner request 2026-10-26). From 768px the
   four-column layout stays left-aligned. */
@media (max-width: 767px) {
	.cc-footer__grid,
	.cc-footer .cc-newsletter--dark {
		text-align: center;
	}
	.cc-footer .cc-newsletter--dark {
		align-items: center;
	}
	.cc-footer__links {
		align-items: center;
	}
	.cc-footer__brand {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	.cc-footer__bottom {
		justify-content: center;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------
   13. My Account (WooCommerce classic-shortcode markup styling)
   --------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--1, 4px);
}
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--wp--custom--spacing--3, 12px);
	border-radius: var(--wp--custom--radius--sm, 8px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--background-surface);
	color: var(--wp--preset--color--primary);
}
.woocommerce-MyAccount-content table,
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--body);
}
.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--wp--custom--spacing--3, 12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}
.cc-account-panel--placeholder {
	margin-top: var(--wp--custom--spacing--6, 32px);
	padding: var(--wp--custom--spacing--5, 24px);
	border: 1.5px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 14px);
}

/* ---------------------------------------------------------------------
   14. Shop / archive filters + product grid
   --------------------------------------------------------------------- */

.cc-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--custom--spacing--6, 32px);
}
@media (min-width: 1024px) {
	.cc-shop-layout {
		grid-template-columns: 260px 1fr;
	}
}
.cc-filters {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 14px);
	padding: var(--wp--custom--spacing--4, 16px);
}
.cc-filters summary {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	cursor: pointer;
}
@media (min-width: 1024px) {
	.cc-filters {
		border: none;
		padding: 0;
	}
}

/* ---------------------------------------------------------------------
   15. Single product
   --------------------------------------------------------------------- */

.cc-product-gallery {
	display: grid;
	gap: var(--wp--custom--spacing--3, 12px);
}
.cc-product-gallery__thumbs {
	display: flex;
	gap: var(--wp--custom--spacing--2, 8px);
	overflow-x: auto;
}
.cc-product-gallery__thumbs .cc-placeholder-media {
	width: 72px;
	flex-shrink: 0;
}
.cc-product-meta-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
}
.cc-product-meta-table th,
.cc-product-meta-table td {
	text-align: left;
	padding: var(--wp--custom--spacing--2, 8px) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.cc-product-meta-table th {
	color: var(--wp--preset--color--text-muted);
	font-weight: 700;
	width: 40%;
}

/* Product safety notice (choking hazard / small parts), single-product
   page. Uses the existing warning color pair (same tokens as the low-
   stock/backorder badge) since this is the same "heads up, not an error"
   register, not a destructive/error state. */
.cc-safety-notice {
	margin-top: var(--wp--custom--spacing--4, 16px);
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--4, 16px);
	background: var(--wp--preset--color--warning-bg);
	color: var(--wp--preset--color--warning);
	border-radius: var(--wp--custom--radius--sm, 8px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}
.cc-safety-notice strong {
	display: block;
	margin-bottom: 2px;
}

/* Shipping / Returns / How it's made accordion on product pages
   (cc_product_shipping_returns). Native <details>, no JS. */
.cc-policy-accordion {
	clear: both;
	margin-top: var(--wp--custom--spacing--5, 24px);
	margin-bottom: var(--wp--custom--spacing--5, 24px);
	font-family: var(--wp--preset--font-family--body);
	border-top: 1px solid var(--wp--preset--color--border);
}
.cc-policy-accordion__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.cc-policy-accordion__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--wp--custom--spacing--3, 12px) 0;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.cc-policy-accordion__item summary::-webkit-details-marker {
	display: none;
}
.cc-policy-accordion__item summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	margin-right: 4px;
	transition: transform 0.15s ease;
}
.cc-policy-accordion__item[open] summary::after {
	transform: rotate(-135deg);
}
.cc-policy-accordion__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.cc-policy-accordion__body p {
	margin: 0 0 var(--wp--custom--spacing--2, 8px);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
}
.cc-policy-accordion__body p.cc-policy-accordion__list-title {
	margin-top: var(--wp--custom--spacing--3, 12px);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.cc-policy-accordion__item ul {
	margin: 0 0 var(--wp--custom--spacing--3, 12px);
	padding-left: 1.1em;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
}

/* Single-product summary layout (2026-09-20). Order is set by hook
   priorities in functions.php; this covers the pieces that need styling. */
.woocommerce div.product .summary .stock:not(.cc-stock-status),
.woocommerce-variation-availability {
	display: none;
}
.woocommerce div.product p.cc-stock-status {
	margin: 0 0 var(--wp--custom--spacing--3, 12px);
}

/* Quantity and Add to cart side by side (simple products, and the
   quantity/button pair that appears under the variation selects). */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--custom--spacing--3, 12px);
}
.cc-customization-note {
	width: 100%;
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
.cc-customization-note label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	margin-bottom: var(--wp--custom--spacing--1, 4px);
}
.cc-customization-note textarea {
	width: 100%;
	min-height: 60px;
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--3, 12px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm, 8px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	resize: vertical;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}
.woocommerce div.product form.cart .quantity input.qty {
	min-height: 44px;
	height: 100%;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	margin: 0;
}

.cc-product-sku {
	margin-top: var(--wp--custom--spacing--3, 12px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
}

.cc-detailed-description {
	margin-top: var(--wp--custom--spacing--5, 24px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}
.cc-detailed-description--in-form {
	width: 100%;
	margin-top: 0;
}
.cc-detailed-description__body > :last-child {
	margin-bottom: 0;
}
.cc-detailed-description__body > :first-child {
	margin-top: 0;
}
.cc-detailed-description__body ul,
.cc-detailed-description__body ol {
	margin: 0 0 var(--wp--custom--spacing--3, 12px);
	padding-left: 1.25em;
}
.cc-detailed-description__body ul {
	list-style: disc;
}
.cc-detailed-description__body ol {
	list-style: decimal;
}
.cc-detailed-description__body li {
	margin-bottom: var(--wp--custom--spacing--1, 4px);
}

.cc-product-taxonomies {
	margin-top: var(--wp--custom--spacing--1, 4px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
}
.cc-product-taxonomies > span {
	display: block;
}
.summary .cc-product-meta-table,
.summary .woocommerce-product-details__short-description {
	margin-top: var(--wp--custom--spacing--4, 16px);
}

/* ---------------------------------------------------------------------
   16. Journal / blog cards
   --------------------------------------------------------------------- */

.cc-journal-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--custom--spacing--5, 24px);
}
@media (min-width: 768px) {
	.cc-journal-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.cc-journal-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.cc-journal-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--background-surface);
	border-radius: var(--wp--custom--radius--md, 14px);
	box-shadow: var(--wp--custom--shadow--sm);
	overflow: hidden;
}
.cc-journal-card:hover {
	box-shadow: var(--wp--custom--shadow--md);
}
.cc-journal-card__body {
	padding: var(--wp--custom--spacing--4, 16px);
}
.cc-journal-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 600;
	margin: 0 0 var(--wp--custom--spacing--2, 8px);
}
.cc-journal-card__excerpt {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--body);
}

.cc-new-arrivals-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--custom--spacing--5, 24px);
}
@media (min-width: 768px) {
	.cc-new-arrivals-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 768px) {
	.cc-bestsellers-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.cc-bestsellers-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.cc-shop-pagination {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--custom--spacing--2, 8px);
	margin-top: var(--wp--custom--spacing--6, 32px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}
.cc-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--wp--custom--spacing--2, 8px);
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.cc-shop-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
.cc-shop-pagination .page-numbers.dots {
	border: none;
}

/* Category/taxonomy archive toolbar (results count + sort dropdown) and
   core pagination block — unstyled by default, brought in line with the
   rest of the design system (2026-08-28). */
.woocommerce-result-count {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--caption);
	margin: 0;
}
.woocommerce-ordering select.orderby {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--background-surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--4, 16px);
}
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--custom--spacing--2, 8px);
	margin-top: var(--wp--custom--spacing--6, 32px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--wp--custom--spacing--2, 8px);
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* ---------------------------------------------------------------------
   18. WooCommerce block & classic-template markup overrides
   Maps WooCommerce's own generated class names (Product Collection block
   output, classic single-product template, mini-cart) onto this theme's
   tokens so they read as this design system rather than default Woo
   styling. Selectors target WooCommerce's documented/stable class names,
   not anything reverse-engineered from a third-party site.
   --------------------------------------------------------------------- */

.wc-block-product-price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	color: var(--wp--preset--color--error);
}

.woocommerce span.onsale {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	min-height: auto;
	min-width: auto;
	padding: var(--wp--custom--spacing--1, 4px) var(--wp--custom--spacing--3, 12px);
	line-height: 1;
}

.woocommerce div.product p.stock,
.woocommerce div.product .stock {
	display: inline-flex;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	padding: var(--wp--custom--spacing--1, 4px) var(--wp--custom--spacing--3, 12px);
	background: var(--wp--preset--color--success-bg);
	color: var(--wp--preset--color--success);
}
.woocommerce div.product p.stock.out-of-stock {
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
}
.woocommerce div.product p.stock.available-on-backorder {
	background: var(--wp--preset--color--warning-bg);
	color: var(--wp--preset--color--warning);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--text-inverse) !important;
	border-radius: var(--wp--custom--radius--md, 14px) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 700 !important;
	min-height: 44px;
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--5, 24px) !important;
	box-shadow: var(--wp--custom--shadow--sm);
	border: none !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--primary-hover) !important;
	box-shadow: var(--wp--custom--shadow--md);
}
.woocommerce #respond input#submit:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
	background: var(--wp--preset--color--border) !important;
	color: var(--wp--preset--color--text-muted) !important;
	box-shadow: none;
	cursor: not-allowed;
}

.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--wp--custom--radius--md, 14px);
	overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image {
	background: var(--wp--preset--color--background-surface);
	border-radius: var(--wp--custom--radius--sm, 8px);
}

/* Variation selector(s) (2026-09-24, per owner feedback -- the default
   WooCommerce table markup rendered oversized and loosely spaced compared
   to the rest of the compact summary). Reflowed from a <table> into
   stacked label-above-select rows; each row's own label/select/"Clear"
   link matches the sizing already used for the customization note field
   right below it, rather than default table-cell padding + a full-size
   input. */
.woocommerce table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--wp--custom--spacing--3, 12px);
}
.woocommerce table.variations tbody,
.woocommerce table.variations tr,
.woocommerce table.variations th.label,
.woocommerce table.variations td.value {
	display: block;
	width: 100%;
}
.woocommerce table.variations tr td,
.woocommerce table.variations tr th {
	/* WooCommerce's own block-theme stylesheet
	   (woocommerce-blocktheme.css) sets `padding-bottom:
	   var(--wp--style--block-gap)` on this exact `tr td`/`tr th` selector
	   -- one type-selector more specific than our first attempt at this
	   reset, so it silently won and reintroduced a ~24px gap under each
	   label and select (found live 2026-09-24). Matched its specificity
	   here (same `tr` ancestor) plus !important as a safety margin, since
	   load order between our stylesheet and WooCommerce's shouldn't be
	   what this depends on. */
	padding: 0 !important;
}
.woocommerce table.variations tr + tr {
	margin-top: var(--wp--custom--spacing--3, 12px);
}
.woocommerce table.variations th.label label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	margin-bottom: var(--wp--custom--spacing--1, 4px);
}
.woocommerce div.product form.cart .variations select {
	min-height: 40px;
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--3, 12px);
}
.woocommerce table.variations .reset_variations {
	display: inline-block;
	margin-top: var(--wp--custom--spacing--1, 4px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
}

/* Variation swatches (cc_variation_swatches_html + initSwatches). Without
   JavaScript the dropdown shows and the buttons stay hidden. With it
   (`cc-js` on <html>, set first thing in the head) the buttons show from
   the first paint instead of after the page finishes loading; if the
   swatch script never starts, cc_swatch_js_flag() removes `cc-js` again
   after load so the dropdown comes back. */
.cc-swatches {
	display: none;
	flex-wrap: wrap;
	gap: var(--wp--custom--spacing--2, 8px);
}
.cc-js .cc-swatches,
.cc-swatches-ready .cc-swatches { display: flex; }
.cc-js .cc-swatch-field select,
.cc-swatches-ready .cc-swatch-field select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.cc-swatch-current {
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}
.cc-swatch {
	border: 2px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--background-surface);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.cc-swatches--pill .cc-swatch {
	min-width: 42px;
	min-height: 40px;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: .9rem;
}
.cc-swatches--image .cc-swatch {
	width: 72px;
	padding: 4px 4px 6px;
	border-radius: 14px;
	display: grid;
	gap: 4px;
	justify-items: center;
	font-size: .72rem;
	line-height: 1.2;
}
.cc-swatches--image .cc-swatch img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.cc-swatch:hover:not(:disabled) { border-color: var(--wp--preset--color--primary); }
.cc-swatch[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}
.cc-swatches--pill .cc-swatch[aria-pressed="true"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background-surface);
}
.cc-swatch:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}
.cc-swatch:disabled {
	opacity: .35;
	cursor: not-allowed;
	text-decoration: line-through;
}
@media (prefers-reduced-motion: reduce) {
	.cc-swatch { transition: none; }
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--spacing--2, 8px);
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--4, 16px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--text-muted);
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

/* Related/upsell products (cc_render_related_products() / cc_render_upsell_
   products() in functions.php) now render the same .cc-product-card
   component as the shop grid, inside .cc-new-arrivals-grid -- both already
   fully styled elsewhere. Only the section-level heading/spacing needs
   rules here; the old plain-box `ul.products li.product` styling this
   replaced (2026-08-31) is gone along with the default WC markup it
   targeted. */
.related.products,
.upsells.products {
	margin-top: var(--wp--custom--spacing--7, 48px);
}
.related.products h2,
.upsells.products h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h2);
	margin-bottom: var(--wp--custom--spacing--4, 16px);
}

#reviews h2,
#reviews h3 {
	font-family: var(--wp--preset--font-family--display);
}
#reviews .comment-form input,
#reviews .comment-form textarea {
	width: 100%;
}

/* Classic cart / checkout tables + forms */
.woocommerce table.shop_table_responsive,
.woocommerce-checkout table.shop_table {
	border-collapse: collapse;
	width: 100%;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--custom--spacing--3, 12px);
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
}
.woocommerce-checkout .quantity input.qty {
	min-height: 36px;
	width: 72px;
}

/* Cart page item rows: WooCommerce's classic [cart] shortcode renders a
   plain bordered <table> with no relation to the Mini Cart drawer's card-
   like look (that comes from WC Blocks' own bundled CSS, a different
   rendering system entirely -- the classic table gets none of it). Kept
   as a real <table> for markup/native-form semantics (quantity inputs,
   remove links, coupon field all still plain HTML forms, works with JS
   off per CLAUDE.md), but restyled with the table/row/cell display
   overridden to flex so each item reads as a soft rounded card row,
   visually matching the product-card / mini-cart language instead of a
   bare spreadsheet table. */
.woocommerce-cart-form table.shop_table {
	width: 100%;
	border: none;
	border-collapse: separate;
	border-spacing: 0;
}
.woocommerce-cart-form table.shop_table thead {
	display: none;
}
.woocommerce-cart-form table.shop_table,
.woocommerce-cart-form table.shop_table tbody {
	display: block;
}
/* Float-based layout, not CSS Grid: two separate Grid rebuilds (with and
   without various display/sizing overrides) still failed to reliably
   render the thumbnail on the user's actual device (2026-08-30) despite
   every diagnostic (server HTML, deployed CSS, Cloudflare edge cache,
   hard reload) confirming the correct code was genuinely being served --
   pointing at a real WebKit rendering bug with named-grid-template-areas
   repeated identically across sibling <tr> grid containers, not a
   deploy/cache problem. Floats are the oldest, most universally-supported
   CSS layout mechanism there is and sidestep that whole bug class: the
   thumbnail floats left with a fixed width, the remove (X) button is
   taken out of flow entirely via absolute positioning (independent of
   both the float and the text flow), and the four text cells are plain
   block elements that naturally wrap in the remaining space next to the
   float -- no named areas, no multi-row spanning, nothing for a grid
   engine to get wrong. */
.woocommerce-cart-form table.shop_table tr.cart_item {
	position: relative;
	display: block;
	background: var(--wp--preset--color--background-surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 14px);
	padding: var(--wp--custom--spacing--3, 12px);
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
.woocommerce-cart-form table.shop_table tr.cart_item::after {
	content: "";
	display: table;
	clear: both;
}
/* WooCommerce core's woocommerce-smallscreen.css also forces
   `text-align: right !important` on every cell below the same phone-width
   breakpoint as the display:none bug above -- overridden the same way,
   deliberately, for the same reason. */
.woocommerce-cart-form table.shop_table tr.cart_item td {
	display: block;
	text-align: left !important;
	border: none;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
}
/* Container itself is the authoritative box (fixed size + overflow:hidden
   + the accent background), not the <img>: guarantees a defined, visible
   square regardless of what the image itself does or how long it takes
   to load, and makes overflow impossible even if an img's HTML width/
   height attributes (WooCommerce sets width="300" height="300") ever won
   a specificity fight.
   The actual root cause of every earlier "image invisible on phone"
   report (2026-08-30): WooCommerce core's own woocommerce-smallscreen.css
   -- loaded only below a phone-width breakpoint via the <link>'s own
   `media` attribute, so it never showed up testing at wider widths --
   ships `.woocommerce table.cart .product-thumbnail { display: none; }`,
   a 3-class selector with higher specificity than the 2-class one this
   rule used to have. That's why Grid, then container-sizing, then Floats
   all "didn't work" in the exact same way: none of those attempts changed
   `display`, so core's `none` won regardless of layout technique.
   `!important` here is deliberate and necessary, not a code smell -- it's
   the one clean way to override a core stylesheet's unscoped mobile rule
   without patching WooCommerce itself. */
.woocommerce-cart-form .product-thumbnail {
	display: block !important;
	float: left;
	width: 112px;
	height: 112px;
	margin-right: var(--wp--custom--spacing--3, 12px);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 14px);
	background: var(--wp--preset--color--accent-3);
}
/* Same WooCommerce core "label: " pseudo-element as the product-name fix
   above -- the thumbnail cell has no data-title attribute, but the ": "
   half of the content string is a literal in WC's rule, so it rendered as
   a stray floating colon above every image regardless. */
.woocommerce-cart-form .product-thumbnail::before {
	content: none !important;
}
.woocommerce-cart-form .product-thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
}
.woocommerce-cart-form .product-thumbnail img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 14px);
	background: var(--wp--preset--color--accent-3);
}
.woocommerce-cart-form .product-remove {
	position: absolute;
	top: var(--wp--custom--spacing--3, 12px);
	right: var(--wp--custom--spacing--3, 12px);
}
.woocommerce-cart-form .product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted) !important;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none !important;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.woocommerce-cart-form .product-remove a.remove:hover {
	border-color: var(--wp--preset--color--error);
	color: var(--wp--preset--color--error) !important;
	background: var(--wp--preset--color--error-bg);
}
/* Explicit margin-left (image width + gap), not just float-wrap: if a
   card's stacked text is taller than the floated image, whichever row
   crosses that height reverts to full width (flush with the card's left
   edge, past the image) under plain float-wrap behavior -- inconsistent
   with the rows still floating beside the image above it. Setting the
   same margin-left on every text cell keeps all of them aligned to the
   name regardless of the image's height. */
.woocommerce-cart-form .product-name,
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-quantity,
.woocommerce-cart-form .product-subtotal {
	margin-left: 124px;
}
.woocommerce-cart-form .product-name {
	padding-right: 40px !important;
	padding-bottom: var(--wp--custom--spacing--1, 4px) !important;
}
/* WooCommerce core's own shop_table_responsive stylesheet (loaded
   because our table also carries that class, for the data-title
   attributes it needs -- see the label rule below) injects "Product:"
   here by default; suppressed since the name already reads on its own. */
.woocommerce-cart-form .product-name::before {
	content: none !important;
}
.woocommerce-cart-form .product-name a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.cc-cart-item-stock {
	margin-top: var(--wp--custom--spacing--1, 4px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
}

/* Price / Quantity / Subtotal: each a "label | value" row, label pulled
   from the cell's own data-title attribute (WooCommerce already outputs
   this for its responsive-table fallback, so no markup changes needed).
   Grid (not flex/space-between) on purpose: a fixed label column means
   every value starts at the exact same x position regardless of whether
   the label is "Price:", "Quantity:" or "Subtotal:" -- with flex's
   space-between, only the *right* edges lined up (each row is the same
   container width) while the values' *left* edges drifted with label
   length, which read as "not aligned" even though nothing was broken. */
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-quantity,
.woocommerce-cart-form .product-subtotal {
	display: grid;
	grid-template-columns: 84px 1fr;
	align-items: center;
	column-gap: var(--wp--custom--spacing--2, 8px);
	padding: var(--wp--custom--spacing--1, 4px) 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}
.woocommerce-cart-form .product-subtotal {
	border-bottom: none;
	padding: var(--wp--custom--spacing--1, 4px) 0 0 !important;
}
.woocommerce-cart-form .product-price::before,
.woocommerce-cart-form .product-quantity::before,
.woocommerce-cart-form .product-subtotal::before {
	content: attr(data-title);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}
.woocommerce-cart-form .product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
}
.woocommerce-cart-form .product-price del {
	color: var(--wp--preset--color--text-muted);
	font-weight: 400;
	opacity: 0.7;
	margin-right: var(--wp--custom--spacing--1, 4px);
}
.woocommerce-cart-form .product-price ins {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-cart-form .product-subtotal {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.cc-qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 2px;
}
.cc-qty-stepper__btn {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: none;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.cc-qty-stepper__btn:hover {
	background: var(--wp--preset--color--accent-3);
}
.cc-qty-stepper input.qty {
	min-height: auto;
	height: 20px;
	width: 26px;
	border: none;
	padding: 0;
	background: transparent;
	text-align: center;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
}
@media (max-width: 400px) {
	.woocommerce-cart-form .product-thumbnail {
		width: 84px;
		height: 84px;
	}
	.woocommerce-cart-form .product-name,
	.woocommerce-cart-form .product-price,
	.woocommerce-cart-form .product-quantity,
	.woocommerce-cart-form .product-subtotal {
		margin-left: 96px;
	}
}

/* Landscape / tablet+: switch from the stacked mobile card back to a real
   table with PRODUCT / PRICE / QUANTITY / SUBTOTAL columns -- there's
   enough width for actual columns here, so a card per row just wastes
   space and reads worse than a table would. Every mobile-first rule
   above is reset to its plain table equivalent; `!important` is used
   only where needed to beat those same mobile-first declarations.
   600px, not 900px: real phone landscape widths (the actual "landscape
   view" being asked for here) run roughly 650-930 CSS px depending on
   device -- a 900px floor would never fire on an actual phone turned
   sideways, only on tablets/desktop, which is why this looked like no
   change had shipped at all. The display:block/text-align !important
   rules that defeat WooCommerce core's own woocommerce-smallscreen.css
   (loaded below 768px) are unconditional above, not scoped to any
   breakpoint, so they keep working fine down here too. */
@media (min-width: 600px) {
	.woocommerce-cart-form table.shop_table {
		display: table !important;
		border-collapse: collapse;
	}
	.woocommerce-cart-form table.shop_table thead {
		display: table-header-group !important;
	}
	.woocommerce-cart-form table.shop_table thead th {
		text-align: left;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 700;
		color: var(--wp--preset--color--text-muted);
		padding: 0 var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--3, 12px);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.woocommerce-cart-form table.shop_table thead th.product-remove,
	.woocommerce-cart-form table.shop_table thead th.product-thumbnail {
		font-size: 0;
	}
	/* The unconditional `.product-thumbnail` rule above (background,
	   fixed size, rounded corners -- meant for the image swatch in each
	   row) also matches this column's <th>, since WooCommerce gives it
	   the same class. Undone here so the header row doesn't show a
	   floating colored box with no image in it. */
	.woocommerce-cart-form table.shop_table thead th.product-thumbnail {
		background: none !important;
		width: auto !important;
		height: auto !important;
		border-radius: 0 !important;
		float: none !important;
		padding: 0 !important;
	}
	.woocommerce-cart-form table.shop_table tbody {
		display: table-row-group !important;
	}
	.woocommerce-cart-form table.shop_table tr.cart_item {
		display: table-row !important;
		position: static;
		background: none;
		border: none;
		border-radius: 0;
		padding: 0;
		margin-bottom: 0;
	}
	.woocommerce-cart-form table.shop_table tr.cart_item::after {
		content: none;
	}
	.woocommerce-cart-form table.shop_table tr.cart_item td {
		display: table-cell !important;
		vertical-align: middle;
		text-align: left !important;
		border: none;
		border-bottom: 1px solid var(--wp--preset--color--border);
		padding: var(--wp--custom--spacing--3, 12px) !important;
	}
	.woocommerce-cart-form .product-thumbnail {
		float: none;
		width: 72px;
		height: 72px;
		margin-right: 0;
	}
	/* The generic td padding (12px all round) leaves visibly more empty
	   space above/below the 72px image box than either side, since the
	   row's height is set by the tallest column (product name + stock
	   text), not by this column. Tightening just the vertical padding
	   here lets the image sit closer to the row's top/bottom edge. */
	.woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail {
		padding-top: var(--wp--custom--spacing--1, 4px) !important;
		padding-bottom: var(--wp--custom--spacing--1, 4px) !important;
	}
	.woocommerce-cart-form .product-remove {
		position: static;
		text-align: center !important;
	}
	.woocommerce-cart-form .product-name,
	.woocommerce-cart-form .product-price,
	.woocommerce-cart-form .product-quantity,
	.woocommerce-cart-form .product-subtotal {
		margin-left: 0;
	}
	.woocommerce-cart-form .product-name {
		padding-right: var(--wp--custom--spacing--3, 12px) !important;
	}
	.woocommerce-cart-form .product-price,
	.woocommerce-cart-form .product-quantity,
	.woocommerce-cart-form .product-subtotal {
		display: table-cell !important;
		border-bottom: none;
	}
	.woocommerce-cart-form .product-price::before,
	.woocommerce-cart-form .product-quantity::before,
	.woocommerce-cart-form .product-subtotal::before {
		content: none !important;
	}
}
.cart-collaterals .cart_totals,
.woocommerce-checkout-review-order {
	background: var(--wp--preset--color--background-surface);
	border-radius: var(--wp--custom--radius--md, 14px);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--custom--spacing--5, 24px);
}
.woocommerce-checkout #payment {
	background: var(--wp--preset--color--background-surface);
	border-radius: var(--wp--custom--radius--md, 14px);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--custom--spacing--4, 16px);
}
.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon {
	margin-bottom: var(--wp--custom--spacing--4, 16px);
}
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
	margin-bottom: var(--wp--custom--spacing--4, 16px);
}
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
.woocommerce-order,
.woocommerce-thankyou-order-received {
	background: var(--wp--preset--color--success-bg);
	color: var(--wp--preset--color--success);
	border-radius: var(--wp--custom--radius--md, 14px);
	padding: var(--wp--custom--spacing--4, 16px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}

.wc-block-grid__products,
.wc-block-product-template {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Product Collection grid card — positioning context for the wishlist
   toggle + quick-view trigger, which render as siblings of the image block
   inside each `li.wc-block-product` (see "19. Wishlist toggle" and
   "20. Quick-view modal" below).

   Also skinned to match the .cc-product-card component (border, radius,
   shadow, padding) so category/shop archive cards read as the same
   component as the homepage bestseller/new-arrivals cards, not a visually
   distinct default WooCommerce card. */
.wc-block-product-template.wc-block-product-template.is-flex-container {
	gap: var(--wp--custom--spacing--5, 24px);
}
/* Grid overlap, same technique as .cc-product-card: WooCommerce Blocks
   renders the image, title, price, add-to-cart, wishlist toggle, and
   quick-view trigger as flat siblings of the <li>, so co-locating the image
   and the floating buttons in row 1 / col 1 overlays them on the photo
   without position:absolute needing a positioning context scoped to just
   the image (2026-08-28 card redesign, matches .cc-product-card). */
.wc-block-product {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--wp--preset--color--accent-3);
	border: none;
	border-radius: var(--wp--custom--radius--lg, 24px);
	box-shadow: var(--wp--custom--shadow--sm);
	overflow: hidden;
	padding: 0;
}
.wc-block-product .wc-block-components-product-image {
	grid-row: 1;
	grid-column: 1;
	position: relative;
	background: transparent;
	padding: 0;
}
.wc-block-product .wc-block-components-product-image .wc-block-components-product-image__inner-container,
.wc-block-product .wc-block-components-product-image img {
	border-radius: 0;
	overflow: hidden;
}
.wc-block-product .wc-block-components-product-image img {
	transition: transform 0.2s ease;
}
.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.03);
}
.wc-block-product .wp-block-post-title {
	grid-row: 2;
	grid-column: 1;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	margin: 0 0 var(--wp--custom--spacing--1, 4px);
	padding: var(--wp--custom--spacing--3, 12px) var(--wp--custom--spacing--4, 16px) 0;
}
.wc-block-product .wp-block-woocommerce-product-price {
	grid-row: 3;
	grid-column: 1;
	padding: 0 var(--wp--custom--spacing--7, 48px) var(--wp--custom--spacing--4, 16px) var(--wp--custom--spacing--4, 16px);
}
.wc-block-product .wc-block-components-product-price {
	font-size: 0.8rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	margin-bottom: 0;
}
/* Wishlist + quick-view stay overlaid on the photo (row 1). The add-to-cart
   button (its .wp-block-button wrapper, present in WC Blocks' markup here)
   is pinned to the card's bottom-right corner via position:absolute —
   matches .cc-product-card's approach (2026-08-28). */
.wc-block-product .woosw-btn,
.wc-block-product .cc-quick-view-trigger {
	grid-row: 1;
	grid-column: 1;
	z-index: 3;
}
.wc-block-product .wp-block-button {
	position: absolute;
	right: var(--wp--custom--spacing--4, 16px);
	bottom: var(--wp--custom--spacing--4, 16px);
	margin: 0;
	z-index: 5;
}
.wc-block-product .woosw-btn {
	align-self: start;
	justify-self: end;
	margin: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--2, 8px) 0 0;
}
.wc-block-product .add_to_cart_button,
.wc-block-product .wp-block-button__link {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--sm);
	color: var(--wp--preset--color--text-inverse);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	text-indent: -999px;
	white-space: nowrap;
}
.wc-block-product .add_to_cart_button::before,
.wc-block-product .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	transform: translate(-50%, -50%);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------------------
   17. Utility layout
   --------------------------------------------------------------------- */

/* Section vertical rhythm tightened one notch site-wide (2026-08-30, "make
   it compact" pass): every page's <main> carries one `.cc-section`, and the
   homepage stacks six of them back to back, so the old 64px (48px mobile)
   scale meant up to 128px (96px mobile) of combined padding between
   adjacent sections -- the main source of the "extra space" feeling across
   the site, not any one-off bug. */
.cc-section {
	padding-block: var(--wp--custom--spacing--7, 48px);
}
@media (max-width: 767px) {
	.cc-section {
		padding-block: var(--wp--custom--spacing--6, 32px);
	}
}
.cc-section--tight {
	padding-block: var(--wp--custom--spacing--5, 24px);
}
.cc-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h6);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
}

/* ---------------------------------------------------------------------
   19. Wishlist toggle (WPC Smart Wishlist button, restyled to spec)
   Maps the plugin's own `.woosw-btn` output onto the "Icon-only button"
   token pattern (Button spec, §5: "Icon-only buttons (wishlist toggle,
   cart drawer close) use --radius-pill, 40x40px minimum, same state
   pattern as Ghost") and the Product card spec's "Wishlist toggle icon-
   button pinned top-right (--space-3 inset) over image, semi-transparent
   white circular bg." The plugin is configured (button_icon=icon) to
   render icon-only with an aria-label carrying the accessible name; only
   the button chrome/position is restyled here, not the plugin's own heart
   icon glyph (its own bundled icon font, not third-party-site markup).
   --------------------------------------------------------------------- */

.woosw-btn {
	position: absolute;
	top: var(--wp--custom--spacing--3, 12px);
	right: var(--wp--custom--spacing--3, 12px);
	z-index: 3;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: rgba(255, 255, 255, 0.85);
	border: 1.5px solid transparent;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.woosw-btn:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, rgba(255, 255, 255, 0.85));
}
.woosw-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.woosw-btn.woosw-added {
	color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}
.woosw-btn .woosw-btn-icon {
	font-size: 18px;
	line-height: 1;
}

/* Single-product page's OWN wishlist button (the one WPC Smart Wishlist
   auto-injects into the product summary itself, not the small per-card
   buttons on the related/upsell cards below it -- those reuse
   cc-product-card and must keep the small pinned-icon style from rule
   ".cc-product-card .woosw-btn" above). Scoped to `.summary` specifically
   (found live 2026-09-22: the previous `div.product .woosw-btn` selector
   was broader than intended and was also overriding the related/upsell
   cards' icon buttons into this same big inline-text style, since those
   cards sit inside the same div.product wrapper as a sibling of
   `.summary`, not inside it). The plugin's default position renders the
   button inline in the summary flow rather than pinned over an image, so
   it keeps its normal document position but still gets the Ghost
   icon-button chrome instead of plain link/button text. */
.woocommerce div.product .summary .woosw-btn {
	position: static;
	display: inline-flex;
	width: auto;
	height: auto;
	min-height: 44px;
	padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--4, 16px);
	gap: var(--wp--custom--spacing--2, 8px);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	margin-top: var(--wp--custom--spacing--3, 12px);
}
.woocommerce div.product .summary .woosw-btn::after {
	content: attr(aria-label);
	font-weight: 700;
}

/* Wishlist "Add to cart" buttons: the plugin gives the add-to-cart cell
   no fixed width, so our global `.woocommerce a.button` chrome (24px
   horizontal padding, 44px min-height, ~1rem bold text) is too wide for
   the space next to the price/stock copy and wraps to two lines on
   narrow viewports. Sized here at 60% of the global button (a 40%
   reduction, later eased up to 80%) in both wishlist contexts: the header
   popup (#woosw_wishlist / .woosw-popup) and the standalone /wishlist/
   page's table (.woosw-list table.woosw-items). */
.woosw-popup .woosw-items .woosw-item .woosw-item--atc .button,
.woosw-list table.woosw-items .woosw-item--atc .button {
	padding: 10px 19px !important;
	min-height: 35px;
	font-size: 0.8rem !important;
	white-space: nowrap;
	line-height: 1.2;
}
@media (max-width: 480px) {
	/* .woosw-item--actions (not .woosw-item--atc, which is a plain block
	   div nested inside it) is the actual flex child of .woosw-item-inner,
	   so it's the element that needs to drop to its own full-width row for
	   the button to have room to render on one line. */
	.woosw-popup .woosw-items .woosw-item .woosw-item-inner {
		flex-wrap: wrap;
	}
	.woosw-popup .woosw-items .woosw-item .woosw-item--actions {
		flex: 0 0 100%;
		margin-top: var(--wp--custom--spacing--2, 8px);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--custom--spacing--2, 8px);
	}
	.woosw-popup .woosw-items .woosw-item .woosw-item--stock {
		flex: 1 1 auto;
	}
	.woosw-popup .woosw-items .woosw-item .woosw-item--atc {
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------------------
   20. Quick-view modal
   Overlay/panel per the "Quick-view modal" component spec (§5): dark
   backdrop at 60% opacity, radius-lg surface panel, shadow-lg, two-column
   desktop / stacked mobile. Built on the native <dialog> element so
   Escape-to-close and basic focus handling come from the platform rather
   than hand-rolled JS (see assets/js/interactions.js for the open/close/
   fetch logic). No focus trap is added on top of the browser's own
   <dialog> behavior, per this phase's brief.
   --------------------------------------------------------------------- */

.cc-quick-view-modal {
	max-width: 900px;
	width: min(900px, calc(100vw - var(--wp--custom--spacing--6, 32px) * 2));
	border: none;
	padding: 0;
	border-radius: var(--wp--custom--radius--lg, 24px);
	box-shadow: var(--wp--custom--shadow--lg);
	background: var(--wp--preset--color--background-surface);
	color: var(--wp--preset--color--text);
}
.cc-quick-view-modal::backdrop {
	background: var(--wp--preset--color--background-dark);
	opacity: 0.6;
}
.cc-quick-view-modal__inner {
	position: relative;
	padding: var(--wp--custom--spacing--6, 32px);
	display: grid;
	gap: var(--wp--custom--spacing--5, 24px);
	max-height: 85vh;
	overflow-y: auto;
}
@media (min-width: 768px) {
	.cc-quick-view-modal__inner {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}
.cc-quick-view-modal__close {
	position: absolute;
	top: var(--wp--custom--spacing--4, 16px);
	right: var(--wp--custom--spacing--4, 16px);
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}
.cc-quick-view-modal__close:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
.cc-quick-view-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.cc-quick-view-modal__body {
	min-height: 200px;
}
.cc-quick-view-modal__body[aria-busy="true"] {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--body);
}
.cc-quick-view__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: var(--wp--preset--color--background);
}
.cc-quick-view__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 600;
	margin: 0 0 var(--wp--custom--spacing--2, 8px);
}
.cc-quick-view__details .cc-price {
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
.cc-quick-view__details .cc-stock-badge {
	margin-bottom: var(--wp--custom--spacing--3, 12px);
}
.cc-quick-view__excerpt {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--text);
	margin-bottom: var(--wp--custom--spacing--4, 16px);
}
.cc-quick-view__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--spacing--3, 12px);
	margin: 0;
}

/* .wc-block-product now grid-overlays the quick-view trigger onto the image
   (row 1 / col 1, bottom-left) same as .cc-product-card — see the grid rule
   above. Related/upsell products on the single-product page (functions.php,
   cc_render_related_products() / cc_render_upsell_products()) render the
   same .cc-product-card markup as everywhere else now, so no separate rules
   are needed for them here. */
.wc-block-product .cc-quick-view-trigger {
	align-self: end;
	justify-self: start;
	margin: 0 0 var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--2, 8px);
	opacity: 1;
}

/* CURCY's own auto-injected floating sidebar currency switcher (wp_footer
   hook, fixed to the left edge of the viewport). This is now the site's
   only currency switcher UI -- the header-integrated [cc_region_selector]
   shortcode was removed from parts/header.html per the user's request to
   go back to this floating badge instead. */
/* Above .cc-header's sticky z-index (100): otherwise when the expanded
   currency list opens upward near the top of the viewport, the sticky
   header renders on top of it and blocks clicking any option. */
.woo-multi-currency.wmc-sidebar {
	z-index: 150;
}

/* Hero row (desktop): text / image / stat-card columns all forced to equal
   height (the row's tallest column sets the height, via flex stretch —
   the default when no verticalAlignment is set), with the image column
   at exactly double the width of the two side columns (25% / 50% / 25%
   split set inline on each wp:column, per user request). */
@media (min-width: 1024px) {
	/* No height cap: at 1024-1600px the narrow text column (headline,
	   intro, two buttons) is taller than 460px, and with a cap it spilled
	   over the Bestsellers heading below (2026-10-14). */
	.cc-hero-row {
		align-items: stretch;
	}
	.cc-hero-row__col {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.cc-hero-row__col--image {
		justify-content: stretch;
	}
	.cc-hero-row__image {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
	.cc-hero-stats {
		height: 100%;
		justify-content: space-between;
	}
}

/* Hero photo (2026-09-20): supplied brand image in the hero's image slot,
   shown whole at its own 16:9 shape (the baked-in headline/labels sit near
   the edges, so cropping to fill the taller desktop slot would cut them);
   on desktop it is centered vertically within the row. */
.cc-hero-row__image--photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--lg, 24px);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--sm);
}
@media (min-width: 1024px) {
	.cc-hero-row__col--image {
		justify-content: center;
	}
	.cc-hero-row__image--photo {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}
.cc-hero-row__image--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Workshop photo (2026-09-20): Our Story page + homepage "Made by hand"
   teaser. Native 3:2 crop of the supplied photo, so no cover-cropping. */
.cc-story-photo {
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: var(--wp--custom--radius--lg, 24px);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--sm);
}
.cc-story-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Small laptops (1024-1279px): three columns left the headline only
   ~250px wide (6 lines). Text and photo share the row instead, and the
   stat card becomes a 4-across strip underneath (2026-10-14). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.wp-block-columns.cc-hero-row {
		flex-wrap: wrap !important;
		row-gap: var(--wp--custom--spacing--5, 24px);
	}
	.cc-hero-row > .cc-hero-row__col:first-child {
		flex-basis: 42% !important;
	}
	.cc-hero-row > .cc-hero-row__col--image {
		flex-basis: 52% !important;
	}
	.cc-hero-row > .cc-hero-row__col:last-child {
		flex-basis: 100% !important;
	}
	.cc-hero-row .cc-hero-stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		height: auto;
		gap: var(--wp--custom--spacing--4, 16px);
	}
}

/* Compact hero-row stat card (replaces the old full-width stat strip band
   below the hero — now sits inside the hero row itself, per user request). */
.cc-hero-stats {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--4, 16px);
	background: var(--wp--preset--color--accent-3);
	border-radius: var(--wp--custom--radius--lg, 24px);
	padding: var(--wp--custom--spacing--5, 24px);
}
.cc-hero-stats__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--1, 4px);
}
.cc-hero-stats__icon {
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--accent-2);
	margin-bottom: var(--wp--custom--spacing--1, 4px);
}
.cc-hero-stats__value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h6);
	color: var(--wp--preset--color--primary);
}
.cc-hero-stats__label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
}

/* "Lead word" heading treatment (hero H1 + Bestsellers/Shop by
   collection/New arrivals H2s) — same Baloo 2 display font as every other
   heading (theme.json default, unchanged), consistently applied: the
   first word is set in Click Blue (the site's primary brand color,
   already verified AA-safe as text on Paper/white in
   docs/04-design-system-tokens.md) plus an italic flourish to read as a
   special accent; the remaining words stay in the default Ink heading
   color for strong readability. */
.cc-heading-lead {
	color: var(--wp--preset--color--primary);
	font-style: italic;
}

/* ---------------------------------------------------------------------
   21. Search page ([cc_search] shortcode, templates/page-search.html)
   Deliberately minimal per the brief: one page, one input, results (or
   recently-viewed products, sourced from the cc_recently_viewed cookie)
   directly below -- no filters/sort/facets.
   --------------------------------------------------------------------- */
.cc-search-page__title {
	margin-bottom: var(--wp--custom--spacing--5, 24px);
}
.cc-search-form {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--2, 8px);
	max-width: 480px;
	margin: 0 auto var(--wp--custom--spacing--7, 48px);
}
.cc-search-form__input {
	flex: 1;
	border-radius: var(--wp--custom--radius--pill, 999px) !important;
	padding-left: var(--wp--custom--spacing--4, 16px) !important;
}
.cc-search-form__submit {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: none;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text-inverse);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.cc-search-form__submit:hover {
	background: var(--wp--preset--color--primary-hover);
}
.cc-search-heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h4);
	margin-bottom: var(--wp--custom--spacing--4, 16px);
}

/* ---------------------------------------------------------------------
   22. Cart page: free-shipping progress bar + coupon box
   Dashed-border "gift label" card treatment (general e-commerce pattern,
   rebuilt in our own palette -- Click Blue fill, Ink text, no borrowed
   branding) for the two callout boxes on the cart page: the free-
   shipping progress bar (patterns/clickety-custom's cc-shipping-bar,
   rendered via woocommerce_before_cart_table) and the coupon form.
   --------------------------------------------------------------------- */
.cc-shipping-bar {
	border: 1.5px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 14px);
	padding: var(--wp--custom--spacing--4, 16px);
	margin-bottom: var(--wp--custom--spacing--4, 16px);
	background: var(--wp--preset--color--background-surface);
}
.cc-shipping-bar-message {
	margin: 0 0 var(--wp--custom--spacing--3, 12px);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.cc-shipping-bar-message--unlocked {
	color: var(--wp--preset--color--success);
}
.cc-shipping-bar-track {
	height: 10px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--border);
	overflow: hidden;
}
.cc-shipping-bar-fill {
	height: 100%;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--primary);
	transition: width 0.3s ease;
}

/* .woocommerce-form-coupon is actually the *checkout* page's coupon
   toggle form class -- the cart page's own coupon field (added via
   woocommerce_cart_coupon, inside the classic cart table's actions row)
   just uses a plain `.coupon` div, confirmed live 2026-08-30. Styling
   both since each only appears in its own real context. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-coupon,
.woocommerce-cart-form .coupon {
	border: 1.5px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 14px);
	padding: var(--wp--custom--spacing--4, 16px);
	background: var(--wp--preset--color--background-surface);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--spacing--3, 12px);
}
.woocommerce-form-coupon .form-row {
	margin-bottom: var(--wp--custom--spacing--3, 12px);
}
.woocommerce-form-coupon .form-row:last-child {
	margin-bottom: 0;
}
.woocommerce-cart-form .coupon label {
	display: none;
}
/* Always nowrap (not gated to a max-width media query): a fixed
   `flex: 1 1 160px` basis plus the button's own width was wider than
   the row on phone, so the shared `flex-wrap: wrap` above pushed
   "Apply coupon" onto its own line below the field -- and a media-query
   version of this fix (2026-08-30) still didn't fire reliably across
   real phone widths. Forcing nowrap unconditionally and letting the
   input's flex-basis be 0 (not 160px) means it always just shrinks to
   whatever's left after the button, on every screen size, with no
   breakpoint guesswork. */
.woocommerce-cart-form .coupon {
	flex-wrap: nowrap;
}
.woocommerce-cart-form .coupon input#coupon_code {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
.woocommerce-cart-form .coupon .button {
	flex: 0 0 auto;
	white-space: nowrap;
}
@media (max-width: 420px) {
	.woocommerce-cart-form .coupon {
		padding: var(--wp--custom--spacing--3, 12px);
		gap: var(--wp--custom--spacing--2, 8px);
	}
	.woocommerce-cart-form .coupon input#coupon_code {
		padding: var(--wp--custom--spacing--2, 8px) !important;
		font-size: var(--wp--preset--font-size--caption);
	}
	.woocommerce-cart-form .coupon .button {
		padding: var(--wp--custom--spacing--2, 8px) var(--wp--custom--spacing--3, 12px) !important;
		font-size: var(--wp--preset--font-size--caption);
	}
}

/* ---------------------------------------------------------------------
   22. Floating WhatsApp button (site-wide, cc_render_whatsapp_button())
   --------------------------------------------------------------------- */
.cc-whatsapp-fab {
	position: fixed;
	right: var(--wp--custom--spacing--4, 16px);
	bottom: var(--wp--custom--spacing--4, 16px);
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: #25d366;
	color: #fff;
	box-shadow: var(--wp--custom--shadow--md, 0 4px 12px rgba(43,42,51,0.10));
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cc-whatsapp-fab:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--lg, 0 8px 20px rgba(43,42,51,0.14));
	color: #fff;
}
/* Placeholder state (no real number set yet, cc_whatsapp_number option
   empty): visible but inert, distinguished with reduced opacity + no
   pointer/hover affordance so it doesn't look like a broken live button. */
.cc-whatsapp-fab[aria-disabled="true"] {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}
@media (max-width: 480px) {
	.cc-whatsapp-fab {
		width: 46px;
		height: 46px;
		right: var(--wp--custom--spacing--3, 12px);
		bottom: var(--wp--custom--spacing--3, 12px);
	}
}

/* Variable product with a variation selected: show only that variation's
   photo instead of the generic gallery list (toggled in interactions.js). */
.cc-gallery--variation .woocommerce-product-gallery__image:not(:first-child),
.cc-gallery--variation .flex-control-thumbs,
.cc-gallery--variation .flex-direction-nav {
	display: none !important;
}

/* Variation with several photos: our own gallery replaces the flex slider. */
.cc-gallery--variation-multi .flex-viewport,
.cc-gallery--variation-multi .woocommerce-product-gallery__wrapper,
.cc-gallery--variation-multi .woocommerce-product-gallery__trigger,
.cc-gallery--variation-multi .flex-control-thumbs {
	display: none !important;
}
.cc-var-gallery__main {
	width: 100%;
	height: auto;
	border-radius: 16px;
	background: #fff;
}
.cc-var-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.cc-var-gallery__thumbs button {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	background: none;
	overflow: hidden;
	cursor: pointer;
}
.cc-var-gallery__thumbs button.is-active {
	border-color: currentColor;
}
.cc-var-gallery__thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Product name on the single product page: WooCommerce prints it as an
   h1, which inherited the homepage-headline size (display, 3rem) and
   wrapped to 3–4 lines on phones. h2 size on phones and tablets, display
   size on wide screens where the summary column has room. */
.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--h-2, 2.25rem); /* WordPress names the "h2" preset "h-2" */
	line-height: 1.15;
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}
@media (min-width: 1024px) {
	.woocommerce div.product .product_title {
		font-size: var(--wp--preset--font-size--display);
	}
}

/* Tighter name → currency → price → availability stack. The currency
   switcher's flag is floated, so the wrapper is given its own block
   formatting context to hold its real height. */
.woocommerce div.product .summary .wmc-price-switcher {
	display: flow-root;
	margin: 0 0 var(--wp--custom--spacing--1, 4px);
}
.woocommerce div.product .summary > p.price {
	margin-top: var(--wp--custom--spacing--1, 4px);
	margin-bottom: var(--wp--custom--spacing--2, 8px);
}