/* LUMIADE brand layer — product-loop chrome (Phase 4).
   Loaded when is_shop() || is_product_taxonomy() || is_product()
   (lumiade-brand.php; the is_product() leg is a controller-adjudicated
   deviation — Task 2). Single source for product-card/grid/badge chrome
   wherever Woo product loops render: the shop/taxonomy archive grid AND
   the PDP "Complete your ritual" related-products grid (identical markup).
   Also carries (added by later Phase 4 tasks) the archive header, refine
   filters, and category headers. pdp.css still owns all other PDP chrome.
   NOT loaded on /routine (block styles + components.css own that page) or
   the homepage. */

/* — Grid: generous whitespace, no clearfix floats — */
.lumiade-storefront.woocommerce ul.products {
	display: grid;
	gap: 40px 26px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lumiade-storefront.woocommerce ul.products::before,
.lumiade-storefront.woocommerce ul.products::after {
	display: none;
}

@media (max-width: 1100px) {
	.lumiade-storefront.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.lumiade-storefront.woocommerce ul.products {
		gap: 30px 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* — Cards: hairline on white, no shadows, no motion — */
/* !important (margin/width): verified no live competing rule — Blocksy's
   card layout ([data-products] .product, specificity 0,2,0) sets neither
   property for the site's "type-1" card layout, and WC core's higher-spec
   float-grid rule (.woocommerce ul.products li.product, 0,3,2, which WOULD
   beat this rule's 0,4,2 by load order alone) ships in woocommerce-layout.css,
   which Blocksy dequeues site-wide via full theme support (confirmed: not in
   the enqueued <link> list). Kept defensively, at parity with the superseded
   monolith rule it replaces, in case that theme-support posture ever changes. */
.lumiade-storefront.woocommerce ul.products li.product {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	border-radius: 0;
	box-shadow: none;
	float: none;
	margin: 0 !important;
	overflow: hidden;
	padding: 0 0 24px;
	position: relative;
	transition: border-color 180ms ease;
	width: auto !important;
}

.lumiade-storefront.woocommerce ul.products li.product:hover {
	border-color: var(--lumiade-ink);
	box-shadow: none;
	transform: none;
}

/* Square clinical packshots (Task 1); paper ground blends the seamless bg. */
.lumiade-storefront.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	background: var(--lumiade-paper);
	height: auto;
	margin: 0 0 14px;
	object-fit: cover;
	width: 100%;
}

/* Blocksy wraps the image in <figure>; zero its default bottom gap. */
.lumiade-storefront.woocommerce ul.products li.product > figure {
	margin: 0;
}

/* !important (font-size/padding): verified no live competing rule — Blocksy's
   title selector is a zero-specificity :where(.woocommerce-loop-product__title)
   that only sets custom props, and WC core's higher-spec title rule
   (.woocommerce ul.products li.product .woocommerce-loop-product__title,
   0,4,2) ships in the dequeued woocommerce-general.css. Kept defensively, at
   parity with the superseded monolith rule it replaces. */
.lumiade-storefront .woocommerce-loop-product__title {
	color: var(--lumiade-ink);
	font-family: var(--lumiade-font-serif);
	font-size: var(--lumiade-fs-lg) !important;
	font-weight: 420;
	line-height: 1.2;
	margin-left: 20px;
	margin-right: 20px;
	min-height: 58px; /* keeps price/CTA rows aligned across the grid */
	padding: 0 !important;
}

.lumiade-storefront.woocommerce ul.products li.product .price {
	color: var(--lumiade-ink);
	display: block;
	font-size: var(--lumiade-fs-sm);
	font-weight: 600;
}
/* Sale price bronze + struck regular price are owned by components.css
   (site-wide bronze budget) — do not restate here. */

.lumiade-storefront.woocommerce ul.products li.product .product-categories,
.lumiade-storefront.woocommerce ul.products li.product .ct-product-categories {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lumiade-storefront.woocommerce ul.products li.product .button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	margin: 12px 0 0;
	min-height: 48px;
	min-width: 118px;
	padding-inline: 18px;
}

/* Blocksy stacks the card children directly under li.product; inset them to
   the card's 20px gutter. Kept from the legacy layer verbatim — these are
   layout plumbing, not styling.
   !important (margin-left/right, this block + the two below): verified no
   live competing rule on "type-1" cards — Blocksy's own margin/width
   overrides for these same children (figure, .ct-woo-card-actions) exist
   only under the "type-2" card-layout variant ([data-products=type-2]),
   which this theme's Customizer setting doesn't select. Kept defensively, at
   parity with the superseded monolith rule. */
.lumiade-storefront.woocommerce ul.products li.product > .ct-card-variation-swatches,
.lumiade-storefront.woocommerce ul.products li.product > .woocommerce-loop-product__title,
.lumiade-storefront.woocommerce ul.products li.product > .price,
.lumiade-storefront.woocommerce ul.products li.product > .ct-woo-card-rating,
.lumiade-storefront.woocommerce ul.products li.product > .entry-meta,
.lumiade-storefront.woocommerce ul.products li.product > .ct-woo-card-actions {
	box-sizing: border-box;
	margin-left: 20px !important;
	margin-right: 20px !important;
	width: calc(100% - 40px);
}

.lumiade-storefront.woocommerce ul.products li.product > .ct-card-variation-swatches {
	margin-bottom: 10px !important;
}

.lumiade-storefront.woocommerce ul.products li.product > .ct-woo-card-actions .button {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* — Card badges: demo merchandising, ink on paper, hairline (never bronze).
     13px is permitted: uppercase + letter-spaced label. — */
.lumiade-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	left: 12px;
	position: absolute;
	top: 12px;
	z-index: 2;
}

.lumiade-badge {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-line);
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 6px 10px;
	text-transform: uppercase;
}

/* Low-stock label: renders from managed stock. The six demo products manage stock at the VARIATION level with seeded quantities, so this label IS live — kept per the recorded demo-store decision (badges/scarcity stay, restyled). Launch checklist: replace seeded quantities with real inventory. Clay = the semantic urgency tone, per tokens.css. */
.lumiade-badge-stock {
	color: var(--lumiade-clay);
}

/* — /shop header (Task 3): eyebrow, one editorial sentence, chips, link — */
.lumiade-shop-head {
	margin: 6px 0 36px;
	max-width: 820px;
}

.lumiade-shop-head .lumiade-kicker {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.lumiade-shop-head h2 {
	color: var(--lumiade-ink);
	font-family: var(--lumiade-font-serif);
	font-size: var(--lumiade-fs-2xl);
	font-weight: 420;
	line-height: 1.16;
	margin: 0;
}

/* Category chips: understated text links, not pills. */
.lumiade-shop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 18px;
}

.lumiade-shop-chips a {
	border-bottom: 1px solid transparent;
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-sm);
	padding-bottom: 2px;
	text-decoration: none;
}

.lumiade-shop-chips a:hover {
	border-bottom-color: var(--lumiade-ink);
}

/* Active category (archive nav) + the "All products" chip. The .lumiade-cat-nav
   row (see below) now renders on /shop as well as the category archives, so both
   carry the same "All products | categories" chips — "All products" is the
   is-active chip on /shop, the current term on an archive. */
.lumiade-shop-chips a.is-active {
	border-bottom-color: var(--lumiade-ink);
	font-weight: 600;
}

.lumiade-shop-chips .lumiade-shop-chip-all {
	border-right: 1px solid var(--lumiade-line);
	margin-right: 2px;
	padding-right: 24px;
}

/* Category nav band on taxonomy archives (echoed by woocommerce_before_shop_loop
   @1). Reuses .lumiade-shop-chips for the chip row; this wrapper just sets the
   rhythm between the term description above and the refine bar below. */
.lumiade-cat-nav {
	margin: 0 0 22px;
}

.lumiade-shop-routine-link {
	color: var(--lumiade-ink);
	display: inline-block;
	font-size: var(--lumiade-fs-sm);
	margin-top: 16px;
	text-decoration: underline;
	text-decoration-color: var(--lumiade-line);
	text-underline-offset: 4px;
}

.lumiade-shop-routine-link:hover {
	text-decoration-color: var(--lumiade-ink);
}

/* — Refine filters (Task 3; redesigned 2026-07-13) —
   Key Ingredient and Skin Concern previously shared one flex row and ran
   together — the small muted labels blended into the chips, so you couldn't tell
   where one group ended. Now each taxonomy is its own row: a fixed-width ink
   uppercase label column on the left, its chips to the right, and a hairline
   between rows. The two axes read as two distinct groups. */
.lumiade-shop-refine {
	border-bottom: 1px solid var(--lumiade-line);
	border-top: 1px solid var(--lumiade-line);
	display: flex;
	flex-direction: column;
	margin: 0 0 34px;
}

.lumiade-filter-group {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	padding: 15px 0;
}

/* Hairline between the two groups (and before the clear row, when present). */
.lumiade-filter-group + .lumiade-filter-group,
.lumiade-shop-refine .lumiade-filter-clear {
	border-top: 1px solid var(--lumiade-line);
}

.lumiade-filter-label {
	color: var(--lumiade-ink);
	flex: 0 0 132px;
	font-size: var(--lumiade-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lumiade-filter-chips {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.lumiade-filter-chip {
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-sm);
	padding: 0 0 2px;
	text-decoration: none;
}

.lumiade-filter-chip:hover {
	border-bottom-color: var(--lumiade-line);
}

.lumiade-filter-chip.is-active {
	border-bottom-color: var(--lumiade-ink);
	font-weight: 600;
}

.lumiade-filter-clear {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
	padding: 13px 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lumiade-filter-clear:hover {
	color: var(--lumiade-ink);
}

/* Stack the label above its chips on narrow screens so neither is cramped. */
@media (max-width: 600px) {
	.lumiade-filter-label {
		flex-basis: 100%;
	}
}

/* — Catalog ordering select (fix 2026-07-13) —
   The shared select rule (components.css) sets line-height:1.4 on the native
   <select>, which left the value text bottom-aligned inside the box and clipped
   "Default sorting". appearance:none renders the value as a normal centered line
   box (no clip) and lets us draw a clean chevron instead of the native arrow.
   The `background` shorthand (not background-image) is required: the generic rule
   sets `background: #ffffff !important`, whose implicit longhands would reset a
   plain background-image/position — so we override the whole shorthand at higher
   specificity (0,3,1 > 0,1,1). Chevron is an inline SVG data URI (# encoded). */
.lumiade-storefront .woocommerce-ordering select.orderby {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%2333272a' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px !important;
	height: auto !important;
	line-height: 1.4 !important;
	padding: 11px 38px 11px 14px !important;
}

/* — Category archive header (Task 5; revised 2026-07-13) — align with /shop.
   Previously this only restyled the fonts of Blocksy's native page-title,
   which still rendered CENTERED inside a full-width beige hero band, while
   /shop hid that hero and injected its own LEFT-aligned white `.lumiade-shop-head`
   band (woocommerce_before_shop_loop, is_shop only). Result: the shop archive
   and every category archive looked nothing alike. This block makes the
   category header match /shop: white ground, left-aligned, and its content box
   aligned to the product grid's container so the title's left edge lines up
   with the cards below.

   Markup (verified live 2026-07-11, re-confirmed 2026-07-13 on /shop +
   /product-category/serums/): both archives share
   `.hero-section[data-type=type-2] > header.entry-header.ct-container-narrow
   > h1.page-title` (+ `.page-description` on taxonomy archives). The beige
   band comes from `.lumiade-shop-template .hero-section { background:
   var(--lumiade-soft); border-bottom; padding:34px 0 }` in lumiade-homepage.css,
   which `:not(.tax-product_cat)` hides on /shop only — so category archives
   keep it. We neutralize it here for taxonomy archives.

   Container alignment: `.ct-container` (the product grid) is centered at
   `max-width: var(--theme-normal-container-max-width)`; `.ct-container-narrow`
   (the entry-header) is centered but narrower, so its left edge is inset.
   Setting the entry-header's max-width to the SAME normal-container variable,
   still centered, gives it an identical box → left edges align. Reusing the
   Blocksy variable (not a hard px) keeps it correct if the Customizer width
   changes.

   Scope stays `.lumiade-shop-template.tax-product_cat`: the same markup on the
   /shop post-type archive has no `tax-product_cat` body class, so /shop (with
   its hidden hero + injected band) is untouched; PDP carries neither class, so
   the is_product() shop.css load is unaffected.

   Blocksy hides `.page-description` below 690px via `.ct-hidden-sm { display:
   none !important }` (bundle, `@media (max-width:689.98px)`); the display
   override below (0,3,0 !important) beats it (0,1,0 !important) on equal
   importance via higher specificity, keeping the sentence legible at the
   390px type floor. */

/* Neutralize the beige hero band for taxonomy archives (see above). The
   padding !important overrides lumiade-homepage.css's `.hero-section {
   padding:34px 0 !important }` (equal specificity leg via the shared
   `.lumiade-shop-template` class; this rule's added `.tax-product_cat` makes
   it 0,3,1 vs that rule's 0,2,1, so it wins). Top padding matches the
   `.lumiade-shop-head` top rhythm on /shop. */
.lumiade-shop-template.tax-product_cat .hero-section {
	background: none;
	border-bottom: 0;
	padding: 44px 0 4px !important;
}

.lumiade-shop-template.tax-product_cat .hero-section .entry-header {
	margin-inline: auto;
	max-width: var(--theme-normal-container-max-width);
	text-align: left;
}

.lumiade-shop-template.tax-product_cat .entry-header .page-title {
	color: var(--lumiade-ink);
	font-family: var(--lumiade-font-serif);
	font-size: var(--lumiade-fs-2xl);
	font-weight: 420;
	line-height: 1.16;
	margin: 0;
	text-align: left;
}

.lumiade-shop-template.tax-product_cat .page-description {
	color: var(--lumiade-muted);
	display: block !important;
	font-size: var(--lumiade-fs-base);
	line-height: 1.6;
	margin: 12px 0 0;
	max-width: 720px;
	text-align: left;
}

/* The product grid container carries Blocksy's content-vertical-spacing (60px)
   as padding-top (var(--theme-content-vertical-spacing) via [data-vertical-spacing
   *=top]). On category archives that stacks under the title band above and leaves
   an oversized gap before the .lumiade-cat-nav "All products" row. Trim it so the nav
   sits close to the term description. Scoped to .tax-product_cat so /shop — whose
   .lumiade-shop-head wants that top breathing room below the site header — keeps the
   full spacing. Specificity 0,4,0 (three classes + attr) beats Blocksy's
   [data-vertical-spacing*=top] (0,1,0); no !important needed. */
.lumiade-shop-template.tax-product_cat .ct-container[data-vertical-spacing*="top"] {
	padding-top: 16px;
}