/**
* LimeLine — brand stylesheet.
*
* Lifted from the Claude-Design prototype (limeline-extract/limeline/project/LimeLine.html).
* All custom utilities are namespaced `ll-` to avoid colliding with WooCommerce
* or Elementor classes. The CSS variables are global by design — Elementor's
* Global Colors are also wired to these tokens via theme.json.
*/
/* ============= Design tokens =============
Palette derived from the LimeLine logo + drip-hero illustration.
Lime (logo highlight + CTAs), Emerald (rind / structural depth), Amber (resin),
Purple (cannabis-flower accents), White → Grey → Black neutrals.
Old variable names (--ll-cream-*, --ll-ink-*, --ll-honey-*) are kept as
aliases for backward-compat with inline styles already shipped in plugin
PHP files. New code should prefer the canonical names below. */
:root {
/* === Lime — primary brand === */
--ll-lime-50: #F0FDD0;
--ll-lime-100: #E2FBA0;
--ll-lime-200: #CDF66E;
--ll-lime-300: #B8FF1F; /* logo highlight */
--ll-lime-400: #98E632;
--ll-lime-500: #7CEA00; /* primary CTA */
--ll-lime-600: #4FBE00;
--ll-lime-700: #277A00;
--ll-lime-800: #1B5500;
--ll-lime-900: #0F3F00;
/* === Emerald — depth, structural === */
--ll-emerald-50: #ECFDF5;
--ll-emerald-100: #D1FAE5;
--ll-emerald-300: #6EE7B7;
--ll-emerald-500: #10B981; /* primary emerald */
--ll-emerald-700: #047857; /* deep, "live" indicators */
--ll-emerald-900: #064E3B;
/* === Amber — resin === */
--ll-amber-50: #FFFBEB;
--ll-amber-100: #FEF3C7;
--ll-amber-300: #FCD34D;
--ll-amber-500: #F59E0B; /* primary resin */
--ll-amber-600: #D97706;
--ll-amber-700: #B45309; /* deep hash */
--ll-amber-800: #92400E;
--ll-amber-900: #78350F;
/* === Purple — accents (cannabis flower complement) === */
--ll-purple-100: #F3E8FF;
--ll-purple-300: #C4B5FD;
--ll-purple-500: #8B5CF6; /* primary purple */
--ll-purple-700: #6D28D9;
/* === Neutrals === */
--ll-white: #FFFFFF;
--ll-grey-50: #FAFAFA;
--ll-grey-100: #F5F5F5;
--ll-grey-200: #E5E5E5;
--ll-grey-300: #D4D4D4;
--ll-grey-400: #A3A3A3;
--ll-grey-500: #737373;
--ll-grey-600: #525252; /* added 2026-04-26 — fills the gap; was undefined but referenced 20× across CSS + PHP, causing silent fallback to inherited color */
--ll-grey-700: #404040;
--ll-grey-800: #262626;
--ll-grey-900: #171717;
--ll-black: #0A0A0A;
/* === Status === */
--ll-warn: var(--ll-amber-700);
--ll-ok: var(--ll-emerald-700);
/* === Legacy aliases — keep all v1.0 inline styles working unchanged ===
Map cream → white/grey, ink → black/grey, honey → amber.
New code should use the canonical names above. */
--ll-cream-50: var(--ll-white);
--ll-cream-100: var(--ll-grey-50);
--ll-cream-200: var(--ll-grey-100);
--ll-cream-300: var(--ll-grey-200);
--ll-ink-900: var(--ll-black);
--ll-ink-700: var(--ll-grey-900);
--ll-ink-500: var(--ll-grey-700);
--ll-ink-400: var(--ll-grey-500);
--ll-ink-300: var(--ll-grey-400);
--ll-line: var(--ll-grey-200);
--ll-line-2: var(--ll-grey-300);
--ll-honey-300: var(--ll-amber-300);
--ll-honey-500: var(--ll-amber-500);
--ll-honey-600: var(--ll-amber-600);
--ll-honey-700: var(--ll-amber-700);
/* === Radius / shadow === */
--ll-radius-xs: 4px;
--ll-radius-sm: 6px;
--ll-radius: 10px;
--ll-radius-lg: 18px;
--ll-radius-xl: 28px;
--ll-shadow-sm: 0 1px 0 rgba(10, 10, 10, .04), 0 1px 2px rgba(10, 10, 10, .06);
--ll-shadow: 0 2px 4px rgba(10, 10, 10, .04), 0 12px 28px -16px rgba(10, 10, 10, .14);
--ll-shadow-lg: 0 24px 60px -28px rgba(10, 10, 10, .22), 0 4px 10px rgba(10, 10, 10, .06);
/* === Typography === */
--ll-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--ll-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--ll-font-display: 'Fredoka', 'Inter', 'Helvetica Neue', Helvetica, sans-serif;
}
/* Dark theme — invert neutrals, keep brand colors. */
body[data-theme="dark"] {
--ll-white: #0A0A0A;
--ll-grey-50: #171717;
--ll-grey-100: #262626;
--ll-grey-200: #404040;
--ll-grey-300: #525252;
--ll-grey-400: #737373;
--ll-grey-500: #A3A3A3;
--ll-grey-600: #BABABA; /* dark-mode counterpart for the new grey-600 */
--ll-grey-700: #D4D4D4;
--ll-grey-800: #E5E5E5;
--ll-grey-900: #F5F5F5;
--ll-black: #FAFAFA;
}
/* Honey theme retired — superseded by the canonical amber palette. */
/* ============= Page-level base ============= */
html, body { overflow-x: hidden; }
body {
font-family: var(--ll-font-sans);
color: var(--ll-ink-900);
background: var(--ll-cream-50);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 15px;
line-height: 1.5;
}
/* ============= Hello Elementor reset.css overrides =============
The parent theme's reset.css ships #c36 (magenta) as the default link AND
button color, plus #336 (dark blue) on hover. Pink is not in the LimeLine
palette — operator rule 2026-04-27: "nothing should be pink on this
website." Replace with amber for unstyled links + inherit-then-lime for
buttons. Component-level styling (.ll-btn, .cat-name, etc.) still wins
wherever it's declared. Use `body` prefix to outweigh Hello's `a {…}`. */
body a { color: var(--ll-amber-700); text-decoration: none; }
body a:hover, body a:focus, body a:active { color: var(--ll-lime-700); }
body a:visited { text-decoration: none; }
body button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"] {
color: inherit;
border-color: var(--ll-grey-300);
}
body button:hover, body button:focus,
body input[type="button"]:hover, body input[type="button"]:focus,
body input[type="submit"]:hover, body input[type="submit"]:focus { color: inherit; }
/* Our header.php / footer.php / page.php fully replace Hello Elementor's
chrome. The legacy `.site-header / .site-footer` selectors below catch
any orphaned cases (e.g. archive views without a custom template). */
body.wp-child-theme-limeline .site-header,
body.wp-child-theme-limeline .site-footer,
body.wp-child-theme-limeline .page-header,
body.wp-child-theme-limeline main > .page-header,
body.wp-child-theme-limeline main .entry-title { display: none !important; }
body.wp-child-theme-limeline .ll-page-content,
body.wp-child-theme-limeline .ll-main { max-width: 100%; padding: 0; margin: 0; }
/* ============= Strip 1: Utility bar ============= */
.ll-utility-bar {
background: var(--ll-grey-900);
color: var(--ll-grey-300);
font-size: 12px;
border-bottom: 1px solid var(--ll-grey-800);
}
.ll-utility-bar .row {
max-width: 1440px; margin: 0 auto;
padding: 8px 32px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.ll-utility-bar .left { color: var(--ll-grey-400); letter-spacing: .03em; }
.ll-utility-bar .right { display: inline-flex; align-items: center; gap: 8px; }
.ll-utility-bar .right a {
color: var(--ll-grey-100); text-decoration: none; padding: 2px 6px;
border-radius: 4px; transition: color .15s ease;
}
.ll-utility-bar .right a:hover { color: var(--ll-lime-300); }
.ll-utility-bar .sep { color: var(--ll-grey-700); }
@media (max-width: 700px) {
.ll-utility-bar .row { padding: 6px 16px; flex-direction: column; gap: 4px; }
.ll-utility-bar .left { font-size: 11px; }
}
/* ============= Strip 3: Main nav ============= */
.ll-topnav {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--ll-grey-200);
box-shadow: 0 1px 0 rgba(10, 10, 10, .02);
}
body[data-theme="dark"] .ll-topnav {
background: rgba(15, 15, 15, .92);
border-bottom-color: var(--ll-grey-200);
}
.ll-topnav__row {
display: flex; align-items: center; gap: 24px;
padding: 14px 40px;
/* Operator decision 2026-04-26 (revised): row is centered horizontally
with a max-width, matching the nav row below. The header *strip* still
spans full viewport (the background lives on the parent .ll-topnav);
it's the inner row that's bounded + centered for visual consistency. */
max-width: 1440px;
margin: 0 auto;
}
.ll-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
/* Operator decision 2026-04-26: logo 50% bigger (was 36px). */
.ll-brand img { height: 54px; width: auto; }
/* Smart search — segmented input with category dropdown + submit */
.ll-smart-search {
flex: 1;
max-width: 720px;
display: flex; align-items: stretch;
border: 1px solid var(--ll-grey-300);
border-radius: 999px;
background: var(--ll-white);
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ll-smart-search:focus-within {
border-color: var(--ll-lime-500);
box-shadow: 0 0 0 3px rgba(124, 234, 0, .18);
}
.ll-smart-search select {
border: 0; background: var(--ll-grey-50);
padding: 0 28px 0 16px; font: inherit; font-size: 13px;
color: var(--ll-grey-700); cursor: pointer;
border-right: 1px solid var(--ll-grey-200);
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
/* Operator decision 2026-04-26: cap dropdown width so the input gets
the typing room. Was min-width:150px (could grow), now fixed-size
that won't expand and steal horizontal space from the input. */
width: 150px;
min-width: 150px;
max-width: 150px;
flex: 0 0 150px;
flex-shrink: 0;
outline: none;
}
.ll-smart-search input[type="search"] {
flex: 1 1 auto;
min-width: 0; /* allow input to shrink in flex layout */
border: 0; background: transparent;
padding: 0 16px; font: inherit; font-size: 14px;
color: var(--ll-black); outline: none;
min-height: 44px;
width: 100%;
}
.ll-smart-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; appearance: none;
}
.ll-smart-search input[type="search"]::placeholder { color: var(--ll-grey-500); }
.ll-smart-search button {
border: 0; background: var(--ll-lime-500);
color: var(--ll-black); padding: 0 22px;
cursor: pointer; transition: background .15s ease;
display: inline-flex; align-items: center; justify-content: center;
}
.ll-smart-search button:hover { background: var(--ll-lime-300); }
/* Account / wishlist / cart icon buttons (with labels on desktop) */
.ll-nav-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ll-icon-btn {
display: inline-flex; flex-direction: column; align-items: center;
gap: 2px; padding: 6px 10px; min-width: 56px;
background: transparent; border: 0; border-radius: 8px;
color: var(--ll-grey-700); position: relative; text-decoration: none;
transition: color .12s ease, background .12s ease;
font-size: 11px; font-family: var(--ll-font-mono); letter-spacing: .04em;
text-transform: uppercase;
}
.ll-icon-btn:hover { color: var(--ll-lime-700); background: var(--ll-grey-50); }
.ll-icon-btn .ll-icon-label { display: block; }
.ll-cart-count {
position: absolute; top: 0; right: 4px;
background: var(--ll-lime-500); color: var(--ll-black);
font-size: 10px; font-weight: 700; border-radius: 999px;
min-width: 18px; height: 18px; padding: 0 5px;
display: grid; place-items: center;
font-family: var(--ll-font-mono);
border: 2px solid var(--ll-white);
}
@media (max-width: 900px) {
.ll-icon-btn .ll-icon-label { display: none; }
.ll-icon-btn { min-width: 44px; }
}
/* ============= Bottom row: nav with mega menus ============= */
.ll-mainnav {
background: var(--ll-white);
border-top: 1px solid var(--ll-grey-100);
}
.ll-mainnav__row {
max-width: 1440px; margin: 0 auto;
padding: 0 32px;
/* Operator decision 2026-04-26: center the nav menu items horizontally. */
display: flex; align-items: stretch; gap: 4px;
justify-content: center;
position: relative;
}
.ll-nav-item { position: static; }
.ll-nav-item > a {
display: inline-flex; align-items: center;
padding: 14px 18px;
color: var(--ll-grey-700); font-size: 14px; font-weight: 500;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.ll-nav-item > a:hover,
.ll-nav-item:focus-within > a {
color: var(--ll-lime-700);
border-bottom-color: var(--ll-lime-500);
}
.ll-nav-item > a[data-active="true"] {
color: var(--ll-black);
border-bottom-color: var(--ll-lime-500);
font-weight: 600;
}
/* Mega menu — full-width dropdown panel */
.ll-megamenu {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--ll-white);
border-top: 1px solid var(--ll-grey-200);
border-bottom: 1px solid var(--ll-grey-200);
box-shadow: 0 24px 60px -28px rgba(10, 10, 10, .22);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 49;
}
.ll-nav-item:hover .ll-megamenu,
.ll-nav-item:focus-within .ll-megamenu {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
}
.ll-megamenu__inner {
max-width: 1440px; margin: 0 auto;
padding: 32px;
display: grid; grid-template-columns: 3fr 1fr;
column-gap: 48px;
row-gap: 16px;
align-items: start;
}
/* Journal-only — section headers + cities row span full width.
Cats area + featured aside auto-place into the 3fr / 1fr cells. */
.ll-megamenu__sectionhead,
.ll-megamenu__cities,
.ll-megamenu__finefootnote {
grid-column: 1 / -1;
}
.ll-megamenu__sectionhead {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-bottom: 1px solid var(--ll-grey-200);
padding-bottom: 8px;
margin-bottom: 0;
}
.ll-megamenu__sectionhead--delivery {
margin-top: 16px;
border-bottom-color: var(--ll-lime-300);
}
.ll-megamenu__sectionhead--services {
margin-top: 12px;
border-bottom-color: var(--ll-emerald-500, var(--ll-emerald-700));
}
/* Services row uses an emerald accent on city tiles to read distinctly
from the lime-accented Delivery row above it. Same physical layout. */
.ll-megamenu__cities--services .ll-megamenu__city {
background: var(--ll-cream-50);
border-color: var(--ll-emerald-700);
color: var(--ll-emerald-700);
}
.ll-megamenu__cities--services .ll-megamenu__city:hover {
background: var(--ll-emerald-700);
color: var(--ll-cream-50);
}
.ll-megamenu__sectionlabel {
font-family: var(--ll-font-display);
font-weight: 700;
font-size: 18px;
color: var(--ll-grey-900);
letter-spacing: -0.01em;
}
.ll-megamenu__sectionlink {
font-family: var(--ll-font-mono);
font-size: 11px;
color: var(--ll-grey-600);
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
}
.ll-megamenu__sectionlink:hover { color: var(--ll-lime-700); }
.ll-megamenu__cities {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
align-items: baseline;
padding: 4px 0 8px;
}
.ll-megamenu__city {
font-family: var(--ll-font-sans);
font-size: 14px;
color: var(--ll-grey-800);
text-decoration: none;
padding: 4px 10px;
border-radius: 6px;
transition: color 120ms ease, background 120ms ease;
}
.ll-megamenu__city:hover {
color: var(--ll-lime-700);
background: var(--ll-cream-50, #FAF7EE);
}
.ll-megamenu__finefootnote {
font-family: var(--ll-font-mono);
font-size: 10px;
color: var(--ll-grey-500);
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: right;
padding-top: 4px;
}
.ll-megamenu__finefootnote a {
color: inherit;
text-decoration: underline dotted;
}
.ll-megamenu__finefootnote a:hover { color: var(--ll-grey-700); }
.ll-megamenu--narrow .ll-megamenu__inner { grid-template-columns: 2fr 1fr; }
.ll-megamenu__cats {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.ll-megamenu--narrow .ll-megamenu__cats { grid-template-columns: repeat(3, 1fr); }
.ll-megamenu__cat .cat-name {
font-family: var(--ll-font-display);
font-weight: 700; font-size: 14px;
color: var(--ll-black);
display: block; margin-bottom: 10px;
text-decoration: none;
letter-spacing: -.01em;
}
.ll-megamenu__cat .cat-name:hover { color: var(--ll-lime-700); }
.ll-megamenu__cat .cat-count {
font-family: var(--ll-font-mono); font-size: 11px;
color: var(--ll-grey-500); font-weight: 400; letter-spacing: 0;
}
.ll-megamenu__cat ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ll-megamenu__cat li a {
font-size: 13px; color: var(--ll-grey-700);
text-decoration: none; transition: color .12s ease;
}
.ll-megamenu__cat li a:hover { color: var(--ll-lime-700); }
.ll-megamenu__featured {
background: linear-gradient(180deg, var(--ll-grey-50), var(--ll-grey-100));
border-radius: 12px; padding: 20px;
border: 1px solid var(--ll-grey-200);
}
.ll-megamenu__featured .featured-name {
font-family: var(--ll-font-display); font-weight: 700;
font-size: 17px; color: var(--ll-black);
letter-spacing: -.01em;
margin-top: 6px;
}
/* Mobile collapse for the bottom nav row */
.ll-mainnav__toggle {
display: none; margin-left: auto; padding: 12px;
background: transparent; border: 0; cursor: pointer; color: var(--ll-grey-700);
}
/* Mobile-nav breakpoint widened to 1024px (was 900px) on 2026-04-27 to cover
landscape phones, Galaxy Fold unfolded, Galaxy DeX, and split-screen modes
where CSS viewport falls between 900–1024px. The topnav/smart-search rules
below also benefit from the wider breakpoint without ill effects. */
@media (max-width: 1024px) {
.ll-topnav__row { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
.ll-smart-search { order: 3; flex: 1 1 100%; }
/* ── Mobile main nav — Yozi-style flat accordion ────────────────────────
The bottom-row main nav becomes a vertical list of full-width rows
when the hamburger is tapped. Each row that has a mega menu shows a
`+` indicator and expands inline (accordion). Only one parent open
at a time. Mega menu content is flattened to a single-column list of
category links — no multi-column grid, no spotlight cards, no city
row. Reference pattern: https://demoapus2.com/yozi/yozi234/home-7/ */
.ll-mainnav__row {
padding: 0 !important;
display: flex !important;
flex-direction: column !important; /* stack children, no horizontal overflow */
align-items: stretch !important;
justify-content: flex-start !important;
max-width: 100vw !important;
gap: 0 !important;
}
.ll-mainnav__toggle {
display: inline-flex !important;
order: -1 !important; /* hamburger at the top, above items */
align-self: flex-start !important;
margin: 8px 16px !important;
}
.ll-mainnav__row > .ll-nav-item { display: none; }
.ll-mainnav__row.is-open > .ll-nav-item {
display: block !important;
width: 100% !important;
flex: 0 0 auto !important;
border-top: 1px solid var(--ll-grey-100);
}
.ll-mainnav__row.is-open > .ll-nav-item:last-of-type {
border-bottom: 1px solid var(--ll-grey-100);
}
.ll-mainnav__row.is-open > .ll-nav-item > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 14px 16px;
font-size: 15px;
font-weight: 500;
color: var(--ll-grey-900);
border-bottom: 0;
box-sizing: border-box;
}
/* Replace the desktop chevron with a Yozi-style + / − toggle on items
that have a mega menu. Hide the original SVG chevron on mobile. */
.ll-mainnav__row.is-open > .ll-nav-item.has-mega > a svg { display: none; }
.ll-mainnav__row.is-open > .ll-nav-item.has-mega > a::after {
content: "+";
font-family: var(--ll-font-mono);
font-size: 18px;
font-weight: 400;
color: var(--ll-grey-500);
line-height: 1;
margin-left: auto;
transition: transform .2s ease;
}
.ll-mainnav__row.is-open > .ll-nav-item.has-mega.is-expanded > a::after {
content: "−"; /* en-dash glyph reads cleanly as the open state */
}
/* ── Mega menu container — collapsed by default, expand on .is-expanded ── */
.ll-megamenu {
position: static;
box-shadow: none;
transform: none;
background: var(--ll-grey-50, #f7f7f7);
opacity: 0;
visibility: hidden;
pointer-events: none;
max-height: 0;
overflow: hidden;
transition: max-height .28s ease, opacity .18s ease;
}
/* Neutralise the desktop hover/focus-within auto-reveal on mobile —
tapping a child link gives it focus and would otherwise re-open
the parent's mega menu against the user's collapse intent. */
.ll-nav-item:hover > .ll-megamenu,
.ll-nav-item:focus-within > .ll-megamenu {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.ll-nav-item.has-mega.is-expanded > .ll-megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
max-height: 2400px;
}
/* ── Flatten the mega menu content into a single-column list ───────────── */
.ll-megamenu__inner {
display: block !important;
padding: 0 !important;
grid-template-columns: none !important;
gap: 0 !important;
max-width: 100% !important;
}
/* Hide the heavy desktop bits — featured cards, city tile row, footnote.
They don't belong in a phone-sized accordion. */
.ll-megamenu__featured,
.ll-megamenu__cities,
.ll-megamenu__finefootnote,
.ll-megamenu__sectionhead--delivery {
display: none !important;
}
/* Section header (BLOG, etc.) becomes a flat row */
.ll-megamenu__sectionhead {
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ll-grey-700);
background: transparent;
border-bottom: 1px solid var(--ll-grey-100);
}
.ll-megamenu__sectionlabel { font-weight: 600; }
.ll-megamenu__sectionlink {
font-size: 11px;
font-family: var(--ll-font-mono);
text-transform: uppercase;
color: var(--ll-grey-500);
}
/* Category grid → flat list. Each row = one tappable category link. */
.ll-megamenu__cats {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
padding: 0 !important;
}
.ll-megamenu__cat { border-bottom: 1px solid var(--ll-grey-100); }
.ll-megamenu__cat:last-child { border-bottom: 0; }
.ll-megamenu__cat .cat-name {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 14px 28px;
font-size: 14px;
color: var(--ll-grey-900);
text-decoration: none;
font-weight: 500;
}
.ll-megamenu__cat .cat-count {
margin-left: auto;
font-size: 11px;
font-family: var(--ll-font-mono);
color: var(--ll-grey-500);
}
/* Hide the deep-link list (individual articles / products) on mobile —
tapping the category header is enough; users can drill down on the
category landing page. Keeps the mobile menu scannable, not endless. */
.ll-megamenu__cat ul { display: none !important; }
}
/* ============= Footer chips block ============= */
.ll-footer-chips { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
/* ============= Footer trust badges row ============= */
.ll-footer-trust {
background: var(--ll-grey-900);
border-bottom: 1px solid #1F1F1F;
padding: 24px 32px;
}
.ll-footer-trust__row {
max-width: 1440px; margin: 0 auto;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .ll-footer-trust__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .ll-footer-trust__row { grid-template-columns: repeat(2, 1fr); } }
.ll-footer-trust .badge {
display: flex; align-items: center; gap: 12px;
color: var(--ll-grey-400);
}
.ll-footer-trust .badge svg { color: var(--ll-lime-500); flex-shrink: 0; }
.ll-footer-trust .badge strong {
display: block; font-family: var(--ll-font-display); font-weight: 700;
font-size: 13px; color: var(--ll-grey-100); letter-spacing: -.01em;
}
.ll-footer-trust .badge span {
display: block; font-size: 11px; color: var(--ll-grey-500);
font-family: var(--ll-font-mono);
}
/* ============= Footer social row ============= */
.ll-footer-social { display: flex; gap: 8px; margin-top: 18px; }
.ll-footer-social a {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid #2A2F22; border-radius: 999px;
color: var(--ll-grey-300);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ll-footer-social a:hover {
background: var(--ll-lime-500); color: var(--ll-black); border-color: var(--ll-lime-500);
}
/* ============= Footer payment + verification strip ============= */
.ll-footer-pay {
background: #0F0F0F;
border-top: 1px solid #1F1F1F;
padding: 24px 32px;
}
.ll-footer-pay__row {
max-width: 1440px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
align-items: center;
}
@media (max-width: 900px) { .ll-footer-pay__row { grid-template-columns: 1fr; } }
.ll-footer-pay__group .lbl {
font-size: 10px; color: var(--ll-grey-500);
text-transform: uppercase; letter-spacing: .1em;
margin-bottom: 8px;
}
.ll-footer-pay__icons { display: flex; gap: 6px; flex-wrap: wrap; }
.ll-footer-pay .pay-pill {
display: inline-flex; align-items: center;
padding: 5px 10px; border-radius: 4px;
background: #1A1A1A; color: var(--ll-grey-200);
font-size: 11px; font-weight: 600;
border: 1px solid #262626;
font-family: var(--ll-font-display);
}
.ll-footer-pay .pay-pill--alt {
background: var(--ll-emerald-900);
color: var(--ll-lime-300);
border-color: var(--ll-emerald-700);
}
/* ============= Section heads (shared) ============= */
.ll-section-head {
display: flex; align-items: flex-end; justify-content: space-between;
max-width: 1440px; margin: 0 auto 32px;
padding: 0 32px;
gap: 16px; flex-wrap: wrap;
}
/* ============= Hero slider =============
Slides are grid-stacked into the same cell so the slider height grows to
the tallest slide naturally — no clipping, no fixed min-height fights.
Cross-fade via opacity (the inactive slide stays in flow but invisible). */
.ll-hero-slider {
position: relative;
display: grid;
overflow: hidden;
background: linear-gradient(180deg, var(--ll-white), var(--ll-grey-50));
border-bottom: 1px solid var(--ll-grey-200);
}
.ll-hero-slide {
grid-area: 1 / 1; /* all slides share the same cell — they overlap */
opacity: 0; pointer-events: none;
transition: opacity .6s ease;
}
.ll-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.ll-hero-slide__inner {
max-width: 1440px; margin: 0 auto;
padding: 64px 32px 96px; /* extra bottom padding clears the controls */
display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
align-items: center;
width: 100%;
min-height: 480px;
}
/* Hero typography — keep within column without weird mid-word breaks */
.ll-hero-slide h1 {
font-size: clamp(40px, 5.5vw, 76px) !important;
line-height: 1 !important;
margin: 12px 0 18px !important;
hyphens: manual; /* don't auto-break on hyphens */
word-break: normal;
overflow-wrap: break-word;
}
.ll-hero-slide h1 span { display: inline-block; }
@media (max-width: 900px) {
.ll-hero-slide__inner { grid-template-columns: 1fr; gap: 32px; padding: 32px 16px 80px; min-height: 0; }
}
/* Slide variants — distinct backgrounds so the rotation reads */
.ll-hero-slide--hash {
background:
radial-gradient(900px 540px at 92% -10%, rgba(245, 158, 11, .22), transparent 60%),
radial-gradient(700px 520px at -5% 30%, rgba(124, 234, 0, .14), transparent 65%),
linear-gradient(180deg, var(--ll-white), var(--ll-grey-50));
}
.ll-hero-slide--wholesale {
background: linear-gradient(135deg, var(--ll-grey-900), var(--ll-black));
}
.ll-hero-slide--whitelabel {
background:
radial-gradient(900px 540px at 92% -10%, rgba(139, 92, 246, .22), transparent 60%),
linear-gradient(180deg, var(--ll-grey-50), var(--ll-white));
}
.ll-hero-content { max-width: 600px; }
.ll-hero-art { display: grid; place-items: center; }
.ll-hero-art img { max-width: 460px; width: 100%; height: auto; mix-blend-mode: multiply; }
.ll-hero-art--purple { display: flex; flex-direction: column; align-items: flex-start; }
.ll-hero-stat-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
max-width: 380px; width: 100%;
}
.ll-hero-stat-grid .stat {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 12px; padding: 18px;
}
.ll-hero-stat-grid .num {
font-family: var(--ll-font-mono); font-size: 28px; font-weight: 700;
color: var(--ll-lime-300); letter-spacing: -.02em;
}
.ll-hero-stat-grid .lbl {
font-size: 11px; color: var(--ll-grey-500); margin-top: 4px;
font-family: var(--ll-font-mono); text-transform: uppercase; letter-spacing: .08em;
}
.ll-hero-controls {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
display: flex; gap: 8px; z-index: 5;
}
.ll-hero-controls button {
width: 28px; height: 4px;
background: var(--ll-grey-300); border: 0; border-radius: 999px;
cursor: pointer; transition: background .2s ease, width .2s ease;
}
.ll-hero-controls button[data-active="true"] {
background: var(--ll-lime-500); width: 48px;
}
/* ============= Featured Categories tile grid =============
Flex-wrap with justify-content:center so the trailing row is centered
when the tile count doesn't divide evenly into the column count. Tiles
have a fixed flex basis so each row keeps consistent sizing. */
.ll-cat-tiles { padding: 64px 0; background: var(--ll-white); }
.ll-cat-tiles__grid {
max-width: 1440px; margin: 0 auto;
padding: 0 32px;
display: flex; flex-wrap: wrap; justify-content: center;
gap: 14px;
}
.ll-cat-tile {
flex: 0 1 calc((100% - 14px * 4) / 5); /* 5 per row, account for 4 gaps → 10 tiles = clean 5×2 grid */
min-width: 160px;
background: var(--ll-grey-50);
border: 1px solid var(--ll-grey-200);
border-radius: 16px;
padding: 24px 16px;
text-align: center; text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
display: flex; flex-direction: column; align-items: center; gap: 6px;
position: relative; overflow: hidden;
}
@media (max-width: 900px) {
.ll-cat-tile { flex-basis: calc((100% - 14px * 2) / 3); } /* 3 per row */
}
@media (max-width: 600px) {
.ll-cat-tile { flex-basis: calc((100% - 14px) / 2); min-width: 0; } /* 2 per row */
}
.ll-cat-tile:hover {
transform: translateY(-3px);
border-color: var(--ll-lime-500);
box-shadow: 0 12px 28px -16px rgba(10, 10, 10, .18);
}
.ll-cat-tile .icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}
.ll-cat-tile .icon svg { width: 100%; height: 100%; display: block; }
.ll-cat-tile--lime .icon { color: var(--ll-lime-700); }
.ll-cat-tile--emerald .icon { color: var(--ll-emerald-700); }
.ll-cat-tile--amber .icon { color: var(--ll-amber-700); }
.ll-cat-tile--purple .icon { color: var(--ll-purple-700); }
.ll-cat-tile .name {
font-family: var(--ll-font-display); font-weight: 700;
font-size: 16px; color: var(--ll-black); margin-top: 4px;
letter-spacing: -.01em;
}
.ll-cat-tile .meta {
font-family: var(--ll-font-mono); font-size: 11px;
color: var(--ll-grey-500); letter-spacing: .04em;
}
.ll-cat-tile .tag {
position: absolute; top: 10px; right: 10px;
font-family: var(--ll-font-mono); font-size: 9px;
letter-spacing: .08em; text-transform: uppercase;
padding: 2px 6px; border-radius: 4px;
}
.ll-cat-tile--lime .tag { background: var(--ll-lime-100); color: var(--ll-lime-900); }
.ll-cat-tile--emerald .tag { background: var(--ll-emerald-100); color: var(--ll-emerald-900); }
.ll-cat-tile--amber .tag { background: var(--ll-amber-100); color: var(--ll-amber-900); }
.ll-cat-tile--purple .tag { background: var(--ll-purple-100); color: var(--ll-purple-700); }
/* ============= Home — "The line, end to end" section =============
Desktop (≥1100px): 1fr 2fr split (lede left, 4-step strip right).
Tablet portrait + mobile + "Request desktop site": stack vertically.
minmax(0, …) + min-width:0 on children prevents grid blow-out on narrow
viewports — without these, long words inside the steps push the grid
beyond its 1280px container and the right column visually clips. */
.ll-line-end-to-end {
padding: 80px 32px;
border-top: 1px solid var(--ll-grey-200);
background: var(--ll-grey-50);
}
.ll-line-end-to-end__inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 64px;
align-items: flex-start;
}
.ll-line-end-to-end__lede {
flex: 1 1 320px;
min-width: 0;
}
.ll-line-end-to-end__steps {
flex: 2 1 460px;
min-width: 0;
}
.ll-line-end-to-end__title {
font-size: clamp(32px, 4vw, 56px);
margin: 12px 0 0;
line-height: 1.05;
overflow-wrap: anywhere;
}
.ll-line-end-to-end__mantra {
font-size: 14px;
margin-top: 24px;
/* Operator decision 2026-04-26: CULTIVATE.PROCESS.DELIVER. uses amber.
Was inheriting .ll-mantra's black, unreadable on dark green. */
color: var(--ll-amber-600) !important;
}
.ll-line-end-to-end__mantra .sep { color: var(--ll-amber-600) !important; }
/* Inner process strip — at narrow widths drop to 2-col then 1-col so cards
never push the parent wider than the viewport. */
@media (max-width: 900px) {
.ll-line-end-to-end { padding: 56px 20px; }
.ll-line-end-to-end__inner { gap: 32px; }
.ll-line-end-to-end__steps .ll-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.ll-line-end-to-end__steps .ll-process { grid-template-columns: 1fr; }
}
.ll-process .step { min-width: 0; }
/* ============= Product carousel ============= */
.ll-carousel { padding: 56px 0; }
.ll-carousel + .ll-carousel { padding-top: 0; }
.ll-carousel__head-actions { display: flex; align-items: center; gap: 8px; }
.ll-carousel__head-actions .ll-icon-btn {
flex-direction: row; min-width: 36px; padding: 0;
width: 36px; height: 36px;
border: 1px solid var(--ll-grey-200);
border-radius: 999px;
font-size: 22px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ll-grey-700);
background: var(--ll-white);
}
.ll-carousel__head-actions .ll-icon-btn:hover {
background: var(--ll-lime-100); color: var(--ll-lime-900); border-color: var(--ll-lime-300);
}
.ll-carousel__track {
display: flex; gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 8px 32px 24px;
max-width: 1440px; margin: 0 auto;
scrollbar-width: thin;
}
.ll-carousel__track::-webkit-scrollbar { height: 6px; }
.ll-product-card--carousel {
flex: 0 0 280px;
scroll-snap-align: start;
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease;
display: flex; flex-direction: column;
}
.ll-product-card--carousel:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px -20px rgba(10, 10, 10, .22);
}
.ll-product-card--carousel .photo {
aspect-ratio: 4/5;
display: grid; place-items: center;
position: relative; overflow: hidden;
}
.ll-product-card--carousel .body { padding: 14px 16px 18px; display: grid; gap: 4px; }
.ll-card-badges {
position: absolute; top: 10px; left: 10px;
display: flex; gap: 6px; flex-wrap: wrap;
}
/* ============= Brand showcase ============= */
.ll-brand-showcase { padding: 64px 32px; background: var(--ll-grey-50); border-top: 1px solid var(--ll-grey-200); border-bottom: 1px solid var(--ll-grey-200); }
.ll-brand-showcase__grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) { .ll-brand-showcase__grid { grid-template-columns: repeat(2, 1fr); } }
.ll-brand-tile {
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 12px;
padding: 20px 18px;
text-align: center; text-decoration: none;
transition: border-color .15s ease, transform .15s ease;
display: flex; flex-direction: column; gap: 4px; min-height: 96px;
justify-content: center;
}
.ll-brand-tile:hover {
border-color: var(--ll-lime-500);
transform: translateY(-2px);
}
.ll-brand-tile .name {
font-family: var(--ll-font-display); font-weight: 600;
font-size: 15px; color: var(--ll-black);
letter-spacing: -.01em;
}
.ll-brand-tile .type {
font-size: 11px; color: var(--ll-grey-500);
text-transform: uppercase; letter-spacing: .08em;
}
/* ============= Newsletter band ============= */
.ll-newsletter {
background: linear-gradient(135deg, var(--ll-emerald-900), var(--ll-grey-900));
padding: 64px 32px;
color: var(--ll-grey-100);
}
.ll-newsletter__inner {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.ll-newsletter__inner { grid-template-columns: 1fr; gap: 24px; }
}
.ll-newsletter__form {
display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
}
.ll-newsletter__form input[type="email"] {
flex: 1; min-width: 240px; padding: 12px 14px;
background: var(--ll-cream-50);
border: 1px solid var(--ll-line-2);
border-radius: 10px;
font: inherit; font-size: 15px; color: var(--ll-black);
outline: none;
}
.ll-newsletter__form input[type="email"]:focus {
border-color: var(--ll-lime-600);
box-shadow: 0 0 0 3px rgba(143, 203, 42, .18);
}
.ll-newsletter__form .ll-btn { white-space: nowrap; }
.ll-newsletter__form .msg {
flex: 1 1 100%;
margin-top: 6px;
font-size: 13px; color: var(--ll-lime-300);
}
@media (max-width: 600px) {
.ll-newsletter__form { flex-direction: column; }
.ll-newsletter__form input[type="email"],
.ll-newsletter__form .ll-btn { width: 100%; }
}
/* ============= Enterprise shop archive ============= */
.ll-shop-wrap {
max-width: 1440px; margin: 0 auto;
padding: 32px 32px 64px;
display: grid; gap: 32px;
}
.ll-shop-wrap--with-sidebar { grid-template-columns: 280px 1fr; }
.ll-shop-wrap--full { grid-template-columns: 1fr; }
@media (max-width: 900px) {
.ll-shop-wrap--with-sidebar { grid-template-columns: 1fr; }
}
/* Sidebar */
.ll-shop-sidebar {
position: sticky; top: 132px; align-self: flex-start;
}
/* Collapsible filters.
Desktop (>=901px): the is permanently expanded — summary hidden,
body always shown — so it behaves exactly like the old static sidebar.
Mobile (<=900px): summary becomes a 44px tap target and the body collapses
via the native open/closed state (no JS). */
.ll-filters__summary { display: none; }
.ll-filters > .ll-filters__body { display: block; }
@media (max-width: 900px) {
/* Stop the float: in the single-column layout a sticky sidebar pins
itself under the header while the product grid scrolls past it.
Return it to normal flow. */
.ll-shop-sidebar { position: static; top: auto; }
.ll-filters__summary {
display: flex; align-items: center; justify-content: space-between;
list-style: none; cursor: pointer;
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 12px;
padding: 14px 18px;
min-height: 44px; box-sizing: border-box;
font-family: var(--ll-font-display);
font-weight: 700; font-size: 15px; color: var(--ll-black);
}
.ll-filters__summary::-webkit-details-marker { display: none; }
.ll-filters__chev { transition: transform .15s ease; flex-shrink: 0; }
.ll-filters[open] .ll-filters__chev { transform: rotate(180deg); }
.ll-filters[open] .ll-filters__summary { margin-bottom: 12px; }
/* Collapsed by default; expands only when the visitor taps Filters. */
.ll-filters:not([open]) > .ll-filters__body { display: none; }
.ll-filters[open] > .ll-filters__body { display: block; }
}
.ll-filter-block {
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 12px;
padding: 18px;
margin-bottom: 12px;
}
.ll-filter-block__title {
font-family: var(--ll-font-display);
font-weight: 700; font-size: 14px; color: var(--ll-black);
letter-spacing: -.01em;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ll-grey-100);
}
.ll-filter-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ll-filter-list a {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 8px; border-radius: 6px;
color: var(--ll-grey-700); text-decoration: none;
font-size: 13px;
transition: background .12s ease, color .12s ease;
}
.ll-filter-list a:hover { background: var(--ll-grey-50); color: var(--ll-lime-700); }
.ll-filter-list a[data-active="true"] {
background: var(--ll-lime-100);
color: var(--ll-lime-900);
font-weight: 600;
}
.ll-filter-list .count {
font-family: var(--ll-font-mono); font-size: 11px;
color: var(--ll-grey-500);
background: var(--ll-grey-100);
padding: 1px 6px; border-radius: 999px;
}
.ll-filter-list a[data-active="true"] .count { background: var(--ll-white); color: var(--ll-lime-700); }
/* Toggle pill (cold-chain / solventless) */
.ll-toggle-pill {
display: inline-block; width: 28px; height: 14px;
background: var(--ll-grey-300); border-radius: 999px;
margin-right: 8px;
position: relative; transition: background .15s ease;
flex-shrink: 0;
}
.ll-toggle-pill::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 10px; height: 10px; border-radius: 999px;
background: var(--ll-white);
transition: transform .15s ease;
}
.ll-toggle-pill.is-on { background: var(--ll-lime-500); }
.ll-toggle-pill.is-on::after { transform: translateX(14px); }
/* Toolbar */
.ll-shop-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
background: var(--ll-grey-50);
border: 1px solid var(--ll-grey-200);
border-radius: 10px;
padding: 12px 18px;
margin-bottom: 24px;
}
.ll-shop-toolbar__count { color: var(--ll-grey-700); font-size: 13px; }
.ll-shop-toolbar__count strong { color: var(--ll-black); font-weight: 700; }
.ll-shop-toolbar__controls { display: flex; align-items: center; gap: 16px; }
.ll-sort-form {
display: flex; align-items: center; gap: 8px;
font-size: 13px;
}
.ll-sort-form label { color: var(--ll-grey-500); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ll-sort-form select {
border: 1px solid var(--ll-grey-300); border-radius: 6px;
padding: 6px 28px 6px 10px; font: inherit; font-size: 13px;
background: var(--ll-white); color: var(--ll-black);
cursor: pointer;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center;
}
.ll-view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--ll-grey-300); border-radius: 6px; overflow: hidden; }
.ll-view-toggle a {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ll-grey-500); text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.ll-view-toggle a[data-active="true"] {
background: var(--ll-lime-500); color: var(--ll-black);
}
.ll-view-toggle a:not([data-active="true"]):hover { background: var(--ll-grey-100); }
/* WooCommerce 4-col dense grid override */
.ll-shop-main .woocommerce ul.products,
.ll-shop-main ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1100px) {
.ll-shop-main .woocommerce ul.products,
.ll-shop-main ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.ll-shop-main .woocommerce ul.products,
.ll-shop-main ul.products { grid-template-columns: repeat(2, 1fr); }
}
.ll-shop-main .woocommerce ul.products li.product,
.ll-shop-main ul.products li.product {
width: 100% !important;
margin: 0 !important;
float: none !important;
display: flex !important; flex-direction: column;
height: 100%; /* stretch to grid row height — defensive
against WC overrides that flip align-self */
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 14px;
overflow: hidden;
position: relative;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ll-shop-main .woocommerce ul.products li.product:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px -18px rgba(10, 10, 10, .22);
border-color: var(--ll-lime-300);
}
/* Card image — keep WC's default img tag, give it a clean container */
.ll-shop-main .woocommerce ul.products li.product a img {
width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover;
margin: 0 !important; border-radius: 0 !important;
display: block;
}
/* Card text — restyle WC defaults */
.ll-shop-main .woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--ll-font-display);
font-weight: 700; font-size: 16px;
line-height: 1.25;
color: var(--ll-black);
padding: 12px 16px 0;
letter-spacing: -.01em;
/* Reserve exactly two lines of title space (16px × 1.25 × 2 = 40px,
plus the 12px top padding) so 1-line and 2-line titles take the
same vertical room and the price/button align across cards. */
min-height: calc(40px + 12px);
}
.ll-shop-main .woocommerce ul.products li.product .price {
color: var(--ll-black); font-weight: 700; font-size: 16px;
padding: 0 16px 12px;
margin-top: auto;
font-family: var(--ll-font-display);
}
/* Add-to-cart button — force uniform inset across ALL product types
(simple, variable, grouped, external). WC ships per-variant button classes
(`.add_to_cart_button`, `.product_type_simple .button`, etc.) that can win
the margin race depending on plugin order, so we cover them explicitly +
pin width with calc() so the button can\'t stretch edge-to-edge.
`margin-top: auto !important` is the key fix for vertical alignment —
WC wraps image+title+price in a single `` so `margin-top: auto` on
`.price` only pushes within that wrapper, NOT all the way to the card
bottom. Putting it on the button (a direct flex child of the )
bottom-pins the button regardless of where price renders. */
.ll-shop-main .woocommerce ul.products li.product .button,
.ll-shop-main .woocommerce ul.products li.product a.button,
.ll-shop-main .woocommerce ul.products li.product .add_to_cart_button,
.ll-shop-main ul.products li.product .button,
.ll-shop-main ul.products li.product a.button,
.ll-shop-main ul.products li.product .add_to_cart_button {
display: block !important;
width: calc(100% - 32px) !important;
margin: auto 16px 16px !important; /* margin-top: auto pushes to bottom */
box-sizing: border-box;
background: var(--ll-lime-500); color: var(--ll-black);
border-radius: 999px; font-weight: 700; font-size: 13px;
padding: 10px 14px; border: 0;
text-align: center;
}
.ll-shop-main .woocommerce ul.products li.product .button:hover,
.ll-shop-main .woocommerce ul.products li.product a.button:hover,
.ll-shop-main .woocommerce ul.products li.product .add_to_cart_button:hover {
background: var(--ll-lime-300);
}
/* THC chip + rating row in card body */
.ll-card-meta {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 0 16px 4px;
}
.ll-card-rating {
display: inline-flex; align-items: center; gap: 2px;
font-family: var(--ll-font-mono); font-size: 11px;
color: var(--ll-grey-500);
}
.ll-card-rating .star { color: var(--ll-grey-300); font-size: 12px; }
.ll-card-rating .star.is-filled { color: var(--ll-amber-500); }
.ll-card-rating .reviews { margin-left: 4px; color: var(--ll-grey-500); }
.ll-card-type {
padding: 0 16px 8px;
font-size: 10px; color: var(--ll-grey-500);
text-transform: uppercase; letter-spacing: .08em;
line-height: 1.4;
/* Reserve two lines of descriptor space (10px × 1.4 × 2 = 28px) so
short descriptors ("3.5g jar · sativa") don\'t leave shorter cards
than long ones ("2× 0.5g · whole flower · hemp paper"). */
min-height: calc(28px + 8px);
}
/* Hover action overlay — Quick View / Wishlist / Compare */
.ll-card-actions {
position: absolute; top: 12px; right: 12px;
display: flex; flex-direction: column; gap: 6px;
opacity: 0; transform: translateX(8px);
transition: opacity .18s ease, transform .18s ease;
z-index: 4;
}
.ll-shop-main .woocommerce ul.products li.product:hover .ll-card-actions,
.ll-shop-main ul.products li.product:hover .ll-card-actions {
opacity: 1; transform: translateX(0);
}
.ll-card-action {
width: 36px; height: 36px;
border: 0; border-radius: 999px;
background: var(--ll-white);
color: var(--ll-grey-700);
box-shadow: 0 2px 6px rgba(10, 10, 10, .12);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s ease, color .12s ease;
}
.ll-card-action:hover {
background: var(--ll-lime-500);
color: var(--ll-black);
}
/* Page title at the top of the shop */
.woocommerce .woocommerce-products-header {
max-width: 1280px; margin: 0 auto 8px; padding: 16px 0;
}
.woocommerce .woocommerce-products-header__title {
font-family: var(--ll-font-display); font-weight: 700;
font-size: clamp(32px, 4vw, 48px); color: var(--ll-black);
letter-spacing: -.02em;
}
/* List view — when ?view=list */
body.ll-shop-list .ll-shop-main ul.products {
grid-template-columns: 1fr !important;
}
body.ll-shop-list .ll-shop-main ul.products li.product {
flex-direction: row !important;
align-items: center;
}
body.ll-shop-list .ll-shop-main ul.products li.product a img {
max-width: 200px; aspect-ratio: 1;
}
/* ============= Enterprise PDP additions ============= */
/* Breadcrumb above the product */
.ll-pdp-breadcrumb {
max-width: 1280px; margin: 0 auto 16px;
padding: 0 32px;
font-family: var(--ll-font-mono);
font-size: 11px; color: var(--ll-grey-500);
letter-spacing: .08em; text-transform: uppercase;
display: flex; align-items: center; gap: 6px;
}
.ll-pdp-breadcrumb a { color: var(--ll-grey-500); text-decoration: none; transition: color .15s ease; }
.ll-pdp-breadcrumb a:hover { color: var(--ll-lime-700); }
.ll-pdp-breadcrumb .sep { color: var(--ll-grey-300); }
.ll-pdp-breadcrumb .current { color: var(--ll-grey-900); font-weight: 600; }
/* Trust signals row under add-to-cart */
.ll-pdp-trust-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
margin: 16px 0 24px;
padding: 16px;
background: var(--ll-grey-50);
border: 1px solid var(--ll-grey-200);
border-radius: 12px;
}
@media (max-width: 700px) { .ll-pdp-trust-row { grid-template-columns: repeat(2, 1fr); } }
.ll-pdp-trust-row .signal {
display: flex; align-items: center; gap: 10px;
color: var(--ll-grey-700);
}
.ll-pdp-trust-row .signal svg { color: var(--ll-lime-700); flex-shrink: 0; }
.ll-pdp-trust-row .signal strong {
display: block; font-family: var(--ll-font-display); font-weight: 700;
font-size: 13px; color: var(--ll-black); letter-spacing: -.01em;
}
.ll-pdp-trust-row .signal span {
display: block; font-size: 11px; color: var(--ll-grey-500);
font-family: var(--ll-font-mono);
}
/* Wholesale CTA (shown to non-wholesale visitors) */
.ll-pdp-wholesale-cta {
display: flex; align-items: center; gap: 16px;
padding: 16px;
background: linear-gradient(135deg, var(--ll-emerald-900), var(--ll-grey-900));
color: var(--ll-grey-100);
border-radius: 12px;
margin: 0 0 24px;
}
.ll-pdp-wholesale-cta svg { color: var(--ll-lime-300); flex-shrink: 0; }
.ll-pdp-wholesale-cta .title {
font-family: var(--ll-font-display); font-weight: 700; font-size: 15px;
color: var(--ll-white); margin-bottom: 2px;
letter-spacing: -.01em;
}
.ll-pdp-wholesale-cta .sub { font-size: 12px; color: var(--ll-grey-300); line-height: 1.4; }
.ll-pdp-wholesale-cta .ll-btn {
flex-shrink: 0;
background: var(--ll-lime-500); color: var(--ll-black); border-color: var(--ll-lime-500);
}
/* B2B bulk pricing table (visible only to wholesale) */
.ll-pdp-bulk-pricing {
margin: 0 0 24px;
border: 1px solid var(--ll-emerald-300);
border-radius: 12px;
background: var(--ll-emerald-100);
overflow: hidden;
}
.ll-pdp-bulk-pricing .head {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px;
background: var(--ll-white);
border-bottom: 1px solid var(--ll-emerald-300);
}
.ll-pdp-bulk-pricing table {
width: 100%; border-collapse: collapse; font-size: 13px;
background: var(--ll-white);
}
.ll-pdp-bulk-pricing th {
text-align: left; padding: 10px 16px;
font-family: var(--ll-font-mono); font-size: 11px;
color: var(--ll-grey-500); text-transform: uppercase; letter-spacing: .08em;
background: var(--ll-grey-50);
border-bottom: 1px solid var(--ll-grey-200);
}
.ll-pdp-bulk-pricing td {
padding: 12px 16px; border-bottom: 1px solid var(--ll-grey-100);
color: var(--ll-grey-900);
font-family: var(--ll-font-mono);
}
.ll-pdp-bulk-pricing tr:last-child td { border-bottom: 0; }
.ll-pdp-bulk-pricing tr.tier-retail td { color: var(--ll-grey-500); }
.ll-pdp-bulk-pricing .save {
display: inline-block; padding: 2px 8px; border-radius: 999px;
background: var(--ll-emerald-500); color: var(--ll-white);
font-weight: 700; font-size: 11px;
}
.ll-pdp-bulk-pricing .foot {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 16px; gap: 16px;
background: var(--ll-emerald-100);
flex-wrap: wrap;
}
/* Sticky add-to-cart bar — fixed to bottom, slides up on scroll past CTA */
.ll-sticky-addtocart {
position: fixed; left: 0; right: 0; bottom: 0;
background: var(--ll-white);
border-top: 1px solid var(--ll-grey-200);
box-shadow: 0 -8px 24px -8px rgba(10, 10, 10, .14);
transform: translateY(100%);
transition: transform .25s ease;
z-index: 90;
}
.ll-sticky-addtocart.is-visible { transform: translateY(0); }
.ll-sticky-addtocart .inner {
max-width: 1280px; margin: 0 auto;
padding: 12px 32px;
display: flex; align-items: center; gap: 16px;
}
.ll-sticky-addtocart .thumb {
width: 56px; height: 56px; border-radius: 8px;
display: grid; place-items: center;
font-family: var(--ll-font-display); font-weight: 700;
font-size: 18px; color: var(--ll-black);
flex-shrink: 0;
}
.ll-sticky-addtocart .meta { flex: 1; min-width: 0; }
.ll-sticky-addtocart .title {
font-family: var(--ll-font-display); font-weight: 700;
font-size: 16px; color: var(--ll-black);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
letter-spacing: -.01em;
}
.ll-sticky-addtocart .sub {
font-size: 11px; color: var(--ll-grey-500);
text-transform: uppercase; letter-spacing: .04em;
}
.ll-sticky-addtocart .price {
font-family: var(--ll-font-display); font-weight: 700;
font-size: 20px; color: var(--ll-black);
white-space: nowrap;
}
.ll-sticky-addtocart .price .woocommerce-Price-amount,
.ll-sticky-addtocart .price bdi { color: var(--ll-black); font-weight: 700; }
@media (max-width: 700px) {
.ll-sticky-addtocart .inner { padding: 10px 16px; gap: 10px; }
.ll-sticky-addtocart .thumb { width: 44px; height: 44px; }
.ll-sticky-addtocart .meta .sub { display: none; }
.ll-sticky-addtocart .price { font-size: 16px; }
}
/* Loading state for the React-style empty roots Elementor sometimes leaves. */
.elementor-section, .elementor-container { color: var(--ll-ink-900); }
/* ============= Typography helpers ============= */
.ll-eyebrow {
font-family: var(--ll-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ll-ink-500);
}
.ll-h-display {
font-family: var(--ll-font-display); /* Fredoka — matches the LimeLine wordmark */
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.0;
color: var(--ll-black);
}
/* Period-separated taglines (Chlorophyll-family signature treatment).
GROWN. PRESSED. POURED. / CULTIVATE. PROCESS. DELIVER. / SEED. SCIENCE. SHELF. */
.ll-mantra {
font-family: var(--ll-font-display);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.0;
color: var(--ll-black);
}
.ll-mantra .sep { color: var(--ll-lime-500); margin: 0 .25em; }
.ll-serif {
/* Legacy — was Fraunces italic. Now reuses display family in lighter weight
for an editorial accent without leaving the Fredoka system. */
font-family: var(--ll-font-display);
font-weight: 400;
font-style: normal;
letter-spacing: -0.01em;
}
.ll-mono { font-family: var(--ll-font-mono); }
/* Native heading defaults — anywhere wp_content renders, use Fredoka. */
h1, h2, h3, h4, .ll-page-content h1, .ll-page-content h2, .ll-page-content h3, .ll-page-content h4 {
font-family: var(--ll-font-display);
color: var(--ll-black);
letter-spacing: -0.02em;
}
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4 { font-weight: 600; }
/* Hero gradient title — lime → emerald → amber, matches the resin/lime/leaf trinity. */
.ll-hero-title {
font-size: clamp(56px, 9vw, 132px);
margin: 0;
font-family: var(--ll-font-display);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 0.95;
background: linear-gradient(180deg, var(--ll-lime-500) 0%, var(--ll-emerald-700) 55%, var(--ll-amber-600) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(10, 10, 10, .06));
}
/* ============= Buttons ============= */
.ll-btn {
display: inline-flex; align-items: center; gap: 8px;
height: 40px; padding: 0 16px;
border-radius: 999px;
border: 1px solid var(--ll-ink-900);
background: var(--ll-ink-900); color: var(--ll-cream-50);
font-weight: 500; font-size: 14px;
transition: transform .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
cursor: pointer; text-decoration: none;
font-family: var(--ll-font-sans);
}
.ll-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(20, 63, 0, .35); }
.ll-btn--lime {
background: linear-gradient(180deg, var(--ll-lime-300), var(--ll-lime-500) 60%, var(--ll-lime-600));
border-color: var(--ll-lime-700); color: var(--ll-ink-900);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 0 rgba(20, 63, 0, .18) inset, 0 6px 16px -8px rgba(20, 63, 0, .5);
font-weight: 600;
}
.ll-btn--lime:hover { filter: brightness(1.04); }
.ll-btn--honey {
background: linear-gradient(180deg, var(--ll-honey-300), var(--ll-honey-500) 60%, var(--ll-honey-600));
border-color: var(--ll-honey-700); color: var(--ll-ink-900);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 0 rgba(140, 79, 0, .22) inset, 0 6px 16px -8px rgba(140, 79, 0, .5);
font-weight: 600;
}
.ll-btn--ghost { background: transparent; color: var(--ll-ink-900); border-color: var(--ll-line-2); }
.ll-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.ll-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }
/* WooCommerce buttons — promote the primary "Add to cart" to the lime button. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
background: linear-gradient(180deg, var(--ll-lime-300), var(--ll-lime-500) 60%, var(--ll-lime-600));
border: 1px solid var(--ll-lime-700);
color: var(--ll-ink-900);
font-weight: 600;
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 0 rgba(20, 63, 0, .18) inset, 0 6px 16px -8px rgba(20, 63, 0, .5);
}
/* ============= Chips ============= */
.ll-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: var(--ll-cream-100); border: 1px solid var(--ll-line);
font-size: 12px; color: var(--ll-ink-700);
font-family: var(--ll-font-mono); letter-spacing: .02em;
}
.ll-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ll-lime-500); display: inline-block; }
.ll-chip--ok .dot { background: var(--ll-ok); }
.ll-chip--warn .dot { background: var(--ll-honey-500); }
.ll-chip--lime { background: var(--ll-lime-100); border-color: var(--ll-lime-300); color: var(--ll-lime-900); }
.ll-chip--honey { background: #F8E9C8; border-color: var(--ll-honey-300); color: var(--ll-honey-700); }
/* ============= Cards & dividers ============= */
.ll-card {
background: var(--ll-cream-50);
border: 1px solid var(--ll-line);
border-radius: var(--ll-radius-lg);
}
.ll-divider { height: 1px; background: var(--ll-line); }
/* Scrollbar tame — applies site-wide. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ll-line-2); border-radius: 999px; border: 2px solid var(--ll-cream-50); }
*::-webkit-scrollbar-track { background: transparent; }
/* ============= Trust strip (above nav) ============= */
.ll-trust-strip {
background: var(--ll-ink-900); color: var(--ll-cream-100);
font-family: var(--ll-font-mono); font-size: 11px; letter-spacing: .08em;
border-bottom: 2px solid var(--ll-lime-500);
}
.ll-trust-strip .row {
display: flex; align-items: center; gap: 24px;
padding: 8px 32px; overflow: hidden; white-space: nowrap;
max-width: 1440px; margin: 0 auto;
}
.ll-trust-strip .item { display: inline-flex; align-items: center; gap: 8px; opacity: .9; }
.ll-trust-strip .item .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ll-lime-300); display: inline-block; }
.ll-trust-strip .sep { opacity: .35; color: var(--ll-lime-300); }
@media (max-width: 900px) {
.ll-trust-strip .row { gap: 14px; padding: 8px 16px; }
.ll-trust-strip .sep { display: none; }
}
/* ============= Forms ============= */
.ll-input, .ll-select, .ll-textarea {
width: 100%;
background: var(--ll-cream-50);
border: 1px solid var(--ll-line-2);
border-radius: 10px;
padding: 10px 12px;
font: inherit; color: inherit;
outline: none;
}
.ll-input:focus, .ll-select:focus, .ll-textarea:focus {
border-color: var(--ll-lime-600);
box-shadow: 0 0 0 3px rgba(143, 203, 42, .18);
}
.ll-label {
display: block;
font-family: var(--ll-font-mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ll-ink-500);
margin-bottom: 6px;
}
/* ============= Toasts ============= */
.ll-toast-stack {
position: fixed; right: 24px; bottom: 96px; z-index: 200;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
}
.ll-toast {
background: var(--ll-ink-900); color: var(--ll-cream-50);
border-radius: 12px; padding: 12px 16px;
box-shadow: var(--ll-shadow-lg);
font-size: 13px; max-width: 360px;
display: flex; align-items: flex-start; gap: 10px;
animation: ll-toast-in .25s ease both;
pointer-events: auto;
}
.ll-toast .tag {
font-family: var(--ll-font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ll-lime-300);
display: block; margin-bottom: 2px;
}
@keyframes ll-toast-in { from { opacity: 0; transform: translateY(8px); } }
/* Age-gate + DOB-form CSS removed 2026-05-08 — archived to
* Downloads/OLD AGE GATE LL WEB. Will return when the standalone
* resellable age-gate plugin ships. */
/* ============= Delivery hours notice (cart + checkout) ============= */
.ll-hours-notice {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid var(--ll-grey-200);
background: var(--ll-white);
margin: 0 0 20px;
font-size: 14px;
color: var(--ll-grey-700);
}
.ll-hours-notice .dot {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 999px;
font-family: var(--ll-font-display); font-weight: 700;
flex-shrink: 0;
}
.ll-hours-notice strong {
display: block; color: var(--ll-black);
font-family: var(--ll-font-display); font-weight: 700;
font-size: 14px; letter-spacing: -.01em;
margin-bottom: 2px;
}
.ll-hours-notice--ok { border-left: 3px solid var(--ll-emerald-500); }
.ll-hours-notice--ok .dot { background: var(--ll-emerald-100); color: var(--ll-emerald-700); }
.ll-hours-notice--warn { border-left: 3px solid var(--ll-amber-500); }
.ll-hours-notice--warn .dot { background: var(--ll-amber-100); color: var(--ll-amber-700); }
/* ============= Booth mode (full-screen kiosk views) ============= */
body.ll-booth {
margin: 0; padding: 0;
overflow-x: hidden;
background: var(--ll-white);
font-family: var(--ll-font-sans);
}
body.ll-booth #wpadminbar { display: none; }
body.ll-booth html { margin-top: 0 !important; }
body.ll-booth .ll-trust-strip,
body.ll-booth .ll-utility-bar,
body.ll-booth .ll-topnav,
body.ll-booth .ll-mainnav,
body.ll-booth .ll-footer,
body.ll-booth .ll-footer-trust,
body.ll-booth .ll-footer-pay,
body.ll-booth #wpadminbar,
body.ll-booth .ll-hours-notice { display: none !important; }
/* Universal stage layout — fills the viewport */
.ll-booth-stage {
min-height: 100vh; display: flex; flex-direction: column;
}
.ll-booth-stage__head {
padding: 24px 32px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--ll-grey-200);
}
.ll-booth-stage__head--dark {
background: var(--ll-grey-900); color: var(--ll-grey-100);
border-bottom-color: #1F1F1F;
}
.ll-booth-stage__head img { height: 44px; width: auto; }
.ll-booth-stage__head .ll-mantra {
font-size: 12px; color: var(--ll-grey-500); letter-spacing: .08em;
}
.ll-booth-clock {
font-family: var(--ll-font-mono); font-size: 24px; font-weight: 700;
color: var(--ll-lime-300); letter-spacing: .05em;
}
.ll-booth-stage__body { flex: 1; }
.ll-booth-stage__foot {
padding: 16px 32px;
border-top: 1px solid var(--ll-grey-200);
display: flex; justify-content: center; gap: 14px;
font-family: var(--ll-font-mono); font-size: 12px; color: var(--ll-grey-500);
letter-spacing: .06em; text-transform: uppercase;
}
/* /booth/marketing/ — hero cinema */
.ll-booth-stage--marketing .ll-booth-stage__body {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: center; padding: 64px 80px;
background:
radial-gradient(1200px 720px at 92% -10%, rgba(245, 158, 11, .22), transparent 60%),
radial-gradient(900px 700px at -5% 30%, rgba(124, 234, 0, .14), transparent 65%),
var(--ll-white);
}
.ll-booth-stage--marketing .ll-booth-stage__hero img {
width: 100%; max-width: 720px; height: auto; mix-blend-mode: multiply;
}
.ll-booth-stage--marketing h1 {
font-family: var(--ll-font-display); font-weight: 700;
font-size: clamp(64px, 7vw, 112px); line-height: 1;
letter-spacing: -.03em; color: var(--ll-black);
margin: 16px 0 24px;
}
.ll-booth-stage--marketing p {
font-size: 22px; line-height: 1.4; color: var(--ll-grey-700);
max-width: 640px;
}
.ll-booth-cta {
margin-top: 48px;
display: inline-flex; align-items: center; gap: 12px;
padding: 16px 28px; border-radius: 999px;
background: var(--ll-lime-500); color: var(--ll-black);
font-family: var(--ll-font-display); font-weight: 700;
font-size: 20px; letter-spacing: .04em;
box-shadow: 0 12px 32px -12px rgba(124, 234, 0, .6);
}
.ll-booth-cta .dot {
width: 12px; height: 12px; border-radius: 999px;
background: var(--ll-black); animation: ll-demo-pulse 1.6s infinite;
}
/* /booth/ops/ + /booth/demo/ — dark utility surfaces */
.ll-booth-stage--ops,
.ll-booth-stage--demo {
background: var(--ll-grey-50);
}
.ll-booth-stage--demo .ll-booth-script {
background: var(--ll-grey-900); color: var(--ll-grey-100);
padding: 24px 32px;
border-top: 1px solid #1F1F1F;
}
.ll-booth-stage--demo .ll-booth-script ol {
margin: 12px 0 0; padding-left: 20px;
font-size: 14px; line-height: 1.7;
display: grid; gap: 8px; max-width: 1200px;
}
.ll-booth-stage--demo .ll-booth-script strong {
color: var(--ll-lime-300); font-family: var(--ll-font-display);
}
.ll-booth-stage--demo .ll-booth-script em {
color: var(--ll-amber-300); font-style: italic;
}
/* ============= Coalition recruiting page ============= */
.ll-coalition-hero { padding: 72px 0 56px; }
.ll-coalition-hero .inner {
max-width: 1280px; margin: 0 auto; padding: 0 32px;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 900px) { .ll-coalition-hero .inner { grid-template-columns: 1fr; } }
.ll-coalition-hero .stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ll-coalition-hero .stat {
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 14px;
padding: 22px;
}
.ll-coalition-hero .stat .num {
font-family: var(--ll-font-display); font-weight: 700;
font-size: 36px; color: var(--ll-emerald-700);
letter-spacing: -.02em; line-height: 1;
}
.ll-coalition-hero .stat .lbl {
font-family: var(--ll-font-mono); font-size: 11px;
color: var(--ll-grey-500); text-transform: uppercase; letter-spacing: .08em;
margin-top: 8px;
}
/* Spotlight grid */
.ll-coalition-spotlights { padding: 56px 0; }
.ll-coalition-spotlights__grid {
max-width: 1280px; margin: 0 auto;
padding: 0 32px;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 1100px) { .ll-coalition-spotlights__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ll-coalition-spotlights__grid { grid-template-columns: 1fr; } }
.ll-coalition-card {
display: flex; flex-direction: column; gap: 6px;
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 14px;
padding: 18px;
text-decoration: none;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ll-coalition-card:hover {
transform: translateY(-3px);
border-color: var(--ll-lime-500);
box-shadow: 0 12px 28px -16px rgba(10,10,10,.18);
}
.ll-coalition-card .head {
display: flex; justify-content: space-between; align-items: center;
}
.ll-coalition-card .name {
font-family: var(--ll-font-display); font-weight: 700;
font-size: 16px; color: var(--ll-black);
letter-spacing: -.01em; margin-top: 6px;
}
.ll-coalition-card .lic {
font-size: 11px; color: var(--ll-grey-500);
}
.ll-coalition-card .bio {
font-size: 13px; color: var(--ll-grey-700); line-height: 1.5;
margin-top: 6px;
}
/* Benefits 2-row 3-col grid */
.ll-coalition-benefits { padding: 56px 0; background: var(--ll-grey-50); }
.ll-coalition-benefits__grid {
max-width: 1280px; margin: 0 auto;
padding: 0 32px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 900px) { .ll-coalition-benefits__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ll-coalition-benefits__grid { grid-template-columns: 1fr; } }
.ll-coalition-benefit {
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 14px;
padding: 24px;
}
.ll-coalition-benefit .icon { font-size: 32px; line-height: 1; margin-bottom: 12px; }
.ll-coalition-benefit .title {
font-family: var(--ll-font-display); font-weight: 700;
font-size: 17px; color: var(--ll-black);
letter-spacing: -.01em; margin-bottom: 6px;
}
.ll-coalition-benefit .body {
font-size: 14px; color: var(--ll-grey-700); line-height: 1.55;
}
/* Apply form */
.ll-coalition-apply {
background: linear-gradient(135deg, var(--ll-emerald-900), var(--ll-grey-900));
padding: 64px 32px;
}
.ll-coalition-apply__inner {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start;
}
@media (max-width: 900px) { .ll-coalition-apply__inner { grid-template-columns: 1fr; } }
.ll-coalition-apply .copy { color: var(--ll-grey-200); }
.ll-coalition-apply__form {
background: var(--ll-white);
border-radius: 16px;
padding: 24px;
display: grid; gap: 14px;
}
.ll-coalition-apply__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .ll-coalition-apply__form .row { grid-template-columns: 1fr; } }
.ll-coalition-apply__form .field label {
display: block; font-family: var(--ll-font-mono); font-size: 10px;
letter-spacing: .08em; text-transform: uppercase; color: var(--ll-grey-500);
margin-bottom: 4px;
}
.ll-coalition-apply__form input,
.ll-coalition-apply__form textarea {
width: 100%; padding: 10px 14px; font: inherit; font-size: 14px;
border: 1px solid var(--ll-grey-300); border-radius: 8px;
background: var(--ll-white); color: var(--ll-black); outline: none;
}
.ll-coalition-apply__form input:focus,
.ll-coalition-apply__form textarea:focus {
border-color: var(--ll-lime-500);
box-shadow: 0 0 0 3px rgba(124,234,0,.18);
}
.ll-coalition-apply__form .msg {
font-size: 13px; padding-top: 6px; min-height: 18px;
}
.ll-coalition-apply__form .msg.is-ok { color: var(--ll-emerald-700); }
/* ============= Drip background (hero, white-label) ============= */
.ll-drip-bg {
position: relative; overflow: hidden;
background:
radial-gradient(900px 540px at 92% -10%, rgba(124, 234, 0, .42), transparent 60%),
radial-gradient(700px 520px at -5% 30%, rgba(255, 138, 0, .28), transparent 65%),
linear-gradient(180deg, var(--ll-cream-50), var(--ll-cream-100));
}
.ll-drip-bg::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(circle at 12% 80%, var(--ll-honey-500) 0 1.5px, transparent 2px),
radial-gradient(circle at 18% 92%, var(--ll-honey-300) 0 2px, transparent 2.5px),
radial-gradient(circle at 80% 90%, var(--ll-honey-500) 0 1.5px, transparent 2px);
opacity: .25;
}
.ll-surface-lime { background: linear-gradient(180deg, var(--ll-lime-100), var(--ll-lime-300)); border-color: var(--ll-lime-700) !important; }
.ll-surface-honey { background: linear-gradient(180deg, #FFE9B0, var(--ll-honey-300)); border-color: var(--ll-honey-600) !important; }
/* ============= Audience cards (home) ============= */
.ll-audience-paths {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
margin-top: 40px;
}
@media (max-width: 900px) { .ll-audience-paths { grid-template-columns: 1fr; } }
.ll-audience-card {
transition: all .2s ease; cursor: pointer; position: relative; overflow: hidden;
background: var(--ll-cream-50); border: 1px solid var(--ll-line); border-radius: 18px;
padding: 24px; display: grid; gap: 12px;
text-decoration: none; color: inherit;
}
.ll-audience-card:hover {
border-color: var(--ll-lime-600); transform: translateY(-2px);
box-shadow: 0 18px 36px -16px rgba(20, 63, 0, .35);
}
.ll-audience-card .arrow { font-family: var(--ll-font-mono); font-size: 18px; }
.ll-audience-card--dark { background: var(--ll-ink-900); color: var(--ll-cream-100); border-color: var(--ll-ink-900); }
.ll-audience-card--dark .ll-eyebrow { color: var(--ll-lime-300); }
.ll-audience-card--dark .ll-h-display { color: var(--ll-cream-50); }
/* ============= Product card (shop / featured) ============= */
.ll-product-card {
background: var(--ll-cream-50); border: 1px solid var(--ll-line); border-radius: 18px;
overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.ll-product-card:hover { transform: translateY(-2px); box-shadow: var(--ll-shadow); }
.ll-product-card .photo {
aspect-ratio: 4/5;
background: linear-gradient(160deg, var(--ll-lime-300), var(--ll-cream-200));
display: grid; place-items: center; position: relative; overflow: hidden;
}
.ll-product-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.ll-product-card .body { padding: 14px 16px 16px; display: grid; gap: 4px; }
.ll-placeholder-img {
width: 100%; height: 100%;
background: repeating-linear-gradient(135deg, var(--ll-cream-100), var(--ll-cream-100) 8px, var(--ll-cream-200) 8px, var(--ll-cream-200) 16px);
display: grid; place-items: center;
font-family: var(--ll-font-mono); font-size: 10px; color: var(--ll-ink-400);
letter-spacing: .1em; text-transform: uppercase;
text-align: center; padding: 12px;
}
/* WooCommerce shop archive — make it match the prototype's grid/card. */
.woocommerce ul.products li.product {
background: var(--ll-cream-50); border: 1px solid var(--ll-line);
border-radius: 18px; overflow: hidden; padding: 0; margin-bottom: 16px !important;
transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-2px); box-shadow: var(--ll-shadow);
}
.woocommerce ul.products li.product a img {
margin: 0 !important; border-radius: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
margin-left: 16px; margin-right: 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--ll-font-sans);
font-weight: 600;
font-size: 17px;
padding-top: 14px;
color: var(--ll-ink-900);
}
.woocommerce ul.products li.product .price {
color: var(--ll-ink-900);
font-weight: 600;
}
/* ============= Hero section ============= */
.ll-hero { padding: 72px 0 48px; position: relative; }
.ll-hero .grid {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 900px) { .ll-hero .grid { grid-template-columns: 1fr; } }
.ll-hero .lede { font-size: 18px; color: var(--ll-ink-500); max-width: 560px; line-height: 1.5; }
.ll-hero .geo {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; background: var(--ll-cream-50);
border: 1px solid var(--ll-line); border-radius: 999px;
font-family: var(--ll-font-mono); font-size: 11px; letter-spacing: .08em;
}
/* ============= Process strip (4-step end-to-end) ============= */
.ll-process {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--ll-line); border: 1px solid var(--ll-line);
border-radius: 16px; overflow: hidden;
}
@media (max-width: 700px) { .ll-process { grid-template-columns: 1fr; } }
.ll-process .step { padding: 28px; background: var(--ll-cream-50); }
.ll-process .step .num { color: var(--ll-lime-700); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ll-process .step .num span { font-family: var(--ll-font-mono); font-size: 11px; color: var(--ll-ink-400); letter-spacing: .1em; }
.ll-process .step .title { font-family: var(--ll-font-sans); font-weight: 700; font-size: 22px; margin-bottom: 6px; letter-spacing: -.02em; }
.ll-process .step .body { font-size: 14px; color: var(--ll-ink-500); }
/* ============= Lyra strip (homepage) ============= */
.ll-lyra-strip { padding: 80px 0; background: var(--ll-ink-900); color: var(--ll-cream-100); }
.ll-lyra-strip .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 900px) { .ll-lyra-strip .grid { grid-template-columns: 1fr; gap: 32px; } }
.ll-lyra-strip .ll-eyebrow { color: var(--ll-lime-300); }
.ll-lyra-strip .ll-h-display { color: var(--ll-cream-50); font-size: clamp(36px, 5vw, 64px); }
.ll-lyra-strip .lede { font-size: 16px; color: var(--ll-cream-200); max-width: 520px; opacity: .9; }
.ll-lyra-mock {
background: var(--ll-cream-50); color: var(--ll-ink-900);
border: 1px solid #2A2F22; border-radius: 24px;
overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5);
}
.ll-lyra-mock header {
padding: 14px; border-bottom: 1px solid var(--ll-line);
display: flex; align-items: center; gap: 10px;
background: var(--ll-cream-100);
}
.ll-lyra-mock .av {
width: 32px; height: 32px; border-radius: 999px;
background: linear-gradient(135deg, #BFE36A, #F2C261);
display: grid; place-items: center;
font-family: var(--ll-font-display); font-weight: 600;
box-shadow: inset 0 0 0 2px #161A12;
}
.ll-lyra-mock .body { padding: 16px; display: grid; gap: 10px; font-size: 14px; }
.ll-lyra-mock .msg-bot { background: var(--ll-cream-100); border: 1px solid var(--ll-line); border-radius: 14px; padding: 10px 12px; border-top-left-radius: 4px; }
.ll-lyra-mock .msg-user { background: var(--ll-ink-900); color: var(--ll-cream-50); border-radius: 14px; padding: 10px 12px; border-top-right-radius: 4px; justify-self: end; max-width: 80%; }
/* ============= Footer ============= */
.ll-footer { background: var(--ll-ink-900); color: var(--ll-cream-200); margin-top: 80px; }
.ll-footer .row {
max-width: 1440px; margin: 0 auto; padding: 64px 32px 32px;
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px;
}
@media (max-width: 900px) { .ll-footer .row { grid-template-columns: 1fr 1fr; } }
.ll-footer h5 {
font-family: var(--ll-font-mono); font-size: 11px; letter-spacing: .14em;
color: var(--ll-cream-300); text-transform: uppercase;
margin: 0 0 16px;
}
.ll-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
/* Help row — operator decision 2026-04-26: HELP spans the full footer
width (was a single narrow column on the left). When the other link
columns (Shop/Business/Compliance) aren't populated, this is the only
set of links the visitor sees, so it gets its own full-width row with
horizontal layout. */
.ll-footer__help-row {
grid-column: 1 / -1;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.ll-footer__help-row h5 {
margin-bottom: 12px;
}
.ll-footer__help-row ul {
display: flex !important;
flex-wrap: wrap;
gap: 32px !important;
}
.ll-footer__help-row ul li { margin: 0; }
.ll-footer a { color: var(--ll-cream-100); opacity: .8; font-size: 14px; text-decoration: none; }
.ll-footer a:hover { opacity: 1; }
.ll-footer .legal {
border-top: 1px solid #2A2F22; max-width: 1440px; margin: 0 auto;
padding: 20px 32px; display: flex; justify-content: space-between;
font-family: var(--ll-font-mono); font-size: 11px; color: var(--ll-cream-300); opacity: .7;
flex-wrap: wrap; gap: 12px;
}
.ll-footer-brand p { font-size: 13px; color: var(--ll-cream-200); opacity: .8; max-width: 320px; }
.ll-footer-brand .name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ll-cream-50); margin-bottom: 12px; }
/* ============= PDP-specific overrides ============= */
.woocommerce div.product .product_title {
font-family: var(--ll-font-sans); font-weight: 700; letter-spacing: -.03em;
font-size: 44px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
color: var(--ll-ink-900); font-weight: 600; font-size: 22px;
}
.woocommerce-product-gallery {
border-radius: 24px; overflow: hidden;
}
/* PDP "stat triplet" — THC / CBD / Terpenes (rendered by limeline-core PDP override). */
.ll-stat-triplet {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 24px;
}
.ll-stat-triplet .stat {
padding: 12px; border: 1px solid var(--ll-line); border-radius: 12px;
background: var(--ll-cream-100);
}
.ll-stat-triplet .stat .key {
font-family: var(--ll-font-mono); font-size: 10px;
color: var(--ll-ink-400); text-transform: uppercase; letter-spacing: .1em;
}
.ll-stat-triplet .stat .val { font-size: 22px; font-weight: 600; margin-top: 2px; }
/* Compliance copy block — under PDP add-to-cart. */
.ll-compliance-note {
padding: 12px;
background: var(--ll-cream-100);
border: 1px solid var(--ll-line);
border-radius: 12px;
font-size: 12px; color: var(--ll-ink-500);
margin-bottom: 24px;
display: flex; gap: 10px; align-items: flex-start;
}
.ll-compliance-note strong { color: var(--ll-ink-700); }
/* COA download row — in PDP. */
.ll-coa-row {
padding: 14px;
border: 1px solid var(--ll-line);
border-radius: 12px;
display: flex; justify-content: space-between; align-items: center;
margin-top: 16px;
}
.ll-coa-row .meta { font-weight: 600; font-size: 14px; }
.ll-coa-row .sub { font-family: var(--ll-font-mono); font-size: 11px; color: var(--ll-ink-500); }
/* Pairing block — italic Fraunces honey. */
.ll-pairing {
margin: 16px 0;
font-family: var(--ll-font-display); font-style: italic;
color: var(--ll-honey-700);
line-height: 1.6;
}
/* Inline-Lyra widget on PDP (rendered by limeline-core). */
.ll-pdp-lyra {
border: 1px solid var(--ll-line);
border-radius: 16px;
background: var(--ll-cream-100);
padding: 16px;
display: grid; gap: 12px;
margin-top: 24px;
}
.ll-pdp-lyra .head { display: flex; align-items: center; gap: 10px; }
.ll-pdp-lyra .av {
width: 32px; height: 32px; border-radius: 999px;
background: linear-gradient(135deg, #BFE36A, #F2C261);
display: grid; place-items: center;
font-family: var(--ll-font-display); font-weight: 600;
box-shadow: inset 0 0 0 2px #161A12;
}
.ll-pdp-lyra .head .title { font-weight: 600; font-size: 13px; }
.ll-pdp-lyra .head .sub {
font-size: 11px; color: var(--ll-ink-500);
font-family: var(--ll-font-mono);
text-transform: uppercase; letter-spacing: .08em;
}
.ll-pdp-lyra .quick { display: flex; gap: 8px; flex-wrap: wrap; }
.ll-pdp-lyra .reply {
padding: 12px;
background: var(--ll-cream-50);
border: 1px solid var(--ll-line);
border-radius: 12px;
font-size: 14px; line-height: 1.5;
}
.ll-pdp-lyra .reply.thinking { color: var(--ll-ink-400); }
/* ============= Wholesale + Ops dashboards (plugin templates use these) ============= */
.ll-tabs {
display: flex; gap: 4px; border-bottom: 1px solid #2A2F22; margin-top: 32px;
}
.ll-tabs button, .ll-tabs a {
background: transparent; border: 0; padding: 12px 16px;
color: #9AA08B; border-bottom: 2px solid transparent;
font-size: 14px; font-weight: 500; cursor: pointer;
text-decoration: none;
}
.ll-tabs button[data-active="true"], .ll-tabs a[data-active="true"] {
color: var(--ll-cream-50); border-bottom-color: var(--ll-lime-300);
}
/* Tabular grids — wrap in .ll-table-scroll on parent so the table can
scroll horizontally on narrow viewports without breaking the layout.
Inner .ll-table gets a min-width so column proportions stay readable. */
.ll-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -4px; /* let the scroll edges breathe slightly */
padding: 0 4px;
}
.ll-table-scroll .ll-table { min-width: 640px; }
.ll-table-scroll .ll-coalition-table { min-width: 760px; }
.ll-table-scroll .ll-orders-table { min-width: 720px; }
.ll-table {
border: 1px solid var(--ll-line);
border-radius: 14px; overflow: hidden;
background: var(--ll-cream-50);
}
.ll-table .row {
display: grid; padding: 14px 16px; align-items: center;
border-bottom: 1px solid var(--ll-line); font-size: 13px;
}
.ll-table .row:last-child { border-bottom: 0; }
.ll-table .row.head {
background: var(--ll-cream-100);
font-family: var(--ll-font-mono); font-size: 11px;
color: var(--ll-ink-500); text-transform: uppercase; letter-spacing: .1em;
}
.ll-stat-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px; margin: 24px 0;
}
.ll-stat-cards .card {
padding: 20px; border: 1px solid var(--ll-line); border-radius: 14px;
background: var(--ll-cream-50);
}
.ll-stat-cards .card .key { font-family: var(--ll-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ll-ink-500); }
.ll-stat-cards .card .val { font-family: var(--ll-font-mono); font-size: 28px; font-weight: 700; margin-top: 6px; }
.ll-stat-cards .card .sub { font-size: 12px; color: var(--ll-ink-500); margin-top: 2px; }
/* METRC sync panel — dark, glow dot. */
.ll-sync-panel {
padding: 24px; border: 1px solid var(--ll-line); border-radius: 16px;
background: var(--ll-ink-900); color: var(--ll-cream-100);
}
.ll-sync-panel .head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ll-sync-panel .pulse {
width: 12px; height: 12px; border-radius: 999px;
background: var(--ll-lime-500);
box-shadow: 0 0 0 0 rgba(143, 203, 42, .6);
animation: ll-sync-pulse 1.6s infinite;
}
@keyframes ll-sync-pulse { 0% { box-shadow: 0 0 0 0 rgba(143, 203, 42, .6); } 100% { box-shadow: 0 0 0 12px rgba(143, 203, 42, 0); } }
.ll-sync-panel .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.ll-sync-panel .grid .key { font-family: var(--ll-font-mono); font-size: 10px; color: var(--ll-cream-300); text-transform: uppercase; letter-spacing: .1em; }
.ll-sync-panel .grid .val { margin-top: 2px; font-family: var(--ll-font-mono); }
/* ============= Lead capture + B2B appointment request forms ============= */
.ll-lead-form {
max-width: 720px;
margin: 32px auto;
padding: 32px;
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 16px;
box-shadow: 0 12px 32px -16px rgba(10, 10, 10, 0.10);
}
.ll-lead-form--b2b { border-left: 3px solid var(--ll-emerald-500); }
.ll-lead-form--b2c { border-left: 3px solid var(--ll-lime-500); }
.ll-lead-form--support { border-left: 3px solid var(--ll-amber-500); }
/* Support form — checkbox group for "What's this about?" */
.ll-support-reasons {
border: 1px solid var(--ll-grey-200);
border-radius: 12px;
padding: 18px 20px 14px;
margin: 0 0 16px;
background: var(--ll-cream-50, #FAF7EE);
}
.ll-support-reasons legend {
font-family: var(--ll-font-sans);
font-size: 13px;
font-weight: 600;
color: var(--ll-grey-800);
padding: 0 6px;
margin-left: -6px;
}
.ll-support-reasons__hint {
font-weight: 400;
color: var(--ll-grey-500);
}
.ll-support-reasons__item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 0;
font-family: var(--ll-font-sans);
font-size: 14px;
line-height: 1.4;
color: var(--ll-grey-800);
cursor: pointer;
margin: 0; /* override the .ll-lead-form label baseline */
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.ll-support-reasons__item input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 1px 0 0 0;
flex-shrink: 0;
accent-color: var(--ll-lime-500);
cursor: pointer;
}
.ll-support-reasons__item span {
flex: 1;
}
.ll-support-reasons__item--other {
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.ll-support-reasons__item--other input[type="text"] {
flex: 1 1 220px;
margin-top: 0 !important; /* defeat the .ll-lead-form input margin-top:0 */
padding: 8px 10px !important;
font-size: 14px !important;
min-height: 36px !important;
border-radius: 6px !important;
}
.ll-support-reasons__item--other input[type="text"]:disabled {
background: var(--ll-grey-100) !important;
color: var(--ll-grey-500) !important;
cursor: not-allowed;
}
.ll-lead-form__head { margin-bottom: 20px; }
.ll-lead-form__heading {
font-family: var(--ll-font-display);
font-weight: 700;
font-size: clamp(22px, 2.5vw, 28px);
letter-spacing: -0.02em;
color: var(--ll-grey-900);
margin: 0 0 6px;
}
.ll-lead-form__lede {
font-size: 14px;
color: var(--ll-grey-700);
line-height: 1.55;
margin: 0;
}
/* Lead/appointment form labels — harmonized 2026-04-26 to match the
site-wide static-label pattern (13px sans, weight 600, grey-700,
normal case). Was previously mono-caps 10px eyebrow style which
read as a separate design language from the WC Blocks + classic
WC forms. Operator decision: every form on the site uses the same
label-above-input typography. */
.ll-lead-form label {
display: block;
font-family: var(--ll-font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
line-height: 1.4;
color: var(--ll-grey-700);
margin-bottom: 4px;
}
.ll-lead-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 600px) { .ll-lead-form__row { grid-template-columns: 1fr; } }
.ll-lead-form input[type="text"],
.ll-lead-form input[type="email"],
.ll-lead-form input[type="tel"],
.ll-lead-form input[type="number"],
.ll-lead-form select,
.ll-lead-form textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
min-height: 44px;
margin-top: 0;
border: 1px solid var(--ll-grey-300);
border-radius: 8px;
font-family: var(--ll-font-sans);
font-size: 15px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
line-height: 1.3;
color: var(--ll-grey-900);
background: var(--ll-white);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ll-lead-form input:focus,
.ll-lead-form select:focus,
.ll-lead-form textarea:focus {
outline: none;
border-color: var(--ll-lime-500);
box-shadow: 0 0 0 3px rgba(124, 234, 0, 0.18);
}
.ll-lead-form__textarea { display: block; margin-bottom: 16px; }
.ll-lead-form__textarea textarea { resize: vertical; min-height: 80px; }
.ll-lead-form button[type="submit"] {
display: inline-block;
padding: 12px 24px;
border-radius: 10px;
background: linear-gradient(180deg, #B8FF1F, #7CEA00 60%, #4FBE00);
border: 1px solid var(--ll-lime-700);
color: var(--ll-grey-900);
font-family: var(--ll-font-sans);
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 12px rgba(124, 234, 0, 0.25);
}
.ll-lead-form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124, 234, 0, 0.35); }
.ll-lead-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ll-lead-form__status {
margin-top: 16px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
}
.ll-lead-form__status[data-kind="ok"] { background: var(--ll-emerald-100); color: var(--ll-emerald-900); }
.ll-lead-form__status[data-kind="error"] { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
/* ============= Page enter animation (Elementor pages) ============= */
.ll-page-enter { animation: ll-page-enter .35s ease both; }
@keyframes ll-page-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============= Editorial blog — single article (Yozi-class reading) ============= */
.ll-article {
background: var(--ll-white);
color: var(--ll-grey-900);
}
.ll-article__hero {
background: linear-gradient(180deg, var(--ll-grey-50) 0%, var(--ll-white) 100%);
border-bottom: 1px solid var(--ll-grey-200);
padding: 80px 32px 56px;
}
.ll-article__hero-inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.ll-article__eyebrow {
font-family: var(--ll-font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ll-lime-700);
margin-bottom: 24px;
}
.ll-article__eyebrow a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.ll-article__eyebrow a:hover { color: var(--ll-emerald-700); }
.ll-article__title {
font-family: var(--ll-font-display);
font-weight: 700;
font-size: clamp(36px, 5.5vw, 72px);
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 24px;
color: var(--ll-grey-900);
text-wrap: balance;
}
.ll-article__lede {
font-size: clamp(18px, 2vw, 22px);
line-height: 1.55;
color: var(--ll-grey-700);
margin: 0 auto 32px;
max-width: 720px;
font-weight: 400;
}
.ll-article__mantra {
font-family: var(--ll-font-mono);
font-size: 13px;
font-weight: 600;
color: var(--ll-emerald-700);
letter-spacing: 0.15em;
margin-top: 16px;
}
.ll-article__mantra .sep {
color: var(--ll-amber-500);
margin: 0 2px;
}
.ll-article__hero-image {
max-width: 1200px;
margin: 56px auto 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.ll-article__hero-img {
width: 100%;
height: auto;
display: block;
}
/* Body — narrow column, generous reading typography */
.ll-article__body {
max-width: 720px;
margin: 0 auto;
padding: 64px 32px 48px;
font-size: 18px;
line-height: 1.8;
color: var(--ll-grey-900);
}
.ll-article__body > p:first-child::first-letter {
font-family: var(--ll-font-display);
font-size: 4em;
float: left;
line-height: 0.95;
margin: 0.04em 0.08em 0 0;
color: var(--ll-lime-700);
font-weight: 700;
}
.ll-article__body p {
margin: 0 0 1.4em;
}
.ll-article__body h2 {
font-family: var(--ll-font-display);
font-weight: 700;
font-size: clamp(26px, 3vw, 36px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 2.2em 0 0.6em;
color: var(--ll-grey-900);
text-wrap: balance;
}
.ll-article__body h2::after {
content: "";
display: block;
width: 48px;
height: 3px;
background: var(--ll-lime-500);
margin-top: 12px;
border-radius: 2px;
}
.ll-article__body h3 {
font-family: var(--ll-font-display);
font-weight: 600;
font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.015em;
line-height: 1.25;
margin: 1.6em 0 0.5em;
color: var(--ll-grey-900);
}
.ll-article__body h4 {
font-family: var(--ll-font-display);
font-weight: 600;
font-size: 19px;
margin: 1.4em 0 0.4em;
}
.ll-article__body ul,
.ll-article__body ol {
margin: 0 0 1.4em;
padding-left: 1.6em;
}
.ll-article__body li {
margin-bottom: 0.6em;
padding-left: 0.4em;
}
.ll-article__body ul li::marker {
color: var(--ll-lime-600);
}
.ll-article__body ol li::marker {
color: var(--ll-amber-600);
font-family: var(--ll-font-mono);
font-weight: 600;
}
.ll-article__body strong {
color: var(--ll-grey-900);
font-weight: 600;
}
.ll-article__body em {
color: var(--ll-emerald-700);
font-style: italic;
}
.ll-article__body a {
color: var(--ll-emerald-700);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
.ll-article__body a:hover {
color: var(--ll-lime-700);
text-decoration-thickness: 2px;
}
.ll-article__body blockquote {
border-left: 3px solid var(--ll-lime-500);
background: var(--ll-grey-50);
padding: 20px 28px;
margin: 2em 0;
font-style: italic;
color: var(--ll-grey-700);
border-radius: 0 8px 8px 0;
}
.ll-article__body code {
background: var(--ll-grey-100);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--ll-font-mono);
font-size: 0.9em;
color: var(--ll-emerald-700);
}
.ll-article__body img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 2em 0;
}
/* CTA strip below the article */
.ll-article__cta {
background: var(--ll-grey-50);
border-top: 1px solid var(--ll-grey-200);
padding: 64px 32px;
margin-top: 32px;
}
.ll-article__cta-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.ll-article__cta .ll-btn {
display: inline-block;
padding: 14px 28px;
border-radius: 999px;
font-family: var(--ll-font-display);
font-weight: 600;
font-size: 16px;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ll-article__cta .ll-btn--lime {
background: linear-gradient(180deg, #B8FF1F, #7CEA00 60%, #4FBE00);
color: var(--ll-grey-900);
border: 1px solid var(--ll-lime-700);
box-shadow: 0 4px 12px rgba(124, 234, 0, 0.25);
}
.ll-article__cta .ll-btn--lime:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(124, 234, 0, 0.35);
}
/* Responsive — single article */
@media (max-width: 768px) {
.ll-article__hero { padding: 56px 20px 40px; }
.ll-article__body { padding: 40px 20px 32px; font-size: 17px; line-height: 1.7; }
.ll-article__body > p:first-child::first-letter { font-size: 3em; }
.ll-article__cta { padding: 48px 20px; }
}
/* ============= Editorial blog — index/archive (Yozi-class grid) ============= */
.ll-blog-hero {
background: var(--wp--preset--gradient--drip-bg, linear-gradient(180deg, var(--ll-white), var(--ll-grey-50)));
border-bottom: 1px solid var(--ll-grey-200);
padding: 96px 32px 72px;
}
.ll-blog-hero__inner {
max-width: 1080px;
margin: 0 auto;
text-align: center;
}
.ll-blog-hero__title {
font-family: var(--ll-font-display);
font-weight: 700;
font-size: clamp(48px, 8vw, 96px);
letter-spacing: -0.03em;
line-height: 1.0;
margin: 12px 0 16px;
color: var(--ll-grey-900);
text-wrap: balance;
}
.ll-blog-hero__mantra {
font-family: var(--ll-font-mono);
font-size: clamp(13px, 1.5vw, 16px);
font-weight: 600;
color: var(--ll-emerald-700);
letter-spacing: 0.18em;
margin: 16px 0 24px;
}
.ll-blog-hero__mantra .sep { color: var(--ll-amber-500); margin: 0 2px; }
.ll-blog-hero__lede {
font-size: clamp(17px, 1.8vw, 20px);
line-height: 1.55;
color: var(--ll-grey-700);
max-width: 700px;
margin: 0 auto 32px;
}
.ll-blog-hero__chips {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px;
}
.ll-chip {
display: inline-flex;
align-items: center;
padding: 8px 18px;
border-radius: 999px;
font-family: var(--ll-font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--ll-grey-700);
background: var(--ll-white);
border: 1px solid var(--ll-grey-300);
transition: all 0.15s ease;
}
.ll-chip:hover {
color: var(--ll-grey-900);
border-color: var(--ll-grey-500);
transform: translateY(-1px);
}
.ll-chip--all[data-active="true"] {
background: var(--ll-grey-900);
color: var(--ll-white);
border-color: var(--ll-grey-900);
}
.ll-chip--mfg:hover { border-color: var(--ll-lime-500); color: var(--ll-lime-700); }
.ll-chip--del:hover { border-color: var(--ll-emerald-500); color: var(--ll-emerald-700); }
.ll-chip--wl:hover { border-color: var(--ll-amber-500); color: var(--ll-amber-700); }
.ll-blog-grid {
background: var(--ll-white);
padding: 80px 32px 120px;
}
.ll-blog-grid__inner {
max-width: 1280px;
margin: 0 auto;
}
.ll-blog-grid__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 32px;
}
.ll-post-card {
display: flex;
flex-direction: column;
background: var(--ll-white);
border: 1px solid var(--ll-grey-200);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ll-post-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
border-color: var(--ll-lime-300);
}
.ll-post-card__media {
aspect-ratio: 5 / 3;
overflow: hidden;
background: var(--ll-grey-100);
}
.ll-post-card__media svg { width: 100%; height: 100%; display: block; }
.ll-post-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.ll-post-card:hover .ll-post-card__img { transform: scale(1.04); }
.ll-post-card__body {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.ll-card__pill {
display: inline-flex;
align-self: flex-start;
padding: 5px 12px;
border-radius: 999px;
font-family: var(--ll-font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--ll-grey-100);
color: var(--ll-grey-700);
border: 1px solid var(--ll-grey-200);
}
.ll-card__pill--mfg { background: var(--ll-lime-100); color: var(--ll-lime-700); border-color: var(--ll-lime-300); }
.ll-card__pill--del { background: var(--ll-emerald-100); color: var(--ll-emerald-700); border-color: var(--ll-emerald-300); }
.ll-card__pill--wl { background: var(--ll-amber-100); color: var(--ll-amber-700); border-color: var(--ll-amber-300); }
.ll-post-card__title {
font-family: var(--ll-font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
color: var(--ll-grey-900);
text-wrap: balance;
}
.ll-post-card__lede {
font-size: 15px;
line-height: 1.55;
color: var(--ll-grey-700);
margin: 0;
flex: 1;
}
.ll-post-card__cta {
font-family: var(--ll-font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ll-lime-700);
margin-top: 4px;
}
.ll-post-card:hover .ll-post-card__cta { color: var(--ll-emerald-700); }
/* ── Unified pagination — used by blog, shop, archives, taxonomy pages ──
Operator decision 2026-04-26: every paginator on the site looks like
the journal's. The shop's was rendering pink via WooCommerce's default
stylesheet; we override it uniformly here. */
/* Wrapper layout */
.ll-blog-grid__pager,
.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination,
nav.pagination,
.pagination {
margin-top: 48px;
text-align: center;
}
/* Outer outline around the whole pager — matches the shop's WooCommerce
default look (operator preference 2026-04-26: like the outline). The blog
gets it via .ll-blog-grid__pager (a