/* ===========================================================================
   VRU Theme — WooCommerce brand styling (MINIMAL / NON-STRUCTURAL)

   WooCommerce ships its own stylesheets (woocommerce.css, woocommerce-layout.css,
   woocommerce-smallscreen.css) that fully handle LAYOUT — product grid, the
   single-product two-column, cart, checkout, account, gallery. This file does
   NOT touch layout (no grid/float/width/display overrides); it only applies
   brand colors, the sale badge, and our own components (sticky ATC, trust row).

   Rationale: an earlier version re-implemented Woo's layout and fought it,
   which broke the pages. Let Woo own layout; we own brand.
   ========================================================================== */

/* ---- Product content boxed to a centered 1200px (matches the header/footer
   content width) for a tighter, premium layout — modelled on Crutchfield.
   The sticky ATC bar (.vru-container) intentionally stays full-width. ---- */
/* All WooCommerce pages: drop the wrap's top padding/margin so the breadcrumb's
   own 21px top padding controls the gap below the nav (consistent on product,
   search and archives — was leaving extra whitespace on search/archives). */
.vru-woo-wrap { margin-top: 0 !important; padding-top: 0 !important; }
/* Product page only: box the content to a centered 1600px. */
.single-product .vru-woo-wrap { max-width: 1600px; margin-inline: auto; }

/* Asymmetric two-column layout: a larger square image on the left and a WIDER
   description / buy column on the right, with a comfortable gutter between
   (gallery 44% + summary 51% = a 5% gap). Outspecifies Woo's 48/48 default. */
@media (min-width: 769px) {
	body.single-product div.product .woocommerce-product-gallery { width: 44%; }
	body.single-product div.product .summary.entry-summary { width: 51%; }
}
.single-product .vru-container { max-width: 100%; padding-inline: 40px; }
@media (max-width: 768px) { .single-product .vru-container { padding-inline: 20px; } }

/* ---- Prices ---- */
.woocommerce .price,
.woocommerce ul.products li.product .price { color: var(--vru-color-heading); font-weight: 600; }
.woocommerce .price del { color: var(--vru-color-muted); font-weight: 400; }
.woocommerce .price ins { color: var(--vru-color-heading); text-decoration: none; }

/* ---- Sale badge: brand-blue PERFECT CIRCLE (Astra product-sale-style=circle).
   Fixed equal width/height + flex-centering so "Sale!" stays round, not oval. ---- */
.woocommerce span.onsale {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6em;
	height: 3.6em;
	min-width: 3.6em;
	min-height: 3.6em;
	padding: 0;
	/* line-height = the badge height centres the single "Sale!" line vertically
	   even where Elementor's product-grid CSS overrides display:flex to block. */
	line-height: 3.6em;
	border-radius: 50%;
	background-color: var(--vru-color-primary);
	color: #fff;
	font-weight: 700;
	text-align: center;
}

/* ---- Star ratings (brand colour) ---- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--vru-color-primary); }

/* ---- Quantity input: keep narrow (the global input{width:100%} would stretch it) ---- */
.woocommerce .quantity input.qty { width: 72px; max-width: 72px; text-align: center; }

/* ---- Add-to-cart / primary (.alt) buttons ---------------------------------
   WooCommerce's default .button.alt (purple #a46497) outranks the theme button
   rule by specificity, so restate brand blue here. Hover = accent (#fa462e),
   matching Astra's button-bg-h-color. ---- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--vru-color-primary);
	color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: var(--vru-color-link-hover);
	color: #fff;
}

/* ---- Notices on-brand ---- */
.woocommerce-message { border-top-color: var(--vru-color-primary); }
.woocommerce-info { border-top-color: var(--vru-color-primary); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--vru-color-primary); }
.woocommerce-error { border-top-color: var(--vru-color-accent); }

/* ---- Gentle, non-structural card polish (shadow + image zoom on hover) ---- */
.woocommerce ul.products li.product { transition: box-shadow .2s ease; }
.woocommerce ul.products li.product:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.woocommerce ul.products li.product a img { transition: transform .35s ease; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

/* ---- SKU line (our PHP output) ---- */
.product-sku-display { margin: .5em 0; color: var(--vru-color-text); }

/* ---- Do not display product categories or tags in the single-product meta ---- */
.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as { display: none; }

/* ---- Sticky add-to-cart bar (our component) ---- */
.vru-sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
	transform: translateY(110%); transition: transform .25s ease;
	background: #fff; border-top: 1px solid var(--vru-color-border);
	box-shadow: 0 -4px 18px rgba(0,0,0,.08);
}
.vru-sticky-atc.is-visible { transform: translateY(0); }
.vru-sticky-atc__inner { display: flex; align-items: center; gap: 16px; padding: 10px var(--vru-gutter); }
.vru-sticky-atc__meta { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.vru-sticky-atc img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; }
.vru-sticky-atc__title { font-weight: 600; color: var(--vru-color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vru-sticky-atc__price { font-weight: 600; color: var(--vru-color-primary); }
.vru-sticky-atc .button { padding: 12px 26px; }
.vru-sticky-atc__buy { display: flex; align-items: center; gap: 12px; }
.vru-sticky-atc__buy .quantity { margin: 0; }
@media (max-width: 544px) { .vru-sticky-atc__title { display: none; } }

/* ===========================================================================
   Product-page parity additions (match Astra single-product details)
   ========================================================================== */

/* ---- Add-to-cart text UPPERCASE (= Astra woo button text-transform) ---- */
.woocommerce .single_add_to_cart_button,
.vru-sticky-atc .button { text-transform: uppercase; letter-spacing: .3px; }

/* ---- "Availability:" label before the stock status ---- */
.vru-availability { margin: .6em 0; color: var(--vru-color-heading); }
.vru-availability__label { font-weight: 600; color: var(--vru-color-heading); margin-right: .35em; }
.vru-availability .stock { display: inline; margin: 0; padding: 0; }

/* ---- Quantity +/- stepper (= Astra Pro quantity buttons) ---- */
.woocommerce .quantity.vru-qty { display: inline-flex !important; align-items: stretch; vertical-align: middle; }
.vru-qty__btn {
	width: 38px; padding: 0; font-size: 18px; font-weight: 600; line-height: 1;
	background: var(--vru-color-surface); color: var(--vru-color-heading);
	border: 1px solid var(--vru-color-border); cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.vru-qty__btn:hover { background: var(--vru-color-primary); color: #fff; border-color: var(--vru-color-primary); }
.vru-qty__minus { border-radius: var(--vru-btn-radius) 0 0 var(--vru-btn-radius); border-right: 0; }
.vru-qty__plus  { border-radius: 0 var(--vru-btn-radius) var(--vru-btn-radius) 0; border-left: 0; }
.woocommerce .quantity.vru-qty input.qty { width: 54px; max-width: 54px; border-radius: 0; margin: 0 !important; }
/* Hide the browser's native number spinner (Firefox shows up/down arrows that duplicate
   our +/- buttons; Chrome shows them on focus). Our stepper is the only control. */
.single-product .quantity input.qty { -moz-appearance: textfield; appearance: textfield; }
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===========================================================================
   Shop / category / related product grid — equal-height cards with the
   Add-to-Cart button pinned to the bottom. Woo's default float layout leaves
   each card its own height, so buttons float at different positions. Switch to
   CSS grid (respecting Woo's own columns-N class so related/up-sell grids keep
   their column counts) + flex cards, like Astra does on prod.
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* fallback; overridden by .columns-N */
	gap: 2.5em 30px;
	margin: 0 0 1em;
}
/* Woo adds ::before/::after as a float clearfix — they'd become empty grid cells */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products.columns-1 { grid-template-columns: 1fr; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
}
/* Pin the action button to the bottom of the (now equal-height) card */
.woocommerce ul.products li.product .button { margin-top: auto; }

/* Uniform square image block for every grid card. Catalog cropping is 1:1, but
   some products' images were never cropped (e.g. 225x320 portrait), which made
   one card taller and broke row alignment. Square box + contain keeps the whole
   product visible and all cards the same height. */
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Elementor "Products" widget renders ul.products.elementor-grid with its own
   rules that outrank the above, leaving block cards / tiny left images / unaligned
   buttons. Force the same equal-height, centered-image, button-to-bottom card. */
.woocommerce ul.products.elementor-grid li.product {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	width: auto !important;
}
.woocommerce ul.products.elementor-grid li.product img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto;
}
.woocommerce ul.products.elementor-grid li.product .woocommerce-loop-product__title {
	font-size: 15px;
	line-height: 1.35;
}
.woocommerce ul.products.elementor-grid li.product .button,
.woocommerce ul.products.elementor-grid li.product .add_to_cart_button {
	margin-top: auto;
}

/* ---- WooCommerce breadcrumb — small & unobtrusive (à la Crutchfield/eVacuumStore) ---- */
.woocommerce .woocommerce-breadcrumb {
	font-size: 12px;
	line-height: 1.4;
	color: var(--vru-color-muted);
	margin: 0;
	padding: 21px 0 21px 16px;
}
/* Desktop: line the breadcrumb's first crumb up with the nav's first item — on
   EVERY page, regardless of how the content is boxed (product = 1600, shop /
   search = 1200). The header is full-width (40px gutter + 16px nav-link padding,
   so the nav text sits at 56px). calc(50% - 50vw) equals the negative of the
   breadcrumb's centered container's left edge on any of those pages, pulling the
   box to the viewport edge (+7px corrects for the scrollbar); padding-left then
   drops the text at 56px to match the nav text. */
@media (min-width: 1024px) {
	.woocommerce .woocommerce-breadcrumb {
		margin-left: calc(50% - 50vw + 7px);
		padding-left: 56px;
	}
}
.woocommerce .woocommerce-breadcrumb a { color: var(--vru-color-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--vru-color-link-hover); }

/* ---- Collapsible breadcrumb (CSS-only, ZERO JavaScript) -------------------
   Each crumb is wrapped in <span class="vru-crumb"> (woocommerce_breadcrumb_defaults
   in inc/woocommerce.php) and the "/" separators are drawn here, so hiding a crumb
   also hides its separator. On phones the leading crumbs collapse behind a "…"
   that a hidden checkbox toggle reveals — like Crutchfield. Adds no page weight. */
.woocommerce-breadcrumb .vru-crumb + .vru-crumb::before { content: "\00a0/\00a0"; color: var(--vru-color-muted); }
.woocommerce-breadcrumb .vru-bc-toggle { display: none; }
.woocommerce-breadcrumb .vru-bc-more { display: none; }
@media (max-width: 768px) {
	/* Collapse only when worthwhile (3+ crumbs → at least one gets hidden). Keep
	   it to a single line; overflow of a long current name is clipped with "…". */
	.woocommerce-breadcrumb:has(.vru-crumb:nth-of-type(3)) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.woocommerce-breadcrumb:has(.vru-crumb:nth-of-type(3)) .vru-crumb { display: none; }
	.woocommerce-breadcrumb:has(.vru-crumb:nth-of-type(3)) .vru-crumb:nth-last-of-type(-n+2) { display: inline; }
	.woocommerce-breadcrumb:has(.vru-crumb:nth-of-type(3)) .vru-bc-more { display: inline; cursor: pointer; font-weight: 600; }
	/* Tap "…": reveal the full trail (wrapping is fine now) and drop the "…". */
	.woocommerce-breadcrumb:has(.vru-bc-toggle:checked) { white-space: normal; overflow: visible; }
	.woocommerce-breadcrumb .vru-bc-toggle:checked ~ .vru-crumb { display: inline; }
	.woocommerce-breadcrumb .vru-bc-toggle:checked ~ .vru-bc-more { display: none; }
}

@media (max-width: 921px) {
	.woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 544px) {
	.woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Product tabs: flat underline style (= Astra), not the default pill/box ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5em; border-bottom: 1px solid var(--vru-color-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 0; margin: 0 1.6em 0 0; padding: 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 {
	display: inline-block; padding: 12px 0; color: var(--vru-color-text);
	font-weight: 600; border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--vru-color-heading); border-bottom-color: var(--vru-color-primary);
}

/* ===========================================================================
   Single-product gallery — FIXED square pane: the image scales to fit inside a
   1:1 frame, so the pane never changes size when you switch images. The thumb
   strip is the same width as the pane and aligned to it (single scrolling row).
   ========================================================================== */
/* The visible pane = a fixed 1:1 box. flexslider creates .flex-viewport at run
   time; the :not(:has()) fallback covers single-image products (no viewport). */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
	aspect-ratio: 1 / 1;
	height: auto !important;            /* override flexslider's inline px height */
	border: 1px solid var(--vru-color-border);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
	height: 100% !important;
}
.single-product .woocommerce-product-gallery__image {
	height: 100%;
	margin: 0 !important;
	text-align: center;
}
.single-product .woocommerce-product-gallery__image a { display: block; height: 100%; }
/* Scale ANY image (tall upright or wide canister) to fit the square pane,
   centred, without cropping or changing the pane's size. */
.single-product .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 24px;
	box-sizing: border-box;
	object-fit: contain !important;
}
/* Zoom magnifier pinned to the pane corner. */
.single-product .woocommerce-product-gallery__trigger { top: 12px; right: 12px; z-index: 9; }

/* Thumbnails: one horizontally-scrolling row, the full pane width, with a brand
   highlight on the active/hover thumb. */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto !important;
	overflow-y: hidden;
	gap: 10px;
	width: 100%;
	margin: 14px 0 0;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 auto !important;
	float: none !important;
	width: 84px !important;
	margin: 0 !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 1px solid var(--vru-color-border);
	border-radius: 6px;
	opacity: 1;
	cursor: pointer;
	transition: border-color .15s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
	border-color: var(--vru-color-primary);
}
/* Keep all gallery thumbnails full-colour (Woo's default dims inactive ones to 50% opacity).
   NB: body carries both .single-product AND .woocommerce, so they must be a compound,
   not a descendant chain; selector outspecifies Woo's `div.images ... img` rule. */
body.single-product div.product div.images .flex-control-thumbs li img { opacity: 1; }

/* ===========================================================================
   Single-product summary — stronger hierarchy so the above-the-fold reads
   premium, not sparse (title / price / availability / buy box). À la Crutchfield.
   ========================================================================== */
/* Tighten the vertical rhythm: a blanket ~24px !important margin (global /
   Elementor-kit spacing) sits between every summary row, leaving it airy. Halve
   it so title -> price -> in-stock -> Add-to-Cart reads as one cohesive block.
   The buy-box form keeps a larger top margin for its divider separation. */
.single-product .summary.entry-summary > * { margin-bottom: 8px !important; margin-top: 0 !important; }
/* Promo / trust content blocks (wccc) carry inner padding + child margins that
   add stray space — collapse them into the same tight rhythm. */
.single-product .summary .wccc-content-block { padding-top: 0; padding-bottom: 0; }
.single-product .summary .wccc-content-block > :first-child { margin-top: 0; }
.single-product .summary .wccc-content-block > :last-child { margin-bottom: 0; }

.single-product .product_title.entry-title {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.single-product .summary .price {
	margin: 0 0 18px;
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--vru-color-heading);
}

/* Free-shipping badge — appended inline into the price html (single product) and
   shown under the price on loop cards. */
.vru-free-ship {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 14px;
	padding: 5px 11px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #1a7f37;
	background: #e7f6ec;
	border: 1px solid #b7e3c4;
	border-radius: 999px;
	vertical-align: middle;
	white-space: nowrap;
}
.vru-free-ship__icon { width: 16px; height: 16px; flex: none; }
/* Loop cards (shop / category / search): centered badge row under the price. */
.vru-free-ship-loop { margin: 8px 0 2px; }
.vru-free-ship-loop .vru-free-ship { margin-left: 0; font-size: 12px; padding: 4px 9px; }
/* Center the Add-to-Cart label in loop cards (it was inheriting left alignment). */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button { text-align: center; }
.single-product .summary .price del {
	font-size: 19px;
	font-weight: 400;
	margin-right: 10px;
}
.single-product .summary .price del .woocommerce-Price-amount { color: var(--vru-color-muted); }
.single-product .summary .price ins { font-weight: 700; text-decoration: none; }

.single-product .summary .woocommerce-product-details__short-description {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.7;
}

/* Availability: green check before the in-stock status. */
.vru-availability { font-size: 16px; margin: 12px 0; }
.vru-availability .stock { font-weight: 600; }
.vru-availability .stock.in-stock { color: #1a7f37; }
.vru-availability .stock.in-stock::before {
	content: "\2713";
	font-weight: 700;
	margin-right: 7px;
}
.vru-availability .stock.out-of-stock { color: var(--vru-color-accent); }

.single-product .product-sku-display { font-size: 14px; color: var(--vru-color-muted); margin: 10px 0; }
.single-product .product-sku-display strong { color: var(--vru-color-heading); }

/* Buy box: qty + a large, confident Add-to-Cart on one row, set off by a rule. */
.single-product .summary form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 20px 0;
	padding-top: 20px;
	border-top: 1px solid var(--vru-color-border);
}
.single-product .summary form.cart .single_add_to_cart_button {
	font-size: 16px;
	padding: 16px 42px;
}

/* Mobile: scale the summary type down and let Add-to-Cart fill the row. */
@media (max-width: 768px) {
	.single-product .product_title.entry-title { font-size: 24px; line-height: 1.25; }
	.single-product .summary .price { font-size: 26px; }
	.single-product .summary form.cart .single_add_to_cart_button { flex: 1 1 auto; }
}