/*
 * WooCommerce specificity overrides.
 *
 * Loaded AFTER style.css. WooCommerce ships `.woocommerce img, .woocommerce-page img
 * { height:auto }` — specificity (0,1,1) — which outranks single-class rules like
 * `.brand__logo` (0,1,0) on every shop, product, cart and checkout page. That is why
 * the header logo rendered at its natural 136px there while the homepage looked fine.
 * Everything here is deliberately scoped tighter than Woo's selectors.
 */

/* ---------- Header / footer logo ---------- */
.site-header .brand img.brand__logo { height: 26px; width: auto; }
.site-footer .brand--footer img.brand__logo { height: 34px; width: auto; }
@media (max-width: 640px) {
	.site-header .brand img.brand__logo { height: 19px; }
}

/* ---------- Product grid ----------
 * Woo lays its product list out with floats and a clearfix. Our list is a CSS
 * grid, and a clearfix ::before/::after on a grid container becomes a GRID ITEM —
 * it silently ate the first cell, shifting every product one place and leaving a
 * hole at the top-left. Floats and clears are meaningless here too.
 */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after {
	content: none; display: none;
}
.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 {
	clear: none; float: none; width: auto; margin: 0;
}

/* ---------- Shop archive toolbar ---------- */
.woocommerce .woocommerce-ordering select {
	padding: 11px 14px; min-height: 44px;
	border: 2px solid var(--gray-300); border-radius: 10px;
	font: inherit; font-size: 0.88rem; font-weight: 600;
	background: var(--white); color: var(--ink);
}
.woocommerce .woocommerce-ordering select:focus { outline: none; border-color: var(--ink); }
.woocommerce .woocommerce-result-count { color: var(--gray-500); font-size: 0.88rem; line-height: 44px; margin: 0; }

/* ---------- Single product layout ---------- */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images { width: 46%; }
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary { width: 50%; }
.woocommerce div.product div.images img { border-radius: var(--radius-lg); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 12px; }
.woocommerce div.product div.images .flex-control-thumbs li { padding: 0 8px 0 0; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: 10px; border: 2px solid transparent; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { border-color: var(--ink); opacity: 1; }

.woocommerce div.product .product_title { margin-bottom: 6px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--gray-700); font-size: 0.95rem; }

/* Product meta (SKU / category) — the category link is a real tap target. */
.woocommerce div.product .product_meta { font-size: 0.85rem; color: var(--gray-500); margin-top: 18px; }
.woocommerce div.product .product_meta a { display: inline-block; padding: 9px 0; font-weight: 600; color: var(--ink); }

/* Quantity + add-to-cart row */
.woocommerce div.product form.cart { margin-top: 18px; }
.woocommerce .quantity .qty {
	width: 78px; padding: 13px 10px; text-align: center;
	border: 2px solid var(--gray-300); border-radius: 10px;
	font: inherit; font-weight: 700; background: var(--white);
}
.woocommerce .quantity .qty:focus { outline: none; border-color: var(--ink); }
.woocommerce div.product form.cart .button { vertical-align: top; }

/* Variation dropdowns */
.woocommerce div.product form.cart .variations { margin-bottom: 14px; }
.woocommerce div.product form.cart .variations th.label { font-size: 0.82rem; font-weight: 700; padding-right: 12px; }
.woocommerce div.product form.cart .variations select {
	width: 100%; padding: 12px 14px; min-height: 44px;
	border-radius: 10px; border: 2px solid var(--gray-300);
	font: inherit; background: var(--white);
}
.woocommerce div.product form.cart .reset_variations { font-size: 0.82rem; color: var(--gray-500); }

/* Tabs / related headings */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--gray-300); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 0; padding: 0 18px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 700; color: var(--gray-500); padding: 10px 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 { font-size: 1.5rem; margin-bottom: 22px; }

/* ---------- Notices, cart, checkout ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--ink); background: var(--white);
	border-radius: var(--radius); font-size: 0.93rem;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--ink); }
.woocommerce table.shop_table { border-radius: var(--radius); border-color: var(--gray-300); }
.woocommerce table.shop_table th { font-weight: 700; }
.woocommerce-cart table.cart img { width: 68px; border-radius: 10px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 12px 14px; min-height: 44px;
	border-radius: 10px; border: 2px solid var(--gray-300);
	font: inherit; background: var(--white);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--ink); }
.woocommerce form .form-row label { font-size: 0.85rem; font-weight: 700; }
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--ink); color: var(--white); border: 2px solid var(--ink);
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
	background: var(--white); color: var(--ink);
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.woocommerce div.product div.images,
	.woocommerce-page div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce-page div.product div.summary { width: 100%; float: none; margin-bottom: 20px; }

	/* Woo's smallscreen sheet forces full-width buttons/inputs; keep the
	   quantity box compact so it sits beside Add to cart instead of stacking. */
	.woocommerce .quantity .qty { width: 74px; }
	.woocommerce div.product form.cart .button { width: calc(100% - 90px); padding: 15px 10px; }
	.woocommerce div.product form.cart div.quantity { float: left; margin-right: 10px; }

	.woocommerce div.product .woocommerce-tabs ul.tabs { overflow-x: auto; white-space: nowrap; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li { display: inline-block; float: none; }
	.woocommerce-cart table.cart img { width: 52px; }
}

@media (max-width: 640px) {
	/* Sort control measured a 19px tap target; give it a full-width row. */
	.woocommerce .woocommerce-ordering,
	.woocommerce .woocommerce-result-count { float: none; width: 100%; margin: 0 0 12px; }
	.woocommerce .woocommerce-ordering select { width: 100%; }
	.woocommerce .woocommerce-result-count { line-height: 1.5; }
}