/**
 * WooCommerce styling.
 *
 * Loaded only on pages that show products, the cart, the checkout or the
 * account area. Everything here restyles WooCommerce's own markup — no core
 * template is replaced, so sorting, pagination, AJAX add-to-cart, checkout
 * validation and the Blocks local pickup UI all keep working as shipped.
 *
 * Design tokens come from theme.css.
 *
 * @package Sox_Outlet
 */

/* ==========================================================================
   Hidden pricing (catalog mode)
   The call to action that stands in for the price while catalog mode is on.
   See inc/catalog-mode.php for the switch that controls it.
   ========================================================================== */

.sox-price--hidden {
	display: inline-flex;
	align-items: center;
	gap: var(--sox-space-2);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-4xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-badge);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--sox-orange-ink);
}

.sox-price--hidden::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sox-orange);
}

/* On the single product page the placeholder carries more weight, matching the
   visual space a real price would occupy. */
.single-product .sox-price--hidden {
	padding: 12px 18px;
	border: 1px dashed var(--sox-line-cream);
	border-radius: var(--sox-radius-sm);
	background: var(--sox-cream-pill);
	font-size: var(--sox-fs-sm);
}

/* ==========================================================================
   Shop wrapper
   ========================================================================== */

.sox-shop { padding-block: var(--sox-section-y); }

/* Screen-reader-only heading WooCommerce prints on the shop page. */
.woocommerce-products-header__title { display: none; }


/* ==========================================================================
   Product grid and card
   Shared by the homepage rows, the shop and category archives, and the
   related products row, so a product looks identical everywhere.
   ========================================================================== */

.sox-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1080px) {
	.sox-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.sox-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
	.sox-product-grid { grid-template-columns: minmax(0, 1fr); }
}

.sox-product-card { list-style: none; }

.sox-product-card:hover .sox-media > img { transform: scale(1.05); }

.sox-product-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

.sox-product-card__badge {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 1;
	font-size: 0.59375rem; /* 9.5 */
}

.sox-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 15px 16px 17px;
}

.sox-product-card__brand {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--sox-orange-ink);
}

.sox-product-card__title {
	/* `auto` bottom margin pins the footer row to the bottom of every card, so
	   a two-line name and a one-line name still line up across the grid. */
	margin: 5px 0 auto;
	font-family: var(--sox-font-body);
	font-size: var(--sox-fs-base);
	font-weight: var(--sox-w-semibold);
	line-height: var(--sox-lh-snug);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sox-ink);
}

.sox-product-card:hover .sox-product-card__title { color: var(--sox-orange-deep); }

.sox-product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-2);
	margin-top: var(--sox-space-3);
}

.sox-product-card__view {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-bold);
	color: var(--sox-ink);
}

.sox-product-card__price {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-sm);
	font-weight: var(--sox-w-extrabold);
	color: var(--sox-ink);
}

.sox-product-card__price del {
	margin-right: 4px;
	font-weight: var(--sox-w-medium);
	color: var(--sox-text-faint);
}

.sox-product-card__price ins {
	text-decoration: none;
	color: var(--sox-orange-deep);
}

/* Placeholder well for a product with no image yet. */
.sox-media__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C9C3B8;
}


/* ==========================================================================
   ARCHIVE LAYOUT
   Shop, category, tag and brand pages. Sidebar left, grid right; the sidebar
   becomes a slide-over panel on small screens.
   ========================================================================== */

.sox-archive { padding-block: var(--sox-space-8) var(--sox-section-y); }

.sox-archive__layout {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: var(--sox-space-9);
	align-items: start;
}

/* No sidebar rendered - let the grid use the full width. */
.sox-archive__layout:not(:has(.sox-archive__sidebar)) {
	grid-template-columns: minmax(0, 1fr);
}

.sox-archive__main { min-width: 0; }

@media (max-width: 1080px) {
	.sox-archive__layout { grid-template-columns: 232px minmax(0, 1fr); gap: var(--sox-space-7); }
}


/* ==========================================================================
   SUBCATEGORY CHIPS
   ========================================================================== */

.sox-chips { margin-bottom: var(--sox-space-7); }

.sox-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sox-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sox-space-2);
	padding: 9px var(--sox-space-4);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-pill);
	background: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-semibold);
	color: var(--sox-ink);
	transition:
		border-color var(--sox-t-fast) var(--sox-ease),
		background var(--sox-t-fast) var(--sox-ease);
}

.sox-chip:hover,
.sox-chip:focus-visible {
	border-color: var(--sox-orange);
	background: var(--sox-cream-pill);
	color: var(--sox-ink);
}

.sox-chip__count {
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	color: var(--sox-text-faint);
}


/* ==========================================================================
   TOOLBAR - result count, sorting, filter toggle
   ========================================================================== */

.sox-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--sox-space-6);
	padding-bottom: var(--sox-space-4);
	border-bottom: 1px solid var(--sox-line);
}

.woocommerce-result-count {
	margin: 0;
	font-size: var(--sox-fs-sm);
	color: var(--sox-text-muted);
}

.woocommerce-ordering { margin: 0 0 0 auto; }

.woocommerce-ordering select,
.sox-filters select {
	padding: 10px var(--sox-space-9) 10px var(--sox-space-4);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius);
	background-color: var(--sox-white);
	/* Chevron drawn inline so no extra request is needed. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 15px;
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-semibold);
	color: var(--sox-ink);
	appearance: none;
	cursor: pointer;
}

.woocommerce-ordering select:focus { border-color: var(--sox-orange); outline: none; }

/* Filter toggle - desktop hides it, the sidebar is always visible there. */
.sox-filter-toggle {
	display: none;
	align-items: center;
	gap: var(--sox-space-2);
	padding: 10px var(--sox-space-4);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius);
	background: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-bold);
	color: var(--sox-ink);
}

.sox-filter-toggle:hover { border-color: var(--sox-orange); }


/* ==========================================================================
   FILTER SIDEBAR
   ========================================================================== */

.sox-filters {
	position: sticky;
	top: 110px;
	padding: var(--sox-space-5);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-lg);
	background: var(--sox-white);
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sox-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sox-space-5);
	padding-bottom: var(--sox-space-3);
	border-bottom: 1px solid var(--sox-line);
}

.sox-filters__title {
	margin: 0;
	font-size: var(--sox-fs-h5);
	text-transform: uppercase;
}

/* Only meaningful in the mobile panel. */
.sox-filters__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: var(--sox-radius-sm);
	background: var(--sox-cream-warm);
	color: var(--sox-ink);
}

.sox-widget + .sox-widget {
	margin-top: var(--sox-space-6);
	padding-top: var(--sox-space-6);
	border-top: 1px solid var(--sox-line-soft);
}

.sox-widget__title {
	margin: 0 0 var(--sox-space-3);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-3xs);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sox-ink);
}

.sox-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sox-fs-sm);
}

.sox-widget li + li { margin-top: 2px; }

.sox-widget a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-2);
	padding: 7px var(--sox-space-2);
	border-radius: var(--sox-radius-xs);
	color: var(--sox-text-body);
}

.sox-widget a:hover { background: var(--sox-cream); color: var(--sox-orange-deep); }

.sox-widget .count,
.sox-filter-list__count {
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	color: var(--sox-text-faint);
}

.sox-filter-list { margin: 0; padding: 0; list-style: none; font-size: var(--sox-fs-sm); }

.sox-filter-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-2);
	padding: 7px var(--sox-space-2);
	border-radius: var(--sox-radius-xs);
	color: var(--sox-text-body);
}

.sox-filter-list__link:hover { background: var(--sox-cream); color: var(--sox-orange-deep); }

.sox-filter-list__link.is-active {
	background: var(--sox-cream-pill);
	color: var(--sox-orange-deep);
	font-weight: var(--sox-w-bold);
}

/* Applied filters, as removable chips. */
.sox-widget--active-filters ul { display: flex; flex-wrap: wrap; gap: 6px; }
.sox-widget--active-filters li { margin: 0; }

.sox-widget--active-filters a {
	padding: 5px var(--sox-space-3);
	border-radius: var(--sox-radius-pill);
	background: var(--sox-ink);
	color: var(--sox-white);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
}

.sox-widget--active-filters a::after { content: "\00d7"; font-size: 14px; line-height: 1; }
.sox-widget--active-filters a:hover { background: var(--sox-orange); color: var(--sox-ink); }

/* Admin-only prompt shown when no filter widgets are configured. */
.sox-widget--hint {
	padding: var(--sox-space-4);
	border: 1px dashed var(--sox-line-cream);
	border-radius: var(--sox-radius);
	background: var(--sox-cream-pill);
	font-size: var(--sox-fs-4xs);
	color: var(--sox-text-sub);
}

.sox-widget--hint p { margin-bottom: var(--sox-space-3); }

/* WooCommerce price slider */
.sox-filters .price_slider_wrapper { padding-top: var(--sox-space-2); }
.sox-filters .ui-slider { position: relative; height: 4px; border-radius: 2px; background: var(--sox-line); }
.sox-filters .ui-slider-range { position: absolute; height: 100%; border-radius: 2px; background: var(--sox-orange); }

.sox-filters .ui-slider-handle {
	position: absolute;
	top: -6px;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--sox-ink);
	cursor: grab;
}

.sox-filters .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-2);
	margin-top: var(--sox-space-4);
	font-size: var(--sox-fs-4xs);
}

.sox-filters .price_slider_amount .button {
	order: 2;
	padding: 8px var(--sox-space-4);
	border: 0;
	border-radius: var(--sox-radius-sm);
	background: var(--sox-ink);
	color: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	cursor: pointer;
}

/* --- Mobile: the sidebar becomes a slide-over panel --------------------- */

@media (max-width: 900px) {
	.sox-archive__layout { grid-template-columns: minmax(0, 1fr); }

	.sox-filter-toggle { display: inline-flex; }

	.sox-archive__sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: var(--sox-z-drawer);
		width: min(340px, 88vw);
		transform: translateX(-101%);
		transition: transform var(--sox-t-slow) var(--sox-ease);
		visibility: hidden;
	}

	.sox-archive__sidebar.is-open { transform: translateX(0); visibility: visible; }

	.sox-filters {
		position: static;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
		box-shadow: 0 0 40px rgba(23, 24, 26, .25);
	}

	.sox-filters__close { display: flex; }

	/* Backdrop */
	.sox-archive__sidebar.is-open::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgba(23, 24, 26, .45);
	}
}


/* ==========================================================================
   SINGLE PRODUCT
   Two columns built with CSS grid over WooCommerce's own markup, so no
   template is replaced and the gallery keeps its zoom, lightbox and slider.
   ========================================================================== */

.sox-single-product { padding-block: var(--sox-space-6) var(--sox-section-y); }
.sox-single-product__top { margin-bottom: var(--sox-space-6); }

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
	align-items: start;
}

/* Tabs and related products run the full width beneath both columns. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr); }
}

/* --- Gallery ----------------------------------------------------------- */

.woocommerce-product-gallery {
	position: relative;
	min-width: 0;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-lg);
	overflow: hidden;
	background: var(--sox-placeholder);
}

.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sox-space-3);
	margin: var(--sox-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; }

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-sm);
	cursor: pointer;
	opacity: .72;
	transition: opacity var(--sox-t-fast) var(--sox-ease), border-color var(--sox-t-fast) var(--sox-ease);
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--sox-orange);
}

/* WooCommerce's zoom trigger */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--sox-space-3);
	right: var(--sox-space-3);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sox-white);
	border: 1px solid var(--sox-line);
	font-size: 0;
	color: transparent;
	box-shadow: var(--sox-shadow-xs);
}

.woocommerce-product-gallery__trigger::after {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--sox-ink);
	-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' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%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' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Summary column ---------------------------------------------------- */

.single-product .summary { min-width: 0; }

.sox-single-product__brand {
	margin-bottom: var(--sox-space-2);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-3xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-orange-ink);
}

.sox-single-product__brand a { color: inherit; }
.sox-single-product__brand a:hover { color: var(--sox-orange-hover); }

.single-product .product_title {
	margin-bottom: var(--sox-space-4);
	font-size: var(--sox-fs-h2-sm);
	line-height: var(--sox-lh-heading);
	text-transform: uppercase;
}

.single-product .summary .price {
	display: block;
	margin-bottom: var(--sox-space-4);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-h3-sm);
	font-weight: var(--sox-w-extrabold);
	color: var(--sox-ink);
}

.single-product .summary .price del { margin-right: var(--sox-space-2); font-weight: var(--sox-w-medium); color: var(--sox-text-faint); }
.single-product .summary .price ins { text-decoration: none; color: var(--sox-orange-deep); }

.sox-single-product__meta-row {
	display: flex;
	align-items: center;
	gap: var(--sox-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--sox-space-5);
	padding-bottom: var(--sox-space-5);
	border-bottom: 1px solid var(--sox-line);
}

.sox-single-product__meta-row .sox-stock { font-size: var(--sox-fs-xs); }

.sox-single-product__sku {
	font-size: var(--sox-fs-4xs);
	color: var(--sox-text-faint);
}

.woocommerce-product-details__short-description {
	margin-bottom: var(--sox-space-6);
	font-size: var(--sox-fs-md);
	line-height: var(--sox-lh-body);
	color: var(--sox-text-body);
}

/* Hide the plain stock line WooCommerce prints - the theme shows its own. */
.single-product .summary > .stock { display: none; }

/* --- Add to cart -------------------------------------------------------- */

.single-product form.cart {
	display: flex;
	align-items: stretch;
	gap: var(--sox-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--sox-space-6);
}

.single-product form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius);
	overflow: hidden;
}

.single-product form.cart .quantity input.qty {
	width: 74px;
	min-height: 52px;
	padding: 0 var(--sox-space-3);
	border: 0;
	background: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-md);
	font-weight: var(--sox-w-bold);
	text-align: center;
	color: var(--sox-ink);
}

.single-product form.cart .quantity input.qty:focus { outline: none; }

.single-product form.cart button[type="submit"],
.single-product form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 220px;
	min-height: 52px;
	padding: 16px var(--sox-space-8);
	border: 0;
	border-radius: var(--sox-radius);
	background: var(--sox-orange);
	color: var(--sox-ink);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-md);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: var(--sox-shadow-btn);
	transition: background var(--sox-t-fast) var(--sox-ease), transform var(--sox-t-fast) var(--sox-ease);
}

.single-product form.cart button[type="submit"]:hover { background: var(--sox-orange-hover); transform: translateY(-1px); }
.single-product form.cart button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Variation selects */
.single-product table.variations { width: 100%; margin-bottom: var(--sox-space-4); border: 0; }
.single-product table.variations th,
.single-product table.variations td { padding: 6px 0; border: 0; text-align: left; vertical-align: middle; }

.single-product table.variations th label {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
}

.single-product table.variations select {
	width: 100%;
	padding: 12px var(--sox-space-8) 12px var(--sox-space-4);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius);
	background-color: var(--sox-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 15px;
	font-size: var(--sox-fs-sm);
	appearance: none;
}

/* --- Pickup reassurance ------------------------------------------------- */

.sox-pickup-note {
	display: flex;
	align-items: flex-start;
	gap: var(--sox-space-3);
	margin-bottom: var(--sox-space-5);
	padding: var(--sox-space-4) var(--sox-space-5);
	border: 1px solid var(--sox-line-cream);
	border-radius: var(--sox-radius);
	background: var(--sox-cream-pill);
}

.sox-pickup-note__icon { flex: none; color: var(--sox-orange-strong); }

.sox-pickup-note__title {
	margin: 0 0 2px;
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-brown);
}

.sox-pickup-note__text {
	margin: 0;
	font-size: var(--sox-fs-4xs);
	line-height: var(--sox-lh-normal);
	color: var(--sox-text-sub);
}

/* --- Product meta -------------------------------------------------------- */

.single-product .product_meta {
	padding-top: var(--sox-space-5);
	border-top: 1px solid var(--sox-line);
	font-size: var(--sox-fs-4xs);
	color: var(--sox-text-faint);
}

.single-product .product_meta > span { display: block; margin-bottom: 4px; }
.single-product .product_meta a { color: var(--sox-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.single-product .product_meta a:hover { color: var(--sox-orange-deep); }


/* ==========================================================================
   TABS
   ========================================================================== */

.woocommerce-tabs { margin-top: var(--sox-space-12); }

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--sox-space-2);
	flex-wrap: wrap;
	margin: 0 0 var(--sox-space-7);
	padding: 0 0 var(--sox-space-1);
	list-style: none;
	border-bottom: 1px solid var(--sox-line);
}

.woocommerce-tabs ul.tabs li { margin: 0; }

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px var(--sox-space-5);
	border-bottom: 3px solid transparent;
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-text-muted);
	transition: color var(--sox-t-fast) var(--sox-ease), border-color var(--sox-t-fast) var(--sox-ease);
}

.woocommerce-tabs ul.tabs li a:hover { color: var(--sox-ink); }

.woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--sox-orange);
	color: var(--sox-ink);
}

.woocommerce-tabs .panel {
	max-width: 76ch;
	font-size: var(--sox-fs-md);
	line-height: var(--sox-lh-body);
	color: var(--sox-text-body);
}

.woocommerce-tabs .panel > * + * { margin-top: 1.1em; }
.woocommerce-tabs .panel ul { padding-left: 1.35em; list-style: disc; }

.woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; font-size: var(--sox-fs-sm); }

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: var(--sox-space-3) 0;
	border-bottom: 1px solid var(--sox-line);
	text-align: left;
}

.woocommerce-tabs table.shop_attributes th {
	width: 30%;
	font-weight: var(--sox-w-bold);
	color: var(--sox-ink);
}

.woocommerce-tabs table.shop_attributes td p { margin: 0; }


/* ==========================================================================
   RELATED PRODUCTS
   ========================================================================== */

.related.products,
.up-sells.products {
	margin-top: var(--sox-space-12);
	padding-top: var(--sox-space-9);
	border-top: 1px solid var(--sox-line);
}

.related.products > h2,
.up-sells.products > h2 {
	margin-bottom: var(--sox-space-7);
	font-size: var(--sox-fs-h2-xs);
	text-transform: uppercase;
}


/* ==========================================================================
   NOTICES
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	align-items: center;
	gap: var(--sox-space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--sox-space-6);
	padding: var(--sox-space-4) var(--sox-space-5);
	border-left: 3px solid var(--sox-orange);
	border-radius: var(--sox-radius);
	background: var(--sox-cream-pill);
	font-size: var(--sox-fs-sm);
	list-style: none;
}

.woocommerce-message { border-left-color: var(--sox-green); background: var(--sox-green-soft); }
.woocommerce-error   { border-left-color: var(--sox-red);   background: var(--sox-red-soft); }

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 9px var(--sox-space-5);
	border-radius: var(--sox-radius-sm);
	background: var(--sox-ink);
	color: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: var(--sox-orange); color: var(--sox-ink); }


/* ==========================================================================
   CART AND CHECKOUT
   Prices are always visible here, whatever catalog mode is set to - a customer
   must always see what they are paying before they pay it.

   Both the classic shortcode markup and the newer Blocks markup are covered,
   because a store can be running either.
   ========================================================================== */

.sox-checkout-page { padding-block: var(--sox-space-9) var(--sox-section-y); }

/* --- Classic cart table -------------------------------------------------- */

.woocommerce-cart-form__contents {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sox-space-8);
}

.woocommerce-cart-form__contents th {
	padding: 0 var(--sox-space-3) var(--sox-space-3);
	border-bottom: 1px solid var(--sox-line);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-eyebrow);
	text-transform: uppercase;
	text-align: left;
	color: var(--sox-text-muted);
}

.woocommerce-cart-form__cart-item td {
	padding: var(--sox-space-5) var(--sox-space-3);
	border-bottom: 1px solid var(--sox-line-soft);
	vertical-align: middle;
}

.woocommerce-cart-form__cart-item .product-thumbnail img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-sm);
}

.woocommerce-cart-form__cart-item .product-name a {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-base);
	font-weight: var(--sox-w-semibold);
	color: var(--sox-ink);
}

.woocommerce-cart-form__cart-item .product-name a:hover { color: var(--sox-orange-deep); }

.woocommerce-cart-form__cart-item .product-price,
.woocommerce-cart-form__cart-item .product-subtotal {
	font-family: var(--sox-font-ui);
	font-weight: var(--sox-w-bold);
	color: var(--sox-ink);
}

.woocommerce-cart-form__cart-item .quantity input.qty {
	width: 70px;
	padding: 10px;
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-sm);
	text-align: center;
	font-weight: var(--sox-w-bold);
}

.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sox-cream-warm);
	color: var(--sox-text-faint);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.product-remove a.remove:hover { background: var(--sox-red-soft); color: var(--sox-red); }

.cart-collaterals .cart_totals {
	padding: var(--sox-space-6);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-lg);
	background: var(--sox-cream);
}

.cart_totals h2 { margin-bottom: var(--sox-space-5); font-size: var(--sox-fs-h3-sm); text-transform: uppercase; }
.cart_totals table { width: 100%; border-collapse: collapse; font-size: var(--sox-fs-sm); }
.cart_totals th, .cart_totals td { padding: var(--sox-space-3) 0; border-bottom: 1px solid var(--sox-line); text-align: left; }
.cart_totals tr:last-child th, .cart_totals tr:last-child td { border-bottom: 0; }

.cart_totals .order-total th, .cart_totals .order-total td {
	padding-top: var(--sox-space-4);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-lg);
	font-weight: var(--sox-w-extrabold);
	color: var(--sox-ink);
}

.wc-proceed-to-checkout { margin-top: var(--sox-space-5); }

.wc-proceed-to-checkout .button,
.woocommerce .button.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 18px var(--sox-space-6);
	border: 0;
	border-radius: var(--sox-radius);
	background: var(--sox-orange);
	color: var(--sox-ink);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-md);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	box-shadow: var(--sox-shadow-btn);
}

.wc-proceed-to-checkout .button:hover { background: var(--sox-orange-hover); color: var(--sox-ink); }

/* --- Blocks cart and checkout ------------------------------------------
   WooCommerce Blocks expose their own custom properties. Setting those is far
   more robust than fighting their class names, which change between releases. */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wp--preset--color--primary: var(--sox-orange);
	font-family: var(--sox-font-body);
}

.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2 {
	font-family: var(--sox-font-display);
	text-transform: uppercase;
	letter-spacing: var(--sox-ls-heading);
}

.wc-block-components-button:not(.is-link) {
	border-radius: var(--sox-radius);
	background-color: var(--sox-orange);
	color: var(--sox-ink);
	font-family: var(--sox-font-ui);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover { background-color: var(--sox-orange-hover); }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
	border-radius: var(--sox-radius);
	border-color: var(--sox-line);
}

.wc-block-components-text-input input:focus {
	box-shadow: 0 0 0 3px rgba(240, 130, 30, .16);
	border-color: var(--sox-orange);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--sox-font-ui);
	font-weight: var(--sox-w-extrabold);
}

/* --- Local pickup -------------------------------------------------------
   The Blocks checkout renders the pickup-location picker itself, populated from
   WooCommerce > Settings > Shipping > Local pickup. The theme only styles it;
   nothing here duplicates or replaces its behaviour. */

.wc-block-checkout__shipping-method,
.wc-block-components-shipping-rates-control {
	border-radius: var(--sox-radius-lg);
}

.wc-block-checkout__shipping-method-option {
	border-radius: var(--sox-radius);
	border-color: var(--sox-line);
}

.wc-block-checkout__shipping-method-option--selected {
	border-color: var(--sox-orange);
	background: var(--sox-cream-pill);
}

.wc-block-components-radio-control__option { border-radius: var(--sox-radius); }

.wc-block-components-radio-control-accordion-option--checked-option,
.wc-block-components-radio-control__option--checked-option {
	background: var(--sox-cream-pill);
}

/* Empty cart */
.wc-block-cart__empty-cart__title,
.cart-empty {
	font-family: var(--sox-font-display);
	font-size: var(--sox-fs-h2-xs);
	text-transform: uppercase;
	text-align: center;
}

.return-to-shop { text-align: center; margin-top: var(--sox-space-6); }


/* ==========================================================================
   ==========================================================================
   FIX ROUND
   Overrides that must beat WooCommerce's own stylesheet, plus the filter UI.
   Kept together at the end of the file so the reasons stay readable.
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   1. PRODUCT GRID — undo WooCommerce's float layout
   --------------------------------------------------------------------------
   WooCommerce styles its loop as floated columns: `li.product` gets
   `float: left; width: 22.05%; margin-right: 3.8%`. Inside a CSS grid that
   width is measured against the grid CELL, not the row, so every card
   collapsed to roughly a fifth of its own column - about 70px - with the text
   clipped.

   `!important` is warranted here: WooCommerce's rules are equally specific and
   load order is not something a theme can rely on across setups.
   ========================================================================== */

.sox-product-grid {
	/* WooCommerce clears its float row with generated content. */
	display: grid !important;
}

.sox-product-grid::before,
.sox-product-grid::after {
	content: none !important;
	display: none !important;
}

.sox-product-grid li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* WooCommerce also styles the card's inner pieces. The theme's card supplies
   its own, so stop those from doubling up. */
.sox-product-grid li.product a img { margin: 0; box-shadow: none; }
.sox-product-grid li.product .woocommerce-loop-product__title { padding: 0; }
.sox-product-grid li.product .button,
.sox-product-grid li.product .added_to_cart { display: none; }


/* ==========================================================================
   2. SINGLE PRODUCT — undo the 48% float, widen the info column
   --------------------------------------------------------------------------
   WooCommerce floats the gallery and summary at 48% each. Against the theme's
   grid that left the image marooned in a half-empty column with a canyon
   between it and the product details.
   ========================================================================== */

.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > div.images,
.single-product div.product > .summary,
.single-product div.product > .entry-summary {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
}

/* Gallery a little narrower than the details, so the reading column - price,
   options, add to cart - gets the room it actually needs. */
.single-product div.product {
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	gap: clamp(1.75rem, 1rem + 2.2vw, 3rem);
}

/* Make the image fill its column instead of sitting at its natural size. */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

.woocommerce-product-gallery__image > a { display: block; }

.woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto;
	display: block;
}

/* WooCommerce hides the gallery until its script initialises. If the script
   never runs, the product image would stay invisible - so make visible the
   resting state and let the script re-show it harmlessly. */
.woocommerce-product-gallery { opacity: 1 !important; }

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   3. ADD TO CART BUTTON
   --------------------------------------------------------------------------
   WooCommerce paints `.button.alt` in its own purple (#a46497). On a variable
   product the button also starts disabled - "select options first" - which is
   what was rendering as lavender.

   The disabled state is deliberately grey rather than a faded orange: a washed
   out brand colour reads as a broken button, whereas grey reads as "not yet".
   ========================================================================== */

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.button,
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart button[type="submit"] {
	background-color: var(--sox-orange) !important;
	color: var(--sox-ink) !important;
	border-radius: var(--sox-radius);
	font-family: var(--sox-font-ui);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce div.product form.cart .button:hover,
.single-product form.cart .single_add_to_cart_button:hover,
.single-product form.cart button[type="submit"]:hover {
	background-color: var(--sox-orange-hover) !important;
	color: var(--sox-ink) !important;
}

.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button:disabled,
.single-product form.cart button[type="submit"]:disabled,
.woocommerce div.product form.cart .button.disabled {
	background-color: var(--sox-line-grey) !important;
	color: #6B6862 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: not-allowed;
	transform: none !important;
}

/* WooCommerce's "please choose options" message under a variable product. */
.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { box-shadow: none !important; }

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { background: none; }

.woocommerce-variation-price { margin-bottom: var(--sox-space-3); }

/* Reset link before the variation selects. */
.reset_variations {
	display: inline-block;
	margin-top: var(--sox-space-2);
	font-size: var(--sox-fs-4xs);
	color: var(--sox-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ==========================================================================
   4. FILTER PANEL
   ========================================================================== */

.sox-filters__body > .sox-widget:first-child { margin-top: 0; }

.sox-filters__title {
	display: flex;
	align-items: center;
	gap: var(--sox-space-2);
}

.sox-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: var(--sox-radius-pill);
	background: var(--sox-orange);
	color: var(--sox-ink);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: 0;
}

.sox-filters__foot {
	margin-top: var(--sox-space-5);
	padding-top: var(--sox-space-5);
	border-top: 1px solid var(--sox-line);
}

.sox-widget__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sox-space-2);
}

.sox-widget__head .sox-widget__title { margin-bottom: var(--sox-space-3); }

.sox-clear-filters {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	text-transform: uppercase;
	letter-spacing: var(--sox-ls-caps);
	color: var(--sox-orange-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sox-clear-filters:hover { color: var(--sox-orange-hover); }

/* Block-based widgets emit their own heading markup and never receive the
   class the theme's before_title supplies, so headings inside the rail are
   normalised by element too. Without this the default Archives and Categories
   widgets render at full display size. */
.sox-filters h2,
.sox-filters h3,
.sox-filters .wp-block-heading,
.sox-filters .widget-title,
.sox-filters .widgettitle {
	margin: 0 0 var(--sox-space-3);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-3xs);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-eyebrow);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--sox-ink);
}

.sox-filters__title { font-size: var(--sox-fs-h5); letter-spacing: var(--sox-ls-heading); }

.sox-filters__extra {
	margin-top: var(--sox-space-6);
	padding-top: var(--sox-space-6);
	border-top: 1px solid var(--sox-line-soft);
}

/* --- Applied filter chips ------------------------------------------------ */

.sox-widget--active { padding-bottom: var(--sox-space-2); }

.sox-active-filters ul,
.woocommerce-widget-layered-nav-list.sox-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-active-filters li { margin: 0 !important; }

.sox-active-filters li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px var(--sox-space-3);
	border-radius: var(--sox-radius-pill);
	background: var(--sox-ink);
	color: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	line-height: 1.4;
}

.sox-active-filters li a::after {
	content: "\00d7";
	font-size: 15px;
	line-height: 1;
	opacity: .75;
}

.sox-active-filters li a:hover { background: var(--sox-orange); color: var(--sox-ink); }

/* --- Layered nav: chips (size, width, and anything not a colour) --------- */

.sox-widget--chips ul,
.sox-widget--chips .woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-widget--chips li,
.sox-widget--chips .woocommerce-widget-layered-nav-list__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 !important;
	padding: 7px var(--sox-space-3);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-sm);
	background: var(--sox-white);
	font-size: var(--sox-fs-4xs);
	line-height: 1.2;
	transition:
		border-color var(--sox-t-fast) var(--sox-ease),
		background var(--sox-t-fast) var(--sox-ease);
}

.sox-widget--chips li:hover { border-color: var(--sox-orange); background: var(--sox-cream-pill); }

.sox-widget--chips li a {
	display: inline;
	padding: 0;
	background: none;
	font-family: var(--sox-font-ui);
	font-weight: var(--sox-w-semibold);
	color: var(--sox-ink);
}

.sox-widget--chips li a:hover { background: none; color: var(--sox-ink); }

.sox-widget--chips li .count {
	font-size: var(--sox-fs-micro);
	font-weight: var(--sox-w-bold);
	color: var(--sox-text-faint);
}

/* Selected */
.sox-widget--chips li.chosen,
.sox-widget--chips .woocommerce-widget-layered-nav-list__item--chosen {
	border-color: var(--sox-ink);
	background: var(--sox-ink);
}

.sox-widget--chips li.chosen a,
.sox-widget--chips li.chosen .count { color: var(--sox-white); }

.sox-widget--chips li.chosen a::after {
	content: "\00d7";
	margin-left: 5px;
	opacity: .7;
}

/* --- Layered nav: colour swatches --------------------------------------- */

.sox-widget--swatches ul,
.sox-widget--swatches .woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sox-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-widget--swatches li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* The count WooCommerce prints outside the link is redundant here - the swatch
   markup carries its own. */
.sox-widget--swatches li > .count { display: none; }

.sox-swatch-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 58px;
	padding: 0;
	background: none;
	text-align: center;
}

.sox-swatch {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sox-swatch, var(--sox-line-grey));
	border: 1px solid rgba(23, 24, 26, .14);
	box-shadow: 0 1px 2px rgba(23, 24, 26, .10);
	transition: transform var(--sox-t-fast) var(--sox-ease), box-shadow var(--sox-t-fast) var(--sox-ease);
}

.sox-swatch-link:hover .sox-swatch { transform: translateY(-2px); }

/* A pale swatch needs a visible edge or it disappears into the white card. */
.sox-swatch--pale { border-color: var(--sox-line-grey); }

/* No colour could be resolved from the name - show a hatch rather than a lie. */
.sox-swatch--unknown {
	background:
		repeating-linear-gradient(
			45deg,
			var(--sox-cream-warm) 0 5px,
			var(--sox-line) 5px 10px
		);
}

.sox-swatch__label {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-micro);
	font-weight: var(--sox-w-semibold);
	line-height: 1.2;
	color: var(--sox-text-body);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.sox-swatch__count {
	font-size: 9px;
	font-weight: var(--sox-w-bold);
	color: var(--sox-text-faint);
}

.sox-widget--swatches li.chosen .sox-swatch {
	box-shadow: 0 0 0 2px var(--sox-white), 0 0 0 4px var(--sox-orange);
}

.sox-widget--swatches li.chosen .sox-swatch__label { color: var(--sox-orange-deep); font-weight: var(--sox-w-extrabold); }

/* --- Scrollable list, for long brand lists ------------------------------- */

.sox-filter-list--scroll {
	max-height: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 4px;
}

.sox-filter-list--scroll::-webkit-scrollbar { width: 6px; }
.sox-filter-list--scroll::-webkit-scrollbar-thumb { background: var(--sox-line-grey); border-radius: 3px; }


/* ==========================================================================
   5. CART AND CHECKOUT — width and button
   --------------------------------------------------------------------------
   The cart previously sat in a 920px container while its masthead used the
   site's 1280px one, so the heading and the content started at different
   places and the totals column was too tight for the checkout button to fit on
   one line.
   ========================================================================== */

.sox-checkout-page .sox-container { max-width: var(--sox-container); }

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout { max-width: none; }

/* Give the totals column enough room that the button never wraps. */
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-checkout .wc-block-components-sidebar {
	min-width: 300px;
}

/* WooCommerce Blocks underlines its button label. */
.wc-block-cart__submit-button,
.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	text-decoration: none !important;
	white-space: nowrap;
}

.wc-block-components-button__text {
	text-decoration: none !important;
}

.wc-block-cart__submit-button {
	padding-inline: var(--sox-space-5);
	font-size: var(--sox-fs-sm);
}

@media (max-width: 900px) {
	.wc-block-cart .wc-block-cart__sidebar,
	.wc-block-checkout .wc-block-components-sidebar { min-width: 0; }

	.wc-block-cart__submit-button { white-space: normal; }
}


/* ==========================================================================
   6. FOOTER — column count
   --------------------------------------------------------------------------
   The grid used to hard-code a column for the footer menu. With no menu
   assigned that column rendered empty, leaving a hole on the right. The count
   is now supplied by footer.php based on what is actually being rendered.
   ========================================================================== */

.sox-footer__inner {
	grid-template-columns:
		1.35fr
		repeat(var(--sox-footer-cols, 3), minmax(0, 1fr));
}

@media (max-width: 900px) {
	.sox-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.sox-footer__inner { grid-template-columns: minmax(0, 1fr); }
}