/*
 * Lumio Fashion — shop stylesheet
 *
 * Loaded only on WooCommerce pages (see inc/enqueue.php), so the homepage and
 * journal never pay for it.
 */

/* ---------------------------------------------------------- 1. Product grid */

.lm-grid--products {
	grid-template-columns: repeat(var(--lm-cols-mobile, 2), minmax(0, 1fr));
	gap: 1.5rem 0.75rem;
}
@media (min-width: 48rem) { .lm-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; } }
@media (min-width: 62rem) { .lm-grid--products { grid-template-columns: repeat(var(--lm-cols-desktop, 4), minmax(0, 1fr)); gap: 2.75rem 1.5rem; } }

/* ---------------------------------------------------------- 2. Product card */

.lm-card { position: relative; display: flex; flex-direction: column; }

.lm-card__media {
	position: relative;
	overflow: hidden;
	background: var(--lm-surface);
	border-radius: var(--lm-radius-card);
}

.lm-card__img {
	width: 100%;
	/* Fixed ratio is what keeps CLS at zero on an image-heavy grid. */
	aspect-ratio: var(--lm-ratio-product, 3 / 4);
	object-fit: cover;
}
.lm-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--lm-t-slow) var(--lm-ease);
}

@media (hover: hover) {
	.lm-card:hover .lm-card__img--hover { opacity: 1; }
}

.lm-card__badges {
	position: absolute;
	top: 0.75rem; inset-inline-start: 0.75rem;
	display: flex; flex-direction: column; gap: 0.35rem;
	align-items: flex-start;
}
.lm-badge {
	padding: 0.35rem 0.6rem;
	background: var(--lm-base);
	color: var(--lm-ink);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--lm-track-wide);
	text-transform: uppercase;
	border-radius: var(--wp--custom--radius--sm);
}
.lm-badge--sale { background: var(--lm-ink); color: var(--lm-base); }
.lm-badge--out  { background: var(--lm-surface-strong); color: var(--lm-muted); }

.lm-card__body { padding-top: 0.875rem; display: flex; flex-direction: column; gap: 0.45rem; }
.lm-card__eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--lm-track-widest);
	text-transform: uppercase;
	color: var(--lm-faint, var(--lm-muted));
	line-height: 1.4;
}
.lm-card__title { font-family: var(--lm-font-body); font-size: var(--wp--preset--font-size--base); font-weight: 400; letter-spacing: 0.01em; line-height: 1.45; }
.lm-card__price { font-size: var(--wp--preset--font-size--sm); font-weight: 400; }
.lm-card__price del { color: var(--lm-muted); font-weight: 400; margin-inline-end: 0.5rem; }
.lm-card__price ins { color: var(--lm-sale); text-decoration: none; }
.lm-card__rating { display: flex; align-items: center; gap: 0.4rem; font-size: var(--wp--preset--font-size--sm); color: var(--lm-muted); }

.lm-card__swatches { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.lm-card__swatch {
	width: 0.9rem; height: 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(0 0 0 / 0.18);
	background-size: cover;
	background-position: center;
	display: inline-block;
}
.lm-card__swatch-more { font-size: var(--wp--preset--font-size--xs); color: var(--lm-muted); margin-inline-start: 0.25rem; }

/* Quick add: hover-only, and never on touch where it steals a scroll. */
.lm-quick-add {
	position: absolute;
	inset-inline: 0.5rem; bottom: 0.5rem;
	padding: 0.5rem;
	background: color-mix(in srgb, var(--lm-base) 94%, transparent);
	border-radius: var(--lm-radius-card);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--lm-t-base) var(--lm-ease), transform var(--lm-t-base) var(--lm-ease);
}
@media (hover: hover) and (pointer: fine) {
	.lm-card:hover .lm-quick-add,
	.lm-card:focus-within .lm-quick-add { opacity: 1; transform: none; }
}
@media (hover: none), (pointer: coarse) { .lm-quick-add { display: none; } }

.lm-quick-add__sizes { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; }
.lm-quick-add__size {
	min-width: 2.25rem; min-height: 2rem;
	padding-inline: 0.4rem;
	border: 1px solid var(--lm-line-strong);
	background: var(--lm-base);
	font-size: var(--wp--preset--font-size--xs);
	border-radius: var(--lm-radius-control);
}
.lm-quick-add__size:hover { background: var(--lm-ink); color: var(--lm-base); border-color: var(--lm-ink); }
.lm-quick-add__size.is-unavailable { color: var(--lm-muted); text-decoration: line-through; pointer-events: none; opacity: 0.6; }

.lm-wishlist--card { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; }
.lm-wishlist--gallery { position: absolute; top: 1rem; inset-inline-end: 1rem; }
.lm-wishlist :is(a, button) {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--lm-touch); min-height: var(--lm-touch);
	background: var(--lm-base);
	border-radius: var(--lm-radius-control);
}

/* --------------------------------------------------------- 3. Shop layout */

.lm-shop-head { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); }
.lm-shop-head__title { font-size: var(--wp--preset--font-size--4xl); }
.lm-shop-head__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }

.lm-shop-layout { display: grid; gap: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--80); }
.lm-shop-layout__side { display: none; }

@media (min-width: 62rem) {
	.lm-shop--with-filters .lm-shop-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--wp--preset--spacing--80); }
	.lm-shop-layout__side { display: block; position: sticky; top: calc(var(--lm-header-h) + 1.5rem); align-self: start; max-height: calc(100dvh - var(--lm-header-h) - 3rem); overflow-y: auto; }
}

.lm-filter-group { padding-block: 1.25rem; border-bottom: 1px solid var(--lm-line); }
.lm-filter-group__title { font-family: var(--lm-font-body); font-size: var(--wp--preset--font-size--sm); font-weight: 700; letter-spacing: var(--lm-track-wide); margin-bottom: 0.875rem; }
.lm-filters ul li { display: flex; align-items: center; gap: 0.6rem; min-height: var(--lm-touch); font-size: var(--wp--preset--font-size--base); }
.lm-filters ul li .count { margin-inline-start: auto; color: var(--lm-muted); font-size: var(--wp--preset--font-size--sm); }

/* ------------------------------------------------------------ 4. Toolbar */

.lm-toolbar { padding-block: 0 1.25rem; border-bottom: 1px solid var(--lm-line); margin-bottom: 1.5rem; }
.lm-toolbar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lm-toolbar__count { font-size: var(--wp--preset--font-size--base); color: var(--lm-muted); }
.lm-toolbar__controls { display: flex; align-items: center; gap: 0.75rem; }
.lm-toolbar__filter {
	display: inline-flex; align-items: center; gap: 0.5rem;
	min-height: var(--lm-h-sm);
	padding-inline: 0.875rem;
	border: 1px solid var(--lm-line-strong);
	border-radius: var(--lm-radius-control);
	font-size: var(--wp--preset--font-size--sm);
}
.lm-toolbar__filter-count {
	min-width: 1.25rem; height: 1.25rem;
	display: grid; place-items: center;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--lm-ink); color: var(--lm-base);
	font-size: 0.625rem; font-weight: 700;
}
.lm-toolbar__sort select { min-height: var(--lm-h-sm); width: auto; min-width: 11rem; }
.lm-toolbar__active { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.lm-toolbar__active-label { font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: var(--lm-track-wide); }
.lm-chip--removable .lm-icon { color: var(--lm-muted); }

@media (min-width: 62rem) {
	.lm-shop--with-filters .lm-toolbar__filter { display: none; }
}

/* ----------------------------------------------------------- 5. Load more */

.lm-loadmore { text-align: center; padding-top: var(--wp--preset--spacing--70); }
.lm-loadmore__count { font-size: var(--wp--preset--font-size--sm); color: var(--lm-muted); }
.lm-loadmore__track { max-width: 16rem; height: 3px; margin: 0.875rem auto 0; background: var(--lm-line); }
.lm-loadmore__track span { display: block; height: 100%; background: var(--lm-ink); }
.lm-loadmore .lm-btn { margin-top: 1.5rem; }

/* -------------------------------------------------------- 6. Single product */

.single-product .lm-main--shop > .lm-wrap,
.single-product div.product {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	max-width: var(--lm-wide);
	margin-inline: auto;
	padding-inline: var(--lm-gutter);
	padding-top: var(--wp--preset--spacing--50);
}
@media (min-width: 62rem) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--80);
		align-items: start;
	}
	.single-product div.product .summary { position: sticky; top: calc(var(--lm-header-h) + 1.5rem); }
	/*
	 * Everything after the buy column is full width. It also has to paint ABOVE
	 * the sticky summary: a sticky element is positioned, so it would otherwise
	 * sit on top of the reviews and related products as the page scrolls past
	 * it — which is exactly what a live install showed, a product image lying
	 * across the price and size buttons.
	 */
	.single-product div.product > :not(.lm-gallery):not(.summary) {
		grid-column: 1 / -1;
		position: relative;
		z-index: 1;
		background: var(--lm-base);
	}
	.single-product div.product .summary { z-index: 0; }
}

.summary > * + * { margin-top: 1.25rem; }
.summary .price { font-family: var(--lm-font-display); font-size: var(--wp--preset--font-size--2xl); }
.summary .price del { font-family: var(--lm-font-body); font-size: var(--wp--preset--font-size--lg); color: var(--lm-muted); margin-inline-end: 0.6rem; }
.summary .price ins { text-decoration: none; color: var(--lm-sale); }
.summary .product_title { font-size: var(--wp--preset--font-size--3xl); }
.lm-pay-split { font-size: var(--wp--preset--font-size--sm); color: var(--lm-ink-soft); }
.lm-pay-split a { text-decoration: underline; }

.lm-stock { display: flex; align-items: center; gap: 0.6rem; font-size: var(--wp--preset--font-size--sm); }
.lm-stock__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--wp--custom--radius--pill); background: var(--lm-success); }
.lm-stock--low { color: var(--lm-warning); }
.lm-stock--low .lm-stock__dot { background: var(--lm-warning); }

.lm-trust-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: var(--wp--preset--font-size--sm); color: var(--lm-ink-soft); }
.lm-trust-row__item { display: flex; align-items: flex-start; gap: 0.5rem; }
.lm-trust-row__item .lm-icon { flex: 0 0 auto; margin-top: 0.15rem; }

/* --------------------------------------------------------------- 7. Gallery */

.lm-gallery { display: grid; gap: 0.75rem; }
.lm-gallery__rail { display: none; }

.lm-gallery__stage { position: relative; }
.lm-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.lm-gallery__track::-webkit-scrollbar { display: none; }
.lm-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; }
.lm-gallery__img {
	width: 100%;
	aspect-ratio: var(--lm-ratio-product, 3 / 4);
	object-fit: cover;
	background: var(--lm-surface);
}

.lm-gallery__badges { position: absolute; top: 1rem; inset-inline-start: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.lm-gallery__zoom {
	position: absolute; bottom: 1rem; inset-inline-end: 1rem;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--lm-touch); min-height: var(--lm-touch);
	background: var(--lm-base);
	border-radius: var(--lm-radius-control);
}
.lm-gallery__counter {
	position: absolute; bottom: 1rem; inset-inline-start: 1rem;
	padding: 0.25rem 0.55rem;
	background: color-mix(in srgb, var(--lm-ink) 78%, transparent);
	color: var(--lm-base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}
.lm-gallery__dots { position: absolute; inset-inline: 0; bottom: 1rem; display: flex; justify-content: center; gap: 0.35rem; }
.lm-gallery__dot { width: 1.1rem; height: 3px; background: color-mix(in srgb, var(--lm-ink) 25%, transparent); }
.lm-gallery__dot.is-active { background: var(--lm-ink); }

@media (min-width: 62rem) {
	.lm-gallery { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
	.lm-gallery__rail { display: flex; flex-direction: column; gap: 0.6rem; }
	.lm-gallery__thumb {
		padding: 0;
		border: 1.5px solid transparent;
		background: var(--lm-surface);
	}
	.lm-gallery__thumb img { width: 100%; aspect-ratio: var(--lm-ratio-product, 3 / 4); object-fit: cover; }
	.lm-gallery__thumb[aria-selected="true"] { border-color: var(--lm-ink); }
	/* On desktop the gallery becomes a stacked column rather than a carousel:
	   scrolling through looks is faster than clicking through them. */
	.lm-gallery__track { display: block; overflow: visible; }
	.lm-gallery__slide { margin-bottom: 1rem; }
	.lm-gallery__counter, .lm-gallery__dots { display: none; }
}

.lm-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--lm-base); }
.lm-lightbox::backdrop { background: rgb(0 0 0 / 0.9); }
.lm-lightbox__close { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 2; min-width: var(--lm-touch); min-height: var(--lm-touch); display: grid; place-items: center; background: var(--lm-base); }
.lm-lightbox__body { height: 100%; overflow: auto; display: grid; place-items: center; }
.lm-lightbox__body img { max-height: 100dvh; width: auto; object-fit: contain; }

/* ------------------------------------------------------------ 8. Variations */

/*
 * WooCommerce wraps each variation attribute in a table row whose first cell
 * is a <label>. The theme replaces the select itself with swatches and size
 * pills that carry their own label, so the table cell renders a second,
 * unstyled copy beside them — "Color" next to "Color: Choose" on a live
 * install. Flatten the table and drop the duplicate label. Kept as CSS rather
 * than a template override so a WooCommerce update cannot leave us behind.
 */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart .variations {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td { display: block; width: auto; padding: 0; border: 0; }
.woocommerce div.product form.cart table.variations tr + tr,
.woocommerce div.product form.cart .variations .variation + .variation { margin-top: 1.5rem; }
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart .variations .label { display: none; }
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	color: var(--lm-muted);
	text-decoration: underline;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { margin-top: 1.5rem; }

.lm-variation__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lm-variation__label { font-size: var(--wp--preset--font-size--sm); font-weight: 700; letter-spacing: var(--lm-track-wide); }
.lm-variation__value { font-weight: 400; }
.lm-variation__guide {
	display: inline-flex; align-items: center; gap: 0.4rem;
	min-height: var(--lm-touch);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--lm-muted);
	text-decoration: underline;
}
.lm-variation__options { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.lm-variation__select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lm-variation__hint { margin-top: 0.75rem; font-size: var(--wp--preset--font-size--sm); color: var(--lm-ink-soft); }
.lm-variation__hint:empty { display: none; }

.lm-swatch--colour {
	width: 2.125rem; height: 2.125rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgb(0 0 0 / 0.2);
	background-size: cover; background-position: center;
}
.lm-swatch--colour.is-selected { outline: 1.5px solid var(--lm-ink); outline-offset: 3px; }

.lm-variation--size .lm-variation__options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 30rem) { .lm-variation--size .lm-variation__options { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.lm-swatch--size {
	min-height: var(--lm-h-md);
	border: 1px solid var(--lm-line-strong);
	border-radius: var(--lm-radius-control);
	background: var(--lm-base);
	font-size: var(--wp--preset--font-size--base);
}
.lm-swatch--size.is-selected { background: var(--lm-ink); color: var(--lm-base); border-color: var(--lm-ink); font-weight: 700; }
.lm-swatch.is-unavailable { color: var(--lm-muted); background: var(--lm-surface); border-color: var(--lm-line); text-decoration: line-through; }
.lm-swatch--colour.is-unavailable { text-decoration: none; opacity: 0.45; }

/* ------------------------------------------------------------- 9. Quantity */

.lm-qty { display: inline-flex; align-items: center; border: 1px solid var(--lm-line-strong); border-radius: var(--lm-radius-control); }
.lm-qty__btn { min-width: var(--lm-touch); min-height: var(--lm-h-md); display: grid; place-items: center; font-size: 1.1rem; }
.lm-qty__input {
	width: 2.75rem; min-height: var(--lm-h-md);
	border: 0; text-align: center; padding: 0;
	font-weight: 600;
	-moz-appearance: textfield;
}
.lm-qty__input::-webkit-outer-spin-button,
.lm-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------- 10. Add to cart */

form.cart { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
form.cart .lm-qty { flex: 0 0 auto; }
form.cart button[type="submit"] {
	flex: 1;
	min-height: var(--lm-h-lg);
	padding-inline: 1.5rem;
	border: 1px solid var(--lm-accent);
	border-radius: var(--lm-radius-control);
	background: var(--lm-accent);
	color: var(--lm-accent-text);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--lm-track-wider);
	text-transform: uppercase;
}
form.cart button[type="submit"]:disabled { opacity: 0.45; }
.woocommerce-variation-add-to-cart--disabled button[type="submit"] { opacity: 0.45; pointer-events: none; }

.lm-sticky-atc {
	position: fixed;
	inset-inline: 0; bottom: 0;
	z-index: 70;
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.75rem var(--lm-gutter) calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--lm-base);
	border-top: 1px solid var(--lm-line);
	box-shadow: var(--wp--preset--shadow--sticky);
	transform: translateY(110%);
	transition: transform var(--lm-t-slow) var(--lm-ease);
}
.lm-sticky-atc.is-visible { transform: none; }
.lm-sticky-atc__meta { flex: 0 0 auto; line-height: 1.25; }
.lm-sticky-atc__price { font-family: var(--lm-font-display); font-size: var(--wp--preset--font-size--xl); }
.lm-sticky-atc__note { font-size: var(--wp--preset--font-size--xs); color: var(--lm-muted); }
.lm-sticky-atc .lm-btn { flex: 1; }
@media (min-width: 62rem) { .lm-sticky-atc { display: none; } }

/* ------------------------------------------------------------ 11. Accordion */

.lm-accordion { border-top: 1px solid var(--lm-line); }
.lm-accordion__item { border-bottom: 1px solid var(--lm-line); }
.lm-accordion__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: var(--lm-touch);
	padding-block: 1.1rem;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.lm-accordion__summary::-webkit-details-marker { display: none; }
.lm-accordion__marker { position: relative; width: 0.85rem; height: 0.85rem; flex: 0 0 auto; }
.lm-accordion__marker::before,
.lm-accordion__marker::after {
	content: ""; position: absolute; inset: 50% 0 auto 0;
	height: 1px; background: currentColor;
}
.lm-accordion__marker::after { transform: rotate(90deg); transition: transform var(--lm-t-base) var(--lm-ease); }
.lm-accordion__item[open] .lm-accordion__marker::after { transform: rotate(0deg); }
.lm-accordion__body { padding-bottom: 1.35rem; font-size: var(--wp--preset--font-size--base); line-height: 1.8; color: var(--lm-ink-soft); }
.lm-accordion__body a { text-decoration: underline; }
.lm-accordion__body ul { list-style: disc; padding-inline-start: 1.15rem; }
.lm-accordion__body table { width: 100%; border-collapse: collapse; }
.lm-accordion__body :is(th, td) { padding: 0.6rem 0.5rem 0.6rem 0; border-bottom: 1px solid var(--lm-line); text-align: start; }

/* ------------------------------------------------------------- 12. Reviews */

.lm-reviews { padding-block: var(--wp--preset--spacing--80); border-top: 1px solid var(--lm-line); margin-top: var(--wp--preset--spacing--70); }
.lm-reviews__title { font-size: var(--wp--preset--font-size--3xl); }
.lm-reviews__grid { display: grid; gap: var(--wp--preset--spacing--60); margin-top: var(--wp--preset--spacing--50); }
@media (min-width: 62rem) { .lm-reviews__grid { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--wp--preset--spacing--80); align-items: start; } }

/*
 * A product with no reviews yet has no rating summary to put in the narrow
 * column, so the review list was left alone in an 18rem track — the "be the
 * first to review" form rendered 288px wide in a 1280px section. When the list
 * is the only child it takes the whole width.
 */
.lm-reviews__grid > .lm-reviews__list:only-child { grid-column: 1 / -1; }

/*
 * WooCommerce prints its own "Reviews" heading inside the reviews template.
 * The theme already renders one above the grid, so every product page carried
 * the word twice, one under the other.
 */
.lm-reviews .woocommerce-Reviews-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* With no reviews, the form should not be a lonely box on the left either. */
.lm-reviews__list > .woocommerce-noreviews { margin-bottom: 1.25rem; color: var(--lm-muted); }
@media (min-width: 62rem) {
	.lm-reviews__grid > .lm-reviews__list:only-child #respond { max-width: 44rem; }
}

.lm-reviews-summary__score { display: flex; align-items: baseline; gap: 0.6rem; }
.lm-reviews-summary__value { font-family: var(--lm-font-display); font-size: var(--wp--preset--font-size--4xl); line-height: 1; }
.lm-reviews-summary__outof, .lm-reviews-summary__count { font-size: var(--wp--preset--font-size--sm); color: var(--lm-muted); }
.lm-rating-bars { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lm-rating-bars__row { display: flex; align-items: center; gap: 0.6rem; font-size: var(--wp--preset--font-size--sm); }
.lm-rating-bars__track { flex: 1; height: 6px; background: var(--lm-line); }
.lm-rating-bars__track span { display: block; height: 100%; background: var(--lm-ink); }
.lm-rating-bars__pct { width: 2.5rem; text-align: end; color: var(--lm-muted); }

.lm-verified { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--lm-success); }
.lm-comments__list > li { padding-block: 1.5rem; border-bottom: 1px solid var(--lm-line); }

/* ------------------------------------------------------------- 13. Rails */

.lm-rail { padding-block: var(--wp--preset--spacing--70); }
.lm-rail__title { font-size: var(--wp--preset--font-size--2xl); margin-bottom: 1.5rem; }
.lm-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9rem, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.5rem; }
.lm-rail__item { scroll-snap-align: start; }
.lm-rail--compact .lm-card { flex-direction: row; gap: 0.75rem; align-items: center; }
.lm-rail--compact .lm-card__media { flex: 0 0 4rem; }
.lm-rail--compact .lm-card__body { padding-top: 0; gap: 0.2rem; }
.lm-rail--compact .lm-card__title { font-size: var(--wp--preset--font-size--sm); }

/* --------------------------------------------------- 14. Cart & mini-cart */

.lm-ship-progress { display: flex; gap: 0.875rem; padding: 1rem; background: var(--lm-surface); }
.lm-ship-progress__body { flex: 1; }
.lm-ship-progress__text { font-size: var(--wp--preset--font-size--base); font-weight: 600; }
.lm-ship-progress__track { height: 5px; margin-top: 0.5rem; background: var(--lm-line-strong); }
.lm-ship-progress__track span { display: block; height: 100%; background: var(--lm-ink); transition: width var(--lm-t-slow) var(--lm-ease); }
.lm-ship-progress.is-complete { color: var(--lm-success); }
.lm-ship-progress.is-complete .lm-ship-progress__track span { background: var(--lm-success); }

.lm-mini-cart .lm-drawer__content { padding: 0; display: flex; flex-direction: column; }
.lm-mini-cart__body { flex: 1; overflow-y: auto; padding: var(--lm-gutter); }
.lm-mini-cart__items { display: flex; flex-direction: column; }
.lm-mini-cart__item { display: flex; gap: 0.875rem; padding-block: 1.1rem; border-bottom: 1px solid var(--lm-line); }
.lm-mini-cart__media { flex: 0 0 4.75rem; }
.lm-mini-cart__img { width: 100%; aspect-ratio: var(--lm-ratio-product, 3 / 4); object-fit: cover; }
.lm-mini-cart__info { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.lm-mini-cart__name { font-size: var(--wp--preset--font-size--base); font-weight: 600; line-height: 1.4; }
.lm-mini-cart__meta { font-size: var(--wp--preset--font-size--sm); color: var(--lm-muted); }
.lm-mini-cart__actions { margin-top: auto; display: flex; align-items: center; gap: 0.875rem; }
.lm-mini-cart__remove { font-size: var(--wp--preset--font-size--sm); color: var(--lm-muted); text-decoration: underline; min-height: var(--lm-touch); display: inline-flex; align-items: center; }
.lm-mini-cart__foot {
	padding: 1rem var(--lm-gutter) calc(1.25rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--lm-line);
	box-shadow: var(--wp--preset--shadow--sticky);
	display: flex; flex-direction: column; gap: 0.6rem;
}
.lm-mini-cart__totals { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--wp--preset--font-size--md); }
.lm-mini-cart__note { font-size: var(--wp--preset--font-size--xs); color: var(--lm-muted); }
.lm-mini-cart__foot .lm-link-quiet { text-align: center; min-height: var(--lm-touch); display: grid; place-items: center; }

/* --------------------------------------------------------- 15. Checkout */

.lm-checkout-focus .lm-crumbs { display: none; }

.lm-consent {
	margin-top: 1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--lm-line);
	background: var(--lm-surface);
	border-radius: var(--lm-radius-card);
}
.lm-consent__row { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; margin: 0; }
.lm-consent__row input { margin-top: 0.2rem; flex: 0 0 auto; }
.lm-consent__label { font-size: var(--wp--preset--font-size--base); font-weight: 600; letter-spacing: 0; text-transform: none; }
.lm-consent__text {
	margin-top: 0.6rem;
	padding-inline-start: 1.8rem;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.75;
	color: var(--lm-ink-soft);
}
.lm-consent__text a { text-decoration: underline; }

.lm-checkout-policies { margin-top: 1rem; font-size: var(--wp--preset--font-size--xs); line-height: 1.8; color: var(--lm-muted); text-align: center; }
.lm-checkout-policies a { text-decoration: underline; }

/* The block checkout keeps its own class names; these align it with the
   design system without overriding a single template. */
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	border-radius: var(--lm-radius-control) !important;
	border-color: var(--lm-line-strong) !important;
}
.wc-block-components-button:not(.is-link) {
	border-radius: var(--lm-radius-control) !important;
	background: var(--lm-accent) !important;
	color: var(--lm-accent-text) !important;
	font-weight: 700;
	letter-spacing: var(--lm-track-wider);
	text-transform: uppercase;
	min-height: var(--lm-h-lg);
}
.wc-block-components-title, .wc-block-components-checkout-step__title {
	font-family: var(--lm-font-display) !important;
	font-weight: 400 !important;
}

/* ---------------------------------------------------------- 16. Account */

.lm-account__title { font-size: var(--wp--preset--font-size--4xl); margin-top: 0.5rem; }
.woocommerce-MyAccount-navigation { border-top: 1px solid var(--lm-ink); }
.lm-account-nav__item a, .woocommerce-MyAccount-navigation li a {
	display: flex; align-items: center; justify-content: space-between;
	min-height: var(--lm-touch);
	padding-block: 1rem;
	border-bottom: 1px solid var(--lm-line);
	font-size: var(--wp--preset--font-size--base);
}
.woocommerce-MyAccount-navigation li.is-active a { font-weight: 700; }

.lm-account-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.lm-account-tile { border: 1px solid var(--lm-line); padding: 1.35rem; border-radius: var(--lm-radius-card); }
.lm-account-tile__value { font-family: var(--lm-font-display); font-size: var(--wp--preset--font-size--3xl); margin-top: 0.4rem; }
.lm-account-tile__note { font-size: var(--wp--preset--font-size--sm); color: var(--lm-muted); margin-top: 0.2rem; }

.lm-order-thumbs { display: inline-flex; align-items: center; gap: 0.25rem; }
.lm-order-thumb { width: 2.5rem; aspect-ratio: var(--lm-ratio-product, 3 / 4); object-fit: cover; }
.lm-order-thumbs__more { font-size: var(--wp--preset--font-size--xs); color: var(--lm-muted); }

.lm-account-prefs { margin-top: var(--wp--preset--spacing--60); border: 1px solid var(--lm-line); padding: 1.5rem; border-radius: var(--lm-radius-card); }
.lm-account-prefs__title { font-family: var(--lm-font-body); font-size: var(--wp--preset--font-size--md); font-weight: 700; }
.lm-account-prefs__note { margin-top: 1rem; font-size: var(--wp--preset--font-size--sm); color: var(--lm-muted); line-height: 1.75; }

.lm-login-intro { max-width: 34rem; margin-bottom: var(--wp--preset--spacing--50); }
.lm-login-intro__title { font-size: var(--wp--preset--font-size--3xl); margin-top: 0.5rem; }
.lm-login-intro__text { margin-top: 0.75rem; color: var(--lm-ink-soft); }

.woocommerce-orders-table, .woocommerce-table--order-details, .shop_table {
	width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--base);
}
.shop_table :is(th, td) { text-align: start; padding: 1.1rem 0.6rem 1.1rem 0; border-bottom: 1px solid var(--lm-line); vertical-align: middle; }
.shop_table th { border-bottom-color: var(--lm-ink); font-size: var(--wp--preset--font-size--xs); letter-spacing: var(--lm-track-wide); text-transform: uppercase; }

/* ------------------------------------------------------- 17. Search results */

.lm-search-section { margin-bottom: var(--wp--preset--spacing--80); }
.lm-search-section__title { font-size: var(--wp--preset--font-size--2xl); margin-bottom: 1.5rem; }
.lm-search-section__more { margin-top: 2rem; text-align: center; }

/* ------------------------------------------------------ 12. Review form
 *
 * WooCommerce's review form was left entirely unstyled: a raw textarea and the
 * browser's default grey Submit button sat at the bottom of every product page,
 * which is the one place a shopper is deciding whether the shop is real.
 */

.lm-reviews #respond,
.lm-reviews .comment-respond {
	margin-top: var(--wp--preset--spacing--60, 2rem);
	padding: var(--wp--preset--spacing--60, 2rem);
	background: var(--lm-surface);
	border: 1px solid var(--lm-line);
	border-radius: var(--lm-radius-card);
}
.lm-reviews #reply-title,
.lm-reviews .comment-reply-title {
	display: block;
	font-family: var(--lm-font-display);
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	line-height: 1.2;
	margin-bottom: 0.4rem;
}
.lm-reviews .comment-notes,
.lm-reviews .comment-form-cookies-consent label,
.lm-reviews .woocommerce-review__awaiting-approval {
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	color: var(--lm-muted);
	line-height: 1.7;
}
.lm-reviews .comment-form { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
@media (min-width: 40rem) {
	.lm-reviews .comment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lm-reviews .comment-form-comment,
	.lm-reviews .comment-notes,
	.lm-reviews .comment-form-rating,
	.lm-reviews .comment-form-cookies-consent,
	.lm-reviews .form-submit { grid-column: 1 / -1; }
}
.lm-reviews .comment-form p { margin: 0; }
.lm-reviews .comment-form label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	font-weight: 500;
	letter-spacing: var(--lm-track-wide);
	color: var(--lm-ink-soft);
}
.lm-reviews .comment-form input[type="text"],
.lm-reviews .comment-form input[type="email"],
.lm-reviews .comment-form textarea { width: 100%; background: var(--lm-base); }
.lm-reviews .comment-form textarea { min-height: 9rem; }
.lm-reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}
.lm-reviews .comment-form-cookies-consent label { margin: 0; font-weight: 400; letter-spacing: 0; }

/* The star picker WooCommerce renders as a row of links. */
.lm-reviews .comment-form-rating .stars {
	display: inline-flex;
	gap: 0.35rem;
	margin: 0.2rem 0 0;
	font-size: 0;
}
.lm-reviews .comment-form-rating .stars a {
	position: relative;
	width: var(--lm-touch);
	height: var(--lm-touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lm-line);
	border-radius: var(--lm-radius-control);
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	color: var(--lm-ink);
	text-decoration: none;
}
.lm-reviews .comment-form-rating .stars a:hover,
.lm-reviews .comment-form-rating .stars a.active,
.lm-reviews .comment-form-rating .stars.selected a.active { border-color: var(--lm-ink); background: var(--lm-ink); color: var(--lm-base); }
.lm-reviews .comment-form-rating select { max-width: 14rem; }

/* The submit button, which was rendering as the browser default. */
.lm-reviews .form-submit input[type="submit"],
.lm-reviews .form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lm-h-lg);
	padding-inline: 2rem;
	border: 1px solid var(--lm-accent);
	border-radius: var(--lm-radius-control);
	background: var(--lm-accent);
	color: var(--lm-accent-text);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	letter-spacing: var(--lm-track-wider);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--lm-t-base) var(--lm-ease);
}
.lm-reviews .form-submit input[type="submit"]:hover { background: color-mix(in srgb, var(--lm-accent) 85%, var(--lm-base)); }

/* The same treatment for the blog's comment form, which had none either. */
.lm-comments .comment-form { display: grid; gap: 1.1rem; }
.lm-comments .comment-form label { display: block; margin-bottom: 0.45rem; font-size: var(--wp--preset--font-size--sm, 0.8125rem); font-weight: 500; }
.lm-comments .comment-form input[type="text"],
.lm-comments .comment-form input[type="email"],
.lm-comments .comment-form input[type="url"],
.lm-comments .comment-form textarea { width: 100%; }
.lm-comments .form-submit input[type="submit"] {
	min-height: var(--lm-h-lg);
	padding-inline: 2rem;
	border: 1px solid var(--lm-accent);
	border-radius: var(--lm-radius-control);
	background: var(--lm-accent);
	color: var(--lm-accent-text);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	letter-spacing: var(--lm-track-wider);
	text-transform: uppercase;
	cursor: pointer;
}