/* ==========================================================================
   Product cards: ONE global style for every product card on the site
   (shop / category grids, product carousels, landing page product sections).

   To restyle the cards site-wide, change the variables in :root below.
   Loaded after style.css by functions/product-cards.php.

   Card markup (WooCommerce loop, content-product.php / content-product-alt.php):
     .product
       a.woocommerce-loop-product__link
         img
         p.sku
         h2.woocommerce-loop-product__title
         span.price
   ========================================================================== */

:root {
	/* Card */
	--pc-bg: #ffffff;
	--pc-border: 0;                     /* e.g. 1px solid #e9eaee */
	--pc-radius: 0;
	--pc-shadow: none;
	--pc-padding: 24px;
	--pc-padding-mobile: 16px;
	--pc-align: center;                 /* left | center */

	/* Image */
	--pc-image-ratio: 1 / 1;
	--pc-image-fit: contain;
	--pc-image-gap: 20px;               /* space under the image */

	/* SKU / product code */
	--pc-sku-font: "lato", sans-serif;
	--pc-sku-size: 16px;
	--pc-sku-weight: 300;
	--pc-sku-color: #000000;

	/* Title */
	--pc-title-font: "lato", sans-serif;
	--pc-title-size: 16px;
	--pc-title-weight: 300;
	--pc-title-color: #000000;
	--pc-title-line-height: 1.4;

	/* Price */
	--pc-price-size: 18px;
	--pc-price-color: #026653;
	--pc-price-separator-color: #958e09; /* the dash in a price range */
	--pc-price-gap: 12px;                /* minimum space above the price */

	/* Hover */
	--pc-hover-shadow: none;             /* e.g. 0 4px 16px rgba(0,0,0,.08) */
	--pc-hover-title-color: var(--pc-title-color);

	/* Grid (shop / category pages and product grids) */
	--pc-columns: 4;
	--pc-columns-mobile: 2;
	--pc-column-gap: 3.8%;
	--pc-row-gap: 48px;
	--pc-row-gap-mobile: 24px;
}

/* --------------------------------------------------------------------------
   Grid: CSS grid so every card in a row is the same height
   (replaces WooCommerce's float layout).
   -------------------------------------------------------------------------- */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--pc-columns), minmax(0, 1fr));
	column-gap: var(--pc-column-gap);
	row-gap: var(--pc-row-gap);
	margin-left: 0;
	margin-right: 0;
}

ul.products.columns-1 { --pc-columns: 1; }
ul.products.columns-2 { --pc-columns: 2; }
ul.products.columns-3 { --pc-columns: 3; }
ul.products.columns-5 { --pc-columns: 5; }
ul.products.columns-6 { --pc-columns: 6; }

ul.products::before,
ul.products::after {
	display: none !important;
}

ul.products > li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}

@media screen and (max-width: 768px) {
	ul.products,
	ul.products[class*="columns-"] {
		--pc-columns: var(--pc-columns-mobile);
		row-gap: var(--pc-row-gap-mobile);
	}
}

/* Product carousels: stretch every slide to the tallest one in the track. */
.product-slider .slick-track {
	display: flex !important;
}

.product-slider .slick-track::before,
.product-slider .slick-track::after {
	display: none;
}

.product-slider .slick-slide {
	float: none;
	height: auto;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

ul.products li.product:not(.gallery-type),
.product-slider .product,
.products > .product {
	display: flex !important;
	flex-direction: column;
	box-sizing: border-box;
	background-color: var(--pc-bg);
	border: var(--pc-border);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	padding: var(--pc-padding);
	text-align: var(--pc-align);
	transition: box-shadow 0.2s ease;
}

ul.products li.product:not(.gallery-type):hover,
.product-slider .product:hover,
.products > .product:hover {
	box-shadow: var(--pc-hover-shadow);
}

@media screen and (max-width: 639px) {
	ul.products li.product:not(.gallery-type),
	.product-slider .product,
	.products > .product {
		padding: var(--pc-padding-mobile);
	}
}

/* The link wraps the whole card; it grows to fill the card so the price can
   sit at the bottom. height:auto overrides the old JS equaliser (sizeBoxes). */
ul.products li.product a.woocommerce-loop-product__link,
.product-slider .product a.woocommerce-loop-product__link,
.products > .product a.woocommerce-loop-product__link {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	height: auto !important;
	padding: 0;
	color: inherit;
	text-align: var(--pc-align);
}

/* Image */
ul.products li.product a.woocommerce-loop-product__link img,
.product-slider .product a.woocommerce-loop-product__link img,
.products > .product a.woocommerce-loop-product__link img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--pc-image-ratio);
	object-fit: var(--pc-image-fit);
	margin: 0 0 var(--pc-image-gap);
}

/* SKU */
ul.products li.product .sku,
.product-slider .product .sku,
.products > .product .sku {
	margin: 0;
	font-family: var(--pc-sku-font);
	font-size: var(--pc-sku-size);
	font-weight: var(--pc-sku-weight);
	line-height: 1.6;
	color: var(--pc-sku-color);
}

/* Title */
ul.products li.product .woocommerce-loop-product__title,
.product-slider .product .woocommerce-loop-product__title,
.products > .product .woocommerce-loop-product__title {
	margin: 0;
	padding: 8px 0 0;
	font-family: var(--pc-title-font);
	font-size: var(--pc-title-size);
	font-weight: var(--pc-title-weight);
	line-height: var(--pc-title-line-height);
	color: var(--pc-title-color);
	text-transform: none;
	letter-spacing: normal;
}

ul.products li.product a:hover .woocommerce-loop-product__title,
.product-slider .product a:hover .woocommerce-loop-product__title,
.products > .product a:hover .woocommerce-loop-product__title {
	color: var(--pc-hover-title-color);
}

/* Price: pushed to the bottom of the card so prices line up across a row. */
ul.products li.product .price,
.product-slider .product .price,
.products > .product .price {
	display: block;
	margin: auto 0 0;
	padding-top: var(--pc-price-gap);
	font-size: var(--pc-price-size);
	line-height: 1.4;
	color: var(--pc-price-separator-color);
}

ul.products li.product .price .amount,
.product-slider .product .price .amount,
.products > .product .price .amount {
	margin: 0;
	font-size: var(--pc-price-size);
	color: var(--pc-price-color);
}

ul.products li.product .price del,
.product-slider .product .price del,
.products > .product .price del {
	opacity: 0.6;
}

ul.products li.product .price ins,
.product-slider .product .price ins,
.products > .product .price ins {
	text-decoration: none;
}