/* Lemi — WooCommerce brand overrides.
 * Loaded only when WooCommerce is active (see functions.php).
 * Brands the [products] grids, shop archive, single product, cart, checkout & notices. */

:root {
	--lemi-base: var(--wp--preset--color--base, #ffffff);
	--lemi-powder: var(--wp--preset--color--powder, #91c1e5);
	--lemi-sky: var(--wp--preset--color--sky, #47799e);
	--lemi-ink: var(--wp--preset--color--ink, #26272b);
	--lemi-muted: var(--wp--preset--color--muted, #6b7280);
	--lemi-line: var(--wp--preset--color--line, #e6eaef);
	--lemi-mist: var(--wp--preset--color--mist, #deecf7);
	--lemi-display: var(--wp--preset--font-family--display, sans-serif);
}

/* -------------------------------------------------------------------------
 * Product cards (loop / [products] grid / shop archive)
 * ---------------------------------------------------------------------- */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	text-align: center;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	border-radius: 0;
	margin-bottom: 0.9rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.woocommerce ul.products li.product a:hover img {
	transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--lemi-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--lemi-ink);
	padding-top: 0;
}

.woocommerce ul.products li.product .price {
	color: var(--lemi-ink);
	font-weight: 600;
	font-size: 0.95rem;
}
.woocommerce ul.products li.product .price del {
	color: var(--lemi-muted);
	font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
	color: var(--lemi-sky);
	text-decoration: none;
}

/* Star ratings in brand blue */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--lemi-sky);
}

/* Sale badge → soft powder pill */
.woocommerce span.onsale {
	background: var(--lemi-powder);
	color: var(--lemi-ink);
	font-family: var(--lemi-display);
	font-weight: 500;
	border-radius: 2px;
	min-height: auto;
	min-width: auto;
	padding: 0.35em 0.9em;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Product grids from "Products by …" blocks (homepage rows: wc-block-grid)
 * ---------------------------------------------------------------------- */

/* Let WooCommerce's native flex layout handle the columns; we only restyle the card. */
.wc-block-grid__product {
	text-align: center;
}
.wc-block-grid__product-link { text-decoration: none; }
.wc-block-grid__product-image {
	overflow: hidden;
	border-radius: 0;
	margin-bottom: 0.9rem;
}
.wc-block-grid__product-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.04); }
.wc-block-grid__product-title {
	font-family: var(--lemi-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--lemi-ink);
	margin-bottom: 0.35rem;
}
.wc-block-grid__product-price {
	color: var(--lemi-ink);
	font-weight: 600;
	font-size: 0.95rem;
	display: block;
	margin-bottom: 0.7rem;
}
.wc-block-grid__product-price del { color: var(--lemi-muted); font-weight: 400; }
.wc-block-grid__product-price ins { color: var(--lemi-sky); text-decoration: none; }
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
.wc-block-grid__product .button {
	background: var(--lemi-sky);
	color: #fff;
	font-family: var(--lemi-display);
	font-weight: 500;
	font-size: 0.85rem;
	border-radius: 2px;
	padding: 0.6em 1.4em;
	border: 0;
	display: inline-block;
	transition: background-color 0.18s ease;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover,
.wc-block-grid__product .button:hover { background: var(--lemi-ink); color: #fff; }
.wc-block-grid__product .wc-block-grid__product-onsale {
	background: var(--lemi-powder);
	color: var(--lemi-ink);
	border-radius: 2px;
	font-family: var(--lemi-display);
}

/* -------------------------------------------------------------------------
 * Buttons — match the theme pill
 * ---------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce input.button.alt {
	background: var(--lemi-sky);
	color: #fff;
	font-family: var(--lemi-display);
	font-weight: 500;
	border-radius: 2px;
	padding: 0.8em 1.6em;
	border: 0;
	transition: background-color 0.18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover,
.woocommerce input.button.alt:hover {
	background: var(--lemi-ink);
	color: #fff;
}

/* Ghost/secondary buttons (e.g. "View cart") */
.woocommerce a.button.wc-forward.wc-block-cart__submit-button,
.woocommerce .added_to_cart {
	color: var(--lemi-sky);
}

/* -------------------------------------------------------------------------
 * Single product
 * ---------------------------------------------------------------------- */

.woocommerce div.product .product_title {
	font-family: var(--lemi-display);
	font-weight: 400;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--lemi-ink);
	font-weight: 600;
}
.woocommerce div.product p.price ins { color: var(--lemi-sky); text-decoration: none; }

.woocommerce div.product div.images img {
	border-radius: 0;
}

.woocommerce div.product form.cart div.quantity .qty {
	border: 1px solid var(--lemi-line);
	border-radius: 2px;
	padding: 0.55em 0.6em;
	background: var(--lemi-base);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--lemi-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--lemi-mist);
	border-color: var(--lemi-line);
	border-radius: 0 12px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--lemi-base);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--lemi-display);
	color: var(--lemi-ink);
}

/* -------------------------------------------------------------------------
 * Notices, messages, badges
 * ---------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce-error {
	border-top-color: var(--lemi-sky);
	background: var(--lemi-mist);
	border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--lemi-sky); }

/* Result count / ordering on shop */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	color: var(--lemi-muted);
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
 * Cart & checkout (WooCommerce block templates inherit theme.json;
 * these smooth a few edges to match the brand)
 * ---------------------------------------------------------------------- */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 2px !important;
	font-family: var(--lemi-display);
}
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-quantity-selector {
	border-radius: 0 !important;
}

/* -------------------------------------------------------------------------
 * Editorial refinements — minimal product cards, clean tabs, tidy checkout
 * ---------------------------------------------------------------------- */

:root { --lemi-body: var(--wp--preset--font-family--body, sans-serif); }

/* Product listing cards: left-aligned, thin name, small price, NO loop button
   (button removed from listings; the main add-to-cart stays on the product page). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product { text-align: left; }

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart,
.wc-block-grid__product .wp-block-button,
.wc-block-grid__product .wc-block-grid__product-add-to-cart { display: none !important; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title {
	font-family: var(--lemi-body);
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0;
	line-height: 1.4;
	text-align: left;
	margin-bottom: 0.15rem;
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product .wc-block-grid__product-price {
	font-family: var(--lemi-body);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--lemi-muted);
	text-align: left;
}
.woocommerce ul.products li.product a img,
.wc-block-grid__product .wc-block-grid__product-image { margin-bottom: 0.75rem; }

/* Product tabs: drop the big "Description" / "Reviews" panel headings — tab labels are enough. */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child,
.woocommerce #reviews > h2:first-child,
.woocommerce #reviews .woocommerce-Reviews-title { display: none; }

/* Checkout: uniform field size, radius & vertical spacing. */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout .wc-block-components-select select,
.wc-block-checkout .wc-block-components-address-form input,
.wc-block-checkout .wc-block-components-address-form select {
	min-height: 52px !important;
	border-radius: 2px !important;
}
.wc-block-checkout .wc-block-components-text-input,
.wc-block-checkout .wc-block-components-combobox { border-radius: 2px !important; }
.wc-block-checkout .wc-block-components-address-form,
.wc-block-checkout .wc-block-checkout__contact-fields,
.wc-block-checkout .wc-block-checkout__shipping-fields,
.wc-block-checkout .wc-block-checkout__billing-fields { row-gap: 16px !important; }

/* -------------------------------------------------------------------------
 * Product page: add-to-cart below quantity, − / + stepper
 * ---------------------------------------------------------------------- */
.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}
.woocommerce div.product form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--lemi-line);
	border-radius: 2px;
	overflow: hidden;
}
.woocommerce div.product form.cart .quantity .lemi-qty-btn {
	appearance: none;
	border: 0;
	background: transparent;
	width: 42px;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--lemi-ink);
	cursor: pointer;
}
.woocommerce div.product form.cart .quantity .lemi-qty-btn:hover { background: var(--lemi-mist); }
.woocommerce div.product form.cart .quantity input.qty {
	width: 54px;
	text-align: center;
	border: 0;
	border-left: 1px solid var(--lemi-line);
	border-right: 1px solid var(--lemi-line);
	border-radius: 0;
	padding: 0.6rem 0;
	background: var(--lemi-base);
	-moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; max-width: 340px; }

/* Tabs relocated into the summary column — keep them tidy in the narrower space */
.woocommerce div.product .summary .woocommerce-tabs { margin-top: 2rem; }
.woocommerce div.product .summary .woocommerce-tabs ul.tabs { padding-left: 0; }

/* -------------------------------------------------------------------------
 * Product listing cards — genuinely left-aligned title + price
 * ---------------------------------------------------------------------- */
.wc-block-grid__product { align-items: flex-start !important; }
.wc-block-grid__product .wc-block-grid__product-title,
.wc-block-grid__product .wc-block-grid__product-price,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
	text-align: left !important;
	width: 100%;
	justify-content: flex-start;
}

/* -------------------------------------------------------------------------
 * Two-column product grids on mobile (homepage rows + shop archive)
 * ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	.wc-block-grid__products { display: flex !important; flex-wrap: wrap !important; margin: 0 -6px; }
	.wc-block-grid__product { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; padding: 0 6px 1.4rem !important; }

	.woocommerce ul.products,
	.woocommerce-page ul.products { display: flex !important; flex-wrap: wrap !important; }
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 48% !important;
		float: none !important;
		margin: 0 4% 1.8em 0 !important;
		clear: none !important;
	}
	.woocommerce ul.products li.product:nth-child(2n),
	.woocommerce-page ul.products li.product:nth-child(2n) { margin-right: 0 !important; }
}

/* -------------------------------------------------------------------------
 * Shop toolbar + review form inputs (were unstyled / broken-looking)
 * ---------------------------------------------------------------------- */
.woocommerce .woocommerce-ordering select,
.woocommerce #reviews input[type="text"],
.woocommerce #reviews input[type="email"],
.woocommerce #reviews textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border: 1px solid var(--lemi-line);
	border-radius: 2px;
	padding: 0.6rem 0.85rem;
	background: var(--lemi-base);
	color: var(--lemi-ink);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.4;
}
.woocommerce .woocommerce-ordering select:focus,
.woocommerce #reviews input:focus,
.woocommerce #reviews textarea:focus { border-color: var(--lemi-sky); outline: none; }
.woocommerce .woocommerce-result-count { line-height: 2.4; }

/* Related / up-sells: more breathing room above, left-aligned heading */
.woocommerce .related.products,
.woocommerce .upsells.products {
	margin-top: 6rem;
	padding-top: 3rem;
	border-top: 1px solid var(--lemi-line);
	clear: both;
}
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	text-align: left;
	margin-bottom: 2rem;
}