/* Product card grid — shared between the Homepage v2 "Populārākie GRAM modeļi"
   section and WooCommerce product archives (shop/category/tag), so cards look
   identical everywhere. See template-parts/shared/product-card.php for the
   markup this styles. */

.woocommerce.woocommerce-page ul.products.lsv-product-grid,
.lsv-product-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.lsv-product-card {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.lsv-product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.lsv-product-body .lsv-btn {
	margin-top: auto;
}
/* On shop/category archives Astra's li.product rules zero the card's side
   and top padding and add 1.2em at the bottom, so the image and button
   touched the side borders and the button floated above the bottom edge.
   Restore the even 12px frame there too. */
.woocommerce ul.products li.product.lsv-product-card,
.woocommerce-page ul.products li.product.lsv-product-card {
	padding: 12px;
	margin-bottom: 0;
}
.lsv-product-image {
	/* 5:4 - the GRAM product photos are mostly wide with white margins, a
	   square box left a large empty band above and below the product. */
	aspect-ratio: 5/4;
	/* White, not grey: with object-fit: contain a square photo leaves side
	   bands, and the GRAM photos themselves sit on white. */
	background: #fff;
	margin-bottom: 8px;
	overflow: hidden;
	border-radius: 4px;
}
.lsv-product-image {
	position: relative;
	display: block;
}
/* Pinned to the box: on archives the theme's `ul.products li.product img
   { height: auto }` otherwise wins, the square photo keeps its full height
   and the 4:3 box crops its bottom off. */
.lsv-product-card .lsv-product-image img,
.woocommerce ul.products li.product.lsv-product-card .lsv-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
}
.lsv-product-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
	display: block;
}
.lsv-product-category {
	font-size: 12px;
	color: #E08D79;
	font-weight: 600;
	margin-bottom: 2px;
}
.lsv-product-stock {
	font-size: 12px;
	color: #2c7a2c;
	margin-bottom: 6px;
}
.lsv-product-specs {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	font-size: 12px;
	color: #555;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.lsv-product-specs span {
	color: #777;
}
.lsv-product-price {
	margin-bottom: 10px;
}
.lsv-product-price.lsv-price-on-request {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #1A5E63;
}
.lsv-price-excl {
	font-weight: 700;
	color: #1A5E63;
}
.lsv-price-incl {
	font-size: 12px;
	color: #777;
}
.lsv-product-price span {
	font-weight: 400;
	font-size: 11px;
}
.lsv-price-prefix {
	font-weight: 700;
}
/* Sale: "Atlaide -5%" badge + struck-through regular price above the price. */
.lsv-price-sale {
	margin-bottom: 2px;
	font-size: 12px;
	color: #777;
}
.lsv-product-price .lsv-sale-badge {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	background: #E08D79;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
.lsv-price-sale del {
	color: #777;
}
/* WooCommerce's own price markup (.woocommerce-Price-amount) can inherit a
   different font from the active theme's WooCommerce-specific styling —
   force it back to the card's font so all cards render identically. */
.lsv-product-card,
.lsv-product-card .woocommerce-Price-amount,
.lsv-product-card .amount,
.lsv-product-card bdi,
.lsv-product-card .lsv-price-prefix {
	font-family: 'Roboto', Arial, sans-serif !important;
	font-style: normal !important;
}

/* ---- WooCommerce subcategory tiles (Kategorijas grid) ----
   Astra's "modern shop page" style overlays the title in a translucent band
   over the bottom of the thumbnail - built for a photo filling the tile, not
   for our icon (a small transparent-background PNG centred with padding),
   which the overlay ends up cutting through. Put the title back in normal
   flow below the icon instead. */
.woocommerce-page ul.products.lsv-product-grid li.product-category img.lsv-category-icon {
	width: auto;
	max-width: 71.5%;
	max-height: 154px;
	object-fit: contain;
	display: block;
	margin: 26px auto 0;
}
.woocommerce-page ul.products.lsv-product-grid li.product-category .woocommerce-loop-category__title {
	position: static;
	background: none;
	text-align: center;
	padding: 10px 0 20px;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.3;
	color: #222;
	text-transform: none;
	letter-spacing: normal;
}
.woocommerce-page ul.products.lsv-product-grid li.product-category .woocommerce-loop-category__title .count {
	display: block;
	margin-top: 4px;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 400;
	font-size: 13.2px;
	color: #777;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.woocommerce.woocommerce-page ul.products.lsv-product-grid,
	.lsv-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.woocommerce.woocommerce-page ul.products.lsv-product-grid,
	.lsv-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Cart page cross-sells ("Jums arī varētu interesēt…") sit in the ~816px
   column beside the totals. Astra Pro styles them as a list: `ul.products
   { display: block }` stacked the cards and collapsed the image link to 0px
   wide (no photos), and its `.ast-article-single { flex-direction: row;
   padding: 1em 0 }` (first card -1em up) put the photo beside the text.
   Restore the grid and the normal card with selectors that outrank those.
   4 columns = the 4 items woocommerce_cross_sells_total allows
   (includes/product-archive-cards.php). */
body.woocommerce-cart .cross-sells ul.products.lsv-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.woocommerce-cart .woocommerce .cross-sells ul.products li.product.lsv-product-card {
	flex-direction: column;
	align-items: stretch;
	padding: 12px;
	margin: 0;
}
body.woocommerce-cart .cross-sells .lsv-product-image {
	width: 100%;
}
@media (max-width: 900px) {
	body.woocommerce-cart .cross-sells ul.products.lsv-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Shop / category pagination - same teal as the card buttons (.lsv-btn-primary)
   instead of Astra's orange accent. body.woocommerce raises the specificity over Astra's inline
   theme CSS, which is printed after this stylesheet. */
body.woocommerce nav.woocommerce-pagination ul,
body.woocommerce nav.woocommerce-pagination ul li,
body.woocommerce nav.woocommerce-pagination ul li > span.current,
body.woocommerce nav.woocommerce-pagination ul li > .page-numbers {
	border-color: #2B716B;
}
body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span {
	color: #2B716B;
}
body.woocommerce nav.woocommerce-pagination ul li span.current {
	background: #2B716B;
	color: #fff;
}
body.woocommerce nav.woocommerce-pagination ul li a:focus,
body.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: #235D58;
	border-color: #235D58;
	color: #fff;
}

/* Price-on-request products, single product page (includes/price-on-request.php). */
.single-product .summary .price .lsv-price-on-request {
	font-weight: 700;
	color: #1A5E63;
}
.lsv-quote-box {
	margin: 16px 0 24px;
	padding: 16px 18px;
	background: #eef4f3;
	border-left: 3px solid #2B716B;
	border-radius: 6px;
}
.lsv-quote-box p {
	margin: 0 0 12px;
}
.lsv-quote-box-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Product gallery before Astra's slider script has run: WooCommerce prints
   every photo and every thumbnail full size, stacked (2600px on a phone),
   and the slider then collapses them - the summary jumped 600+px (CLS 0.6).
   Show it already in its final shape: only the first photo, and the
   thumbnails as one row of four. The slider wraps both lists in
   .flex-viewport when it starts, so these direct-child selectors stop
   matching from then on. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
	display: none;
}
.ast-single-product-thumbnails > .woocommerce-product-gallery-thumbnails__wrapper {
	display: flex;
	gap: 15px;
	overflow: hidden;
}
.ast-single-product-thumbnails > .woocommerce-product-gallery-thumbnails__wrapper > * {
	flex: 0 0 calc((100% - 45px) / 4);
}
.ast-single-product-thumbnails > .woocommerce-product-gallery-thumbnails__wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

/* Product tabs before WooCommerce's tabs script runs: every panel is shown
   stacked until the script hides all but the first, and everything below
   (Piederumi, Līdzīgi produkti) jumped up - CLS 0.43 on phones. Show only
   the first panel from the start; switching tabs sets an inline display. */
.woocommerce-tabs > .woocommerce-Tabs-panel:not(:first-of-type) {
	display: none;
}