/*
Theme Name: Captain Benny Cargo
Theme URI: https://github.com/WCStudioHQ/StoreBase
Description: Captain Benny Cargo is a child theme of StoreBase, built with WooCommerce in mind. Use it to safely customize styles and templates without touching the parent theme.
Author: Captain Benny
Template: storebase
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: captain-benny-cargo
Tags: custom-background, custom-menu, featured-images, threaded-comments, translation-ready, e-commerce
*/

/* =========================================================
   Captain Benny Cargo — brand palette (from the original site)
   ========================================================= */
:root {
	--background: 40 30% 95%;
	--foreground: 25 40% 20%;
	--card: 42 35% 92%;
	--card-foreground: 25 40% 20%;
	--primary: 38 70% 55%;
	--primary-foreground: 0 0% 100%;
	--secondary: 355 60% 40%;
	--secondary-foreground: 0 0% 100%;
	--accent: 30 75% 50%;
	--accent-foreground: 0 0% 100%;
	--muted: 35 30% 88%;
	--muted-foreground: 25 30% 35%;
	--border: 38 40% 45%;
	--ring: 38 70% 55%;
	--rating: 38 90% 55%;
}

body {
	font-family: "DM Sans", sans-serif;
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
}

/* Vintage helpers mirrored from the source site */
.vintage-heading {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* =========================================================
   Header
   ========================================================= */
.cbc-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: hsl(var(--card) / 0.95);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.cbc-header-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Brand / logo */
.cbc-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.cbc-logo-badge {
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
	background-color: hsl(var(--primary));
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cbc-logo-badge span {
	font-size: 1.5rem;
	line-height: 1;
	color: hsl(var(--primary-foreground));
}

.cbc-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.cbc-brand-name {
	font-size: 1.25rem;
	color: hsl(var(--foreground));
}

.cbc-brand-sub {
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
}

/* Primary nav */
.cbc-nav .cbc-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2rem;
}

.cbc-nav .cbc-menu a {
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	text-decoration: none;
	transition: color 0.2s ease;
}

.cbc-nav .cbc-menu a:hover {
	color: hsl(var(--primary));
}

.cbc-nav .cbc-menu .current-menu-item > a,
.cbc-nav .cbc-menu .current_page_item > a {
	color: hsl(var(--primary));
	font-weight: 600;
}

/* Action icons */
.cbc-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.cbc-icon-btn {
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	/* Reset StoreBase's global button styling (padding:7px 26px, line-height:30px)
	   that otherwise squeezes the icon to zero width. */
	padding: 0;
	line-height: 0;
	box-sizing: border-box;
	background: transparent;
	border-radius: 0.375rem;
	color: hsl(var(--foreground));
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Kill StoreBase's global `button:before` sliding dark overlay (#333) that
   otherwise animates over our icon on hover. */
.cbc-icon-btn::before {
	display: none;
	content: none;
}

.cbc-icon-btn:hover {
	color: hsl(var(--primary));
	background-color: hsl(var(--muted));
}

.cbc-icon-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.cbc-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.25rem;
	background-color: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
	border-radius: 9999px;
}

.cbc-cart-count.is-empty {
	display: none;
}

/* Burger icon swap: show the X only while the menu is open */
.cbc-menu-toggle .cbc-icon-close {
	display: none;
}

.cbc-nav-open .cbc-menu-toggle .cbc-icon-open {
	display: none;
}

.cbc-nav-open .cbc-menu-toggle .cbc-icon-close {
	display: inline;
}

/* Mobile menu panel is desktop-hidden by default */
.cbc-mobile-menu {
	display: none;
}

/* Responsive: nav + account on desktop, burger + drawer on mobile */
.cbc-account,
.cbc-menu-toggle {
	display: none;
}

@media (min-width: 768px) {
	.cbc-account {
		display: inline-flex;
	}
}

@media (max-width: 767.98px) {
	.cbc-nav {
		display: none;
	}

	.cbc-menu-toggle {
		display: inline-flex;
	}

	/* Collapsible panel below the header (animated open/close) */
	.cbc-mobile-menu {
		display: block;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		background-color: hsl(var(--card));
		border-top: 1px solid hsl(var(--border) / 0);
		transition: max-height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
	}

	.cbc-nav-open .cbc-mobile-menu {
		max-height: 80vh;
		opacity: 1;
		visibility: visible;
		border-top-color: hsl(var(--border) / 0.5);
	}

	.cbc-mobile-nav {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 1rem;
	}

	.cbc-mobile-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.cbc-mobile-list a,
	.cbc-mobile-account {
		display: block;
		padding: 0.5rem 0;
		font-size: 0.875rem;
		font-weight: 500;
		color: hsl(var(--foreground));
		text-decoration: none;
		transition: color 0.2s ease;
	}

	.cbc-mobile-list a:hover,
	.cbc-mobile-account:hover {
		color: hsl(var(--primary));
	}

	.cbc-mobile-list .current-menu-item > a,
	.cbc-mobile-list .current_page_item > a {
		color: hsl(var(--primary));
		font-weight: 600;
	}

	.cbc-mobile-account {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.cbc-mobile-account svg {
		width: 1rem;
		height: 1rem;
	}
}

/* =========================================================
   Footer
   ========================================================= */
.cbc-footer {
	background-color: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
}

.cbc-footer-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 3rem 1rem;
}

.cbc-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.cbc-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cbc-footer-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Brand column */
.cbc-footer-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.cbc-footer-badge {
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 auto;
	background-color: hsl(var(--primary));
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cbc-footer-badge span {
	font-size: 1.25rem;
	line-height: 1;
	color: hsl(var(--primary-foreground));
}

.cbc-footer-brand-name {
	font-size: 1.125rem;
	margin: 0;
	color: inherit; /* override StoreBase's dark heading color */
}

.cbc-footer-est {
	margin: 0;
	font-size: 0.75rem;
	opacity: 0.9;
}

.cbc-footer-about {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.625;
	opacity: 0.9;
}

/* Headings */
.cbc-footer-heading {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1rem;
	color: inherit; /* override StoreBase's dark heading color */
}

/* Quick links */
.cbc-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cbc-footer-links a {
	font-size: 0.875rem;
	color: inherit;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.cbc-footer-links a:hover {
	opacity: 1;
	color: hsl(var(--primary));
}

/* Contact info */
.cbc-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cbc-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	opacity: 0.9;
}

.cbc-footer-contact svg {
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	flex-shrink: 0;
}

/* Social */
.cbc-footer-social {
	display: flex;
	gap: 0.75rem;
}

.cbc-footer-social a {
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	color: inherit;
	background-color: hsl(var(--primary) / 0.2);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cbc-footer-social a:hover {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.cbc-footer-social svg {
	width: 1rem;
	height: 1rem;
}

/* Bottom bar */
.cbc-footer-bottom {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid hsl(var(--secondary-foreground) / 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

@media (min-width: 768px) {
	.cbc-footer-bottom {
		flex-direction: row;
	}
}

.cbc-footer-copy {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.9;
}

.cbc-footer-legal {
	display: flex;
	gap: 1.5rem;
}

.cbc-footer-legal a {
	font-size: 0.875rem;
	color: inherit;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.cbc-footer-legal a:hover {
	opacity: 1;
}

/* =========================================================
   Buttons (reusable)
   ========================================================= */
.cbc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	text-decoration: none;
	transition: all 0.3s ease;
}

/* Kill StoreBase's global button:before overlay if used on a <button>. */
.cbc-btn::before {
	display: none;
	content: none;
}

.cbc-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.cbc-btn-primary {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	font-weight: 600;
	font-size: 1.125rem;
	padding: 0.875rem 2rem;
	border-radius: 0.75rem;
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.2);
}

.cbc-btn-primary:hover {
	background-color: hsl(var(--primary) / 0.9);
	color: hsl(var(--primary-foreground));
	box-shadow: 0 20px 25px -5px hsl(var(--foreground) / 0.25);
	transform: scale(1.05);
}

.cbc-btn-primary:active {
	transform: scale(0.98);
}

/* =========================================================
   Rebrand StoreBase / WooCommerce buttons to the brand gold
   (matches the home-page .cbc-btn-primary). Our own .cbc-*
   buttons keep their styling via higher class specificity.
   ========================================================= */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
a.button,
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	border-color: hsl(var(--primary));
	text-decoration: none;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover,
a.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background-color: hsl(var(--primary) / 0.9);
	color: hsl(var(--primary-foreground));
	border-color: hsl(var(--primary) / 0.9);
}

/* Kill StoreBase's dark (#333) sliding overlay on rebranded buttons. */
button::before,
.button::before {
	display: none;
	content: none;
}

/* =========================================================
   Home — Hero
   ========================================================= */
.cbc-hero {
	position: relative;
	min-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cbc-hero-bg {
	position: absolute;
	inset: 0;
}

.cbc-hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbc-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		hsl(var(--foreground) / 0.8),
		hsl(var(--foreground) / 0.6),
		hsl(var(--foreground) / 0.4)
	);
}

.cbc-hero-content {
	position: relative;
	z-index: 10;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: center;
}

.cbc-hero-title {
	font-size: 3rem;
	line-height: 1.1;
	color: hsl(var(--background));
	margin: 0 0 1.5rem;
}

.cbc-hero-subtitle {
	max-width: 42rem;
	margin: 0 auto 2rem;
	font-size: 1.25rem;
	line-height: 1.625;
	color: hsl(var(--background) / 0.9);
}

.cbc-hero-cta {
	display: inline-block;
	text-decoration: none;
}

@media (min-width: 768px) {
	.cbc-hero-title {
		font-size: 3.75rem;
	}

	.cbc-hero-subtitle {
		font-size: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.cbc-hero-title {
		font-size: 4.5rem;
	}
}

/* Vintage helper mirrored from the source site */
.vintage-border {
	border: 2px solid hsl(var(--border));
	box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.3);
}

/* =========================================================
   Home — Legacy / About
   ========================================================= */
.cbc-legacy {
	padding: 5rem 0;
	background-color: hsl(var(--card));
}

.cbc-legacy-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cbc-legacy-head {
	text-align: center;
	margin-bottom: 4rem;
}

.cbc-legacy-head h2 {
	font-size: 2.25rem;
	color: hsl(var(--foreground));
	margin: 0 0 1.5rem;
}

.cbc-legacy-head p {
	max-width: 48rem;
	margin: 0 auto;
	font-size: 1.125rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.cbc-legacy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

.cbc-legacy-img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 1rem;
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.15);
}

.cbc-legacy-features {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cbc-feature {
	display: flex;
	gap: 1rem;
}

.cbc-feature-icon {
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
}

.cbc-feature-icon span {
	font-size: 1.5rem;
	line-height: 1;
}

.cbc-feature-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.cbc-feature-icon--primary {
	background-color: hsl(var(--primary) / 0.2);
	color: hsl(var(--primary));
}

.cbc-feature-icon--secondary {
	background-color: hsl(var(--secondary) / 0.2);
	color: hsl(var(--secondary));
}

.cbc-feature-icon--accent {
	background-color: hsl(var(--accent) / 0.2);
	color: hsl(var(--accent));
}

.cbc-feature h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 0.5rem;
}

.cbc-feature p {
	margin: 0;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
	.cbc-legacy-head h2 {
		font-size: 3rem;
	}

	.cbc-legacy-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Vintage card + outline button (mirrored from the source) */
.vintage-card {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.3);
	box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08);
}

.cbc-btn-outline {
	border: 1px solid hsl(var(--primary));
	background: hsl(var(--background));
	color: hsl(var(--primary));
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.625rem 2rem;
	border-radius: 0.5rem;
}

.cbc-btn-outline:hover {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

/* Line clamps */
.cbc-clamp-1,
.cbc-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cbc-clamp-1 {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.cbc-clamp-2 {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* =========================================================
   Home — Explore Our Categories
   ========================================================= */
.cbc-cats {
	padding: 5rem 0;
	background-color: hsl(var(--background));
}

.cbc-cats-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cbc-cats-head {
	text-align: center;
	margin-bottom: 3rem;
}

.cbc-cats-head h2 {
	font-size: 2.25rem;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-cats-head p {
	font-size: 1.125rem;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

.cbc-cats-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.cbc-cat-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	border-radius: 0.75rem;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cbc-cat-card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.15);
}

.cbc-cat-icon {
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	background-color: hsl(var(--primary) / 0.2);
	color: hsl(var(--primary));
	transition: background-color 0.3s ease, color 0.3s ease;
}

.cbc-cat-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.cbc-cat-card:hover .cbc-cat-icon {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.cbc-cat-name {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin-bottom: 0.25rem;
}

.cbc-cat-desc {
	display: block;
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
	.cbc-cats-head h2 {
		font-size: 3rem;
	}

	.cbc-cats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cbc-cats-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
   Home — Featured Treasures / product cards
   ========================================================= */
.cbc-featured {
	padding: 5rem 0;
	background-color: hsl(var(--background));
}

.cbc-featured-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cbc-featured-head {
	text-align: center;
	margin-bottom: 3rem;
}

.cbc-featured-head h2 {
	font-size: 2.25rem;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-featured-head p {
	font-size: 1.125rem;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

.cbc-products-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.cbc-product-card {
	display: block;
	border-radius: 0.75rem;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cbc-product-card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.15);
}

.cbc-product-img-wrap {
	position: relative;
	overflow: hidden;
}

.cbc-product-img {
	display: block;
	width: 100%;
	height: 16rem;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cbc-product-card:hover .cbc-product-img {
	transform: scale(1.05);
}

.cbc-product-body {
	padding: 1.5rem;
}

.cbc-product-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 0.5rem;
}

.cbc-product-sub {
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
	margin: 0 0 1rem;
}

.cbc-product-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cbc-product-price {
	font-size: 1.25rem;
	font-weight: 700;
	color: hsl(var(--primary));
}

.cbc-product-price .woocommerce-Price-amount {
	color: inherit;
}

.cbc-product-view {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: hsl(var(--primary));
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	transition: background-color 0.2s ease;
}

.cbc-product-view svg {
	width: 1rem;
	height: 1rem;
}

.cbc-product-card:hover .cbc-product-view {
	background-color: hsl(var(--primary) / 0.1);
}

.cbc-featured-foot {
	text-align: center;
	margin-top: 3rem;
}

@media (min-width: 640px) {
	.cbc-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cbc-products-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.cbc-featured-head h2 {
		font-size: 3rem;
	}
}

/* =========================================================
   Home — What Our Customers Say
   ========================================================= */
.cbc-reviews {
	padding: 6rem 0;
	background-color: hsl(var(--card));
	border-top: 1px solid hsl(var(--border) / 0.3);
	border-bottom: 1px solid hsl(var(--border) / 0.3);
}

.cbc-reviews-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cbc-reviews-head {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 3rem;
}

.cbc-reviews-title {
	font-size: 2.25rem;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-reviews-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.cbc-reviews-avgstar {
	display: inline-flex;
}

.cbc-reviews-avgstar .cbc-star:not(:first-child) {
	display: none;
}

.cbc-reviews-avgstar .cbc-star {
	width: 1.5rem;
	height: 1.5rem;
}

.cbc-reviews-avg {
	font-size: 1.5rem;
	font-weight: 700;
	color: hsl(var(--foreground));
}

.cbc-reviews-sep {
	width: 1px;
	height: 1.5rem;
	background-color: hsl(var(--border));
}

.cbc-reviews-count {
	margin: 0;
	color: hsl(var(--muted-foreground));
}

.cbc-reviews-count span {
	font-weight: 600;
	color: hsl(var(--foreground));
}

/* Sort buttons */
.cbc-reviews-sort {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cbc-sort-btn {
	border: 1px solid hsl(var(--border));
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.375rem 0.75rem;
	line-height: 1;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cbc-sort-btn::before {
	display: none;
	content: none;
}

.cbc-sort-btn:hover {
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
}

.cbc-sort-btn.is-active {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

/* Star icons */
.cbc-star {
	width: 1rem;
	height: 1rem;
}

.cbc-star.is-filled {
	color: hsl(var(--rating));
	fill: hsl(var(--rating));
}

.cbc-star.is-empty {
	color: hsl(var(--muted-foreground) / 0.3);
	fill: none;
}

/* Review cards grid (home) */
.cbc-reviews-grid-home {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.cbc-rcard {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border-radius: 0.75rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cbc-rcard:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.15);
}

.cbc-rcard-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.cbc-rcard-stars {
	display: inline-flex;
	gap: 0.25rem;
}

.cbc-rcard-date {
	font-size: 0.75rem;
	font-weight: 500;
	color: hsl(var(--muted-foreground));
}

.cbc-rcard-name {
	font-size: 1.125rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 0.5rem;
}

.cbc-rcard-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
	.cbc-reviews-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.cbc-reviews-title {
		font-size: 3rem;
	}

	.cbc-reviews-grid-home {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cbc-reviews-grid-home {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
   Reviews page — native Quote blocks (post 25)
   ========================================================= */
.cbc-reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.cbc-review-card.wp-block-quote {
	margin: 0;
	padding: 1.5rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.3);
	border-left: 1px solid hsl(var(--border) / 0.3);
	border-radius: 0.75rem;
	box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08);
}

.cbc-review-card .cbc-review-stars {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	color: hsl(var(--rating));
}

.cbc-review-card .cbc-review-text {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.625;
	color: hsl(var(--foreground));
}

.cbc-review-card cite {
	font-style: normal;
	font-weight: 600;
	font-size: 0.85rem;
	color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
	.cbc-reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cbc-reviews-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
   Reviews page (page-reviews.php) — hero + two columns:
   a sticky "Leave a Review" form (left) and a scrolling card grid (right).
   ========================================================= */
.cbc-reviews-hero {
	position: relative;
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cbc-reviews-hero-bg {
	position: absolute;
	inset: 0;
}

.cbc-reviews-hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbc-reviews-hero-overlay {
	position: absolute;
	inset: 0;
	background: hsl(var(--foreground) / 0.7);
	mix-blend-mode: multiply;
}

.cbc-reviews-hero-content {
	position: relative;
	z-index: 10;
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: center;
}

.cbc-reviews-hero-title {
	font-size: 2.25rem;
	line-height: 1.1;
	color: hsl(var(--background));
	margin: 0 0 1rem;
}

.cbc-reviews-hero-sub {
	max-width: 42rem;
	margin: 0 auto;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.625;
	color: hsl(var(--background) / 0.9);
}

/* Sticky form needs an unclipped ancestor — lift StoreBase's .boxed overflow. */
.cbc-reviews-tpl .boxed {
	overflow: visible;
}

.cbc-reviews-body {
	padding: 4rem 0 6rem;
}

.cbc-reviews-body-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.cbc-review-form-card {
	padding: 1.5rem;
	border-radius: 1rem;
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.1);
}

.cbc-review-form-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.cbc-review-form-icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	background: hsl(var(--primary) / 0.2);
	color: hsl(var(--primary));
}

.cbc-review-form-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.cbc-review-form-title {
	font-size: 1.5rem;
	color: hsl(var(--foreground));
	margin: 0;
}

.cbc-review-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cbc-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cbc-field label {
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--foreground));
}

.cbc-field input,
.cbc-field textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.95rem;
	font-family: inherit;
	color: hsl(var(--foreground));
	background: hsl(var(--background));
	border: 1px solid hsl(var(--border));
	border-radius: 0.5rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cbc-field textarea {
	min-height: 6rem;
	resize: vertical;
}

.cbc-field input:focus,
.cbc-field textarea:focus {
	outline: none;
	border-color: hsl(var(--primary));
	box-shadow: 0 0 0 1px hsl(var(--primary));
}

/* Interactive star rating */
.cbc-rating-input {
	display: flex;
	gap: 0.25rem;
}

.cbc-rating-star {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	color: hsl(var(--muted-foreground) / 0.35);
	transition: transform 0.1s ease, color 0.15s ease;
}

.cbc-rating-star::before {
	display: none;
	content: none;
}

.cbc-rating-star svg {
	width: 2rem;
	height: 2rem;
}

.cbc-rating-star.is-on {
	color: hsl(var(--rating));
}

.cbc-rating-star:active {
	transform: scale(0.9);
}

.cbc-review-submit {
	width: 100%;
	justify-content: center;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

.cbc-review-form-msg {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.cbc-review-form-msg:empty {
	display: none;
}

.cbc-review-form-msg.is-ok {
	color: hsl(var(--primary));
}

.cbc-review-form-msg.is-err {
	color: hsl(var(--secondary));
}

.cbc-reviews-list-head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

/* The page's right column is narrower than the home section, so cap at 2 columns. */
.cbc-reviews-grid-page {
	grid-template-columns: 1fr;
}

.cbc-reviews-empty {
	color: hsl(var(--muted-foreground));
}

.cbc-reviews-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
	margin-top: 2rem;
}

.cbc-reviews-pagination:empty {
	display: none;
}

.cbc-page-btn {
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid hsl(var(--border));
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cbc-page-btn::before {
	display: none;
	content: none;
}

.cbc-page-btn:hover:not(:disabled) {
	background: hsl(var(--muted));
	border-color: hsl(var(--primary));
}

.cbc-page-btn.is-active {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	cursor: default;
}

.cbc-page-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (min-width: 640px) {
	.cbc-reviews-grid-page {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.cbc-reviews-hero-title {
		font-size: 3rem;
	}

	.cbc-reviews-list-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.cbc-reviews-body-inner {
		grid-template-columns: 22rem 1fr;
		gap: 2.5rem;
		/* NOTE: do NOT set align-items:start here. The default `stretch` makes the
		   left grid cell as tall as the (long) reviews column, which is what gives
		   the sticky form room to travel. With align-items:start the cell collapses
		   to the form's height and sticky has nowhere to stick. */
	}

	.cbc-reviews-form-sticky {
		position: sticky;
		top: 7rem;
	}

	/* Keep the right grid at 2 columns (the home grid rule goes to 3 at this width). */
	.cbc-reviews-grid-page {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================
   Contact page (page-contact.php) — hero + two columns:
   "Get in Touch" details (left) and the "Send a Dispatch" form (right).
   Reuses .cbc-field / .cbc-review-form-msg from the reviews form.
   ========================================================= */
.cbc-contact-hero {
	position: relative;
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cbc-contact-hero-bg {
	position: absolute;
	inset: 0;
}

.cbc-contact-hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbc-contact-hero-overlay {
	position: absolute;
	inset: 0;
	background: hsl(var(--foreground) / 0.7);
	mix-blend-mode: multiply;
}

.cbc-contact-hero-content {
	position: relative;
	z-index: 10;
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: center;
}

.cbc-contact-hero-title {
	font-size: 2.25rem;
	line-height: 1.1;
	color: hsl(var(--background));
	margin: 0 0 1rem;
}

.cbc-contact-hero-sub {
	max-width: 42rem;
	margin: 0 auto;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.625;
	color: hsl(var(--background) / 0.9);
}

.cbc-contact-body {
	padding: 4rem 0 6rem;
}

.cbc-contact-body-inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

.cbc-contact-heading {
	font-size: 2rem;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-contact-intro {
	margin: 0 0 2rem;
	font-size: 1rem;
	line-height: 1.7;
	color: hsl(var(--muted-foreground));
}

.cbc-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cbc-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.cbc-contact-item-icon {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.625rem;
	background: hsl(var(--primary) / 0.15);
	color: hsl(var(--primary));
}

.cbc-contact-item-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.cbc-contact-item-body h3 {
	font-size: 1.05rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 0.25rem;
}

.cbc-contact-item-body p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
}

.cbc-contact-item-body a {
	color: hsl(var(--muted-foreground));
	text-decoration: none;
}

.cbc-contact-item-body a:hover {
	color: hsl(var(--primary));
}

.cbc-contact-card {
	padding: 2rem;
	border-radius: 1rem;
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.1);
}

.cbc-contact-form-title {
	font-size: 1.5rem;
	color: hsl(var(--foreground));
	margin: 0 0 1.5rem;
}

.cbc-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cbc-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.cbc-contact-submit {
	width: 100%;
	justify-content: center;
	gap: 0.5rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

.cbc-contact-send-icon {
	width: 1.1rem;
	height: 1.1rem;
}

@media (min-width: 640px) {
	.cbc-field-row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 768px) {
	.cbc-contact-hero-title {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.cbc-contact-body-inner {
		grid-template-columns: 1fr 1.2fr;
		gap: 4rem;
		align-items: start;
	}
}

/* =========================================================
   About page
   ========================================================= */
.cbc-about-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cbc-about-hero-bg {
	position: absolute;
	inset: 0;
}

.cbc-about-hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbc-about-hero-overlay {
	position: absolute;
	inset: 0;
	background: hsl(var(--foreground) / 0.75);
	mix-blend-mode: multiply;
}

.cbc-about-hero-content {
	position: relative;
	z-index: 10;
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: center;
}

.cbc-about-hero-content h1 {
	font-size: 2.25rem;
	line-height: 1.1;
	color: hsl(var(--background));
	margin: 0 0 1.5rem;
}

.cbc-about-hero-content p {
	max-width: 42rem;
	margin: 0 auto;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.625;
	color: hsl(var(--background) / 0.9);
}

/* Story */
.cbc-about-story {
	padding: 6rem 0;
	background: hsl(var(--card));
}

.cbc-about-story-inner {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: center;
}

.cbc-about-anchor {
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 2rem;
	color: hsl(var(--primary));
	opacity: 0.8;
}

.cbc-about-prose {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.cbc-about-prose p {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.125rem;
	line-height: 1.75;
	color: hsl(var(--foreground) / 0.9);
}

.cbc-about-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.5rem 0;
}

.cbc-about-rule {
	height: 1px;
	width: 4rem;
	background: hsl(var(--border));
}

.cbc-about-divider-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: hsl(var(--muted-foreground));
}

/* Legacy */
.cbc-about-legacy {
	padding: 6rem 0;
	background: hsl(var(--background));
}

.cbc-about-legacy-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cbc-about-legacy-head {
	text-align: center;
	margin-bottom: 4rem;
}

.cbc-about-legacy-head h2 {
	font-size: 1.875rem;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-about-legacy-head p {
	max-width: 42rem;
	margin: 0 auto;
	color: hsl(var(--muted-foreground));
}

.cbc-about-legacy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.cbc-about-pillar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;
	border-radius: 1rem;
}

.cbc-about-pillar-icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1.5rem;
}

.cbc-about-pillar-icon.is-primary {
	color: hsl(var(--primary));
}

.cbc-about-pillar-icon.is-secondary {
	color: hsl(var(--secondary));
}

.cbc-about-pillar h3 {
	font-size: 1.5rem;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-about-pillar p {
	margin: 0;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.cbc-about-pillar-img {
	position: relative;
	min-height: 20rem;
	border-radius: 1rem;
	overflow: hidden;
}

.cbc-about-pillar-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.cbc-about-pillar-img:hover img {
	transform: scale(1.05);
}

.cbc-about-pillar-cap {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2rem;
	background: linear-gradient( to top, hsl(var(--foreground) / 0.9), hsl(var(--foreground) / 0.4), transparent );
}

.cbc-about-pillar-cap h3 {
	font-size: 1.5rem;
	color: hsl(var(--background));
	margin: 0 0 0.5rem;
}

.cbc-about-pillar-cap p {
	margin: 0;
	color: hsl(var(--background) / 0.8);
}

/* Patrons */
.cbc-about-patrons {
	padding: 6rem 0;
	background: hsl(var(--card));
}

.cbc-about-patrons-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cbc-about-patrons-head {
	text-align: center;
	margin-bottom: 4rem;
}

.cbc-about-patrons-head h2 {
	font-size: 1.875rem;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-about-patrons-head p {
	max-width: 42rem;
	margin: 0 auto;
	color: hsl(var(--muted-foreground));
}

.cbc-about-patrons-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.cbc-about-patron {
	padding: 2rem;
	border-radius: 0.75rem;
}

.cbc-about-patron-stars {
	display: inline-flex;
	gap: 0.25rem;
	margin-bottom: 1rem;
}

.cbc-about-patron-text {
	margin: 0 0 1.5rem;
	font-style: italic;
	line-height: 1.625;
	color: hsl(var(--foreground));
}

.cbc-about-patron-by {
	display: flex;
	flex-direction: column;
}

.cbc-about-patron-name {
	font-weight: 700;
	color: hsl(var(--foreground));
}

.cbc-about-patron-role {
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

/* CTA */
.cbc-about-cta {
	padding: 6rem 0;
	background: hsl(var(--background));
	text-align: center;
}

.cbc-about-cta-inner {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cbc-about-cta h2 {
	font-size: 1.875rem;
	color: hsl(var(--foreground));
	margin: 0 0 1.5rem;
}

.cbc-about-cta p {
	margin: 0 0 2.5rem;
	font-size: 1.125rem;
	color: hsl(var(--muted-foreground));
}

.cbc-about-cta-link {
	display: inline-block;
	text-decoration: none;
}

@media (min-width: 768px) {
	.cbc-about-hero-content h1 {
		font-size: 3rem;
	}

	.cbc-about-hero-content p {
		font-size: 1.5rem;
	}

	.cbc-about-legacy-head h2,
	.cbc-about-patrons-head h2,
	.cbc-about-cta h2 {
		font-size: 2.25rem;
	}

	.cbc-about-legacy-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cbc-about-hero-content h1 {
		font-size: 3.75rem;
	}

	.cbc-about-patrons-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
   Shop / product archive (Our Collection)
   ========================================================= */
.cbc-shop-page {
	background: hsl(var(--background));
}

/* position:sticky (sidebar) needs no overflow clip on ancestors; StoreBase's
   .boxed wrapper sets overflow:hidden, so lift it on shop/category archives. */
.woocommerce-shop .boxed,
.tax-product_cat .boxed,
.post-type-archive-product .boxed {
	overflow: visible;
}

.cbc-shop {
	padding: 3rem 0 5rem;
	background: hsl(var(--background));
}

.cbc-shop-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Header band */
.cbc-shop-head-band {
	padding: 3rem 0;
	background: hsl(var(--card));
	border-bottom: 1px solid hsl(var(--border) / 0.4);
}

.cbc-shop-head-title {
	font-size: 2.25rem;
	color: hsl(var(--foreground));
	margin: 0 0 0.5rem;
}

.cbc-shop-head-sub {
	margin: 0 0 2rem;
	font-size: 1.125rem;
	color: hsl(var(--muted-foreground));
}

/* Search (matches the source field: h-9, bg-background, bordered, rounded-md, shadow-sm) */
.cbc-shop-search {
	position: relative;
	width: 100%;
}

.cbc-shop-search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	color: hsl(var(--muted-foreground));
	pointer-events: none;
}

.cbc-shop-search input[type="search"] {
	width: 100%;
	height: 2.25rem;
	padding: 0.25rem 0.75rem 0.25rem 2.5rem;
	font-size: 0.875rem;
	color: hsl(var(--foreground));
	background: hsl(var(--background));
	border: 1px solid hsl(var(--border));
	border-radius: 0.375rem;
	box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
	-webkit-appearance: none;
	appearance: none;
}

.cbc-shop-search input[type="search"]::placeholder {
	color: hsl(var(--muted-foreground));
}

.cbc-shop-search input[type="search"]:focus {
	outline: none;
	border-color: hsl(var(--ring));
	box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* Layout */
.cbc-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* Sidebar */
.cbc-shop-sidebar-card {
	padding: 1.5rem;
	border-radius: 0.75rem;
	position: sticky;
	top: 6rem;
}

.cbc-shop-sidebar-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

.cbc-shop-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cbc-shop-cat {
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: left;
	color: hsl(var(--foreground));
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cbc-shop-cat:hover {
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
}

.cbc-shop-cat.is-active {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

/* Product grid (WooCommerce loop) */
.cbc-shop-main ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cbc-shop-main ul.products::before,
.cbc-shop-main ul.products::after {
	content: none;
	display: none;
}

.cbc-shop-main ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

/* Product card */
.cbc-shop-card {
	display: flex;
	flex-direction: column;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.3);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px hsl(var(--foreground) / 0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cbc-shop-card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.18);
}

.cbc-shop-card-imgwrap {
	display: block;
	height: 12rem;
	overflow: hidden;
	background: hsl(var(--muted));
}

.cbc-shop-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cbc-shop-card-imgwrap:hover .cbc-shop-card-img {
	transform: scale(1.05);
}

.cbc-shop-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem;
}

.cbc-shop-card-titlelink {
	text-decoration: none;
}

.cbc-shop-card-title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: hsl(var(--foreground));
	transition: color 0.2s ease;
}

.cbc-shop-card-titlelink:hover .cbc-shop-card-title {
	color: hsl(var(--primary));
}

.cbc-shop-card-desc {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: hsl(var(--foreground) / 0.75);
}

.cbc-shop-card-meta {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cbc-shop-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.cbc-shop-card-price {
	font-size: 1.5rem;
	font-weight: 800;
	color: hsl(var(--foreground));
}

.cbc-shop-card-price .woocommerce-Price-amount {
	color: inherit;
}

.cbc-shop-card-stock {
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	white-space: nowrap;
}

.cbc-shop-card-stock.is-in {
	background: #dcfce7;
	color: #166534;
}

.cbc-shop-card-stock.is-out {
	background: #fee2e2;
	color: #991b1b;
}

.cbc-shop-card-buy {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
}

.cbc-shop-card-buy .cbc-qty {
	width: 3.5rem;
	flex: 0 0 auto;
	padding: 0.5rem 0.25rem;
	text-align: center;
	font-weight: 500;
	color: hsl(var(--foreground));
	background: hsl(var(--background));
	border: 1px solid hsl(var(--border) / 0.5);
	border-radius: 0.5rem;
}

.cbc-shop-card-buy .cbc-qty:focus {
	outline: none;
	border-color: hsl(var(--primary));
}

.cbc-shop-card-buy .button,
.cbc-shop-card-buy .added_to_cart {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	white-space: nowrap;
	padding: 0.5rem 1rem;
	font-weight: 600;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px 0 hsl(var(--foreground) / 0.12), 0 1px 2px -1px hsl(var(--foreground) / 0.12);
	transition: all 0.2s ease;
}

.cbc-shop-card-buy .button:active {
	transform: scale(0.98);
}

/* Cart icon inside the Add to Cart button (h-4 w-4, source parity). */
.cbc-shop-card-buy .button .cbc-cart-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Pagination */
.cbc-shop-main .woocommerce-pagination {
	margin-top: 2.5rem;
}

.cbc-shop-main .woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.cbc-shop-main .woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.cbc-shop-main .woocommerce-pagination a,
.cbc-shop-main .woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: 0.375rem;
	background: hsl(var(--card));
	color: hsl(var(--foreground));
	border: 1px solid hsl(var(--border) / 0.3);
	text-decoration: none;
}

.cbc-shop-main .woocommerce-pagination .current {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	border-color: hsl(var(--primary));
}

@media (min-width: 640px) {
	.cbc-shop-main ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.cbc-shop-head-title {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.cbc-shop-layout {
		grid-template-columns: 16rem 1fr;
		/* aside stretches full height so the sticky sidebar card has room to stick */
		align-items: stretch;
	}

	.cbc-shop-main ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
   Single product page
   ========================================================= */
.cbc-product-page {
	max-width: 80rem;
	margin: 0 auto;
	padding: 2rem 1rem;
}

@media (min-width: 640px) {
	.cbc-product-page {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.cbc-product-page {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.cbc-product-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
	margin-bottom: 2rem;
}

.cbc-product-breadcrumb a {
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	transition: color 0.2s ease;
}

.cbc-product-breadcrumb a:hover {
	color: hsl(var(--primary));
}

.cbc-product-breadcrumb .cbc-current {
	color: hsl(var(--foreground));
}

.cbc-product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.cbc-product-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.cbc-product-imgwrap {
	border-radius: 1rem;
	overflow: hidden;
}

.cbc-product-img {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
}

.cbc-product-titlerow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.cbc-product-title {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.15;
	color: hsl(var(--foreground));
	margin: 0;
}

@media (min-width: 768px) {
	.cbc-product-title {
		font-size: 2.25rem;
	}
}

.cbc-product-stock {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 700;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	white-space: nowrap;
}

.cbc-product-stock.is-in {
	background: #dcfce7;
	color: #166534;
}

.cbc-product-stock.is-out {
	background: #fee2e2;
	color: #991b1b;
}

.cbc-product-price {
	font-size: 2.25rem;
	font-weight: 700;
	color: hsl(var(--primary));
	margin-bottom: 1.5rem;
}

.cbc-product-price .woocommerce-Price-amount {
	color: inherit;
}

.cbc-qty-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	margin-bottom: 0.75rem;
}

.cbc-product-buy .cart {
	margin: 0;
}

.cbc-product-buy .quantity {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.cbc-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid hsl(var(--border));
	border-radius: 0.375rem;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	box-shadow: 0 1px 2px hsl(var(--foreground) / 0.08);
	cursor: pointer;
	transition: background 0.2s ease;
}

.cbc-qty-btn:hover {
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
}

/* Kill StoreBase's dark sliding overlay on these <button>s. */
.cbc-qty-btn::before {
	display: none;
	content: none;
}

.cbc-qty-btn svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.cbc-product-buy .quantity input.qty {
	width: 3rem;
	padding: 0;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	background: transparent;
	border: 0;
	-moz-appearance: textfield;
}

.cbc-product-buy .quantity input.qty::-webkit-outer-spin-button,
.cbc-product-buy .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cbc-product-buy .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1rem 2rem;
	font-size: 1.125rem;
	font-weight: 600;
	border-radius: 0.375rem;
	box-shadow: 0 1px 3px hsl(var(--foreground) / 0.12);
	white-space: nowrap;
	text-transform: none;
	margin-bottom: 1.5rem;
	transition: all 0.3s ease;
}

.cbc-product-buy .single_add_to_cart_button:active {
	transform: scale(0.98);
}

.cbc-product-buy .single_add_to_cart_button .cbc-cart-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.cbc-product-desc {
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.cbc-product-desc-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 0.75rem;
}

.cbc-product-desc-body {
	color: hsl(var(--muted-foreground));
	line-height: 1.7;
}

.cbc-product-desc-body p:last-child {
	margin-bottom: 0;
}

/* Related products — same cards as the shop, own grid (shop grid is scoped to .cbc-shop-main). */
.cbc-related {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid hsl(var(--border) / 0.3);
}

.cbc-related-title {
	font-size: 1.875rem;
	font-weight: 700;
	color: hsl(var(--foreground));
	margin: 0 0 2rem;
}

@media (min-width: 768px) {
	.cbc-related-title {
		font-size: 2.25rem;
	}
}

.cbc-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cbc-related-grid::before,
.cbc-related-grid::after {
	content: none;
	display: none;
}

.cbc-related-grid li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

@media (min-width: 640px) {
	.cbc-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cbc-related-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* =========================================================
   Slide-out cart drawer
   ========================================================= */
.cbc-cart-overlay {
	position: fixed;
	inset: 0;
	background: hsl(0 0% 0% / 0.45);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cbc-cart-overlay.is-visible {
	opacity: 1;
}

body.cbc-cart-locked {
	overflow: hidden;
}

.cbc-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	max-width: 28rem;
	background: hsl(var(--card));
	color: hsl(var(--card-foreground));
	box-shadow: -10px 0 30px hsl(var(--foreground) / 0.2);
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.cbc-cart-drawer.is-open {
	transform: translateX(0);
}

.cbc-cart-drawer-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2.25rem 1.5rem 1.5rem;
	border-bottom: 1px solid hsl(var(--border) / 0.3);
}

.cbc-cart-drawer-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: hsl(var(--card-foreground));
	margin: 0;
}

.cbc-cart-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: hsl(var(--card-foreground));
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.cbc-cart-drawer-close:hover {
	background: hsl(var(--muted));
	color: hsl(var(--card-foreground));
}

.cbc-cart-drawer-close::before {
	display: none;
	content: none;
}

.cbc-cart-drawer-close svg {
	width: 1.25rem;
	height: 1.25rem;
}

.cbc-cart-drawer-body,
.cbc-cart-drawer .widget_shopping_cart_content,
.cbc-minicart {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.cbc-cart-drawer.is-loading .cbc-minicart-list {
	opacity: 0.5;
	pointer-events: none;
}

/* Item list (scrolls) */
.cbc-minicart-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cbc-minicart-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
	border: 1px solid hsl(var(--border) / 0.3);
	border-radius: 0.5rem;
	background: hsl(var(--card));
}

.cbc-minicart-thumb {
	flex-shrink: 0;
	display: block;
}

.cbc-minicart-thumb img {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	border-radius: 0.375rem;
	display: block;
}

.cbc-minicart-info {
	flex: 1 1 auto;
	min-width: 0;
}

.cbc-minicart-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.3;
	color: hsl(var(--card-foreground));
	text-decoration: none;
}

a.cbc-minicart-name:hover {
	color: hsl(var(--primary));
}

.cbc-minicart-price {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: hsl(var(--primary));
}

.cbc-minicart-controls {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
}

.cbc-minicart-qty {
	display: flex;
	align-items: center;
	border: 1px solid hsl(var(--border) / 0.5);
	border-radius: 0.375rem;
	overflow: hidden;
}

.cbc-minicart-dec,
.cbc-minicart-inc {
	width: 1.85rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: hsl(var(--card-foreground));
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.cbc-minicart-dec:hover,
.cbc-minicart-inc:hover {
	background: hsl(var(--muted));
	color: hsl(var(--card-foreground));
}

.cbc-minicart-dec::before,
.cbc-minicart-inc::before,
.cbc-minicart-remove::before {
	display: none;
	content: none;
}

.cbc-minicart-qnum {
	min-width: 1.75rem;
	text-align: center;
	font-size: 0.95rem;
	color: hsl(var(--card-foreground));
}

.cbc-minicart-remove {
	padding: 0;
	border: 0;
	background: transparent;
	color: hsl(var(--secondary));
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	text-transform: none;
}

.cbc-minicart-remove:hover {
	color: hsl(var(--secondary));
	background: transparent;
	text-decoration: underline;
}

/* Footer (pinned) */
.cbc-minicart-foot {
	flex-shrink: 0;
	padding: 1.5rem;
	border-top: 1px solid hsl(var(--border) / 0.3);
}

.cbc-minicart-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	color: hsl(var(--card-foreground));
}

.cbc-minicart-total-label {
	font-size: 1.125rem;
	font-weight: 500;
}

.cbc-minicart-total-amount {
	font-size: 1.5rem;
	font-weight: 700;
}

.cbc-minicart-checkout {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	text-align: center;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	font-weight: 600;
	font-size: 1rem;
	border-radius: 0.375rem;
	text-decoration: none;
	box-shadow: 0 1px 3px hsl(var(--foreground) / 0.12);
	transition: background 0.2s ease;
}

.cbc-minicart-checkout:hover {
	background: hsl(var(--primary) / 0.9);
	color: hsl(var(--primary-foreground));
}

/* Empty state */
.cbc-minicart-empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem;
	color: hsl(var(--muted-foreground));
	text-align: center;
}

.cbc-minicart-empty svg {
	width: 3rem;
	height: 3rem;
	opacity: 0.5;
}

/* =========================================================
   WooCommerce notices (added-to-cart, info, errors)
   StoreBase doesn't load WooCommerce's notice CSS, so style them here.
   ========================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 0.5rem;
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
	font-size: 0.95rem;
	line-height: 1.4;
	list-style: none;
}

.woocommerce-message {
	background: #dcfce7;
	color: #166534;
}

.woocommerce-error {
	background: #fee2e2;
	color: #991b1b;
}

.woocommerce-error li {
	list-style: none;
	margin: 0;
}

/* The inline "View cart" / action link should look like a real button. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	padding: 0.45rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 0.375rem;
	white-space: nowrap;
	text-transform: none;
	box-shadow: 0 1px 2px hsl(var(--foreground) / 0.12);
}

/* =========================================================
   Cart & Checkout blocks — brand alignment (React blocks, CSS only)
   ========================================================= */
/* Keep the (alignwide) cart/checkout centered with side padding so the totals
   sidebar never hugs the screen edge on wide viewports. */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.wc-block-cart,
.wc-block-checkout {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	box-sizing: border-box;
}

/* Match the cart/checkout width to the rest of the site's content. The shop
   content container (.cbc-shop-layout) is 1232px centered — the site's "100%".
   (The default 80rem cap above rendered a touch narrow; full-bleed was too wide.) */
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide,
.woocommerce-checkout .wc-block-checkout {
	max-width: 1232px;
}

/* Safari fix: flex items default to min-width:auto, so the left items <table>
   refuses to shrink and overflows to the right (eating the right padding / the
   sidebar hugs the edge). Chromium tolerates it; Safari does not. Let the flex
   columns shrink and keep the table within its column. */
.wc-block-cart .wc-block-components-main,
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-main,
.wc-block-checkout .wc-block-components-sidebar {
	min-width: 0;
}

.wc-block-cart .wc-block-cart-items {
	width: 100%;
	max-width: 100%;
}

/* Section headings to Playfair, matching the rest of the site. */
.wc-block-checkout .wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-title,
.wc-block-cart .wc-block-components-title,
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart .wc-block-cart-items__header {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	color: hsl(var(--foreground));
}

/* Keep product names (in the order summary / line items) in the body font. */
.wc-block-checkout .wc-block-components-product-name,
.wc-block-cart .wc-block-components-product-name {
	font-family: "DM Sans", sans-serif;
	color: hsl(var(--foreground));
}

.wc-block-cart a.wc-block-components-product-name:hover {
	color: hsl(var(--primary));
}

/* Inputs / selects: consistent radius + gold focus. */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-select select,
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout .wc-block-components-textarea,
.wc-block-checkout textarea,
.wc-block-cart .wc-block-components-text-input input {
	border-radius: 0.5rem;
}

/* Recolor the block's own focus outline to gold (block CSS loads after ours). */
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input input:focus-visible,
.wc-block-checkout .wc-block-components-select select:focus,
.wc-block-checkout .wc-block-components-select select:focus-visible,
.wc-block-checkout .wc-block-components-combobox.is-active input,
.wc-block-checkout .wc-block-components-textarea:focus,
.wc-block-checkout textarea:focus,
.wc-block-cart .wc-block-components-text-input input:focus,
.wc-block-cart .wc-block-components-text-input input:focus-visible {
	outline-color: hsl(var(--primary)) !important;
	box-shadow: none;
}

.wc-block-checkout .wc-block-components-text-input:focus-within,
.wc-block-checkout .wc-block-components-select:focus-within,
.wc-block-cart .wc-block-components-text-input:focus-within {
	outline-color: hsl(var(--primary)) !important;
}

/* Floating label turns gold while the field is focused. */
.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-text-input input:focus + label {
	color: hsl(var(--primary));
}

/* Links (coupon toggle, terms, privacy, "add apartment", note). */
.wc-block-checkout a,
.wc-block-checkout .wc-block-components-button.wc-block-components-button--text,
.wc-block-cart a:not(.wc-block-components-product-name),
.wc-block-cart .wc-block-components-button.wc-block-components-button--text {
	color: hsl(var(--primary));
}

.wc-block-checkout a:hover,
.wc-block-checkout .wc-block-components-button.wc-block-components-button--text:hover,
.wc-block-cart a:not(.wc-block-components-product-name):hover,
.wc-block-cart .wc-block-components-button.wc-block-components-button--text:hover {
	color: hsl(var(--accent));
}

/* Order-summary / cart-totals sidebar → vintage card. */
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.3);
	border-radius: 0.75rem;
	box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08);
}

/* The checkout block bakes the column gap into the sidebar as a LEFT-ONLY 26px
   padding, so our card got interior space on the left but none on the right (looked
   lopsided). The real column gap comes from the layout, so make the card's padding
   symmetric instead. Also drop the inner order-summary block's own 1px border — it
   doubled up with the card outline as a second line on the left. */
.wc-block-checkout .wc-block-checkout__sidebar {
	padding: 1.5rem;
}
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
}

/* WooCommerce prints BOTH a per-unit "individual price" (under the product name)
   and the line total (right column) — identical when quantity is 1, so it reads as
   a duplicated price. The source shows one price; keep the line total, hide the
   per-unit one. */
.wc-block-checkout .wc-block-components-order-summary-item__individual-price {
	display: none;
}

/* Primary buttons: brand gold (rebrand) + consistent shape. */
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart .wc-block-cart__submit-button {
	border-radius: 0.5rem;
	font-weight: 600;
}

/* The cart "Proceed to Checkout" is an <a>; keep its label white (the broad
   "links → gold" rule above otherwise makes it gold-on-gold = invisible). */
.wc-block-cart a.wc-block-cart__submit-button,
.wc-block-cart a.wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-cart__submit-button .wc-block-components-button__text {
	color: hsl(var(--primary-foreground));
}

/* Quantity stepper buttons stay neutral (no StoreBase gold/overlay leak). */
.wc-block-cart .wc-block-components-quantity-selector__button {
	color: hsl(var(--foreground));
	background: transparent;
}

/* The "+" button uses U+FF0B (fullwidth plus), which Latin fonts lack and renders
   as tofu (□). Replace it with a normal ASCII "+". (Minus is U+2212 and is fine.) */
.wc-block-cart .wc-block-components-quantity-selector__button--plus {
	font-size: 0;
}

.wc-block-cart .wc-block-components-quantity-selector__button--plus::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
}

.wc-block-cart .wc-block-components-quantity-selector__button::before {
	display: none;
	content: none;
}

/* --- Neutralize StoreBase's purple (#4E11E2) WooCommerce buttons globally ---
   StoreBase's woocommerce.css loads AFTER our stylesheet and paints several WC
   buttons purple (some with !important + high specificity). Re-point them to the
   brand here; the .boxed wrapper (opened in header.php, wraps all page content)
   lifts our specificity above StoreBase's. */

/* Cart line-item remove button → subtle neutral icon (StoreBase: !important purple). */
.boxed .wc-block-cart-item__wrap .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	background-color: transparent !important;
	color: hsl(var(--muted-foreground)) !important;
	box-shadow: none !important;
}

.boxed .wc-block-cart-item__wrap .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	color: hsl(var(--secondary)) !important;
}

.boxed .wc-block-cart-item__wrap .wc-block-cart-item__quantity .wc-block-cart-item__remove-link::before {
	display: none;
	content: none;
}

/* Account / form submit buttons + cart submit → brand gold. */
.boxed .woocommerce-EditAccountForm .woocommerce-Button.button,
.boxed .woocommerce-form .woocommerce-button.button,
.boxed .woocommerce-form button[type="submit"],
.boxed .wc-block-cart__submit-container a span {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

/* Selection / checkbox accents to gold. */
.wc-block-checkout .wc-block-components-checkbox input:checked,
.wc-block-cart .wc-block-components-checkbox input:checked {
	accent-color: hsl(var(--primary));
}

/* =========================================================
   My Account (WooCommerce) — brand the login form and the logged-in dashboard.
   ========================================================= */
.woocommerce-account .woocommerce {
	max-width: 64rem;
	margin: 1.5rem auto 5rem;
	padding: 0 1.5rem;
}

/* Page title on the account page (Login / My account / Orders / …). */
.woocommerce-account .cbc-page-title {
	max-width: 64rem;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
	font-size: 1.6rem;
	color: hsl(var(--foreground));
	text-align: center;
}

@media (min-width: 768px) {
	.woocommerce-account .cbc-page-title {
		font-size: 2rem;
	}
}

/* Headings → Playfair. */
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3,
.woocommerce-account .woocommerce legend {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: hsl(var(--foreground));
}

/* Inputs → match the rest of the site's forms. */
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce input[type="tel"] {
	width: 100%;
	padding: 0.55rem 0.75rem;
	font-size: 0.95rem;
	color: hsl(var(--foreground));
	background: hsl(var(--background));
	border: 1px solid hsl(var(--border));
	border-radius: 0.5rem;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce input[type="text"]:focus,
.woocommerce-account .woocommerce input[type="email"]:focus,
.woocommerce-account .woocommerce input[type="password"]:focus,
.woocommerce-account .woocommerce input[type="tel"]:focus {
	outline: none;
	border-color: hsl(var(--primary));
	box-shadow: 0 0 0 1px hsl(var(--primary));
}

/* The "show password" toggle picked up the global gold button styling (a gold bar
   inside the field) — neutralize it back to a plain eye icon. */
.woocommerce-account .password-input {
	display: block;
	position: relative;
}

.woocommerce-account .show-password-input {
	background: none !important;
	color: hsl(var(--muted-foreground)) !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	right: 0.75rem !important;
}

.woocommerce-account .show-password-input::before,
.woocommerce-account .show-password-input::after {
	display: none !important;
	content: none !important;
}

.woocommerce-account .show-password-input {
	font-size: 0 !important;
}

.woocommerce-account .show-password-input::before {
	display: inline-block !important;
	content: "\f177" !important; /* dashicons visibility eye */
	font-family: dashicons !important;
	font-size: 1.1rem !important;
}

.woocommerce-account .show-password-input.display-password::before {
	color: hsl(var(--primary)) !important;
}

/* Links → gold (kills the StoreBase purple on "Lost your password?" etc.). */
.woocommerce-account .woocommerce a {
	color: hsl(var(--primary));
}

.woocommerce-account .woocommerce a:hover {
	color: hsl(var(--accent));
}

/* …but action buttons (Orders actions, "Browse products") are <a> too, so the
   generic gold link-color above would make them gold-on-gold. Keep them
   white-on-gold. This beats the link rule yet never matches the sidebar nav
   (those links aren't .button), so the active item stays readable. */
.woocommerce-account .woocommerce a.button {
	color: hsl(var(--primary-foreground));
	background-color: hsl(var(--primary));
	border-color: hsl(var(--primary));
}

.woocommerce-account .woocommerce a.button:hover {
	color: hsl(var(--primary-foreground));
}

/* StoreBase tags the address Add/Edit links with Bootstrap's .text-primary
   (blue #007bff, set with !important) — recolor those to brand gold. */
.woocommerce-account .text-primary {
	color: hsl(var(--primary)) !important;
}

.woocommerce-account .text-primary:hover {
	color: hsl(var(--accent)) !important;
}

/* Logged-out: centre the login form in a card. */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 30rem;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.3);
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 10px 15px -3px hsl(var(--foreground) / 0.1);
}

/* Logged-in dashboard: StoreBase already lays out the nav + content as its own
   Bootstrap columns (.container > .row > .col-md-3 / .col-md-9), so we DON'T impose
   our own grid on .woocommerce (doing so crammed the whole .container into one track).
   We only style the nav card and links below. */
.woocommerce-MyAccount-navigation {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.3);
	border-radius: 0.75rem;
	padding: 0.6rem;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: 0.5rem;
	color: hsl(var(--foreground));
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: hsl(var(--muted));
	color: hsl(var(--foreground));
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

/* Order / downloads tables → soften to brand. */
.woocommerce-account .woocommerce table.shop_table {
	border: 1px solid hsl(var(--border) / 0.3);
	border-radius: 0.5rem;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-account .woocommerce table.shop_table th,
.woocommerce-account .woocommerce table.shop_table td {
	border-color: hsl(var(--border) / 0.2);
}

/* Address-edit / account-details column layout breathing room. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	margin-bottom: 1.5rem;
}

/* =========================================================
   Simplify the block checkout to match the source's minimal form: keep Email,
   Full name (first_name relabelled in functions.php), Country, State, Address,
   City, Postal code. Hide the fields the source omits. last_name is made optional
   in functions.php so hiding it here doesn't block "Place Order".
   ========================================================= */
.wc-block-checkout .wc-block-components-address-form__last_name,
.wc-block-checkout .wc-block-components-address-form__address_2,
.wc-block-checkout .wc-block-components-address-form__address_2-toggle,
.wc-block-checkout .wc-block-components-address-form__phone,
/* "I would like to receive exclusive emails…" marketing opt-in (contact step). */
.wc-block-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkbox,
/* "Add a note to your order" toggle (order-note step). */
.wc-block-checkout .wp-block-woocommerce-checkout-order-note-block {
	display: none !important;
}

/* Guard: never allow horizontal scroll on the cart/checkout pages (the off-screen
   slide-out drawer sits past the right edge). */
.woocommerce-cart,
.woocommerce-checkout {
	overflow-x: hidden;
}

/* Cart & checkout sit in StoreBase's `main.site-main.container` (max-width 1140px),
   which makes them narrower than the rest of the site (header/footer use 80rem).
   Lift the cap to 80rem so the cart spans the full site width. */
.woocommerce-cart main.site-main.container,
.woocommerce-checkout main.site-main.container {
	max-width: none;
}

/* =========================================================
   Cart line items → match the slide-out cart drawer (.cbc-minicart-item):
   every row is a card — thumb left, name + gold price centre, stepper + Remove
   stacked on the right. The block ships a <table>; we relayout it to flex/grid.
   ========================================================= */

/* Drop the PRODUCT / TOTAL column header — the drawer has none. */
.wc-block-cart .wc-block-cart-items__header {
	display: none;
}

/* Table + body collapse to a plain vertical stack (kill the table borders). */
.wc-block-cart table.wc-block-cart-items,
.wc-block-cart .wc-block-cart-items,
.wc-block-cart .wc-block-cart-items tbody {
	display: block;
	width: 100%;
	border: 0;
}

/* Each row → a drawer-style card. */
.wc-block-cart .wc-block-cart-items__row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0 0 1.25rem;
	padding: 1.25rem;
	border: 1px solid hsl(var(--border) / 0.3);
	border-radius: 0.625rem;
	background: hsl(var(--card));
}
.wc-block-cart .wc-block-cart-items__row td {
	display: block;
	padding: 0;
	border: 0;
}

/* Thumb — larger than the drawer's 80px since the cart page is full-width. */
.wc-block-cart td.wc-block-cart-item__image {
	flex: 0 0 auto;
	width: 7.5rem;
}
.wc-block-cart .wc-block-cart-item__image img {
	width: 7.5rem;
	height: 7.5rem;
	object-fit: cover;
	border-radius: 0.5rem;
}

/* Product cell grows; lay out name / price / controls like the drawer:
   name top-left, gold price below, stepper + Remove in a right column. */
.wc-block-cart td.wc-block-cart-item__product {
	flex: 1 1 auto;
	min-width: 0;
}
/* Table-prefixed to outrank the block's own `.wrap { display:flex; flex-direction:column }`. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name    controls"
		"price   controls";
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.35rem;
}

/* Name → bold, 2-line clamp, dark (drawer .cbc-minicart-name).
   Table-prefixed to outrank the block's own product-name font-size rule
   (table.wc-block-cart-items … .wc-block-components-product-name). */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row a.wc-block-components-product-name {
	grid-area: name;
	align-self: end;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	max-width: none;
	font-family: "DM Sans", sans-serif;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	color: hsl(var(--card-foreground));
}
.wc-block-cart a.wc-block-components-product-name:hover {
	color: hsl(var(--primary));
	text-decoration: none;
}

/* Price under the name → gold + bold (drawer .cbc-minicart-price). */
.wc-block-cart .wc-block-cart-item__prices {
	grid-area: price;
	align-self: start;
}
.wc-block-cart .wc-block-cart-item__prices,
.wc-block-cart .wc-block-cart-item__prices span {
	font-size: 1.5rem !important;
	font-weight: 700;
	color: hsl(var(--primary));
}
.wc-block-cart .wc-block-components-product-metadata {
	display: none;
}

/* The drawer shows a single price (the line subtotal) — hide the TOTAL column. */
.wc-block-cart td.wc-block-cart-item__total {
	display: none;
}

/* Stepper + Remove → right column, stacked & right-aligned (drawer .cbc-minicart-controls).
   The selector is table-prefixed to outrank the block's own
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity`
   rule, which otherwise forces flex-direction:row. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	grid-area: controls;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Stepper pill [− N +] — sized to match the drawer (.cbc-minicart-qty). */
.wc-block-cart .wc-block-components-quantity-selector {
	display: flex;
	align-items: stretch;
	width: auto;
	min-width: 0;
	max-width: none;
	height: 2.75rem;
	border: 1px solid hsl(var(--border) / 0.5);
	border-radius: 0.5rem;
	overflow: hidden;
	background: transparent;
}
.wc-block-cart .wc-block-components-quantity-selector::before,
.wc-block-cart .wc-block-components-quantity-selector::after {
	content: none;
}
.wc-block-cart .wc-block-components-quantity-selector__input {
	order: 2;
	width: 2.5rem;
	min-width: 0;
	height: 2.75rem;
	min-height: 0;
	line-height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 600;
	color: hsl(var(--card-foreground));
	-moz-appearance: textfield;
	appearance: textfield;
}
/* Hide the number-input spinner arrows (they'd crowd the centred value). */
.wc-block-cart .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-cart .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.wc-block-cart .wc-block-components-quantity-selector__button {
	position: static;
	width: 2.5rem;
	height: auto;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	line-height: 1;
	color: hsl(var(--card-foreground));
	background: transparent;
}
.wc-block-cart .wc-block-components-quantity-selector__button--minus {
	order: 1;
}
.wc-block-cart .wc-block-components-quantity-selector__button--plus {
	order: 3;
	/* Native glyph is U+FF0B (tofu); keep it hidden and show the ::after "+". */
	font-size: 0;
}
.wc-block-cart .wc-block-components-quantity-selector__button:hover:not([disabled]) {
	background: hsl(var(--muted));
}
.wc-block-cart .wc-block-components-quantity-selector__button[disabled] {
	opacity: 0.4;
}

/* Remove → small crimson text link, like the drawer (.cbc-minicart-remove). */
.boxed .wc-block-cart-item__wrap .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: hsl(var(--secondary)) !important;
	font-size: 0.9rem !important;
	font-weight: 500;
	text-indent: 0 !important;
}
.boxed .wc-block-cart-item__wrap .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	background: transparent !important;
	text-decoration: underline;
}
.wc-block-cart .wc-block-cart-item__remove-link svg {
	display: none;
}
.wc-block-cart .wc-block-cart-item__remove-link::after {
	content: "Remove";
}

/* =========================================================
   Cart totals sidebar — give the card symmetric inner padding so
   its content stops hugging the right edge (WC ships padding-right:0).
   ========================================================= */
.wc-block-cart .wc-block-cart__sidebar {
	padding: 1.75rem 1.75rem 2rem;
	box-sizing: border-box;
}
/* Title/coupon/totals inside already inherit the card padding now — drop any
   stray left-only insets so both edges line up. */
.wc-block-cart .wc-block-cart__sidebar > * {
	padding-left: 0;
	padding-right: 0;
}

/* =========================================================
   404 (Not Found) page — branded "off the charts" screen
   ========================================================= */
.cbc-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 5rem 1.25rem 6rem;
	text-align: center;
	background: hsl(var(--background));
}
.cbc-404-inner {
	max-width: 40rem;
	margin: 0 auto;
}
.cbc-404-compass {
	display: inline-flex;
	color: hsl(var(--primary));
}
.cbc-404-compass svg {
	width: 4.5rem;
	height: 4.5rem;
}
.cbc-404-code {
	margin: 0.75rem 0 0.5rem;
	font-size: clamp(5rem, 18vw, 9rem);
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: hsl(var(--primary));
}
.cbc-404-title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: hsl(var(--foreground));
}
.cbc-404-text {
	margin: 0 auto 2.25rem;
	max-width: 34rem;
	font-size: 1.125rem;
	line-height: 1.75;
	color: hsl(var(--foreground) / 0.75);
}
.cbc-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* =========================================================
   Empty cart state (block) — brand the "Your cart is empty" screen
   and its "New in store" product grid (StoreBase paints those buttons
   purple #4E11E2; the .boxed prefix lifts us above its woocommerce.css).
   ========================================================= */

/* Headings → Playfair, brand brown. */
.wp-block-woocommerce-empty-cart-block h2,
.wc-block-cart__empty-cart__title {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	color: hsl(var(--foreground));
}
.wc-block-cart__empty-cart__title {
	font-size: 1.75rem;
	margin-bottom: 2rem;
}

/* StoreBase renders the empty-cart smiley via a mask-image (dark fill through an
   SVG mask) at 140px. Halve it to 70px — resize the MASK (not background, which
   would crop it into a square) and keep StoreBase's mask-image + fill colour. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 70px !important;
	height: 70px !important;
	-webkit-mask-size: contain !important;
	mask-size: contain !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-position: center !important;
	background-size: contain !important;
	margin: 0 auto 1.25rem !important;
}
.wp-block-woocommerce-empty-cart-block svg,
.wc-block-cart__empty-cart__title.with-empty-cart-icon svg {
	color: hsl(var(--primary));
	fill: hsl(var(--primary));
}

/* "Add to Cart" buttons in the suggestions grid → brand gold (de-purple). */
.boxed .wp-block-woocommerce-empty-cart-block a.wp-block-button__link,
.boxed .wp-block-woocommerce-empty-cart-block a.add_to_cart_button {
	background-color: hsl(var(--primary)) !important;
	color: hsl(var(--primary-foreground)) !important;
	border-radius: 0.5rem !important;
	font-weight: 600;
	font-size: 1.0625rem !important;
	padding: 0.7rem 1.5rem !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.boxed .wp-block-woocommerce-empty-cart-block a.wp-block-button__link:hover,
.boxed .wp-block-woocommerce-empty-cart-block a.add_to_cart_button:hover {
	background-color: hsl(var(--primary) / 0.9) !important;
	color: hsl(var(--primary-foreground)) !important;
}
/* Neutralize StoreBase's sliding button::before overlay on these. */
.boxed .wp-block-woocommerce-empty-cart-block a.wp-block-button__link::before {
	display: none;
	content: none;
}

/* Suggestion product cards → tidy to brand (no link underline, dark title/price). */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	text-decoration: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	color: hsl(var(--foreground));
	text-decoration: none;
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.35;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover .wc-block-grid__product-title {
	color: hsl(var(--primary));
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	color: hsl(var(--foreground));
	font-weight: 700;
	font-size: 1.2rem;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	border-radius: 0.5rem;
}

/* =========================================================
   Captain Benny Cargo — add further overrides below
   ========================================================= */