/*
 * Aspire Shop — WooCommerce surfaces.
 * Loaded only when WooCommerce is active. Tokens only, no raw hex.
 */

.woocommerce .site-main--shop { padding-block: var(--sp-6) var(--sp-8); }

/* --- Breadcrumb -------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--sp-4);
	color: var(--c-muted);
	font-size: var(--fs-sm);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--c-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--c-accent-dark); }

.woocommerce-products-header__title { margin-bottom: var(--sp-4); }

/* --- Notices ----------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-bottom: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	border-bottom-left-radius: 0;
	background: var(--c-surface-alt);
	color: var(--c-body);
	font-size: var(--fs-sm);
	list-style: none;
}

/*
 * Woo's icon-font glyph is dropped rather than positioned. It is absolutely placed and
 * needs a fixed 3.5em text indent reserved for it, which fights any padding of our own —
 * and it says nothing the message doesn't already say.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { color: var(--c-accent-dark); }

/* Errors are the one case worth colouring — everything else stays neutral. */
.woocommerce-error {
	border-color: var(--c-error);
	background: color-mix(in srgb, var(--c-error) 7%, var(--c-surface));
	color: var(--c-ink);
}

/* --- Catalogue toolbar ------------------------------------------------- */

.woocommerce-result-count,
.woocommerce-ordering { margin-bottom: var(--sp-5); }

@media (min-width: 768px) {
	.woocommerce-products-header + .woocommerce-notices-wrapper + .woocommerce-result-count,
	.woocommerce-result-count { float: left; }
	.woocommerce-ordering { float: right; }
	.woocommerce-ordering select { width: auto; }
	.products { clear: both; }
}

/* --- Product grid ------------------------------------------------------ */

/* Woo's clearfix pseudo-elements would become grid items and shift the whole grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

	/* Honour the column count a loop asks for — landing-page rows run 4-up. */
	.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
	.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
}

/*
 * Woo sizes items with `ul.products.columns-N li.product`, which outranks a plain
 * descendant selector — the [class*="columns-"] hook matches that specificity so the
 * grid controls widths instead of Woo's float percentages.
 */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce ul.products[class*="columns-"] li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	clear: none;
	margin: 0;
	width: auto;
	text-align: left;
}
.woocommerce ul.products li.product a img {
	width: 100%;
	margin-bottom: var(--sp-3);
	border-radius: var(--radius);
	border-bottom-left-radius: 0;
	background: var(--c-surface-alt);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
}
.woocommerce ul.products li.product .price {
	display: block;
	margin-bottom: var(--sp-3);
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	font-size: var(--fs-base);
}
/* Ex VAT sits inline with the price; inc VAT drops onto its own line beneath. */
.price-ex { display: block; }
.price-inc {
	display: block;
	margin-top: 2px;
	color: var(--c-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
}
.price-vat {
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	color: var(--c-muted);
	text-transform: none;
}
.price-inc .price-vat { font-size: inherit; }

.woocommerce ul.products li.product .price del { color: var(--c-muted); font-weight: var(--fw-regular); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
/* Sits at the foot of the card, sized to its label rather than the full column. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
	width: auto;
}

.woocommerce span.onsale {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 2;
	min-height: 0;
	min-width: 0;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: #fff;
	font-size: var(--fs-xs);
	line-height: 1.6;
}

/* --- Single product ---------------------------------------------------- */

.woocommerce div.product { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .up-sells { grid-column: 1 / -1; }
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary { float: none; width: auto; margin: 0; }
.woocommerce div.product div.images img { border-radius: var(--radius); border-bottom-left-radius: 0; }
.woocommerce div.product .product_title { margin-bottom: var(--sp-3); }
.woocommerce div.product p.price { font-size: var(--fs-xl); color: var(--c-ink); font-weight: var(--fw-bold); }
.woocommerce div.product form.cart { margin-block: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.woocommerce div.product form.cart .quantity input { width: 5rem; }
.woocommerce .product_meta { font-size: var(--fs-sm); color: var(--c-muted); }

/* --- Block cart / checkout ---------------------------------------------- */

/*
 * The block cart, checkout and account pages render through page.php, not the shop
 * wrapper, so they get their spacing and their product cards from here.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { max-width: none; }

.wc-block-components-notice-banner {
	border-radius: var(--radius);
	border-bottom-left-radius: 0;
}

/* Block buttons ship with their own dark skin — bring them onto the brand. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	border-radius: var(--radius-control);
	border-bottom-left-radius: 0;
	background: var(--c-accent);
	color: #fff;
	font-weight: var(--fw-medium);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--c-accent-dark); }

/*
 * Place order sits inline at the end of the checkout rather than spanning the column.
 * Woo sets its width in its own stylesheet, so the width reset is stated explicitly.
 */
.wc-block-checkout__actions_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.wc-block-components-checkout-place-order-button {
	flex: 0 0 auto;
	padding: var(--sp-4) var(--sp-7);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
}

/*
 * Woo sets the width with a three-class selector
 * (.wc-block-checkout__actions .wc-block-checkout__actions_row .…--full-width),
 * so undoing it needs at least that specificity — the page class supplies the extra.
 */
.woocommerce-checkout .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button--full-width {
	width: auto;
}

.wc-block-components-product-name { text-decoration: none; }
.wc-block-components-product-name:hover { text-decoration: underline; }

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-sm);
	border-bottom-left-radius: 0;
}

/* Empty-cart state — Woo centres a frowning face and an unstyled product grid. */
.wc-block-cart__empty-cart__title {
	margin-bottom: var(--sp-3);
	font-family: var(--font-head);
	font-size: var(--fs-2xl);
	color: var(--c-ink);
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { opacity: 0.35; }

.wp-block-woocommerce-empty-cart-block > h2 {
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-5);
	font-size: var(--fs-xl);
	text-align: left;
}

/*
 * Left to Woo's own block grid. It uses its own flex layout with per-item sizing, and
 * overriding it with a CSS grid detaches the images from their intended dimensions —
 * the cure was worse than the disease. Only the link styling is corrected here.
 */
.wc-block-grid__product-link,
.wc-block-grid__product-title { text-decoration: none; }

/* --- Account ------------------------------------------------------------- */

@media (min-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: 22%;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 74%;
	}
	.woocommerce-account .woocommerce {
		display: flex;
		gap: var(--sp-6);
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius);
	border-bottom-left-radius: 0;
	color: var(--c-ink);
	text-decoration: none;
	font-weight: var(--fw-medium);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-surface-alt);
	color: var(--c-accent-dark);
}

/* --- Related products --------------------------------------------------- */

/*
 * Sits on the tinted section colour as a rounded panel rather than a full-bleed band —
 * it lives inside the page container, and breaking out with viewport units is what
 * usually introduces a horizontal scrollbar on mobile.
 */
.woocommerce div.product .related,
.woocommerce div.product .up-sells {
	margin-top: var(--sp-7);
	padding: var(--sp-6);
	background: var(--c-surface-alt);
	border-radius: var(--radius-lg);
	border-bottom-left-radius: 0;
}

.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 {
	margin-bottom: var(--sp-6);
}

@media (min-width: 768px) {
	.woocommerce div.product .related,
	.woocommerce div.product .up-sells { padding: var(--sp-7); }
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-5);
	padding: 0 0 var(--sp-2);
	border-bottom: 1px solid var(--c-line);
	list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	color: var(--c-muted);
	font-weight: var(--fw-medium);
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--c-ink); }

/* --- Cart / checkout / account ----------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--sp-3);
	border-bottom: 1px solid var(--c-line);
}
.woocommerce table.shop_table th { color: var(--c-ink); text-align: left; }

.woocommerce .cart-collaterals .cart_totals { width: 100%; }
@media (min-width: 1024px) {
	.woocommerce .cart-collaterals .cart_totals { width: 48%; }
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}

.woocommerce-checkout .col2-set { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
	.woocommerce-checkout .col2-set { grid-template-columns: repeat(2, 1fr); }
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { float: none; width: auto; }
}
.woocommerce form .form-row { display: block; padding: 0; margin-bottom: var(--sp-4); }
.woocommerce form .form-row label { display: block; margin-bottom: var(--sp-2); color: var(--c-ink); }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: var(--sp-2); }

/* Woo's default button skin → theme button. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--radius-control);
	/*
	 * Re-stated because this shorthand resets all four corners — without it the
	 * bottom-left cut set on .button in base.css is wiped for every Woo button.
	 */
	border-bottom-left-radius: 0;
	background: var(--c-accent);
	color: #fff;
	font-weight: var(--fw-medium);
	line-height: 1.2;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--c-accent-dark); color: #fff; }

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--c-brand); }
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--c-brand-dark); }