/* ==========================================================================
   CubeCraft Creations — design system
   Translated from design_handoff_storefront/*.dc.html
   ========================================================================== */

/* --- Self-hosted Nunito ---------------------------------------------------- */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/nunito-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/nunito-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/nunito-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/nunito-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/nunito-800.woff2') format('woff2');
}

:root {
	--cc-blue: #3B3AB8;
	--cc-purple: #A035CC;
	--cc-gradient: linear-gradient(135deg, #3B3AB8 0%, #A035CC 100%);

	--cc-primary-50: #EBEBF8;
	--cc-accent-50: #F6EAFD;

	--cc-surface: #F4F4F6;
	--cc-border: #E4E4EA;           /* decorative hairlines only — 1.27:1 on white */
	--cc-border-control: #8F8F9E;   /* interactive control borders: 3.19:1 on white (WCAG 1.4.11) */

	--cc-text: #18181D;
	--cc-text-muted: #52525E;
	--cc-text-faint: #696977;       /* 4.92:1 on surface, 5.6:1 on white — #70707E failed AA on surface */

	--cc-success: #128239;          /* 4.91:1 on white — #16A34A was 3.30:1 */
	--cc-error: #DC2626;

	--cc-ink: #18181D;           /* dark footer / badges */
	--cc-ink-soft: #3C3C46;      /* footer hairlines */
	--cc-ink-link: #C8C8D4;      /* footer links */
	--cc-ink-head: #9898A8;      /* footer headings */

	--cc-radius-pill: 9999px;
	--cc-radius-card: 16px;
	--cc-radius-panel: 22px;

	--cc-shadow-pill: 0 4px 14px rgba(59, 58, 184, 0.25);

	--cc-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--cc-header-h: 68px;
	--cc-maxw: 1200px;
}

/* --- Global type ---------------------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea,
.site-title,
.storefront-handheld-footer-bar,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--cc-font);
}

body {
	color: var(--cc-text);
	background: #fff;
}

a {
	color: var(--cc-blue);
}

/* Reset Storefront's masthead so our chrome owns the header band. */
.site-header,
.storefront-primary-navigation {
	background-color: transparent !important;
	background-image: none !important;
	border-bottom: 0;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.cc-header {
	font-family: var(--cc-font);
	border-bottom: 1px solid var(--cc-border);
	background: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Desktop layout */
.cc-header__desktop {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--cc-header-h);
	padding: 0 28px;
	max-width: var(--cc-maxw);
	margin: 0 auto;
}

.cc-header__mobile {
	display: none;
}

.cc-header__brand {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

.cc-header__brand img {
	height: 38px;
	width: auto;
	display: block;
}

.cc-header__nav {
	flex: 1;
}

/* Primary nav (works for wp_nav_menu output and the fallback) */
.cc-nav {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-nav li {
	margin: 0;
}

.cc-nav a {
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--cc-text-muted);
	padding: 8px 14px;
	border-radius: var(--cc-radius-pill);
	text-decoration: none;
	transition: all 150ms ease-out;
}

.cc-nav a:hover,
.cc-nav .current-menu-item > a {
	background: var(--cc-surface);
	color: var(--cc-blue);
}

.cc-header__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Circular icon buttons */
.cc-iconbtn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: none;
	border: 1px solid var(--cc-border);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cc-text-muted);
	padding: 0;
	transition: all 150ms ease-out;
	text-decoration: none;
}

.cc-iconbtn:hover {
	background: var(--cc-surface);
	color: var(--cc-blue);
}

.cc-iconbtn svg {
	width: 18px;
	height: 18px;
}

.cc-iconbtn--plain {
	border: none;
	color: var(--cc-text);
}

/* Gradient cart pill (desktop) */
.cc-cartpill {
	position: relative;
	height: 40px;
	padding: 0 16px 0 14px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-gradient);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	box-shadow: var(--cc-shadow-pill);
	text-decoration: none;
}

.cc-cartpill svg {
	width: 18px;
	height: 18px;
}

.cc-cartpill__total {
	white-space: nowrap;
}

.cc-cartpill__total .amount {
	color: #fff;
}

.cc-cartpill__count {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}

/* Gradient cart circle (mobile) */
.cc-cartcircle {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cc-gradient);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	flex-shrink: 0;
}

.cc-cartcircle svg {
	width: 18px;
	height: 18px;
}

.cc-cartcircle .cc-cartpill__count {
	top: -3px;
	right: -3px;
	min-width: 17px;
	height: 17px;
	font-size: 10px;
}

/* Slide-down product search */
.cc-search {
	border-top: 1px solid var(--cc-border);
	background: #fff;
}

.cc-search__inner {
	max-width: var(--cc-maxw);
	margin: 0 auto;
	padding: 14px 28px;
}

.cc-search form,
.cc-search .woocommerce-product-search {
	display: flex;
	gap: 8px;
}

.cc-search input[type="search"],
.cc-search input[type="text"] {
	flex: 1;
	height: 46px;
	padding: 0 18px;
	border-radius: var(--cc-radius-pill);
	border: 1px solid var(--cc-border-control);
	font-family: var(--cc-font);
	font-size: 15px;
	outline: none;
}

.cc-search button[type="submit"] {
	height: 46px;
	padding: 0 22px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-gradient);
	color: #fff;
	border: none;
	font-weight: 700;
	cursor: pointer;
}

/* Mobile drawer */
.cc-drawer {
	border-top: 1px solid var(--cc-border);
	background: #fff;
}

.cc-nav--drawer {
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
}

.cc-nav--drawer a {
	font-size: 16px;
	padding: 12px 14px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Storefront wraps #colophon in a max-width .col-full; break the footer
   out of it so the gradient/dark bands can span the full viewport width. */
.site-footer > .col-full {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Storefront's base #colophon padding (reserved for its handheld footer bar)
   otherwise leaves a light-gray band above/below the CubeCraft footer. */
.site-footer {
	padding: 0;
	background-color: transparent;
}

.cc-footer {
	font-family: var(--cc-font);
	margin-top: 48px;
}

.cc-footer__band {
	background: var(--cc-gradient);
	padding: 52px 24px;
	text-align: center;
}

.cc-footer__logo {
	height: 70px;
	width: auto;
	filter: brightness(0) invert(1);
	margin-bottom: 14px;
}

.cc-footer__tag {
	color: rgba(255, 255, 255, 0.92);
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 22px;
}

.cc-footer__social {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.cc-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	transition: background 0.15s ease;
}

.cc-footer__social-link:hover {
	background: rgba(255, 255, 255, 0.28);
}

.cc-footer__social-link svg {
	width: 20px;
	height: 20px;
}

.cc-footer__cols-wrap {
	background: var(--cc-ink);
	padding: 48px 24px 36px;
}

.cc-footer__cols {
	max-width: var(--cc-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
}

.cc-footer__head {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cc-ink-head);
	margin-bottom: 14px;
}

.cc-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cc-footer__links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-ink-link);
	text-decoration: none;
}

.cc-footer__links a:hover {
	color: #fff;
}

.cc-footer__trust {
	max-width: var(--cc-maxw);
	margin: 32px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--cc-ink-soft);
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.cc-footer__secure {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--cc-ink-head);
	font-size: 13px;
	font-weight: 600;
}

.cc-footer__secure svg {
	width: 15px;
	height: 15px;
}

.cc-footer__pays {
	display: flex;
	align-items: center;
	gap: 7px;
}

.cc-footer__pay {
	height: 26px;
	min-width: 40px;
	padding: 0 9px;
	border-radius: 5px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--cc-ink);
}

.cc-footer__copy {
	max-width: var(--cc-maxw);
	margin: 22px auto 0;
	color: var(--cc-ink-head); /* faint gray was 3.6:1 on the ink band */
	font-size: 12.5px;
	font-weight: 600;
}

/* Hide Storefront's default credit/footer if it slips through. */
.site-footer .storefront-handheld-footer-bar,
.site-info {
	display: none;
}

/* ==========================================================================
   Shared primitives (reused by Stage 2+ page templates)
   ========================================================================== */

.cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 24px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-gradient);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--cc-shadow-pill);
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.cc-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(59, 58, 184, 0.3);
	color: #fff;
}

.cc-btn--ghost {
	background: #fff;
	color: var(--cc-text);
	border: 1px solid var(--cc-border);
	box-shadow: none;
}

.cc-btn--ghost:hover {
	background: var(--cc-surface);
	color: var(--cc-blue);
}

.cc-card {
	background: #fff;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-card);
	overflow: hidden;
}

.cc-container {
	max-width: var(--cc-maxw);
	margin: 0 auto;
	padding: 0 28px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.cc-header__desktop {
		display: none;
	}

	.cc-header__mobile {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 54px;
		padding: 0 14px;
	}

	.cc-header__mobile .cc-menu-toggle {
		margin-left: -6px;
		width: 38px;
		height: 38px;
		border-radius: 10px;
	}

	.cc-header__mobile .cc-menu-toggle svg {
		width: 22px;
		height: 22px;
	}

	.cc-header__brand--mobile {
		margin: 0 auto;
	}

	.cc-header__brand--mobile img {
		height: 32px;
	}

	.cc-footer__band {
		padding: 36px 20px;
	}

	.cc-footer__logo {
		height: 54px;
	}

	.cc-footer__tag {
		font-size: 16px;
	}

	.cc-footer__cols-wrap {
		padding: 32px 20px 28px;
	}

	.cc-footer__cols {
		grid-template-columns: 1fr 1fr;
	}

	.cc-footer__trust {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Home / front page (Stage 2)
   ========================================================================== */

/* Let the front page run full-bleed: drop Storefront's .col-full constraint and
   content padding so our own sections own the full width and vertical rhythm. */
.home #content.site-content {
	padding: 0;
	margin: 0;
}

.home #content .col-full {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* --- Large + glass button variants (hero) --------------------------------- */
.cc-btn--lg {
	height: 52px;
	padding: 0 24px;
	font-size: 16px;
}

.cc-btn--glass {
	background: rgba(255, 255, 255, 0.14);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	box-shadow: none;
}

.cc-btn--glass:hover {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

/* --- Hero B (full-bleed photo) -------------------------------------------- */
.cc-hero {
	position: relative;
	height: 560px;
	overflow: hidden;
	background: var(--cc-ink);
}

.cc-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 9, 40, 0.82) 0%, rgba(20, 15, 60, 0.55) 45%, rgba(20, 15, 60, 0.05) 100%);
}

.cc-hero__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cc-hero__copy {
	max-width: 560px;
}

.cc-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	padding: 5px 13px;
	border-radius: var(--cc-radius-pill);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.cc-hero__title {
	font-weight: 800;
	font-size: 64px;
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	color: #fff;
}

.cc-hero__sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.6;
	margin: 0 0 28px;
	max-width: 440px;
}

.cc-hero__actions {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

/* --- Section scaffolding (shared by category + featured) ------------------ */
.cc-section {
	padding: 64px 0;
	background: #fff;
}

.cc-section--surface {
	background: var(--cc-surface);
}

.cc-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.cc-section__title {
	font-weight: 800;
	font-size: 34px;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.cc-section__sub {
	color: var(--cc-text-muted);
	font-size: 15px;
	margin: 0;
}

.cc-section__link {
	color: var(--cc-blue);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

.cc-section__link:hover {
	text-decoration: underline;
}

/* --- Category tiles ------------------------------------------------------- */
.cc-catgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.cc-cattile {
	display: block;
	background: #fff;
	border: 1px solid var(--cc-border);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 220ms cubic-bezier(0, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0, 0, 0.2, 1);
}

.cc-cattile:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.cc-cattile__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cc-surface);
}

.cc-cattile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cc-cattile:hover .cc-cattile__media img {
	transform: scale(1.06);
}

.cc-cattile__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--cc-gradient);
	color: #fff;
	font-size: 56px;
	font-weight: 800;
}

.cc-cattile__body {
	padding: 20px 22px 22px;
}

.cc-cattile__title {
	font-weight: 800;
	font-size: 21px;
	color: var(--cc-text);
	margin: 0 0 7px;
	letter-spacing: -0.01em;
}

.cc-cattile__blurb {
	color: var(--cc-text-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 14px;
}

.cc-cattile__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cc-blue);
	font-weight: 800;
	font-size: 14px;
}

/* --- Product cards (Featured grid; reused by later catalog stages) -------- */
.cc-prodgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.cc-pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-card);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 220ms cubic-bezier(0, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0, 0, 0.2, 1);
}

.cc-pcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.cc-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cc-surface);
}

.cc-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cc-pcard:hover .cc-pcard__media img {
	transform: scale(1.06);
}

.cc-pcard__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--cc-gradient);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: var(--cc-radius-pill);
	box-shadow: var(--cc-shadow-pill);
}

.cc-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 18px;
	flex: 1;
}

.cc-pcard__eyebrow {
	color: var(--cc-purple);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cc-pcard__title {
	color: var(--cc-text);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.cc-pcard__title:hover {
	color: var(--cc-blue);
}

.cc-pcard__price {
	color: var(--cc-blue);
	font-weight: 800;
	font-size: 18px;
	margin-bottom: 4px;
}

.cc-pcard__price del {
	color: var(--cc-text-faint);
	font-weight: 600;
	font-size: 14px;
	margin-right: 6px;
}

.cc-pcard__price ins {
	text-decoration: none;
}

/* Override Storefront's heavy .button styling for the card add-to-cart pill. */
.cc-pcard .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	margin-top: auto;
	padding: 0 18px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-gradient);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--cc-shadow-pill);
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.cc-pcard .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(59, 58, 184, 0.3);
	color: #fff;
}

.cc-pcard .added_to_cart {
	display: block;
	width: 100%;
	margin-top: 8px;
	text-align: center;
	color: var(--cc-blue);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}

/* --- Maker promise band --------------------------------------------------- */
.cc-section--promise {
	padding: 8px 0 72px;
	background: #fff;
}

.cc-promise {
	background: linear-gradient(135deg, var(--cc-primary-50), var(--cc-accent-50));
	border-radius: 24px;
	padding: 44px 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.cc-promise__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cc-promise__icon {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(59, 58, 184, 0.12);
	color: var(--cc-blue);
}

.cc-promise__icon svg {
	width: 24px;
	height: 24px;
}

.cc-promise__title {
	font-weight: 800;
	font-size: 18px;
	margin: 0;
	color: var(--cc-text);
}

.cc-promise__body {
	color: var(--cc-text-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

/* --- Home responsive ------------------------------------------------------ */
@media (max-width: 768px) {
	.cc-container {
		padding: 0 16px;
	}

	.cc-hero {
		height: 480px;
	}

	.cc-hero__copy {
		max-width: 100%;
	}

	.cc-hero__title {
		font-size: 38px;
	}

	.cc-hero__sub {
		font-size: 16px;
	}

	.cc-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cc-hero__actions .cc-btn {
		width: 100%;
	}

	.cc-section {
		padding: 40px 0;
	}

	.cc-section--promise {
		padding: 0 0 44px;
	}

	.cc-section__title {
		font-size: 26px;
	}

	.cc-catgrid {
		grid-template-columns: 1fr;
	}

	.cc-prodgrid {
		grid-template-columns: 1fr 1fr;
	}

	.cc-promise {
		grid-template-columns: 1fr;
		padding: 28px 22px;
		gap: 24px;
	}
}

/* ==========================================================================
   Shop / category archive (Stage 3)
   ========================================================================== */

/* Full-bleed the archive, same trick as the front page: drop Storefront's
   .col-full width constraint so our own page-header band and container own
   the layout. */
.post-type-archive-product #content.site-content,
.tax-product_cat #content.site-content {
	padding: 0;
	margin: 0;
}

.post-type-archive-product #content .col-full,
.tax-product_cat #content .col-full {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* --- Page header ------------------------------------------------------- */
.cc-shop__head {
	background: var(--cc-surface);
	border-bottom: 1px solid var(--cc-border);
	padding: 40px 0;
}

.cc-shop__crumb {
	font-size: 12px;
	font-weight: 700;
	color: var(--cc-text-faint);
	margin-bottom: 8px;
}

.cc-shop__crumb a {
	color: var(--cc-blue);
	text-decoration: none;
}

.cc-shop__crumb a:hover {
	text-decoration: underline;
}

.cc-shop__title {
	font-weight: 800;
	font-size: 40px;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	color: var(--cc-text);
}

.cc-shop__sub {
	color: var(--cc-text-muted);
	font-size: 15px;
	margin: 0;
}

/* --- Mobile category chips ---------------------------------------------- */
.cc-shop__chips {
	display: none;
	padding: 14px 16px;
	border-bottom: 1px solid var(--cc-border);
	gap: 8px;
	overflow-x: auto;
}

.cc-chip {
	flex-shrink: 0;
	padding: 8px 16px;
	border-radius: var(--cc-radius-pill);
	border: 1px solid var(--cc-border);
	background: #fff;
	color: var(--cc-text-muted);
	font-family: var(--cc-font);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.cc-chip.is-active {
	background: var(--cc-gradient);
	border-color: transparent;
	color: #fff;
}

/* --- Body: sidebar + grid ------------------------------------------------ */
.cc-shop__body {
	padding: 36px 28px 64px;
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.cc-shop__sidebar {
	flex: 0 0 232px;
	position: sticky;
	top: calc(var(--cc-header-h) + 20px);
}

/* Also a <fieldset> reset: the Price/Availability groups are fieldsets (with
 * .cc-filtergroup__label as their <legend>) so the group name reaches AT. */
.cc-filtergroup {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cc-filtergroup__label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cc-text-faint);
	margin-bottom: 12px;
	padding: 0;
}

.cc-catlist {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cc-catlist__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 12px;
	border-radius: 9px;
	background: transparent;
	color: var(--cc-text-muted);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.cc-catlist__row:hover {
	background: var(--cc-surface);
}

.cc-catlist__row.is-active {
	background: var(--cc-primary-50);
	color: var(--cc-blue);
	font-weight: 800;
}

.cc-catlist__count {
	font-size: 12px;
	font-weight: 700;
	color: var(--cc-text-faint);
}

.cc-catlist__row.is-active .cc-catlist__count {
	color: var(--cc-blue);
}

.cc-pricerange {
	width: 100%;
	accent-color: var(--cc-blue);
}

.cc-pricerange:disabled {
	opacity: 1;
}

.cc-pricerange__scale {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 700;
	color: var(--cc-text-muted);
	margin-top: 8px;
}

.cc-checkrow {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-text-muted);
	margin-bottom: 9px;
	cursor: pointer;
}

.cc-checkrow:last-of-type {
	margin-bottom: 0;
}

.cc-checkrow input {
	width: 16px;
	height: 16px;
	accent-color: var(--cc-blue);
}

/* --- Grid header: count + sort ------------------------------------------- */
.cc-shop__main {
	flex: 1;
	min-width: 0;
}

.cc-shop__gridhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.cc-shop__count {
	font-size: 14px;
	font-weight: 700;
	color: var(--cc-text-muted);
}

.cc-shop__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cc-text-faint);
}

.cc-shop__sort .woocommerce-ordering {
	margin: 0;
}

.cc-shop__sort select.orderby {
	height: 38px;
	padding: 0 32px 0 14px;
	border-radius: 9px;
	border: 1px solid var(--cc-border-control);
	background-color: #fff;
	font-family: var(--cc-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--cc-text);
	cursor: pointer;
}

.cc-prodgrid--shop {
	grid-template-columns: repeat(3, 1fr);
}

.cc-shop__empty {
	color: var(--cc-text-muted);
	font-size: 15px;
	padding: 40px 0;
	text-align: center;
}

/* --- Pagination ----------------------------------------------------------- */
.cc-shop__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
}

.cc-shop__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 9999px;
	border: 1px solid var(--cc-border);
	background: #fff;
	color: var(--cc-text-muted);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.cc-shop__pagination .page-numbers:hover {
	background: var(--cc-surface);
	color: var(--cc-blue);
}

.cc-shop__pagination .page-numbers.current {
	background: var(--cc-gradient);
	border-color: transparent;
	color: #fff;
}

/* --- Shop responsive ------------------------------------------------------ */
@media (max-width: 768px) {
	.cc-shop__head {
		padding: 24px 0;
	}

	.cc-shop__title {
		font-size: 28px;
	}

	.cc-shop__chips {
		display: flex;
	}

	.cc-shop__sidebar {
		display: none;
	}

	.cc-shop__body {
		padding: 20px 16px 8px;
	}

	.cc-prodgrid--shop {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Product detail (Stage 4)
   ========================================================================== */

.cc-product__top {
	padding: 24px 28px 0;
}

.cc-product__crumb {
	font-size: 12px;
	font-weight: 700;
	color: var(--cc-text-faint);
	margin-bottom: 20px;
}

.cc-product__crumb a {
	color: var(--cc-blue);
	text-decoration: none;
}

.cc-product__crumb a:hover {
	text-decoration: underline;
}

.cc-product__main {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

/* --- Gallery --------------------------------------------------------------- */
.cc-gallery {
	flex: 0 0 500px;
	width: 100%;
	display: flex;
	gap: 12px;
}

.cc-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cc-gallery__thumb {
	width: 76px;
	height: 76px;
	flex-shrink: 0;
	padding: 0;
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid var(--cc-border);
	background: var(--cc-surface);
	cursor: pointer;
}

.cc-gallery__thumb.is-active {
	border-color: var(--cc-blue);
}

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

.cc-gallery__main {
	position: relative;
	flex: 1;
	aspect-ratio: 1;
	border-radius: 20px;
	overflow: hidden;
	background: var(--cc-surface);
}

.cc-gallery__zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	cursor: zoom-in;
	position: relative;
}

.cc-gallery__zoom:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 2px;
}

.cc-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.cc-gallery__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--cc-gradient);
	color: #fff;
	padding: 5px 12px;
	border-radius: var(--cc-radius-pill);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

/* --- Product gallery lightbox ------------------------------------------------ */
.cc-gallery-lightbox {
	padding: 0;
	border: none;
	max-width: min(96vw, 1200px);
	width: 100%;
	background: transparent;
	color: var(--cc-text);
}

.cc-gallery-lightbox::backdrop {
	background: rgba(24, 24, 29, 0.82);
}

.cc-gallery-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40vh;
	max-height: 85vh;
	margin: 48px 56px 32px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
}

.cc-gallery-lightbox__img {
	max-width: 100%;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.cc-gallery-lightbox__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--cc-text);
}

.cc-gallery-lightbox__prev,
.cc-gallery-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--cc-text);
}

.cc-gallery-lightbox__prev {
	left: 8px;
}

.cc-gallery-lightbox__next {
	right: 8px;
}

.cc-gallery-lightbox__counter {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
	.cc-gallery-lightbox__stage {
		margin: 40px 12px 28px;
	}

	.cc-gallery-lightbox__prev,
	.cc-gallery-lightbox__next {
		width: 40px;
		height: 40px;
	}
}

/* --- Buy box ----------------------------------------------------------------- */
.cc-buybox {
	flex: 1 1 auto;
	width: 100%;
}

.cc-buybox__eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cc-purple);
	margin-bottom: 8px;
}

.cc-buybox__title {
	font-weight: 800;
	font-size: 36px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 12px;
	color: var(--cc-text);
}

.cc-buybox__rating {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.cc-stars {
	display: flex;
	gap: 2px;
	color: var(--cc-border);
}

.cc-stars svg {
	width: 17px;
	height: 17px;
}

.cc-stars svg.is-filled {
	color: var(--cc-purple);
}

.cc-buybox__ratingtext {
	font-size: 14px;
	font-weight: 700;
	color: var(--cc-text-muted);
}

.cc-buybox__pricerow {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.cc-buybox__price {
	font-weight: 800;
	font-size: 32px;
	color: var(--cc-blue);
}

.cc-buybox__price del {
	color: var(--cc-text-faint);
	font-weight: 600;
	font-size: 20px;
	margin-right: 6px;
}

.cc-buybox__price ins {
	text-decoration: none;
}

.cc-buybox__stock {
	font-size: 13px;
	font-weight: 700;
}

.cc-buybox__stock--in {
	color: var(--cc-success);
}

.cc-buybox__stock--backorder {
	color: var(--cc-blue);
}

.cc-buybox__stock--out {
	color: var(--cc-error);
}

.cc-buybox__blurb {
	font-size: 16px;
	color: var(--cc-text-muted);
	line-height: 1.6;
	margin: 0 0 24px;
}

.cc-buybox__blurb p {
	margin: 0 0 12px;
}

.cc-buybox__blurb p:last-child {
	margin-bottom: 0;
}

/* --- Buy form: qty stepper + add to cart / buy now -------------------------- */
.cc-buyform__row {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
}

.cc-qty {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--cc-border-control);
	border-radius: var(--cc-radius-pill);
	height: 52px;
	flex-shrink: 0;
}

.cc-qty__btn {
	width: 48px;
	height: 100%;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--cc-text-muted);
}

.cc-qty__btn--dec {
	border-radius: var(--cc-radius-pill) 0 0 var(--cc-radius-pill);
}

.cc-qty__btn--inc {
	border-radius: 0 var(--cc-radius-pill) var(--cc-radius-pill) 0;
}

.cc-qty .quantity {
	display: flex;
}

.cc-qty__input {
	width: 40px;
	min-width: 32px;
	height: 100%;
	border: none;
	background: none;
	text-align: center;
	font-weight: 800;
	font-size: 16px;
	color: var(--cc-text);
	-moz-appearance: textfield;
}

.cc-qty__input::-webkit-inner-spin-button,
.cc-qty__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cc-buyform__add {
	flex: 1;
	width: 100%;
}

.cc-buyform__total {
	opacity: 0.9;
}

.cc-buyform__buynow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 52px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-ink);
	color: #fff;
	border: none;
	font-family: var(--cc-font);
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 18px;
}

.cc-buyform__buynow svg {
	width: 18px;
	height: 18px;
}

.cc-buybox__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	color: var(--cc-text-faint);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 22px;
}

.cc-buybox__secure svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* --- Native variation form (variable products) ------------------------------ */
.cc-buybox .variations_form.cart {
	margin-bottom: 18px;
}

.cc-buybox table.variations {
	width: 100%;
	margin-bottom: 16px;
}

.cc-buybox table.variations th.label {
	font-size: 13px;
	font-weight: 800;
	color: var(--cc-text);
	text-align: left;
	padding: 6px 0;
}

.cc-buybox table.variations select {
	height: 44px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px solid var(--cc-border-control);
	background-color: #fff;
	font-family: var(--cc-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--cc-text);
}

.cc-buybox .woocommerce-variation-price .amount {
	font-weight: 800;
	font-size: 24px;
	color: var(--cc-blue);
}

.cc-buybox .single_add_to_cart_button {
	width: 100%;
}

/* --- Accordion ---------------------------------------------------------------- */
.cc-accordion {
	border-top: 1px solid var(--cc-border);
}

.cc-accordion__item {
	border-bottom: 1px solid var(--cc-border);
}

.cc-accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 2px;
	font-weight: 800;
	font-size: 15px;
	color: var(--cc-text);
	cursor: pointer;
	list-style: none;
}

.cc-accordion__head::-webkit-details-marker {
	display: none;
}

.cc-accordion__head::after {
	content: '+';
	font-size: 20px;
	font-weight: 400;
	color: var(--cc-text-faint);
}

.cc-accordion__item[open] .cc-accordion__head::after {
	content: '\2212';
}

.cc-accordion__body {
	margin: 0;
	padding: 0 2px 18px;
	font-size: 14px;
	color: var(--cc-text-muted);
	line-height: 1.6;
}

.cc-accordion__body p {
	margin: 0 0 10px;
}

.cc-accordion__body p:last-child {
	margin-bottom: 0;
}

/* --- Related ------------------------------------------------------------------ */
.cc-product__related {
	margin-top: 72px;
	padding-bottom: 64px;
}

.cc-product__related-title {
	font-weight: 800;
	font-size: 28px;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
	color: var(--cc-text);
}

/* --- Product responsive -------------------------------------------------------- */
@media (max-width: 768px) {
	.cc-product__top {
		padding: 16px 16px 0;
	}

	.cc-product__main {
		flex-direction: column;
		gap: 24px;
	}

	.cc-gallery {
		flex: 1 1 auto;
		flex-direction: column-reverse;
	}

	.cc-gallery__thumbs {
		flex-direction: row;
	}

	.cc-gallery__thumb {
		width: 64px;
		height: 64px;
	}

	.cc-buybox__title {
		font-size: 26px;
	}

	.cc-product__related {
		margin-top: 48px;
	}

	.cc-product__related-title {
		font-size: 22px;
	}
}

/* ==========================================================================
   Cart (Stage 5)
   ========================================================================== */

.woocommerce-cart #content.site-content {
	padding: 0;
	margin: 0;
}

.woocommerce-cart #content .col-full {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.cc-cart__top {
	padding: 40px 28px 72px;
}

.cc-cart__title {
	font-weight: 800;
	font-size: 38px;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
	color: var(--cc-text);
}

.cc-cart__sub {
	color: var(--cc-text-muted);
	font-size: 15px;
	margin: 0 0 28px;
}

/* --- Free shipping progress ------------------------------------------------ */
.cc-shipbar {
	background: var(--cc-primary-50);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 24px;
}

.cc-shipbar__msg {
	font-size: 14px;
	font-weight: 700;
	color: var(--cc-blue);
	margin-bottom: 10px;
}

.cc-shipbar__track {
	height: 8px;
	border-radius: var(--cc-radius-pill);
	background: #fff;
	overflow: hidden;
}

.cc-shipbar__fill {
	height: 100%;
	background: var(--cc-gradient);
	border-radius: var(--cc-radius-pill);
}

/* --- Two-column layout ------------------------------------------------------ */
.cc-cart__body {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.cc-cart__left {
	flex: 1;
	width: 100%;
	min-width: 0;
}

/* --- Line items -------------------------------------------------------------- */
.cc-cartitem {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--cc-border);
}

.cc-cartitem__media {
	width: 96px;
	height: 96px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--cc-surface);
	flex-shrink: 0;
}

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

.cc-cartitem__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.cc-cartitem__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.cc-cartitem__row--bottom {
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
}

.cc-cartitem__name {
	font-weight: 800;
	font-size: 16px;
	color: var(--cc-text);
	margin-bottom: 3px;
}

.cc-cartitem__name a {
	color: inherit;
	text-decoration: none;
}

.cc-cartitem__name a:hover {
	color: var(--cc-blue);
}

.cc-cartitem__variant dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--cc-text-faint);
}

.cc-cartitem__variant dl.variation dt,
.cc-cartitem__variant dl.variation dd {
	display: inline;
	margin: 0;
}

.cc-cartitem__variant dl.variation dd p {
	display: inline;
	margin: 0;
}

.cc-cartitem__remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--cc-text-faint);
	padding: 2px;
	height: fit-content;
	line-height: 0;
}

.cc-cartitem__remove:hover {
	color: var(--cc-error);
}

.cc-cartitem__remove svg {
	width: 18px;
	height: 18px;
}

.cc-cartitem__linetotal {
	font-weight: 800;
	font-size: 18px;
	color: var(--cc-blue);
}

/* Small qty stepper variant (line items; the product page uses the 52px one). */
.cc-qty--sm {
	height: 40px;
}

.cc-qty--sm .cc-qty__btn {
	width: 38px;
	font-size: 18px;
}

.cc-qty--sm .cc-qty__input {
	min-width: 28px;
	font-size: 15px;
}

/* --- Coupon + form actions --------------------------------------------------- */
.cc-cartform__actions {
	margin-top: 20px;
}

.cc-coupon {
	display: flex;
	gap: 8px;
}

.cc-coupon__input {
	flex: 1;
	height: 42px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px solid var(--cc-border-control);
	font-family: var(--cc-font);
	font-size: 14px;
	font-weight: 600;
	outline: none;
	background: #fff;
}

.cc-coupon__apply {
	height: 42px;
	padding: 0 18px;
	border-radius: 9px;
	border: 1px solid var(--cc-border);
	background: #fff;
	font-family: var(--cc-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--cc-blue);
	cursor: pointer;
}

.cc-coupon__apply:hover {
	background: var(--cc-surface);
}

.cc-cart__continue {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 20px;
	color: var(--cc-blue);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.cc-cart__continue svg {
	width: 17px;
	height: 17px;
}

.cc-cart__continue:hover {
	text-decoration: underline;
}

/* --- Order summary ------------------------------------------------------------ */
.cc-cartsum {
	flex: 0 0 360px;
	width: 100%;
	background: var(--cc-surface);
	border-radius: 18px;
	padding: 24px;
	position: sticky;
	top: calc(var(--cc-header-h) + 20px);
}

.cc-cartsum__title {
	font-weight: 800;
	font-size: 19px;
	margin-bottom: 18px;
}

.cc-cartsum__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
	color: var(--cc-text-muted);
	margin-bottom: 11px;
}

.cc-cartsum__row--shipping {
	align-items: flex-start;
}

.cc-cartsum__val {
	font-weight: 700;
	color: var(--cc-text);
}

.cc-cartsum__shipping {
	text-align: right;
}

.cc-shipmethods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-shipmethods__row {
	font-size: 14px;
	font-weight: 600;
}

.cc-shipmethods__row input {
	accent-color: var(--cc-blue);
	margin-right: 6px;
}

.cc-cartsum__row a {
	color: var(--cc-text-faint);
	font-weight: 700;
}

.cc-cartsum__row a:hover {
	color: var(--cc-error);
}

.cc-cartsum__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 16px;
	border-top: 2px solid var(--cc-border);
	margin-bottom: 20px;
}

.cc-cartsum__total span:first-child {
	font-weight: 800;
	font-size: 18px;
	color: var(--cc-text);
}

.cc-cartsum__totalval {
	font-weight: 800;
	font-size: 24px;
	color: var(--cc-blue);
}

.cc-cartsum__checkout {
	width: 100%;
	margin-bottom: 14px;
}

.cc-cartsum__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	color: var(--cc-text-faint);
	font-size: 12.5px;
	font-weight: 600;
}

.cc-cartsum__secure svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* --- Empty cart ---------------------------------------------------------------- */
.cc-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 80px 20px;
}

.cc-cart__empty svg {
	width: 56px;
	height: 56px;
	color: var(--cc-text-faint);
	margin-bottom: 18px;
}

.cc-cart__empty-title {
	font-weight: 800;
	font-size: 28px;
	margin: 0 0 8px;
	color: var(--cc-text);
}

.cc-cart__empty-sub {
	color: var(--cc-text-muted);
	font-size: 15px;
	margin: 0 0 28px;
}

/* --- Cart responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
	.cc-cart__top {
		padding: 24px 16px 44px;
	}

	.cc-cart__title {
		font-size: 28px;
	}

	.cc-cart__body {
		flex-direction: column;
		gap: 8px;
	}

	.cc-cartitem__media {
		width: 76px;
		height: 76px;
	}

	.cc-cartsum {
		flex: 1 1 auto;
		position: static;
		margin-top: 24px;
	}
}

/* ==========================================================================
   Checkout (Stage 6)
   ========================================================================== */

.woocommerce-checkout #content.site-content {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #content .col-full {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.cc-checkout__top {
	padding: 36px 28px 64px;
}

.cc-checkout__crumb {
	font-size: 12px;
	font-weight: 700;
	color: var(--cc-text-faint);
	margin-bottom: 8px;
}

.cc-checkout__title {
	font-weight: 800;
	font-size: 36px;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
	color: var(--cc-text);
}

/* Only one allowed country: the select still exists (JS reads #billing_country)
   but there's nothing for a shopper to choose, so it's hidden rather than
   shown locked to a single option. */
#billing_country_field {
	display: none;
}

.cc-checkout__body {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.cc-checkout__left {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	display: flex;
	flex-direction: column;
}

/* --- Cards (Contact / Shipping address / Delivery method) ------------------ */
.cc-checkoutcard {
	border: 1px solid var(--cc-border);
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 14px;
}

.cc-checkoutcard:last-child {
	margin-bottom: 0;
}

.cc-checkoutcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.cc-checkoutcard__title {
	font-weight: 800;
	font-size: 17px;
	color: var(--cc-text);
	margin-bottom: 14px;
}

.cc-checkoutcard__head .cc-checkoutcard__title {
	margin-bottom: 0;
}

.cc-checkoutcard__login {
	font-size: 13px;
	font-weight: 700;
	color: var(--cc-blue);
	text-decoration: none;
}

.cc-checkoutcard__login:hover {
	text-decoration: underline;
}

.cc-checkoutcard__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* --- Real WooCommerce field markup, reskinned ------------------------------- */
.cc-checkoutcard .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.cc-checkoutcard__grid .form-row {
	margin: 0;
}

.cc-checkoutcard .form-row:last-child {
	margin-bottom: 0;
}

.cc-checkoutcard .form-row-wide,
.cc-checkoutcard__grid .form-row-wide {
	grid-column: 1 / -1;
}

/* Labels stay in the markup for assistive tech; the mockup is placeholder-only. */
.cc-checkoutcard .form-row > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cc-checkoutcard .form-row {
	position: relative;
}

.cc-checkoutcard input.input-text,
.cc-checkoutcard select,
.cc-checkoutcard .select2-selection {
	width: 100%;
	height: 48px;
	padding: 0 15px;
	border-radius: 9px;
	border: 1px solid var(--cc-border-input, #8F8F9E);
	font-family: var(--cc-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--cc-text);
	outline: none;
	background: #fff;
	box-sizing: border-box;
}

.cc-checkoutcard select {
	color: var(--cc-text-muted);
	cursor: pointer;
}

.cc-checkoutcard input.input-text:focus,
.cc-checkoutcard select:focus {
	border-color: var(--cc-blue);
}

.cc-checkoutcard .woocommerce-input-wrapper {
	display: block;
}

/* --- Checkbox rows (marketing opt-in) --------------------------------------- */
.cc-checkoutcard .form-row.woocommerce-validated,
.cc-checkoutcard .form-row.woocommerce-invalid {
	margin-bottom: 12px;
}

.cc-checkoutcard label.checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-text-muted);
	cursor: pointer;
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

.cc-checkoutcard input.input-checkbox {
	width: 16px;
	height: 16px;
	accent-color: var(--cc-blue);
	flex-shrink: 0;
}

/* --- Coupon form (repositioned into the order-summary card) ----------------- */
/* Storefront floats .form-row-first/last; keep a real flex row so Apply sits
   beside the input instead of overlapping under it. */
.cc-checkoutsum .woocommerce-form-coupon-toggle {
	margin-bottom: 10px;
}

.cc-checkoutsum .woocommerce-form-coupon-toggle .woocommerce-info {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: var(--cc-text-muted);
	list-style: none;
}

/* Hide WooCommerce info icon (yellow circle) on the coupon toggle */
.cc-checkoutsum .woocommerce-form-coupon-toggle .woocommerce-info::before,
.cc-checkoutsum .woocommerce-form-coupon-toggle .woocommerce-info::after {
	display: none !important;
	content: none !important;
}

.cc-checkoutsum a.showcoupon {
	color: var(--cc-blue);
	font-weight: 700;
	text-decoration: none;
}

.cc-checkoutsum a.showcoupon:hover {
	text-decoration: underline;
}

.cc-checkoutsum .woocommerce-form-coupon {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 14px;
}

/* Kill Storefront floats that fight flex (global .form-row-first { width:100% }
   would stack Apply under the input). */
.cc-checkoutsum .woocommerce-form-coupon .form-row,
.cc-checkoutsum .woocommerce-form-coupon .form-row-first,
.cc-checkoutsum .woocommerce-form-coupon .form-row-last {
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0;
	box-sizing: border-box;
}

.cc-checkoutsum .woocommerce-form-coupon .form-row-first {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
}

.cc-checkoutsum .woocommerce-form-coupon .form-row-last {
	flex: 0 0 auto;
	width: auto !important;
}

.cc-checkoutsum .woocommerce-form-coupon input#coupon_code {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px solid var(--cc-border-control);
	font-family: var(--cc-font);
	font-size: 14px;
	font-weight: 600;
	outline: none;
	background: #fff;
	box-sizing: border-box;
}

.cc-checkoutsum .woocommerce-form-coupon button {
	height: 42px;
	padding: 0 18px;
	border-radius: 9px;
	border: 1px solid var(--cc-border);
	background: #fff;
	font-family: var(--cc-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--cc-blue);
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
}

/* --- Order summary sidebar --------------------------------------------------- */
/* Storefront sets #order_review to ~41% width + float on desktop; inside our
   fixed-width aside that percentage collapses the column. Scope overrides to
   .cc-checkoutsum and win on specificity. */
body.woocommerce-checkout .cc-checkoutsum #order_review,
body.woocommerce-checkout .cc-checkoutsum #order_review_heading,
body.woocommerce-checkout .cc-checkoutsum #payment,
.woocommerce-checkout .cc-checkoutsum #order_review,
.woocommerce-checkout .cc-checkoutsum #order_review_heading,
.woocommerce-checkout .cc-checkoutsum #payment {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	box-sizing: border-box;
}

body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
	width: 100%;
	float: none;
	margin: 0;
	clear: none;
}

/* Override Storefront's col2-set and customer_details float layout */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	width: 100%;
	float: none;
	margin: 0;
}

/* Remove Storefront's green inset box-shadow on validated fields */
.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
	box-shadow: none;
}

.cc-checkoutsum {
	flex: 0 0 420px;
	width: 420px;
	max-width: 100%;
	min-width: 0;
	align-self: stretch;
	background: var(--cc-surface);
	border-radius: 18px;
	padding: 28px;
	position: sticky;
	top: calc(var(--cc-header-h) + 20px);
	box-sizing: border-box;
}

.cc-checkoutsum #order_review,
.cc-checkoutsum .woocommerce-checkout-review-order {
	display: block;
	width: 100%;
}

.cc-checkoutsum__review {
	width: 100%;
}

.cc-checkoutsum__title {
	font-weight: 800;
	font-size: 18px;
	margin-bottom: 18px;
}

.cc-checkoutsum__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 12px;
}

.cc-checkoutitem {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cc-checkoutitem__media {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 11px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--cc-border);
	flex-shrink: 0;
}

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

.cc-checkoutitem__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cc-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--cc-surface);
}

.cc-checkoutitem__info {
	flex: 1;
	min-width: 0;
}

.cc-checkoutitem__name {
	font-weight: 700;
	font-size: 14px;
	color: var(--cc-text);
	line-height: 1.3;
}

.cc-checkoutitem__variant {
	font-size: 12px;
	font-weight: 600;
	color: var(--cc-text-faint);
}

.cc-checkoutitem__total {
	font-weight: 800;
	font-size: 15px;
	color: var(--cc-text);
	flex-shrink: 0;
}

/* --- Delivery method (inside #order_review) --------------------------------- */
.cc-checkoutcard--delivery {
	background: #fff;
	margin-bottom: 14px;
}

.cc-checkoutsum .cc-shipmethods {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cc-checkoutsum .cc-shipmethods__row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 16px;
	border-radius: 11px;
	border: 2px solid var(--cc-border);
	font-size: inherit;
	font-weight: inherit;
}

.cc-checkoutsum .cc-shipmethods__row:has(input:checked) {
	border-color: var(--cc-blue);
	background: var(--cc-primary-50);
}

.cc-checkoutsum .cc-shipmethods__row input {
	width: 20px;
	height: 20px;
	accent-color: var(--cc-blue);
	margin: 0;
	flex-shrink: 0;
}

.cc-checkoutsum .cc-shipmethods__row label {
	flex: 1;
	font-weight: 800;
	font-size: 15px;
	color: var(--cc-text);
	cursor: pointer;
}

/* --- Totals ------------------------------------------------------------------- */
.cc-checkoutsum__totals .cc-cartsum__row {
	font-size: 14px;
}

.cc-checkoutsum__totals .cc-cartsum__total {
	font-size: 17px;
}

/* --- Payment (WooCommerce default #payment, reskinned only) ------------------ */
.woocommerce-checkout-payment,
.cc-checkoutsum #payment.woocommerce-checkout-payment {
	margin-top: 18px;
	border: 1px solid var(--cc-border);
	border-radius: 14px;
	padding: 22px;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
}

.cc-checkoutsum .woocommerce-checkout-payment .payment_box,
.cc-checkoutsum #payment .payment_box {
	min-width: 0;
	overflow: visible;
}

.cc-checkoutsum .woocommerce-checkout-payment .payment_box iframe,
.cc-checkoutsum #payment .payment_box iframe {
	max-width: 100%;
	width: 100% !important;
}

.woocommerce-checkout-payment ul.payment_methods {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.woocommerce-checkout-payment ul.payment_methods > li {
	border: 1px solid var(--cc-border);
	border-radius: 11px;
	padding: 12px 14px;
}

.woocommerce-checkout-payment ul.payment_methods input.input-radio {
	accent-color: var(--cc-blue);
	margin-right: 8px;
}

.woocommerce-checkout-payment ul.payment_methods label {
	font-weight: 700;
	font-size: 15px;
	color: var(--cc-text);
	cursor: pointer;
}

.woocommerce-checkout-payment .payment_box {
	margin-top: 12px;
	padding: 14px;
	background: var(--cc-bg-faint, #FAFAFA);
	border: 1px solid var(--cc-border);
	border-radius: 11px;
	font-size: 14px;
	color: var(--cc-text-muted);
}

.woocommerce-checkout-payment .payment_box input.input-text {
	height: 44px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px solid var(--cc-border);
	font-family: var(--cc-font);
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-terms-and-conditions-wrapper {
	margin: 14px 0;
	font-size: 13px;
	color: var(--cc-text-muted);
}

#place_order {
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 14px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-gradient);
	color: #fff;
	font-family: var(--cc-font);
	font-weight: 800;
	font-size: 16px;
	border: none;
	cursor: pointer;
	box-shadow: var(--cc-shadow-pill);
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

#place_order:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(59, 58, 184, 0.3);
}

/* --- Checkout responsive ------------------------------------------------------- */
@media (max-width: 768px) {
	/* Prevent iOS Safari auto-zoom on input focus */
	* {
		-webkit-text-size-adjust: 100%;
	}

	.cc-checkout__top {
		padding: 20px 16px 32px;
	}

	.cc-checkout__title {
		font-size: 28px;
	}

	.cc-checkout__body {
		flex-direction: column;
		gap: 20px;
	}

	.cc-checkoutcard__grid {
		grid-template-columns: 1fr;
	}

	.cc-checkoutcard__grid .form-row-first,
	.cc-checkoutcard__grid .form-row-last {
		grid-column: 1 / -1;
	}

	/* Tighten card spacing for 375px screens */
	.cc-checkoutcard {
		padding: 18px;
		margin-bottom: 12px;
	}

	/* Tighten order summary spacing */
	.cc-checkoutsum {
		position: static;
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
		padding: 20px;
	}

	.cc-checkoutsum__items {
		gap: 10px;
		margin-bottom: 10px;
	}

	.cc-checkoutsum__title {
		margin-bottom: 14px;
	}

	/* Coupon: stack full-width input + Apply (Storefront float fight on mobile) */
	.cc-checkoutsum .woocommerce-form-coupon-toggle {
		margin-bottom: 8px;
	}

	.cc-checkoutsum .woocommerce-form-coupon {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 8px;
		margin-bottom: 12px;
	}

	.cc-checkoutsum .woocommerce-form-coupon .form-row,
	.cc-checkoutsum .woocommerce-form-coupon .form-row-first,
	.cc-checkoutsum .woocommerce-form-coupon .form-row-last {
		float: none !important;
		width: 100% !important;
		flex: 0 0 auto;
		min-width: 0;
	}

	.cc-checkoutsum .woocommerce-form-coupon input#coupon_code {
		width: 100%;
		height: 44px;
	}

	.cc-checkoutsum .woocommerce-form-coupon button {
		width: 100%;
		height: 44px;
	}

	.cc-checkoutcard--delivery {
		margin-bottom: 12px;
	}

	/* Tighten payment box */
	.woocommerce-checkout-payment,
	.cc-checkoutsum #payment.woocommerce-checkout-payment {
		padding: 18px;
	}
}

/* ==========================================================================
   Shared primitives — badge / gradient text (Stage 7+)
   ========================================================================== */

.cc-badge {
	display: inline-flex;
	background: var(--cc-gradient);
	color: #fff;
	padding: 5px 13px;
	border-radius: var(--cc-radius-pill);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.cc-gradtext {
	background: var(--cc-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ==========================================================================
   About (Stage 7)
   ========================================================================== */

.cc-about__prose {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 0 64px;
}

.cc-about__pagetitle {
	font-weight: 800;
	font-size: 42px;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
	color: var(--cc-text);
}

.cc-about__prose h2 {
	font-weight: 800;
	font-size: 26px;
	line-height: 1.25;
	margin: 40px 0 16px;
	color: var(--cc-text);
}

.cc-about__prose p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--cc-text-muted);
	margin: 0 0 18px;
}

.cc-about__prose ul {
	margin: 0 0 18px;
	padding-left: 1.35em;
	font-size: 17px;
	line-height: 1.7;
	color: var(--cc-text-muted);
}

.cc-about__prose li {
	margin-bottom: 8px;
}

.cc-about__prose a {
	color: var(--cc-blue);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-about__prose a:hover {
	color: var(--cc-purple);
}

.cc-about__prose-links {
	margin-top: 2.5em !important;
	font-size: 16px !important;
}

.cc-about__prose-sep {
	margin: 0 10px;
	color: var(--cc-border);
}

.cc-about__hero {
	padding: 64px 0 8px;
}

.cc-about__herowrap {
	max-width: 840px;
	text-align: center;
}

.cc-about__title {
	font-weight: 800;
	font-size: 54px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 18px;
	color: var(--cc-text);
}

.cc-about__lead {
	font-size: 19px;
	color: var(--cc-text-muted);
	line-height: 1.65;
	margin: 0 auto;
	max-width: 600px;
}

.cc-about__heroimgwrap {
	margin-top: 36px;
}

.cc-about__heroimg {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--cc-surface);
	box-shadow: 0 20px 60px rgba(59, 58, 184, 0.14);
}

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

/* --- Story split ------------------------------------------------------------- */
.cc-about__split {
	max-width: 1080px;
	display: flex;
	align-items: center;
	gap: 48px;
}

.cc-about__splitcopy {
	flex: 1;
	width: 100%;
}

.cc-about__splitcopy p {
	font-size: 16px;
	color: var(--cc-text-muted);
	line-height: 1.7;
	margin: 0 0 14px;
}

.cc-about__splitcopy p:last-child {
	margin-bottom: 0;
}

.cc-about__splitimg {
	flex: 1;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #fff;
}

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

/* --- How it's made steps ------------------------------------------------------ */
.cc-about__stepshead {
	max-width: 1080px;
	margin: 0 auto 36px;
	text-align: center;
}

.cc-about__steps {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.cc-about__step {
	background: var(--cc-surface);
	border-radius: 18px;
	padding: 26px 24px;
}

.cc-about__stepnum {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--cc-gradient);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 18px;
	margin-bottom: 16px;
}

.cc-about__step h3 {
	font-weight: 800;
	font-size: 18px;
	margin: 0 0 8px;
	color: var(--cc-text);
}

.cc-about__step p {
	font-size: 14px;
	color: var(--cc-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* --- Pull quote ---------------------------------------------------------------- */
.cc-about__quote {
	background: var(--cc-gradient);
	padding: 72px 0;
}

.cc-about__quotewrap {
	max-width: 760px;
	text-align: center;
}

.cc-about__quotemark {
	font-size: 48px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1;
	margin-bottom: 6px;
}

.cc-about__quotetext {
	font-weight: 800;
	font-size: 30px;
	color: #fff;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
}

.cc-about__quoteattr {
	color: #FFFFFF; /* 0.85 alpha fell to 4.34:1 against the gradient's purple end */
	font-size: 15px;
	font-weight: 700;
}

/* --- CTA ------------------------------------------------------------------------ */
.cc-about__cta {
	max-width: 1080px;
	text-align: center;
}

.cc-about__cta p {
	font-size: 16px;
	color: var(--cc-text-muted);
	margin: 0 0 24px;
}

.cc-about__ctabtns {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
}

/* --- About responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
	.cc-about__hero {
		padding: 32px 0 8px;
	}

	.cc-about__title {
		font-size: 34px;
	}

	.cc-about__lead {
		font-size: 16px;
	}

	.cc-about__heroimg {
		aspect-ratio: 4 / 3;
	}

	.cc-about__split {
		flex-direction: column;
		gap: 24px;
	}

	.cc-about__steps {
		grid-template-columns: 1fr;
	}

	.cc-about__quote {
		padding: 48px 0;
	}

	.cc-about__quotetext {
		font-size: 22px;
	}

	.cc-about__ctabtns {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ==========================================================================
   Contact (Stage 8)
   ========================================================================== */

.cc-contact__head {
	background: var(--cc-surface);
	border-bottom: 1px solid var(--cc-border);
	padding: 48px 0;
}

.cc-contact__headwrap {
	max-width: 1080px;
	text-align: center;
}

.cc-contact__title {
	font-weight: 800;
	font-size: 42px;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	color: var(--cc-text);
}

.cc-contact__lead {
	font-size: 17px;
	color: var(--cc-text-muted);
	line-height: 1.65;
	margin: 0 auto;
	max-width: 640px;
}

.cc-contact__body {
	max-width: 1080px;
	padding: 44px 28px 64px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media (min-width: 900px) {
	.cc-contact__body {
		flex-direction: row;
		align-items: flex-start;
	}
}

.cc-contactinfo--details {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 900px) {
	.cc-contactinfo--details {
		flex: 0 0 340px;
		max-width: 340px;
	}
}

.cc-contactdetails {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--cc-border);
	border-radius: 18px;
	background: var(--cc-surface);
}

.cc-contactdetails__row {
	margin: 0 0 16px;
}

.cc-contactdetails__row:last-child {
	margin-bottom: 0;
}

.cc-contactdetails dt {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cc-text-muted);
	margin: 0 0 4px;
}

.cc-contactdetails dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--cc-text);
	line-height: 1.45;
}

.cc-contactdetails a {
	color: var(--cc-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-contactdetails a:hover {
	color: var(--cc-purple);
}

.cc-contact__topics {
	font-size: 15px;
	line-height: 1.65;
	color: var(--cc-text-muted);
	margin: 20px 0 0;
}

.cc-contactform__heading {
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--cc-text);
}

.cc-contactform__sub {
	font-size: 15px;
	color: var(--cc-text-muted);
	margin: 0 0 22px;
	line-height: 1.55;
}

/* --- Form ---------------------------------------------------------------------- */
.cc-contactform {
	flex: 1;
	width: 100%;
	min-width: 0;
	border: 1px solid var(--cc-border);
	border-radius: 18px;
	padding: 30px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.cc-contactform__notice {
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 18px;
}

.cc-contactform__notice--ok {
	background: var(--cc-primary-50);
	color: var(--cc-blue);
}

.cc-contactform__notice--err {
	background: #FDECEC;
	color: #B91C1C; /* --cc-error was 4.23:1 on this pink; #B91C1C is 5.66:1 */
}

.cc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cc-contactform__row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.cc-contactform .cc-field {
	margin-bottom: 14px;
}

.cc-contactform__row2 .cc-field {
	margin-bottom: 0;
}

.cc-field label {
	display: block;
	font-size: 13px;
	font-weight: 800;
	color: var(--cc-text);
	margin-bottom: 7px;
}

.cc-field input,
.cc-field select,
.cc-field textarea {
	width: 100%;
	padding: 0 15px;
	border-radius: 9px;
	border: 1px solid var(--cc-border-control);
	font-family: var(--cc-font);
	font-size: 15px;
	font-weight: 600;
	outline: none;
	box-sizing: border-box;
	color: var(--cc-text);
}

.cc-field input,
.cc-field select {
	height: 48px;
}

.cc-field select {
	color: var(--cc-text-muted);
	background: #fff;
	cursor: pointer;
}

.cc-field textarea {
	padding: 13px 15px;
	resize: vertical;
	line-height: 1.5;
}

.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
	border-color: var(--cc-blue);
}

.cc-contactform__newsletter {
	align-items: flex-start;
	margin-bottom: 18px;
	line-height: 1.4;
}

.cc-contactform__newsletter input {
	margin-top: 2px;
}

.cc-contactform__submit {
	width: 100%;
}

/* --- Info column ----------------------------------------------------------------- */
.cc-contactinfo {
	flex: 0 0 340px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cc-infocard {
	border: 1px solid var(--cc-border);
	border-radius: 14px;
	padding: 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.cc-infocard__icon {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--cc-primary-50);
	color: var(--cc-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cc-infocard__icon svg {
	width: 20px;
	height: 20px;
}

.cc-infocard__title {
	font-weight: 800;
	font-size: 15px;
	margin-bottom: 3px;
	color: var(--cc-text);
}

.cc-infocard__body {
	font-size: 14px;
	color: var(--cc-text-muted);
	line-height: 1.5;
}

.cc-contactmap {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--cc-primary-50);
	border: 1px solid var(--cc-border);
}

.cc-contactmap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
	display: block;
}

.cc-contactmap__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: #fff;
	border-radius: 10px;
	padding: 10px 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.cc-contactmap__title {
	font-weight: 800;
	font-size: 13px;
	color: var(--cc-text);
}

.cc-contactmap__sub {
	font-size: 12px;
	font-weight: 600;
	color: var(--cc-text-faint);
}

/* --- Contact responsive -------------------------------------------------------------- */
@media (max-width: 768px) {
	.cc-contact__head {
		padding: 28px 0;
	}

	.cc-contact__title {
		font-size: 30px;
	}

	.cc-contact__body {
		padding: 24px 16px 0;
		flex-direction: column;
		gap: 16px;
	}

	.cc-contactform {
		padding: 22px;
	}

	.cc-contactmap {
		aspect-ratio: 16 / 9;
	}
}

/* ==========================================================================
   Shared static-page header/CTA (Stage 9 — Shipping & Returns, FAQ)
   Same recipe as .cc-contact__head/.cc-contact__title, generalized so any
   simple static page can reuse it instead of re-deriving the same band.
   ========================================================================== */

.cc-staticpage__head {
	text-align: center;
	border-bottom: 1px solid var(--cc-border);
}

.cc-staticpage__headwrap {
	max-width: 720px;
}

.cc-staticpage__title {
	font-weight: 800;
	font-size: 42px;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	color: var(--cc-text);
}

.cc-staticpage__lead {
	font-size: 16px;
	color: var(--cc-text-muted);
	line-height: 1.6;
	margin: 0 auto;
	max-width: 520px;
}

.cc-staticpage__section {
	max-width: 720px;
	margin: 0 auto 32px;
}

.cc-staticpage__section:last-child {
	margin-bottom: 0;
}

.cc-staticpage__section p {
	font-size: 16px;
	color: var(--cc-text-muted);
	line-height: 1.7;
	margin: 0 0 14px;
}

.cc-staticpage__section p:last-child {
	margin-bottom: 0;
}

.cc-staticpage__cta {
	max-width: 720px;
	text-align: center;
}

.cc-staticpage__cta p {
	font-size: 16px;
	color: var(--cc-text-muted);
	margin: 0 0 24px;
}

.cc-staticpage__ctabtns {
	display: flex;
	gap: 12px;
	justify-content: center;
}

@media (max-width: 768px) {
	.cc-staticpage__title {
		font-size: 30px;
	}
}

/* --- Shipping options (Shipping & Returns) ---------------------------------- */
.cc-shipoptions {
	max-width: 1080px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.cc-shipoption {
	background: #fff;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-card);
	padding: 22px 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cc-shipoption__name {
	font-weight: 800;
	font-size: 15px;
	color: var(--cc-text);
	margin-bottom: 6px;
}

.cc-shipoption__price {
	font-weight: 800;
	font-size: 22px;
	color: var(--cc-blue);
	margin-bottom: 10px;
}

.cc-shipoption__desc {
	font-size: 14px;
	color: var(--cc-text-muted);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.cc-shipoptions {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   404 (Stage 10)
   ========================================================================== */

.cc-404 {
	padding: 96px 0;
	text-align: center;
}

.cc-404__wrap {
	max-width: 560px;
}

.cc-404__title {
	font-weight: 800;
	font-size: 34px;
	letter-spacing: -0.02em;
	margin: 18px 0 12px;
	color: var(--cc-text);
}

.cc-404__lead {
	font-size: 16px;
	color: var(--cc-text-muted);
	line-height: 1.6;
	margin: 0 0 32px;
}

/* Cancels .cc-search's header-specific chrome; keeps its input/button skin. */
.cc-404__search {
	border-top: none;
	background: none;
	margin-bottom: 32px;
}

.cc-404__ctabtns {
	display: flex;
	gap: 12px;
	justify-content: center;
}

@media (max-width: 768px) {
	.cc-404 {
		padding: 56px 0;
	}

	.cc-404__title {
		font-size: 26px;
	}

	.cc-404__ctabtns {
		flex-direction: column;
	}
}

/* ==========================================================================
   Search results (Stage 10)
   ========================================================================== */

.cc-search-results__list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cc-search-results__list li {
	border-bottom: 1px solid var(--cc-border);
	padding: 14px 2px;
}

.cc-search-results__list a {
	font-weight: 700;
	font-size: 16px;
	color: var(--cc-text);
	text-decoration: none;
}

.cc-search-results__list a:hover {
	color: var(--cc-blue);
}

/* ==========================================================================
   My Account (Stage 10) — CSS-only restyle of WooCommerce's default
   woocommerce/myaccount/*.php templates (dashboard, orders, downloads,
   addresses, account details, login/register). No template override: every
   selector below targets WooCommerce's own markup/classes, per the
   "restyle, don't reimplement" rule already used for checkout/payment.php
   (see the functions.php docblock).
   ========================================================================== */

/* Storefront also prints a global-notices `.woocommerce` div (storefront_shop_messages()
   on storefront_content_top) directly under `.col-full`, above #primary — usually empty
   on this page, but real login/address/account notices land there too. Constrain its
   width without vertical padding so it stays invisible when empty. */
body.woocommerce-account #content .col-full > .woocommerce {
	max-width: var(--cc-maxw);
	margin: 0 auto;
	padding: 0 28px;
}

/* The actual my-account shortcode wrapper always lives inside .entry-content — unlike
   the global-notices div above, which never does — so this scopes the flex layout to
   the real content instead of matching both `.woocommerce` divs on the page. */
body.woocommerce-account .entry-content > .woocommerce {
	max-width: var(--cc-maxw);
	margin: 0 auto;
	padding: 40px 28px 64px;
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

/* --- Nav tabs ---------------------------------------------------------------- */
.woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
	position: sticky;
	top: calc(var(--cc-header-h) + 20px);
}

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

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

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: 9px;
	color: var(--cc-text-muted);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--cc-surface);
	color: var(--cc-blue);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--cc-primary-50);
	color: var(--cc-blue);
	font-weight: 800;
}

/* --- Content card -------------------------------------------------------------- */
.woocommerce-MyAccount-content {
	flex: 1;
	width: 100%;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-card);
	padding: 28px;
}

.woocommerce-MyAccount-content p {
	font-size: 15px;
	color: var(--cc-text-muted);
	line-height: 1.65;
}

.woocommerce-MyAccount-content > p:last-child {
	margin-bottom: 0;
}

.woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--cc-border);
	border-radius: 12px;
	padding: 18px 20px 4px;
	margin: 0 0 20px;
}

.woocommerce-MyAccount-content fieldset legend {
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cc-text-faint);
	padding: 0 6px;
}

/* --- Tables (orders, downloads) --------------------------------------------- */
body.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--cc-border);
	text-align: left;
}

body.woocommerce-account table.shop_table th {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-text-faint);
}

body.woocommerce-account table.shop_table td {
	color: var(--cc-text);
}

/* --- Forms: fields (edit account/address, login/register) ------------------- */
body.woocommerce-account .woocommerce form .form-row {
	margin: 0 0 16px;
}

body.woocommerce-account .woocommerce form .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 800;
	color: var(--cc-text);
	margin-bottom: 6px;
}

body.woocommerce-account .woocommerce form .form-row label .required {
	color: var(--cc-error);
	text-decoration: none;
}

body.woocommerce-account .woocommerce form .input-text,
body.woocommerce-account .woocommerce form select {
	width: 100%;
	height: 48px;
	padding: 0 15px;
	border-radius: 9px;
	border: 1px solid var(--cc-border-control);
	font-family: var(--cc-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--cc-text);
	outline: none;
	box-sizing: border-box;
	background: #fff;
}

body.woocommerce-account .woocommerce form textarea.input-text {
	height: auto;
	padding: 13px 15px;
	line-height: 1.5;
}

body.woocommerce-account .woocommerce form .input-text:focus,
body.woocommerce-account .woocommerce form select:focus {
	border-color: var(--cc-blue);
}

body.woocommerce-account .woocommerce form .input-checkbox {
	width: 16px;
	height: 16px;
	accent-color: var(--cc-blue);
}

body.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-text-muted);
}

body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--cc-blue);
	font-weight: 700;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-LostPassword a:hover,
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover {
	text-decoration: underline;
}

/* --- Buttons: visual parity with .cc-btn ------------------------------------- */
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 24px;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-gradient);
	color: #fff;
	font-family: var(--cc-font);
	font-weight: 700;
	font-size: 14px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--cc-shadow-pill);
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce input.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(59, 58, 184, 0.3);
	color: #fff;
}

/* --- Addresses ----------------------------------------------------------------- */
body.woocommerce-account .woocommerce-Addresses.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	padding: 0;
}

body.woocommerce-account .woocommerce-Address {
	flex: 1 1 260px;
	border: 1px solid var(--cc-border);
	border-radius: 14px;
	padding: 20px;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	font-size: 15px;
	font-weight: 800;
	margin: 0;
	color: var(--cc-text);
}

body.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	color: var(--cc-text-muted);
	line-height: 1.6;
}

/* --- Login / register ------------------------------------------------------------ */
body.woocommerce-account #customer_login.u-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
	flex: 1 1 280px;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-card);
	padding: 24px;
}

body.woocommerce-account #customer_login h2 {
	font-weight: 800;
	font-size: 18px;
	margin: 0 0 16px;
	color: var(--cc-text);
}

/* --- Notices --------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
}

body.woocommerce-account .woocommerce-message li,
body.woocommerce-account .woocommerce-error li,
body.woocommerce-account .woocommerce-info li {
	list-style: none;
	margin: 0;
}

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info {
	background: var(--cc-primary-50);
	color: var(--cc-blue);
}

body.woocommerce-account .woocommerce-error {
	background: #FDECEC;
	color: #B91C1C; /* --cc-error was 4.23:1 on this pink; #B91C1C is 5.66:1 */
}

body.woocommerce-account .woocommerce-message a.button,
body.woocommerce-account .woocommerce-error a.button {
	margin-left: 10px;
	height: 36px;
	padding: 0 16px;
	font-size: 13px;
}

/* --- My Account responsive --------------------------------------------------------- */
@media (max-width: 768px) {
	body.woocommerce-account #content .col-full > .woocommerce {
		padding: 0 16px;
	}

	body.woocommerce-account .entry-content > .woocommerce {
		flex-direction: column;
		padding: 24px 16px 44px;
		gap: 16px;
	}

	.woocommerce-MyAccount-navigation {
		width: 100%;
		position: static;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.woocommerce-MyAccount-content {
		padding: 20px;
	}

	body.woocommerce-account #customer_login.u-columns {
		flex-direction: column;
	}
}

/* --- Accessibility ---------------------------------------------------------- */

/* Skip link (WCAG 2.4.1): visually hidden until focused, then a pill in the
 * top-left above the header. Storefront's own skip links were dropped by the
 * chrome swap in functions.php; cubecraft_skip_link() re-emits this one. */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}

.skip-link.screen-reader-text:focus {
	left: 12px;
	top: 12px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background: var(--cc-blue);
	color: #fff;
	border-radius: var(--cc-radius-pill);
	font-family: var(--cc-font);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	box-shadow: var(--cc-shadow-pill);
}

/* Visible focus (WCAG 2.4.7) for the inputs that set outline:none without a
 * focus replacement: header search, cart coupon, checkout coupon. */
.cc-search input[type="search"]:focus-visible,
.cc-search input[type="text"]:focus-visible,
.cc-coupon__input:focus-visible,
.cc-checkoutsum .woocommerce-form-coupon input#coupon_code:focus-visible {
	outline: 2px solid var(--cc-blue);
	outline-offset: 2px;
}

/* Shop filter Apply button (keyboard + no-JS submit path). */
.cc-filterform__apply {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 10px 16px;
	border: 1.5px solid var(--cc-blue);
	border-radius: var(--cc-radius-pill);
	background: #fff;
	color: var(--cc-blue);
	font-family: var(--cc-font);
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}

.cc-filterform__apply:hover {
	background: var(--cc-primary-50);
}

/* --- Reduced motion --------------------------------------------------------- */
/* OS-level "reduce motion" preference: neutralize all transitions, transforms,
 * and animations so nothing visibly animates, lifts, or scales on
 * hover/focus/scroll. Covers buttons (translateY lift), category tiles
 * (translateY(-3px) + inner image scale(1.06)), product cards (same pattern),
 * footer links, nav links, and any element with a transition or transform. */
@media (prefers-reduced-motion: reduce) {

	/* Kill all transitions globally. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Neutralize hover/focus transforms: translateY lifts, scale, brightness. */
	.cc-nav a:hover,
	.cc-iconbtn:hover,
	.cc-footer__social-link:hover,
	.cc-footer__links a:hover,
	.cc-btn:hover,
	.cc-btn--ghost:hover,
	.cc-btn--glass:hover,
	.cc-section__link:hover,
	.cc-cattile:hover,
	.cc-pcard:hover,
	.cc-pcard .button:hover,
	.cc-shop__crumb a:hover,
	.cc-catlist__row:hover,
	.cc-shop__pagination .page-numbers:hover,
	.cc-product__crumb a:hover,
	.cc-cartitem__name a:hover,
	.cc-cartitem__remove:hover,
	.cc-coupon__apply:hover,
	.cc-cart__continue:hover,
	.cc-cartsum__row a:hover,
	.cc-checkoutcard__login:hover,
	.cc-checkoutsum a.showcoupon:hover,
	#place_order:hover,
	.cc-search-results__list a:hover,
	.woocommerce-MyAccount-navigation li a:hover,
	body.woocommerce-account .woocommerce-LostPassword a:hover,
	body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover,
	body.woocommerce-account .woocommerce a.button:hover,
	body.woocommerce-account .woocommerce button.button:hover,
	body.woocommerce-account .woocommerce input.button:hover {
		transform: none !important;
	}

	/* Neutralize inner-image zoom on card/tile hover. */
	.cc-cattile:hover .cc-cattile__media img,
	.cc-pcard:hover .cc-pcard__media img {
		transform: none !important;
	}
}