/* ==========================================================================
   LAYOUT — container, grid, header, navigation, footer.
   Mobile-first: every media query is min-width.
   ========================================================================== */

.lm-container {
	width: 100%;
	max-width: var(--lm-container);
	margin-inline: auto;
	padding-inline: var(--lm-gutter);
}

.lm-container--narrow {
	max-width: var(--lm-container-narrow);
}

/* Auto-fit grid. `minmax(0, 1fr)` on the second arg is load-bearing: without
   the 0 minimum, long unbroken Persian strings blow the track out and cause
   horizontal overflow. */
.lm-grid {
	display: grid;
	gap: var(--lm-s5);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--lm-col, 260px), 100%), 1fr));
}

.lm-section {
	padding-block: var(--lm-s7);
}

@media (min-width: 768px) {
	.lm-section {
		padding-block: var(--lm-s8);
	}
}

.lm-section--wash { background-color: var(--lm-wash); }
.lm-section--surface { background-color: var(--lm-surface); }

.lm-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lm-s3);
	margin-block-end: var(--lm-s6);
}

/* Only ever rendered on the homepage (front-page.php), so this needs no
   `.home` scoping — every other page's headings stay on the 16px scale. */
.lm-section__title {
	font-size: var(--lm-fs-display);
	margin-block-end: 0;
}

.lm-section__lead {
	color: var(--lm-ink-muted);
	max-width: 52ch;
	margin-block: var(--lm-s2) 0;
}

/* ==========================================================================
   HEADER
   ==========================================================================
   That constraint is now LIFTED. The header used to be pinned to near-white
   because the old logo was an opaque PNG with a baked botanical panel behind
   the wordmark. The logo is now transparent line art with a per-theme colour
   variant, so the header can take any ground the palette offers. It is left
   on --lm-bg deliberately — that is a design choice now, not a limitation.
   ========================================================================== */

.lm-topbar {
	background-color: var(--lm-navy-deep);
	color: var(--lm-on-primary);
	font-size: var(--lm-fs-sm);
}

.lm-topbar a {
	color: var(--lm-on-primary);
	text-decoration: none;
}

.lm-topbar a:hover {
	color: var(--lm-on-primary);
	text-decoration: underline;
}

.lm-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lm-s3);
	min-height: 34px;
	padding-block: var(--lm-s1);
}

.lm-topbar__note {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-s2);
}

/* Hide the secondary topbar item on very narrow screens rather than let the
   bar wrap to three lines. */
@media (max-width: 559px) {
	.lm-topbar__note--secondary {
		display: none;
	}
}

.lm-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background-color: var(--lm-bg);
	border-block-end: 1px solid var(--lm-border);
}

.lm-header__inner {
	display: flex;
	align-items: center;
	gap: var(--lm-s4);
	min-height: var(--lm-header-h);
}

/* --------------------------------------------------------------------------
   LOGO TOKENS

   These live HERE rather than with every other token in style.css, and that is
   forced, not stylistic: a relative url() inside a custom property resolves
   against the stylesheet that USES the property, not the one that declares it.
   Declared in style.css (theme root) and consumed here (assets/css/), the same
   token resolved to assets/css/assets/img/... and 404'd.

   So the declarations sit next to their only consumer, where "../img/" is
   correct. If a second stylesheet ever needs the logo, give it its own
   correctly-based declaration rather than moving these back up.
   -------------------------------------------------------------------------- */

:root {
	--lm-logo-lockup: url("../img/logo-lockup.png");
	--lm-logo-mark: url("../img/logo-mark.png");
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--lm-logo-lockup: url("../img/logo-lockup-dark.png");
		--lm-logo-mark: url("../img/logo-mark-dark.png");
	}
}

:root[data-theme="dark"] {
	--lm-logo-lockup: url("../img/logo-lockup-dark.png");
	--lm-logo-mark: url("../img/logo-mark-dark.png");
}

/* --------------------------------------------------------------------------
   LOGO

   Drawn as a background image rather than an <img> because the correct file
   depends on TWO axes at once — viewport (mark vs full lockup) and theme
   (navy vs cream). A <picture> element resolves only `prefers-color-scheme`,
   so it would serve the wrong colour to anyone using the site's own theme
   switch; `--lm-logo-*` follows both. Only the matched variant is fetched.

   Every box below is sized explicitly in both axes, so the header reserves
   its space and the row never reflows while the image decodes.

   The accessible name comes from the .lm-sr-only span inside the anchor, so
   the link is still announced as the site name.
   -------------------------------------------------------------------------- */

/* The header logo is 36px tall at EVERY width — mobile and desktop alike. Only
   the artwork swaps at the breakpoint, never the height, so the header keeps a
   single optical weight instead of growing a taller masthead on desktop.

   Each width is the asset's own aspect at 36px, not a rounded guess:
   background-size:contain preserves aspect, so a box that does not match would
   letterbox the logo inside its own hit area.

       mark    74x80  -> 0.9250 x 36 =  33.3px
       lockup 338x90  -> 3.7556 x 36 = 135.2px

   Both dimensions stay explicit so the header reserves its space and the row
   never reflows while the image decodes. */

.lm-logo {
	flex: 0 0 auto;
	display: block;
	background-image: var(--lm-logo-mark);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	inline-size: 33.3px;
	block-size: 36px;
}

/* Below 560px the full lockup would put the wordmark at roughly 11px — under
   the 12px floor the type system holds everywhere else. The mark carries the
   brand on its own down there; it is the same drawing that sits inside the
   lockup, so nothing about the identity changes. */
@media (min-width: 560px) {
	.lm-logo {
		background-image: var(--lm-logo-lockup);
		inline-size: 135.2px;
	}
}

/* At 360px the header carries a 4th icon (search) beside account, cart and the
   menu toggle. Four 44px targets plus their gaps and the container padding
   leave ~109px — which the 33px mark clears with room the old 104px lockup
   never had. The touch targets stay 44px. */
@media (max-width: 420px) {
	.lm-header__inner {
		gap: var(--lm-s2);
	}
}

/* The text fallback, used only if the image files are missing. */
.lm-logo--text {
	inline-size: auto;
	block-size: auto;
	background-image: none;
	font-size: var(--lm-fs-lg);
	font-weight: 700;
	color: var(--lm-navy);
	text-decoration: none;
}

/* Nav sits between logo and actions on desktop. */
.lm-nav {
	display: none;
	flex: 1 1 auto;
}

.lm-nav__list {
	display: flex;
	align-items: center;
	gap: var(--lm-s5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-nav a {
	display: inline-block;
	padding-block: var(--lm-s2);
	color: var(--lm-ink-strong);
	font-size: var(--lm-fs-base);
	font-weight: 500;
	text-decoration: none;
	position: relative;
}

/* Underline grows from the inline-start edge, so it animates in the correct
   direction in RTL for free. */
.lm-nav a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 2px;
	background-color: var(--lm-teal);
	transition: inline-size var(--lm-dur) var(--lm-ease);
}

.lm-nav a:hover::after,
.lm-nav .current-menu-item > a::after {
	inline-size: 100%;
}

.lm-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--lm-s1);
	margin-inline-start: auto;
}

/* Icon button. 44x44 minimum — the touch-target floor. */
.lm-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	background: none;
	border-radius: var(--lm-radius-sm);
	color: var(--lm-ink-strong);
	cursor: pointer;
	position: relative;
	transition: background-color var(--lm-dur) var(--lm-ease),
	            color var(--lm-dur) var(--lm-ease);
}

.lm-iconbtn:hover {
	background-color: var(--lm-surface);
	color: var(--lm-navy);
}

.lm-iconbtn svg {
	inline-size: 22px;
	block-size: 22px;
}

.lm-cart-count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 4px;
	border-radius: var(--lm-radius-pill);
	background-color: var(--lm-alert);
	color: #fff;
	font-size: var(--lm-fs-sm);
	line-height: 18px;
	text-align: center;
	font-weight: 500;
}

/* --- Category bar (secondary nav) ---------------------------------------- */

.lm-catbar {
	display: none;
	background-color: var(--lm-surface);
	border-block-end: 1px solid var(--lm-border);
}

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

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

.lm-catbar a {
	white-space: nowrap;
	color: var(--lm-ink);
	font-size: var(--lm-fs-base);
	text-decoration: none;
}

.lm-catbar a:hover { color: var(--lm-navy); }

@media (min-width: 1024px) {
	.lm-nav { display: block; }
	.lm-catbar { display: block; }
	.lm-burger { display: none; }
}

/* --- Mobile drawer ------------------------------------------------------- */

.lm-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;   /* slides in from the inline-end edge; correct in both directions */
	z-index: 200;
	inline-size: min(320px, 86vw);
	background-color: var(--lm-bg);
	border-inline-start: 1px solid var(--lm-border);
	box-shadow: var(--lm-shadow-lg);
	padding: var(--lm-s5);
	overflow-y: auto;
	transform: translateX(0);
	transition: transform var(--lm-dur-slow) var(--lm-ease-out);
}

/* `100%` in the block's own writing mode moves it off the correct edge
   without needing an LTR/RTL branch. */
.lm-drawer[hidden] { display: block !important; }
.lm-drawer[aria-hidden="true"] {
	transform: translateX(100%);
	visibility: hidden;
}

[dir="rtl"] .lm-drawer[aria-hidden="true"] {
	transform: translateX(-100%);
}

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

.lm-drawer__list {
	list-style: none;
	margin: 0 0 var(--lm-s5);
	padding: 0;
}

.lm-drawer__list a {
	display: block;
	padding-block: var(--lm-s3);
	border-block-end: 1px solid var(--lm-border);
	color: var(--lm-ink-strong);
	font-weight: 500;
	text-decoration: none;
}

.lm-drawer__label {
	font-size: var(--lm-fs-sm);
	font-weight: 500;
	color: var(--lm-ink-muted);
	text-transform: none;
	margin-block: var(--lm-s4) var(--lm-s2);
}

.lm-scrim {
	position: fixed;
	inset: 0;
	z-index: 150;
	background-color: rgb(0 0 0 / 0.45);
	opacity: 1;
	transition: opacity var(--lm-dur-slow) var(--lm-ease);
}

.lm-scrim[aria-hidden="true"] {
	opacity: 0;
	visibility: hidden;
}

@media (min-width: 1024px) {
	.lm-drawer,
	.lm-scrim {
		display: none;
	}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.lm-footer {
	background-color: var(--lm-surface);
	border-block-start: 1px solid var(--lm-border-strong);
	margin-block-start: var(--lm-s8);
	font-size: var(--lm-fs-base);
}

.lm-footer__grid {
	display: grid;
	gap: var(--lm-s6);
	padding-block: var(--lm-s7);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.lm-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.lm-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

.lm-footer h2 {
	font-size: var(--lm-fs-lg);
	font-weight: 500;
	margin-block-end: var(--lm-s3);
	color: var(--lm-ink-strong);
}

.lm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-footer li { margin-block-end: var(--lm-s2); }

.lm-footer a {
	color: var(--lm-ink);
	text-decoration: none;
}

.lm-footer a:hover {
	color: var(--lm-navy);
	text-decoration: underline;
}

.lm-footer__bottom {
	border-block-start: 1px solid var(--lm-border);
	padding-block: var(--lm-s4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lm-s3);
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-muted);
}

/* The Enamad trust seal. Reserve its box so it cannot shift layout when the
   third-party image loads — production ships it with no dimensions at all. */
.lm-seal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lm-s4);
}

.lm-seal__box {
	inline-size: 90px;
	min-block-size: 90px;
	background-color: var(--lm-bg);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	padding: var(--lm-s2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lm-seal__box img,
.lm-seal__box a {
	max-inline-size: 100%;
	block-size: auto;
}

/* --- Icon sizing inside text rows ----------------------------------------
   An inline <svg> with no intrinsic size fills its container. Every icon that
   sits beside text needs an explicit box, or it renders at full column width.
   -------------------------------------------------------------------------- */

.lm-topbar__icon {
	inline-size: 15px;
	block-size: 15px;
	flex: 0 0 auto;
}

.lm-footer__icon {
	inline-size: 16px;
	block-size: 16px;
	flex: 0 0 auto;
	color: var(--lm-teal);
}

.lm-footer li {
	display: flex;
	align-items: center;
	gap: var(--lm-s2);
}

/* The footer logo repeats the header lockup; it should read as a signature,
   not a second masthead. */
.lm-footer .lm-logo,
.lm-logo--lockup {
	background-image: var(--lm-logo-lockup);
	inline-size: 140px;
	block-size: 37px;
	margin-block-end: var(--lm-s3);
}

.lm-footer__addr {
	color: var(--lm-ink-muted);
	font-size: var(--lm-fs-sm);
}

.lm-credit { margin: 0; }
.lm-credit a { color: var(--lm-ink-muted); }

/* The Enamad seal is a third-party image that only resolves in production.
   Reserve its box and label the gap so a local or offline render looks
   deliberate rather than broken. */
.lm-seal { margin-block-start: var(--lm-s4); }

.lm-seal__box {
	position: relative;
	min-block-size: 96px;
}

.lm-seal__box:empty::after,
.lm-seal__box img[src=""]::after {
	content: attr(data-label);
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-muted);
}

/* --------------------------------------------------------------------------
   Header search panel
   -------------------------------------------------------------------------- */

.lm-topbar__end {
	display: inline-flex;
	align-items: center;
	gap: var(--lm-s4);
}

.lm-search-panel {
	display: grid;
	grid-template-rows: 0fr;
	background-color: var(--lm-surface);
	border-block-end: 1px solid var(--lm-border);
	transition: grid-template-rows var(--lm-dur-slow) var(--lm-ease-out);
}

/* `min-block-size: 0` is required — a grid item's automatic minimum size would
   otherwise refuse to shrink below its content and the 0fr row would not close. */
.lm-search-panel > * {
	overflow: hidden;
	min-block-size: 0;
}

.lm-search-panel.is-open {
	grid-template-rows: 1fr;
}

.lm-search-panel .lm-searchform {
	margin-block: var(--lm-s4);
	max-width: 640px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Search form
   -------------------------------------------------------------------------- */

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

.lm-searchform__field {
	position: relative;
	flex: 1 1 220px;
	display: flex;
	align-items: center;
}

/* The icon sits at the inline-start edge, and the input reserves room for it —
   both logical, so this is correct in either direction with no RTL branch. */
.lm-searchform__icon {
	position: absolute;
	inset-inline-start: var(--lm-s3);
	inline-size: 18px;
	block-size: 18px;
	color: var(--lm-ink-muted);
	pointer-events: none;
}

/* Two class selectors deliberately. The generic `input[type="search"]` rule in
   components.css scores 0,1,1 and loads later, so a single class here loses and
   the placeholder ends up printed underneath the icon. */
.lm-searchform .lm-searchform__input {
	inline-size: 100%;
	padding-inline-start: calc(var(--lm-s3) * 2 + 18px);
}

/* --------------------------------------------------------------------------
   Theme switch — system / light / dark
   -------------------------------------------------------------------------- */

.lm-themeswitch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: var(--lm-radius-pill);
	background-color: color-mix(in srgb, var(--lm-on-primary) 14%, transparent);
}

/* 28x28 in the topbar, which is a deliberate exception to this theme's 44px
   convention. WCAG 2.2 AA requires 24x24 CSS px, so 28px conforms; 44px is the
   stricter native-app guideline. The topbar is 34px tall and mouse-only — it is
   hidden below 1024px — and the drawer variant, which is the one a thumb
   actually uses, is a full 44px. */
.lm-themeswitch__btn {
	display: inline-grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	/* 0.8, not the 0.65 this started at. In dark mode the topbar inverts to a
	   light blue and these glyphs go dark, where 0.65 measured 3.76:1 — over
	   the 3:1 floor for a UI icon but under 4.5. 0.8 clears 4.5 in both themes
	   while still reading as unselected next to the active button. */
	opacity: 0.8;
	transition: background-color var(--lm-dur) var(--lm-ease),
	            opacity var(--lm-dur) var(--lm-ease);
}

.lm-themeswitch__btn:hover { opacity: 1; }

/* aria-pressed carries the state, so the selected style keys off it directly —
   the visual and the announced state can never drift apart. */
.lm-themeswitch__btn[aria-pressed="true"] {
	opacity: 1;
	background-color: color-mix(in srgb, var(--lm-on-primary) 90%, transparent);
	color: var(--lm-navy-deep);
}

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

/* In the drawer it sits on the page background rather than the navy topbar, so
   it needs the page's own ink instead of the on-primary inversion. */
.lm-themeswitch--drawer {
	display: flex;
	inline-size: 100%;
	justify-content: space-between;
	gap: var(--lm-s2);
	padding: var(--lm-s1);
	background-color: var(--lm-surface);
	border-radius: var(--lm-radius-sm);
	margin-block-end: var(--lm-s4);
}

.lm-themeswitch--drawer .lm-themeswitch__btn {
	flex: 1 1 auto;
	inline-size: auto;
	min-block-size: 44px;   /* was 40px — the only control left under the floor */
	border-radius: var(--lm-radius-sm);
	color: var(--lm-ink);
}

.lm-themeswitch--drawer .lm-themeswitch__btn[aria-pressed="true"] {
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
}

@media (max-width: 1023px) {
	/* One preference control is enough; the drawer carries it on small screens. */
	.lm-topbar .lm-themeswitch { display: none; }
}