/*
 * Commerce Catalyst — WooCommerce Override CSS
 * Sprint 3B — fix: Astra badge, ATC width, typography WC, hover text colour
 *
 * Tested against: Astra 4.13.x, Storefront, GeneratePress, Hello Elementor
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. TYPOGRAPHY — applied to WC native elements + CC elements
   ═══════════════════════════════════════════════════════════════════════ */

/* Product title (h1) */
.woocommerce .product_title,
.woocommerce-page .product_title {
	font-family:  var(--cc-font-serif, Georgia, serif);
	font-weight:  var(--cc-heading-weight, 600);
}

/* Short description, tab content, product meta */
.woocommerce .woocommerce-product-details__short-description,
.woocommerce .woocommerce-Tabs-panel,
.woocommerce .product_meta,
.woocommerce-page .woocommerce-product-details__short-description,
.woocommerce-page .woocommerce-Tabs-panel {
	font-family: var(--cc-font-sans, system-ui, sans-serif);
	font-size:   var(--cc-font-size-base, 15px);
}

/* Archive product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cc-font-sans, system-ui, sans-serif);
	font-weight: var(--cc-heading-weight, 600);
}

/* CC elements — already in frontend.css but set here as fallback */
.cc-section,
.cc-trust-block,
.cc-cta-engine,
.cc-faq,
.cc-premium-resources {
	font-family: var(--cc-font-sans, system-ui, sans-serif);
	font-size:   var(--cc-font-size-base, 15px);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. PRICE
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce .price,
.woocommerce p.price,
.woocommerce span.price,
.woocommerce .woocommerce-Price-amount.amount,
.woocommerce-page .price,
.woocommerce-page .woocommerce-Price-amount.amount {
	color:     var(--wc-price-color, #111111);
	font-size: var(--wc-price-size, 1.5em);
}

.woocommerce .price del,
.woocommerce p.price del,
.woocommerce .price del .woocommerce-Price-amount {
	opacity:   0.5;
	font-size: 0.8em;
}

/* Archive price — 75% of single product size */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	font-size: calc(var(--wc-price-size, 1.5em) * 0.75);
}

/* ═══════════════════════════════════════════════════════════════════════
   3. SALE BADGE
   FIX: Astra uses span.ast-on-card-button.ast-onsale-card instead of
   the standard span.onsale — we target both. Specificity is matched to
   Astra's own selectors by chaining body.woocommerce.
   ═══════════════════════════════════════════════════════════════════════ */

body.woocommerce span.onsale,
body.woocommerce-page span.onsale,
body.woocommerce span.ast-on-card-button.ast-onsale-card,
body.woocommerce-page span.ast-on-card-button.ast-onsale-card,
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce span.ast-on-card-button.ast-onsale-card,
.woocommerce-page span.ast-on-card-button.ast-onsale-card {
	background-color: var(--wc-badge-bg, #e63946) !important;
	color:            var(--wc-badge-color, #ffffff) !important;
	border-radius:    var(--wc-badge-radius, 3px) !important;
	/* width/height managed by JS (cc-wc-js-fixes) — Astra sets them as
	   inline styles after DOM load which !important cannot override */
	min-width:   unset !important;
	min-height:  unset !important;
	line-height: 1.4 !important;
	padding:     4px 10px !important;
	font-size:   12px !important;
	font-weight: 600 !important;
	display:     inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. ADD TO CART BUTTON
   FIX: Width applied to form.cart wrapper, not just the button, because
   Astra wraps the button in form.cart{display:flex} which ignores child width.
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce-page a.button.add_to_cart_button,
.woocommerce-page button.button.alt {
	background-color: var(--wc-atc-bg, #185FA5) !important;
	color:            var(--wc-atc-color, #ffffff) !important;
	border-radius:    var(--wc-atc-radius, 4px) !important;
	border:           none !important;
	transition:       background-color 0.2s ease, color 0.2s ease;
}

.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce-page a.button.add_to_cart_button:hover,
.woocommerce-page button.button.alt:hover {
	background-color: var(--wc-atc-bg-hover, #0C447C) !important;
	color:            var(--wc-atc-color-hover, #ffffff) !important;
}

/*
 * ATC Width — beats Astra's:
 *   .woocommerce-js div.product form.cart .button { width: auto }
 * by matching the same specificity chain and adding !important.
 * Width is also applied via JS (cc-wc-js-fixes) as inline style
 * for maximum compatibility.
 */

/* Form wrapper width */
.woocommerce-js div.product form.cart {
	width: var(--wc-atc-width, auto);
}

/* Button width — matches Astra specificity + !important to win */
.woocommerce-js div.product form.cart .single_add_to_cart_button,
.woocommerce-js div.product form.cart button.alt,
.woocommerce-js div.product form.cart input.alt {
	width: var(--wc-atc-width, auto) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. ARCHIVE GRID — COLUMNS
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display:               grid !important;
	grid-template-columns: repeat(var(--wc-archive-cols, 3), 1fr) !important;
	gap:                   24px !important;
	float:                 none !important;
	clear:                 both !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float:  none !important;
	width:  100% !important;
	margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. ARCHIVE GRID — CARD STYLES
   Card style is applied as a body class by CC_WC_Design::add_card_style_body_class().
   body.cc-card-{style} is set server-side — unaffected by Astra JS.
   Astra adds .woocommerce and .woocommerce-page to body on archive pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* flat (default) — no decoration */
body.cc-card-flat ul.products li.product {
	background: transparent;
	border:     none !important;
	padding:    0 !important;
	box-shadow: none !important;
}

/* card — border + shadow on hover */
body.cc-card-card ul.products li.product {
	background:    #fff;
	border:        1px solid rgba(0,0,0,.09) !important;
	border-radius: var(--wc-archive-card-radius, 6px) !important;
	padding:       16px !important;
	box-shadow:    0 1px 3px rgba(0,0,0,.06);
	transition:    box-shadow 0.2s ease, transform 0.2s ease;
}
body.cc-card-card ul.products li.product:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.10);
	transform:  translateY(-2px);
}

/* minimal — bottom border only */
body.cc-card-minimal ul.products li.product {
	background:    transparent;
	border:        none !important;
	border-bottom: 1px solid rgba(0,0,0,.10) !important;
	border-radius: 0 !important;
	padding:       0 0 20px !important;
	box-shadow:    none !important;
}

/* magazine — full-bleed image */
body.cc-card-magazine ul.products li.product {
	background:    #fff;
	border:        1px solid rgba(0,0,0,.07) !important;
	border-radius: var(--wc-archive-card-radius, 6px) !important;
	padding:       0 !important;
	overflow:      hidden;
	box-shadow:    none !important;
}
body.cc-card-magazine ul.products li.product a img {
	width: 100%; display: block; border-radius: 0; margin: 0;
}
body.cc-card-magazine ul.products li.product .woocommerce-loop-product__title,
body.cc-card-magazine ul.products li.product .price,
body.cc-card-magazine ul.products li.product .button {
	padding-left: 16px; padding-right: 16px;
}
body.cc-card-magazine ul.products li.product .woocommerce-loop-product__title {
	padding-top: 12px; padding-bottom: 4px;
}
body.cc-card-magazine ul.products li.product .button {
	margin: 8px 16px 16px; display: block;
	width: calc(100% - 32px); text-align: center; box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media ( max-width: 1024px ) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(min(3, var(--wc-archive-cols, 3)), 1fr) !important;
	}
}

@media ( max-width: 768px ) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}
	/* Note: ATC button width on mobile is controlled by --wc-atc-width var.
	   We do NOT force width:100% here as it overrides the user's choice. */
}

@media ( max-width: 480px ) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   8. GALLERY THUMBNAIL STYLES — Sprint 3B Modulo 3
   body.cc-gallery-{style} set by CC_Layout::add_gallery_style_class()
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Typography — per element CSS vars ─────────────────────────────────────
   All vars set in Customizer → 🌐 Global — Typography.
   These rules apply the CSS custom properties to the correct selectors.
   Specificity is kept intentionally high to override Astra and WC defaults. ──── */

/* Hero headline & subtitle */
.cc-shop-hero__title {
	font-family: var(--cc-hero-title-font, var(--cc-font-serif, Georgia, serif)) !important;
	font-size:   var(--cc-hero-title-size, 42px) !important;
	font-weight: var(--cc-hero-title-weight, 700) !important;
}
.cc-shop-hero__subtitle {
	font-family: var(--cc-hero-sub-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-hero-sub-size, 18px) !important;
}

/* Shop archive title */
.woocommerce-products-header__title,
.woocommerce-shop h1.page-title,
body.woocommerce-page h1.page-title {
	font-family: var(--cc-shop-title-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-shop-title-size, 32px) !important;
	font-weight: var(--cc-shop-title-weight, 700) !important;
}

/* Product title h1 */
body.single-product h1.product_title,
body.single-product h1.product_title.entry-title {
	font-family: var(--cc-product-title-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-product-title-size, 28px) !important;
	font-weight: var(--cc-product-title-weight, 600) !important;
}

/* Short description */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
	font-family: var(--cc-short-desc-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-short-desc-size, 15px) !important;
}

/* Full description (tab) */
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li {
	font-family: var(--cc-desc-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-desc-size, 15px) !important;
}

/* Product price */
body.single-product p.price,
body.single-product span.price,
.woocommerce ul.products li.product .price {
	font-family: var(--cc-price-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-weight: var(--cc-price-weight, 600) !important;
}

/* Add to Cart button */
.woocommerce button.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	font-family: var(--cc-atc-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-atc-size, 15px) !important;
	font-weight: var(--cc-atc-weight, 600) !important;
}

/* Breadcrumb */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb {
	font-family: var(--cc-breadcrumb-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-breadcrumb-size, 12px) !important;
}

/* WC tab labels */
.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--cc-tab-label-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-tab-label-size, 14px) !important;
	font-weight: var(--cc-tab-label-weight, 600) !important;
}

/* WC tab content */
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li {
	font-family: var(--cc-tab-content-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-tab-content-size, 15px) !important;
}

/* Trust block (4-col below ATC) */
.cc-trust-item,
.cc-trust-item span,
.cc-trust-block .cc-trust-label {
	font-family: var(--cc-trust-font, var(--cc-font-sans, system-ui, sans-serif)) !important;
	font-size:   var(--cc-trust-size, 13px) !important;
}

/* Global body font fallback */
body,
body p,
body li,
body td {
	font-family: var(--cc-font-sans, system-ui, sans-serif);
	font-size:   var(--cc-font-size-base, 15px);
}

/* ── Global thumbnail size constraint (applies to ALL gallery styles) ──────
   WooCommerce wraps .flex-control-thumbs in a .flex-viewport div.
   We constrain all thumbnails globally so they never appear full-size. */

/* Thumbnails: CSS sets max constraints but FlexSlider overrides width via JS inline style.
   The JS fix in CC_WC_Design::inject_js_fixes() removes inline styles from thumbnails.
   CSS here handles layout and image cropping. */

body.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	max-width: 80px !important;
	max-height: 80px !important;
	width: 72px !important;
	height: 72px !important;
	float: none !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 72px !important;
	height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	display: block !important;
}

/* FlexSlider viewport — must not clip thumbnails */
body.single-product .woocommerce-product-gallery .flex-viewport {
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
}

/* ── stack: thumbnails vertical on the left ─────────────────────────── */
body.cc-gallery-stack .woocommerce-product-gallery {
	display: flex !important;
	flex-direction: row-reverse !important;
	gap: 10px !important;
	align-items: flex-start !important;
}

body.cc-gallery-stack .flex-control-thumbs {
	display: flex !important;
	flex-direction: column !important;
	width: 72px !important;
	min-width: 72px !important;
	flex-shrink: 0 !important;
	gap: 6px !important;
	order: -1 !important;
	max-height: 480px !important;
	overflow-y: auto !important;
}

body.cc-gallery-stack .flex-control-thumbs li {
	width: 72px !important;
	height: 72px !important;
	margin: 0 !important;
	float: none !important;
	flex-shrink: 0 !important;
}

body.cc-gallery-stack .flex-control-thumbs li img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
}

body.cc-gallery-stack .woocommerce-product-gallery__wrapper {
	flex: 1 !important;
	min-width: 0 !important;
}

/* ── carousel: thumbnails horizontal below main image ───────────────── */
body.cc-gallery-carousel .woocommerce-product-gallery {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

body.cc-gallery-carousel .flex-control-thumbs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	gap: 8px !important;
	padding-bottom: 6px !important;
	scrollbar-width: thin !important;
}

body.cc-gallery-carousel .flex-control-thumbs li {
	flex-shrink: 0 !important;
	width: 72px !important;
	height: 72px !important;
	float: none !important;
	margin: 0 !important;
}

body.cc-gallery-carousel .flex-control-thumbs li img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
}

body.cc-gallery-carousel .woocommerce-product-gallery__wrapper {
	width: 100% !important;
}

/* ── simple: minimal horizontal strip, clean ────────────────────────── */
body.cc-gallery-simple .woocommerce-product-gallery {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

body.cc-gallery-simple .flex-control-thumbs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 8px !important;
}

body.cc-gallery-simple .flex-control-thumbs li {
	width: 64px !important;
	height: 64px !important;
	float: none !important;
	margin: 0 !important;
	opacity: 0.7;
	transition: opacity 0.15s !important;
}

body.cc-gallery-simple .flex-control-thumbs li img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
}

body.cc-gallery-simple .flex-control-thumbs li:hover,
body.cc-gallery-simple .flex-control-thumbs li.flex-active {
	opacity: 1 !important;
}

/* ── Responsive: all styles collapse to simple on mobile ────────────── */
@media ( max-width: 600px ) {
	body.cc-gallery-stack .woocommerce-product-gallery,
	body.cc-gallery-carousel .woocommerce-product-gallery {
		flex-direction: column !important;
	}

	body.cc-gallery-stack .flex-control-thumbs {
		flex-direction: row !important;
		width: 100% !important;
	}

	body.cc-gallery-stack .flex-control-thumbs li {
		width: 56px !important;
	}
}