/* =========================================================================
   skin.lk — WooCommerce overrides

   Woo ships its own stylesheet; this file bends its components onto the
   theme's tokens (2px ink borders, hard shadows, pill buttons).
   ========================================================================= */

/* ---------- Collection banner ------------------------------------------- */

.collection-hero {
	padding-block: 3.2rem;
}

.collection-hero__title { margin-bottom: 0.8rem; }

.collection-hero__description {
	max-width: 68ch;
	font-size: 1.6rem;
}

.breadcrumb {
	margin-bottom: 1.2rem;
	font-size: 1.35rem;
	opacity: 0.8;
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb__sep { margin-inline: 0.6rem; opacity: 0.5; }

/* ---------- Collection layout ------------------------------------------- */

.collection {
	padding-block: 2.4rem 4rem;
}

.collection--with-sidebar {
	display: grid;
	gap: 3.2rem;
	grid-template-columns: 1fr;
}

@media screen and (min-width: 990px) {
	.collection--with-sidebar {
		grid-template-columns: 26rem 1fr;
	}
}

.collection__filters .widget {
	margin-bottom: 2.4rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.2);
}

.collection__filters .widget:last-child { border-bottom: 0; }

.widget__title {
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1.2rem;
}

.collection__filters ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
	font-size: 1.5rem;
}

.collection__filters ul a { text-decoration: none; }
.collection__filters ul a:hover { text-decoration: underline; }

.collection__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	margin-bottom: 2rem;
	font-size: 1.45rem;
}

.woocommerce-result-count { margin: 0; }

.woocommerce-ordering select {
	min-height: 4rem;
	padding-block: 0.6rem;
}

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

.woocommerce ul.products,
ul.product-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Woo's own float-based columns must not fight the CSS grid. */
.woocommerce ul.products li.product,
ul.product-grid li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

/* Woo's clearfix pseudo-elements become stray grid items and push the first
   card out of column one, so they have to go. */
.woocommerce ul.products li.product::before,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

.card--product .price {
	font-size: 1.6rem;
	font-weight: 700;
}

.card--product .price del {
	opacity: 0.55;
	font-weight: 500;
	margin-right: 0.6rem;
}

.card--product .price ins {
	text-decoration: none;
}

.card__rating .star-rating {
	font-size: 1.2rem;
	margin: 0;
}

/* Loop add-to-cart button */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 4.2rem;
	padding: 0.9rem 2rem;
	font-family: var(--font-body);
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-button-text);
	background-color: var(--color-button);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--buttons-radius);
	box-shadow: var(--shadow-button);
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: var(--color-button-text);
	background-color: var(--color-button);
	transform: translateY(-2px);
	box-shadow: 0 4px 0 0 var(--color-shadow);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 0 var(--color-shadow);
}

/* "Add to cart" and the "View cart" link WooCommerce appends after an AJAX add
   share a single row. Before the add there is one full-width button; after it
   the two split the row. Nothing is reserved and nothing moves vertically, so
   cards stay in line with their neighbours either way. */
.card__actions {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
}

.card__actions > .button,
.card__actions > .add_to_cart_button,
.card__actions > .added_to_cart {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

/* The "View cart" link, as a secondary pill matching the primary button. */
.card__actions .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 4.2rem;
	padding: 0.9rem 1.2rem;
	font-family: var(--font-body);
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-secondary-button-text);
	background-color: transparent;
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--buttons-radius);
	box-shadow: var(--shadow-button);
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card__actions .added_to_cart:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 0 0 var(--color-shadow);
}

.card__actions .added_to_cart:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 0 var(--color-shadow);
}

/* Two pills in one row need tighter type to stay on one line. */
.card__actions:has(.added_to_cart) > .button,
.card__actions:has(.added_to_cart) > .added_to_cart {
	padding-inline: 0.8rem;
	font-size: 1.3rem;
}

.woocommerce .button.loading::after {
	border-radius: 50%;
}

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

.woocommerce div.product {
	padding-block: 3.2rem 4rem;
}

@media screen and (min-width: 990px) {
	.woocommerce div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}

	/*
	 * The selector matches WooCommerce's own
	 * `.woocommerce div.product div.images.woocommerce-product-gallery{position:relative}`
	 * — written any lighter, our declarations lose silently while the ones
	 * WooCommerce doesn't set still apply, which is how a stray `top` offset
	 * once shifted the gallery over the tabs.
	 *
	 * Deliberately NOT sticky: a sticky grid item is not confined to its own
	 * row, so it scrolls on down over the tabs and related products. The
	 * pattern only pays off when the summary column is taller than the gallery,
	 * which it isn't here, so it is not worth the breakage.
	 */
	.woocommerce div.product div.images.woocommerce-product-gallery {
		float: none;
		width: 100%;
		margin: 0;
		grid-column: 1;
		align-self: start;
		position: relative;
		top: auto;
	}

	/* Matches WooCommerce's own `div.product div.summary` specificity, which
	   sets `float: right; width: 48%` — see the gallery note above. */
	.woocommerce div.product div.summary {
		float: none;
		width: 100%;
		margin: 0;
		grid-column: 2;
	}

	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells,
	.woocommerce div.product > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--media-radius);
	box-shadow: var(--shadow-media);
	overflow: hidden;
}

.woocommerce div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.8rem;
	margin-top: 1.2rem;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .flex-control-thumbs img {
	border: var(--border-width) solid var(--color-foreground);
	border-radius: 0.8rem;
	opacity: 0.7;
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
	opacity: 1;
}

.product__vendor {
	margin: 0 0 0.6rem;
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.product__vendor a { text-decoration: none; }

.woocommerce div.product .product_title {
	font-family: var(--font-heading);
	font-size: clamp(2.6rem, 2.4vw + 1rem, 3.8rem);
	margin-bottom: 1.2rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-foreground);
	margin-bottom: 1.6rem;
}

.woocommerce div.product p.price del { opacity: 0.55; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	margin-block: 2rem;
}

.woocommerce div.product form.cart .button {
	flex: 1 1 20rem;
	min-height: 5rem;
	font-size: 1.6rem;
}

.woocommerce .quantity .qty {
	width: 8rem;
	min-height: 5rem;
	text-align: center;
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--inputs-radius);
	box-shadow: var(--shadow-input);
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 0;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding-block: 0.6rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: var(--border-width) solid var(--color-foreground);
	border-radius: 999px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--color-button);
	box-shadow: var(--shadow-button);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.8rem 1.8rem;
	font-weight: 600;
	color: var(--color-foreground);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin-bottom: 3.2rem;
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-size: clamp(2.2rem, 2vw + 1rem, 3rem);
	margin-bottom: 2rem;
}

.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap-y-mobile) var(--grid-gap-x-mobile);
}

@media screen and (min-width: 750px) {
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--grid-gap-y) var(--grid-gap-x);
	}
}

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

.woocommerce table.shop_table {
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-top: 1px solid rgba(var(--color-foreground-rgb), 0.15);
	padding: 1.2rem;
}

.woocommerce table.shop_table thead th {
	border-top: 0;
	font-family: var(--font-heading);
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.woocommerce-cart table.cart img {
	width: 7rem;
	border: var(--border-width) solid var(--color-foreground);
	border-radius: 0.8rem;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: 0;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: 2rem;
}

.woocommerce form .form-row {
	padding: 0;
	margin-bottom: 1.4rem;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1.4rem;
	font-weight: 600;
}

/* The account content area is deliberately not a card — the dashboard builds
   its own cards inside it, and nesting them reads as a box in a box. */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	background-color: var(--color-background);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
	padding: 1.6rem;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
	list-style: none;
}

.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before {
	content: none;
}

.woocommerce .woocommerce-message { border-color: #2f7d32; }
.woocommerce .woocommerce-error { border-color: #b3261e; }

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

/* Woo floats the nav and content; the tab layout stacks them full width. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* ---- Tab bar ---- */

.account-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	margin-bottom: 2.8rem;
	padding-bottom: 1.2rem;
	border-bottom: var(--border-width) solid var(--color-foreground);
}

.account-tabs__identity {
	display: flex;
	align-items: center;
	gap: 1rem;
	order: 2;
}

.account-tabs__avatar {
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	border: var(--border-width) solid var(--color-foreground);
}

.account-tabs__identity-text {
	display: grid;
	min-width: 0;
}

.account-tabs__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
}

.account-tabs__email {
	font-size: 1.3rem;
	opacity: 0.7;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	order: 1;
	/* Scroll rather than wrap on narrow screens, like a real tab strip. */
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.woocommerce-account .account-tabs__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.9rem 1.6rem;
	white-space: nowrap;
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--color-foreground);
	text-decoration: none;
	border: var(--border-width) solid transparent;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.woocommerce-account .account-tabs__list a:hover {
	background-color: rgba(var(--color-foreground-rgb), 0.07);
}

.account-tabs__icon { flex: none; opacity: 0.75; }

.woocommerce-account .account-tabs__list li.is-active a {
	background-color: var(--color-button);
	color: var(--color-button-text);
	border-color: var(--color-foreground);
	box-shadow: var(--shadow-button);
}

.woocommerce-account .account-tabs__list li.is-active .account-tabs__icon {
	opacity: 1;
}

@media screen and (max-width: 749px) {
	.account-tabs { gap: 1.2rem; }
	.account-tabs__identity { order: 1; }
	.account-tabs__list { order: 2; width: 100%; }
}

/* ---- Dashboard ---- */

.account-dashboard__header { margin-bottom: 2rem; }

.account-dashboard__greeting {
	margin-bottom: 0.4rem;
	font-size: clamp(2.2rem, 2vw + 1rem, 3rem);
}

.account-dashboard__subtitle {
	margin: 0;
	opacity: 0.75;
}

.account-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.2rem;
	margin: 0 0 2.8rem;
	padding: 0;
	list-style: none;
}

.account-stat {
	display: grid;
	gap: 0.4rem;
	padding: 1.6rem;
	background-color: var(--color-background);
	background-image: linear-gradient(
		rgba(var(--color-foreground-rgb), 0.04),
		rgba(var(--color-foreground-rgb), 0.04)
	);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
}

.account-stat__value {
	font-family: var(--font-heading);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.1;
}

.account-stat__value .amount { font-size: inherit; }

.account-stat__of {
	font-size: 1.6rem;
	opacity: 0.5;
}

.account-stat__label {
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
}

.account-section { margin-bottom: 3.2rem; }

.account-section__title {
	font-size: 1.9rem;
	margin-bottom: 1.4rem;
}

.account-orders {
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	background-color: var(--color-background);
}

.account-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 1.6rem;
	padding: 1.3rem 1.6rem;
	border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.15);
}

.account-order:last-child { border-bottom: 0; }

.account-order__main { display: grid; gap: 0.2rem; }

.account-order__number {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.55rem;
	text-decoration: none;
}

.account-order__number:hover { text-decoration: underline; }

.account-order__date {
	font-size: 1.3rem;
	opacity: 0.7;
}

.account-order__meta {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-size: 1.4rem;
}

.order-status {
	display: inline-flex;
	padding: 0.3rem 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	border: var(--border-width) solid var(--color-foreground);
	border-radius: 999px;
	background-color: var(--color-background);
}

.order-status--processing,
.order-status--on-hold { background-color: #f9e547; }
.order-status--completed { background-color: #bcd7de; }
.order-status--cancelled,
.order-status--failed,
.order-status--refunded { background-color: #fdcbcc; }

.account-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-action {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	height: 100%;
	padding: 1.6rem;
	text-decoration: none;
	color: var(--color-foreground);
	background-color: var(--color-background);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.account-action:hover {
	transform: translate(-2px, -4px);
	box-shadow: 2px 8px 0 0 var(--color-shadow);
}

.account-action__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 4.2rem;
	height: 4.2rem;
	background-color: var(--color-button);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: 50%;
	color: var(--color-button-text);
}

.account-action__body { display: grid; gap: 0.3rem; }

.account-action__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.6rem;
}

.account-action__text {
	font-size: 1.4rem;
	opacity: 0.78;
}

.account-empty {
	display: grid;
	gap: 1.4rem;
	justify-items: start;
	padding: 2.4rem;
	background-color: var(--color-background);
	border: var(--border-width) dashed rgba(var(--color-foreground-rgb), 0.4);
	border-radius: var(--card-radius);
}

.account-empty p { margin: 0; }

.account-dashboard__logout {
	font-size: 1.4rem;
	opacity: 0.8;
}

/* Woo's own account tables (orders, downloads, addresses). */
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child {
	margin-top: 0;
}

.woocommerce-account .woocommerce-Address {
	margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
}

/* -------------------------------------------------------------------------
 * Reviews
 * ---------------------------------------------------------------------- */

/* Full tab-panel width so the card borders line up with the product grid, the
   tab strip and the description panel. Readability is handled by capping the
   inner content instead, not by narrowing the boxes. */
.reviews {
	display: grid;
	gap: 3.2rem;
}

/* ---- Star display ---- */

.stars-svg {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
	vertical-align: middle;
}

.stars-svg__track,
.stars-svg__fill {
	display: block;
	line-height: 0;
	white-space: nowrap;
}

.stars-svg__track { color: rgba(var(--color-foreground-rgb), 0.22); }

.stars-svg__fill {
	position: absolute;
	inset-block: 0;
	left: 0;
	overflow: hidden;
	color: #f0a500;
}

.stars-svg svg { display: inline-block; }

/* ---- Summary panel ---- */

.reviews__summary {
	display: grid;
	gap: 2.4rem;
	align-items: center;
	padding: 2.4rem;
	background-color: var(--color-background);
	background-image: linear-gradient(
		rgba(var(--color-foreground-rgb), 0.04),
		rgba(var(--color-foreground-rgb), 0.04)
	);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
}

@media screen and (min-width: 700px) {
	.reviews__summary {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		gap: 3.2rem;
	}
}

.reviews__score {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	text-align: center;
}

.reviews__score-value {
	font-family: var(--font-heading);
	font-size: 4.8rem;
	font-weight: 800;
	line-height: 1;
}

.reviews__score-out {
	margin-top: -0.8rem;
	font-size: 1.4rem;
	opacity: 0.6;
}

.reviews__score-count {
	font-size: 1.35rem;
	opacity: 0.75;
}

.reviews__breakdown {
	display: grid;
	gap: 0.5rem;
	/* The panel spans the full width for border alignment; the bars themselves
	   stop before they become an unreadable stretch of colour. */
	max-width: 46rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reviews__breakdown-row {
	display: grid;
	grid-template-columns: 3.4rem 1fr 2.6rem;
	align-items: center;
	gap: 1rem;
	font-size: 1.35rem;
}

.reviews__breakdown-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	justify-content: flex-end;
	font-weight: 600;
}

.reviews__breakdown-label svg { color: #f0a500; }

.reviews__breakdown-bar {
	position: relative;
	height: 0.9rem;
	background-color: rgba(var(--color-foreground-rgb), 0.12);
	border-radius: 999px;
	overflow: hidden;
}

.reviews__breakdown-fill {
	position: absolute;
	inset-block: 0;
	left: 0;
	background-color: #f0a500;
	border-radius: 999px;
}

.reviews__breakdown-count {
	text-align: right;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* ---- Review list ---- */

.reviews__title {
	font-size: clamp(2rem, 1.6vw + 1rem, 2.6rem);
	margin-bottom: 2rem;
}

.woocommerce #reviews .commentlist,
.reviews__list {
	display: grid;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * These selectors deliberately carry WooCommerce's own `#reviews #comments`
 * prefix. Its review rules are written with TWO ids, so anything lighter loses
 * — which is what left the avatar absolutely positioned outside the card and
 * kept the grey 1px border around `.comment-text` inside it.
 */
.woocommerce #reviews #comments ol.commentlist li {
	margin: 0;
	padding: 0;
	position: static;
}

/* The whole review is one card, avatar included. */
.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	align-items: flex-start;
	gap: 1.4rem;
	margin: 0;
	padding: 1.8rem;
	background-color: var(--color-background);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
}

/* Strip WooCommerce's inner frame — the card above provides it. */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.review-card__avatar { flex: none; }

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: none;
	width: 5.2rem;
	height: 5.2rem;
	margin: 0;
	padding: 0;
	background: none;
	border: var(--border-width) solid var(--color-foreground);
	border-radius: 50%;
	box-shadow: none;
}

.review-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.2rem;
	margin-bottom: 0.8rem;
}

.review-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	font-size: 1.35rem;
}

.review-card__author {
	font-family: var(--font-heading);
	font-size: 1.55rem;
	font-weight: 700;
}

.review-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.8rem;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.5;
	color: #1c6b2e;
	background-color: rgba(28, 107, 46, 0.12);
	border-radius: 999px;
}

.review-card__date { opacity: 0.65; }

.review-card__text {
	/* Keep the measure readable even though the card runs the full width. */
	max-width: 78ch;
}

.review-card__text p { margin-bottom: 0.8rem; }
.review-card__text > :last-child { margin-bottom: 0; }

.review-card__pending {
	margin-bottom: 0.6rem;
	font-size: 1.35rem;
	opacity: 0.8;
}

.reviews__empty {
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding: 2.8rem 2rem;
	text-align: center;
	border: var(--border-width) dashed rgba(var(--color-foreground-rgb), 0.35);
	border-radius: var(--card-radius);
}

.reviews__empty p { margin: 0; opacity: 0.8; }

/* ---- Review form ---- */

.reviews__form-wrap {
	padding: 2.4rem;
	background-color: var(--color-background);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
}

.woocommerce #review_form #respond .comment-reply-title,
#review_form .comment-reply-title {
	display: block;
	margin-bottom: 1.6rem;
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 700;
}

.woocommerce #review_form #respond form,
#review_form form {
	display: grid;
	gap: 1.4rem;
	/* Card runs full width for border alignment; the fields stay a sane size. */
	max-width: 62rem;
}

.woocommerce #review_form #respond p { margin: 0; }

.woocommerce #review_form #respond label,
#review_form label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1.4rem;
	font-weight: 600;
}

@media screen and (min-width: 600px) {
	.comment-form-author,
	.comment-form-email {
		display: inline-block;
		width: calc(50% - 0.7rem);
	}

	.comment-form-author { margin-right: 1.2rem !important; }
}

/* The interactive star picker WooCommerce builds from the rating <select>. */
.woocommerce #review_form #respond p.stars {
	margin: 0 0 0.4rem;
}

/* WooCommerce draws these with its own icon font and already handles the
   empty/filled glyph swap on hover and selection. Recolouring and scaling its
   glyphs is far less brittle than replacing them with a mask, which would need
   every one of its `content` rules overridden to stay consistent. */
.woocommerce p.stars a {
	margin-right: 0.3rem;
	font-size: 2.4rem;
	color: rgba(var(--color-foreground-rgb), 0.28);
	transition: color 0.12s ease, transform 0.12s ease;
}

.woocommerce p.stars a:hover,
.woocommerce p.stars:hover a,
.woocommerce p.stars.selected a.active,
.woocommerce p.stars.selected a:not(.active) {
	color: #f0a500;
}

/* Dim the stars past the hovered / selected one. */
.woocommerce p.stars a:hover ~ a,
.woocommerce p.stars.selected a.active ~ a {
	color: rgba(var(--color-foreground-rgb), 0.28);
}

.woocommerce p.stars a:hover { transform: scale(1.12); }

.comment-form-rating label { margin-bottom: 0.6rem; }

.woocommerce #review_form #respond .form-submit input#submit {
	justify-self: start;
}

/* -------------------------------------------------------------------------
 * Block Cart & Checkout
 *
 * WooCommerce 8+ installs ship block-based cart and checkout pages rather than
 * the classic shortcodes, so those blocks need their own mapping onto the
 * theme tokens. The classic rules above still apply if the store is switched
 * back to the shortcode pages.
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	padding-block: 2.4rem 4rem;
}

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-family: var(--font-heading);
	color: var(--color-foreground);
}

.wc-block-cart-items {
	border-collapse: separate;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.18);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border: var(--border-width) solid var(--color-foreground);
	border-radius: 0.8rem;
}

.wc-block-components-product-name {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-foreground);
	text-decoration: none;
}

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-order-summary {
	padding: 1.8rem;
	background-color: var(--color-background);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
}

/* Buttons: proceed to checkout, place order, apply coupon. */
.wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 4.6rem;
	padding: 1rem 2.4rem;
	font-family: var(--font-body);
	font-size: 1.55rem;
	font-weight: 600;
	color: var(--color-button-text);
	background-color: var(--color-button);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--buttons-radius);
	box-shadow: var(--shadow-button);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wc-block-components-button:not(.is-link):hover {
	color: var(--color-button-text);
	background-color: var(--color-button);
	transform: translateY(-2px);
	box-shadow: 0 4px 0 0 var(--color-shadow);
}

.wc-block-components-button:not(.is-link):active {
	transform: translateY(2px);
	box-shadow: 0 0 0 0 var(--color-shadow);
}

.wc-block-components-button:not(.is-link)::after {
	border-radius: var(--buttons-radius);
}

/* Text inputs inside the blocks. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox input,
.wc-block-components-textarea {
	min-height: 4.6rem;
	color: var(--color-foreground);
	background-color: var(--color-background);
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--inputs-radius);
	box-shadow: var(--shadow-input);
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__description {
	color: var(--color-foreground);
	opacity: 0.85;
}

.wc-block-components-quantity-selector {
	border: var(--border-width) solid var(--color-foreground);
	border-radius: var(--inputs-radius);
	overflow: hidden;
}

.wc-block-components-quantity-selector::after { content: none; }

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
	color: var(--color-foreground);
}

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

.wc-block-cart__empty-cart__title {
	font-family: var(--font-heading);
}

/* Woo's star rating font is loaded by its own stylesheet; keep the colour. */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--color-foreground);
}

/* Price on scheme-4 sections must not inherit Woo's default green. */
.woocommerce span.onsale {
	display: none; /* Replaced by .card__badges. */
}

.woocommerce .price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: inherit;
}