/**
 * Stray Commerce — WooCommerce styles (conditional).
 *
 * Loaded only on Woo pages via inc/enqueue.php, after main.css. Restyles
 * WooCommerce's default markup with design tokens — no template overrides,
 * no markup/logic changes. Semantic tokens only; the only literal breakpoints
 * are the documented 48rem (tablet) and 64rem (desktop).
 *
 * Phase 5 scope: the product card and the shop/category product grid.
 *
 * DOM note (default Woo loop): li.product has two children —
 *   1. a.woocommerce-LoopProduct-link  (wraps .onsale, img, title, rating, price)
 *   2. a.button.add_to_cart_button     (the AJAX add-to-cart)
 * So the title/rating/price are padded individually rather than via a wrapper.
 *
 * @package Stray_Commerce
 */

/* ==========================================================================
   Product grid — .woocommerce ul.products
   Mirrors .strc-grid--products: 2 -> 3 -> 4 columns, token gutter.
   Neutralises Woo's float/columns-N layout and its clearfix ::before/::after.
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kill Woo's clearfix pseudo-elements that would otherwise create phantom
   grid tracks. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}

@media (min-width: 48rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* WooCommerce sizes grid items with column-aware selectors of specificity
   (0,0,4,2): layout.css `ul.products.columns-N li.product` and, crucially,
   smallscreen.css `ul.products[class*="columns-"] li.product` which forces
   `width:48%; float:left` on tablet/mobile (<=768px). Our base card rule below
   is only (0,0,3,2), so it loses there. Match Woo's specificity so OUR grid
   owns column sizing at every breakpoint. `width` is the only meaningful
   property here — `float`/`clear` are already inert on grid items — and no
   !important is needed because this stylesheet loads after WooCommerce's. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	margin: 0;
	float: none;
}

/* Mobile (<48rem): full-bleed product grid — thumbnails run to the screen
   edges while each card's content keeps its --space-card-padding (16px) inset
   (the image is already full-width within the card; the text rows are padded).
   The grid breaks out of .strc-container by exactly its padding, so the offset
   always matches the container; token-derived and no viewport units, so there
   is no scrollbar overflow. Scoped to the main loop wrapper (.woocommerce-content)
   so unrelated grids (e.g. cart cross-sells) are unaffected. */
@media (max-width: 47.99rem) {
	.woocommerce-content ul.products {
		margin-inline: calc(-1 * var(--container-pad));
	}
}

/* ==========================================================================
   Card — .woocommerce ul.products li.product
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	/* Override Woo's float/percentage-width grid. */
	float: none;
	width: auto;
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;

	/* Flat card: no border, no radius (sharp), no hover shadow. */
	background: var(--background-primary);
}

/* The loop link wraps media + text; bottom padding balances the title's top
   padding now that the add-to-cart button is removed. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	position: relative;
	display: block;
	padding-bottom: var(--space-card-padding);
}

/* Text rows sit inside the link — pad them to the card padding individually. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .price {
	padding-inline: var(--space-card-padding);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-top: var(--space-card-padding);
}

.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .price {
	margin-top: var(--space-2);
}

/* ==========================================================================
   Media / 4:5 ratio
   ========================================================================== */

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img {
	aspect-ratio: var(--ratio-product);
	width: 100%;
	height: auto;
	object-fit: cover;
	margin: 0;
	display: block;
}

/* ==========================================================================
   Sale badge — span.onsale
   ========================================================================== */

/* Targets `span.onsale` (specificity 0,0,4,3) so it deterministically beats
   WooCommerce's own `.woocommerce ul.products li.product .onsale` (0,0,4,2)
   regardless of which stylesheet loads last. width/right are reset so the badge
   stays compact (content width) instead of stretching, and border-radius is 0
   for sharp corners. */
.woocommerce ul.products li.product span.onsale,
.woocommerce-page ul.products li.product span.onsale {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	right: auto;
	bottom: auto;
	z-index: var(--z-raised);
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var(--space-1) var(--space-2);
	background: var(--status-danger);
	color: var(--content-on-color);
	border-radius: 0;
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	text-align: center;
}

/* ==========================================================================
   Title — clamped to 2 lines for even card heights
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--content-primary);

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* The card link inherits ink and drops the base underline. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Price — regular / del / ins
   ========================================================================== */

.woocommerce ul.products li.product .price {
	color: var(--price-regular);
	font-size: var(--text-base);
}

.woocommerce ul.products li.product .price del {
	color: var(--content-tertiary);
	text-decoration: line-through;
	margin-right: var(--space-2);
}

.woocommerce ul.products li.product .price ins {
	color: var(--price-sale);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

/* ==========================================================================
   Rating
   ========================================================================== */

.woocommerce ul.products li.product .star-rating {
	font-size: var(--text-sm);
	color: var(--content-primary);
}

/* ==========================================================================
   Out of stock — kept visible, visually muted
   ========================================================================== */

.woocommerce ul.products li.product.outofstock a.woocommerce-LoopProduct-link img {
	opacity: var(--opacity-disabled);
}

.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title {
	color: var(--content-tertiary);
}

/* ==========================================================================
   Breadcrumbs (WooCommerce's native woocommerce_breadcrumb output)
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--space-5);
	color: var(--content-primary); /* current page (trailing text node) */
	font-size: var(--text-sm);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--content-tertiary);
	text-decoration: none;
}

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

/* ==========================================================================
   Product archive header — centered category label + supporting text
   ========================================================================== */

/* Category/page title. */
.woocommerce-products-header {
	text-align: center;
}

/* Category/term description (rendered outside the header in current Woo). */
.woocommerce .term-description,
.woocommerce-page .term-description {
	text-align: center;
}

/* The base `p { max-width: var(--measure) }` rule caps the description to the
   reading measure with margin:0, pinning it left — so centring the text alone
   isn't enough. Centre the constrained block itself with margin-inline. */
.woocommerce .term-description p,
.woocommerce-page .term-description p {
	margin-inline: auto;
}

/* ==========================================================================
   Category navigation strip (shop-by-category)
   Horizontal swipe row of category tiles below the archive supporting text.
   ========================================================================== */

.strc-category-nav {
	margin-bottom: var(--space-6);
}

.strc-category-nav__list {
	display: flex;
	gap: var(--space-4);
	/* Centre the row when items fit; fall back to a left-anchored scroll when
	   they overflow (justify-content:center would clip the start). */
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.strc-category-nav__list::-webkit-scrollbar {
	display: none;
}

.strc-category-nav__item {
	flex: 0 0 var(--space-10); /* 128px tile */
	scroll-snap-align: start;
}

.strc-category-nav__link {
	display: block;
	color: var(--content-primary);
	text-decoration: none;
	text-align: center;
}

.strc-category-nav__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--background-secondary);
}

.strc-category-nav__image,
.strc-category-nav__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.strc-category-nav__placeholder {
	background: var(--background-tertiary); /* gray placeholder when no image */
}

.strc-category-nav__name {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.strc-category-nav__link:hover .strc-category-nav__name {
	color: var(--content-secondary);
}

/* ==========================================================================
   Responsive sweep — forms, tables, long strings, touch targets
   (cart / checkout / account, plus shop listings)
   ========================================================================== */

/* Form fields: full-width, >=16px (no iOS zoom on focus), token spacing. */
.woocommerce form .form-row,
.woocommerce-account form .form-row {
	margin-bottom: var(--space-4);
}

.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select,
.woocommerce form .input-text,
.woocommerce-account input.input-text,
.woocommerce #coupon_code.input-text,
.woocommerce .select2-container .select2-selection {
	width: 100%;
	font-size: var(--text-base);
	padding: var(--space-3);
	border: 1px solid var(--border-opaque);
	border-radius: var(--radius-sm);
	background: var(--background-primary);
	color: var(--content-primary);
}

.woocommerce .quantity input.qty {
	font-size: var(--text-base);
	padding: var(--space-2);
	text-align: center;
}

/* Tables: rely on Woo's small-screen stacking; tokenise borders and make sure
   cell content wraps rather than forcing horizontal scroll. */
.woocommerce table.shop_table {
	width: 100%;
	border-color: var(--border-opaque);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	overflow-wrap: break-word;
}

/* Long strings (titles, SKUs, coupon codes, meta) never force scroll. */
.woocommerce .woocommerce-loop-product__title,
.woocommerce-cart-form .product-name,
.woocommerce div.product .product_meta,
.woocommerce .order_details {
	overflow-wrap: break-word;
}

/* Touch targets on coarse pointers (desktop sizing untouched). */
@media (pointer: coarse) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce .button,
	.woocommerce #respond input#submit,
	.woocommerce .quantity input.qty {
		min-height: var(--tap-target);
	}

	.woocommerce-pagination a,
	.woocommerce-pagination span,
	.woocommerce a.remove,
	.strc-cart-drawer .remove_from_cart_button {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-target);
	}

	.woocommerce-pagination a,
	.woocommerce-pagination span,
	.woocommerce a.remove,
	.strc-cart-drawer .remove_from_cart_button {
		justify-content: center;
		min-width: var(--tap-target);
	}
}

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

/* Hide the quantity selector on the product add-to-cart form (not the cart
   page). The hidden input still submits qty=1, so Add to cart works and the
   quantity stays adjustable from the cart. Scoped to `div.product form.cart`
   so the cart table's quantity inputs are untouched.
   !important is required (and correct) here: WooCommerce's variation JS calls
   $qty.show() when a variation is selected, which injects an inline `display`
   — only !important can override an inline style from CSS. */
.woocommerce div.product form.cart .quantity {
	display: none !important;
}

/* Add-to-cart adopts the .strc-button (primary) component. WooCommerce hardcodes
   the button's classes in its template (no filter to add ours), so rather than
   override the template we mirror the component here with the same --action-*
   tokens. Specificity (0,0,4,2) beats Woo's `.button.alt` rules — no !important.
   Keep this in sync with .strc-button (primary) in main.css. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--action-primary);
	color: var(--action-on-primary);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--action-primary-hover);
	color: var(--action-on-primary);
}

.woocommerce div.product form.cart .single_add_to_cart_button:active {
	background: var(--action-primary-pressed);
}

/* --- About the Model block ---------------------------------------------- */

.strc-model-info {
	margin-top: var(--space-5);
}

.strc-model-info__title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--content-primary);
}

.strc-model-info__row {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	text-transform: uppercase;
	color: var(--content-secondary);
}

/* --- Variation attributes: stacked label + button swatches -------------- */

/* Lay the variations "table" out as blocks: label above its options. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: auto;
	padding: 0;
	text-align: left;
}

.woocommerce div.product form.cart .variations tr + tr {
	margin-top: var(--space-4);
}

.woocommerce div.product form.cart .variations .label {
	margin-bottom: var(--space-2);
}

.woocommerce div.product form.cart .variations .label label {
	margin: 0;
	font-weight: var(--weight-medium);
	color: var(--content-primary);
}

/* The native select is replaced by the swatch buttons (js/main.js); it stays
   in the form (its value still submits and Woo still reads it). */
.woocommerce div.product form.cart .variations select.strc-swatched {
	display: none;
}

/* Hide Woo's "Clear" reset link. Woo's variation JS reveals it with
   .fadeIn(), which sets an inline `display` — so !important is required to
   override the inline style (same reason as the quantity above). Selection can
   still be changed by clicking another swatch. */
.woocommerce div.product form.cart .reset_variations {
	display: none !important;
}

/* The selected variation's price is mirrored into the summary price (the range
   under the title) by js/main.js, so hide Woo's duplicate price near Add to
   cart. (Availability/stock stays.) Woo injects this as innerHTML — no inline
   style — so plain display:none is enough. */
.woocommerce div.product .single_variation .woocommerce-variation-price {
	display: none;
}

.strc-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.strc-swatch {
	min-width: var(--space-7);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--border-strong);
	border-radius: 0;
	background: var(--background-primary);
	color: var(--content-primary);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.strc-swatch:hover {
	border-color: var(--content-primary);
}

.strc-swatch.is-selected {
	background: var(--action-primary);
	color: var(--action-on-primary);
	border-color: var(--action-primary);
}

/* Unavailable option for the current combination. */
.strc-swatch:disabled {
	color: var(--content-state-disabled);
	border-color: var(--border-opaque);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Color attribute → circular swatch filled with the term's color (set inline
   by js/main.js from term meta). The inline background overrides the selected
   fill, so the circle keeps its color and selection shows as a ring. */
.strc-swatch--color {
	width: var(--space-6);
	height: var(--space-6);
	min-width: 0;
	padding: 0;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-strong);
}

.strc-swatch--color.is-selected {
	border-color: var(--background-primary); /* gap between color and ring */
	box-shadow: 0 0 0 2px var(--content-primary);
}

.strc-swatch--color:disabled {
	opacity: var(--opacity-disabled);
}

@media (pointer: coarse) {
	.strc-swatch {
		min-height: var(--tap-target);
	}

	/* Keep color swatches circular (and tappable) on touch. */
	.strc-swatch--color {
		width: var(--space-7);
		height: var(--space-7);
		min-height: 0;
	}
}

/* ==========================================================================
   Single product layout — sticky summary (desktop >= 64rem)
   Replace WooCommerce's float columns with a grid so the summary can stick
   while the gallery column scrolls. align-items:start gives the summary its
   natural height (room to stick); its grid cell is as tall as the gallery, so
   it stays pinned until the gallery ends. Mobile/tablet keep Woo's stacked
   layout (+ our gallery carousel). Override selectors are (0,0,4,2), beating
   Woo's (0,0,3,2) float rules without !important.
   ========================================================================== */

@media (min-width: 64rem) {
	.woocommerce div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		column-gap: var(--space-7);
	}

	/* Default any non-column child (tabs, up-sells, related) to full width.
	   .onsale is position:absolute, so it isn't a grid item. */
	.woocommerce div.product > * {
		grid-column: 1 / -1;
	}

	/* Gallery column (left) — neutralise Woo's float/width; this column scrolls. */
	.woocommerce div.product div.images.woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
		float: none;
		width: auto;
		margin: 0;
	}

	/* Summary column (right) — sticky, top-aligned. Capped to the viewport and
	   scrollable so that expanding the accordions never pushes content off
	   screen; it stays pinned while the gallery column scrolls. */
	.woocommerce div.product div.summary.entry-summary {
		grid-column: 2;
		grid-row: 1;
		float: none;
		width: auto;
		margin: 0;
		align-self: start;
		position: sticky;
		top: var(--space-6);
		max-height: calc(100vh - var(--space-7));
		overflow-y: auto;
	}
}

/* ==========================================================================
   Single product gallery — stacked (desktop/tablet), carousel (mobile)
   Gallery supports (slider/zoom/lightbox) are disabled in inc/woocommerce.php,
   so WooCommerce outputs every gallery image in the wrapper with no JS. We
   stack them in the gallery column; on mobile the wrapper becomes a CSS
   scroll-snap carousel (dots are added by js/main.js).
   ========================================================================== */

/* No lightbox/zoom trigger. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: none;
}

/* Stack all images full width. WooCommerce's no-slider fallback,
   `.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)`
   (specificity 0,0,5,2), shrinks images 2+ to 25% inline thumbnails — the
   selectors below add the gallery + wrapper ancestors to reach (0,0,6,2) and
   win deterministically (no !important). */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	transition: none; /* override Woo's leftover FlexSlider transition */
}

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
	display: block;
	width: 100%;
	margin: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ratio-gallery);
	object-fit: cover;
}

/* Carousel dots (built by js/main.js; shown on mobile only). */
.strc-gallery-dots {
	display: none;
}

.strc-gallery-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-5);
	height: var(--space-5);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.strc-gallery-dot::before {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border-radius: var(--radius-full);
	background: var(--border-strong);
}

.strc-gallery-dot.is-active::before {
	background: var(--content-primary);
}

@media (pointer: coarse) {
	.strc-gallery-dot {
		width: var(--tap-target);
		height: var(--tap-target);
	}
}

/* Mobile: horizontal scroll-snap carousel. */
@media (max-width: 47.99rem) {
	.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
		flex-direction: row;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.strc-gallery-dots {
		display: flex;
		justify-content: center;
		gap: var(--space-1);
		margin-top: var(--space-3);
	}
}