/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Astra child theme for WooCommerce customizations.
Author: Kingsuk
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Add all custom CSS below this line. */
 
 /* =====================================================================
 * Custom WooCommerce Category Page
 * ---------------------------------------------------------------------
 * Scope: All rules below are namespaced under `.wc-category-page` to
 * guarantee they never leak into other Astra / WooCommerce templates.
 *
 * Assumption: the markup rendered by inc/category.php wraps its entire
 * output in a root element carrying the class `wc-category-page`
 * (e.g. <div class="wc-category-page"> ... </div>). If your actual
 * wrapper class differs, update the single selector below and every
 * rule in this section will still apply correctly since they all
 * descend from it.
 *
 * Structure assumed inside `.wc-category-page`:
 *   .wc-category-banner            full-width top banner (img/picture)
 *   .wc-category-title             centered category title below banner
 *   #wc-infinite-scroll             infinite scroll wrapper (see category.js)
 *   #wc-product-grid               <ul class="products"> product grid
 *   .product                        individual WooCommerce product card
 *   .wc-infinite-loader               loading spinner + text
 *   .wc-infinite-end-message          "End of Products" message
 *   .wc-infinite-error-message       error message + retry button
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Design tokens (scoped custom properties)
 * ------------------------------------------------------------------- */
.wc-category-page {
	--wc-cat-color-bg: #FFFFFF;
	--wc-cat-color-primary: #2563EB;
	--wc-cat-color-text: #000000;
	--wc-cat-color-text-secondary: #4B5563;
	--wc-cat-color-border: #E5E7EB;
	--wc-cat-font-family: "Inter", sans-serif;
	--wc-cat-radius: 12px;
	--wc-cat-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
	--wc-cat-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
	--wc-cat-gap: 12px;

	background-color: var(--wc-cat-color-bg);
	color: var(--wc-cat-color-text);
	font-family: var(--wc-cat-font-family);
}

.wc-category-page * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * 2. Banner
 * ------------------------------------------------------------------- */
.wc-category-page .wc-category-banner {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	line-height: 0;
}

.wc-category-page .wc-category-banner img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 16 / 5;
}

/* ---------------------------------------------------------------------
 * 3. Category title
 * ------------------------------------------------------------------- */
.wc-category-page .wc-category-title {
	text-align: center;
	color: var(--wc-cat-color-text);
	font-family: var(--wc-cat-font-family);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.3;
	margin: 20px auto 16px;
	padding: 0 16px;
}

/* ---------------------------------------------------------------------
 * 4. Hide default WooCommerce archive chrome
 *    (result count, ordering dropdown, sidebar, filter widgets,
 *    grid/list switcher, extra toolbars)
 * ------------------------------------------------------------------- */
.wc-category-page .woocommerce-result-count,
.wc-category-page .woocommerce-ordering,
.wc-category-page .woocommerce-notices-wrapper,
.wc-category-page nav.woocommerce-pagination,
.wc-category-page .widget-area,
.wc-category-page .sidebar,
.wc-category-page .price_slider,
.wc-category-page .price_slider_wrapper,
.wc-category-page .widget_price_filter,
.wc-category-page .widget_layered_nav,
.wc-category-page .widget_layered_nav_filters,
.wc-category-page .woocommerce-widget-layered-nav,
.wc-category-page .woocommerce-widget-layered-nav-list,
.wc-category-page .wc-grid-list-switcher,
.wc-category-page .woocommerce-products-header__toolbar,
.wc-category-page .shop-toolbar {
	display: none !important;
}

/* Astra sometimes reserves a content/sidebar column layout; force full width
 * within the scoped page only. */
.wc-category-page.ast-container,
.wc-category-page .ast-container {
	max-width: 100%;
}

/* ---------------------------------------------------------------------
 * 5. Product grid
 *    Mobile-first: 2 columns on mobile, scaling up to 5 on desktop.
 * ------------------------------------------------------------------- */
.wc-category-page #wc-product-grid,
.wc-category-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wc-cat-gap);
	list-style: none;
	margin: 0;
	padding: 16px;
}

/* Reset Astra/WooCommerce default li spacing/floats inside the grid. */
.wc-category-page ul.products li.product {
	margin: 0;
	float: none;
	width: auto;
	clear: none;
}

/* ---------------------------------------------------------------------
 * 6. Product card
 *    Entire card is clickable; no add-to-cart, wishlist, or compare UI.
 * ------------------------------------------------------------------- */
.wc-category-page .product {
	position: relative;
	background-color: var(--wc-cat-color-bg);
	border: 1px solid var(--wc-cat-color-border);
	border-radius: var(--wc-cat-radius);
	box-shadow: var(--wc-cat-shadow);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

.wc-category-page .product:hover,
.wc-category-page .product:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wc-cat-shadow-hover);
}

/* Make the whole card clickable via a stretched link, while keeping the
 * visible title link accessible and unstyled as a normal inline link. */
.wc-category-page .product a.woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wc-category-page .product a.woocommerce-LoopProduct-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Product image */
.wc-category-page .product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	background-color: var(--wc-cat-color-border);
}

/* Card content padding wrapper */
.wc-category-page .product .wc-product-info,
.wc-category-page .product .woocommerce-loop-product__title {
	padding: 10px 12px 0;
}

/* Product title */
.wc-category-page .product .woocommerce-loop-product__title {
	font-family: var(--wc-cat-font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wc-cat-color-text);
	line-height: 1.35;
	margin: 0;
	padding-top: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Product price */
.wc-category-page .product .price {
	display: block;
	font-family: var(--wc-cat-font-family);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wc-cat-color-primary);
	padding: 4px 12px 0;
}

.wc-category-page .product .price del {
	color: var(--wc-cat-color-text-secondary);
	font-weight: 400;
	margin-right: 6px;
}

.wc-category-page .product .price ins {
	text-decoration: none;
}

/* Available colors section */
.wc-category-page .product .wc-product-colors {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px 12px;
	position: relative;
	z-index: 2;
}

.wc-category-page .product .wc-product-colors__swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--wc-cat-color-border);
	display: inline-block;
}

.wc-category-page .product .wc-product-colors__more {
	font-size: 0.75rem;
	color: var(--wc-cat-color-text-secondary);
	margin-left: 2px;
}

/* Explicitly hide add-to-cart, wishlist, and compare controls in case the
 * loop template still outputs them. */
.wc-category-page .product .add_to_cart_button,
.wc-category-page .product .ajax_add_to_cart,
.wc-category-page .product a.button,
.wc-category-page .product .yith-wcwl-add-to-wishlist,
.wc-category-page .product .compare,
.wc-category-page .product .woocommerce-product-compare,
.wc-category-page .product .wc-compare-button {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * 7. Infinite scroll: loading, end-of-products, and error states
 *    (element hooks provided by assets/js/category.js)
 * ------------------------------------------------------------------- */
.wc-category-page .wc-infinite-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px 16px;
	color: var(--wc-cat-color-text-secondary);
	font-family: var(--wc-cat-font-family);
	font-size: 0.875rem;
}

.wc-category-page .wc-infinite-loader__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--wc-cat-color-border);
	border-top-color: var(--wc-cat-color-primary);
	border-radius: 50%;
	animation: wc-cat-spin 0.7s linear infinite;
}

@keyframes wc-cat-spin {
	to {
		transform: rotate(360deg);
	}
}

.wc-category-page .wc-infinite-end-message {
	text-align: center;
	padding: 24px 16px;
	color: var(--wc-cat-color-text-secondary);
	font-family: var(--wc-cat-font-family);
	font-size: 0.875rem;
	border-top: 1px solid var(--wc-cat-color-border);
	margin-top: 8px;
}

.wc-category-page .wc-infinite-error-message {
	text-align: center;
	padding: 20px 16px;
	margin: 8px 16px 16px;
	color: #B91C1C;
	background-color: #FEF2F2;
	border: 1px solid #FECACA;
	border-radius: var(--wc-cat-radius);
	font-family: var(--wc-cat-font-family);
	font-size: 0.875rem;
}

.wc-category-page .wc-infinite-retry-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 18px;
	background-color: var(--wc-cat-color-primary);
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	font-family: var(--wc-cat-font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wc-category-page .wc-infinite-retry-btn:hover,
.wc-category-page .wc-infinite-retry-btn:focus {
	background-color: #1D4ED8;
}

/* ---------------------------------------------------------------------
 * 8. Responsive breakpoints
 *    Mobile-first base styles above target small screens (<600px).
 *    Progressive enhancement for tablet, laptop, and desktop below.
 * ------------------------------------------------------------------- */

/* Tablet: ~600px and up — 3 columns */
@media (min-width: 600px) {
	.wc-category-page #wc-product-grid,
	.wc-category-page ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		padding: 20px;
	}

	.wc-category-page .wc-category-title {
		font-size: 1.625rem;
		margin: 28px auto 20px;
	}
}

/* Laptop: ~1024px and up — 4 columns */
@media (min-width: 1024px) {
	.wc-category-page #wc-product-grid,
	.wc-category-page ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		padding: 24px 32px;
	}

	.wc-category-page .wc-category-title {
		font-size: 1.875rem;
	}

	.wc-category-page .product .woocommerce-loop-product__title {
		font-size: 1rem;
	}

	.wc-category-page .product .price {
		font-size: 1rem;
	}
}

/* Desktop: ~1280px and up — 5 columns */
@media (min-width: 1280px) {
	.wc-category-page #wc-product-grid,
	.wc-category-page ul.products {
		grid-template-columns: repeat(5, 1fr);
		gap: 24px;
		max-width: 1440px;
		margin: 0 auto;
		padding: 24px 40px;
	}
}