/**
 * Lifted Live Menu
 *
 * Palette is the site's Astra global palette, so this drops into the existing
 * design rather than importing a second look:
 *   #017e9d teal · #b74e4f brick red · #0e2326 midnight teal
 *   #2a2a2a near-black · #f0ebe0 cream · #d9e5e9 pale blue · #a48c72 bronze
 *
 * Text colours here are the darker palette slots on light grounds, and cream on
 * the dark carousel, so every text/background pair clears WCAG AA. (The teal
 * phone link elsewhere on the site sits at 4.1:1 by Jubair's own decision —
 * that choice is left alone, and not copied into these new components.)
 *
 * Everything is scoped under .llm so nothing leaks into the rest of the theme.
 *
 * Type scale. The theme sets the root font at 15px, not the 16px most stylesheets
 * assume, so every rem here is 6.7% smaller than it looks. All sizes below are
 * quoted as they actually render on the site.
 *
 * v1.2 — the product name. It inherits the theme's heading face, Bebas Neue,
 * which ships in ONE weight. Asking for 700 made the browser synthesise bold by
 * smearing the outlines, and a smeared condensed face at 16.5px is the reason
 * the names were hard to read. Fixed three ways: real weight (400), bigger
 * (21px), and letter-spacing, which a condensed face needs at small sizes.
 */

/* ---- Filter-flash prevention (v1.4.4) -----------------------------------
 * PHP sets data-llm-init on <html> when the URL has filter params (?fly, ?cat,
 * ?new). This hides the scope immediately — before any paint — so the shopper
 * never sees all sections flash visible. filter.js removes the attribute once
 * apply() has run, fading the scope in with the correct sections already shown.
 * The !important guards against any other transition or opacity on .llm-menu. */
html[data-llm-init] [data-llm-scope] {
	opacity: 0 !important;
}

/* v2.3.6 — the tokens also live on Woo's cart/checkout bodies: those pages have no .llm
   wrapper, so every var() there fell back to nothing (invisible checkout button, unstyled
   chips — Jubair's 30 Sep screenshot). */
.llm,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	--llm-teal: #017e9d;
	--llm-teal-ink: #015f76;      /* darkened for text on light grounds */
	--llm-red: #b74e4f;
	--llm-red-ink: #983a3b;
	--llm-night: #0e2326;
	--llm-ink: #2a2a2a;
	--llm-cream: #f0ebe0;
	--llm-pale: #d9e5e9;
	--llm-bronze: #a48c72;
	--llm-bronze-ink: #6f5a45;
	/* v1.4.9 — open state of the View Categories accordion. Bronze lifted
	   toward the cream ground so the open panel reads as "lit up" without
	   losing contrast against --llm-bronze-ink text. */
	--llm-bronze-light: #e9ddcc;
	--llm-bronze-tint: #f3ece1;
	--llm-sand: #e8dccb;          /* Boarding: light brown, always with a dashed edge */
	--llm-radius: 12px;
	--llm-gap: 24px;
	--llm-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	color: var(--llm-ink);
	box-sizing: border-box;
}

.llm *,
.llm *::before,
.llm *::after {
	box-sizing: inherit;
}

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

/* ------------------------------------------------------------ shared bits */

.llm-empty {
	padding: 18px;
	background: var(--llm-pale);
	border-radius: var(--llm-radius);
	font-size: 1rem;
}

.llm-none {
	text-align: center;
	padding: 52px 22px;
	background: var(--llm-pale);
	border-radius: var(--llm-radius);
}

.llm-none h2,
.llm-none h3,
.llm-none h4 {
	margin: 0 0 12px;
	font-size: 1.6rem;
	color: var(--llm-night);
}

.llm-none p {
	margin: 0 auto 18px;
	max-width: 46ch;
	font-size: 1rem;
	color: #3d4a4d;
}

.llm-noresults {
	margin: 8px 0 0;
	padding: 34px 20px;
	text-align: center;
	font-size: 1.02rem;
	color: #3d4a4d;
	background: var(--llm-pale);
	border-radius: var(--llm-radius);
}

/* Where Buy Online goes. One line, one treatment, on the homepage, /menu/ and
   /deals/ — they used to be written in three places and had drifted into three
   different fonts. #3d4a4d on cream is 7.4:1.

   Flex rather than plain text so the planes keep even spacing when the line
   wraps on a phone, instead of a plane ending up stranded at the start of the
   second row. */
.llm .llm-handoff {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 10px;
	margin: 6px 0 22px;
	padding: 0 2px;
	font-family: var(--llm-mono);
	font-size: 0.8rem;          /* 12px */
	letter-spacing: 0.03em;
	line-height: 1.6;
	color: #3d4a4d;
	text-align: center;
}

.llm .llm-handoff-ico {
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 1;
	color: var(--llm-teal);
	/* Spacing comes from the flex gap now, so no margins to double it up. */
	margin: 0;
}

/* The button while the shop tab opens. */
.llm-btn.is-standby,
.llm-card:hover .llm-btn.is-standby {
	background: var(--llm-bronze-ink);
	color: #fff;
}

.llm-btn.is-standby .llm-ext {
	display: inline-block;
	animation: llm-taxi 1.6s ease-in-out 1;
}

@keyframes llm-taxi {
	0%   { transform: translateX(0); }
	60%  { transform: translateX(6px) translateY(-3px); }
	100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.llm-btn.is-standby .llm-ext { animation: none; }
}

/* ------------------------------------------------------- the filter bar */

/* Served with the `hidden` attribute and revealed by filter.js, so a visitor
   without JavaScript sees the whole menu rather than dead buttons.

   Shape: search + sort + Filters on top, because search is the fastest route to
   a named product and it was getting lost under the category row; categories
   next; the refinement panel last, folded away until asked for. */

.llm-filter {
	position: sticky;
	/* filter.js measures the site's sticky header and sets --llm-top, so the
	   bar parks underneath it instead of sliding behind it. */
	top: var(--llm-top, 0px);
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 0 15px;
	margin: 0 0 calc(var(--llm-gap) * 1.5);
	/* A sticky bar has to be opaque, and it has to match the ground it sits on
	   or it reads as a stripe. The site body is cream, so that is the fallback;
	   filter.js overwrites --llm-surface with whatever the page actually uses. */
	background: var(--llm-surface, #f0ebe0);
	border-bottom: 1px solid rgba(14, 35, 38, 0.5);
}

.llm-filter[hidden] {
	display: none;
}

.llm-filter-top {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

/* --- search --- */

/* The WRAPPER owns the look, not the input.
   Astra styles `input[type=search]` hard enough to beat a plain class rule —
   it was forcing 2px corners, a white fill and 12px of left padding, which
   dropped the placeholder straight under the magnifier. Rather than escalate a
   specificity fight that the next theme update could restart, the border,
   background and radius now live on the wrapper and the input is stripped bare
   inside it. The icon is a flex item too, so it cannot overlap the text however
   the input is padded. */

.llm-search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 340px;
	min-width: 220px;
	background: #eef3f5;
	border: 1px solid rgba(14, 35, 38, 0.5);
	/* 8px, the radius the site's own buttons use. */
	border-radius: 8px;
	padding: 0 8px 0 14px;
}

.llm-search:focus-within {
	background: #fff;
	border-color: var(--llm-teal-ink);
	box-shadow: inset 0 0 0 1px var(--llm-teal-ink);
	/* The focus ring belongs to the rounded wrapper. The generic
	   ".llm input:focus-visible" rule below used to draw a square 3px ring
	   around the inner <input> as well — two rectangles, one square. */
	outline: 3px solid var(--llm-teal);
	outline-offset: 2px;
}

.llm .llm-q:focus,
.llm .llm-q:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

.llm-q-icon {
	display: flex;
	flex: 0 0 auto;
	color: #3d4a4d;
	pointer-events: none;
}

.llm-q {
	flex: 1 1 auto;
	min-width: 0;
	/* 1.07rem = 16px. Never less: iOS Safari zooms the whole page when a text
	   field under 16px takes focus, which on a menu feels like a bug. */
	font-size: 1.07rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--llm-ink);
	/* Everything below is a reset, not a look — the wrapper draws the field.
	   !important because the theme's own input rules otherwise win. */
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 13px 0 !important;
	margin: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}

.llm-q:focus {
	outline: 0;
}

.llm-q::placeholder {
	color: #3d4a4d;
	font-weight: 600;
	opacity: 1;
}

/* The browser's own search clear button and ours would sit on top of each
   other, so the native one goes. */
.llm-q::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.llm-q-clear {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	font-size: 1.25rem;
	line-height: 1;
	color: #3d4a4d;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.llm-q-clear:hover {
	background: rgba(14, 35, 38, 0.1);
	color: var(--llm-night);
}

.llm-q-clear[hidden] {
	display: none;
}

/* --- sort --- */

.llm-sort {
	display: flex;
	flex: 0 1 auto;
}

.llm-sort-select {
	font-family: var(--llm-mono);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--llm-night);
	background: #eef3f5;
	border: 1px solid rgba(14, 35, 38, 0.5);
	border-radius: 8px;
	padding: 12px 34px 12px 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* Chevron drawn in the border colour, so no image request. */
	background-image: linear-gradient(45deg, transparent 50%, #0e2326 50%), linear-gradient(135deg, #0e2326 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* --- the Filters toggle --- */

.llm-refine {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--llm-mono);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--llm-night);
	background: #eef3f5;
	border: 1px solid rgba(14, 35, 38, 0.5);
	border-radius: 8px;
	padding: 12px 16px;
	cursor: pointer;
	white-space: nowrap;
}

.llm-refine:hover,
.llm-refine.is-open {
	background: var(--llm-night);
	border-color: var(--llm-night);
	color: var(--llm-cream);
}

.llm-refine-icon {
	display: flex;
}

.llm-refine-count {
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 0.78rem;
	background: var(--llm-red-ink);
	color: #fff;
}

.llm-refine-count[hidden] {
	display: none;
}

/* --- clear filters (one tap back to the whole shelf) --- */

.llm-reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--llm-mono);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--llm-red-ink);
	background: transparent;
	border: 1px solid var(--llm-red-ink);
	border-radius: 8px;
	padding: 12px 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease;
}

.llm-reset:hover,
.llm-reset:focus-visible {
	background: var(--llm-red-ink);
	color: #fff;
}

.llm-reset[hidden] {
	display: none;
}

.llm-reset-x {
	font-size: 1.2em;
	line-height: 1;
}

/* --- four ways to fly --- */

/* The first question, so it gets the biggest chips: a name, a one-line
   "when", and a count. Colours are the four occasions' own — the same four
   the card badge uses, so the chip you pressed and the badge on the card match. */

.llm-fly {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.llm-fly-chip {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	position: relative;
	min-width: 150px;
	padding: 10px 40px 10px 14px;
	font-family: var(--llm-mono);
	text-align: left;
	color: var(--llm-night);
	background: #fff;
	border: 1px solid rgba(14, 35, 38, 0.5);
	border-left-width: 5px;
	border-radius: 8px;
	cursor: pointer;
	touch-action: manipulation;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.llm-fly-name {
	font-size: 0.95rem;         /* 14.25px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.1;
}

.llm-fly-desc {
	font-family: "Geist", system-ui, sans-serif;
	font-size: 0.82rem;         /* 12.3px */
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #3d4a4d;
	line-height: 1.2;
}

.llm-fly-chip .llm-count {
	position: absolute;
	top: 9px;
	right: 10px;
}

/* One accent per occasion, on the left edge when resting, filling when on. */
/* v1.3.5 palette (Jubair): Take Off = the site red, Landing = the blue,
   Cruise = bronze, Boarding = light brown with the dashed edge. */
.llm-fly-chip.is-takeoff  { border-left-color: var(--llm-red); }
.llm-fly-chip.is-cruise   { border-left-color: var(--llm-bronze); }
.llm-fly-chip.is-landing  { border-left-color: var(--llm-teal-ink); }
.llm-fly-chip.is-boarding { border-left-color: var(--llm-bronze-ink); border-left-style: dashed; }

.llm-fly-chip:hover {
	background: var(--llm-pale);
}

.llm-fly-chip.is-on,
.llm-fly-chip.is-on .llm-fly-desc {
	color: var(--llm-cream);
}

.llm-fly-chip.is-on {
	background: var(--llm-night);
	border-color: var(--llm-night);
}

.llm-fly-chip.is-on.is-takeoff  { background: var(--llm-red);      border-color: var(--llm-red); }
.llm-fly-chip.is-on.is-cruise   { background: var(--llm-bronze);   border-color: var(--llm-bronze); }
.llm-fly-chip.is-on.is-landing  { background: var(--llm-teal-ink); border-color: var(--llm-teal-ink); }
.llm-fly-chip.is-on.is-boarding { background: var(--llm-sand);     border-color: var(--llm-bronze-ink); border-left-style: dashed; }
/* bronze and sand are light grounds: dark text, like the site's bronze buttons */
.llm-fly-chip.is-on.is-cruise,
.llm-fly-chip.is-on.is-cruise .llm-fly-desc,
.llm-fly-chip.is-on.is-boarding,
.llm-fly-chip.is-on.is-boarding .llm-fly-desc { color: var(--llm-night); }

.llm-fly-chip.is-on .llm-count {
	/* Darker, not lighter: a cream overlay on the teal and bronze chips lifted
	   the ground to 3.9:1 and 3.5:1 under the cream count — both fail AA. A
	   black overlay goes the other way (8.3:1 and 7.6:1). */
	background: rgba(0, 0, 0, 0.22);
	color: var(--llm-cream);
}

.llm-fly-chip.is-on.is-boarding .llm-count {
	background: rgba(14, 35, 38, 0.12);
	color: var(--llm-night);
}

.llm-fly-chip.is-on.is-cruise .llm-count {
	/* a dark overlay on bronze lands at 4.2:1 under dark text; lightening it goes to 7:1 */
	background: rgba(255, 255, 255, 0.35);
	color: var(--llm-night);
}

/* --- "show sold out" switch, sits at the end of the category row --- */

.llm-showout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	font-family: var(--llm-mono);
	font-size: 0.84rem;
	letter-spacing: 0.03em;
	color: #3d4a4d;
	cursor: pointer;
	white-space: nowrap;
}

.llm-showout input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--llm-night);
}

/* Sold-out cards are in the HTML (crawlers see them) but hidden until asked. */
.llm-hide-out [data-llm-out] {
	display: none;
}

/* --- category chips --- */

.llm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	scroll-behavior: smooth;
}

/* NOTE: the active chip is moved to the front of the row on PHONES ONLY —
   see the max-width block below. On desktop every chip is already on screen,
   so reordering just makes the row jump under the cursor on every click. */

.llm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--llm-mono);
	font-size: 0.9rem;        /* 13.5px */
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--llm-night);
	background: var(--llm-pale);
	/* The pale fill is only 1.08:1 against the site's cream ground, so the
	   outline is the only thing saying "this is a button". 0.5 alpha puts it at
	   3.27:1 against the page and 3.03:1 against its own fill — both over the
	   3:1 WCAG 1.4.11 wants for a control boundary. */
	border: 1px solid rgba(14, 35, 38, 0.5);
	border-radius: 999px;
	padding: 9px 15px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.llm-chip:hover {
	background: #c5d8de;
	border-color: rgba(14, 35, 38, 0.72);
}

.llm-chip.is-on {
	background: var(--llm-night);
	border-color: var(--llm-night);
	color: var(--llm-cream);
}

.llm-count {
	font-size: 0.8rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(14, 35, 38, 0.1);
	color: #24383c;
}

.llm-chip.is-on .llm-count,
.llm-fchip.is-on .llm-count {
	background: rgba(240, 235, 224, 0.2);
	color: var(--llm-cream);
}

/* --- the refinement panel --- */

.llm-facets {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 26px;
	padding: 16px 18px;
	background: rgba(14, 35, 38, 0.05);
	border: 1px solid rgba(14, 35, 38, 0.5);
	border-radius: 10px;
}

.llm-facets[hidden] {
	display: none;
}

.llm-facet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.llm-facet-brand {
	flex: 1 1 100%;
}

.llm-facet-legend {
	float: none;
	padding: 0 4px 0 0;
	font-family: var(--llm-mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
}

.llm-facet-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.llm-fchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--llm-mono);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--llm-night);
	background: #fff;
	/* 0.6, not the 0.5 used elsewhere: these sit on the panel's own tinted
	   ground, where 0.5 came out at 2.47:1 — under the 3:1 a control outline
	   needs. At 0.6 it is 3.36:1 against the panel and 4.38:1 against the fill. */
	border: 1px solid rgba(14, 35, 38, 0.6);
	border-radius: 999px;
	padding: 7px 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.llm-fchip:hover {
	background: var(--llm-pale);
}

.llm-fchip.is-on {
	background: var(--llm-teal-ink);
	border-color: var(--llm-teal-ink);
	color: #fff;
}

.llm-clearall {
	margin-left: auto;
	align-self: center;
	font-family: var(--llm-mono);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--llm-red-ink);
	background: transparent;
	border: 1px solid var(--llm-red-ink);
	border-radius: 8px;
	padding: 8px 13px;
	cursor: pointer;
}

.llm-clearall:hover {
	background: var(--llm-red-ink);
	color: #fff;
}

.llm-clearall[hidden] {
	display: none;
}

/* --------------------------------------------------- category sections */

.llm-cat {
	margin: 0 0 calc(var(--llm-gap) * 2.4);
	scroll-margin-top: 110px;
}

.llm-cat[hidden] {
	display: none;
}

.llm-cat-title {
	display: flex;
	align-items: baseline;
	gap: 14px;
	/* Was 1.05rem — barely larger than body copy, which is why the categories
	   read as labels rather than as the structure of the page. */
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);
	line-height: 1.1;
	/* Same single-weight face as the product names — 400, not a faked bold. */
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--llm-night);
	border-bottom: 3px solid var(--llm-bronze);
	padding-bottom: 12px;
	margin: 0 0 calc(var(--llm-gap) * 1.1);
}

.llm-cat-name {
	/* Not flex:1 — letting the name grow pushed the count to the far right of a
	   1200px heading, where it read as a stray number rather than as part of
	   the title. */
	flex: 0 1 auto;
	min-width: 0;
}

.llm-cat-count {
	flex: 0 0 auto;
	position: relative;
	top: -0.15em;
	font-family: var(--llm-mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--llm-bronze-ink);
	background: rgba(164, 140, 114, 0.18);
	border-radius: 999px;
	padding: 4px 11px;
}

/* --------------------------------------------------------------- the grid */

.llm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: var(--llm-gap);
}

/* NOTE (2026-09-18): v1.5.2 briefly raised the desktop minimum to 300px, which
   capped the grid at four columns and made the cards bigger on wide screens.
   Reverted at the owner's request — five columns at 1400px is the preferred
   density. Do not "fix" this again without asking. */

/* --------------------------------------------------------------- the card */

.llm-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	/* A white card on the cream page ground is 1.19:1 — the border is doing the
	   work of separating them, so it is not as faint as it would be on white. */
	border: 1px solid rgba(14, 35, 38, 0.26);
	border-radius: var(--llm-radius);
	overflow: hidden;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.llm-card[hidden] {
	display: none;
}

.llm-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(14, 35, 38, 0.15);
	border-color: rgba(14, 35, 38, 0.4);
}

.llm-card.is-out {
	opacity: 0.72;
}

/* The photo is a link to the same product page as the button. */
.llm-media-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.llm-media {
	position: relative;
	aspect-ratio: 1 / 1;
	/* White, not cream. The site body IS cream, so a cream photo well made the
	   top half of every card dissolve into the page. White also matches how the
	   OCS product shots are cut out. */
	background: #fff;
	border-bottom: 1px solid rgba(14, 35, 38, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.llm-media .llm-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	display: block;
	transition: transform 0.22s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.llm-card:hover .llm-img {
		transform: scale(1.04);
	}
}

.llm-noimg {
	font-family: var(--llm-mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
	border: 1px dashed var(--llm-bronze);
	border-radius: 6px;
	padding: 11px 15px;
	text-align: center;
}

.llm-flag {
	position: absolute;
	top: 10px;
	font-family: var(--llm-mono);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 5px;
}

.llm-flag-sale {
	left: 10px;
	background: var(--llm-red-ink);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* The percentage sits in a darker chip inside the SAVE tag, so the two read
   as one badge but the number still stands out at a glance. */
.llm-pct {
	/* Darkened rather than lightened: a white overlay on the brick red lifts the
	   background to 4.31:1 against white text, which fails AA. Going darker
	   moves it the other way. */
	background: rgba(0, 0, 0, 0.26);
	border-radius: 3px;
	padding: 1px 5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.llm-flag-out {
	right: 10px;
	background: var(--llm-night);
	color: var(--llm-cream);
}

/* A sale card earns a red edge so the deals grid reads as a set of deals
   rather than an ordinary grid that happens to have red text in it. */
.llm-card.is-sale {
	border-color: rgba(152, 58, 59, 0.45);
	box-shadow: inset 0 0 0 1px rgba(152, 58, 59, 0.14);
}

.llm-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 17px 17px;
	gap: 9px;
}

.llm-brand {
	font-family: var(--llm-mono);
	font-size: 0.84rem;       /* 12.6px */
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
	margin: 0;
}

.llm-title {
	/* 1.4rem = 21px at the theme's 15px root, up from 16.5px.
	   font-weight 400 is deliberate: Bebas Neue has no bold, so 700 was being
	   faked by the browser and that is what made the names look muddy.
	   The tracking is what a condensed face needs to stay readable this small. */
	font-size: 1.4rem;
	line-height: 1.22;
	font-weight: 400;
	letter-spacing: 0.04em;
	margin: 0;
	color: var(--llm-night);
}

.llm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.llm-badge {
	font-family: var(--llm-mono);
	font-size: 0.84rem;       /* 12.6px */
	letter-spacing: 0.03em;
	padding: 4px 9px;
	border-radius: 5px;
	background: var(--llm-pale);
	color: #24383c;
	white-space: nowrap;
}

.llm-badge-thc {
	background: rgba(1, 126, 157, 0.14);
	color: var(--llm-teal-ink);
	font-weight: 600;
}

.llm-badge-cbd {
	background: rgba(164, 140, 114, 0.2);
	color: var(--llm-bronze-ink);
	font-weight: 600;
}

/* Occasion badge — "Landing · Indica". Filled, so it leads the row; the same
   four colours as the chips above the grid. */
.llm-badge-occ {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.llm-badge-occ.is-takeoff  { background: var(--llm-red);      color: #fff; }
.llm-badge-occ.is-cruise   { background: var(--llm-bronze);   color: var(--llm-night); }
.llm-badge-occ.is-landing  { background: var(--llm-teal-ink); color: #fff; }
.llm-badge-occ.is-boarding { background: var(--llm-sand);     color: var(--llm-night); border: 1px dashed var(--llm-bronze-ink); }

/* v1.9.7 — a CBD product with no occasion (rare) leads with a teal-ink CBD chip. */
.llm-badge-cbdflag { background: var(--llm-teal-ink); color: #fff; font-weight: 700; letter-spacing: 0.06em; }

/* NEW — shown in the flag corner only when there is no deal flag. */
.llm-flag-new {
	left: 10px;
	/* Skyline Mist with dark text: the teal-ink it used to be is now Landing's colour. */
	background: var(--llm-pale);
	color: var(--llm-night);
}

/* Sizes on a multi-size card: real links, each with its own price. */
.llm-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.llm-size {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--llm-mono);
	font-size: 0.84rem;
	text-decoration: none;
	color: var(--llm-night);
	background: #fff;
	border: 1px solid rgba(14, 35, 38, 0.5);
	border-radius: 6px;
	padding: 5px 9px;
	transition: background 0.14s ease, border-color 0.14s ease;
}

.llm-size:hover {
	background: var(--llm-pale);
	border-color: var(--llm-night);
}

.llm-size.is-lead {
	border-color: var(--llm-night);
	box-shadow: inset 0 0 0 1px var(--llm-night);
}

.llm-size-name {
	font-weight: 700;
}

.llm-size-price {
	color: #3d4a4d;
}

.llm-size.is-sale .llm-size-price {
	color: var(--llm-red-ink);
	font-weight: 700;
}

.llm-size.is-out {
	opacity: 0.6;
}

.llm-size.is-out .llm-size-price {
	text-decoration: line-through;
}

/* High THC — the bottom of the stated range is over 28%.
   Tinted and outlined rather than solid red: the solid brick red is already
   spoken for by the SAVE flag on the photo, and two solid reds on one card
   would read as two of the same thing. */
.llm-badge-thc.is-high {
	background: rgba(183, 78, 79, 0.16);
	color: var(--llm-red-ink);
	/* 0.70, not 0.55: at 0.55 the outline sat at 2.99:1 against the white card
	   and 2.41:1 against its own fill, both under the 3:1 a control-level edge
	   needs. 0.70 clears both. */
	border: 1px solid rgba(152, 58, 59, 0.7);
	font-weight: 700;
}

.llm-desc {
	font-size: 1rem;          /* 15px */
	line-height: 1.55;
	color: #474747;
	margin: 0;
}

.llm-price {
	margin: auto 0 0;
	padding-top: 6px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
}

.llm-now {
	font-size: 1.55rem;       /* 23px */
	font-weight: 700;
	line-height: 1.1;
	color: var(--llm-night);
}

.is-sale .llm-now {
	color: var(--llm-red-ink);
}

.llm-was {
	font-size: 1.05rem;       /* 15.75px */
	color: #656565;
}

.llm-save {
	flex-basis: 100%;
	font-family: var(--llm-mono);
	font-size: 0.9rem;        /* 13.5px */
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--llm-red-ink);
}

.llm-from {
	font-family: var(--llm-mono);
	font-size: 0.78rem;
	color: var(--llm-bronze-ink);
	flex-basis: 100%;
}

.llm-promo {
	font-family: var(--llm-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--llm-red-ink);
	margin: 0;
}

.llm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-align: center;
	font-family: var(--llm-mono);
	font-size: 0.9rem;        /* 13.5px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--llm-cream);
	background: var(--llm-night);
	/* 8px is the radius the site's own buttons use. */
	border-radius: 8px;
	padding: 13px 15px;
	margin-top: 6px;
	transition: background 0.15s ease;
}

.llm-btn:hover,
.llm-btn:focus-visible,
.llm-card:hover .llm-btn {
	background: var(--llm-teal-ink);
	color: #fff;
}

.llm-ext {
	/* Was 0.9em — about 12px next to 13.5px button text, too small to read as
	   "this opens somewhere else". Sized and centred as a flex item so the
	   glyph sits level with the E in ONLINE rather than on the baseline. */
	display: inline-flex;
	align-items: center;
	font-size: 1.25em;
	line-height: 1;
	height: 1em;
	align-self: center;
	opacity: 1;
}

.llm-btn.is-muted {
	background: #5c6b6e;
}

/* -------------------------------------------------------- the carousel */

/* Terminal-style strip: the one thing Jubair liked from the Gemini mockup. */

.llm-carousel {
	background: var(--llm-night);
	border-radius: var(--llm-radius);
	padding: 26px 0 20px;
	position: relative;
}

.llm-car-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 26px 18px;
}

.llm-car-title {
	font-family: var(--llm-mono);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--llm-cream);
	margin: 0;
}

.llm-prompt {
	color: var(--llm-bronze);
	margin-right: 6px;
}

/* Blinking caret, but only for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	.llm-car-title::after {
		content: "_";
		color: var(--llm-bronze);
		animation: llm-blink 1.15s step-end infinite;
	}
	@keyframes llm-blink {
		50% { opacity: 0; }
	}
}

.llm-car-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* rows="2": the continuation band under the first one */
.llm-carousel-more {
	margin-top: 14px;
}

.llm-car-title-cont {
	color: #b9c6c8;
}

.llm-car-title-cont::after {
	content: none !important;
}

.llm-carousel.llm-empty-row {
	display: none;
}

.llm-car-btn {
	font-family: var(--llm-mono);
	font-size: 1.15rem;
	line-height: 1;
	/* inline-flex, not the default block: with line-height alone the arrow sits
	   on its text baseline and reads a couple of pixels high inside the square.
	   Centring both axes puts the glyph in the middle of the box. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px is the smallest comfortable touch target, and these are the only
	   controls in the band a thumb has to hit. */
	width: 44px;
	height: 44px;
	padding: 0;
	box-sizing: border-box;
	/* Bronze, to match the scrollbar thumb under the same row — those are the
	   two things telling you the row scrolls, so they should read as one idea. */
	color: var(--llm-bronze);
	background: transparent;
	border: 1.5px solid var(--llm-bronze);
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* background, colour AND border are all declared here. Astra's own inline
   button:hover / button:focus rules set all three at (0,1,1) and outrank a
   single class, which is what left other buttons on this site flashing red —
   see astra-button-repaint-complete-fix. :hover also latches after a tap on
   iOS, so :active carries the same values instead of relying on :not(:hover). */
.llm-car-btn:hover:not(:disabled),
.llm-car-btn:active:not(:disabled) {
	background: var(--llm-bronze);
	border-color: var(--llm-bronze);
	color: var(--llm-night);
}

.llm-car-btn:disabled {
	opacity: 0.34;
	cursor: default;
}

/* Everything already fits, so the arrows have nothing to do. Set by the JS. */
.llm-carousel.llm-no-scroll .llm-car-nav {
	display: none;
}

/* The track is a scroll-snap list, so it works with JavaScript switched off. */
.llm-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(235px, 255px);
	gap: 16px;
	overflow-x: auto;
	/* The track must be the containing block for the cards' absolutely
	   positioned screen-reader text. Without this those spans sit at each
	   off-screen card's static position relative to .llm-carousel, and the
	   PAGE grows a horizontal scrollbar (measured: 2440px document on a
	   1280px viewport). */
	position: relative;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--llm-bronze) transparent;
}

/* Padding lives on a .llm .llm-track selector: the generic ".llm ul" reset
   (padding:0) outranks a bare .llm-track, which is why the cards used to sit
   flush against the band's edge and right on top of the scroll line. */
.llm .llm-track {
	padding: 4px 26px 22px;
	scroll-padding-inline: 26px;
}

.llm-track > .llm-card {
	scroll-snap-align: start;
	background: #142d31;
	border-color: rgba(240, 235, 224, 0.16);
}

.llm-track .llm-title,
.llm-track .llm-now {
	color: var(--llm-cream);
}

.llm-track .llm-desc,
.llm-track .llm-was {
	color: #b9c6c8;
}

.llm-track .llm-brand,
.llm-track .llm-from {
	color: var(--llm-bronze);
}

.llm-track .llm-badge {
	background: rgba(240, 235, 224, 0.12);
	color: var(--llm-cream);
}

.llm-track .llm-badge-thc {
	background: rgba(217, 229, 233, 0.2);
	color: #cfe6ed;
}

.llm-track .llm-badge-cbd {
	background: rgba(164, 140, 114, 0.28);
	color: #e0cdb6;
}

/* Same four occasion colours on the dark carousel cards. The generic
   .llm-track .llm-badge rule above would otherwise grey them out. */
.llm-track .llm-badge-occ.is-takeoff  { background: var(--llm-red);      color: #fff; border: 1px solid rgba(240, 235, 224, 0.45); }
.llm-track .llm-badge-occ.is-cruise   { background: var(--llm-bronze);   color: var(--llm-night); }
.llm-track .llm-badge-occ.is-landing  { background: var(--llm-teal-ink); color: #fff; border: 1px solid rgba(240, 235, 224, 0.45); }
.llm-track .llm-badge-occ.is-boarding { background: var(--llm-sand);     color: var(--llm-night); border: 1px dashed var(--llm-bronze-ink); }

.llm-track .llm-badge-thc.is-high {
	background: rgba(240, 163, 164, 0.2);
	color: #f0a3a4;
	border-color: rgba(240, 163, 164, 0.6);
}

.llm-track .is-sale .llm-now,
.llm-track .llm-save,
.llm-track .llm-promo {
	color: #f0a3a4;
}

.llm-track .llm-btn {
	background: var(--llm-cream);
	color: var(--llm-night);
}

.llm-track .llm-btn:hover,
.llm-track .llm-btn:focus-visible,
.llm-track .llm-card:hover .llm-btn {
	background: #fff;
	color: var(--llm-night);
}

.llm-track::-webkit-scrollbar {
	height: 7px;
}

.llm-track::-webkit-scrollbar-thumb {
	background: var(--llm-bronze);
	border-radius: 99px;
}

.llm-car-more {
	margin: 20px 0 0;
	padding: 0 26px;
	text-align: center;
}

/* The carousel's one call to action. Same recipe as the site's Spectra
   buttons (Bebas Neue 20px, 2px tracking, 8px radius), in the site red. Was a
   small underlined mono link that read as a footnote.

   v1.6.6 — wider (34px of side padding, up from 22) and the arrow is now the
   Lifted paper plane. Flex with a gap rather than inline-block, so the label
   and the plane share one baseline and the plane is vertically centred on the
   cap height instead of sitting on the text baseline. */
.llm-car-more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: "Bebas Neue", var(--llm-mono);
	font-weight: 400;
	font-size: 1.34rem;       /* 20px */
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	background: var(--llm-red);
	text-decoration: none;
	border: 0;
	border-radius: 8px;
	padding: 13px 34px;
	transition: background 0.15s ease;
}

.llm-car-more a:hover,
.llm-car-more a:focus-visible {
	color: #fff;
	background: #a24748;
}

/* The plane itself. `flex: 0 0 auto` so it never squashes when the label wraps
   on a narrow phone, and a nudge down of half a pixel because the glyph's own
   mass sits slightly high inside its viewBox. */
.llm-car-more-i {
	flex: 0 0 auto;
	width: 22px;
	height: 15px;
	transform: translateY(0.5px);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Taking off: forward, a little up, and a slight bank — the same −12° the
   accordion's plane uses when it opens, so the motion reads as one idea across
   the site. Driven from the link's hover/focus, not the svg's, or it would only
   fire when the pointer was over the 22px glyph itself. */
.llm-car-more a:hover .llm-car-more-i,
.llm-car-more a:focus-visible .llm-car-more-i {
	transform: translate(7px, -3px) rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
	.llm-car-more-i {
		transition: none;
	}
	.llm-car-more a:hover .llm-car-more-i,
	.llm-car-more a:focus-visible .llm-car-more-i {
		transform: translateY(0.5px);
	}
}

/* Visible focus everywhere, on both grounds. */
.llm a:focus-visible,
.llm button:focus-visible,
.llm input:focus-visible,
.llm .llm-track:focus-visible {
	outline: 3px solid var(--llm-teal);
	outline-offset: 2px;
}
/* Safari/WebKit keeps the browser's default focus ring after a tap (non-keyboard focus).
   Suppress it everywhere inside .llm — keyboard users still see the :focus-visible ring above. */
.llm a:focus:not(:focus-visible),
.llm button:focus:not(:focus-visible),
.llm input:focus:not(:focus-visible),
.llm .llm-track:focus:not(:focus-visible) {
	outline: 0;
}

.llm-carousel a:focus-visible,
.llm-carousel button:focus-visible,
.llm-carousel .llm-track:focus-visible {
	outline-color: var(--llm-pale);
}

/* Screen-reader-only text, in case the theme does not define it. */
.llm .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 720px) {
	.llm {
		--llm-gap: 16px;
	}

	.llm-grid {
		/* Two up, always. One product per row wastes the screen; three is
		   unreadable at this type size. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.llm-body {
		padding: 13px 13px 14px;
		gap: 8px;
	}

	/* Deliberately barely smaller than desktop. The old sheet dropped product
	   names to 14.7px here, which is the wrong way round: the phone is where
	   small type hurts most. */
	.llm-title {
		font-size: 1.28rem;   /* 19.2px */
	}

	.llm-desc {
		/* Was display:none. Kept, just tightened — the blurb is how someone
		   decides between two strains they do not recognise. */
		font-size: 0.95rem;   /* 14.25px */
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.llm-now {
		font-size: 1.4rem;    /* 21px */
	}

	.llm-badge,
	.llm-brand {
		font-size: 0.8rem;    /* 12px */
	}

	.llm-btn {
		font-size: 0.84rem;   /* 12.6px */
		letter-spacing: 0.06em;
		padding: 12px 10px;
	}

	.llm-filter {
		gap: 8px;           /* was 10px; saves ~2px per gap between rows */
		padding: 9px 0 10px; /* was 11px 0 12px; saves 4px */
		/* Not sticky on phones: with the four-ways row the bar is ~310px tall,
		   and pinning that would leave a third of the screen for products. */
		position: static;
	}

	/* Safari/WebKit fix: keep the scroll container (.llm-chips-wrap) separate
	   from the CSS Grid layout container (.llm-chips). WebKit incorrectly
	   computes a grid element's intrinsic scroll width when overflow-x:auto and
	   display:grid live on the same element, producing a row that looks full but
	   cannot be scrolled. Separating them gives WebKit a concrete min-width to
	   measure for the scroll track. */
	.llm-chips-wrap {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		width: 100%;
	}

	.llm-chips-wrap::-webkit-scrollbar {
		display: none;
	}

	/* Soft fade on the right edge while there is more to scroll to; filter.js
	   toggles the class on the scroll container now. */
	.llm-chips-wrap.has-more {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.15));
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), rgba(0, 0, 0, 0.15));
	}

	/* The chip row scrolls sideways rather than wrapping into four lines and
	   pushing the products off the screen. */
	.llm-chips {
		/* Two rows that scroll sideways together: half the scrolling of one
		   row, and the second row peeking out says "there is more" on its own. */
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: auto auto;
		grid-auto-columns: max-content;
		align-items: center;
		gap: 8px;
		/* min-width:max-content lets WebKit measure the grid's true intrinsic
		   width independently of the scroll container above it. */
		min-width: max-content;
		padding: 0 24px 2px 0;
	}

	.llm-chips > * {
		scroll-snap-align: start;
	}

	/* Active category jumps to the front so it is the first thing you see
	   instead of something off to the right. filter.js animates the move. */
	.llm-chip.is-on {
		order: -1;
	}

	/* Tighter chip buttons on mobile to recover filter-bar height. */
	.llm-chip {
		padding: 8px 13px; /* was 9px 15px */
	}

	/* Keep old selectors as no-ops for one release in case of CDN caching. */
	.llm-chips.has-more {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.llm-chips::-webkit-scrollbar {
		display: none;
	}

	.llm-fly {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.llm-fly-chip {
		min-width: 0;
		padding: 8px 34px 8px 12px; /* was 9px; saves 2px × 2 rows = 4px */
	}

	.llm-fly-chip[data-llm-fly="all"] {
		grid-column: 1 / -1;
	}

	.llm-showout {
		margin-left: 0;
		flex: 0 0 auto;
	}

	/* Search takes the whole first line; sort and Filters share the second. */
	.llm-search {
		flex: 1 1 100%;
		order: -1;
	}

	.llm-sort,
	.llm-sort-select {
		flex: 1 1 auto;
		min-width: 0;
	}

	.llm-refine {
		flex: 0 0 auto;
	}

	.llm-facets {
		gap: 12px;
		padding: 14px;
	}

	.llm-facet {
		flex: 1 1 100%;
	}

	.llm-clearall {
		margin-left: 0;
		flex: 1 1 100%;
	}

	.llm-car-head,
	.llm-car-more {
		padding-inline: 16px;
	}

	.llm .llm-track {
		padding-inline: 16px;
		scroll-padding-inline: 16px;
		grid-auto-columns: minmax(200px, 76vw);
	}
}

@media print {
	.llm-carousel,
	.llm-filter,
	.llm-btn {
		display: none;
	}
	.llm-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------------------------------------------------
   Section rail (1.3.6) — the column of dots on the right edge, desktop only.
   Dark translucent capsule so it reads on cream and night sections alike;
   the active dot is Skyline Mist. Labels appear on hover / keyboard focus.
   ------------------------------------------------------------------------ */
.llm.llm-rail { margin: 0; padding: 0; background: none; width: auto; max-width: none; }
.llm-rail { position: fixed; right: 18px; top: 50%; z-index: 60;
	transform: translateY(-50%) translateX(10px); opacity: 0; pointer-events: none;
	transition: opacity .25s ease, transform .25s ease; }
.llm-rail.is-on { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.llm-rail ol { list-style: none; margin: 0; padding: 8px 5px; display: flex; flex-direction: column; gap: 4px;
	background: rgba(14, 35, 38, .74); border: 1px solid rgba(240, 235, 224, .22); border-radius: 999px;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.llm-rail li { margin: 0; padding: 0; list-style: none; }
.llm-rail-dot { position: relative; display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; text-decoration: none; color: var(--llm-cream); }
.llm-rail-dot-i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(240, 235, 224, .5);
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.llm-rail-dot:hover .llm-rail-dot-i, .llm-rail-dot:focus-visible .llm-rail-dot-i { background: var(--llm-cream); transform: scale(1.3); }
.llm-rail-dot[aria-current="true"] .llm-rail-dot-i { background: var(--llm-pale); transform: scale(1.55);
	box-shadow: 0 0 0 3px rgba(217, 229, 233, .28); }
.llm-rail-dot:focus-visible { outline: 2px solid var(--llm-pale); outline-offset: 1px; }
.llm-rail-label { position: absolute; right: calc(100% + 12px); top: 50%; white-space: nowrap;
	transform: translateY(-50%) translateX(6px); opacity: 0; pointer-events: none;
	background: var(--llm-night); color: var(--llm-cream); border: 1px solid rgba(240, 235, 224, .25); border-radius: 6px;
	padding: 6px 10px; font: 500 12px/1 var(--llm-mono); letter-spacing: .08em; text-transform: uppercase;
	transition: opacity .15s ease, transform .15s ease; }
.llm-rail-dot:hover .llm-rail-label, .llm-rail-dot:focus-visible .llm-rail-label { opacity: 1; transform: translateY(-50%); }
/* v1.5.2: sat 5px left of the dots. `.llm-rail li { margin: 0 }` above is
   specificity (0,1,1) and was beating `.llm-rail-sep` (0,1,0), killing the
   `auto` side margins — so in the column flex container the 12px bar fell to
   the start edge instead of centring. align-self is immune to that margin
   reset, which is why it is used here rather than restoring the margin. */
.llm-rail .llm-rail-sep { width: 12px; height: 1px; background: rgba(240, 235, 224, .3);
	margin: 3px 0; align-self: center; }
.llm-rail-link .llm-rail-dot-i { width: 0; height: 0; background: none; box-shadow: none; }
/* v1.5.4: the "Today's Deals" arrow was 12px — smaller than the 7px dots read
   at a glance, and the only item in the rail that leaves the page, so it should
   be the one that stands out. Bumped to 17px (the .llm-rail-dot box is 22px, so
   it still clears its own bounds) and to full cream at rest rather than 75%. */
.llm-rail-link::before { content: "\2197"; font: 700 17px/1 var(--llm-mono); color: var(--llm-cream); transition: color .2s ease, transform .2s ease; }
.llm-rail-link:hover::before, .llm-rail-link:focus-visible::before { color: #fff; transform: translate(1px, -1px); }
/* toggle button — only drawn on phones */
.llm-rail-toggle { display: none; }
@media (max-width: 1099px) {
	/* Bottom-left, the mirror of Astra's scroll-to-top button bottom-right:
	   same 44px round, same 16px from the edges (the theme button is sized to
	   match in the site's Additional CSS).
	   v1.5.1: bronze, not red. This rail is a CATEGORY jump list, so it now
	   wears the same bronze + paper plane as the View Categories accordion —
	   the two category controls should read as one family. Red is kept for
	   sale flags and Take Off badges, where it means something. */
	.llm-rail { right: auto; left: 16px; bottom: 16px; top: auto; transform: translateY(10px); }
	.llm-rail.is-on { transform: none; }
	/* v1.5.2: 2px bronze-ink ring. Bronze on the cream page was close enough in
	   value that the button dissolved into the background; the darker ring is
	   what gives it an edge. box-sizing keeps the outer size at 44px so it
	   still mirrors Astra's scroll-to-top button opposite it. */
	.llm-rail-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
		box-sizing: border-box;
		border-radius: 50%; border: 2px solid var(--llm-bronze-ink); background: var(--llm-bronze); color: #fff; cursor: pointer;
		-webkit-appearance: none; appearance: none;
		box-shadow: 0 4px 14px rgba(14, 35, 38, .28); transition: background .2s ease, transform .2s ease, border-color .2s ease; }
	/* border-color is required here, not just on :focus. On a touch screen
	   :hover LATCHES after a tap, so the `:focus:not(:hover)` guard never
	   matches and Astra's `button:hover` keeps painting the edge red - which is
	   why the ring stayed red in both Chrome and Safari. `.llm-rail-toggle:hover`
	   is (0,2,0) and already outranks Astra's (0,1,1); the declaration was simply
	   absent. :active is pinned too so the tap itself never flashes red. */
	.llm-rail-toggle:hover { background: var(--llm-bronze-ink); border-color: var(--llm-bronze-ink); color: #fff; }
	.llm-rail-toggle:active { border-color: var(--llm-bronze-ink); }
	.llm-rail.is-open .llm-rail-toggle:hover { background: var(--llm-night); border-color: var(--llm-night); }
	.llm-rail-toggle:focus-visible { outline: 2px solid var(--llm-night); outline-offset: 2px; }
	/* Safari/WebKit keeps a focus ring after a tap; suppress it for non-keyboard focus */
	.llm-rail-toggle:focus:not(:focus-visible) { outline: 0; }
	/* v1.5.2: centring fix.
	   The old rule forced this to 20x20 and added rotate(-24deg) translate(1px,0).
	   Both were tuned for the previous generic 24x24 send-arrow glyph. The brand
	   plane has a 733.78x481.99 viewBox (1.52:1) and is already drawn banked, so
	   squaring it letterboxed the art and the extra rotation threw it off centre
	   inside the circle. Sized to its true aspect with no transform, the flex
	   centring on the button does the work. */
	.llm-rail-toggle-i { display: block; width: 22px; height: auto; flex: none; transform: none; transition: opacity .15s ease, transform .2s ease; }
	.llm-rail-toggle-x { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0; transition: opacity .15s ease; }
	.llm-rail-toggle-x::before, .llm-rail-toggle-x::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
	.llm-rail-toggle-x::before { transform: rotate(45deg); }
	.llm-rail-toggle-x::after { transform: rotate(-45deg); }
	.llm-rail.is-open .llm-rail-toggle { background: var(--llm-night); color: var(--llm-cream); }
	.llm-rail.is-open .llm-rail-toggle-i { opacity: 0; transform: translate(6px, -6px); }
	.llm-rail.is-open .llm-rail-toggle-x { opacity: 1; }
	/* the list becomes a small sheet above the button */
	.llm-rail ol { display: none; position: absolute; left: 0; bottom: calc(100% + 10px); min-width: 210px; max-width: calc(100vw - 24px);
		max-height: 60vh; overflow: auto; border-radius: 14px; padding: 8px; gap: 2px; -webkit-overflow-scrolling: touch;
		box-shadow: 0 8px 24px rgba(14, 35, 38, .3); background: rgba(14, 35, 38, .94); }
	.llm-rail.is-open ol { display: flex; }
	.llm-rail-dot { width: auto; height: auto; justify-content: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; }
	.llm-rail-dot-i { flex: none; }
	.llm-rail-dot[aria-current="true"] { background: rgba(217, 229, 233, .14); }
	.llm-rail-dot[aria-current="true"] .llm-rail-dot-i { transform: scale(1.3); box-shadow: 0 0 0 2px rgba(217, 229, 233, .28); }
	.llm-rail-label { position: static; opacity: 1; transform: none; background: none; border: 0; padding: 0; pointer-events: none;
		font-size: 12px; letter-spacing: .06em; white-space: normal; text-align: left; }
	/* Specificity must match the desktop `.llm-rail .llm-rail-sep` rule above,
	   or that one wins here and the phone separator stops spanning the sheet. */
	.llm-rail .llm-rail-sep { width: 100%; margin: 4px 0; align-self: stretch; }
	.llm-rail-link { padding-left: 10px; }
	.llm-rail-link .llm-rail-dot-i { display: none; }
	/* On phones the rail is a labelled sheet and this arrow sits in the same
	   7px column as the dots, so it keeps a smaller size than the desktop 17px
	   — at 17px it would tower over the 7px dots and push the labels out of
	   line. The box stays 7px for column alignment; the glyph overflows it
	   centred, which is intended. */
	.llm-rail-link::before { width: 7px; text-align: center; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .llm-rail, .llm-rail * { transition: none; } }

/* ---- v1.4.5: compact page heading + linked handoff ---------------------- */
/* ---- v1.4.6: H1 smaller (–40%), left-aligned, more gap before handoff -- */
/* ---- v1.4.7: force override Astra theme H1 styles; –50% size again ----- */

/* Use .llm ancestor + !important on the properties Astra overrides so our
   styles win regardless of how deeply Astra nests its H1 selectors. */
.llm .llm-page-head {
	font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif !important;
	font-size: clamp(22px, 3.4vw, 44px) !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em;
	line-height: 1.05;
	color: var(--llm-night);
	margin: 0 0 0.6em !important;
	text-wrap: balance;
	text-align: left !important;
}

/* v1.6.1: .llm-page-handoff is gone — /menu/ and /deals/ now render the same
   .llm-handoff line as the homepage. The rule that used to sit here set a
   different size, a different colour and the theme's body font, which is why
   the three pages did not match. Kept as a comment so nobody re-adds it.

   v1.6.2: the two placements differ only in alignment and spacing, so they are
   two modifiers on the one base rule rather than two copies of it. */

/* /menu/ and /deals/: the line sits directly under the H1, so it lines up with
   the H1's left edge rather than floating centred above a left-aligned page. */
.llm .llm-handoff-page {
	justify-content: flex-start;
	text-align: left;
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Homepage: stays centred between the mood cards and Today's Fare Drops. The
   gaps were 24px above and 44px below, which read as a hole in the page; these
   negative margins halve both (12px / 22px). The class is repeated so this
   beats the theme's `.lc-inner > .lc-handoff-line { margin-top: -6px }`, which
   ties on specificity and would otherwise win on source order. */
.llm.lc-handoff-line.lc-handoff-line {
	margin-top: -18px;
	margin-bottom: -22px;
}

.llm .llm-handoff-home {
	margin-top: 0;
	margin-bottom: 0;
}

.llm-gate-link {
	color: var(--llm-teal-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-style: dotted;
}

.llm-gate-link:hover,
.llm-gate-link:focus-visible {
	color: var(--llm-teal);
	text-decoration-style: solid;
}

/* ---- v1.4.5: collapse toggle (Filters ▾) -------------------------------- */

.llm-collapse-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px 7px 12px;
	margin: 6px 0;
	/* v1.5.5: solid bronze-ink fill.
	   This was a cream fill on a cream page — the text contrast was fine
	   (5.48:1) but the BAR only separated from the background at 2.69:1, so it
	   read as invisible. Filling it fixes the thing that was actually wrong.
	   Bronze-ink gives 5.48:1 against the page and 6.51:1 for the white label.
	   Not midnight: that is the primary-action colour (Buy Online, headings),
	   and a full-width dark bar here would outrank the actual buy buttons.
	   Not plain bronze: white on #a48c72 is 3.20:1 and fails AA. */
	background: var(--llm-bronze-ink);
	color: #fff;
	border: 1.5px solid var(--llm-bronze-ink);
	border-radius: 999px;
	font: 600 0.85rem/1 inherit;
	letter-spacing: 0.02em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Hover darkens rather than lightens, so the control never momentarily loses
   the presence the fill was added to give it. */
.llm-collapse-toggle:hover {
	background: #5b4938;
	border-color: #5b4938;
	color: #fff;
}

.llm-collapse-toggle:focus-visible {
	outline: 2px solid var(--llm-night);
	outline-offset: 2px;
}

/* Open state steps down to plain bronze. It still reads as filled and active,
   but sits back a little so the category chips it reveals become the thing the
   eye goes to. The label is white on #a48c72, which is 3.20:1 — fine here
   because the label is 600-weight uppercase at ~13px, i.e. large text by WCAG
   (>=3:1), and it is a control the shopper has just deliberately opened. */
.llm-collapse-toggle.is-open {
	background: var(--llm-bronze);
	border-color: var(--llm-bronze-ink);
	color: #fff;
}

.llm-collapse-caret {
	display: flex;
	align-items: center;
	transition: transform 0.2s ease;
}

.llm-collapse-toggle.is-open .llm-collapse-caret {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.llm-collapse-toggle,
	.llm-collapse-caret { transition: none; }
}

/* ---- v1.4.5: collapse wrap (fly chips + category chips) ----------------- */
/* ---- v1.4.6: gap between fly row and category row ----------------------- */

/* [hidden] is already handled by the page contract reset, but be explicit */
.llm-collapse-wrap[hidden] { display: none !important; }

.llm-collapse-wrap {
	/* When shown, add a soft entrance */
	animation: llm-drop 0.18s ease;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 8px;
}

@keyframes llm-drop {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.llm-collapse-wrap { animation: none; }
}


/* ======================================================================
   v1.4.9 — bronze accordion plane + mobile filter bottom sheet
   ====================================================================== */

/* ---- the inlined Lifted paper plane on the accordion ------------------- */

.llm-plane-ico {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}

.llm-plane-ico svg { display: block; }

/* Plane lifts and banks slightly when the accordion opens — a nod to the
   brand without becoming a distraction. */
.llm-collapse-toggle.is-open .llm-plane-ico {
	transform: translate(1px, -2px) rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
	.llm-plane-ico { transition: none; }
	.llm-collapse-toggle.is-open .llm-plane-ico { transform: none; }
}

/* ---- scrim (mobile only; inert at desktop widths) ---------------------- */

.llm-scrim[hidden] { display: none !important; }

.llm-scrim {
	display: none;   /* desktop: never shown, the panel is inline */
}

/* ---- sheet chrome: hidden at desktop, shown at mobile ------------------ */

.llm-sheet-head,
.llm-sheet-foot { display: none; }

/* Desktop: the scroll wrapper must not exist as far as layout is concerned,
   or it would collapse the facet groups into a single flex child of
   .llm-facets and destroy the inline row layout. display:contents makes the
   element itself vanish from the box tree while keeping its children. */
.llm-sheet-body { display: contents; }

/* ======================================================================
   Mobile: the Filters panel becomes a bottom sheet
   ====================================================================== */

@media (max-width: 768px) {

	.llm-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(14, 35, 38, 0.55);
		z-index: 9998;
		animation: llm-scrim-in 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	@keyframes llm-scrim-in { from { opacity: 0; } to { opacity: 1; } }

	/* The panel itself, re-cast as a sheet anchored to the bottom edge.
	   v1.5.1: a three-row flex column — head / scrolling body / foot. The
	   sheet itself no longer scrolls (overflow:hidden); only .llm-sheet-body
	   does. Previously the whole panel scrolled with a sticky footer inside
	   it, and the panel's bottom padding left a gap below that sticky footer
	   where chips stayed visible — which is what showed through under the
	   Show results button. */
	.llm-facets {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		/* BOTH of these are load-bearing and BOTH were missed in v1.5.2, which
		   is what broke the sheet.
		   The desktop base rule sets `flex-wrap: wrap` and
		   `align-items: flex-start`. Switching to a column here without
		   resetting them meant: (a) wrap + a capped height made the flex
		   container spill into EXTRA COLUMNS, pushing the footer sideways off
		   screen, and (b) flex-start stopped the header/body/footer stretching
		   to full width. Verified at 375px: without these the panel is 375px
		   wide but scrolls to 666px and Show results lands at x=514. */
		flex-wrap: nowrap;
		align-items: stretch;
		max-height: 85vh;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background: var(--llm-cream);
		border: 0;
		border-top: 3px solid var(--llm-bronze);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 40px rgba(14, 35, 38, 0.25);
		animation: llm-sheet-up 0.24s cubic-bezier(0.22, 1, 0.36, 1);
		/* set by JS during a swipe-to-dismiss drag */
		transform: translateY(var(--llm-sheet-drag, 0px));
	}

	/* The one scrolling region.

	   v1.6.4 — this is now a flex column. As a plain block the facet groups had
	   zero space between them, so one group's chips ran straight into the next
	   group's label ("PLANT TYPE" sat tight under the New chip, and so on). A
	   column gap is the fix, and it also lets Clear all filters be pulled to the
	   top of the sheet where it is actually reachable.

	   The two `flex: 0 0 auto` overrides matter: both .llm-facet and
	   .llm-clearall carry `flex: 1 1 100%` further up this media query, written
	   for a ROW context. Left alone in a column they would read 100% as a
	   height and stretch. Desktop is untouched — there .llm-sheet-body is
	   display:contents and none of this applies. */
	.llm-sheet-body {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		flex: 1 1 auto;
		min-height: 0;           /* without this a flex child refuses to shrink */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 4px 16px 8px;
	}

	.llm-sheet-body > .llm-facet,
	.llm-sheet-body > .llm-clearall {
		flex: 0 0 auto;
	}

	/* Clear all filters belongs at the top of the sheet: it only appears once
	   filters are on, and at that point it is the thing you are most likely to
	   want. Ordered rather than moved in the markup so desktop keeps it at the
	   end of the inline facet row, where it has always been. */
	.llm-sheet-body > .llm-clearall {
		order: -1;
		align-self: stretch;
		margin-left: 0;
	}

	/* A drag is a direct manipulation — it must track the finger exactly, so
	   the entrance easing is suppressed while dragging and restored after. */
	.llm-facets.is-dragging { animation: none; transition: none; }
	.llm-facets.is-releasing { transition: transform 0.2s ease; }

	@keyframes llm-sheet-up {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	@media (prefers-reduced-motion: reduce) {
		.llm-facets, .llm-scrim { animation: none; }
	}

	/* Header is a fixed row of the column now, not sticky — it cannot scroll
	   away, and it is the drag handle for swipe-to-dismiss. */
	.llm-sheet-head {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 8px;
		position: relative;
		flex: 0 0 auto;
		z-index: 2;
		margin: 0;
		padding: 16px 16px 10px;
		background: var(--llm-cream);
		border-bottom: 1px solid var(--llm-bronze-light);
		touch-action: none;          /* we handle the vertical gesture ourselves */
		cursor: grab;
	}

	.llm-sheet-grip {
		position: absolute;
		top: 6px;
		left: 50%;
		transform: translateX(-50%);
		width: 38px;
		height: 4px;
		border-radius: 999px;
		background: var(--llm-bronze-light);
	}

	.llm-sheet-title {
		font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
		font-size: 1.05rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--llm-bronze-ink);
	}

	.llm-sheet-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		background: transparent;
		border: 1.5px solid var(--llm-bronze);
		border-radius: 50%;
		color: var(--llm-bronze-ink);
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.llm-sheet-close:focus-visible {
		outline: 2px solid var(--llm-bronze-ink);
		outline-offset: 2px;
	}

	/* Footer "Show results" — the primary way out of the sheet. A fixed row of
	   the column, so nothing can ever render below or behind it. */
	.llm-sheet-foot {
		display: block;
		position: relative;
		flex: 0 0 auto;
		z-index: 2;
		margin: 0;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--llm-cream);
		border-top: 1px solid var(--llm-bronze-light);
		box-shadow: 0 -6px 14px rgba(14, 35, 38, 0.06);
	}

	.llm-sheet-done {
		display: block;
		width: 100%;
		padding: 13px 16px;
		background: var(--llm-bronze);
		color: #fff;
		border: 0;
		border-radius: 10px;
		font: 600 0.95rem/1 inherit;
		letter-spacing: 0.03em;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.llm-sheet-done:active { background: var(--llm-bronze-ink); }

	/* Page behind the sheet must not scroll. */
	body.llm-sheet-open { overflow: hidden; }
}

/* ======================================================================
   v1.5.3 — Astra focus-repaint guard
   ======================================================================

   Astra's inline stylesheet ships this:

     button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, …
       { background: var(--ast-global-color-1); color: #fff; }

   On this site --ast-global-color-1 is #b74e4f, the brand red.

   `button:focus` has specificity (0,1,1). Every control below is styled by a
   single class, (0,1,0) — so Astra outranks them the moment the button holds
   focus. While the pointer is still over the control our own :hover rule
   (0,2,0) wins, which is why nothing looks wrong until the mouse LEAVES: focus
   survives the click, :hover stops matching, and Astra repaints the control red
   with white text.

   Chrome focuses a button on mouse click; Safari historically does not, which
   is exactly why this showed up in one browser and not the other.

   Astra's rule sets background, color AND border-color. All three must be
   restored: v1.5.3 covered only the first two, which is why the View
   Categories bar kept a red BORDER on focus after its fill was fixed.

   Each rule below restores that control's resting colours at (0,2,0), which
   beats (0,1,1). `:not(:hover)` keeps these rules out of the way of our own
   hover styles rather than competing with them on source order.

   Anything already carrying a second class or an ancestor in its selector
   (.llm-chip.is-on, .llm-rail-toggle inside its media query, and so on) was
   never exposed, but the resting state of every plugin button is covered here
   so a future single-class control cannot reintroduce the bug.
   ====================================================================== */

.llm-collapse-toggle:focus:not(:hover) { background: var(--llm-bronze-ink); color: #fff; border-color: var(--llm-bronze-ink); }
.llm-collapse-toggle.is-open:focus:not(:hover) { background: var(--llm-bronze); color: #fff; border-color: var(--llm-bronze-ink); }
.llm-refine:focus:not(:hover)      { background: #eef3f5;            color: var(--llm-night);   border-color: rgba(14, 35, 38, 0.5); }
.llm-refine.is-open:focus:not(:hover) { background: var(--llm-night); color: var(--llm-cream);  border-color: var(--llm-night); }
.llm-chip:focus:not(:hover)        { background: var(--llm-pale);    color: var(--llm-night);   border-color: rgba(14, 35, 38, 0.5); }
.llm-chip.is-on:focus:not(:hover)  { border-color: var(--llm-night); }
.llm-fchip:focus:not(:hover)       { background: #fff;               color: var(--llm-night);   border-color: rgba(14, 35, 38, 0.6); }
.llm-fchip.is-on:focus:not(:hover) { border-color: var(--llm-teal-ink); }
.llm-fly-chip:focus:not(:hover)    { background: #fff;               color: var(--llm-night);   border-color: rgba(14, 35, 38, 0.5); }
.llm-fly-chip.is-on:focus:not(:hover) { border-color: var(--llm-night); }
.llm-reset:focus:not(:hover)       { background: transparent;        color: var(--llm-red-ink); border-color: var(--llm-red-ink); }
.llm-clearall:focus:not(:hover)    { background: transparent;        color: var(--llm-red-ink); border-color: var(--llm-red-ink); }
.llm-q-clear:focus:not(:hover)     { background: transparent;        color: #3d4a4d;            border-color: transparent; }
.llm-car-btn:focus:not(:hover)     { background: transparent;        color: var(--llm-bronze);  border-color: var(--llm-bronze); }
.llm-sheet-close:focus:not(:hover) { background: transparent;        color: var(--llm-bronze-ink); border-color: var(--llm-bronze); }
.llm-sheet-done:focus:not(:hover)  { background: var(--llm-bronze);  color: #fff;               border-color: transparent; }
.llm-btn:focus:not(:hover)         { background: var(--llm-night);   color: var(--llm-cream);   border-color: transparent; }

/* The rail toggle is only drawn on phones, inside the <=1099px query, so its
   guard has to live there too or it never applies. */
@media (max-width: 1099px) {
	.llm-rail-toggle:focus:not(:hover) { background: var(--llm-bronze); color: #fff; border-color: var(--llm-bronze-ink); }
	.llm-rail.is-open .llm-rail-toggle:focus:not(:hover) { background: var(--llm-night); color: var(--llm-cream); border-color: var(--llm-night); }
}

/* ---- v1.5.6: the same guard, for :hover -------------------------------
   Astra's rule lists `button:hover` alongside `button:focus`, so a control
   whose own :hover rule omits border-color inherits Astra's red edge while the
   pointer is on it — the mirror of the focus bug, just harder to notice
   because it only lasts as long as the hover.
   These six had a :hover rule that set a background but no border, and the two
   sheet controls had no :hover rule at all, which left all three properties to
   Astra. Each is pinned to its own resting edge below.
   ---------------------------------------------------------------------- */

.llm-fchip:hover     { border-color: rgba(14, 35, 38, 0.6); }
.llm-fly-chip:hover  { border-color: rgba(14, 35, 38, 0.5); }
.llm-reset:hover     { border-color: var(--llm-red-ink); }
.llm-clearall:hover  { border-color: var(--llm-red-ink); }
.llm-q-clear:hover   { border-color: transparent; }
.llm-btn:hover       { border-color: transparent; }

.llm-sheet-close:hover { background: var(--llm-bronze-light); color: var(--llm-bronze-ink); border-color: var(--llm-bronze); }
.llm-sheet-done:hover  { background: var(--llm-bronze-ink);   color: #fff;                  border-color: transparent; }

/* ======================================================================
   v1.7.0 — category pages (/menu/flower/ … /menu/crew-picks/)
   The page's own heading block is the H1; the shortcode adds the grid,
   the related-page row and the compliance footer. Everything here is
   .llm- prefixed for the UCSS allowlist.
   ====================================================================== */

/* The header group on a category page: H1 + one-line lede. The H1 reuses
   .llm-page-head (needs a .llm ancestor, which the group provides). */
.llm-catpage-head {
	margin: 0 0 8px;
}

.llm .llm-catpage-lede {
	margin: 0 0 18px;
	max-width: 70ch;
	font-size: 1.06rem;
	line-height: 1.65;
	color: #3d4a4d;
	text-align: left;
}

/* "On the shelf now" — same bronze-ruled title as the /menu/ categories, but
   it is an h2 here, so pin the size against Astra's own h2 rule. */
.llm h2.llm-catpage-title {
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2rem);
	margin-top: 0;
}

/* Curated pages (Just Landed, Crew Picks): the category H3s under this carry
   the bronze rule, so the H2 goes quiet — no rule, tighter gap. */
.llm h2.llm-catpage-title.is-curated {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 14px;
	font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.6rem);
	color: var(--llm-bronze-ink);
}

/* A category page shows one category: no repeated title, just the grid. */
.llm-cat-flat {
	margin-top: 0;
}

/* /menu/ category titles that link to their own page. Same colour as the
   title, underline only on hover, so the heading still reads as a heading. */
.llm-cat-title .llm-cat-link {
	color: inherit;
	text-decoration: none;
}

.llm-cat-title .llm-cat-link:hover,
.llm-cat-title .llm-cat-link:focus-visible {
	color: var(--llm-teal-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* The sold-out switch when it has no category row to sit in. */
.llm-chips-solo .llm-chips {
	grid-template-columns: max-content;
}

/* Restocking panel: the shared .llm-none box, with the button spaced like
   the /deals/ empty state. */
.llm-catpage-none {
	margin: 12px 0 8px;
}

.llm-catpage-none .llm-btn {
	display: inline-flex;
}

/* The intro copy below the grid. Plain prose, owner-editable. Not under .llm
   so lists keep their bullets if he ever adds one. */
.llm-catpage-copy {
	max-width: 76ch;
	margin: 40px 0 8px;
}

.llm-catpage-copy h2 {
	font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(1.35rem, 1rem + 1.4vw, 1.8rem);
	letter-spacing: 0.04em;
	line-height: 1.1;
	color: #0e2326;
	margin: 26px 0 8px;
	text-align: left;
}

.llm-catpage-copy h2:first-child {
	margin-top: 0;
}

.llm-catpage-copy p {
	font-size: 1.02rem;
	line-height: 1.7;
	color: #2a2a2a;
	margin: 0 0 14px;
	text-align: left;
}

.llm-catpage-copy a {
	color: #015f76;
}

/* Related pages — "More from the menu". Same look as the Buy online card
   button (.llm-btn): night fill, cream text, mono caps; hover goes teal-ink
   like the cards. Jubair's picks, 23 Sep: night over pale blue, then option "A"
   — each button carries its brand category icon in the #B64E50 -> #047E9C
   gradient (LLM_Icons sprite), turning cream on hover so it survives the teal. */
.llm-related {
	margin: 32px 0 0;
}

/* Eyebrow label, per the design system: 14px mono, bold, caps, .12em, #6F5A45. */
.llm .llm-related-h {
	font-family: var(--llm-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
	margin: 0 0 12px;
	text-align: left;
}

.llm-related-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

@media (max-width: 600px) {
	.llm-related-list { grid-template-columns: 1fr; }
}

.llm-related-link {
	display: flex;               /* fills its grid cell so a row of buttons lines up */
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 13px 20px;
	background: var(--llm-night);
	border: 1px solid var(--llm-night);
	border-radius: 8px;            /* the site's button radius, same as .llm-btn */
	font-family: var(--llm-mono);
	font-size: 0.9rem;             /* 13.5px, same as .llm-btn */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--llm-cream);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.llm-related-link .llm-related-i {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	fill: url(#llm-grad);          /* brand gradient from the LLM_Icons sprite */
	color: var(--llm-cream);       /* the question-mark glyph strokes currentColor */
	transition: transform .28s ease-out, fill .15s ease;
}

.llm-related-link .llm-related-i.llm-i-land { transform: rotate(22deg); }

.llm-related-link:hover,
.llm-related-link:focus-visible {
	background: var(--llm-teal-ink);
	border-color: var(--llm-teal-ink);
	color: #fff;
	text-decoration: none;
}

.llm-related-link:hover .llm-related-i,
.llm-related-link:focus-visible .llm-related-i {
	color: #fff;
	fill: var(--llm-cream);
	transform: translate(0, -2px) scale(1.08);
}

.llm-related-link:hover .llm-related-i.llm-i-land,
.llm-related-link:focus-visible .llm-related-i.llm-i-land {
	transform: translate(0, -2px) scale(1.08) rotate(22deg);
}

/* Astra's a:focus/button:focus rule paints a red edge on anything whose own
   focus rule omits border-color — pin it, same guard as the other controls. */
.llm-related-link:focus:not(:hover) {
	background: var(--llm-night);
	color: var(--llm-cream);
	border-color: var(--llm-night);
}

@media (prefers-reduced-motion: reduce) {
	.llm-related-link .llm-related-i { transition: none; }
	.llm-related-link:hover .llm-related-i,
	.llm-related-link:focus-visible .llm-related-i { transform: none; }
	.llm-related-link .llm-related-i.llm-i-land,
	.llm-related-link:hover .llm-related-i.llm-i-land,
	.llm-related-link:focus-visible .llm-related-i.llm-i-land { transform: rotate(22deg); }
}


/* =========================================================================
   Category tile row — [lifted_categories] (v1.8.0)
   Night tiles, cream icon + mono label. One row with arrows on desktop,
   two swipeable rows on phones (Jubair's pick, 24 Sep: option A, cream
   icons rather than gradient). Hover = teal-ink, like every Night button.
   ========================================================================= */
.llm-cats {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.llm-cats .llm-cats-btn {
	flex: 0 0 auto;
}

/* Arrows are hidden until cats.js measures the row and finds it actually
   scrolls (.llm-can-scroll). Showing them first and hiding them after paint
   read as "the scroll loads then disappears" on wide screens where all ten
   tiles fit (Jubair, 24 Sep). */
.llm-cats .llm-cats-btn {
	display: none;
}
.llm-cats.llm-can-scroll .llm-cats-btn {
	display: inline-flex;
}
/* Kept for the old class name; harmless. */
.llm-cats.llm-no-scroll .llm-cats-btn {
	display: none;
}
/* When every tile fits, centre the row instead of leaving a gap on the right. */
.llm-cats.llm-no-scroll .llm-cats-list {
	justify-content: center;
}

.llm-cats-track {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 6px;
}

.llm-cats-track::-webkit-scrollbar {
	display: none;
}

.llm-cats-track:focus-visible {
	outline: 2px solid var(--llm-teal-ink);
	outline-offset: 2px;
}

.llm .llm-cats-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 136px;   /* v1.8.3: tiles + icons ~30% larger on desktop */
	gap: 12px;
}

.llm .llm-cats-item {
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.llm-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 11px;
	height: 126px;
	padding: 0 8px;
	box-sizing: border-box;
	background: var(--llm-night);
	border: 1px solid var(--llm-night);
	border-radius: 10px;
	font-family: var(--llm-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: center;
	color: var(--llm-cream);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.llm-cat-tile .llm-cat-tile-i {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	fill: var(--llm-cream);
	color: var(--llm-cream);
	transition: transform .28s ease-out;
}

.llm-cat-tile:hover,
.llm-cat-tile:focus-visible {
	background: var(--llm-teal-ink);
	border-color: var(--llm-teal-ink);
	color: #fff;
	text-decoration: none;
}

.llm-cat-tile:hover .llm-cat-tile-i,
.llm-cat-tile:focus-visible .llm-cat-tile-i {
	fill: #fff;
	color: #fff;
	transform: translate(0, -2px) scale(1.08);
}

/* Astra's a:focus rule paints a red edge on anything whose own focus rule
   omits border-color — pin it, same guard as the related-row buttons. */
.llm-cat-tile:focus:not(:hover) {
	background: var(--llm-night);
	color: var(--llm-cream);
	border-color: var(--llm-night);
}

/* On a Night band (homepage "What we carry", the lc-dark band on the format
   guide) the Night tile needs an edge: a soft cream outline, same idea as the
   outlined tiles it replaces. Arrows go cream too. Hover is unchanged. */
.llm-cats-dark .llm-cat-tile,
.lc-dark .llm-cats .llm-cat-tile {
	border-color: rgba(240, 235, 224, 0.38);
}

.llm-cats-dark .llm-cat-tile:hover,
.llm-cats-dark .llm-cat-tile:focus-visible,
.lc-dark .llm-cats .llm-cat-tile:hover,
.lc-dark .llm-cats .llm-cat-tile:focus-visible {
	border-color: var(--llm-teal-ink);
}

.llm-cats-dark .llm-cat-tile:focus:not(:hover),
.lc-dark .llm-cats .llm-cat-tile:focus:not(:hover) {
	border-color: rgba(240, 235, 224, 0.38);
}

.llm-cats-dark .llm-cats-btn,
.lc-dark .llm-cats .llm-cats-btn {
	color: var(--llm-cream);
	border-color: rgba(240, 235, 224, 0.5);
}

.llm-cats-dark .llm-cats-btn:hover:not(:disabled),
.llm-cats-dark .llm-cats-btn:active:not(:disabled),
.lc-dark .llm-cats .llm-cats-btn:hover:not(:disabled),
.lc-dark .llm-cats .llm-cats-btn:active:not(:disabled) {
	background: var(--llm-cream);
	border-color: var(--llm-cream);
	color: var(--llm-night);
}

/* Phones: two rows that swipe sideways, arrows out of the way. */
@media (max-width: 767px) {
	.llm-cats .llm-cats-btn {
		display: none;
	}
	/* 92px tiles: three fit in a 375px viewport with the fourth peeking, so
	   the row visibly continues off the edge without a hint label. */
	.llm .llm-cats-list {
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: 92px;
		gap: 10px;
	}
	.llm-cat-tile {
		height: 96px;
		font-size: 11px;
		gap: 9px;
	}
	.llm-cat-tile .llm-cat-tile-i {
		width: 30px;
		height: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.llm-cat-tile .llm-cat-tile-i { transition: none; }
	.llm-cat-tile:hover .llm-cat-tile-i,
	.llm-cat-tile:focus-visible .llm-cat-tile-i { transform: none; }
	.llm-cats-track { scroll-behavior: auto; }
}

/* =========================================================================
   v1.8.4 — "More from the menu" as a bronze carousel (Jubair: A + F, 24 Sep)
   ========================================================================= */
.llm-related-car .llm-cats-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.llm-related-car .llm-cats-btn { display: none; flex: 0 0 auto; }
.llm-related-car.llm-can-scroll .llm-cats-btn { display: inline-flex; }
.llm-related-car .llm-cats-track {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 2px;
}
.llm-related-car .llm-cats-track::-webkit-scrollbar { display: none; }
.llm-related-car .llm-related-list {
	display: grid;
	grid-template-columns: none; /* v1.8.5: drop the grid's explicit columns so every button is the same width */
	grid-auto-flow: column;
	grid-auto-columns: 230px;
	gap: 12px;
}
/* v1.8.5: every button in the row is the same height — the li fills the grid
   row and the link fills the li, so a two-line label stretches its neighbours
   instead of standing taller than them (Jubair, 24 Sep). */
.llm-related-car .llm-related-list li { scroll-snap-align: start; display: flex; }
.llm-related-car .llm-related-link {
	background: transparent;
	border: 1.5px solid var(--llm-bronze-ink);
	color: var(--llm-bronze-ink);
	gap: 12px;
	padding: 12px 18px;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 56px;
}
.llm-related-car .llm-related-link .llm-related-i {
	width: 24px;
	height: 24px;
	margin: 0;
	fill: url(#llm-grad);
	color: var(--llm-bronze-ink);
}
.llm-related-car .llm-related-link:hover,
.llm-related-car .llm-related-link:focus-visible {
	background: var(--llm-bronze-ink);
	border-color: var(--llm-bronze-ink);
	color: var(--llm-cream);
}
.llm-related-car .llm-related-link:hover .llm-related-i,
.llm-related-car .llm-related-link:focus-visible .llm-related-i {
	fill: var(--llm-cream);
	color: var(--llm-cream);
	transform: none;
}
.llm-related-car .llm-related-link:focus:not(:hover) {
	background: transparent;
	color: var(--llm-bronze-ink);
	border-color: var(--llm-bronze-ink);
}
@media (max-width: 767px) {
	.llm-related-car .llm-cats-btn { display: none !important; }
	.llm-related-car .llm-related-list {
		grid-template-rows: repeat(2, 1fr); /* v1.8.5: both rows the same height */
		grid-auto-columns: 196px;           /* v1.8.5: wider, so most names sit on one line */
		gap: 10px;
	}
	.llm-related-car .llm-related-link { padding: 10px 12px; font-size: 0.78rem; letter-spacing: 0.06em; gap: 8px; min-height: 56px; }
	.llm-related-car .llm-related-link .llm-related-i { width: 20px; height: 20px; }
}

/* =========================================================================
   v1.8.4 — product guide grid [lifted_formats]
   ========================================================================= */
.llm-formats { text-align: left; }
.llm .llm-fmt-grp {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	margin: 26px 0 4px;
}
.llm-fmt-gi { width: 22px; height: 22px; fill: url(#llm-grad); flex: 0 0 auto; }
.llm .llm-fmt-note { font-size: 0.9rem; margin: 0 0 12px; max-width: 900px; opacity: 0.85; }
.llm-fmt-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}
.llm-fmt-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #fff;
	border: 1px solid #e9ddcc;
	border-top: 4px solid var(--llm-bronze-ink);
	border-radius: 8px;
	padding: 14px 16px 12px;
	color: var(--llm-night);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.llm-fmt-card:hover, .llm-fmt-card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,35,38,.12); text-decoration: none; color: var(--llm-night); }
.llm-fmt-top { display: flex; align-items: center; gap: 10px; }
.llm-fmt-i { width: 26px; height: 26px; fill: url(#llm-grad); flex: 0 0 auto; }
.llm-fmt-name { font-family: "Bebas Neue", sans-serif; font-size: 1.3rem; letter-spacing: 0.03em; line-height: 1; }
.llm-fmt-d { font-size: 0.9rem; }
.llm-fmt-m { font-family: var(--llm-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--llm-bronze-ink); }
.llm-fmt-go { font-family: var(--llm-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--llm-teal-ink); font-weight: 700; margin-top: 4px; }
.llm-fmt-start {
	margin-top: 24px;
	background: var(--llm-night);
	color: var(--llm-cream);
	border-radius: 10px;
	padding: 18px 20px;
	display: flex;
	gap: 16px;
	align-items: center;
}
.llm-fmt-si { width: 34px; height: 34px; fill: var(--llm-cream); flex: 0 0 auto; }
.llm-fmt-start strong { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.03em; display: block; }
.llm .llm-fmt-start p { margin: 2px 0 0; font-size: 0.9rem; color: #d9d3c7; }
.llm-fmt-start a { color: var(--llm-cream); text-decoration: underline; }
/* Night bands (the format guide's "what to hold" section is lc-dark) */
.lc-dark .llm-fmt-grp, .lc-dark .llm-fmt-note { color: var(--llm-cream); }
.lc-dark .llm-fmt-start { background: var(--llm-cream); color: var(--llm-night); }
.lc-dark .llm-fmt-si { fill: var(--llm-night); }
.lc-dark .llm .llm-fmt-start p, .lc-dark .llm-fmt-start p { color: #3a3a3a; }
.lc-dark .llm-fmt-start a { color: var(--llm-teal-ink); }

/* =========================================================================
   v1.8.4 — sticky "On this page" bar [lifted_subnav]
   ========================================================================= */
.llm-subnav {
	position: sticky;
	/* v1.9.0: parks under the new header's sticky category bar (and the admin
	   bar) — both vars are unset, i.e. 0, while the new header is off. */
	top: calc(var(--llm-hdr-top, 0px) + var(--llm-hdr-stick-on, 0px));
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--llm-cream);
	border-bottom: 1px solid #d9cdb8;
	/* v1.9.2: 5% sides = the .lc-sec gutter, so the label lines up with the
	   page content below it */
	padding: 10px 5%;
	margin: 0 0 8px;
	overflow-x: auto;
	scrollbar-width: none;
}
/* v1.9.2: Astra's page-builder layout gives every child of a content block
   margin:auto, which in a flex row spreads the label and the pills apart
   (Jubair, 24 Sep: pills should sit left, right after "On this page"). */
.llm-subnav > * { margin-left: 0 !important; margin-right: 0 !important; }
/* v1.9.2: the theme gives .site-content overflow-x:hidden, which turns it into
   a scroll container and silently stops position:sticky working inside it — the
   sub-nav never actually stuck. overflow-x:clip still trims sideways overflow
   but is not a scroll container. Only on pages that carry the sub-nav. */
.site-content:has(.llm-subnav) { overflow-x: clip !important; overflow-y: visible !important; }
.llm-subnav::-webkit-scrollbar { display: none; }
.llm-subnav-l { font-family: var(--llm-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--llm-bronze-ink); white-space: nowrap; flex: 0 0 auto; }
.llm-subnav-list { display: flex; gap: 6px; }
.llm .llm-subnav-a {
	font-family: var(--llm-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
	text-decoration: none;
	padding: 7px 12px;
	border: 1px solid var(--llm-bronze-ink);
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.llm .llm-subnav-a:hover, .llm .llm-subnav-a.is-on { background: var(--llm-night); border-color: var(--llm-night); color: var(--llm-cream); }
.llm-anchor { display: block; position: relative; top: calc(-70px - var(--llm-hdr-top, 0px) - var(--llm-hdr-stick-on, 0px)); visibility: hidden; height: 0; }   /* v1.9.0: clears the header's sticky bar */

/* v1.9.7 — phones narrower than ~400px (iPhone SE / 12 mini / 13 / 14 at 375–390px)
   get 154px cards, and "Boarding · Sativa" ran 15px past the card edge there. The
   Pro Max sizes (430–440px) were never affected. Smaller type + padding fits it.
   Sits at the end of the file so it wins over the 720px badge size above. */
@media (max-width: 400px) {
	.llm-badge { font-size: 0.7rem; padding: 3px 6px; letter-spacing: 0.02em; }
	.llm-badge-occ { letter-spacing: 0.03em; }
}


/* ------------------------------------------------------------------------
   v2.2.0 — paged facets (Brand). One page of chips at a time, ‹ 1–12 of 48 ›.
   ------------------------------------------------------------------------ */
.llm-facet-pager {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
}

.llm-facet.is-paged .llm-facet-pager {
	flex: 0 0 auto;
}

/* The class rules above set display on these, which would beat the UA's
   [hidden] { display: none } — say it explicitly. */
.llm-facet-pager[hidden],
.llm-fchip[hidden] {
	display: none;
}

.llm-pager-btn {
	font-family: var(--llm-mono);
	font-size: 1.05rem;
	line-height: 1;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--llm-night);
	background: #fff;
	border: 1px solid rgba(14, 35, 38, 0.6);
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
}

.llm-pager-btn:hover:not(:disabled) {
	background: var(--llm-pale);
}

.llm-pager-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.llm-pager-label {
	font-family: var(--llm-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--llm-bronze-ink);
	white-space: nowrap;
	min-width: 7.5em;
	text-align: center;
}

/* ------------------------------------------------------------------------
   v2.2.0 — product page (/products/<slug>/). Approved mockup, 29 Sep.
   ------------------------------------------------------------------------ */
.llm-product {
	/* The template uses Astra's full-width (page-builder) layout, which drops
	   the container's side padding at every width — so the gutter lives here. */
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 30px 40px;
}

.llm-prod-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.llm-prod-media {
	position: relative;
	background: #fff;
	border: 1px solid rgba(14, 35, 38, 0.26);
	border-radius: var(--llm-radius);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Same sticky offset the filter bar uses (filter.js sets --llm-top). */
	position: sticky;
	top: calc(var(--llm-top, 0px) + 16px);
}

.llm-prod-img {
	width: 82%;
	height: 82%;
	object-fit: contain;
	display: block;
}

.llm-prod-noimg {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

.llm-prod-media .llm-flag {
	top: 14px;
}

.llm-prod-media .llm-flag-out {
	right: 14px;
}

.llm .llm-prod-brand {
	margin: 0 0 6px;
	font-size: 0.98rem;   /* v2.2.4 — a touch larger than on the cards (Jubair) */
}

/* v2.2.4 — breathing room between the sticky category bar and the breadcrumb. */
body.llm-product-page .ast-header-breadcrumb,
body.woocommerce-cart .ast-header-breadcrumb,
body.woocommerce-checkout .ast-header-breadcrumb {
	padding-top: 18px;
}

/* v5.4.2 — brand line inside the H1 (option A): same look as the old <p> above it. */
.llm .llm-prod-title .llm-prod-brand {
	display: block;
	font-family: var(--llm-mono);
	font-size: 0.98rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
	line-height: 1.8571;
	margin: 0 0 6px;
}

.llm-prod-title {
	font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(2.1rem, 4vw, 2.85rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--llm-night);
	margin: 0 0 12px;
}

.llm .llm-prod-badges {
	/* v2.2.3 — real air between the chips and the price (Jubair, twice). The
	   `.llm ul { margin: 0 }` reset outranks a lone class, hence the prefix. */
	margin: 0 0 30px;
}

/* v2.2.2 — the size / strain / format chips wear the menu card's default
   badge colour (Skyline Mist), so the page matches the cards. */

.llm-prod-price {
	margin: 0 0 18px;
	padding: 0;
}

.llm-prod-price .llm-now {
	font-size: 1.95rem;
}

.llm-prod-sizes {
	margin: 0 0 16px;
}

.llm-prod-sizes-label {
	display: block;
	font-family: var(--llm-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
	margin-bottom: 6px;
}

.llm-prod-sizes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.llm-prod-sizes .llm-size {
	font-size: 0.9rem;
	padding: 7px 11px;
	border-radius: 8px;
	/* v2.2.4 — warm tint instead of stark white, so the chips sit in the page (Jubair). */
	background: var(--llm-bronze-tint);
	border-color: var(--llm-bronze);
}

.llm-prod-sizes .llm-size:hover {
	background: var(--llm-bronze-light);
	border-color: var(--llm-bronze-ink);
}

.llm-prod-sizes .llm-size.is-lead {
	/* v2.2.7 — selected size: a shade darker than the facts card, dark bronze
	   ring, Night text (Jubair). Night on #dfd1bb is 11:1. */
	background: #dfd1bb;
	border-color: var(--llm-bronze-ink);
	box-shadow: inset 0 0 0 1px var(--llm-bronze-ink);
	color: var(--llm-night);
	cursor: default;
}

.llm-prod-sizes .llm-size.is-lead .llm-size-price {
	color: var(--llm-night);
}

.llm-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 18px;
	margin: 0 0 16px;
	padding: 14px 16px;
	/* v2.2.4 — warm tint like the size chips and the pickup note.
	   v2.2.6 — a shade deeper and a real bronze edge; the tint alone was too
	   faint to read as a card (Jubair). */
	background: #ebe1d0;
	border: 1.5px solid var(--llm-bronze);
	border-radius: var(--llm-radius);
}

.llm-fact dt {
	font-family: var(--llm-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--llm-bronze-ink);
	margin: 0 0 2px;
}

.llm-fact dd {
	margin: 0;
	font-weight: 600;
	color: var(--llm-night);
}

.llm-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--llm-mono);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	margin: 0 0 8px;
	color: var(--llm-teal-ink);
}

.llm-stock.is-out {
	color: var(--llm-red-ink);
}

.llm-stock-dot {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* v2.2.5 — the in-stock dot glows like the homepage's "Terminal Open" light.
   Same build as the fix from 18 Sep: a ::after ring animating ONLY transform
   and opacity (compositor work, no per-frame repaint), never box-shadow.
   The ring is one 9 px element; it stops for prefers-reduced-motion. */
.llm-stock.is-in {
	color: #0a7350;   /* v2.2.6 — the sign's green family, dark enough to read: 4.5:1 on cream */
}

.llm-stock.is-in .llm-stock-dot {
	background: #00d28a;
}

.llm-stock.is-in .llm-stock-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #00d28a;
	opacity: 0;
	transform: scale(1);
	animation: llm-ping 2.2s ease-out infinite;
}

@keyframes llm-ping {
	0%   { transform: scale(0.9); opacity: 0.85; }
	70%  { transform: scale(2.4); opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.llm-stock.is-in .llm-stock-dot::after { animation: none; }
}

/* Woo's add-to-cart form, dressed as ours: stepper + Night button. */
.llm-buy form.cart {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 12px;
}

.llm-buy .quantity {
	display: inline-flex;
	align-items: stretch;
	/* v2.2.7 — option C (Jubair, 29 Sep): the facts-card colour with the dark
	   bronze edge, so chips, facts and stepper read as one set. */
	background: #ebe1d0;
	border: 1.5px solid var(--llm-bronze-ink);
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 auto;
}

.llm-buy .quantity .screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.llm-buy input.qty {
	width: 2.8em;
	min-height: 48px;
	text-align: center;
	font-family: var(--llm-mono);
	font-size: 1rem;
	border: 0;
	background: transparent;
	color: var(--llm-night);
	-moz-appearance: textfield;
	margin: 0;
	padding: 0;
}

.llm-buy input.qty::-webkit-outer-spin-button,
.llm-buy input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* v2.2.7 — option C. Every state is written out with !important because the
   theme's global button rules (incl. its red :focus/:active) otherwise win
   on specificity; that is the red flash Jubair saw in 2.2.5 and 2.2.6. */
.llm-product .llm-buy .llm-qty-btn {
	width: 44px;
	margin: 4px;
	border: 1.5px solid var(--llm-bronze-ink) !important;
	border-radius: 6px;
	background: #fff !important;
	color: var(--llm-night) !important;
	font-family: var(--llm-mono);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	outline: none !important;
	box-shadow: none !important;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

/* v2.2.8 — glyphs as centred bars (currentColor), so − and + sit dead centre. */
.llm-product .llm-buy .llm-qty-btn { position: relative; }
.llm-product .llm-buy .llm-qty-btn::before,
.llm-product .llm-buy .llm-qty-btn::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2.5px;
	background: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
}
.llm-product .llm-buy .llm-qty-btn.is-plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.llm-product .llm-buy .llm-qty-btn.is-minus::after { display: none; }

.llm-product .llm-buy .llm-qty-btn:hover:not(:disabled),
.llm-product .llm-buy .llm-qty-btn:active:not(:disabled),
.llm-product .llm-buy .llm-qty-btn:focus-visible {
	background: var(--llm-teal-ink) !important;
	border-color: var(--llm-teal-ink) !important;
	color: #fff !important;
}

/* After a mouse click the button keeps :focus — back to rest, not red, not stuck teal. */
.llm-product .llm-buy .llm-qty-btn:focus:not(:focus-visible):not(:hover):not(:active) {
	background: #fff !important;
	border-color: var(--llm-bronze-ink) !important;
	color: var(--llm-night) !important;
}

.llm-product .llm-buy .llm-qty-btn:disabled { opacity: 0.35; cursor: default; }

/* Astra styles .woocommerce button.button.alt with its own colours; the
   longer selector + !important on the colour pair keeps this Night. */
.llm-product .llm-buy form.cart .single_add_to_cart_button,
.woocommerce .llm-product .llm-buy button.button.alt {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-family: var(--llm-mono);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* v2.2.2 — brand red (Jubair, 29 Sep). White on #b74e4f is 5:1.
	   v2.2.3 — recoloured per occasion below (Take Off red, Cruise bronze,
	   Landing teal-ink, Boarding sand, CBD teal-ink); red is the fallback. */
	color: #fff !important;
	background: var(--llm-red) !important;
	border: 0;
	border-radius: 8px;
	padding: 13px 18px;
	min-height: 48px;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease;
}

.llm-product .llm-buy form.cart .single_add_to_cart_button:hover,
.woocommerce .llm-product .llm-buy button.button.alt:hover {
	background: var(--llm-red-ink) !important;
	color: #fff !important;
}

.llm-buy .stock {
	display: none;   /* belt and braces: the PHP filter empties it too */
}

/* v2.2.3 — Add to cart takes the occasion's colour (same four as the chips). */
.llm-product.is-takeoff .llm-buy form.cart .single_add_to_cart_button,
.woocommerce .llm-product.is-takeoff .llm-buy button.button.alt { background: var(--llm-red) !important; color: #fff !important; }
.llm-product.is-takeoff .llm-buy form.cart .single_add_to_cart_button:hover,
.woocommerce .llm-product.is-takeoff .llm-buy button.button.alt:hover { background: var(--llm-red-ink) !important; }

.llm-product.is-cruise .llm-buy form.cart .single_add_to_cart_button,
.woocommerce .llm-product.is-cruise .llm-buy button.button.alt { background: var(--llm-bronze) !important; color: var(--llm-night) !important; }
.llm-product.is-cruise .llm-buy form.cart .single_add_to_cart_button:hover,
.woocommerce .llm-product.is-cruise .llm-buy button.button.alt:hover { background: var(--llm-bronze-ink) !important; color: #fff !important; }

.llm-product.is-landing .llm-buy form.cart .single_add_to_cart_button,
.llm-product.is-cbd .llm-buy form.cart .single_add_to_cart_button,
.woocommerce .llm-product.is-landing .llm-buy button.button.alt,
.woocommerce .llm-product.is-cbd .llm-buy button.button.alt { background: var(--llm-teal-ink) !important; color: #fff !important; }
.llm-product.is-landing .llm-buy form.cart .single_add_to_cart_button:hover,
.llm-product.is-cbd .llm-buy form.cart .single_add_to_cart_button:hover,
.woocommerce .llm-product.is-landing .llm-buy button.button.alt:hover,
.woocommerce .llm-product.is-cbd .llm-buy button.button.alt:hover { background: var(--llm-night) !important; }

.llm-product.is-boarding .llm-buy form.cart .single_add_to_cart_button,
.woocommerce .llm-product.is-boarding .llm-buy button.button.alt { background: var(--llm-sand) !important; color: var(--llm-night) !important; border: 1.5px dashed var(--llm-bronze-ink) !important; }
.llm-product.is-boarding .llm-buy form.cart .single_add_to_cart_button:hover,
.woocommerce .llm-product.is-boarding .llm-buy button.button.alt:hover { background: var(--llm-bronze-light) !important; }

/* The phone sticky bar's button follows the same colour. */
.llm-product.is-cruise .llm-prod-sticky-btn { background: var(--llm-bronze); color: var(--llm-night); }
.llm-product.is-landing .llm-prod-sticky-btn,
.llm-product.is-cbd .llm-prod-sticky-btn { background: var(--llm-teal-ink); color: #fff; }
.llm-product.is-boarding .llm-prod-sticky-btn { background: var(--llm-sand); color: var(--llm-night); border: 1.5px dashed var(--llm-bronze-ink); }

.llm-buy-note {
	font-size: 0.95rem;
	color: var(--llm-bronze-ink);
	margin: 0 0 12px;
}

.llm-pickup {
	background: var(--llm-bronze-tint);
	border: 1px solid var(--llm-bronze-light);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 0.95rem;
	margin: 0 0 18px;
}

.llm-pickup strong {
	color: var(--llm-bronze-ink);
}

.llm-prod-h2 {
	font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
	font-weight: 400;
	font-size: 1.55rem;
	letter-spacing: 0.03em;
	color: var(--llm-night);
	margin: 0 0 8px;
}

.llm-prod-desc p {
	font-size: 0.98rem;
	color: #3a3a3a;
	margin: 0 0 0.8em;
}

.llm-prod-more {
	margin-top: 36px;
}

.llm-prod-more-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.llm-prod-more-head .llm-prod-h2 {
	font-size: 1.8rem;
	margin: 0;
}

.llm-prod-more-all {
	font-family: var(--llm-mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--llm-teal-ink);
	text-decoration: none;
}

.llm-prod-more-all:hover {
	text-decoration: underline;
}

.llm-prod-more-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.llm-prod-back {
	margin: 28px 0 0;
	font-family: var(--llm-mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
}

.llm-prod-back a {
	color: var(--llm-teal-ink);
	text-decoration: none;
}

.llm-prod-back a:hover {
	text-decoration: underline;
}

.llm-prod-retired {
	background: #fff;
	border: 1px solid rgba(14, 35, 38, 0.18);
	border-radius: var(--llm-radius);
	padding: 18px;
	max-width: 620px;
}

.llm-prod-retired .llm-btn {
	margin-right: 8px;
}

/* Sticky buy bar — phones only, shown by product.js once the real button
   has scrolled away. Sits above the plane rail / ☰ buttons. */
.llm-prod-sticky {
	display: none;
}

@media (max-width: 720px) {
	.llm-product {
		padding: 4px 16px 96px;
	}

	.llm-prod-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.llm-prod-media {
		position: relative;
		top: auto;
	}

	.llm-facts {
		gap: 8px 14px;
		padding: 12px 14px;
	}

	.llm-prod-more-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.llm-prod-sticky {
		display: flex;
		align-items: center;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		background: #fff;
		border-top: 1px solid var(--llm-bronze-light);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	}

	.llm-prod-sticky[hidden] {
		display: none;
	}

	/* While the bar shows, the ☰ button and Astra's scroll-to-top ride above it. */
	body.llm-hdr-on.llm-sticky-on .llm-hdr-fab,
	body.llm-sticky-on #ast-scroll-top {
		bottom: calc(86px + env(safe-area-inset-bottom, 0px));
	}

	.llm-prod-sticky-price {
		font-weight: 700;
		font-size: 1.25rem;
		color: var(--llm-night);
		flex: 0 0 auto;
	}

	.llm-prod-sticky-btn {
		flex: 1 1 auto;
		margin: 0;
		border: 0;
		cursor: pointer;
		background: var(--llm-red);
		color: #fff;
	}

	.llm-prod-sticky-btn:hover {
		background: var(--llm-red-ink);
	}
}

/* ------------------------------------------------------------------------
   v2.3.0 — S6: add-to-cart buttons, Carry-on bar (inline), cart & checkout.
   Base .llm-carry rules are in header.css (inline on every page); these are
   the inline/product/cart variants and the Woo page dressing.
   ------------------------------------------------------------------------ */
.llm-btn-add .llm-btn-plane { width: 20px; height: 13px; flex: 0 0 auto; }
.llm-btn-add.is-busy { opacity: 0.7; pointer-events: none; }
.llm-btn-add.is-refused { background: var(--llm-red) !important; color: #fff !important; }

/* v2.3.4 — card Add to cart with the logo gradient as its edge ("hover C", Jubair 29 Sep). The
   gradient edge is a padding-box/border-box pair so it needs no extra element.
   v3.9.0 (Jubair's pick 6.3, 2 Oct): cream at rest with Night words so the logo-gradient plane
   shows; hover = the lighter Night (#173539), exactly as the home page Deals cards. */
.llm-btn-add {
	border: 1.5px solid transparent;
	background: linear-gradient(var(--llm-cream), var(--llm-cream)) padding-box,
		linear-gradient(90deg, #B64E50, #047E9C) border-box;
	color: var(--llm-night);
}
.llm-btn-add:hover,
.llm-btn-add:focus-visible,
.llm-card:hover .llm-btn-add:hover,
.llm-card:hover .llm-btn-add {
	background: linear-gradient(#173539, #173539) padding-box,
		linear-gradient(90deg, #B64E50, #047E9C) border-box;
	color: #fff;
}
.llm-btn-add { --llm-case-fill: var(--llm-cream); }
.llm-btn-add:hover,
.llm-card:hover .llm-btn-add { --llm-case-fill: #173539; }
/* the "You may also like" track has a white card hover; the add button keeps its own look there */
.llm-track .llm-card:hover .llm-btn-add,
.llm-track .llm-btn-add:hover {
	background: linear-gradient(#173539, #173539) padding-box,
		linear-gradient(90deg, #B64E50, #047E9C) border-box;
	color: #fff;
}
.llm-btn-add.is-added,
.llm-card:hover .llm-btn-add.is-added {
	background: linear-gradient(var(--llm-night), var(--llm-night)) padding-box,
		linear-gradient(90deg, #B64E50, #047E9C) border-box !important;
	color: #fff !important;
}

/* v2.3.4 — the flight (cart.js rig()/fly()). Transform, opacity and path
   position only. A rigged button holds a label span and a 26 × 20 px flight
   box: the outline brand plane (favicon set, logo gradient) on a wrapper that
   rides a curved path, a carry-on case body under it and the lid + handle
   over it. Rest: plane only. Hover: plane lifts 3 px, noses up 8°. Add: case
   rolls in mid-loop, lid opens, plane dives in behind the rim, lid closes,
   label reads "Added to cart" ~2 s, then all of it resets. */
.llm-flyer { position: relative; }
.llm-flyer .llm-btn-label { display: inline-block; }
.llm-flyer.is-swap .llm-btn-label { animation: llm-labswap .36s ease; }
@keyframes llm-labswap {
	0%   { opacity: 1; transform: translateY(0); }
	45%  { opacity: 0; transform: translateY(-4px); }
	55%  { opacity: 0; transform: translateY(4px); }
	100% { opacity: 1; transform: translateY(0); }
}
.llm-flyer .llm-btn-flight {
	position: relative;
	display: inline-block; flex: 0 0 auto;
	width: 26px; height: 20px;
	vertical-align: middle;
}
.llm-flyer .llm-btn-flight .llm-pw {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	width: 26px; height: 18px; margin: -9px 0 0 -13px;
	display: block;
	will-change: transform;
}
.llm-flyer .llm-btn-flight .llm-pw svg {
	display: block; width: 26px; height: 18px;
	transform-origin: 50% 50%;
	transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.llm-flyer .llm-btn-flight .llm-case {
	position: absolute; left: 50%; top: 50%;
	width: 20px; height: 20px; display: block;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.5);
	will-change: transform, opacity;
}
.llm-flyer .llm-btn-flight .llm-case-body   { z-index: 2; }
.llm-flyer .llm-btn-flight .llm-case-lidsvg { z-index: 3; overflow: visible; }
.llm-flyer .llm-btn-flight .llm-case-fill { fill: var(--llm-case-fill, var(--llm-night)); }
.llm-flyer .llm-btn-flight .llm-case-lid    { transform-box: fill-box; transform-origin: 0% 100%; }
.llm-flyer .llm-btn-flight .llm-case-settle { transform-box: fill-box; transform-origin: 50% 100%; }
/* hover lift */
.llm-flyer:hover .llm-btn-flight .llm-pw svg,
.llm-flyer:focus-visible .llm-btn-flight .llm-pw svg,
.llm-card:hover .llm-flyer .llm-btn-flight .llm-pw svg { transform: translateY(-3px) rotate(-8deg); }
/* the path: climb, one loop, dive — coordinates are the wrapper's own box, centre (13,9) */
@supports (offset-path: path("M0 0")) {
	.llm-flyer .llm-btn-flight .llm-pw {
		offset-path: path("M13,9 C17,6 22,2 24,-4 C26,-10 25,-16 20,-17 C15,-18 10,-14 10,-8 C10,-2 16,1 20,-2 C23,-4 22,-7 19,-7 C16,-7 14,-3 14,1 C14,4 13.5,8 13,11");
		offset-rotate: auto 30deg;
		offset-distance: 0%;
	}
	.llm-flyer.is-flying .llm-btn-flight .llm-pw { animation: llm-ride 1.35s cubic-bezier(.42, 0, .3, 1) forwards; }
	@keyframes llm-ride { from { offset-distance: 0%; } to { offset-distance: 100%; } }
}
@supports not (offset-path: path("M0 0")) {
	.llm-flyer.is-flying .llm-btn-flight .llm-pw { animation: llm-loopfb 1.35s cubic-bezier(.42, 0, .3, 1) forwards; }
	@keyframes llm-loopfb {
		0%   { transform: translate(0, 0) rotate(0); }
		30%  { transform: translate(10px, -18px) rotate(-70deg); }
		55%  { transform: translate(-4px, -26px) rotate(-190deg); }
		80%  { transform: translate(4px, -12px) rotate(-320deg); }
		100% { transform: translate(0, 2px) rotate(-360deg); }
	}
}
.llm-flyer.is-flying .llm-btn-flight .llm-pw svg { animation: llm-shrink 1.35s linear forwards; transition: none; }
@keyframes llm-shrink {
	0%, 62% { transform: scale(1); opacity: 1; }
	88%     { transform: scale(.55); opacity: 1; }
	94%,100%{ transform: scale(.45); opacity: 0; }
}
.llm-flyer.is-flying .llm-btn-flight .llm-case { animation: llm-casein .3s .51s cubic-bezier(.2, .9, .3, 1.1) forwards; }
@keyframes llm-casein {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.llm-flyer.is-flying .llm-btn-flight .llm-case-lid { animation: llm-lid 1.35s linear forwards; }
@keyframes llm-lid {
	0%, 52%  { transform: rotate(0); }
	66%, 88% { transform: rotate(-78deg); }
	100%     { transform: rotate(0); }
}
.llm-flyer.is-flying .llm-btn-flight .llm-case-settle { animation: llm-settle .3s 1.32s ease; }
@keyframes llm-settle { 45% { transform: scaleY(.92) scaleX(1.05); } }
/* after the flight: plane away, case closed, until the label reverts */
.llm-flyer.is-added .llm-btn-flight .llm-pw svg { opacity: 0; }
.llm-flyer.is-added .llm-btn-flight .llm-case { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
	.llm-flyer .llm-btn-flight .llm-pw svg { transition: none; }
	.llm-flyer:hover .llm-btn-flight .llm-pw svg,
	.llm-card:hover .llm-flyer .llm-btn-flight .llm-pw svg { transform: none; }
	.llm-flyer.is-flying .llm-btn-flight .llm-pw,
	.llm-flyer.is-flying .llm-btn-flight .llm-case-lid,
	.llm-flyer.is-flying .llm-btn-flight .llm-case-settle { animation: none; }
	.llm-flyer.is-flying .llm-btn-flight .llm-pw svg { animation: none; opacity: 0; }
	.llm-flyer.is-flying .llm-btn-flight .llm-case { animation: none; opacity: 1; transform: translate(-50%, -50%); }
	.llm-flyer.is-swap .llm-btn-label { animation: none; }
}
/* the product page button is bigger; scale the flight box with it, and give the
   case the button's own colour so the plane disappears behind it */
.llm-product .llm-buy form.cart .single_add_to_cart_button .llm-btn-flight { width: 30px; height: 22px; }
.llm-product .llm-buy form.cart .single_add_to_cart_button .llm-btn-flight .llm-pw svg { width: 28px; height: 19px; }
.llm-product .llm-buy form.cart .single_add_to_cart_button .llm-btn-flight .llm-case { width: 22px; height: 22px; }
.llm-product .llm-buy form.cart .single_add_to_cart_button,
.llm-product .llm-prod-sticky-btn { --llm-case-fill: var(--llm-red); }
.llm-product.is-takeoff .llm-buy form.cart .single_add_to_cart_button,
.llm-product.is-takeoff .llm-prod-sticky-btn { --llm-case-fill: var(--llm-red); }
.llm-product.is-cruise .llm-buy form.cart .single_add_to_cart_button,
.llm-product.is-cruise .llm-prod-sticky-btn { --llm-case-fill: var(--llm-bronze); }
.llm-product.is-landing .llm-buy form.cart .single_add_to_cart_button,
.llm-product.is-cbd .llm-buy form.cart .single_add_to_cart_button,
.llm-product.is-landing .llm-prod-sticky-btn,
.llm-product.is-cbd .llm-prod-sticky-btn { --llm-case-fill: var(--llm-teal-ink); }
.llm-product.is-boarding .llm-buy form.cart .single_add_to_cart_button,
.llm-product.is-boarding .llm-prod-sticky-btn { --llm-case-fill: var(--llm-sand); }

.llm-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 12px);
	z-index: 9000;
	max-width: min(92vw, 520px);
	/* v2.3.6 — Night, white text, the logo gradient as its edge (Jubair) */
	border: 1.5px solid transparent;
	background: linear-gradient(var(--llm-night), var(--llm-night)) padding-box,
		linear-gradient(90deg, #B64E50, #047E9C) border-box;
	color: #fff;
	font-family: var(--llm-mono);
	font-size: 0.86rem;
	line-height: 1.4;
	padding: 12px 16px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(14, 35, 38, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.llm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Inline Carry-on (product page, cart, checkout) */
.llm-carry-inline {
	background: #ebe1d0;
	border: 1.5px solid var(--llm-bronze-ink);
	border-radius: 10px;
	padding: 10px 14px 12px;
	margin: 0 0 14px;
	max-width: 620px;
}
.llm-carry-inline .llm-carry-lbl { font-size: 0.72rem; }
.llm-carry-inline .llm-carry-track { height: 12px; margin-top: 8px; }
.llm-carry-msg { margin: 8px 0 0 !important; font-family: Geist, system-ui, sans-serif; font-size: 0.9rem; line-height: 1.4; color: #444; }
.llm-carry-msg:empty { display: none; }
.llm-carry.is-full .llm-carry-msg { color: var(--llm-red-ink); font-weight: 600; }
.llm-product .llm-carry-inline { margin-top: 2px; }
/* v2.3.20 — removed: the product page's Add to cart was greyed and unclickable at 30g. Since
   2.3.13 adds are always allowed and the limit is enforced at checkout (Jubair). */

/* v2.3.20 — Astra's saved breadcrumb separator lost its backslash, so it prints a broken
   glyph (a NUL byte + "0bb"). Put the » back. */
body .trail-items li::after { content: "\00bb"; }
/* v2.3.1 — Woo notices on the product page, in our voice. */
.llm-prod-notices { margin: 0 0 14px; }
.llm-prod-notices .woocommerce-message,
.llm-prod-notices .woocommerce-error,
.llm-prod-notices .woocommerce-info {
	background: #fff;
	border: 1.5px solid var(--llm-teal-ink);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 10px;
	font-size: 0.95rem;
	color: var(--llm-night);
	list-style: none;
}
.llm-prod-notices .woocommerce-error { border-color: var(--llm-red); color: var(--llm-red-ink); }
.llm-prod-notices .woocommerce-message::before,
.llm-prod-notices .woocommerce-error::before,
.llm-prod-notices .woocommerce-info::before { display: none; }
.llm-prod-notices .woocommerce-message .button,
.llm-prod-notices .woocommerce-error .button {
	float: none;
	display: inline-block;
	margin: 0 0 0 10px;
	font-family: var(--llm-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--llm-night);
	color: var(--llm-cream);
	border-radius: 6px;
	padding: 6px 10px;
	text-decoration: none;
}

/* v3.2.0 — low stock (3 or fewer) and price per gram (Flower).
   Jubair, 1 Oct: the corner spot of option 1.1 with the gauge of option 1.5; multi-size cards get
   a dot on the low size (2.1) and a gauge line under the chips; product page 4.1 with the gauge. */
.llm-gauge { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.llm-gauge u { display: block; width: 6px; height: 11px; border-radius: 2px; background: #e4d9c8; text-decoration: none; }
.llm-gauge u.is-on { background: var(--llm-red); }
.llm-flag-low {
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	color: var(--llm-red-ink);
	box-shadow: 0 0 0 1px rgba(14, 35, 38, 0.08);
}
.llm-lowline {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-family: var(--llm-mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--llm-red-ink);
}
.llm-lowline span { text-transform: none; letter-spacing: 0.03em; }
.llm-size { position: relative; }
.llm-size.is-low::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--llm-red);
	border: 2px solid #fff;
}
.llm-stock.is-low { color: var(--llm-red-ink); font-weight: 700; }
.llm-ppg {
	font-family: var(--llm-mono);
	font-size: 0.84rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--llm-bronze-ink);
	white-space: nowrap;
}
.llm-prod-price .llm-ppg { font-size: 0.95rem; }

/* v3.4.0 — the plane on red (Take Off) and teal (Landing / CBD) Add to cart buttons: blush → sky, so it
   doesn't disappear into the button (Jubair's pick 2.1). Cruise and Boarding keep the brand gradient. */
.llm-product.is-takeoff .llm-buy form.cart .single_add_to_cart_button .llm-plane-o path,
.llm-product.is-landing .llm-buy form.cart .single_add_to_cart_button .llm-plane-o path,
.llm-product.is-cbd .llm-buy form.cart .single_add_to_cart_button .llm-plane-o path,
.llm-product:not(.is-cruise):not(.is-boarding):not(.is-takeoff):not(.is-landing):not(.is-cbd) .llm-buy form.cart .single_add_to_cart_button .llm-plane-o path { fill: url(#llmPlaneGradLt); }

/* v5.1.2 — iPhone / narrow phones (Jubair's iOS Safari check, 2 Oct).
   1) The Take Off / Landing badge ran past the card edge: badges never wider than the card, and the
      occasion badge may wrap onto a second line on phones.
   2) A tapped card kept its hover look on iPhone (Add to cart stuck in Night). On touch screens the card
      and button keep the rest look; the press itself still shows.
   3) "Add to cart" broke onto two lines on 375–390px phones: one line, slightly tighter. */
.llm-badge { max-width: 100%; }
@media (max-width: 600px) {
	.llm-badge-occ { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
	.llm-btn.llm-btn-add { white-space: nowrap; gap: 6px; padding-left: 8px; padding-right: 8px; letter-spacing: 0.06em; font-size: 0.82rem; }
}
@media (max-width: 380px) {
	.llm-btn.llm-btn-add { letter-spacing: 0.03em; font-size: 0.76rem; }
	.llm-btn.llm-btn-add .llm-btn-plane { width: 16px; height: 11px; }
}
@media (hover: none) {
	.llm-card:hover .llm-btn-add:not(.is-added):not(:active):not(.is-busy) {
		background: linear-gradient(var(--llm-cream), var(--llm-cream)) padding-box,
			linear-gradient(90deg, #B64E50, #047E9C) border-box;
		color: var(--llm-night);
		--llm-case-fill: var(--llm-cream);
	}
	.llm-track .llm-card:hover .llm-btn-add:not(.is-added):not(:active):not(.is-busy) { background: var(--llm-cream); color: var(--llm-night); }
}

/* v5.1.4 — phone product page: the sticky Add to cart bar in the category bar's light bronze instead of white
   (Jubair, 2 Oct), with a bronze top edge. Mid bronze was not used: Cruise products' button is that bronze. */
@media (max-width: 720px) {
	/* v5.1.5 — floating bar (Jubair's pick B): off the bottom edge so iPhone Safari doesn't stretch its colour
	   under the address bar; same size on iPhone and Android. */
	.llm-prod-sticky {
		left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		background: #ebe1d0; border: 1.5px solid var(--llm-bronze); border-radius: 14px;
		padding: 8px 10px 8px 14px; box-shadow: 0 8px 22px rgba(14, 35, 38, 0.18);
	}
	body.llm-sticky-on .llm-cart-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
/* v5.1.5 — the sticky (phone) Add to cart gets the same light plane as the main button (pick 2.1). */
.llm-product.is-takeoff .llm-prod-sticky-btn .llm-plane-o path,
.llm-product.is-landing .llm-prod-sticky-btn .llm-plane-o path,
.llm-product.is-cbd .llm-prod-sticky-btn .llm-plane-o path,
.llm-product:not(.is-cruise):not(.is-boarding):not(.is-takeoff):not(.is-landing):not(.is-cbd) .llm-prod-sticky-btn .llm-plane-o path { fill: url(#llmPlaneGradLt); }