/*
 * WooCommerce integration styling: shop/category archives + single product.
 * Only loaded on WooCommerce views (see inc/enqueue.php).
 *
 * Styles WooCommerce's own native markup (content-product.php, tabs.php,
 * product-image.php, etc. — none of it overridden, see inc/woocommerce-loop.php
 * and inc/woocommerce-single-product.php for the hook-based integration).
 *
 * Desktop-first: unprefixed rules are the desktop layout; max-width queries
 * at 1024 / 767 / 374px restructure for tablet / phone / smallest phones.
 */

/*
 * Catalog-only container width override (Settings > Catalog Layout).
 * `.gs-wc-page` (added by gs_superstore_wc_wrapper_open()) only wraps the
 * shop/category/search/single-product container, so this never touches
 * the site-wide `.gs-container` max-width used by the header, footer, or
 * any other page — two classes beats style.css's one-class `.gs-container`
 * rule with no `!important` needed. Defaults to the same 1280px as the
 * site-wide container, so nothing changes unless explicitly configured.
 */
.gs-container.gs-wc-page {
	max-width: var(--gs-catalog-container-max-width, 1280px);
}

/* ---------- Breadcrumb ---------- */

.woocommerce-breadcrumb {
	margin: var(--gs-space-md) 0;
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
}

.woocommerce-breadcrumb a {
	color: var(--gs-color-text-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--gs-color-primary);
	text-decoration: underline;
}

/* ---------- Shop / category header ---------- */

.woocommerce-products-header {
	margin-bottom: var(--gs-space-md);
}

.woocommerce-products-header__title.page-title {
	font-size: 1.75rem;
	margin-bottom: var(--gs-space-sm);
}

.term-description,
.page-description {
	max-width: 75ch;
	margin-bottom: var(--gs-space-lg);
	color: var(--gs-color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.term-description > *:last-child,
.page-description > *:last-child {
	margin-bottom: 0;
}

/* Subcategory tiles reuse the same "card" visual language as our category cards. */

ul.products li.product-category {
	list-style: none;
}

ul.products li.product-category a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	height: 100%;
	padding: var(--gs-space-lg) var(--gs-space-sm);
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

ul.products li.product-category a:hover {
	border-color: var(--gs-color-accent);
	box-shadow: var(--gs-shadow-md);
}

ul.products li.product-category img {
	border-radius: 50%;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.woocommerce-loop-category__title {
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0;
}

.woocommerce-loop-category__title mark.count {
	background: none;
	color: var(--gs-color-text-muted);
	font-weight: 400;
}

/* ---------- Result count + ordering ---------- */

.woocommerce-before-shop-loop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gs-space-sm);
	margin-bottom: var(--gs-space-md);
}

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

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select.orderby {
	min-height: 44px;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-sm);
	background-color: var(--gs-color-background);
	font-size: 0.875rem;
	color: var(--gs-color-text);
}

/* ---------- Shop layout: optional filter sidebar + main content ---------- */

.gs-shop-layout {
	display: grid;
	gap: var(--gs-space-xl);
	align-items: start;
	padding-block: var(--gs-space-lg) var(--gs-space-2xl);
}

.gs-shop-layout--with-sidebar {
	grid-template-columns: 260px 1fr;
}

.gs-shop-layout--full {
	grid-template-columns: 1fr;
}

.gs-shop-layout__main,
.gs-shop-layout__sidebar {
	/*
	 * Grid items default to min-width:auto, which resolves to their content's
	 * min-content size — a long unbroken string anywhere inside (a spec value,
	 * an unwrapped tab list, a URL) would otherwise force this whole track
	 * wider than the viewport instead of letting its own children wrap/scroll.
	 * This is the root fix for the mobile single-product overflow.
	 */
	min-width: 0;
}

.gs-shop-layout__sidebar {
	position: sticky;
	top: calc(1px + var(--gs-space-md));
	/*
	 * Root-cause fix: .gs-shop-layout__main is FIRST in source order
	 * (inc/woocommerce-loop.php opens it on woocommerce_before_main_content,
	 * closes it, then the sidebar prints after on woocommerce_sidebar — main
	 * before sidebar, intentionally, so a screen reader/crawler reaches the
	 * product grid before the filter widgets). But .gs-shop-layout--with-
	 * sidebar's grid-template-columns is "260px 1fr" — narrow track first,
	 * wide track second — and CSS Grid auto-placement fills tracks in
	 * source order by default. Without this, the FIRST DOM child (main,
	 * the product grid) lands in the narrow 260px track and the SECOND
	 * (sidebar) inflates into the wide 1fr track: products squeezed into
	 * one narrow column, filters stretched across most of the row. `order`
	 * re-sorts grid placement without touching source order, so the
	 * sidebar visually/structurally takes the narrow left track and main
	 * gets the full remaining width, while accessibility/SEO reading order
	 * stays unchanged. (The existing 767px breakpoint below already sets
	 * its own order for the single-column stacked mobile layout — that
	 * override is unaffected by this.)
	 */
	order: -1;
}

.gs-widget {
	margin-bottom: var(--gs-space-lg);
	padding-bottom: var(--gs-space-lg);
	border-bottom: 1px solid var(--gs-color-border);
}

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

.gs-widget__title {
	font-size: 0.9375rem;
	margin-bottom: var(--gs-space-sm);
}

.gs-widget ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.gs-widget li a {
	font-size: 0.875rem;
	color: var(--gs-color-text);
}

.gs-widget li a:hover {
	color: var(--gs-color-primary);
}

.gs-widget .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
}

.gs-widget .price_slider_amount .button {
	min-height: 36px;
	padding: 0.4rem 0.9rem;
	background: var(--gs-color-primary);
	color: #fff;
	border-radius: var(--gs-radius-sm);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ---------- "In Stock" filter (plain link styled as a checkbox) ---------- */

.gs-stock-filter {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	font-size: 0.875rem;
	color: var(--gs-color-text);
	text-decoration: none;
}

.gs-stock-filter:hover {
	color: var(--gs-color-primary);
}

.gs-stock-filter__box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--gs-color-border);
	border-radius: 4px;
	position: relative;
}

.gs-stock-filter.is-active .gs-stock-filter__box {
	background: var(--gs-color-primary);
	border-color: var(--gs-color-primary);
}

.gs-stock-filter.is-active .gs-stock-filter__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------- Product grid (shop loop, related products, upsells) ---------- */

/*
 * Catalog Layout system (2026-08-03) — replaces an earlier `auto-fit` +
 * `minmax(_, 1fr)` fluid grid. That approach filled 100% of the row width
 * with no leftover gap, but auto-fit collapses any UNFILLED tracks and
 * lets the remaining `1fr` items expand into the freed space — so a
 * category/search/related-products result with fewer items than would
 * normally fill a row stretched those few cards to fill the entire row
 * (a single result became one giant full-width card). That is CSS Grid's
 * documented auto-fit behaviour, not a bug in the rule itself, but it
 * directly conflicts with the "one product = one normal-width card"
 * requirement for a dense electronics catalog.
 *
 * Explicit `repeat(N, 1fr)` (N from Settings > Catalog Layout, via the
 * --gs-catalog-cols-* custom properties — see
 * inc/catalog-layout-settings.php) fixes this at the root: an explicit
 * grid ever collapses unfilled tracks regardless of item count, so a lone
 * item occupies exactly one of the N equal-width column tracks and the
 * rest of the row stays visibly empty, while a full row of N+ items still
 * divides 100% of the width evenly with no leftover gap — both
 * requirements satisfied by the same rule, no auto-fit/minmax tradeoff.
 *
 * `.related.products` / `.upsells.products` (single-product page) are
 * also `ul.products` elements and inherit this rule, then get their own
 * higher-specificity override below with independent --gs-related-cols-*
 * values — same underlying mechanism, configured separately per the
 * admin settings.
 */
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--gs-catalog-cols-large-desktop, 5), 1fr);
	gap: var(--gs-catalog-gap, 1rem);
	margin: 0;
	padding: 0;
}

/*
 * Same explicit column count as the no-sidebar rule above — the
 * available track width is narrower next to the filter sidebar, so cards
 * are proportionally narrower here, but the COLUMN COUNT (and therefore
 * "N products = N cards, not N cards stretched") stays identical
 * regardless of whether the sidebar is present.
 *
 * Deliberately placed here, immediately BEFORE the `@media (max-width:
 * 1440px)` step-down below, not after it. `.gs-shop-layout--with-sidebar
 * ul.products` and this file's own `@media (max-width: 1440px) {
 * .gs-shop-layout--with-sidebar ul.products { ... } }` rule are the exact
 * same selector — equal specificity — so when both are present in the
 * stylesheet, CSS resolves the tie by source order, not by whether one is
 * inside a media query. A media-query-scoped rule gets no specificity
 * boost from the media query itself. Placing this unconditional
 * declaration AFTER the media query (as an earlier version of this file
 * did) made it always win, at every viewport, silently defeating the
 * 1440px step-down for sidebar pages only (found 2026-08-03: sidebar
 * category pages stayed at 5 columns below 1440px instead of the
 * configured 4). Keeping it BEFORE the media query means the media query
 * — later in source order and matching whenever the viewport actually
 * qualifies — correctly wins at ≤1440px, exactly like the no-sidebar
 * `ul.products` rule already did.
 */
.gs-shop-layout--with-sidebar ul.products {
	grid-template-columns: repeat(var(--gs-catalog-cols-large-desktop, 5), 1fr);
}

@media (max-width: 1440px) {
	ul.products,
	.gs-shop-layout--with-sidebar ul.products {
		grid-template-columns: repeat(var(--gs-catalog-cols-desktop, 4), 1fr);
	}
}

/*
 * Related Products / Upsells — independent column counts (Settings >
 * Catalog Layout > "Related Products"). WooCommerce wraps these in
 * `<section class="related products">` / `<section class="up-sells
 * upsells products">`, each containing its OWN nested `<ul class="products
 * columns-N">` — the "related"/"upsells" class lives on the outer
 * <section>, never on the actual grid <ul> (confirmed by reading
 * templates/single-product/related.php and up-sells.php, not assumed) —
 * so the selector must reach that descendant ul, not just match
 * `.related.products` as if it were the grid element itself. Specificity
 * (.related.products ul.products = 3 classes) naturally beats the plain
 * `ul.products` rule above with no extra selector games needed;
 * related/upsells never render inside `.gs-shop-layout--with-sidebar`
 * (the sidebar never renders on a single product page — see
 * gs_superstore_has_shop_sidebar_content()), so there is no competing
 * sidebar-scoped selector to out-specify here.
 */
.related.products ul.products,
.upsells.products ul.products {
	grid-template-columns: repeat(var(--gs-related-cols-desktop, 4), 1fr);
}

/*
 * WooCommerce's own bundled CSS puts a `content: " "` clearfix on ::before/
 * ::after (left over from its float-based layout). As a grid container,
 * those generated boxes become two extra, invisible grid items — under an
 * EXPLICIT `repeat(N, 1fr)` grid they would silently occupy 2 of the N
 * defined tracks ahead of the real products (pushing genuine items into
 * later columns/rows and making the "empty tracks stay visibly empty"
 * behaviour unreliable), so this neutralization stays required even
 * though the grid itself no longer uses auto-fit.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	/* Must match WooCommerce's own ".woocommerce ul.products::before/after"
	   specificity (two classes) to actually win — a plain "ul.products::before"
	   loses to it regardless of source order. */
	content: none;
}

/*
 * `.woocommerce`/`.woocommerce-page` prefixed — including the
 * `[class*="columns-"]` attribute-selector variant — to match (and, with
 * source order, beat) WooCommerce's own float-based rules in
 * woocommerce-layout.css AND woocommerce-smallscreen.css
 * (".woocommerce ul.products li.product{float:left;width:22.05%}" and
 * ".woocommerce ul.products[class*=columns-] li.product{float:left;width:48%}").
 * A plain "ul.products li.product" selector loses to both and silently
 * reintroduces float layout under our grid, which is why single/few-item
 * rows weren't stretching to fill the row.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none;
	width: auto;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

ul.products li.product:hover {
	box-shadow: var(--gs-shadow-md);
	border-color: var(--gs-color-accent);
}

.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
}

/*
 * A single bounded image area applies to every card, real photo or
 * WooCommerce's own placeholder alike — this selector matches both (the
 * placeholder is rendered as a normal <img class="woocommerce-placeholder
 * wp-post-image"> in the same position by wc_placeholder_img()), so a
 * missing-image product can never render an oversized box the way an
 * unconstrained placeholder otherwise would. object-fit: contain (not
 * cover) so an unusually shaped component is never cropped — the ratio
 * itself is admin-configurable (Settings > Catalog Layout).
 */
ul.products li.product img {
	aspect-ratio: var(--gs-catalog-image-ratio, 1 / 1);
	object-fit: contain;
	background: var(--gs-color-background-subtle);
	padding: var(--gs-space-sm);
	width: 100%;
	height: auto;
}

.onsale {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 1;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	background: var(--gs-color-danger);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.woocommerce-loop-product__title {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	margin: var(--gs-space-sm) var(--gs-space-md) 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.gs-loop-sku {
	margin: 0.3rem var(--gs-space-md) 0;
	font-size: 0.75rem;
	color: var(--gs-color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-loop-brand {
	margin: 0.15rem var(--gs-space-md) 0;
	font-size: 0.75rem;
	color: var(--gs-color-text-muted);
	font-weight: 600;
}

ul.products .price {
	display: block;
	margin: 0.4rem var(--gs-space-md) 0;
	font-weight: 700;
	font-size: 1rem;
	color: var(--gs-color-primary);
}

ul.products .price del {
	margin-inline-end: 0.4rem;
	color: var(--gs-color-text-muted);
	font-weight: 400;
	font-size: 0.875rem;
}

ul.products .price ins {
	text-decoration: none;
}

/* GST-inclusive note — subtle, compact-card context (shop/category/search/related/upsells) */
ul.products .price .gs-gst-note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--gs-color-text-muted);
}

.gs-loop-stock {
	margin: 0.35rem var(--gs-space-md) 0;
	font-size: 0.75rem;
	font-weight: 600;
}

.gs-loop-stock--instock {
	color: var(--gs-color-success);
}

.gs-loop-stock--outofstock {
	color: var(--gs-color-danger);
}

.gs-loop-stock--onbackorder {
	color: var(--gs-color-text-muted);
}

.star-rating {
	margin: 0.3rem var(--gs-space-md) 0;
	font-size: 0.8125rem;
	color: var(--gs-color-accent);
}

ul.products li.product .button {
	display: block;
	margin: var(--gs-space-sm) var(--gs-space-md) var(--gs-space-md);
	padding: 0.6rem 1rem;
	min-height: 44px;
	text-align: center;
	background: transparent;
	color: var(--gs-color-primary);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
	font-weight: 700;
	font-size: 0.875rem;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

ul.products li.product .button:hover {
	border-color: var(--gs-color-primary);
	background: var(--gs-color-background-subtle);
}

ul.products li.product .button.loading {
	opacity: 0.6;
}

/* ---------- Pagination ---------- */

.woocommerce-pagination {
	margin-top: var(--gs-space-xl);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers li {
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.5rem;
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
}

.woocommerce-pagination .page-numbers a:hover {
	border-color: var(--gs-color-primary);
	color: var(--gs-color-primary);
}

.woocommerce-pagination .page-numbers .current {
	background: var(--gs-color-primary);
	border-color: var(--gs-color-primary);
	color: #fff;
}

/* =========================================================================
   Single product
   ========================================================================= */

.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gs-space-xl);
	padding-block: var(--gs-space-lg) var(--gs-space-2xl);
}

/*
 * WooCommerce hooks the tabs, upsells and related-products sections onto
 * `woocommerce_after_single_product_summary`, which fires *inside*
 * div.product (before its closing tag) — so they're extra grid children
 * here, not siblings after it. Without this they get auto-placed into the
 * two-column track above alongside the gallery/summary row instead of
 * spanning full width below it.
 */
.single-product div.product > :not(.images):not(.summary) {
	grid-column: 1 / -1;
}

/* Gallery */

.woocommerce-product-gallery {
	/* Same min-width:auto grid-item fix as .gs-shop-layout__main — without
	   this, the gallery column refuses to shrink below its own min-content
	   size and both columns of div.product get forced wide together. */
	min-width: 0;
}

.woocommerce-product-gallery__wrapper {
	border-radius: var(--gs-radius-lg);
	overflow: hidden;
	background: var(--gs-color-background-subtle);
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li {
	list-style: none;
	width: 64px;
}

.flex-control-thumbs img {
	border-radius: var(--gs-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--gs-color-background-subtle);
}

.flex-control-thumbs img.flex-active {
	border-color: var(--gs-color-primary);
}

/* Summary column */

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

.single-product .summary.entry-summary > .product_title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	overflow-wrap: anywhere;
}

.product_meta {
	margin: 0 0 var(--gs-space-sm);
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	overflow-wrap: anywhere;
}

.product_meta > span {
	display: inline-block;
}

.product_meta .sku_wrapper .sku {
	font-weight: 700;
	color: var(--gs-color-text);
}

.gs-product-brand-mpn {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0 0 var(--gs-space-md);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.gs-product-brand-mpn a {
	color: var(--gs-color-primary);
	font-weight: 600;
}

.gs-product-mpn {
	color: var(--gs-color-text-muted);
}

.single-product .summary .star-rating {
	margin: 0 0 var(--gs-space-sm);
}

.single-product .summary p.price {
	font-size: 1.625rem;
	font-weight: 800;
	color: var(--gs-color-primary);
	margin: 0 0 var(--gs-space-md);
}

.single-product .summary p.price del {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--gs-color-text-muted);
	margin-inline-end: 0.5rem;
}

.single-product .summary p.price ins {
	text-decoration: none;
}

/* GST-inclusive note — more visible on the single-product page than on compact cards */
.single-product .summary p.price .gs-gst-note {
	display: inline-block;
	margin-inline-start: 0.6rem;
	padding: 0.2rem 0.55rem;
	vertical-align: middle;
	background: rgba(26, 163, 201, 0.12);
	color: var(--gs-color-accent);
	border-radius: var(--gs-radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
}

.woocommerce-product-details__short-description {
	margin-bottom: var(--gs-space-md);
	color: var(--gs-color-text-muted);
	max-width: 60ch;
}

/* Stock + add-to-cart form */

.single-product p.stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--gs-space-md);
	padding: 0.35rem 0.75rem;
	border-radius: var(--gs-radius-sm);
	font-size: 0.8125rem;
	font-weight: 700;
}

.single-product p.stock.in-stock {
	color: var(--gs-color-success);
	background: var(--gs-color-success-bg);
}

.single-product p.stock.out-of-stock {
	color: var(--gs-color-danger);
	background: var(--gs-color-danger-bg);
}

.single-product p.stock.available-on-backorder {
	color: var(--gs-color-text-muted);
	background: var(--gs-color-background-subtle);
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gs-space-md);
	margin-bottom: var(--gs-space-lg);
}

.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
	overflow: hidden;
}

.quantity .qty {
	width: 56px;
	min-height: 44px;
	border: 0;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--gs-color-text);
	-moz-appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gs-qty-btn {
	width: 40px;
	min-height: 44px;
	border: 0;
	background: var(--gs-color-background-subtle);
	color: var(--gs-color-text);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.gs-qty-btn:hover {
	background: var(--gs-color-border);
}

.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 2rem;
	background: var(--gs-color-primary);
	color: #fff;
	border: 0;
	border-radius: var(--gs-radius-md);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.single_add_to_cart_button:hover {
	background: var(--gs-color-primary-hover);
}

.single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Buy Now — shares .single_add_to_cart_button (base size/padding/radius/
 * font all come from that rule, and WooCommerce's own variation-selection
 * JS applies its disabled state to this button too, see inc/buy-now.php),
 * only background/text color differ so it reads as a distinct action next
 * to Add to Cart.
 *
 * Color is a darkened derivative of --gs-color-accent (#1aa3c9), not that
 * token verbatim: plain white text directly on #1aa3c9 measures only
 * 2.95:1 contrast (fails WCAG AA for this button's 16px/700-weight text,
 * which does not qualify as "large text"). #13748a keeps the same accent
 * hue but reaches 5.39:1; the hover shade #0d5060 reaches 9:1.
 */
.gs-buy-now-button {
	background: #13748a;
	color: #fff;
}

.gs-buy-now-button:hover {
	background: #0d5060;
}

.gs-buy-now-button:focus-visible {
	outline: 2px solid var(--gs-color-accent);
	outline-offset: 2px;
}

/* B2B block */

.gs-product-b2b {
	padding: var(--gs-space-md);
	margin-bottom: var(--gs-space-lg);
	background: var(--gs-color-background-subtle);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
}

.gs-product-b2b__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-sm);
	margin-bottom: var(--gs-space-sm);
}

.gs-product-b2b__note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
}

/* LED Display Solutions cross-link — single-product (only on LED Display
   category products, see gs_superstore_product_is_led_display()) and
   category-archive (only the LED Display term/children) variants. */

.gs-product-led-cross-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gs-space-sm);
	padding: var(--gs-space-md);
	margin-bottom: var(--gs-space-lg);
	background: var(--gs-color-background-subtle);
	border: 1px dashed var(--gs-color-accent);
	border-radius: var(--gs-radius-lg);
}

.gs-product-led-cross-link p {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

.gs-archive-led-cross-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gs-space-md);
	padding: var(--gs-space-lg);
	margin-bottom: var(--gs-space-lg);
	background: var(--gs-color-background-subtle);
	border: 1px dashed var(--gs-color-accent);
	border-radius: var(--gs-radius-lg);
}

.gs-archive-led-cross-link p {
	margin: 0;
	font-weight: 700;
	font-size: 1.0625rem;
}

/* ---------- Product tabs ---------- */

.woocommerce-tabs {
	margin-top: var(--gs-space-2xl);
	/*
	 * Without this, the mobile tab strip's horizontal-scroll rule below
	 * (overflow-x:auto + white-space:nowrap on unwrapped tab labels) makes
	 * this wrapper's min-content size the width of every tab label laid end
	 * to end, which — since this is a plain block box, not a flex/grid item
	 * — still gets used by the browser as this element's effective width
	 * instead of the 100%-of-parent width normal block flow would give it.
	 */
	min-width: 0;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0 0 var(--gs-space-lg);
	padding: 0;
	border-bottom: 1px solid var(--gs-color-border);
}

.woocommerce-tabs ul.tabs li {
	list-style: none;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--gs-space-md);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--gs-color-text-muted);
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--gs-color-primary);
	border-bottom-color: var(--gs-color-primary);
}

.woocommerce-Tabs-panel {
	max-width: 80ch;
	/*
	 * Raw imported product descriptions occasionally contain a long,
	 * space-free string (e.g. an unconverted citation/reference URL left
	 * over from AI-assisted content generation, such as
	 * "(https://example.com/very/long/path?query=...)") with nothing for
	 * the browser to break on. Without this, that single "word" refuses
	 * to wrap, forcing .woocommerce-Tabs-panel — and with no overflow-x
	 * containment anywhere above it in the ancestor chain, the whole
	 * page — wider than the viewport (confirmed 2026-08-03: reproduced on
	 * a real imported product at mobile widths, page scrollWidth 539px
	 * against a 375px viewport, traced via bisection to this exact
	 * paragraph's un-wrapped content, not the gallery/zoom image any
	 * import first suspected). Same technique already used for spec/
	 * attribute values elsewhere in this file — content here is
	 * real product data, never guaranteed to be short.
	 */
	overflow-wrap: anywhere;
}

.woocommerce-Tabs-panel h2 {
	font-size: 1.25rem;
}

.gs-spec-list {
	margin: 0;
	border-top: 1px solid var(--gs-color-border);
}

.gs-spec-list__row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--gs-space-md);
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--gs-color-border);
}

.gs-spec-list__row dt {
	margin: 0;
	font-weight: 700;
	color: var(--gs-color-text);
	overflow-wrap: anywhere;
}

.gs-spec-list__row dd {
	margin: 0;
	min-width: 0;
	color: var(--gs-color-text-muted);
	overflow-wrap: anywhere;
}

.woocommerce-product-attributes {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.woocommerce-product-attributes-item__label {
	width: 220px;
	padding: 0.65rem 1rem 0.65rem 0;
	text-align: left;
	font-weight: 700;
	border-bottom: 1px solid var(--gs-color-border);
	vertical-align: top;
	overflow-wrap: anywhere;
}

.woocommerce-product-attributes-item__value {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--gs-color-border);
	color: var(--gs-color-text-muted);
	overflow-wrap: anywhere;
}

.woocommerce-product-attributes-item__value p {
	margin: 0;
}

.gs-product-brand-blurb {
	margin-top: var(--gs-space-lg);
	padding-top: var(--gs-space-lg);
	border-top: 1px solid var(--gs-color-border);
}

.gs-product-brand-blurb h3 {
	font-size: 1.0625rem;
}

/* ---------- Related products ---------- */

.related.products,
.upsells.products {
	margin-top: var(--gs-space-2xl);
	padding-top: var(--gs-space-2xl);
	border-top: 1px solid var(--gs-color-border);
}

.related.products > h2,
.upsells.products > h2 {
	font-size: 1.375rem;
	margin-bottom: var(--gs-space-lg);
}

/* =========================================================================
   My Account (classic shortcode-based — [woocommerce_my_account])
   ========================================================================= */

.woocommerce-account .gs-page__title {
	margin-bottom: var(--gs-space-md);
}

/*
 * The [woocommerce_my_account] shortcode wraps its own output in an extra
 * <div class="woocommerce">, so the nav+content pair are grandchildren of
 * .gs-page__content, not direct children — the grid has to target that
 * inner wrapper.
 */
.woocommerce-account .gs-page__content > .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--gs-space-xl);
	align-items: start;
}

/*
 * ".woocommerce-account .woocommerce-MyAccount-navigation" prefix matches
 * (and, with source order, beats) WooCommerce's own
 * ".woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}"
 * in woocommerce-layout.css — a plain ".woocommerce-MyAccount-navigation"
 * selector has lower specificity and loses to it, leaving the float/width
 * in place under our grid layout.
 */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	/* Without this, this item's min-content (the horizontally-scrolling
	   pill list on phone) can inflate the grid track itself beyond the
	   viewport instead of scrolling within its own box — the same
	   min-width:auto grid-item default covered elsewhere in this file. */
	min-width: 0;
	/* Explicit placement rather than relying on auto-placement order —
	   grid-column: 1 (paired with .woocommerce-MyAccount-content below). */
	grid-column: 1;
	grid-row: 1;
	position: sticky;
	top: calc(1px + var(--gs-space-md));
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	list-style: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem var(--gs-space-md);
	border-radius: var(--gs-radius-md);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--gs-color-text);
	min-height: 44px;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--gs-color-background-subtle);
	color: var(--gs-color-primary);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--gs-color-primary);
	color: #fff;
}

/* Same float/width override as .woocommerce-MyAccount-navigation above —
   WooCommerce's own ".woocommerce-account .woocommerce-MyAccount-content"
   sets float:right;width:68%. */
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-MyAccount-content > p:first-child {
	color: var(--gs-color-text-muted);
}

.woocommerce-MyAccount-content a {
	color: var(--gs-color-primary);
}

/* Orders table: same responsive label-stacking technique as the product
   attributes table (Phase 3) — WooCommerce supplies data-title attributes
   already; this just skins it and hands off to that pattern on phone. */

.woocommerce-orders-table,
.account-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-orders-table__header {
	padding-bottom: var(--gs-space-sm);
	border-bottom: 1px solid var(--gs-color-border);
	text-align: left;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gs-color-text-muted);
}

.woocommerce-orders-table__row {
	border-bottom: 1px solid var(--gs-color-border);
}

.woocommerce-orders-table__cell {
	padding-block: var(--gs-space-sm);
}

.woocommerce-orders-table__cell-order-status .order-status {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--gs-color-background-subtle);
	color: var(--gs-color-text-muted);
}

.woocommerce-orders-table__cell-order-status .order-status.status-completed,
.woocommerce-orders-table__cell-order-status .order-status.status-processing {
	background: var(--gs-color-success-bg);
	color: var(--gs-color-success);
}

.woocommerce-orders-table__cell-order-status .order-status.status-cancelled,
.woocommerce-orders-table__cell-order-status .order-status.status-failed {
	background: var(--gs-color-danger-bg);
	color: var(--gs-color-danger);
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions a.button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gs-color-primary);
	margin-inline-end: 0.4rem;
}

.woocommerce-orders-table__cell-order-actions .button:hover {
	border-color: var(--gs-color-primary);
	background: var(--gs-color-background-subtle);
}

/* Order details / view-order */

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: var(--gs-space-lg);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: 1.0625rem;
}

.order_details.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--gs-space-md);
}

.order_details.shop_table th,
.order_details.shop_table td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--gs-color-border);
	text-align: left;
}

.order_details.shop_table tfoot th,
.order_details.shop_table tfoot td {
	font-weight: 700;
}

.woocommerce-customer-details address {
	font-style: normal;
	color: var(--gs-color-text-muted);
	line-height: 1.6;
}

/* Addresses */

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gs-space-lg);
}

/* Same clearfix-phantom-grid-item fix as ul.products::before/::after
   (Phase 3) — WooCommerce's ".col2-set" clearfix content:" " pseudo-elements
   become extra grid items here, which would otherwise leave one address
   card's track incorrectly sized. */
.woocommerce-Addresses.col2-set::before,
.woocommerce-Addresses.col2-set::after {
	content: none;
}

/*
 * ".woocommerce-Addresses.col2-set" prefix matches (and, with source
 * order, beats) WooCommerce's own ".woocommerce .col2-set .col-1/.col-2
 * {float:left/right;width:48%}" — these address cards carry those same
 * col-1/col-2 classes (see myaccount/my-address.php), so a plain
 * ".woocommerce-Address" selector loses to WC's float/width under our grid.
 */
.woocommerce-Addresses.col2-set .woocommerce-Address {
	float: none;
	width: auto;
	padding: var(--gs-space-md);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gs-space-sm);
	margin-bottom: var(--gs-space-sm);
}

.woocommerce-Address-title h2 {
	font-size: 1rem;
	margin: 0;
}

.woocommerce-Address-title .edit {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gs-color-primary);
}

.woocommerce-Address address {
	font-style: normal;
	color: var(--gs-color-text-muted);
	line-height: 1.6;
}

/* Classic forms: edit account, edit address, login/register — shared
   form-row layout used across My Account's classic (non-block) forms. */

.woocommerce-form-row,
.form-row {
	margin-bottom: var(--gs-space-md);
}

.woocommerce-EditAccountForm,
.woocommerce-address-fields,
.woocommerce-ResetPassword,
.woocommerce-form-login,
.woocommerce-form-register {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gs-space-md);
}

.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-ResetPassword .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
	flex: 1 1 100%;
	margin-bottom: var(--gs-space-md);
}

/*
 * "form.woocommerce-EditAccountForm"/"form.woocommerce-address-fields"
 * matches (and, with source order, beats) WooCommerce's own
 * ".woocommerce form .form-row-first/.form-row-last{float;width:47%}" —
 * these ARE <form> elements, so the extra element selector brings the
 * specificity up to the same level as WC's rule.
 */
form.woocommerce-EditAccountForm .form-row-first,
form.woocommerce-EditAccountForm .form-row-last,
form.woocommerce-address-fields .form-row-first,
form.woocommerce-address-fields .form-row-last {
	float: none;
	width: auto;
	flex: 1 1 240px;
}

.woocommerce-EditAccountForm .clear,
.woocommerce-address-fields .clear {
	flex-basis: 100%;
	height: 0;
}

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

.woocommerce-Input,
.woocommerce-address-fields select {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem var(--gs-space-md);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
	font-family: var(--gs-font-body);
	font-size: 1rem;
	color: var(--gs-color-text);
}

.woocommerce-Input:focus,
.woocommerce-address-fields select:focus {
	border-color: var(--gs-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.12);
}

/*
 * ".woocommerce button.woocommerce-Button" matches (and, with source
 * order, beats) WooCommerce's own
 * ".woocommerce button.button{background-color:#e9e6ed;color:#515151}" —
 * this button carries both "woocommerce-Button" and "button" classes, and
 * WC's rule (class+element on both sides) has higher specificity than a
 * plain ".woocommerce-Button" selector.
 *
 * WooCommerce is inconsistent about casing here: account-edit/address forms
 * render capitalized "woocommerce-Button", but the login/register/lost-
 * password forms render lowercase "woocommerce-button" instead (plus the
 * plain "button" class) — both need covering or the login CTA falls back to
 * WC's default gray ".button" style.
 */
.woocommerce-Button,
button.woocommerce-Button,
.woocommerce button.woocommerce-Button,
.woocommerce-button,
button.woocommerce-button,
.woocommerce button.woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	background: var(--gs-color-primary);
	color: #fff;
	border: 0;
	border-radius: var(--gs-radius-md);
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
}

.woocommerce-Button:hover,
button.woocommerce-Button:hover,
.woocommerce button.woocommerce-Button:hover,
.woocommerce-button:hover,
button.woocommerce-button:hover,
.woocommerce button.woocommerce-button:hover {
	background: var(--gs-color-primary-hover);
}

/* =========================================================================
   Tablet (<= 1024px)
   ========================================================================= */

@media (max-width: 1024px) {
	ul.products,
	.gs-shop-layout--with-sidebar ul.products {
		grid-template-columns: repeat(var(--gs-catalog-cols-tablet, 3), 1fr);
	}

	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat(var(--gs-related-cols-tablet, 3), 1fr);
	}

	.gs-shop-layout--with-sidebar {
		grid-template-columns: 220px 1fr;
	}

	.single-product div.product {
		grid-template-columns: 1fr;
	}

	.gs-spec-list__row {
		grid-template-columns: 160px minmax(0, 1fr);
	}

	.woocommerce-product-attributes-item__label {
		width: 160px;
	}

	.woocommerce-account .gs-page__content > .woocommerce {
		grid-template-columns: 200px 1fr;
		gap: var(--gs-space-lg);
	}
}

/* =========================================================================
   Phone (<= 767px)
   ========================================================================= */

@media (max-width: 767px) {
	.gs-shop-layout {
		grid-template-columns: 1fr !important;
		padding-block: var(--gs-space-md) var(--gs-space-xl);
	}

	.gs-shop-layout__sidebar {
		position: static;
		order: 2;
	}

	.gs-shop-layout__main {
		order: 1;
	}

	/*
	 * Explicit column count from Settings > Catalog Layout (default 2),
	 * not auto-fit/minmax — same reasoning as the desktop/tablet rules
	 * above, and the same requirement this rule always had: an EXACT
	 * column count at every phone width from 320px to 767px, which only
	 * an explicit repeat(N, 1fr) can guarantee (an auto-fit/minmax range
	 * tuned for 320px would fit 4-5 columns by 767px, the top of this same
	 * breakpoint, and a range tuned for 767px would collapse to 1 column
	 * well before 320px).
	 *
	 * Must also explicitly re-declare the ".gs-shop-layout--with-sidebar
	 * ul.products" selector, not just bare "ul.products": that selector
	 * has higher specificity (2 classes vs 1), and the --with-sidebar
	 * class stays on the element at phone width even though the sidebar
	 * itself visually collapses to a full-width stacked block below the
	 * grid — so without this, the desktop/tablet with-sidebar rule keeps
	 * winning here regardless of this media query, and the grid silently
	 * stayed 1 column at every phone width. (Found via Chrome DevTools
	 * Protocol's getMatchedStylesForNode while verifying this fix — the
	 * bare-selector version looked correct by inspection but never
	 * actually won the cascade.)
	 */
	ul.products,
	.gs-shop-layout--with-sidebar ul.products {
		grid-template-columns: repeat(var(--gs-catalog-cols-mobile, 2), 1fr);
		gap: clamp(6px, calc(var(--gs-catalog-gap, 16px) * 0.6), 12px);
	}

	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat(var(--gs-related-cols-mobile, 2), 1fr);
	}

	/*
	 * Compact mobile card: at 2-per-row, a card is only ~135px wide at
	 * 320px viewport (~194px at 430px) — desktop's spacing/type scale
	 * doesn't fit two comfortably, so every card element gets its own
	 * smaller mobile-specific size rather than just shrinking via a
	 * transform/zoom. Functionality (SKU, brand, stock, price, sale badge,
	 * Add to Cart) is unchanged — only size/spacing.
	 */
	ul.products li.product img {
		padding: 0.35rem;
	}

	.onsale {
		top: 0.4rem;
		left: 0.4rem;
		padding: 0.15rem 0.4rem;
		font-size: 0.625rem;
	}

	.woocommerce-loop-product__title {
		font-size: 0.8125rem;
		line-height: 1.3;
		margin: 0.4rem 0.5rem 0;
	}

	.gs-loop-sku,
	.gs-loop-brand {
		margin-inline: 0.5rem;
		font-size: 0.6875rem;
	}

	ul.products .price {
		margin: 0.3rem 0.5rem 0;
		font-size: 0.8125rem;
	}

	ul.products .price del {
		display: block;
		margin-inline-end: 0;
		font-size: 0.75rem;
	}

	.gs-loop-stock {
		margin: 0.25rem 0.5rem 0;
		font-size: 0.6875rem;
	}

	.star-rating {
		margin: 0.25rem 0.5rem 0;
	}

	ul.products li.product .button {
		margin: 0.5rem 0.5rem 0.6rem;
		padding: 0.5rem 0.4rem;
		min-height: 40px;
		font-size: 0.75rem;
	}

	.woocommerce-products-header__title.page-title {
		font-size: 1.375rem;
	}

	.woocommerce-before-shop-loop {
		align-items: flex-start;
	}

	.single-product form.cart {
		align-items: stretch;
	}

	.single_add_to_cart_button {
		flex: 1 1 auto;
	}

	.gs-product-b2b__actions .gs-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	.gs-spec-list__row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	/* Stack the native attributes table into label/value pairs on phone —
	   tr/th/td forced to block so the table-layout:fixed column widths
	   (set for desktop/tablet) don't apply here. */
	.woocommerce-product-attributes,
	.woocommerce-product-attributes tbody,
	.woocommerce-product-attributes tr,
	.woocommerce-product-attributes-item__label,
	.woocommerce-product-attributes-item__value {
		display: block;
		width: auto;
	}

	.woocommerce-product-attributes tr {
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--gs-color-border);
	}

	.woocommerce-product-attributes-item__label {
		padding: 0 0 0.15rem;
		border-bottom: 0;
	}

	.woocommerce-product-attributes-item__value {
		border-bottom: 0;
		padding: 0;
	}

	.gs-spec-list__row {
		padding: 0.5rem 0;
	}

	.woocommerce-tabs ul.tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
	}

	/* My Account: nav becomes a horizontal scrollable strip above the
	   content instead of a sidebar — keeps every section one tap away
	   without spending vertical space on a stacked list. */
	.woocommerce-account .gs-page__content > .woocommerce {
		grid-template-columns: 1fr;
		gap: var(--gs-space-md);
	}

	/*
	 * Specificity must match the desktop rules being overridden
	 * (".woocommerce-account .woocommerce-MyAccount-content{grid-column:2}")
	 * — a plain ".woocommerce-MyAccount-content{grid-column:1}" here has
	 * lower specificity and silently loses, leaving content in column 2
	 * of a grid that only has one column at this width. Both also need
	 * grid-row reset — the desktop rules pin both to row 1 (so they sit
	 * side by side), which would otherwise overlap them in the same cell
	 * once they share a column here.
	 */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce-MyAccount-navigation {
		position: static;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 0.5rem;
		padding-bottom: 0.25rem;
		border-bottom: 1px solid var(--gs-color-border);
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}

	.woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
		padding: 0.6rem 0.9rem;
	}

	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	/* Orders table + order line-items table: same stacked label/value
	   pattern as the product attributes table above. */
	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table__cell,
	.order_details.shop_table,
	.order_details.shop_table tbody,
	.order_details.shop_table tfoot,
	.order_details.shop_table tr,
	.order_details.shop_table th,
	.order_details.shop_table td {
		display: block;
		width: auto;
	}

	.woocommerce-orders-table thead,
	.order_details.shop_table thead {
		display: none;
	}

	.woocommerce-orders-table__row {
		padding: var(--gs-space-sm) 0;
	}

	.woocommerce-orders-table__cell {
		padding-block: 0.2rem;
	}

	.woocommerce-orders-table__cell::before,
	.order_details.shop_table td[data-title]::before {
		content: attr(data-title) ": ";
		font-weight: 700;
		color: var(--gs-color-text);
	}

	.woocommerce-orders-table__cell-order-actions {
		padding-top: 0.5rem;
	}

	.order_details.shop_table th,
	.order_details.shop_table td {
		border-bottom: 0;
		padding: 0.2rem 0;
	}

	.order_details.shop_table tr {
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--gs-color-border);
	}
}

/* =========================================================================
   Extra-small phones (<= 374px)
   ========================================================================= */

@media (max-width: 374px) {
	/*
	 * Previously forced ul.products back to a single column here, which
	 * silently undid the 767px breakpoint's 2-column requirement for every
	 * width this rule covers (320-374px) — exactly the "one large product
	 * per row on mobile" behaviour that must NOT happen. Removed; 2 columns
	 * (repeat(2, 1fr), set in the 767px breakpoint) now applies all the way
	 * down to the smallest supported width instead.
	 */
	.single-product .summary p.price {
		font-size: 1.375rem;
	}
}