/**
 * California Wild Ales - WooCommerce Listing Cards
 * Styled to match the Brew News card design language (.cwa-tap-card / .wp-block-spectra-post).
 *
 * Uses CWA design tokens from blocks.css / theme.json:
 * - Surfaces: --surface-card (#131313), --surface-sunken (#101010)
 * - Borders: --border-hairline (#2A2A2A), --border-strong (#4A463F)
 * - Accents: --cwa-ember-400 (#E5842F), --cwa-grape-400 (#8E5FB8), --accent (#D9752B)
 * - Typography: Anton (display title), Barlow Condensed (eyebrow, price, button)
 */

/* ─── 1. Product Grid Container ─── */
.woocommerce ul.products:not(.elementor-grid),
.woocommerce-page ul.products:not(.elementor-grid),
.ast-woocommerce-container ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--space-6, 24px) !important;
	list-style: none !important;
	margin: 0 0 var(--space-8, 32px) 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 920px) {
	.woocommerce ul.products:not(.elementor-grid),
	.woocommerce-page ul.products:not(.elementor-grid),
	.ast-woocommerce-container ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

@media (max-width: 580px) {
	.woocommerce ul.products:not(.elementor-grid),
	.woocommerce-page ul.products:not(.elementor-grid),
	.ast-woocommerce-container ul.products {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* ─── 2. Product Card Shell (Matches .spectra-post-item > container) ─── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--surface-card, #131313) !important;
	border: 1px solid var(--border-hairline, #2A2A2A) !important;
	border-radius: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: 100% !important;
	position: relative !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	cursor: pointer;
	transition: border-color var(--dur-fast, 140ms) var(--ease-out, ease-out), transform var(--dur-fast, 140ms) var(--ease-out, ease-out) !important;
}

/* Clear any Astra pseudo-element badges / overlays */
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
	content: none !important;
	display: none !important;
}

/* Card Hover Lift & Ember Accent Border (Matches Brew News) */
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
	border-color: var(--border-strong, #4A463F) !important;
	border-top: 2px solid var(--accent, #D9752B) !important;
	border-left: 1px solid var(--border-strong, #4A463F) !important;
	transform: translateY(-4px) !important;
	outline: none;
}

/* ─── 3. Thumbnail Container (Matches .wp-block-post-featured-image) ─── */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	position: relative !important;
	aspect-ratio: 3 / 2 !important;
	width: 100% !important;
	height: auto !important;
	background: var(--surface-sunken, #101010) !important;
	border-bottom: 1px solid var(--border-hairline, #2A2A2A) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 3 / 2 !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	transition: transform var(--dur-base, 220ms) var(--ease-out, ease-out) !important;
}

/* Smooth zoom on card hover */
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img {
	transform: scale(1.05) !important;
}

/* ─── 4. Sale & Out of Stock Badges ─── */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	padding: 4px 10px !important;
	background: var(--cwa-ember-500, #D9752B) !important;
	color: var(--cwa-ink-900, #0D0D0D) !important;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	line-height: 1.1 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	min-height: auto !important;
	min-width: auto !important;
	z-index: 3 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap::after {
	content: "Sold Out";
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--cwa-ink-800, #131313);
	border: 1px solid var(--border-hairline, #2A2A2A);
	color: var(--text-muted, #A9A08A);
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 8px;
	z-index: 3;
}

/* ─── 5. On-Image Quick Cart Icon (.ast-on-card-button) ─── */
.woocommerce ul.products li.product .ast-on-card-button {
	background: var(--surface-card, #131313) !important;
	border: 1px solid var(--border-hairline, #2A2A2A) !important;
	border-radius: 0 !important;
	color: var(--cwa-ember-400, #E5842F) !important;
	transition: all var(--dur-fast, 140ms) !important;
}

.woocommerce ul.products li.product .ast-on-card-button:hover {
	background: var(--accent, #D9752B) !important;
	border-color: var(--accent, #D9752B) !important;
	color: var(--cwa-ink-900, #0D0D0D) !important;
}

.woocommerce ul.products li.product .ast-on-card-button svg {
	fill: currentColor !important;
}

.woocommerce ul.products li.product .ast-card-action-tooltip {
	background: var(--surface-raised, #1A1A1A) !important;
	border: 1px solid var(--border-hairline, #2A2A2A) !important;
	color: var(--text-body, #F2EAD6) !important;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
}

/* ─── 6. Card Body Summary Wrap (Matches Brew News Card Body) ─── */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	padding: 18px 16px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	gap: 8px !important;
	box-sizing: border-box !important;
	background: transparent !important;
	text-align: left !important;
}

/* ─── 7. Category Eyebrow (Matches .wp-block-post-terms) ─── */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce-page ul.products li.product .ast-woo-product-category {
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--cwa-ember-400, #E5842F) !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	line-height: 1.2 !important;
	transition: color var(--dur-fast, 140ms) !important;
}

.woocommerce ul.products li.product .ast-woo-product-category a {
	color: var(--cwa-ember-400, #E5842F) !important;
	text-decoration: none !important;
}

.woocommerce ul.products li.product .ast-woo-product-category a:hover {
	color: var(--text-highlight, #86C043) !important;
}

/* ─── 8. Product Title (Anton Display, Grape -> Ember hover) ─── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display, Anton, Impact, sans-serif) !important;
	font-size: 22px !important;
	line-height: 1.1 !important;
	letter-spacing: var(--tracking-display, -0.005em) !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--cwa-grape-400, #8E5FB8) !important;
	transition: color var(--dur-fast, 140ms) var(--ease-out, ease-out) !important;
}

.woocommerce ul.products li.product .ast-loop-product__link {
	text-decoration: none !important;
	color: inherit !important;
	display: block !important;
	margin: 0 !important;
}

/* Card hover title color transition (Grape purple -> Ember orange) */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
	color: var(--cwa-ember-400, #E5842F) !important;
}

/* ─── 9. Price / Specs (Matches .wp-block-post-date / .cwa-tap-card__spec) ─── */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--cwa-bone-100, #F2EAD6) !important;
	margin: 0 0 4px 0 !important;
	display: block !important;
	line-height: 1.2 !important;
}

.woocommerce ul.products li.product .price del {
	color: var(--text-subtle, #6B6558) !important;
	font-weight: 500 !important;
	margin-right: 6px !important;
}

.woocommerce ul.products li.product .price ins {
	color: var(--cwa-ember-400, #E5842F) !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}

/* ─── 10. Short Description / Excerpt (If present) ─── */
.woocommerce ul.products li.product .ast-woo-shop-product-description {
	font-family: var(--font-body, 'Inter', sans-serif) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--text-muted, #A9A08A) !important;
	margin: 0 0 8px 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* ─── 11. Add to Cart / Action Button ─── */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 10px 18px !important;
	border-radius: 0 !important;
	border: 1px solid var(--border-hairline, #2A2A2A) !important;
	background: transparent !important;
	color: var(--cwa-bone-100, #F2EAD6) !important;
	text-align: center !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	transition: all var(--dur-fast, 140ms) var(--ease-out, ease-out) !important;
	text-decoration: none !important;
	cursor: pointer;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
	background: var(--accent, #D9752B) !important;
	border-color: var(--accent, #D9752B) !important;
	color: var(--cwa-ink-900, #0D0D0D) !important;
}

/* When the card is hovered, give the button a subtle border boost */
.woocommerce ul.products li.product:hover .button:not(:hover) {
	border-color: var(--border-strong, #4A463F) !important;
}

/* AJAX Add to Cart States */
.woocommerce ul.products li.product .button.added {
	border-color: var(--highlight, #86C043) !important;
	color: var(--highlight, #86C043) !important;
}

.woocommerce ul.products li.product .button.loading {
	opacity: 0.65 !important;
}

.woocommerce ul.products li.product .added_to_cart.wc-forward {
	display: block !important;
	margin-top: 6px !important;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--highlight, #86C043) !important;
	text-align: center !important;
	text-decoration: none !important;
}

.woocommerce ul.products li.product .added_to_cart.wc-forward:hover {
	color: var(--cwa-bone-050, #FAF4E6) !important;
}

/* ─── 12. Category Listing Cards (Shop Page root categories) ─── */
.woocommerce ul.products li.product-category.product,
.woocommerce-page ul.products li.product-category.product {
	background: var(--surface-card, #131313) !important;
	border: 1px solid var(--border-hairline, #2A2A2A) !important;
	border-radius: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	overflow: hidden !important;
	position: relative !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: border-color var(--dur-fast, 140ms) var(--ease-out, ease-out), transform var(--dur-fast, 140ms) var(--ease-out, ease-out) !important;
}

.woocommerce ul.products li.product-category.product:hover {
	border-color: var(--border-strong, #4A463F) !important;
	border-top: 2px solid var(--accent, #D9752B) !important;
	border-left: 1px solid var(--border-strong, #4A463F) !important;
	transform: translateY(-4px) !important;
}

.woocommerce ul.products li.product-category.product > a {
	display: block !important;
	height: 100% !important;
	width: 100% !important;
	text-decoration: none !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

.woocommerce ul.products li.product-category.product img {
	aspect-ratio: 3 / 2 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border: none !important;
	border-bottom: none !important;
	background: var(--surface-sunken, #101010) !important;
	transition: transform var(--dur-base, 220ms) var(--ease-out, ease-out) !important;
	display: block !important;
	margin: 0 !important;
}

.woocommerce ul.products li.product-category.product:hover img {
	transform: scale(1.05) !important;
}

/* Remove category title & product count overlays completely */
.woocommerce ul.products li.product-category.product .woocommerce-loop-category__title,
.woocommerce-page ul.products li.product-category.product .woocommerce-loop-category__title {
	display: none !important;
}

/* Clear any overlay pseudo-elements */
.woocommerce ul.products li.product-category.product::before,
.woocommerce ul.products li.product-category.product::after,
.woocommerce ul.products li.product-category.product > a::before,
.woocommerce ul.products li.product-category.product > a::after {
	content: none !important;
	display: none !important;
}

/* ─── Shop Page Only: Square (1:1) Image Cards ─── */
.woocommerce-shop ul.products li.product-category.product,
.woocommerce-shop ul.products li.product-category.product > a {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
}

.woocommerce-shop ul.products li.product-category.product img {
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-shop ul.products li.product .astra-shop-thumbnail-wrap img {
	aspect-ratio: 1 / 1 !important;
}

/* ─── 13. Shop Page Header, Toolbar & Controls ─── */
.ast-woocommerce-container .woocommerce-products-header__title.page-title {
	font-family: var(--font-display, Anton, Impact, sans-serif) !important;
	font-size: clamp(32px, 5vw, 54px) !important;
	line-height: 1.05 !important;
	text-transform: uppercase !important;
	letter-spacing: var(--tracking-display, -0.005em) !important;
	color: var(--cwa-bone-050, #FAF4E6) !important;
	margin-bottom: var(--space-4, 16px) !important;
}

.ast-shop-toolbar-container {
	border-bottom: 1px solid var(--border-hairline, #2A2A2A) !important;
	padding-bottom: 16px !important;
	margin-bottom: 28px !important;
}

.woocommerce-result-count {
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--text-muted, #A9A08A) !important;
}

.woocommerce-ordering select.orderby {
	background-color: var(--surface-card, #131313) !important;
	border: 1px solid var(--border-hairline, #2A2A2A) !important;
	border-radius: 0 !important;
	color: var(--cwa-bone-100, #F2EAD6) !important;
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.05em !important;
	padding: 8px 32px 8px 12px !important;
	transition: border-color var(--dur-fast, 140ms) !important;
}

.woocommerce-ordering select.orderby:focus {
	border-color: var(--border-strong, #4A463F) !important;
	outline: none !important;
}

/* ─── 14. Pagination ─── */
.woocommerce nav.woocommerce-pagination ul {
	border: 1px solid var(--ast-global-color-0, #D9752B) !important;
	border-radius: 0 !important;
	background: var(--surface-card, #131313) !important;
	display: inline-flex !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: none !important;
	border-right: 1px solid var(--ast-global-color-0, #D9752B) !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
}

.woocommerce nav.woocommerce-pagination ul li:last-child {
	border-right: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	font-family: var(--font-condensed, 'Barlow Condensed', sans-serif) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	color: var(--cwa-bone-100, #F2EAD6) !important;
	padding: 8px 16px !important;
	background: transparent !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	display: block !important;
	transition: all var(--dur-fast, 140ms) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--accent, #D9752B) !important;
	color: var(--cwa-ink-900, #0D0D0D) !important;
}