/* ==========================================================================
   Shared WooCommerce chrome
   ========================================================================== */
.woocommerce-main { padding-block: clamp(2rem, 4vw, 3.5rem); }
.woocommerce-main > .woocommerce,
.woocommerce-breadcrumb,
.wc-block-cart,
.wc-block-checkout {
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}
/* .wc-block-cart / .wc-block-checkout are display:flex (from WooCommerce
   Blocks' own CSS), and a flex container's default width is "fit content",
   not "fill available space" — so max-width alone left it shrunk to
   whatever its children needed rather than expanding to fill the page,
   with huge empty margins either side. */
.wc-block-cart,
.wc-block-checkout {
	width: 100%;
	box-sizing: border-box;
}
.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--cc-ink-500);
	margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a { color: var(--cc-green-700); font-weight: 600; }

.woocommerce-page h1.entry-title,
.woocommerce-products-header__title {
	max-width: var(--cc-container);
	margin: 0 auto 0.5rem;
	padding-inline: var(--cc-gutter);
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}

/* ==========================================================================
   Shop / category archive grid
   ========================================================================== */
.woocommerce-result-count,
.woocommerce-ordering {
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
	color: var(--cc-ink-500);
	font-size: 0.9rem;
}
.woocommerce-ordering select {
	border: 1px solid var(--cc-cream-200);
	border-radius: var(--cc-radius-sm);
	padding: 0.5em 0.75em;
	background: var(--cc-white);
}

ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.5rem;
	max-width: var(--cc-container);
	margin: 1.5rem auto 0 !important;
	padding: 0 var(--cc-gutter) !important;
	list-style: none !important;
}
/* WooCommerce's default stylesheet clearfixes this element for its own
   float-based layout via generated content (content:" "; display:table).
   Inside a grid container, generated content still becomes a real grid
   item — an invisible one occupying the first cell — which silently
   pushed every actual product card over by one column. Not needed for a
   grid layout in the first place, so it's removed outright. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}
ul.products li.product {
	/* WooCommerce's default stylesheet sets a float + percentage width here
	   (e.g. 22.05%) for its own classic layout — floats are inert inside a
	   grid item, but the width isn't, so it's reset explicitly to fill the
	   grid track this theme lays out above. */
	width: 100% !important;
	float: none !important;
	background: var(--cc-white);
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	box-shadow: var(--cc-shadow-sm);
	transition: box-shadow 0.2s var(--cc-ease), transform 0.2s var(--cc-ease);
	padding: 0 !important;
	margin: 0 !important;
}
ul.products li.product:hover { box-shadow: var(--cc-shadow-md); transform: translateY(-3px); }
ul.products li.product a { display: block; color: inherit; }
ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0 !important;
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cc-font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--cc-green-900);
	padding: 1rem 1rem 0;
	margin: 0;
}
ul.products li.product .price {
	display: block;
	padding: 0.35rem 1rem 1rem;
	font-weight: 800;
	color: var(--cc-green-800);
}
ul.products li.product .price del { color: var(--cc-ink-500); opacity: 0.7; font-weight: 500; margin-right: 0.4em; }
ul.products li.product .price ins { text-decoration: none; color: var(--cc-red-600); }
ul.products li.product .button {
	display: block;
	margin: 0 1rem 1.25rem;
	text-align: center;
	background: var(--cc-amber-500);
	color: var(--cc-green-900) !important;
	font-weight: 700;
	padding: 0.7em 1em;
	border-radius: var(--cc-radius-md);
}
ul.products li.product .button:hover { background: var(--cc-amber-600); color: var(--cc-white) !important; }
ul.products li.product .onsale {
	position: absolute;
	margin: 12px;
	background: var(--cc-red-600);
	color: var(--cc-white);
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 0.35em 0.7em;
	border-radius: 999px;
	min-height: 0; min-width: 0; line-height: 1;
	top: 0; left: 0;
}
ul.products li.product { position: relative; }

.woocommerce-pagination {
	max-width: var(--cc-container);
	margin: 2rem auto 0;
	padding-inline: var(--cc-gutter);
}
.woocommerce-pagination ul { display: flex; gap: 0.5rem; list-style: none; padding: 0; }
.woocommerce-pagination ul.page-numbers::before,
.woocommerce-pagination ul.page-numbers::after {
	content: none !important;
	display: none !important;
}
.woocommerce-pagination a, .woocommerce-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; border-radius: var(--cc-radius-sm);
	background: var(--cc-white); border: 1px solid var(--cc-cream-200);
}
.woocommerce-pagination .current { background: var(--cc-green-900); color: var(--cc-white); }

/* ==========================================================================
   Single product
   ========================================================================== */
.single-product div.product {
	max-width: var(--cc-container);
	margin: 0 auto;
	padding-inline: var(--cc-gutter);
	display: grid;
	gap: 2.5rem;
}
@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr 1fr;
	}
	.single-product div.product .woocommerce-product-gallery { grid-column: 1; }
	.single-product div.product .summary { grid-column: 2; }
}
/* Same legacy-width conflict as ul.products li.product above: WooCommerce's
   default stylesheet floats these at 48% width for its own 2-column layout. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	width: 100% !important;
	float: none !important;
}
/* Everything WooCommerce prints after the gallery/summary row (tabs, upsells,
   related products) via woocommerce_after_single_product_summary is still a
   direct child of the same grid — without this it gets pulled into the
   2-column track instead of spanning full width. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells.products,
.single-product div.product > .related.products {
	grid-column: 1 / -1;
}
.woocommerce-product-gallery {
	position: relative;
}
.woocommerce-product-gallery__image {
	display: block;
	position: relative;
}
/* Single-product "Sale!" flash — the loop-card .onsale rule further down is
   scoped to ul.products li.product, so it doesn't reach this one. */
.woocommerce-product-gallery .onsale,
.single-product span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	background: var(--cc-red-600);
	color: var(--cc-white);
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.35em 0.7em;
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
}
/* PhotoSwipe zoom trigger (magnifying glass), added client-side by WooCommerce's
   gallery script — unstyled once the plugin's own stylesheet is dequeued. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cc-white);
	border-radius: 50%;
	box-shadow: var(--cc-shadow-sm);
	font-size: 0;
}
.woocommerce-product-gallery__trigger::before {
	content: '';
	width: 16px;
	height: 16px;
	background: currentColor;
	color: var(--cc-green-900);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='21' y1='21' x2='15.8' y2='15.8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='21' y1='21' x2='15.8' y2='15.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--cc-shadow-md);
}
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 0;
	list-style: none;
	padding: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 80px; }
.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--cc-radius-sm);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s var(--cc-ease);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; }
.single-product .summary h1.product_title {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.single-product .summary .price {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--cc-green-800);
	display: block;
	margin-bottom: 1rem;
}
.single-product .summary .price del { color: var(--cc-ink-500); font-size: 1rem; opacity: 0.7; margin-right: 0.5em; }
.single-product .summary .price ins { text-decoration: none; color: var(--cc-red-600); }
.single-product .woocommerce-product-details__short-description { color: var(--cc-ink-700); margin-bottom: 1.5rem; }

/* Not scoped to .single-product: this same variation/add-to-cart form is
   also embedded directly on the Calf Jackets landing page (and potentially
   other landing pages), not just the real single-product template. */
table.variations { width: 100%; margin-bottom: 1.25rem; }
table.variations td, table.variations th { padding: 0.5em 0; text-align: left; }
table.variations select {
	width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid var(--cc-cream-200);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-white);
}
.woocommerce-variation-price .price { font-size: 1.25rem; margin-bottom: 0.5rem; }
.woocommerce-variation-availability p.stock { margin: 0 0 1rem; }

/* Quantity input + Add to cart button on the same row. form.cart itself is
   only flexed for simple products (:not(.variations_form)) — for variable
   products the outer form also contains the size/colour table, which needs
   to stay stacked above the row; .woocommerce-variation-add-to-cart is the
   actual quantity+button wrapper there. */
.woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}
form.cart .quantity input.qty {
	width: 70px;
	padding: 0.65em;
	border: 1px solid var(--cc-cream-200);
	border-radius: var(--cc-radius-sm);
}
form.cart button.single_add_to_cart_button {
	background: var(--cc-amber-500);
	color: var(--cc-green-900);
	font-weight: 800;
	padding: 0.85em 1.75em;
	border: none;
	border-radius: var(--cc-radius-md);
	cursor: pointer;
}
form.cart button.single_add_to_cart_button:hover { background: var(--cc-amber-600); color: var(--cc-white); }
form.cart button.single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }

.embedded-add-to-cart {
	background: var(--cc-cream-50);
	border-radius: var(--cc-radius-lg);
	padding: 1.75rem;
	margin-top: 1.5rem;
}
.embedded-add-to-cart .price {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--cc-green-800);
	display: block;
	margin-bottom: 1rem;
}

.single-product .woocommerce-tabs { margin-top: 2.5rem; }
.single-product .woocommerce-tabs ul.tabs { display: flex; gap: 1.5rem; list-style: none; padding: 0; border-bottom: 1px solid var(--cc-cream-200); }
/* Reset WooCommerce's default "folder tab" look (bordered box + notched
   pseudo-elements simulating rounded browser tabs) in favour of a flat
   underline style consistent with the rest of the site. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border: none;
	background: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	z-index: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	content: none;
	display: none;
}
.single-product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-weight: 700;
	padding: 0 0 0.75em;
	display: inline-block;
	color: var(--cc-ink-700);
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--cc-amber-700);
	border-bottom: 2px solid var(--cc-amber-500);
	margin-bottom: -1px;
}
.single-product .woocommerce-tabs .panel { padding-top: 1.5rem; color: var(--cc-ink-700); }

.related.products {
	max-width: var(--cc-container);
	margin: 3.5rem auto 0;
	padding-inline: var(--cc-gutter);
}
.related.products > h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }

/* ul.products is styled sitewide for the shop archive as its own full-width,
   self-centering section (max-width/margin/padding). Nested here inside
   .related.products, which already provides that same centering, those rules
   would double up and squeeze the grid — reset them back to fill the parent. */
.related.products ul.products {
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   Cart & Checkout blocks
   ========================================================================== */
.wc-block-cart, .wc-block-checkout { padding-block: 1rem 3rem; }
.wc-block-components-main { padding-right: 0 !important; }
.wc-block-cart-item__product-name, .wc-block-components-product-name {
	font-family: var(--cc-font-body);
	font-weight: 700;
	color: var(--cc-green-900);
}
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
	background-color: var(--cc-amber-500) !important;
	color: var(--cc-green-900) !important;
	border-radius: var(--cc-radius-md) !important;
	font-weight: 800 !important;
	border: none !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--cc-amber-600) !important;
	color: var(--cc-white) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-item__value {
	font-weight: 700;
	color: var(--cc-green-900);
}
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-checkout__totals,
.wc-block-cart__totals-title {
	background: var(--cc-cream-50);
	border-radius: var(--cc-radius-lg);
}
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-combobox input {
	border-radius: var(--cc-radius-sm) !important;
}
.wc-block-components-checkbox svg,
.wc-block-components-radio-control__input {
	accent-color: var(--cc-amber-500);
}
.wc-block-components-product-badge,
.wc-block-components-sale-badge {
	background: var(--cc-red-600);
	color: var(--cc-white);
}

/* ==========================================================================
   Empty cart state
   ========================================================================== */
.wp-block-woocommerce-empty-cart-block {
	max-width: var(--cc-container);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--cc-gutter) clamp(3rem, 6vw, 4.5rem);
	text-align: center;
}
.wc-block-cart__empty-cart__title {
	font-family: var(--cc-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--cc-green-900);
	margin: 0 0 1.75rem;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { margin-bottom: 1rem; opacity: 0.6; }
.wc-empty-cart__actions { margin-bottom: 2.25rem; }
.wc-empty-cart__actions .wp-block-button__link {
	background: var(--cc-amber-500);
	color: var(--cc-green-900);
	font-weight: 700;
	padding: 0.75em 1.75em;
	border-radius: var(--cc-radius-md);
}
.wc-empty-cart__actions .wp-block-button__link:hover { background: var(--cc-amber-600); color: var(--cc-white); }
.wp-block-woocommerce-empty-cart-block hr.is-style-dots {
	margin: 0 auto 2.5rem;
	color: var(--cc-cream-200);
}
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	font-family: var(--cc-font-display);
	font-size: clamp(1.3rem, 2.5vw, 1.7rem);
	color: var(--cc-green-900);
	margin-bottom: 1.75rem;
}

/* "New in store" cross-sell grid shown on the empty cart — reskin WooCommerce
   Blocks' default product-grid markup to match the shop archive's card look
   (ul.products above), since it ships with no visual styling of its own. */
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.5rem;
}
/* WooCommerce's own stylesheet sets this item's width via a more specific
   selector (container attribute + two classes), so !important alone on a
   single-class selector doesn't win the cascade — matching that specificity
   via the real ancestor chain here instead of guessing their exact selector. */
.wc-block-grid .wc-block-grid__products .wc-block-grid__product {
	display: block !important;
	list-style: none;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	background: var(--cc-white);
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	box-shadow: var(--cc-shadow-sm);
	transition: box-shadow 0.2s var(--cc-ease), transform 0.2s var(--cc-ease);
	position: relative;
}
.wc-block-grid__product:hover { box-shadow: var(--cc-shadow-md); transform: translateY(-3px); }
.wc-block-grid__product-link { color: inherit; }
.wc-block-grid__product-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wc-block-grid__product-title {
	font-family: var(--cc-font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--cc-green-900);
	padding: 1rem 1rem 0;
	text-align: left;
}
.wc-block-grid__product-price {
	display: block;
	padding: 0.35rem 1rem 1rem;
	font-weight: 800;
	color: var(--cc-green-800);
	text-align: left;
}
.wc-block-grid__product-price del { color: var(--cc-ink-500); opacity: 0.7; font-weight: 500; margin-right: 0.4em; }
.wc-block-grid__product-price ins { text-decoration: none; color: var(--cc-red-600); }
.wc-block-grid__product-onsale {
	position: absolute;
	margin: 12px;
	background: var(--cc-red-600) !important;
	color: var(--cc-white) !important;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 0.35em 0.7em;
	border-radius: 999px;
	min-height: 0; min-width: 0; line-height: 1;
	top: 0; left: 0;
}
.wc-block-grid__product-add-to-cart { margin: 0 1rem 1.25rem; }
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	text-align: center;
	background: var(--cc-amber-500) !important;
	color: var(--cc-green-900) !important;
	font-weight: 700 !important;
	padding: 0.7em 1em !important;
	border-radius: var(--cc-radius-md) !important;
	border: none !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--cc-amber-600) !important;
	color: var(--cc-white) !important;
}

/* ==========================================================================
   Brand the remaining WooCommerce default-stylesheet surfaces: generic
   buttons, notices, stock status text, and the My Account area (forms,
   navigation, tables) — everything not already covered by a bespoke
   template/section above.
   ========================================================================== */

/* WooCommerce exposes these as CSS custom properties specifically so a theme
   can repaint them without fighting specificity — cheap to redefine, and
   catches anything in the plugin's CSS that references var() rather than a
   hardcoded hex. */
:root {
	--woocommerce: var(--cc-green-800);
	--wc-primary: var(--cc-green-800);
	--wc-secondary: var(--cc-cream-100);
	--wc-secondary-text: var(--cc-ink-700);
	--wc-highlight: var(--cc-amber-700);
	--wc-green: var(--cc-green-success);
	--wc-red: var(--cc-red-600);
	--wc-destructive: var(--cc-red-600);
	--wc-form-border-radius: var(--cc-radius-sm);
	--wc-card-border-radius: var(--cc-radius-md);
}

/* Generic buttons: My Account "Save changes", login/register, cart "Update
   cart"/"Apply coupon", pay-for-order, etc. WooCommerce deliberately scopes
   its own version of these with zero-specificity :where() wrappers so a
   theme's plain selector overrides them without needing !important. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--cc-amber-500);
	color: var(--cc-green-900);
	border-radius: var(--cc-radius-md);
	font-weight: 700;
	padding: 0.75em 1.25em;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--cc-amber-600);
	color: var(--cc-white);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--cc-green-900);
	color: var(--cc-white);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--cc-green-700);
}

/* Notices: validation errors, "message sent", coupon feedback, etc. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--cc-green-800);
	border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
	background-color: var(--cc-cream-100);
	color: var(--cc-ink-900);
}
.woocommerce-error::before { color: var(--cc-red-600); }
.woocommerce-message::before { color: var(--cc-green-success); }
.woocommerce-info::before { color: var(--cc-green-800); }
.woocommerce-error { border-top-color: var(--cc-red-600); }

/* Stock / availability status text (in stock, out of stock, on backorder). */
.stock { font-weight: 700; }
.out-of-stock { color: var(--cc-red-600) !important; }
.available-on-backorder,
.on-backorder { color: var(--cc-amber-700) !important; }
p.in-stock, .stock.in-stock { color: var(--cc-green-success) !important; }

/* Login / register / coupon boxes. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	border-color: var(--cc-cream-200);
	border-radius: var(--cc-radius-lg);
	background: var(--cc-cream-50);
}
.woocommerce form .form-row label { color: var(--cc-green-900); font-weight: 600; }
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form textarea,
.woocommerce form select {
	border: 1px solid var(--cc-cream-200);
	border-radius: var(--cc-radius-sm);
	padding: 0.65em 0.85em;
}
.woocommerce form .input-text:focus,
.woocommerce form input:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
	outline: none;
	border-color: var(--cc-amber-500);
	box-shadow: 0 0 0 3px var(--cc-amber-100);
}

/* My Account: navigation, headings, tables. */
.woocommerce-account-wrap {
	max-width: var(--cc-container);
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem) var(--cc-gutter);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--cc-cream-200);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.85em 0.25em;
	font-weight: 600;
	color: var(--cc-ink-700);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--cc-green-900);
	border-left: 3px solid var(--cc-amber-500);
	padding-left: 0.75em;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--cc-amber-700); }
.woocommerce-MyAccount-content mark { background: var(--cc-amber-100); color: var(--cc-green-900); padding: 0 0.2em; }

.woocommerce table.shop_table,
.woocommerce-account table.shop_table {
	border-color: var(--cc-cream-200);
	border-radius: var(--cc-radius-md);
}
.woocommerce table.shop_table th {
	background: var(--cc-cream-100);
	color: var(--cc-green-900);
	font-weight: 700;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--cc-cream-200);
}
.woocommerce-orders-table__cell-order-status.status-completed,
.woocommerce span.order-status.status-completed { color: var(--cc-green-success); font-weight: 700; }
.woocommerce span.order-status.status-on-hold,
.woocommerce span.order-status.status-pending { color: var(--cc-amber-700); font-weight: 700; }

/* Star ratings — gold stays gold (it's a universal review convention, not a
   brand colour) but the "rate it" prompt link should match the brand. */
.woocommerce-product-rating .woocommerce-review-link,
#review_form-wrapper a { color: var(--cc-green-700); }

/* Full-width reviews carousel embedded on a product landing page
   (see cosycalf_embed_reviews()) — a horizontal scroll-snap row of quote
   cards, the pattern most ecommerce sites use for a handful of reviews
   rather than a long stacked comment list. */
.reviews-band {
	background: var(--cc-green-100);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.reviews-band__inner {
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}
.reviews-band__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}
.reviews-band__header h2 { margin-bottom: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.reviews-nav { display: flex; gap: 0.6rem; flex-shrink: 0; }
.reviews-nav__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--cc-green-700);
	background: var(--cc-cream-50);
	color: var(--cc-green-900);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s var(--cc-ease), color 0.15s var(--cc-ease);
}
.reviews-nav__btn:hover { background: var(--cc-green-900); color: var(--cc-white); }
.reviews-nav__btn:disabled { opacity: 0.35; cursor: default; background: var(--cc-cream-50); color: var(--cc-green-900); }

.reviews-track {
	display: grid;
	grid-auto-flow: column;
	/* A fixed width (not minmax) — in a scrollable, overflowing auto-flow
	   grid there's no "leftover space" for minmax to stretch into, so it
	   would otherwise just collapse to its minimum regardless of the
	   container's width. Sized so 3 cards fill the container with a
	   deliberate peek of the 4th, hinting there's more to scroll to. */
	grid-auto-columns: 340px;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	margin: 0 calc(var(--cc-gutter) * -1);
	padding-inline: var(--cc-gutter);
	scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
	scroll-snap-align: start;
	background: var(--cc-white);
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--cc-shadow-sm);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
}
.review-card__stars { color: var(--cc-amber-500); letter-spacing: 0.15em; margin-bottom: 0.5rem; font-size: 0.9rem; }
.review-card__quote {
	font-family: var(--cc-font-display);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--cc-amber-500);
	margin-bottom: 0.25rem;
}
.review-card__text { color: var(--cc-ink-700); flex: 1; margin-bottom: 1rem; }
.review-card__author { font-weight: 700; color: var(--cc-green-900); margin: 0; }
.review-card__subtitle { font-size: 0.85rem; color: var(--cc-ink-500); margin: 0.15rem 0 0; }
.reviews-band__footer { text-align: center; margin-top: 2rem; }

@media (max-width: 640px) {
	.reviews-band__header { flex-direction: column; align-items: flex-start; }
	.reviews-track { grid-auto-columns: 85vw; }
}

/* ==========================================================================
   Order received / thank-you page (classic [woocommerce_checkout] endpoint)
   page-checkout.php wraps content in <main class="site-main">, not
   .woocommerce-main, so none of the shared container rules reached this page.
   Scoped to > .woocommerce so the block cart/checkout (no wrapper div) is
   unaffected.
   ========================================================================== */
.site-main > .woocommerce {
	max-width: var(--cc-container);
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem) var(--cc-gutter);
	box-sizing: border-box;
}
.woocommerce-order,
.wp-block-woocommerce-order-confirmation-status,
.wp-block-woocommerce-order-confirmation-summary {
	max-width: 100%;
}

/* "Thank you. Your order has been received." banner */
.woocommerce-thankyou-order-received {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	background: var(--cc-cream-100);
	border-left: 4px solid var(--cc-green-success);
	border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0;
	color: var(--cc-green-900);
	font-weight: 700;
	font-size: 1.15rem;
}

/* Order number / date / email / total / payment method strip */
ul.woocommerce-order-overview,
ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	margin: 0 0 2.25rem;
	padding: 1.25rem 1.5rem;
	list-style: none;
	background: var(--cc-white);
	border: 1px solid var(--cc-cream-200);
	border-radius: var(--cc-radius-md);
}
ul.woocommerce-order-overview li,
ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cc-ink-500);
}
ul.woocommerce-order-overview li strong,
ul.order_details li strong {
	display: block;
	margin-top: 0.25em;
	font-size: 1.05rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cc-green-900);
}

/* Section headings: Order details, Billing/Shipping address, bank details */
.woocommerce-order h2,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order .wc-bacs-bank-details-heading {
	margin: 2.25rem 0 1rem;
	font-size: clamp(1.35rem, 2.5vw, 1.7rem);
	color: var(--cc-green-900);
}
.woocommerce-order h3.wc-bacs-bank-details-account-name {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	color: var(--cc-green-800);
}

/* Order details table: keep it inside the container and readable */
.woocommerce-order table.shop_table,
.woocommerce-order table.woocommerce-table--order-details {
	width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--cc-cream-200);
	border-radius: var(--cc-radius-md);
	overflow: hidden;
	background: var(--cc-white);
}
.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	vertical-align: top;
}
.woocommerce-order table.shop_table tfoot th { background: var(--cc-cream-100); }
.woocommerce-order table.shop_table td:last-child,
.woocommerce-order table.shop_table tfoot td { text-align: right; }

/* Billing / shipping address cards, side by side */
.woocommerce-order .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
}
.woocommerce-order .woocommerce-columns--addresses::before,
.woocommerce-order .woocommerce-columns--addresses::after { content: none; }
.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
	float: none;
	width: auto;
	max-width: none;
}
.woocommerce-order address {
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var(--cc-white);
	border: 1px solid var(--cc-cream-200);
	border-radius: var(--cc-radius-md);
	font-style: normal;
	line-height: 1.7;
	overflow-wrap: anywhere;
}
@media (max-width: 700px) {
	.woocommerce-order .woocommerce-columns--addresses { grid-template-columns: 1fr; }
	.woocommerce-order table.shop_table th,
	.woocommerce-order table.shop_table td { padding: 0.7rem 0.8rem; }
}