/* WooCommerce-specific styling, loaded only on shop pages. */

.shop-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: var(--space-base);
}

.shop-layout:has(.shop-layout__sidebar) { grid-template-columns: 260px minmax(0, 1fr); }
.shop-layout__main { order: 2; }
.shop-layout__sidebar { order: 1; }
.shop-layout__sidebar { display: grid; gap: 1.5rem; align-content: start; }

.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs__sep { margin: 0 .4rem; }

.woocommerce-products-header { margin-bottom: 1.5rem; }
.woocommerce-products-header__title { margin: 0 0 .5rem; }

.woocommerce-result-count { color: var(--muted); font-size: .875rem; margin: 0; }

.woocommerce-ordering select,
.shop-layout select,
.shop-layout input[type="text"],
.shop-layout input[type="email"],
.shop-layout input[type="tel"],
.shop-layout input[type="password"],
.shop-layout input[type="number"],
.shop-layout textarea {
	padding: .6rem .75rem;
	border: 1px solid var(--line);
	border-radius: 0;
	font: inherit;
	background: var(--white);
	max-width: 100%;
}

/* Column count follows WooCommerce's own columns-N class on the list. */
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 992px) {
	ul.products,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	ul.products,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * WooCommerce's own layout stylesheet floats products and gives them a
 * percentage width (22.05% for four columns). Inside a grid that percentage
 * resolves against the track, collapsing each card, so the float layout is
 * unset here and the grid does the work.
 */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
}

/*
 * WooCommerce adds a clearfix via ::before/::after on the product list. In a
 * grid container those pseudo-elements become grid items, leaving a phantom
 * empty cell that shunts the first row along. The selector has to match
 * WooCommerce's own specificity to win.
 */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after { content: none; display: none; }

ul.products li.product a img {
	aspect-ratio: 1;
	object-fit: contain;
	width: 100%;
	margin: 0 0 .5rem;
	background: var(--white);
	border-radius: 0;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: .64px;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	margin: 10px 0 15px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .6px;
	margin-top: auto;
}

ul.products li.product .price del { color: var(--muted); font-weight: 400; }
ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
	position: absolute;
	top: .5rem; left: .5rem;
	right: auto;
	margin: 0;
	min-width: 0;
	min-height: 0;
	line-height: 1;
	padding: .3rem .5rem;
	border-radius: 0;
	background: var(--brand);
	color: var(--ink);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

/* Loop buttons fill the card rather than taking the 200px default. */
.woocommerce ul.products li.product .button { width: 100%; margin: 0; }

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem .75rem;
	border: 2px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--white);
	font-weight: 500;
	font-size: 17px;
	line-height: normal;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--white);
	border-color: var(--ink);
	color: var(--ink);
}

/* Single product */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

/*
 * As with the loop, WooCommerce floats these at 48% — meaningless in a grid.
 * Its rule set covers both .woocommerce and .woocommerce-page at (0,2,2), so
 * the body element prefix here is what wins rather than source order.
 */
body.woocommerce div.product div.images,
body.woocommerce div.product div.summary,
body.woocommerce-page div.product div.images,
body.woocommerce-page div.product div.summary,
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .summary {
	float: none;
	width: auto;
	margin: 0;
}

.single-product div.product .woocommerce-product-gallery { grid-column: 1; }
.single-product div.product .summary { grid-column: 2; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells { grid-column: 1 / -1; }

.single-product .product_title { margin-bottom: .5rem; }
.single-product .summary .price { font-size: 1.5rem; font-weight: 700; }
.single-product .summary .woocommerce-product-details__short-description { color: var(--muted); }

.single-product .quantity input {
	width: 5rem;
	padding: .7rem .5rem;
	border: 1px solid var(--line);
	border-radius: 0;
	text-align: center;
	font: inherit;
}

.single-product form.cart { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-block: 1.5rem; }

.trade-notice,
.shop-notice {
	padding: 1rem 1.25rem;
	margin-block: 1rem;
	border-left: 4px solid var(--brand);
	background: var(--surface);
	border-radius: 0;
	font-size: .92rem;
}

.trade-notice p:last-child,
.shop-notice p:last-child { margin-bottom: 0; }

.woocommerce-tabs { margin-top: 3rem; }
.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; border-bottom: 1px solid var(--line); }
.woocommerce-tabs ul.tabs li a { display: block; padding: .75rem 1.1rem; font-weight: 600; }
.woocommerce-tabs ul.tabs li.active a { border-bottom: 3px solid var(--brand); }

/* Cart, checkout, account */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	border-radius: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce table.shop_table th { background: var(--surface); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 1rem 1.25rem;
	margin-block: 1rem;
	border-left: 4px solid var(--brand);
	background: var(--surface);
	border-radius: 0;
	list-style: none;
}

.woocommerce-error { border-left-color: #C0392B; }

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 480px;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-radius: 0;
}

.woocommerce form .form-row { display: grid; gap: .35rem; margin-bottom: 1rem; }
.woocommerce form .form-row label { font-weight: 600; font-size: .9rem; }
.woocommerce form .form-row .required { color: #C0392B; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 0; font-weight: 600; font-size: .9rem; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--brand); border-color: var(--brand); }

@media (max-width: 992px) {
	.shop-layout:has(.shop-layout__sidebar) { grid-template-columns: 1fr; }
	.single-product div.product { grid-template-columns: 1fr; }
	.single-product div.product .summary { grid-column: 1; }
}

/* ------------------------------------------------------- Price colours */

/* WooCommerce's default price colour is a muted olive; the brand uses black. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins {
	color: var(--ink);
	text-decoration: none;
}

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
	color: var(--muted);
	font-weight: 400;
	opacity: 1;
}

/* Round purple sale flash → square brand badge. */
.woocommerce span.onsale {
	background: var(--brand);
	color: var(--ink);
	border-radius: 0;
	font-weight: 700;
	text-transform: uppercase;
}

/* ------------------------------------------------------ Filter sidebar */

.shop-layout__sidebar .widget + .widget { margin-top: 1.5rem; }

.shop-layout__sidebar h3,
.shop-layout__sidebar .wp-block-heading {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .64px;
	margin: 0 0 .75rem;
}

.shop-layout__sidebar .wp-block-woocommerce-product-filters > * + * { margin-top: 1.5rem; }

.shop-layout__sidebar label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 15px;
	line-height: 1.6;
}

.shop-layout__sidebar input[type="checkbox"] { accent-color: var(--ink); }

.wc-block-product-filter-removable-chips__item {
	border: 1px solid var(--line);
	border-radius: 0;
	font-size: 13px;
}

/*
 * WooCommerce's filter blocks size themselves to their widest option label,
 * which overflows a fixed sidebar column and slides under the product grid.
 * Constrain the column and let long option lists wrap or scroll instead.
 */
.shop-layout__sidebar { min-width: 0; }

.shop-layout__sidebar .widget,
.shop-layout__sidebar .wp-block-woocommerce-product-filters,
.shop-layout__sidebar .wp-block-woocommerce-product-filters > * {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.shop-layout__sidebar .wc-block-product-filter-checkbox-list {
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
}

.shop-layout__sidebar .wc-block-product-filter-checkbox-list__label,
.shop-layout__sidebar label {
	overflow-wrap: anywhere;
	font-size: 14px;
}

.shop-layout__sidebar input[type="text"],
.shop-layout__sidebar input[type="number"] { width: 100%; min-width: 0; }

.shop-layout__sidebar .wc-block-product-filter-price-slider { max-width: 100%; }