/**
 * Atlas Labs — Shop / Product Archive
 *
 * Dark-palette styling for the WooCommerce product archive (shop page,
 * category pages), which is otherwise rendered entirely by Kadence's
 * defaults: a light `#EDF2F7` entry-hero band and white `.content-bg`
 * loop cards — both illegible against the dark page (verified live on
 * staging). Product photos in the media library are transparent
 * cutouts, so the loop cards only need a dark surface behind them.
 *
 * Every selector carries the `html body` specificity bump documented
 * in CLAUDE.md: Kadence's own archive rules load after this theme's
 * stylesheets and win bare-class ties.
 *
 * Loaded only on WooCommerce archive pages — see inc/enqueue.php.
 */

/* ---------------------------------------------------------------
 * Page-title band (Kadence "entry hero")
 * ------------------------------------------------------------- */

html body .entry-hero-container-inner,
html body .entry-hero {
	background-color: var(--color-bg-hero);
}

html body .entry-hero .entry-title,
html body .entry-hero-container-inner .entry-title {
	color: var(--color-text-primary);
}

html body .entry-hero .kadence-breadcrumbs,
html body .entry-hero .kadence-breadcrumbs a {
	color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------
 * Mobile grid: 2-up instead of Kadence's silent 1-column fallback
 * ------------------------------------------------------------- */

/* Kadence outputs a `grid-ss-col-2` class on ul.products for the
   sub-576px breakpoint but never ships CSS for it (confirmed live —
   content.min.css/woocommerce.min.css only define grid-sm-col-*
   at min-width:576px and grid-lg-col-* at min-width:1025px), so
   below 576px the grid has no explicit column count and silently
   falls back to a native single-column track. Styling the class
   Kadence already applies, rather than overriding grid-template-columns
   directly, keeps this in step with however Kadence's own column
   customizer setting maps to this class. Applies to every
   multi-product view (shop, category archives, search, related
   products) since they all render through the same loop markup. */
@media (max-width: 575px) {
	html body ul.products.grid-ss-col-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------
 * Product loop cards
 * ------------------------------------------------------------- */

/* Kadence paints BOTH the loop item and its nested .product-details
   wrapper with .content-bg (white) — cover both or the card bottom
   stays a white plate with unreadable light text (verified live).
   The extra `.entry-content-wrap` class (also present on this element)
   is load-bearing, not decorative: Kadence's own
   `.content-bg.loop-entry .content-bg:not(.loop-entry) { background:
   var(--global-palette9) }` (woocommerce.min.css) is 5 classes deep,
   which beats our previous 4-class selector on specificity regardless
   of the extra type selectors — confirmed live via CSSOM inspection on
   the single-product "Related products" block, which still rendered
   white cards despite this rule existing. Matching Kadence's 5-class
   depth (still with zero `!important`, per CLAUDE.md) wins the tie. */
html body ul.products li.product .product-details.content-bg.entry-content-wrap {
	background-color: transparent;
}

html body.woocommerce ul.products li.product.content-bg,
html body ul.products li.product.content-bg {
	background-color: var(--color-surface-primary);
	border: var(--border-width-standard) solid var(--color-border-primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		border-color var(--duration-standard) var(--easing-standard),
		box-shadow var(--duration-standard) var(--easing-standard);
}

@media (hover: hover) {
	html body.woocommerce ul.products li.product.content-bg:hover,
	html body ul.products li.product.content-bg:hover {
		border-color: var(--color-border-secondary);
		box-shadow: var(--shadow-md);
	}
}

/* Transparent product cutouts sit directly on the card surface; give
   the image area a touch of breathing room. */
html body ul.products li.product .product-image-wrap,
html body ul.products li.product > a img {
	padding: var(--space-8);
}

/* The purity badge (fixed width, doesn't shrink) covers a much larger
   share of the image box once cards drop to the 2-up mobile grid —
   confirmed live the vial cap sits directly under it. Push the image
   down clear of the badge instead of shrinking the badge itself. */
@media (max-width: 575px) {
	html body ul.products li.product .product-image-wrap,
	html body ul.products li.product > a img {
		padding-top: var(--space-40);
	}
}

html body ul.products li.product .woocommerce-loop-product__title {
	color: var(--color-text-primary);
}

html body ul.products li.product .price {
	color: var(--color-text-secondary);
}

html body ul.products li.product .price .amount {
	color: var(--color-text-primary);
}

/* Out-of-stock / sale badges Kadence renders over the image. */
html body ul.products li.product .out-of-stock-badge,
html body ul.products li.product .onsale {
	background-color: var(--color-surface-elevated);
	color: var(--color-text-secondary);
	border: var(--border-width-standard) solid var(--color-border-primary);
}

/* Purity badge, injected via atlaslabs_loop_purity_badge() into
   woocommerce_before_shop_loop_item_title — sits inside the product
   link as an image overlay, same top-left placement as the homepage
   Featured Products card (see .al-product-card__badges in cards.css). */
html body ul.products li.product > a.woocommerce-LoopProduct-link {
	position: relative;
}

html body ul.products li.product .al-product-loop__badges {
	position: absolute;
	top: var(--space-8);
	left: var(--space-8);
	z-index: 1;
}

/* ---------------------------------------------------------------
 * Toolbar: result count, ordering select, grid/list toggle
 * ------------------------------------------------------------- */

html body .woocommerce-result-count {
	color: var(--color-text-secondary);
}

html body select.orderby,
html body .woocommerce-ordering select {
	background-color: var(--color-input-background);
	color: var(--color-text-primary);
	border: var(--border-width-standard) solid var(--color-border-secondary);
	border-radius: var(--radius-md);
	padding: var(--space-8) var(--space-12);
}

html body .kadence-toggle-view-layout .toggle-view-item {
	color: var(--color-text-secondary);
}

html body .kadence-toggle-view-layout .toggle-view-item.active {
	color: var(--color-text-primary);
}

/* ---------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------- */

html body.woocommerce nav.woocommerce-pagination ul,
html body.woocommerce nav.woocommerce-pagination ul li {
	border-color: var(--color-border-primary);
}

html body.woocommerce nav.woocommerce-pagination ul li a,
html body.woocommerce nav.woocommerce-pagination ul li span {
	color: var(--color-text-secondary);
	background-color: transparent;
}

html body.woocommerce nav.woocommerce-pagination ul li span.current,
html body.woocommerce nav.woocommerce-pagination ul li a:hover {
	color: var(--color-text-primary);
	background-color: var(--color-surface-elevated);
}