/**
 * 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;
}

.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 {
	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); }
}


/* ==========================================================================
   ==========================================================================
   FIX ROUND 2
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   1. GALLERY THUMBNAILS
   --------------------------------------------------------------------------
   Same failure as the product grid, in a different place. WooCommerce styles
   the thumbnail strip as floated quarters:

       .flex-control-thumbs li { float: left; width: 25%; }

   Inside a CSS grid that 25% measures against the grid CELL, not the strip, so
   each thumbnail collapsed to a quarter of its own column - about 39px.

   auto-fill rather than a fixed four: a product with five colourways then packs
   evenly instead of stranding the fifth alone on a second row.
   ========================================================================== */

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

.woocommerce-product-gallery .flex-control-thumbs::before,
.woocommerce-product-gallery .flex-control-thumbs::after {
	content: none !important;
	display: none !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-sm);
	cursor: pointer;
	opacity: .7;
	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);
}

@media (max-width: 480px) {
	.woocommerce-product-gallery .flex-control-thumbs {
		grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	}
}


/* ==========================================================================
   2. SHOP GRID ON MOBILE
   --------------------------------------------------------------------------
   WooCommerce has a second, more specific rule for small screens:

       @media (max-width: 768px) {
         .woocommerce ul.products[class*=columns-] li.product {
           width: 48%; float: left; clear: both;
         }
       }

   `width: 48%` gave the half-width card and `clear: both` forced one per row -
   both symptoms at once. The attribute selector makes it more specific than the
   desktop override, so it needs matching explicitly.

   Two products per row is the right default for a shop this size. One per row
   wastes the screen and turns browsing 258 products into a scrolling marathon.
   ========================================================================== */

.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.sox-product-grid[class*="columns-"] li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

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

/* Only below this does a two-up grid stop being readable. */
@media (max-width: 359px) {
	.sox-product-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Tighten the card at two-up so the name still has room. */
@media (max-width: 600px) {
	.sox-product-card__body { padding: 12px 12px 14px; }
	.sox-product-card__title { font-size: var(--sox-fs-2xs); }
	.sox-product-card__brand { font-size: 0.625rem; }
	.sox-product-card__foot { flex-wrap: wrap; gap: 4px; margin-top: var(--sox-space-2); }
	.sox-product-card__badge { top: 8px; left: 8px; }
}


/* ==========================================================================
   3. CART AND CHECKOUT LAYOUT
   --------------------------------------------------------------------------
   WooCommerce Blocks lays both pages out with the same component: a flex
   container holding a main column and a sidebar. It only goes two-column once
   its JavaScript has measured the container and added an `is-large` class.
   When that does not fire, or measures narrow, everything stacks - which is
   why the cart sat in one thin column and the checkout ran vertically.

   Driving the layout from CSS instead means it does not depend on that class
   arriving.
   ========================================================================== */

@media (min-width: 901px) {
	.wc-block-components-sidebar-layout {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: flex-start;
		gap: var(--sox-space-9);
	}

	.wc-block-components-sidebar-layout .wc-block-components-main {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		padding-right: 0 !important;
	}

	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		flex: 0 0 380px !important;
		width: 380px !important;
		max-width: 380px !important;
		padding-left: 0 !important;
	}

	/* On checkout the summary follows a long form, so keep it in view. */
	.wc-block-checkout .wc-block-components-sidebar {
		position: sticky;
		top: 110px;
	}
}

/* The totals panel reads as a distinct object, not loose text. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child,
.wc-block-cart__sidebar .wc-block-cart__totals-title {
	margin-top: 0;
}

.wc-block-cart__sidebar > .wc-block-components-sidebar,
.wc-block-checkout__sidebar > .wc-block-components-sidebar,
.wc-block-components-sidebar {
	border-radius: var(--sox-radius-lg);
}


/* ==========================================================================
   4. CART AND CHECKOUT TYPE
   The Blocks default scale is noticeably smaller than the rest of the site.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-size: var(--sox-fs-md);
}

.wc-block-components-product-name {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-base) !important;
	font-weight: var(--sox-w-semibold);
	line-height: var(--sox-lh-snug);
	color: var(--sox-ink);
}

.wc-block-components-product-name:hover { color: var(--sox-orange-deep); }

.wc-block-cart-item__wrap .wc-block-components-product-price,
.wc-block-components-product-price {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-sm) !important;
	font-weight: var(--sox-w-bold);
	color: var(--sox-ink);
}

.wc-block-components-product-metadata,
.wc-block-components-product-details {
	font-size: var(--sox-fs-4xs) !important;
	color: var(--sox-text-muted);
}

.wc-block-components-totals-item__label {
	font-size: var(--sox-fs-sm);
	color: var(--sox-text-body);
}

.wc-block-components-totals-item__value {
	font-size: var(--sox-fs-sm);
}

.wc-block-components-totals-footer-item {
	font-size: var(--sox-fs-lg) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-lg) !important;
	font-weight: var(--sox-w-extrabold);
	color: var(--sox-ink);
}

.wc-block-cart__totals-title,
.wc-block-components-title {
	font-size: var(--sox-fs-h3-sm) !important;
}

/* Column headings in the cart table */
.wc-block-cart__header-image,
.wc-block-cart__header-product,
.wc-block-cart__header-total {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs) !important;
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sox-text-muted);
}

.wc-block-cart-item__image img {
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-sm);
}


/* ==========================================================================
   5. CART: THE PICKUP LINE
   --------------------------------------------------------------------------
   The shipping row is hidden in the CART only. WooCommerce auto-selects the
   first pickup rate, so it read "Pickup (Oak Forest)" as though the store were
   already decided - wrong for anyone collecting from Hoffman Estates.

   Deleting it outright would leave "what does shipping cost?" unanswered, which
   loses sales, so it is replaced with a line that states the truth: free,
   collected in store, chosen at checkout. The real selector at CHECKOUT is
   untouched - hence the .wc-block-cart scoping on every rule here.
   ========================================================================== */

.wc-block-cart .wc-block-components-totals-shipping,
.wc-block-cart .wc-block-components-totals-item--shipping,
.wc-block-cart .wc-block-components-shipping-rates-control,
.wc-block-cart .wc-block-components-totals-shipping__via {
	display: none !important;
}

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

.sox-cart-pickup__icon { flex: none; color: var(--sox-orange-strong); }

.sox-cart-pickup__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-cart-pickup__text {
	margin: 0;
	font-size: var(--sox-fs-4xs);
	line-height: var(--sox-lh-normal);
	color: var(--sox-text-sub);
}

/* The block cart renders in JavaScript with no server-side hook inside it, so
   the notice is printed to the footer and moved into the totals column here. */
.sox-cart-pickup-holder { display: none; }

.woocommerce-cart .wc-block-cart__sidebar .sox-cart-pickup { margin-top: var(--sox-space-4); }


/* ==========================================================================
   6. STORE CARD: "LOCATED IN"
   ========================================================================== */

.sox-store__located {
	margin: var(--sox-space-2) 0 0;
	padding-inline: var(--sox-space-2);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-4xs);
	font-weight: var(--sox-w-semibold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-orange-strong);
}

.sox-store__located + .sox-store__address { margin-top: var(--sox-space-2); }


/* ==========================================================================
   7. REVIEW CARD: WHICH STORE
   With two locations, "great service" is more useful when you know where.
   ========================================================================== */

.sox-review__store {
	margin: 1px 0 0;
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-micro);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-orange-ink);
}


/* ==========================================================================
   ==========================================================================
   FIX ROUND 3
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   1. PRODUCT GALLERY — the frame goes on the viewport, not the track
   --------------------------------------------------------------------------
   This fixes a bug I caused in fix round 2. Making the gallery fill its column,
   I set `width: 100% !important` and `overflow: hidden` on
   `.woocommerce-product-gallery__wrapper` and stripped the float off
   `.woocommerce-product-gallery__image`.

   That wrapper is not the image frame. It is FlexSlider's TRACK: the strip that
   holds every slide side by side and slides horizontally. FlexSlider's script
   sets it to N x the viewport width and moves it with a transform, and it sets
   each slide's width and float to lay them out in a row.

   Clamping the track to 100% and clipping its overflow put every slide after
   the first outside a container that then hid them. The track still slid
   correctly — to empty space. Result: the first image showed, clicking a
   thumbnail highlighted it, and the main image went blank.

   So: FlexSlider owns the track and slide geometry. The visible frame — border,
   radius, clipping — belongs on `.flex-viewport`, which is the window the
   slides move behind. That is what it is for.
   ========================================================================== */

/* The window. Frame and clipping live here. */
.woocommerce-product-gallery .flex-viewport {
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-lg);
	overflow: hidden;
	background: var(--sox-placeholder);
}

/*
 * When FlexSlider has not initialised there is no .flex-viewport, so the frame
 * has to fall back to the track. :has() keeps the two cases from fighting; a
 * browser without it simply shows an unframed image, which is a cosmetic loss
 * rather than a broken gallery.
 */
.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-lg);
	overflow: hidden;
	background: var(--sox-placeholder);
}

/*
 * The image fills whatever slide it sits in. This alone is what makes the
 * gallery fill its column — no width forcing on the track or the slide is
 * needed, and adding any breaks the slider.
 */
.woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto;
	display: block;
}

/* A slide must be free to be laid out by the slider. Explicitly reset anything
   an earlier rule in this file may have imposed. */
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
	float: left;
}


/* ==========================================================================
   2. BRAND TILES AS LINKS
   ========================================================================== */

.sox-brands__item--link {
	color: inherit;
	text-decoration: none;
	transition:
		border-color var(--sox-t-fast) var(--sox-ease),
		transform var(--sox-t-fast) var(--sox-ease),
		box-shadow var(--sox-t-fast) var(--sox-ease);
}

.sox-brands__item--link:hover,
.sox-brands__item--link:focus-visible {
	border-color: var(--sox-orange);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(23, 24, 26, .10);
}

.sox-brands__item--link:hover .sox-brands__name { color: var(--sox-orange-deep); }


/* --- Browse-only note -----------------------------------------------------
 * Sits where Add to Cart would be while online ordering is switched off.
 * Styled as a piece of information rather than a disabled button — there is
 * nothing to click, and a greyed-out button invites people to try.
 * ------------------------------------------------------------------------ */
.sox-browse-note {
	display: flex;
	align-items: center;
	gap: var(--sox-space-3);
	margin: var(--sox-space-5) 0;
	padding: var(--sox-space-4) var(--sox-space-5);
	border: 1px solid var(--sox-line);
	border-left: 4px solid var(--sox-orange);
	border-radius: var(--sox-radius-md);
	background: var(--sox-cream-pill);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-sm);
	font-weight: var(--sox-w-bold);
	line-height: 1.45;
	color: var(--sox-brown);
}

.sox-browse-note svg { flex: 0 0 auto; }