/* ==========================================================================
   WooCommerce overrides — expanded during Shop/PDP/Cart/Checkout phases.
   ========================================================================== */

/* ---- Notices (info / success / error banners) ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews,
ul.woocommerce-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	list-style: none;
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-navy);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin: 0 0 var(--space-6);
	color: var(--color-text) !important;
	font-size: 0.9rem;
}
.woocommerce-message { border-left-color: var(--color-success, #1B8A4A); }
.woocommerce-error, ul.woocommerce-error { border-left-color: var(--color-red); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } /* Storefront's icon-font glyph */
.woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button {
	background: var(--color-navy);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	padding: 0.6em 1.3em;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	order: 2;
}
.woocommerce-message a.button:hover, .woocommerce-info a.button:hover { background: var(--color-navy-dark); }
.woocommerce-error li { padding: 0; }

/* ---- Breadcrumb ("you are here" trail) ---- */

/* Storefront wraps the breadcrumb in `.storefront-breadcrumb` and gives that
   wrapper `padding: 1.41575em 0; margin: 0 0 3.706325903em`. The wrapper has
   no background of its own, so all that space showed up as a ~90px grey band
   below the breadcrumb and a smaller one above it — every page opened with
   the trust bar, a gap, a floating white strip, another gap, then content.
   The wrapper sits OUTSIDE #content, so it cannot be reached via
   `.site-content`. `body` is prepended purely for specificity: Storefront's
   rule lives in a stylesheet that still loads AFTER this one, so a bare
   single-class selector loses on source order even though it is the child
   theme's. */
body .storefront-breadcrumb {
	padding: 0;
	margin: 0;
}

.woocommerce-breadcrumb {
	/* The breadcrumb is a BAND: it has its own background and a bottom rule,
	   so it has to reach both edges of the viewport or the rule stops in
	   mid-air 40px short. Constraining it to --container-max centred the
	   background as well as the text, which is what made it read as a
	   floating card. Full-bleed the element, then push the text back in with
	   padding so it still lines up with the container content below it. */
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--space-4);
	padding-inline: max(var(--space-4), calc(50vw - var(--container-max) / 2 + var(--space-4)));
	color: var(--color-text-muted);
	font-size: 0.85rem;
	font-weight: 500;
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	letter-spacing: .01em;
}
@media (min-width: 768px) {
	.woocommerce-breadcrumb {
		padding-inline: max(var(--space-8), calc(50vw - var(--container-max) / 2 + var(--space-8)));
	}
}
.woocommerce-breadcrumb a { color: var(--color-navy); font-weight: 600; }
.woocommerce-breadcrumb a:hover { color: var(--color-red); }

/* ---- Category/shop page header band ----
   Storefront's `.storefront-full-width-content .woocommerce-products-header`
   (two-class ancestor selector, specificity 0,2,0) sets
   `padding:0 0 5.9968em` and beats a plain single-class rule here
   regardless of load order — !important is the reliable fix. */
.woocommerce-products-header {
	background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-8) var(--space-4) !important;
	margin-bottom: var(--space-8);
	text-align: center;
}
.woocommerce-products-header__title.page-title { margin-bottom: var(--space-2); }
.term-description { max-width: 60ch; margin: 0 auto; color: var(--color-text-muted); }

/* ---- Result count + sort toolbar ---- */
.apex-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-6);
}
.apex-shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.875rem;
}
.apex-shop-toolbar__right { display: flex; align-items: center; gap: var(--space-4); }
.apex-shop-toolbar .woocommerce-ordering { margin: 0; }
.apex-shop-toolbar select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background: var(--color-bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301204F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.9em center;
	background-size: 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.6em 2.2em 0.6em 1em;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-navy);
	cursor: pointer;
}
.apex-shop-toolbar select.orderby:focus { outline: none; border-color: var(--color-navy); }

/* ---- My Account: login / register / lost password / dashboard ----
   No padding-inline here: `#content > .col-full` (product-gallery.css)
   already puts `!important` horizontal padding on every WooCommerce page.
   Adding a second layer here stacked on top of it — 24px from that rule plus
   another 16px from this one, on every side, at every viewport width. On a
   360-400px phone that is up to 80px (a fifth of the screen) lost before any
   card padding even starts, which is what made every account screen look
   narrower and more inset than the rest of the site. `max-width` +
   `margin-inline: auto` alone still centers this within the shared column. */
.woocommerce-account .entry-header,
.woocommerce-account .page-title { max-width: var(--container-max); margin-inline: auto; }

.woocommerce-account .site-main form.woocommerce-form-login,
.woocommerce-account .site-main form.woocommerce-form-register,
.woocommerce-account .site-main form.woocommerce-ResetPassword,
.woocommerce-account .site-main form.woocommerce-EditAccountForm,
.woocommerce-account .site-main form.woocommerce-address-fields,
.woocommerce-account .site-main form#order_review,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-8);
	max-width: 480px;
}
.woocommerce-account .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); align-items: start; }
.woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-account .col2-set h2 { font-size: 1.3rem; margin-bottom: var(--space-5); }

.woocommerce-account .site-main form p.form-row { margin-bottom: var(--space-5); }
.woocommerce-account .site-main form label { display: block; font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-2); font-size: 0.9rem; }
.woocommerce-account .site-main form .required { color: var(--color-red); text-decoration: none; }
.woocommerce-account .site-main form input.input-text,
.woocommerce-account .site-main form input[type="password"],
.woocommerce-account .site-main form input[type="email"],
.woocommerce-account .site-main form input[type="text"],
.woocommerce-account .site-main form select {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.75em 1em;
	font-size: 0.95rem;
	background: var(--color-white);
}
.woocommerce-account .site-main form input:focus, .woocommerce-account .site-main form select:focus { outline: none; border-color: var(--color-navy); box-shadow: 0 0 0 3px rgba(1,32,79,.08); }
.woocommerce-account .show-password-input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--color-text-muted);
	right: 10px;
}
.woocommerce-account .site-main form .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--color-text); margin-bottom: var(--space-4); }
.woocommerce-account .site-main form button[type="submit"] {
	background: var(--color-red);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-sm);
	padding: 0.8em 1.6em;
	font-weight: 600;
	min-height: 46px;
}
.woocommerce-account .site-main form button[type="submit"]:hover { background: var(--color-red-dark); }
.woocommerce-account .woocommerce-LostPassword { margin-top: var(--space-3); font-size: 0.875rem; }
.woocommerce-account .woocommerce-privacy-policy-text { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* Dashboard / orders / addresses (logged-in area) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	max-width: var(--container-max);
	margin-inline: auto;
}
/* Nav + content are plain siblings inside one shared <div class="woocommerce">
   (not directly adjacent, so `nav + content` never matched anything real —
   target that actual wrapper instead). */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-8);
	max-width: var(--container-max);
	margin-inline: auto;
	/* No padding-inline: same double-padding fix as .page-title above — the
	   outer #content > .col-full already supplies it. This wrapper only
	   needs to centre and set the grid, not add a second gutter on top. */
	align-items: start;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	/* Storefront/WooCommerce's legacy float-column CSS leaves these
	   shrink-to-fit — force them to actually fill their grid track. */
	width: 100% !important;
	float: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--color-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 1.1em 1.4em;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-text);
	border-radius: var(--radius-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--color-navy); color: var(--color-white); }
.woocommerce-account .woocommerce-MyAccount-content { max-width: 100%; }
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.woocommerce-account table.woocommerce-orders-table th { background: var(--color-bg); text-align: left; padding: 0.9em 1em; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-navy); }
.woocommerce-account table.woocommerce-orders-table td { padding: 0.9em 1em; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.woocommerce-account mark.order-status { background: var(--color-bg); color: var(--color-navy); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }
.woocommerce-account .woocommerce-Address { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); background: var(--color-bg-alt); }
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.woocommerce-account .woocommerce-Address-title h2 { font-size: 1.05rem; margin: 0; }

/* ---- My Account: dashboard welcome + quick-link cards ---- */
.apex-dashboard-welcome {
	background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-8);
	margin-bottom: var(--space-6);
}
.apex-dashboard-welcome h2 { color: var(--color-white); margin-bottom: 6px; font-size: 1.4rem; }
.apex-dashboard-welcome p { color: rgba(255,255,255,.75); margin: 0; }
.apex-dashboard-welcome a { color: var(--color-white); text-decoration: underline; }

.apex-dashboard-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}
.apex-dashboard-card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	text-align: center;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.apex-dashboard-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: var(--color-navy); }
.apex-dashboard-card__icon {
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-red);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto var(--space-3);
}
.apex-dashboard-card__icon svg { width: 22px; height: 22px; }
.apex-dashboard-card__value { display: block; font-size: 1.6rem; font-weight: 800; color: var(--color-navy); }
.apex-dashboard-card__value-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--color-red); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.apex-dashboard-card__label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }

/* ==========================================================================
   Single product page — Victorian-style layout: gallery + sticky buy-box
   up top, then a full-width column (tabs, pair-it-with, related,
   recently viewed) that scrolls past the buy-box while it stays pinned.
   ========================================================================== */
.apex-pdp__grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	grid-template-rows: auto auto;
	column-gap: var(--space-10);
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-8) var(--space-4) var(--space-16);
	align-items: start;
}
@media (min-width: 768px) { .apex-pdp__grid { padding-inline: var(--space-8); } }

.apex-pdp__gallery { grid-column: 1; grid-row: 1; }
.apex-pdp__below { grid-column: 1; grid-row: 2; padding-top: var(--space-10); }
.apex-pdp__buybox {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: sticky;
	top: calc(var(--space-4) + 8px);
	align-self: start;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-6);
}
.apex-pdp__buybox .summary { max-width: none; }

/* ---- Delivery / trust block inside the buy box ---- */
.apex-pdp-trust {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.apex-pdp-trust__item { display: flex; align-items: flex-start; gap: var(--space-3); }
.apex-pdp-trust__item .apex-icon { color: var(--color-red); flex-shrink: 0; margin-top: 2px; }
.apex-pdp-trust__item .apex-icon svg { width: 20px; height: 20px; }
.apex-pdp-trust__item strong { display: block; font-size: 0.85rem; color: var(--color-navy); }
.apex-pdp-trust__item span { font-size: 0.8rem; color: var(--color-text-muted); }
.apex-pdp-trust__item span a { color: var(--color-navy); text-decoration: underline; }

/* ---- Section titles used below the fold (Pair It With / Recently Viewed) ---- */
.apex-pdp-section-title { font-size: 1.4rem; margin-bottom: var(--space-2); }
.apex-pdp-section-sub { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.apex-pair-with, .apex-recently-viewed { margin-top: var(--space-12); }

/* ---- Pair It With cards ---- */
.apex-pair-with__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.apex-pair-with__card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.apex-pair-with__card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-navy); }
.apex-pair-with__icon {
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-red);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.apex-pair-with__icon svg { width: 22px; height: 22px; }
.apex-pair-with__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.apex-pair-with__info strong { font-size: 0.9rem; color: var(--color-navy); }
.apex-pair-with__price { font-size: 0.85rem; color: var(--color-text-muted); }
.apex-pair-with__price ins { color: var(--color-red); text-decoration: none; }

/* ---- Reviews rating summary (star breakdown bars) ---- */
.apex-review-summary {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	flex-wrap: wrap;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	margin-bottom: var(--space-8);
}
.apex-review-summary__score { text-align: center; }
.apex-review-summary__score strong { display: block; font-size: 2.5rem; color: var(--color-navy); line-height: 1; }
.apex-review-summary__score .star-rating { margin: var(--space-2) auto; }
.apex-review-summary__score small { color: var(--color-text-muted); font-size: 0.8rem; }
.apex-review-summary__bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.apex-review-summary__bar { display: flex; align-items: center; gap: var(--space-3); font-size: 0.8rem; color: var(--color-text-muted); }
.apex-review-summary__bar-track { flex: 1; height: 8px; background: var(--color-bg); border-radius: var(--radius-pill); overflow: hidden; }
.apex-review-summary__bar-fill { height: 100%; background: var(--color-red); }

/* ---- Single product page ---- */
.single-product .product_title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: var(--space-3); }
.single-product .woocommerce-product-details__short-description { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.single-product p.price, .single-product .woocommerce-variation-price {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: var(--space-6);
}
.single-product p.price del { color: var(--color-text-muted); font-weight: 400; font-size: 1.1rem; opacity: .7; margin-right: 8px; }
.single-product p.price ins { text-decoration: none; color: var(--color-red); }

.single-product .woocommerce-product-gallery { border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); }
.single-product .woocommerce-product-gallery__image { border-radius: var(--radius-md); }
.single-product .flex-control-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { width: 72px; }
.single-product .flex-control-thumbs img { border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; }
.single-product .flex-control-thumbs img.flex-active { border-color: var(--color-navy); }

.single-product table.variations { width: 100%; margin-bottom: var(--space-4); }
.single-product table.variations td { padding: 0; }
.single-product table.variations label { display: block; font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-2); font-size: 0.9rem; }
.single-product table.variations select {
	width: 100%;
	max-width: 320px;
	appearance: none;
	-webkit-appearance: none;
	background: var(--color-bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301204F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.9em center;
	background-size: 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.75em 2.2em 0.75em 1em;
	font-size: 0.95rem;
	color: var(--color-navy);
	cursor: pointer;
}
.single-product table.variations select:focus { outline: none; border-color: var(--color-navy); }
.single-product a.reset_variations { display: inline-block; margin-top: var(--space-2); font-size: 0.8rem; color: var(--color-text-muted); }

/* Colour swatches (progressive enhancement over the real <select>) */
.apex-visually-hidden-select {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.apex-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.apex-swatch {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 2px solid var(--color-border);
	padding: 0;
	cursor: pointer;
	position: relative;
	box-shadow: 0 1px 2px rgba(1,32,79,.08);
	transition: border-color .12s ease, transform .12s ease;
}
.apex-swatch--light { border-color: var(--color-border); }
.apex-swatch:hover { transform: translateY(-2px); }
.apex-swatch.is-selected { border-color: var(--color-navy); }
.apex-swatch.is-selected::after {
	content: '';
	position: absolute; inset: -5px;
	border: 2px solid var(--color-navy);
	border-radius: 50%;
}
.single-product .woocommerce-variation-description p { color: var(--color-text-muted); font-size: 0.9rem; }
.single-product .woocommerce-variation-add-to-cart { align-items: center; }

.single-product .quantity input.qty {
	width: 70px;
	height: 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
	font-size: 1rem;
	margin-right: var(--space-3);
}
.single-product button.single_add_to_cart_button {
	min-height: 48px;
	padding-inline: 2em;
	font-size: 1rem;
}
.single-product form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }

.single-product .product_meta { font-size: 0.85rem; color: var(--color-text-muted); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.single-product .product_meta a { color: var(--color-navy); }

/* ---- Single product: tabs (Description / Additional info / Reviews) ---- */
.woocommerce-tabs { margin-top: var(--space-12); }
.woocommerce-tabs ul.tabs {
	/* Storefront's `.storefront-full-width-content .woocommerce-tabs ul.tabs`
	   floats this at 30.4% width for an old two-column tab layout — reset
	   it back to a full-width flex row for our horizontal tab bar. */
	width: 100% !important;
	float: none !important;
	display: flex;
	gap: var(--space-2);
	border-bottom: 2px solid var(--color-border);
	margin: 0 0 var(--space-8);
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li {
	margin: 0 0 -2px;
	padding: 0;
}
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.9em 1.4em;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-text-muted);
	border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--color-navy); border-bottom-color: var(--color-red); }
.woocommerce-tabs ul.tabs li a:hover { color: var(--color-navy); }
/* Storefront's decorative tab-separator icon (real FontAwesome glyph,
   font loads fine) is absolutely positioned assuming Storefront's own
   default tab spacing — with our redesigned tabs it overlaps the label
   text instead of sitting after it, so it's cleaner to drop it. */
.woocommerce-tabs ul.tabs li::after { content: none !important; }
.woocommerce-tabs .woocommerce-Tabs-panel { width: 100% !important; float: none !important; max-width: 75ch; }
.woocommerce-tabs .woocommerce-Tabs-panel h2 { font-size: 1.3rem; margin-bottom: var(--space-4); }

.woocommerce-tabs table.shop_attributes {
	border-collapse: collapse;
	width: 100%;
	max-width: 560px;
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	font-size: 0.9rem;
}
.woocommerce-tabs table.shop_attributes th { width: 40%; color: var(--color-navy); font-weight: 600; background: var(--color-bg); }
.woocommerce-tabs table.shop_attributes tr:nth-child(even) td,
.woocommerce-tabs table.shop_attributes tr:nth-child(even) th { background: var(--color-bg); }

/* ---- Reviews tab ---- */
#reviews .commentlist { list-style: none; margin: 0 0 var(--space-8); padding: 0; }
#reviews .commentlist .comment { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
#reviews .commentlist .comment_container { display: flex; gap: var(--space-4); width: 100%; }
#reviews .commentlist img.avatar { border-radius: 50%; width: 48px; height: 48px; }
#reviews .commentlist .comment-text { flex: 1; }
#reviews .commentlist .star-rating { margin-bottom: 4px; }
#reviews .commentlist .meta { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 6px; display: block; }
#reviews .comment-form-rating select,
#reviews #commentform input[type="text"],
#reviews #commentform input[type="email"],
#reviews #commentform textarea {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.7em 1em;
	width: 100%;
	max-width: 460px;
	font-size: 0.9rem;
}
#reviews #commentform textarea { max-width: 100%; }
#reviews #commentform p { margin-bottom: var(--space-4); }
#reviews .comment-reply-title { font-size: 1.2rem; }
#reviews p.stars a { color: var(--color-red); }
#review_form_wrapper { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); margin-top: var(--space-6); }
.woocommerce-noreviews { color: var(--color-text-muted); }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	background: var(--color-red);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
	background: var(--color-red-dark);
	color: var(--color-white);
}