/* ==========================================================================
   WOOCOMMERCE

   WooCommerce's own three stylesheets are dequeued (inc/assets.php), so this
   file is the complete styling for every commerce surface. That is deliberate:
   Woo's layout rules use physical `left`/`right` and would fight the logical
   properties used throughout this theme.
   ========================================================================== */

.lm-woo { padding-block: var(--lm-s6) var(--lm-s8); }

/* --------------------------------------------------------------------------
   Product grid + cards
   -------------------------------------------------------------------------- */

/* One card per row on phones, scaling to four on desktop.

   `minmax(0, 1fr)` on every track is load-bearing: without the 0 minimum a long
   unbroken Persian product title blows the track out and forces horizontal
   overflow, which is the dominant RTL layout failure at narrow widths. */
ul.products,
.lm-pgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--lm-s5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	ul.products,
	.lm-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	ul.products,
	.lm-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	ul.products,
	.lm-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- The card -------------------------------------------------------------
   Structure comes from woocommerce/content-product.php, which this theme
   overrides so the add-to-cart button can sit inside the padding box. Under
   WooCommerce's own markup the button is a sibling of the product anchor and
   renders edge-to-edge against the border, which is what made the old cards
   look unfinished.

       li.lm-pcard
       ├─ a.lm-pcard__media   full-bleed 4:5 image + badge, clips the hover zoom
       └─ div.lm-pcard__body  one padding box: eyebrow, title, price, button
   -------------------------------------------------------------------------- */

ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--lm-bg);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius);
	overflow: hidden;
	transition: border-color var(--lm-dur) var(--lm-ease),
	            box-shadow var(--lm-dur) var(--lm-ease),
	            transform var(--lm-dur) var(--lm-ease);
}

ul.products li.product:hover {
	border-color: var(--lm-teal);
	box-shadow: var(--lm-shadow);
	transform: translateY(-3px);
}

/* Focus lands on the title link inside; lift the ring to the whole card so the
   keyboard target is obvious rather than a thin outline mid-card. */
ul.products li.product:focus-within {
	border-color: var(--lm-teal);
	box-shadow: var(--lm-shadow);
	outline: 3px solid var(--lm-teal);
	outline-offset: 2px;
}

.lm-pcard__media {
	display: block;
	position: relative;
	overflow: hidden;
	background-color: var(--lm-surface);
	line-height: 0;
}

/* 4:5 to match the source photography — a 1:1 crop cuts the wooden base off
   these shots, because the subject sits centred with a hand entering the
   bottom of frame. */
ul.products li.product img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	inline-size: 100%;
	transition: transform var(--lm-dur-slow) var(--lm-ease);
}

ul.products li.product:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	ul.products li.product:hover img { transform: none; }
	ul.products li.product:hover { transform: none; }
}

.lm-pcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--lm-s2);
	padding: var(--lm-s4);
	flex: 1 1 auto;
}

/* Category eyebrow — orients the visitor without competing with the title. */
.lm-pcard__cat {
	font-size: var(--lm-fs-sm);
	font-weight: 500;
	color: var(--lm-teal-text);
	text-decoration: none;
	letter-spacing: 0.01em;
	/* Standalone link, so WCAG 2.5.8's 24px target floor applies — it is not
	   inline within a sentence and gets no exemption. */
	min-block-size: 24px;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
}

.lm-pcard__cat:hover { text-decoration: underline; }

ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--lm-fs-lg);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
	color: var(--lm-ink-strong);
}

ul.products li.product .woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole card is clickable via the title's stretched hit area, so the
   visitor does not have to aim at the text itself. The media link is
   aria-hidden, so this is the only link — no duplicate announcement. */
ul.products li.product .woocommerce-loop-product__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

ul.products li.product a { text-decoration: none; }

ul.products li.product .price {
	color: var(--lm-navy);
	font-weight: 700;
	font-size: var(--lm-fs-lg);
	margin-block-start: auto;
	padding-block-start: var(--lm-s1);
}

ul.products li.product .price del {
	color: var(--lm-ink-muted);
	font-weight: 400;
	font-size: var(--lm-fs-base);
	margin-inline-end: var(--lm-s2);
}

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

/* The currency symbol is de-emphasised, matching production's intent
   (`.woocommerce-Price-currencySymbol { opacity: .3 }`) but at a legible
   opacity rather than 0.3, which failed contrast. */
.woocommerce-Price-currencySymbol {
	font-size: var(--lm-fs-sm);   /* not 0.8em — that produced 12/14.4/28.16px */
	font-weight: 400;
	/* No opacity. It was 0.3, was raised to 0.7 for contrast, and still measured
	   3.69:1. The smaller size is enough de-emphasis on its own. */
	margin-inline-start: 2px;
}

/* Badges sit in the inline-start corner, which flips correctly in RTL. */
ul.products li.product .lm-badge,
ul.products li.product .lm-onsale,
ul.products li.product .onsale {
	position: absolute;
	inset-block-start: var(--lm-s3);
	inset-inline-start: var(--lm-s3);
	z-index: 2;
}

ul.products li.product .lm-onsale,
ul.products li.product .onsale {
	inset-inline-start: auto;
	inset-inline-end: var(--lm-s3);
	background-color: var(--lm-alert);
	color: #fff;
	padding: 2px var(--lm-s2);
	border-radius: var(--lm-radius-pill);
	font-size: var(--lm-fs-sm);
	font-weight: 500;
}

/* Sits above the title's stretched link so it stays independently clickable. */
ul.products li.product .button {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 44px;
	margin-block-start: var(--lm-s3);
	padding-inline: var(--lm-s4);
	border: 1px solid var(--lm-navy);
	border-radius: var(--lm-radius-sm);
	background-color: transparent;
	color: var(--lm-navy);
	font-size: var(--lm-fs-base);
	font-weight: 500;
	transition: background-color var(--lm-dur) var(--lm-ease),
	            color var(--lm-dur) var(--lm-ease);
}

ul.products li.product .button:hover {
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

/* Visible progress while Woo's AJAX add-to-cart is in flight. Woo sets
   `.loading` on the button and `.added` when it resolves; without styling them
   the button looks inert and invites a second click. */
ul.products li.product .button.loading {
	color: transparent;
	pointer-events: none;
}

ul.products li.product .button.loading::after {
	content: "";
	position: absolute;
	inline-size: 18px;
	block-size: 18px;
	border: 2px solid var(--lm-navy);
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: lm-spin 700ms linear infinite;
}

@keyframes lm-spin {
	to { transform: rotate(360deg); }
}

ul.products li.product .button.added {
	background-color: var(--lm-success-strong);
	border-color: var(--lm-success-strong);
	color: var(--lm-on-primary);
}

/* Woo appends a "View cart" link after a successful add. */
ul.products li.product .added_to_cart {
	position: relative;
	z-index: 2;
	margin-block-start: var(--lm-s2);
	font-size: var(--lm-fs-base);
	font-weight: 500;
	color: var(--lm-teal-text);
	text-align: center;
}

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

.single-product div.product {
	display: grid;
	gap: var(--lm-s6);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--lm-s7);
		align-items: start;
	}
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .up-sells {
		grid-column: 1 / -1;
	}
}

.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery img { border-radius: var(--lm-radius); }

.woocommerce-product-gallery__wrapper { margin: 0; }

.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--lm-s2);
	list-style: none;
	margin: var(--lm-s3) 0 0;
	padding: 0;
}

.flex-control-thumbs img {
	cursor: pointer;
	border-radius: var(--lm-radius-sm);
	opacity: 0.6;
	transition: opacity var(--lm-dur) var(--lm-ease);
}

.flex-control-thumbs img:hover,
.flex-control-thumbs .flex-active { opacity: 1; }

.product_title { margin-block-end: var(--lm-s3); }

.summary .price {
	color: var(--lm-navy);
	font-size: var(--lm-fs-lg);
	font-weight: 700;
	margin-block-end: var(--lm-s4);
}

.woocommerce-product-details__short-description {
	color: var(--lm-ink);
	margin-block-end: var(--lm-s5);
}

.product_meta {
	margin-block-start: var(--lm-s5);
	padding-block-start: var(--lm-s4);
	border-block-start: 1px solid var(--lm-border);
	font-size: var(--lm-fs-base);
	color: var(--lm-ink-muted);
}

.product_meta > span { display: block; margin-block-end: var(--lm-s1); }

/* --- Packaging add-ons ---------------------------------------------------
   The variation <select>s stay in the DOM because Woo's own
   wc-add-to-cart-variation script reads them; main.js layers radio pills on
   top and keeps the two in sync. With JS off, the selects show and work.
   -------------------------------------------------------------------------- */

table.variations {
	inline-size: 100%;
	margin-block-end: var(--lm-s4);
}

table.variations,
table.variations tbody,
table.variations tr,
table.variations th,
table.variations td {
	display: block;
	border: 0;
	padding: 0;
	background: none;
}

table.variations tr { margin-block-end: var(--lm-s4); }

table.variations th.label {
	margin-block-end: var(--lm-s2);
	font-size: var(--lm-fs-base);
	font-weight: 500;
	color: var(--lm-ink-strong);
}

/* Hidden only once the enhancement has taken over. */
.lm-has-pills table.variations td.value select { display: none; }

.lm-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-s2);
}

.lm-pill {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-block-size: 44px;
	justify-content: center;
	padding: var(--lm-s2) var(--lm-s4);
	border: 1.5px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-bg);
	color: var(--lm-ink-strong);
	font-size: var(--lm-fs-base);
	cursor: pointer;
	transition: border-color var(--lm-dur) var(--lm-ease),
	            background-color var(--lm-dur) var(--lm-ease);
}

.lm-pill:hover { border-color: var(--lm-teal); }

.lm-pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.lm-pill:has(input:checked) {
	border-color: var(--lm-navy);
	background-color: color-mix(in srgb, var(--lm-navy) 8%, var(--lm-bg));
}

.lm-pill:has(input:focus-visible) {
	outline: 3px solid var(--lm-teal);
	outline-offset: 2px;
}

.lm-pill__name { font-weight: 500; }

/* The whole point of the redesign here: the price consequence of each choice
   is visible, instead of hidden behind a dropdown. */
.lm-pill__delta {
	font-size: var(--lm-fs-sm);
	color: var(--lm-teal);
	font-weight: 500;
}

.lm-pill__delta--free { color: var(--lm-ink-muted); }

.woocommerce-variation-price { margin-block-end: var(--lm-s3); }

.woocommerce-variation-price .price {
	font-size: var(--lm-fs-lg);
	margin-block-end: 0;
}

.reset_variations {
	display: inline-block;
	margin-block-start: var(--lm-s2);
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-muted);
}

/* --- Quantity + add to cart ---------------------------------------------- */

form.cart,
.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--lm-s3);
	margin-block: var(--lm-s4);
}

.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	overflow: hidden;
}

.quantity input[type="number"] {
	inline-size: 56px;
	min-block-size: 44px;
	border: 0;
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity input:focus { box-shadow: none; }

.lm-qty-btn {
	inline-size: 44px;
	min-block-size: 44px;
	border: 0;
	background-color: var(--lm-surface);
	color: var(--lm-ink-strong);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.lm-qty-btn:hover { background-color: var(--lm-border); }

.lm-qty-btn svg { inline-size: 16px; block-size: 16px; }

.single_add_to_cart_button {
	flex: 1 1 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-inline: var(--lm-s6);
	border: 0;
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
	font-family: inherit;
	font-size: var(--lm-fs-lg);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--lm-dur) var(--lm-ease);
}

.single_add_to_cart_button:hover { background-color: var(--lm-navy-deep); }

/* Genuinely inactive — exempt from contrast requirements. */
.single_add_to_cart_button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* "Choose your options first" is NOT disabled. WooCommerce adds only the
   `.disabled` CLASS — no attribute, no aria-disabled — so the button keeps
   focus and still submits. Fading it to 1.73:1 told sighted users it was inert
   while assistive tech announced it as available. It now reads as an outlined,
   not-yet-primary action at full text contrast. */
.single_add_to_cart_button.disabled:not([disabled]) {
	background-color: transparent;
	border: 1px solid var(--lm-navy);
	color: var(--lm-navy);
	opacity: 1;
}

/* --- Tabs ---------------------------------------------------------------- */

.woocommerce-tabs { margin-block-start: var(--lm-s7); }

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-s1);
	list-style: none;
	margin: 0 0 var(--lm-s5);
	padding: 0;
	border-block-end: 1px solid var(--lm-border);
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--lm-s3) var(--lm-s4);
	color: var(--lm-ink-muted);
	font-weight: 500;
	text-decoration: none;
	border-block-end: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--lm-navy);
	border-block-end-color: var(--lm-navy);
}

/* --------------------------------------------------------------------------
   Checkout progress steps
   -------------------------------------------------------------------------- */

.lm-steps {
	display: flex;
	align-items: center;
	gap: var(--lm-s2);
	list-style: none;
	margin: 0 0 var(--lm-s6);
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.lm-steps::-webkit-scrollbar { display: none; }

.lm-steps__item {
	display: flex;
	align-items: center;
	gap: var(--lm-s2);
	flex: 0 0 auto;
	font-size: var(--lm-fs-base);
	color: var(--lm-ink-muted);
	margin: 0;
}

/* Connector line between steps. Uses a flex order trick rather than a
   directional border so it needs no RTL branch. */
.lm-steps__item + .lm-steps__item::before {
	content: "";
	inline-size: clamp(16px, 5vw, 48px);
	block-size: 1px;
	background-color: var(--lm-border);
	flex: 0 0 auto;
	margin-inline-end: var(--lm-s2);
}

.lm-steps__dot {
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--lm-border);
	background-color: var(--lm-bg);
	font-size: var(--lm-fs-sm);
	font-weight: 500;
	flex: 0 0 auto;
}

.lm-steps__item.is-current { color: var(--lm-navy); font-weight: 500; }

.lm-steps__item.is-current .lm-steps__dot {
	border-color: var(--lm-navy);
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

.lm-steps__item.is-done .lm-steps__dot {
	border-color: var(--lm-success-strong);
	background-color: var(--lm-success-strong);
	color: var(--lm-on-primary);
}

.lm-steps__tick { inline-size: 15px; block-size: 15px; }

/* --------------------------------------------------------------------------
   Cart
   -------------------------------------------------------------------------- */

.woocommerce-cart-form { margin-block-end: var(--lm-s6); }

.shop_table {
	inline-size: 100%;
	border-collapse: collapse;
}

.shop_table th {
	text-align: start;
	font-weight: 500;
	background-color: var(--lm-surface);
	padding: var(--lm-s3);
}

.shop_table td {
	padding: var(--lm-s3);
	border-block-end: 1px solid var(--lm-border);
	vertical-align: middle;
}

.shop_table .product-thumbnail img {
	inline-size: 72px;
	border-radius: var(--lm-radius-sm);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Card layout on narrow screens: a 6-column cart table cannot fit at 360px,
   and a horizontally scrolling cart is a conversion killer. */
@media (max-width: 767px) {
	.shop_table thead { display: none; }

	.shop_table,
	.shop_table tbody,
	.shop_table tr,
	.shop_table td {
		display: block;
		inline-size: 100%;
	}

	.shop_table tr {
		border: 1px solid var(--lm-border);
		border-radius: var(--lm-radius);
		padding: var(--lm-s3);
		margin-block-end: var(--lm-s4);
	}

	.shop_table td {
		border: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lm-s3);
		padding: var(--lm-s2) 0;
	}

	.shop_table td::before {
		content: attr(data-title);
		font-size: var(--lm-fs-sm);
		color: var(--lm-ink-muted);
		font-weight: 500;
	}

	.shop_table td.product-remove::before,
	.shop_table td.product-thumbnail::before { content: none; }
}

.cart_totals {
	background-color: var(--lm-surface);
	border-radius: var(--lm-radius);
	padding: var(--lm-s5);
}

.cart_totals h2 { font-size: var(--lm-fs-lg); }

.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 48px;
	margin-block-start: var(--lm-s4);
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
	font-weight: 500;
	text-decoration: none;
}

.checkout-button:hover { background-color: var(--lm-navy-deep); color: var(--lm-on-primary); }

.coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-s2);
	margin-block-end: var(--lm-s4);
}

.coupon { margin-block-end: 0; flex: 1 1 auto; }
.coupon input { flex: 1 1 180px; max-inline-size: 260px; }

/* --------------------------------------------------------------------------
   Checkout form
   -------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout {
	display: grid;
	gap: var(--lm-s6);
	grid-template-columns: 1fr;
}

/* The heading and the review box are wrapped into one element by
   inc/woo.php, so this column is a single grid item. That is what keeps the
   layout robust: there is no row-spanning and there are no implicit row indices
   for an injected sibling to disturb.

   The earlier approach pinned #customer_details across two rows. It worked
   until WooCommerce injected .woocommerce-NoticeGroup as a new first child on a
   failed submit, which auto-placed into the same cell and pushed the review box
   1117px down the page — precisely when the customer needed to read the error. */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: start;
	}

	/* Anything WooCommerce injects at form level spans the full width rather
	   than competing for a column. */
	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
	}

	/* Keep the order summary in view while the customer fills the form. */
	.woocommerce-checkout .lm-checkout__aside {
		position: sticky;
		inset-block-start: calc(var(--lm-header-h) + var(--lm-s4));
	}
}

.lm-checkout__aside > :first-child { margin-block-start: 0; }

.woocommerce-billing-fields h3,
#order_review_heading {
	font-size: var(--lm-fs-lg);
	margin-block-end: var(--lm-s4);
}

.woocommerce-input-wrapper { display: block; }

p.form-row {
	margin-block-end: var(--lm-s4);
	display: flex;
	flex-direction: column;
}

p.form-row label {
	margin-block-end: var(--lm-s2);
	font-size: var(--lm-fs-base);
	font-weight: 500;
	color: var(--lm-ink-strong);
}

p.form-row .required {
	color: var(--lm-alert-text);
	text-decoration: none;
	margin-inline-start: 2px;
}

p.form-row .description,
span.description {
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-muted);
	margin-block-start: var(--lm-s1);
}

/* Two-up on wide screens for the paired name fields.
   `p.` is load-bearing: `p.form-row { display: flex }` above scores 0-1-1 and a
   bare `.form-row-first` only 0-1-0, and media queries add no specificity — so
   `display: inline-flex` silently lost while the unopposed `inline-size` still
   applied. The fields ended up half-width AND block-level, stacking with a
   354px gap beside them while every other row ran full width. */
@media (min-width: 600px) {
	p.form-row-first,
	p.form-row-last {
		display: inline-flex;
		inline-size: calc(50% - var(--lm-s2));
	}
	p.form-row-first { margin-inline-end: var(--lm-s3); }
}

/* Woo's own validation classes, mapped onto this theme's error styling. */
.woocommerce-invalid input,
.woocommerce-invalid select,
.woocommerce-invalid textarea {
	border-color: var(--lm-alert);
	background-color: rgb(199 4 53 / 0.03);
}

.woocommerce-validated input,
.woocommerce-validated select {
	border-color: var(--lm-success);
}

#order_review {
	background-color: var(--lm-surface);
	border-radius: var(--lm-radius);
	padding: var(--lm-s5);
}

.woocommerce-checkout-review-order-table { margin-block-end: var(--lm-s4); }

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	background: none;
	padding-inline: 0;
}

.woocommerce-checkout-review-order-table .order-total {
	font-size: var(--lm-fs-lg);
	font-weight: 700;
	color: var(--lm-navy);
}

/* --- Payment ------------------------------------------------------------- */

ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--lm-s4);
	padding: 0;
	display: grid;
	gap: var(--lm-s2);
}

ul.payment_methods li {
	border: 1.5px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	padding: var(--lm-s3) var(--lm-s4);
	margin: 0;
	transition: border-color var(--lm-dur) var(--lm-ease);
}

ul.payment_methods li:has(input:checked) {
	border-color: var(--lm-navy);
	background-color: color-mix(in srgb, var(--lm-navy) 6%, var(--lm-bg));
}

ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-s2);
	min-block-size: 36px;
	font-weight: 500;
	cursor: pointer;
	margin: 0;
}

ul.payment_methods li input[type="radio"] {
	inline-size: 20px;
	block-size: 20px;
	min-block-size: 0;
	accent-color: var(--lm-navy);
}

.payment_box {
	font-size: var(--lm-fs-base);
	color: var(--lm-ink-muted);
	padding-block-start: var(--lm-s2);
}

.payment_box p:last-child { margin-block-end: 0; }

/* Shown when no gateway is available — which is the current container state,
   since the Zarinpal plugin is installed but intentionally left inactive. */
.woocommerce-notice--info,
.woocommerce-info {
	border-inline-start: 4px solid var(--lm-teal);
	background-color: var(--lm-surface);
	padding: var(--lm-s4);
	border-radius: var(--lm-radius-sm);
	font-size: var(--lm-fs-base);
	margin-block-end: var(--lm-s4);
}

#place_order {
	inline-size: 100%;
	min-block-size: 52px;
	border: 0;
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
	font-family: inherit;
	font-size: var(--lm-fs-lg);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--lm-dur) var(--lm-ease);
}

#place_order:hover { background-color: var(--lm-navy-deep); }

.woocommerce-terms-and-conditions-wrapper { margin-block: var(--lm-s4); }

/* Reassurance under the submit button — trust signals belong at the moment of
   commitment, not only in the footer. */
.lm-reassure {
	list-style: none;
	margin: var(--lm-s4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--lm-s2);
}

.lm-reassure li {
	display: flex;
	align-items: flex-start;
	gap: var(--lm-s2);
	margin: 0;
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-muted);
}

.lm-reassure__icon {
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	color: var(--lm-success-strong);
	margin-block-start: 3px;
}

/* --------------------------------------------------------------------------
   My Account
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--lm-s6);
	grid-template-columns: 1fr;
}

/* Login + register side by side, so registration is visible rather than
   hidden below the fold — production rendered a login form only. */
@media (min-width: 800px) {
	.woocommerce-account:not(.logged-in) .u-columns.col2-set {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lm-s6);
	}
}

.woocommerce-account .col-1,
.woocommerce-account .col-2 {
	background-color: var(--lm-bg);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius);
	padding: var(--lm-s5);
}

.woocommerce-account h2 {
	font-size: var(--lm-fs-lg);
	margin-block-end: var(--lm-s4);
}

.woocommerce-form-login__rememberme { margin-block: var(--lm-s3); }

.woocommerce-form button[type="submit"],
.woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-inline: var(--lm-s5);
	border: 0;
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
	font-family: inherit;
	font-size: var(--lm-fs-base);
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}

.woocommerce-form button[type="submit"]:hover { background-color: var(--lm-navy-deep); }

.lm-register__note {
	background-color: var(--lm-surface);
	border-radius: var(--lm-radius-sm);
	padding: var(--lm-s3);
	margin-block-end: var(--lm-s4);
}

/* Account dashboard navigation. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--lm-s1);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--lm-s3);
	border-radius: var(--lm-radius-sm);
	color: var(--lm-ink-strong);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover { background-color: var(--lm-surface); }

.woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

@media (min-width: 800px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
	list-style: none;
	padding: var(--lm-s4);
	border-radius: var(--lm-radius-sm);
	margin-block-end: var(--lm-s4);
	font-size: var(--lm-fs-base);
	border-inline-start: 4px solid var(--lm-teal);
	background-color: var(--lm-surface);
}

.woocommerce-message { border-inline-start-color: var(--lm-success); }

.woocommerce-error {
	border-inline-start-color: var(--lm-alert);
	background-color: rgb(199 4 53 / 0.05);
	color: var(--lm-alert-text);
	font-weight: 500;
}

.woocommerce-error li { margin-block-end: var(--lm-s1); }

.woocommerce-error a { color: var(--lm-alert-text); font-weight: 700; }

/* --------------------------------------------------------------------------
   Archive header / result count / sorting
   -------------------------------------------------------------------------- */

.lm-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lm-s3);
	margin-block-end: var(--lm-s5);
	padding-block-end: var(--lm-s4);
	border-block-end: 1px solid var(--lm-border);
}

.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-s2);
	list-style: none;
	margin: var(--lm-s6) 0 0;
	padding: 0;
	justify-content: center;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	text-decoration: none;
	color: var(--lm-ink-strong);
}

.woocommerce-pagination .current {
	background-color: var(--lm-navy);
	border-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

/* Chevrons in pagination and breadcrumbs point the other way in RTL. */
[dir="rtl"] .woocommerce-pagination .prev svg,
[dir="rtl"] .woocommerce-pagination .next svg {
	transform: scaleX(-1);
}

.related > h2,
.up-sells > h2 {
	font-size: var(--lm-fs-lg);
	margin-block: var(--lm-s7) var(--lm-s5);
}

/* --------------------------------------------------------------------------
   My Account, continued.
   -------------------------------------------------------------------------- */

/* A single login form stretched across 1250px is unreadable — the label ends
   up a screen's width from its input. Constrain the form column; the two-up
   login/register grid above overrides this when both are present. */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-inline-size: 900px;
	margin-inline: auto;
}

.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
	background-color: var(--lm-bg);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius);
	padding: var(--lm-s5);
}

/* WooCommerce's password reveal button ships unstyled without Woo's own CSS,
   and renders as a stray empty box beside the field. */
.woocommerce-form__label-for-checkbox { display: inline-flex; }

.password-input {
	display: block;
	position: relative;
}

.show-password-input {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--lm-s3);
	transform: translateY(-50%);
	inline-size: 24px;
	block-size: 24px;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	/* An eye glyph, so the control reads as "reveal" rather than as a blank
	   square. Inlined as a data URI to avoid a request for one 200-byte icon. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.6 5 12 5s10.2 7 10.2 7-3.8 7-10.2 7S1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
}

.show-password-input.display-password {
	opacity: 0.55;
}

/* Reserve room so the revealed text never runs under the button. */
.password-input input { padding-inline-end: 44px; }

.woocommerce-privacy-policy-text {
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-muted);
	margin-block: var(--lm-s3);
}

.woocommerce-LostPassword {
	margin-block-start: var(--lm-s3);
	font-size: var(--lm-fs-base);
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	inline-size: 100%;
	margin-block-start: var(--lm-s3);
}

.lm-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-s3);
	justify-content: center;
	margin-block: var(--lm-s3) 0;
}

/* ==========================================================================
   SHOP TOOLS — search, category filter, result count, sort

   Production shipped none of this: the whole archive contained one form (the
   sort dropdown) and one input (a hidden `paged`). All state here lives in the
   URL, so Back, bookmarking and sharing behave.
   ========================================================================== */

.lm-shop-tools {
	display: grid;
	gap: var(--lm-s4);
	margin-block-end: var(--lm-s6);
}

.lm-shop-search .lm-searchform { margin-block: 0; max-width: 100%; }

/* --- Category chips ------------------------------------------------------ */

.lm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-s2);
}

.lm-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-s2);
	min-block-size: 40px;
	padding-inline: var(--lm-s4);
	border: 1.5px solid var(--lm-border);
	border-radius: var(--lm-radius-pill);
	background-color: var(--lm-bg);
	color: var(--lm-ink-strong);
	font-size: var(--lm-fs-base);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--lm-dur) var(--lm-ease),
	            background-color var(--lm-dur) var(--lm-ease),
	            color var(--lm-dur) var(--lm-ease);
}

.lm-chip:hover {
	border-color: var(--lm-teal);
	color: var(--lm-navy);
}

.lm-chip.is-active {
	background-color: var(--lm-navy);
	border-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

.lm-chip__count {
	font-size: var(--lm-fs-sm);
	font-weight: 400;
}

/* Categories with no stock stay clickable — their empty state offers a
   custom-order route — but the count is visible first, so nobody clicks into
   an empty archive without knowing. Error prevention, not concealment. */
.lm-chip.is-empty {
	color: var(--lm-ink-muted);
	border-style: dashed;
}

.lm-chip.is-empty:hover { color: var(--lm-ink-strong); }

/* --- Count + sort row ---------------------------------------------------- */

.lm-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lm-s3);
	padding-block-end: var(--lm-s4);
	border-block-end: 1px solid var(--lm-border);
}

.woocommerce-result-count {
	margin: 0;
	font-size: var(--lm-fs-base);
	color: var(--lm-ink-muted);
}

.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { min-inline-size: 210px; }

/* --- Active filter summary ----------------------------------------------- */

.lm-filter-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lm-s3);
	margin: 0;
	font-size: var(--lm-fs-base);
	color: var(--lm-ink-muted);
}

.lm-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-s1);
}

.lm-filter-tag strong { color: var(--lm-ink-strong); }

/* The way back out of any filtered state. */
.lm-filter-clear {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-s1);
	min-block-size: 36px;
	color: var(--lm-alert-text);
	font-weight: 500;
	text-decoration: none;
}

.lm-filter-clear:hover { color: var(--lm-alert-text); text-decoration: underline; }

.lm-filter-clear__icon { inline-size: 14px; block-size: 14px; }

@media (max-width: 559px) {
	/* Wrap rather than scroll — a horizontally scrolling toolbar hides controls
	   on exactly the screens with least room to spare. */
	.lm-shop-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.woocommerce-ordering select { inline-size: 100%; }
}

/* ==========================================================================
   WOOCOMMERCE LIST + DEFINITION RESETS

   `base.css` sets `:where(ul, ol) { padding-inline-start: var(--lm-s5) }` for
   prose. Any list WooCommerce renders that the theme has not reset inherits
   that 24px — on the RIGHT edge in RTL — and reads as a stray section padding.

   `#shipping_method` was the one live instance, and because `list-style` was
   never reset either it rendered a literal bullet beside «ارسال رایگان» that no
   other totals row had. `padding: 0` alone would clip the marker outside the
   box, so both are needed.

   The rest are dormant only because the store has no orders and no reviews yet.
   They are grouped here deliberately rather than added one incident at a time.
   ========================================================================== */

ul#shipping_method,              /* cart + checkout totals — was showing a bullet */
ul.wc-item-meta,                 /* order item meta — fires on the first order */
ul.woocommerce-order-overview,   /* thank-you page */
ul.order_details,                /* pay-for-order page */
ul.woocommerce-Downloads,        /* downloadable products */
ul.woocommerce-mini-cart,        /* cart widget, if one is ever added */
ol.commentlist,                  /* product reviews — would also get decimals */
ol.commentlist.notes {           /* order notes */
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#shipping_method li { margin-block-end: var(--lm-s2); }

ul#shipping_method label {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-s2);
	margin: 0;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Variation lines in the cart.

   `dd` carries a UA default `margin-inline-start: 40px`, which the `ul, ol`
   reset above cannot reach — the theme had no dl/dt/dd rule at all. Measured at
   40px, the largest asymmetry on the site: the chosen packaging option sat
   inboard of its own label.

   Scoped to `.variation` on purpose. A blanket `dd` reset would flatten any
   definition list in the legal pages' prose, where the indent is correct.
   -------------------------------------------------------------------------- */

dl.variation {
	margin: 0;
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-muted);
}

dl.variation dt {
	margin-inline: 0;
	font-weight: 500;
	display: inline;
}

dl.variation dd {
	margin-inline: 0;
	display: inline;
}

dl.variation dd p { margin: 0; display: inline; }

dl.variation dd::after {
	content: "";
	display: block;
}

/* ==========================================================================
   CART CONTROLS

   The theme dequeues WooCommerce's stylesheets wholesale, and these were the
   pieces it never replaced — so they were rendering as raw browser defaults:
   a 7.5 x 26px remove link, and two grey 13px system buttons sitting directly
   above the 48px navy checkout button.
   ========================================================================== */

/* Destructive, and it was 7.5px wide. Full 44px. */
a.remove {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	color: var(--lm-alert-text);
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--lm-dur) var(--lm-ease),
	            color var(--lm-dur) var(--lm-ease);
}

a.remove:hover {
	background-color: color-mix(in srgb, var(--lm-alert) 12%, transparent);
	color: var(--lm-alert-text);
}

/* The cart toolbar.
 *
 * Previously this was `.cart .actions { display: flex }` applied to a
 * `<td colspan="6">`. Any `display` other than `table-cell` drops a cell out of
 * the table model, so `colspan` stopped applying and the cell collapsed into
 * column one — the rightmost `product-remove` column in RTL, measured 566px
 * wide with a 510px void. The actions now live outside the table entirely
 * (woocommerce/cart/cart.php), so flex is safe here. */
.lm-cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lm-s3);
	margin-block-start: var(--lm-s4);
	padding: var(--lm-s4);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius);
	background-color: var(--lm-bg);
}

/* Every button in the cart actions row, including Woo's own markup. */
.lm-cart-actions .button,
.lm-cart-actions button,
.coupon .button,
.coupon button,
button[name="update_cart"],
input[name="update_cart"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-inline: var(--lm-s5);
	border: 1px solid var(--lm-navy);
	border-radius: var(--lm-radius-sm);
	background-color: transparent;
	color: var(--lm-navy);
	font-family: inherit;               /* was falling back to the UA font */
	font-size: var(--lm-fs-base);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--lm-dur) var(--lm-ease),
	            color var(--lm-dur) var(--lm-ease);
}

.lm-cart-actions .button:hover,
.lm-cart-actions button:hover,
.coupon .button:hover,
button[name="update_cart"]:hover {
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

/* Woo disables "update cart" until something changes. */
button[name="update_cart"][disabled],
input[name="update_cart"][disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

button[name="update_cart"][disabled]:hover {
	background-color: transparent;
	color: var(--lm-navy);
}

/* ==========================================================================
   SELECT2

   WooCommerce swaps #billing_state for select2, which the theme never styled:
   28px against 44px native fields, a #aaa border against --lm-border, and a 4px
   radius against 12px — a visibly foreign control in the middle of the form.
   Its RTL direction is already correct, so only the chrome changes here.
   ========================================================================== */

.select2-container .select2-selection--single {
	block-size: 44px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-bg);
	transition: border-color var(--lm-dur) var(--lm-ease),
	            box-shadow var(--lm-dur) var(--lm-ease);
}

.select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 42px;
	color: var(--lm-ink-strong);
	font-family: inherit;
	font-size: var(--lm-fs-lg);
}

.select2-container .select2-selection--single .select2-selection__arrow {
	block-size: 42px;
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
	border-color: var(--lm-teal);
	box-shadow: 0 0 0 3px rgb(18 130 162 / 0.18);
}

.select2-dropdown {
	border-color: var(--lm-border);
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-bg);
	color: var(--lm-ink-strong);
	overflow: hidden;
}

.select2-container .select2-search--dropdown .select2-search__field {
	min-block-size: 40px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-bg);
	color: var(--lm-ink-strong);
	font-family: inherit;
}

.select2-container .select2-results__option {
	padding: var(--lm-s2) var(--lm-s3);
	font-size: var(--lm-fs-base);
}

.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted {
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

/* --------------------------------------------------------------------------
   Checkout steps on mobile.

   At 360px the full three-step row needed 433px against 313px available, so
   step 3 sat at left:-104 — entirely off-screen, with `scrollbar-width: none`
   hiding any hint it existed. A progress indicator that conceals the
   destination is worse than no indicator.

   All three dots stay; only the current step keeps its label. The list's
   aria-label carries "مرحله ۲ از ۳" so the position is announced, not just seen.
   -------------------------------------------------------------------------- */

@media (max-width: 559px) {
	.lm-steps {
		overflow-x: visible;      /* nothing left to scroll */
		justify-content: center;
		gap: var(--lm-s1);
	}

	/* Only the current step is labelled. `position: absolute` rather than
	   `display: none` would still reserve nothing — but hidden labels must not
	   be announced twice, and the aria-label already covers it, so remove them
	   from the box entirely. */
	.lm-steps__item:not(.is-current) .lm-steps__label {
		display: none;
	}

	.lm-steps__item + .lm-steps__item::before {
		inline-size: 20px;
		margin-inline-end: var(--lm-s1);
	}

	.lm-steps__label {
		font-size: var(--lm-fs-sm);
	}
}

/* ==========================================================================
   CART LAYOUT

   `.cart-collaterals` had no rule at all, so the totals panel stretched the
   full 1250px below the table. The cart now mirrors the checkout: items on one
   side, totals beside them and sticky.

   Note the same lesson the checkout taught — do not pin grid items to absolute
   row indices. WooCommerce injects `.woocommerce-notices-wrapper` as a sibling
   here too, so it is given a full-width span rather than left to auto-place
   into a content column.
   ========================================================================== */

.lm-remove__icon {
	inline-size: 18px;
	block-size: 18px;
}

@media (min-width: 1000px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
		gap: var(--lm-s6);
		align-items: start;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-cart .woocommerce > .lm-empty {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .cart-collaterals {
		position: sticky;
		inset-block-start: calc(var(--lm-header-h) + var(--lm-s4));
	}
}

.cart-collaterals .cart_totals { margin-block: 0; }

/* Woo emits this on the empty-cart page only when the shop page is missing;
   the theme's own template handles the normal case. Styled so it can never
   render as a bare underlined link again. */
.return-to-shop { margin-block-start: var(--lm-s4); }

.return-to-shop a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-inline: var(--lm-s5);
	border-radius: var(--lm-radius-sm);
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
	font-weight: 500;
	text-decoration: none;
}

/* --- Mobile cards --------------------------------------------------------
   `.product-remove` and `.product-thumbnail` suppress their `::before` label,
   so `justify-content: space-between` had a single child to distribute and
   collapsed it to one edge, leaving ~250px of dead space beside it.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.shop_table td.product-remove,
	.shop_table td.product-thumbnail {
		justify-content: flex-start;
	}

	/* The remove control belongs at the far edge of its own row, where it is
	   away from the thumbnail and hard to hit by accident. */
	.shop_table td.product-remove {
		justify-content: flex-end;
		padding-block-end: 0;
	}

	.lm-cart-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.lm-cart-actions .coupon { flex-direction: column; }
	.lm-cart-actions .coupon input { max-inline-size: none; }
	.lm-cart-actions button { inline-size: 100%; }
}