/**
 * LRB Solutions — WooCommerce styling hooks.
 *
 * IMPORTANT
 * ---------
 * WooCommerce is ACTIVE on the staging site (20 staging products at the time
 * of the 0.1.5 package), so this file loads there and every rule below applies
 * to the shop, category archive, single product, cart, checkout and account
 * screens the moment this theme version is uploaded. Review those screens on
 * staging immediately after updating. functions.php still guards the enqueue
 * with class_exists( 'WooCommerce' ), so the file stays inert on any install
 * without the plugin.
 *
 * It contains presentation only. No prices, no tax rules, no shipping rules,
 * no payment configuration, no product data, no API endpoints.
 *
 * Selectors follow WooCommerce's documented core classes and its block
 * classes. They are written defensively: if a selector no longer matches a
 * future WooCommerce version, the page falls back to WooCommerce defaults
 * rather than breaking.
 */

/* ---------------------------------------------------------------------------
 * 1. Shared tokens
 * These mirror theme.json presets so this file stays readable on its own.
 * ------------------------------------------------------------------------ */

.lrb-has-woocommerce {
	--lrb-navy: #1F3A5F;
	--lrb-ink: #1C2433;
	--lrb-gold: #C4972F;
	--lrb-gold-deep: #8A6A19;
	--lrb-surface: #FFFFFF;
	--lrb-page: #F7F6F2;
	--lrb-line: #DDD9D0;
	--lrb-muted: #4A4E55;
}

/* ---------------------------------------------------------------------------
 * 2. Buttons — match theme.json button styling
 * ------------------------------------------------------------------------ */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
	background-color: var(--lrb-navy, #1F3A5F);
	border: 2px solid var(--lrb-navy, #1F3A5F);
	border-radius: 4px;
	color: var(--lrb-surface, #FFFFFF);
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.8rem 1.6rem;
	text-decoration: none;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
	background-color: var(--lrb-ink, #1C2433);
	border-color: var(--lrb-ink, #1C2433);
	color: var(--lrb-surface, #FFFFFF);
}

/* Secondary / "view cart" style actions read as outline buttons. */
.woocommerce a.added_to_cart,
.woocommerce .button.wc-backward {
	background-color: transparent;
	border: 2px solid var(--lrb-navy, #1F3A5F);
	color: var(--lrb-navy, #1F3A5F);
}

/* ---------------------------------------------------------------------------
 * 3. Product grids — shop and category archives
 * ------------------------------------------------------------------------ */

.woocommerce ul.products li.product,
.wc-block-product-template__responsive .wc-block-product,
.wc-block-grid__product {
	background-color: var(--lrb-surface, #FFFFFF);
	border: 1px solid var(--lrb-line, #DDD9D0);
	border-radius: 6px;
	padding: 1.25rem;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Stack the card's contents so the add-to-cart action can sit on a shared
   baseline across a row of cards, whatever the title length. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > .add_to_cart_button,
.wc-block-grid__product .wp-block-button {
	align-self: flex-start;
	margin-top: auto;
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within,
.wc-block-grid__product:hover,
.wc-block-grid__product:focus-within {
	border-color: var(--lrb-navy, #1F3A5F);
	/* Same wheat-gold inset accent as .lrb-card in lrb-theme.css. */
	box-shadow: inset 0 3px 0 var(--lrb-gold, #C4972F), 0 8px 24px rgba(28, 36, 51, 0.10);
}

/* Every product photo renders in the same square, letterboxed on white, so a
   grid of mixed portrait/landscape supplier shots still reads as one set. */
.woocommerce ul.products li.product img,
.wc-block-grid__product img,
.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	background-color: var(--lrb-surface, #FFFFFF);
	border-radius: 4px;
	height: auto;
	object-fit: contain;
	width: 100%;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product .wc-block-grid__product-price {
	margin: 0.5rem 0 1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-components-product-name {
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Case-pack / unit-of-sale line under a product name. Populated in Phase 2 from
   the product's own fields — never hard-coded here. */
.lrb-case-pack {
	color: var(--lrb-muted, #4A4E55);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * 4. Prices
 * Presentation only. All price VALUES come from WooCommerce product data that
 * the owner enters in Phase 2 or later.
 * ------------------------------------------------------------------------ */

.woocommerce .price,
.wc-block-components-product-price {
	color: var(--lrb-ink, #1C2433);
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.woocommerce .price del,
.wc-block-components-product-price del {
	color: var(--lrb-muted, #4A4E55);
	font-weight: 400;
}

/* Slot for the approved-customer price label. Hidden until something renders
   into it, so guests never see an empty badge. */
.lrb-customer-price-note:empty {
	display: none;
}

.lrb-customer-price-note {
	background-color: var(--lrb-page, #F7F6F2);
	border-left: 3px solid var(--lrb-gold, #C4972F);
	color: var(--lrb-ink, #1C2433);
	display: block;
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
}

/* Sale badge in brand navy instead of WooCommerce's default teal. White on
   this navy measures 11.3:1. */
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	background-color: var(--lrb-navy, #1F3A5F);
	border-radius: 4px;
	color: var(--lrb-surface, #FFFFFF);
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
	padding: 0.25rem 0.6rem;
}

/* Star ratings use the deep gold: 5.1:1 on white, so the graphic itself
   passes the 3:1 non-text minimum. */
.woocommerce .star-rating,
.wc-block-components-product-rating {
	color: var(--lrb-gold-deep, #8A6A19);
}

/* ---------------------------------------------------------------------------
 * 5. Single product
 * ------------------------------------------------------------------------ */

.woocommerce div.product .product_title {
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 1.12;
}

/* Gallery images sit in the same white, hairline-framed tile as the shop
   grid, so product pages and product cards read as one system. */
.woocommerce div.product div.images img {
	background-color: var(--lrb-surface, #FFFFFF);
	border: 1px solid var(--lrb-line, #DDD9D0);
	border-radius: 6px;
}

.woocommerce div.product p.price {
	font-size: 1.375rem;
}

/* Breadcrumb trail: quiet, small, navy links. */
.woocommerce .woocommerce-breadcrumb {
	color: var(--lrb-muted, #4A4E55);
	font-size: 0.875rem;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--lrb-navy, #1F3A5F);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--lrb-navy, #1F3A5F);
}

.woocommerce div.product form.cart .quantity input.qty {
	border: 1px solid #8A867D;
	border-radius: 4px;
	padding: 0.55rem 0.5rem;
}

/* ---------------------------------------------------------------------------
 * 6. Notices
 * ------------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	background-color: var(--lrb-surface, #FFFFFF);
	border-radius: 4px;
	border-top: 3px solid var(--lrb-navy, #1F3A5F);
}

.woocommerce-error {
	background-color: var(--lrb-surface, #FFFFFF);
	border-radius: 4px;
	border-top: 3px solid #A32020;
}

/* ---------------------------------------------------------------------------
 * 7. Cart, checkout and account
 * ------------------------------------------------------------------------ */

.woocommerce table.shop_table,
.wc-block-cart-items {
	border: 1px solid var(--lrb-line, #DDD9D0);
	border-radius: 6px;
}

.woocommerce table.shop_table th,
.wc-block-cart-items__header {
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Cart and checkout tables must scroll inside themselves on narrow screens
   rather than pushing the page sideways. */
.woocommerce-cart-form,
.woocommerce .cart-collaterals {
	max-width: 100%;
	overflow-x: auto;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--lrb-line, #DDD9D0);
	border-radius: 6px;
	list-style: none;
	margin: 0;
	padding: 0.5rem;
}

.woocommerce-MyAccount-navigation li.is-active > a {
	color: var(--lrb-navy, #1F3A5F);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 8. Focus visibility inside WooCommerce screens
 * ------------------------------------------------------------------------ */

.lrb-has-woocommerce :where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--lrb-navy, #1F3A5F);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 9. Reduced motion
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce ul.products li.product,
	.wc-block-grid__product {
		transition: none;
	}
}