/* Balance shop archive + product category/tag archive styles */

.woocommerce-products-header__title.page-title {
	color: var(--balance-navy);
	margin-bottom: 1.5rem;
}

/* Category filter row (inc/shop-category-filter.php) ---------------------- */

.balance-shop-filter {
	margin: 0 0 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--balance-offwhite);
}

.balance-shop-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.balance-shop-filter__pill {
	display: inline-block;
	padding: 0.45rem 1.15rem;
	border: 1px solid var(--balance-offwhite);
	border-radius: 999px;
	font-family: "Assistant", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--balance-navy);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.balance-shop-filter__pill:hover,
.balance-shop-filter__pill:focus-visible {
	background: var(--balance-offwhite);
	border-color: #dcdcdc;
	color: var(--balance-navy);
}

/* Navy on white rather than the brand blue: the blue pill failed contrast
   against white text in the same axe audit that moved the buttons at
   style.css:217. */
.balance-shop-filter__pill.is-current {
	background: var(--balance-navy);
	border-color: var(--balance-navy);
	color: var(--balance-white);
}

/* Sorting / result-count row --------------------------------------------- */

.storefront-sorting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--balance-offwhite);
}

.woocommerce-ordering select.orderby {
	border: 1px solid var(--balance-offwhite);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-family: "Assistant", sans-serif;
	color: var(--balance-ink);
}

.woocommerce-result-count {
	color: #6b6b6b;
	font-size: 0.9rem;
	margin: 0;
}

/* Product grid ------------------------------------------------------------- */

/* !important throughout this rule and the next: Storefront ships a more
   specific `.site-main ul.products.columns-3 li.product` selector that
   otherwise wins the cascade and re-applies its float/percentage-width
   column layout over this one. */
ul.products.columns-3 {
	display: grid !important;
	/* Three across. This was a fixed 2-column grid while the catalog was just
	   GlucoFocus + ZenSleep; The Complete Balance Bundle made three, and three
	   products in a 2-column grid leaves an orphan card alone on the second
	   row. Still fixed rather than auto-fit: auto-fit with a sensible min
	   width reflows to 2+1 at exactly the widths we care about, which is the
	   orphan again. */
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 2rem;
}

@media (max-width: 1099px) {
	ul.products.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 749px) {
	ul.products.columns-3 {
		grid-template-columns: 1fr !important;
	}

	ul.products.columns-3 li.product {
		width: 70% !important;
	}
}

@media (max-width: 480px) {
	ul.products.columns-3 li.product {
		width: 100% !important;
	}
}

/* Storefront's old float-based layout gives ul.products a ::before/::after
   clearfix pair (content:""; display:table). Under display:grid, those
   pseudo-elements generate real boxes that become grid items in their own
   right — 2 real products + 2 invisible pseudo-items = 4 items in a
   2-column grid, which is what was actually causing GlucoFocus to land
   top-right and ZenSleep bottom-left instead of side by side. Not needed
   for grid layout at all, so remove them entirely here. */
ul.products.columns-3::before,
ul.products.columns-3::after {
	content: none !important;
	display: none !important;
}

ul.products.columns-3 li.product {
	/* Was 70%, which kept two cards from sprawling across a wide viewport.
	   A third of the row is already narrow enough, so the cards now fill
	   their column; the 70% squeeze comes back only at the single-column
	   breakpoint below, where a full-bleed card is the sprawling one. */
	width: 100% !important;
	justify-self: center;
	float: none !important;
	margin: 0 !important;
	/* Column flex so the button can be pushed to the bottom of the card (see
	   the margin-top:auto below). Cards in a row are already equal height —
	   grid stretches them — but their contents are not: a product with no
	   reviews yet has no .star-rating row, so its button floated up by that
	   row's height and broke the line the other buttons sat on. */
	display: flex;
	flex-direction: column;
	background: var(--balance-white);
	border: 1px solid var(--balance-offwhite);
	border-radius: 10px;
	overflow: hidden;
	padding: 0 0 1.5rem;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

ul.products.columns-3 li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(45, 72, 98, 0.1);
}

ul.products.columns-3 li.product a.woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
	padding: 0 1.25rem;
}

/* The square box keeps the grid tidy regardless of what each product's main
   image happens to be. `contain` rather than `cover` because those images are
   now portrait bottle cutouts (roughly 700x1450), and cover would slice the
   top and bottom off to fill a 1:1 box.

   NOTE: on its own this changes nothing, because the crop is not happening
   here. WooCommerce's `woocommerce_thumbnail` size is 324x324 hard-cropped, so
   the file the grid is served is *already* a square slice of the bottle with
   no cap and no base — there is nothing left for object-fit to letterbox.
   Fixing that means setting thumbnail cropping to uncropped and regenerating
   the size; this rule is what makes the result sit correctly once that is
   done. Left in place deliberately so the two are not separated. */
ul.products.columns-3 li.product img {
	width: calc(100% + 2.5rem);
	margin: 0 -1.25rem 1.25rem;
	max-width: none;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
}

ul.products.columns-3 li.product .woocommerce-loop-product__title {
	color: var(--balance-navy);
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}

ul.products.columns-3 li.product .star-rating {
	margin: 0 auto 0.5rem;
}

ul.products.columns-3 li.product .star-rating::before {
	color: var(--balance-offwhite);
}

ul.products.columns-3 li.product .star-rating span::before {
	color: var(--balance-blue);
}

ul.products.columns-3 li.product .price {
	display: block;
	margin-bottom: 1rem;
}

ul.products.columns-3 li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* top:auto eats whatever vertical space the card content leaves, pinning
	   every button to the same baseline across the row regardless of how tall
	   the card's own content is. Horizontal margins unchanged. */
	margin: auto 1.25rem 0;
	width: calc(100% - 2.5rem);
	border-radius: 999px;
	background: var(--balance-navy);
	color: var(--balance-white);
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	padding: 0.7rem 1rem;
}

ul.products.columns-3 li.product .button:hover {
	background: var(--balance-blue);
	color: var(--balance-white);
}