/* ==========================================================================
   LAH Woo — SHOP (product grids, category cards, archive toolbar, pagination)
   Load on all Woo pages: product grids also appear as related products,
   cross-sells, and in the account wishlist.
   Matches: .product-card / .cat-grid / .filter-btn design components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid — design: repeat(4,1fr) gap 18px; shop page uses cols-3
   -------------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-2,
.woocommerce-page ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   Product card — navy2, 14px radius, hover lift + blue border + glow
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--lah-navy2);
	border: 1px solid var(--lah-border);
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	transition: transform .2s, border-color .2s, box-shadow .2s;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: var(--lah-blue);
	box-shadow: 0 18px 40px -20px rgba(43, 164, 232, .5);
}

/* Media — 4/3, flush to card top */
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	display: block;
	border-radius: 0;
}

/* Name — Saira 600 15px */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-family: 'Saira', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	color: var(--lah-text);
	padding: 14px 16px 0;
	margin: 0;
	transition: color .15s;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--lah-text);
}

.woocommerce ul.products li.product .star-rating {
	margin: 8px 16px 0;
	font-size: 12px;
}

/* Price — orange Saira 800 19px */
.woocommerce ul.products li.product .price {
	font-size: 19px;
	padding: 8px 16px 0;
	margin: 0;
}

.woocommerce ul.products li.product .price del {
	font-size: 14px;
}

/* Add to cart — Outline small (guide: "Add" on cards, low emphasis) */
.woocommerce ul.products li.product .button {
	margin: 12px 16px 16px;
	margin-top: auto;
	align-self: flex-start;
	padding: 8px 14px;
	font-size: 13px;
	background: var(--lah-card2);
	color: var(--lah-blue);
	border-color: var(--lah-blue);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--lah-card2);
}

.woocommerce ul.products li.product a.added_to_cart {
	margin: 0 16px 14px;
}

/* --------------------------------------------------------------------------
   Category cards — [product_categories] / shop category view (.cat-card)
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product-category a img {
	aspect-ratio: 5 / 4;
}

.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	font-family: 'Saira', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--lah-text);
	padding: 16px 18px;
	margin: 0;
}

.woocommerce ul.products li.product-category h2 mark,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark {
	background: transparent;
	color: var(--lah-muted2);
	font-size: 13px;
	font-weight: 400;
	display: block;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Archive toolbar — result count + sort dropdown
   -------------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	color: var(--lah-muted2);
	font-size: 14px;
	margin: 6px 0 24px;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	margin: 0 0 24px;
}

.woocommerce .woocommerce-ordering select {
	background: var(--lah-navy);
	border: 1px solid var(--lah-border);
	border-radius: 9px;
	padding: 10px 36px 10px 14px;
	color: var(--lah-text);
	font-family: 'Saira', sans-serif;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--lah-blue);
}

/* --------------------------------------------------------------------------
   Pagination — like design .filter-btn, orange active
   -------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
	margin-top: 32px;
}

.woocommerce nav.woocommerce-pagination ul {
	border: none;
	display: inline-flex;
	gap: 8px;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: none;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--lah-border);
	border-radius: 9px;
	background: transparent;
	color: var(--lah-muted);
	font-family: 'Saira', sans-serif;
	font-weight: 600;
	font-size: 14px;
	transition: border-color .15s, color .15s, background .15s;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--lah-blue);
	color: var(--lah-text);
	background: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--lah-orange);
	border-color: var(--lah-orange);
	color: var(--lah-navy);
}

/* --------------------------------------------------------------------------
   Responsive — 2 cols <980, keeps 2 on small phones per design
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 {
		grid-template-columns: 1fr 1fr;
	}
}