/* ============================================================
   Locally Twisted — Brand Foundation Theme
   Source of truth: _resources/STYLE-GUIDE.md plus
   workstreams/brand-audience-style-reset.md
   Phase 1, Slices 1 + 2

   Loaded from the locally_twisted Frappe app through web_include_css.
   Customer-facing CSS should live here or in page-scoped controllers,
   not in Website Settings head_html.
   ============================================================ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:wght@500;600;700&family=Lato:wght@400;700;900&display=swap');

/* ── Color tokens (CSS custom properties) ── */
:root {
  /* Core palette */
  --lt-teal: #0E2240;
  --lt-slate: #0E2240;
  --lt-berry: #B31B34;
  --lt-brass: #B89A5B;
  --lt-ink: #0A0A0B;
  --lt-navy: #0E2240;
  --lt-stone: #E7E5E1;
  --lt-sandstone: #D9C7B3;
  --lt-soft-gray: #4F5661;
  --lt-near-black: #0A0A0B;
  --lt-white: #FFFFFF;
  --lt-near-white: #FAF7F2;

  /* Accent palette — backgrounds, bands, slider panels.
     Variable names remain for compatibility with existing CSS. Values now
     follow the 2026-05-02 brand reset: professional event authority with
     warm paper, slate, brass, muted berry, and deep teal. Balloon color
     should come from photography, product imagery, and customer palettes. */
  --lt-sandstone-accent: #D9C7B3;
  --lt-brass-accent: #B89A5B;
  --lt-olive-accent: #7D8A7A;
  --lt-stone-muted: #E7E5E1;
  --lt-stone-accent: #E7E5E1;

  /* Surface tints — inputs, menus, subtle backgrounds */
  --lt-warm-tint: #F6F0E8;
  --lt-stone-tint: #F2F3F5;
  --lt-slate-tint: #F1F3EF;
  --lt-brass-tint: #F7F1E4;

  /* Spacing scale (8px increments) */
  --lt-space-1: 0.25rem;
  --lt-space-2: 0.5rem;
  --lt-space-3: 0.75rem;
  --lt-space-4: 1rem;
  --lt-space-6: 1.5rem;
  --lt-space-8: 2rem;
  --lt-space-12: 3rem;
  --lt-space-16: 4rem;
  --lt-space-20: 5rem;

  /* Hero contract: a hero is an orientation label, not the page. */
  --lt-hero-standard-height: 220px;
  --lt-hero-padding-y: 1.5rem;
  --lt-hero-title-max: 2rem;
}

@media (min-width: 768px) {
  :root {
    --lt-hero-standard-height: 250px;
    --lt-hero-padding-y: 1.75rem;
    --lt-hero-title-max: 2.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --lt-hero-standard-height: 280px;
    --lt-hero-padding-y: 2rem;
    --lt-hero-title-max: 2.75rem;
  }
}

/* ── Typography ── */
body, .web-page-content, .website-content {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--lt-soft-gray);
  background-color: var(--lt-near-white);
  line-height: 1.6;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: var(--lt-near-black);
  line-height: 1.2;
}

/* Mobile-first type scale */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }

/* Desktop scale */
@media (min-width: 992px) {
  h1, .h1 { font-size: 3rem; }
  h2, .h2 { font-size: 2.25rem; }
  h3, .h3 { font-size: 1.75rem; }
  body, .web-page-content { font-size: 1.125rem; }
}

/* H6 = bold label style */
h6, .h6 {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  color: var(--lt-near-black);
  font-size: 0.875rem;
}

/* Lead paragraphs */
.lead {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--lt-soft-gray);
}

/* ── Buttons ── */
/* Primary CTA: deep teal solid */
.btn-primary {
  background-color: var(--lt-teal);
  border-color: var(--lt-teal);
  color: var(--lt-white);
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lt-navy);
  border-color: var(--lt-navy);
  color: var(--lt-white);
}

/* Secondary: outlined stone, ink text */
.btn-secondary,
.btn-outline-secondary {
  background-color: transparent;
  color: var(--lt-near-black);
  border: 1px solid var(--lt-stone-accent);
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--lt-stone-tint);
  border-color: var(--lt-stone-accent);
  color: var(--lt-near-black);
}

/* Outline light: tertiary actions */
.btn-outline-light {
  background-color: transparent;
  color: var(--lt-soft-gray);
  border: 1px solid var(--lt-soft-gray);
  min-height: 44px;
}

@media (min-width: 992px) {
  .btn-primary,
  .btn-secondary,
  .btn-outline-secondary,
  .btn-outline-light {
    padding: 0.875rem 2rem;
  }
}

/* ── Form inputs ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
textarea,
select,
.form-control {
  background-color: var(--lt-warm-tint);
  border: 1px solid #e5e5e5;
  border-radius: 0.375rem;
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--lt-near-black);
  min-height: 44px;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  outline: none;
  border-color: var(--lt-stone-accent);
  box-shadow: 0 0 0 2px var(--lt-stone-accent);
  background-color: var(--lt-warm-tint);
}

input::placeholder,
textarea::placeholder {
  color: #999;
}

/* ── Focus indicators (accessibility, WCAG 2.1 AA) ── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--lt-near-black);
  outline-offset: 2px;
}

/* ── Reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Cards (product / category) ── */
.card,
.lt-card {
  background-color: var(--lt-white);
  border: 1px solid #f0f0f0;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (min-width: 992px) {
  .card,
  .lt-card {
    padding: 1.5rem;
  }
}

/* ── Section padding ── */
section,
.lt-section {
  padding: 2rem 0;
}

@media (min-width: 992px) {
  section,
  .lt-section {
    padding: 4rem 0;
  }
}

/* ── Thin colored accent bands (40-80px tall) ── */
.lt-band {
  padding: 40px 0;
}

@media (min-width: 992px) {
  .lt-band {
    padding: 60px 0;
  }
}

.lt-band--sandstone { background-color: var(--lt-sandstone-accent); color: var(--lt-near-black); }
.lt-band--stone { background-color: var(--lt-stone-accent); color: var(--lt-near-black); }
.lt-band--olive { background-color: var(--lt-olive-accent); color: var(--lt-near-black); }
.lt-band--brass { background-color: var(--lt-brass-accent); color: var(--lt-near-black); }
.lt-band--stone-muted { background-color: var(--lt-stone-muted); color: var(--lt-near-black); }

/* ── Body text rules ── */
p {
  color: var(--lt-soft-gray);
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: left;
}

/* Never justify body text per style guide */

/* ── Skip-to-content link (accessibility) ── */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--lt-white);
  color: var(--lt-near-black);
  padding: 0.5rem 1rem;
  z-index: 9999;
}

.lt-section .container,
.web-page-content .container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .lt-section .container,
  .web-page-content .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* STRUCTURAL: Frappe wraps every page in <main class="container my-4">
   inside .page-content-wrapper. We refuse that confinement at every
   breakpoint. Sections own their own layout — full-bleed bands span the
   full viewport; sections that want narrow readable content use their
   own inner wrapper with max-width + margin auto. The contract is:
   the framework wrapper provides zero horizontal opinion. Mobile and
   desktop both. This is the foundation other BBC clients build on. */
.page-content-wrapper .container,
.page-content-wrapper main.container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.page-content-wrapper main.container.my-4 {
  /* Remove Bootstrap's vertical wrapper gap so first hero/content bands sit flush under the LT header. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Webshop product detail and cart pages were designed to live inside
   Frappe's centered .container max-width. Our structural override above
   gives sections full viewport (so LT-designed bands span edge-to-edge);
   these webshop-bundled wrappers need their own intentional centering
   to stay readable on desktop. Fluid max-width drops to viewport-padding
   on mobile, so this stays mobile-responsive at every breakpoint. */
.product-container,
.cart-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .product-container,
  .cart-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ============================================================
   Header (Jinja partial override at templates/includes/navbar/navbar.html)
   ============================================================ */

.lt-header {
  background-color: var(--lt-stone-accent);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

/* Tier 1 — utility bar */
.lt-header__utility {
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.lt-header__utility-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.625rem 1rem;
  gap: 1rem;
}

.lt-header__utility-left {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* 17.5px (16px + 1.5px) bold per GL 2026-04-29 — emphasis + readability.
   * Text wraps to two lines via explicit <br> in navbar.html. Content
   * stays at far-left of the column (default justify-self: start) —
   * symmetry is page-edge mirror, not inner-to-logo. */
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lt-soft-gray);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lt-header__truck {
  display: inline-flex;
  align-items: center;
  /* color inherits from parent (lt-soft-gray on desktop strip + mobile strip) */
}

.lt-header__icon {
  flex-shrink: 0;
  vertical-align: middle;
}

.lt-header__icon--truck {
  /* Cab faces right — heading toward the centered brand logo. */
  transform: scaleX(-1);
}

.lt-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  justify-self: center;
}

.lt-header__brand img,
.lt-header__brand .lt-logo {
  /* 1.25x of original 110px desktop / 80px mobile per GL 2026-04-27 r4. */
  display: block;
  height: 138px;
  width: auto;
  max-width: 625px;
}

.lt-header__brand-fallback {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--lt-near-black);
}

.lt-header__utility-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Hug the logo on the right side, matching the left content's small
   * inner gap to the logo (~16px). Per GL 2026-04-29 (option B): symmetry
   * is logo-distance, not page-edge. Empty space falls to the page-right
   * edge instead of between the cluster and the logo. */
  justify-self: start;
}

.lt-header__util-link {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* 17.5px bold per GL 2026-04-29 — matches the left utility text
   * (Bringing celebration...) at the same scale and weight. */
  font-size: 17.5px;
  font-weight: 700;
  color: var(--lt-soft-gray);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lt-header__util-link:hover,
.lt-header__util-link:focus-visible {
  color: var(--lt-near-black);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ============================================================
   Tier 1 utility bar — NEW BEM namespace (lt-utility-bar__*)
   The Round 1 template uses these class names; the old
   .lt-header__utility* rules above serve the prior namespace
   and are preserved for any other references. These rules
   are mobile-first; desktop overrides at (min-width: 992px).
   ============================================================ */

/* Container */
.lt-utility-bar {
    background-color: var(--lt-near-white);
    border-bottom: 1px solid rgba(184, 154, 91, 0.38);
    width: 100%;
}

/* Inner row — 3-column grid: left | center | right */
.lt-utility-bar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 440px) minmax(0, 1fr);
    align-items: center;
    min-height: 104px;
    padding: 0.75rem 1rem;
    gap: 1.5rem;
}

/* Left zone — truck icon + tagline */
.lt-utility-bar__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--lt-navy);
    /* Hide on small mobile; show at 480px+ */
    display: none;
}

@media (min-width: 480px) {
    .lt-utility-bar__left {
        display: flex;
    }
}

/* Truck SVG icon (also reused in mobile strip) */
.lt-utility-bar__truck-icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    /* Mirror so cab faces right, toward the logo */
    transform: scaleX(-1);
    /* Inherit parent color for tinted SVG masks; SVG uses currentColor
       — no explicit color needed here */
}

/* Tagline text */
.lt-utility-bar__tagline {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lt-navy);
    line-height: 1.35;
    max-width: 21rem;
}

/* Center — brand / logo anchor */
.lt-utility-bar__brand {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    text-decoration: none;
}

/* Logo image inside brand anchor */
.lt-utility-bar__logo,
.lt-utility-bar__brand img,
.lt-utility-bar__brand .lt-logo {
    display: block;
    height: auto;
    max-height: 76px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 992px) {
    .lt-utility-bar__logo,
    .lt-utility-bar__brand img,
    .lt-utility-bar__brand .lt-logo {
        max-height: 84px;
    }
}

/* Right zone — ul list containing sign-in, cart, CTA */
.lt-utility-bar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Hug the logo — justify-self: start so empty space falls to page edge */
    justify-self: start;
    min-width: 0;
}

/* Sign-in / My Account link */
.lt-utility-bar__sign-in {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--lt-navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 1px solid rgba(14, 34, 64, 0.22);
    border-radius: 0.25rem;
    line-height: 1.25;
}

.lt-utility-bar__sign-in:hover,
.lt-utility-bar__sign-in:focus-visible {
    color: var(--lt-near-black);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.lt-utility-bar__sign-in:focus-visible {
    outline: 2px solid var(--lt-near-black);
    outline-offset: 2px;
}

/* Cart anchor — position:relative is required so the .lt-cart-count
   badge (position:absolute, top:-6px, right:-10px) anchors here
   and not to the header or viewport. */
.lt-utility-bar__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--lt-soft-gray);
    text-decoration: none;
}

.lt-utility-bar__cart:hover,
.lt-utility-bar__cart:focus-visible {
    color: var(--lt-near-black);
}

.lt-utility-bar__cart:focus-visible {
    outline: 2px solid var(--lt-near-black);
    outline-offset: 3px;
    border-radius: 2px;
}

/* CTA link — inherits .btn .btn-primary global rules;
   these selectors add specificity only when needed. */
.lt-utility-bar__cta,
.lt-utility-bar__cta.btn {
    /* inline-flex with center alignment puts the "Contact Us" text in the
       visual center of the 44px touch-target button. Bootstrap's `.btn` is
       inline-block + text-align:center — that horizontally centers but
       leaves text floating to the top of any button taller than its
       line-height (the bug GL flagged 2026-04-30). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --bs-btn-bg: var(--lt-navy);
    --bs-btn-border-color: var(--lt-navy);
    --bs-btn-color: var(--lt-white);
    --bs-btn-hover-bg: var(--lt-ink);
    --bs-btn-hover-border-color: var(--lt-ink);
    --bs-btn-hover-color: var(--lt-white);
    --bs-btn-active-bg: var(--lt-ink);
    --bs-btn-active-border-color: var(--lt-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 44px;
    padding: 0.65rem 1.15rem;
    background-color: var(--lt-navy);
    border-color: var(--lt-navy);
    color: var(--lt-white);
    border-radius: 0.375rem;
}

.lt-utility-bar__cta:hover,
.lt-utility-bar__cta:focus-visible {
    background-color: var(--lt-ink);
    border-color: var(--lt-ink);
    color: var(--lt-white);
}

@media (min-width: 992px) {
    .lt-utility-bar__cta {
        font-size: 1rem;
    }
}

/* Tier 2 — main nav */
.lt-header__nav {
  background-color: var(--lt-white);
  border-bottom: 2px solid var(--lt-navy);
  position: relative;
}

.lt-header__nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem;
}

.lt-header__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.8vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lt-header__nav-link {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lt-near-black);
  text-decoration: none;
  padding: 0.5rem 0.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  transition: color 0.18s ease;
}

.lt-header__nav-link:hover {
  color: var(--lt-berry);
  text-decoration: none;
}

/* Keyboard focus needs a visible indicator (WCAG 2.4.7).
 * Mouse hover is color-only — no underline. */
.lt-header__nav-link:focus-visible {
  color: var(--lt-berry);
  outline: 2px solid var(--lt-brass);
  outline-offset: 4px;
  border-radius: 2px;
}

.lt-header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  color: var(--lt-near-black);
  text-decoration: none;
  border-radius: 0.25rem;
}

.lt-header__search-btn:hover,
.lt-header__search-btn:focus-visible {
  color: var(--lt-berry);
  text-decoration: none;
}

.lt-header__search-btn:focus-visible {
  outline: 2px solid var(--lt-brass);
  outline-offset: 3px;
}

/* Mobile header */
.lt-header__mobile {
  background-color: var(--lt-white);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.lt-header__mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 76px;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
}

.lt-header__mobile-row.container {
  max-width: 100%;
}

.lt-header__mobile-brand {
  display: inline-flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: min(190px, calc(100vw - 180px));
}

.lt-header__mobile-actions {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 96px;
  width: 96px;
  max-width: 96px;
  margin-right: clamp(5.5rem, calc(430px - 100vw + 5.5rem), 10rem);
}

.lt-header__mobile-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--lt-near-black);
  text-decoration: none;
}

.lt-header__brand--mobile img,
.lt-header__brand--mobile .lt-logo,
.lt-header__mobile-brand img,
.lt-header__mobile-brand .lt-logo {
  /* Responsive cap so the 44px hamburger + 32px row padding + 12px gap
     always fits inside the viewport. height: auto preserves the logo's
     natural aspect ratio at every screen width; max-height: 90px keeps
     the r4 vision close on devices wide enough to show it. Was a fixed
     350px max-width which left only 25px for a 44px hamburger button —
     pushing the toggle 35px offscreen on every mobile device. */
  height: auto;
  width: clamp(128px, 44vw, 180px);
  max-height: 52px;
  max-width: 100%;
  object-fit: contain;
}

.lt-header__toggle {
  background: none;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 0.375rem;
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.lt-header__toggle:hover,
.lt-header__toggle:focus-visible {
  border-color: var(--lt-near-black);
}

.lt-header__mobile-strip {
  background-color: var(--lt-navy);
  text-align: center;
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8125rem;
  color: var(--lt-near-white);
  padding: 0.4rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
}

.lt-header__mobile-strip small {
  display: block;
  min-width: 0;
  max-width: calc(100% - 1.5rem);
  line-height: 1.3;
  white-space: normal;
}

/* Mobile drawer — overlay (NOT inline expand). Slides in from the right
 * over the page content; body scrolls locked behind it. The hamburger
 * (and the whole .lt-header) stays sticky-visible while the drawer is
 * closed (see media query below). Per GL 2026-04-28. */
.lt-header__mobile-nav-collapse {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 360px;
  background-color: var(--lt-white);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 1010;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.lt-header__mobile-nav-collapse.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* Drawer head — holds the close button. */
.lt-header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.lt-header__close {
  background: none;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 0.375rem;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--lt-near-black);
}

.lt-header__close:hover,
.lt-header__close:focus-visible {
  border-color: var(--lt-near-black);
}

/* Backdrop behind the drawer — semi-transparent, dismisses on click. */
.lt-header__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.lt-header__backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Body scroll lock while drawer is open. */
body.lt-nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lt-header__mobile-nav-collapse,
  .lt-header__backdrop {
    transition: none;
  }
}

.lt-header__mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.lt-header__mobile-nav-link {
  display: block;
  padding: 0.875rem 1.25rem;
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--lt-near-black);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 26, 26, 0.04);
}

.lt-header__mobile-nav-link:hover,
.lt-header__mobile-nav-link:focus-visible {
  background-color: var(--lt-stone-tint);
  color: var(--lt-teal);
}

.lt-header__mobile-nav-divider {
  height: 1px;
  background-color: rgba(26, 26, 26, 0.08);
  margin: 0.5rem 0;
}

/* Sticky mobile header — hamburger always reachable while scrolling.
 * Only applies <992px (mobile breakpoint matching .d-lg-none). */
@media (max-width: 991.98px) {
  .lt-header {
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  }
}

/* ============================================================
   Footer (Jinja partial override at templates/includes/footer/footer.html)
   ============================================================ */

.lt-footer {
  background-color: var(--lt-navy);
  color: var(--lt-near-white);
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  margin-top: auto;
}

/* Section 1 — centered brand + social */
.lt-footer__brand-band {
  padding: 1.75rem 1rem 1.25rem;
  text-align: center;
  border-top: 1px solid rgba(184, 154, 91, 0.32);
}

.lt-footer__brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lt-footer__brand-name,
.lt-footer__brand-tagline {
  text-align: center;
}

.lt-footer__brand-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  color: var(--lt-near-white);
  margin: 0 0 0.25rem;
  line-height: 1.1;
}

.lt-footer__brand-tagline {
  font-size: 1rem;
  color: rgba(250, 247, 242, 0.76);
  margin: 0 0 1.25rem;
}

.lt-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
}

.lt-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: transparent;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.lt-footer__social-link:hover,
.lt-footer__social-link:focus-visible {
  transform: translateY(-2px);
  outline: 2px solid var(--lt-brass);
  outline-offset: 2px;
}

.lt-footer__social-link img {
  width: 40px;
  height: 40px;
  display: block;
}

.lt-footer .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Section 2 — three column links */
.lt-footer__links {
  padding: 1.5rem 1rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(184, 154, 91, 0.18);
}

.lt-footer__links-row {
  justify-content: center;
}

.lt-footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  text-align: center;
}

.lt-footer__col-title {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lt-brass);
  margin: 0 0 0.85rem;
}

.lt-footer__col-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

.lt-footer__col-list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.lt-footer__col-list a {
  color: rgba(250, 247, 242, 0.78);
  text-decoration: none;
}

.lt-footer__col-list a:hover,
.lt-footer__col-list a:focus-visible {
  color: var(--lt-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lt-footer__col-list--info li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: rgba(250, 247, 242, 0.78);
  text-align: center;
}

.lt-footer__col-list--info a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.lt-footer__icon {
  display: inline-flex;
  font-size: 1rem;
  width: 1.25rem;
}

/* Section 3 — copyright bar
   Uses warm white to break from the deep navy authority footer above it. */
.lt-footer__bar {
  background-color: var(--lt-near-white);
  border-top: 1px solid rgba(184, 154, 91, 0.32);
  padding: 0.75rem 1rem;
}

.lt-footer__legal {
  font-size: 0.875rem;
  color: var(--lt-soft-gray);
}

.lt-footer__legal a {
  color: var(--lt-soft-gray);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lt-footer__legal a:hover,
.lt-footer__legal a:focus-visible {
  color: var(--lt-navy);
}

.lt-footer__sep {
  margin: 0 0.4rem;
  color: rgba(26, 26, 26, 0.35);
}

/* Mobile adjustments
   Columns stay 3-across at every breakpoint per spec — typography
   shrinks so narrow columns (~110-130px at 375-414px viewports)
   don't crowd. Long link text wraps within its column. */
@media (max-width: 767.98px) {
  .lt-footer__brand-band {
    padding: 1.5rem 1rem 1rem;
  }
  .lt-footer__links {
    padding-top: 1.25rem;
  }
  .lt-footer__brand-name {
    font-size: 1.5rem;
  }
  .lt-footer__col {
    margin-bottom: 0;
  }
  .lt-footer__col-title {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
  }
  .lt-footer__col-list li {
    margin-bottom: 0.4rem;
    line-height: 1.4;
  }
  .lt-footer__col-list a,
  .lt-footer__col-list li {
    font-size: 1rem;
  }
  .lt-footer__col-list--info li {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .lt-footer__icon {
    font-size: 1rem;
    width: 1rem;
  }
  .lt-footer__links .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .lt-footer__links .col-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ----------------------------------------------------------------------
   Full-bleed band — promoted from home.py PAGE_CSS 2026-04-27 (second
   in-project use, on /balloon-twisting-and-face-painting Common Questions).
   Breaks a section out of Frappe's parent .container so its background
   spans the full viewport. Pair with an inner div (max-width + margin auto)
   to keep readable content width.
   ---------------------------------------------------------------------- */
.lt-fullbleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ====================================================================
   Product detail page (/shop-items/<group>/<slug>)
   Overrides webshop's stock layout. Replaces "Item Code" jargon, the
   "/ Nos" UoM display, and the dialog-hidden variant selector with an
   inline chips + dropdown UI.
   2026-04-30 build.
   ==================================================================== */

/* Right-side details panel */
.lt-product__details {
    padding: 0 1.25rem;
}
.lt-product__eyebrow {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lt-soft-gray);
    margin: 0 0 0.5rem;
}
.lt-product__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.lt-product__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--lt-near-black);
    margin: 0;
    flex: 1;
}
@media (min-width: 992px) {
    .lt-product__title { font-size: 2.5rem; }
}
.lt-product__wishlist {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--lt-soft-gray);
    flex-shrink: 0;
}
.lt-product__wishlist:hover { color: var(--lt-near-black); }
.lt-product__description {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--lt-near-black);
    margin-top: 1.5rem;
}
/* Two-field product copy: brand description (voice) + details (specs). */
.lt-product__brand-description {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--lt-near-black);
    margin-top: 1.75rem;
}
.lt-product__brand-description p { margin-bottom: 0.85rem; }
.lt-product__brand-description p:last-child { margin-bottom: 0; }

.lt-product__details-section {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.lt-product__details-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--lt-near-black);
    margin: 0 0 0.85rem 0;
    letter-spacing: 0.005em;
}
.lt-product__details-body {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9875rem;
    line-height: 1.6;
    color: var(--lt-near-black);
}
.lt-product__details-body p { margin-bottom: 0.65rem; }
.lt-product__details-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0.25rem 0 0.5rem 0;
}
.lt-product__details-body ul li {
    padding-left: 1.1rem;
    position: relative;
    margin-bottom: 0.35rem;
}
.lt-product__details-body ul li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.65em;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--lt-berry);
    border-radius: 50%;
}
.lt-product__inquiry {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    color: var(--lt-soft-gray);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    line-height: 1.55;
}
.lt-product__inquiry a {
    color: var(--lt-near-black);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ── Variant selector (item_configure.html override) ───────────────── */

.lt-product__configure {
    margin: 1.5rem 0;
}
.lt-product__attr {
    margin-bottom: 1.25rem;
}
.lt-product__attr-label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lt-near-black);
    margin-bottom: 0.5rem;
}
.lt-product__attr-selected {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lt-soft-gray);
    font-size: 0.875rem;
}

/* Chips for low-cardinality attributes */
.lt-product__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.lt-product__chip {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.lt-product__chip-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lt-product__chip-label {
    display: inline-block;
    padding: 0.55rem 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--lt-near-black);
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    user-select: none;
}
.lt-product__chip:hover .lt-product__chip-label {
    color: var(--lt-near-black);
    text-decoration: underline;
    text-underline-offset: 0.32em;
}
.lt-product__chip.is-disabled {
    cursor: not-allowed;
}
.lt-product__chip-input:disabled + .lt-product__chip-label {
    background-color: transparent;
    color: rgba(26, 26, 26, 0.42);
}
.lt-product__chip.is-disabled:hover .lt-product__chip-label {
    text-decoration: none;
}
.lt-product__chip-input:checked + .lt-product__chip-label {
    background-color: transparent;
    color: var(--lt-near-black);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.32em;
}
.lt-product__chip-input:focus-visible + .lt-product__chip-label {
    outline: 2px solid var(--lt-teal);
    outline-offset: 2px;
}

/* Select for high-cardinality attributes */
.lt-product__select {
    width: 100%;
    max-width: 340px;
    padding: 0.65rem 2.25rem 0.65rem 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--lt-near-black);
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px;
    cursor: pointer;
}
.lt-product__select:focus-visible {
    outline: 2px solid var(--lt-teal);
    outline-offset: 2px;
}
.lt-product__select option:disabled {
    color: rgba(26, 26, 26, 0.42);
}

.lt-product__configure-status {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    color: var(--lt-soft-gray);
    margin: 0.75rem 0 1rem;
    min-height: 1.2em;
}
.lt-product__configure-status.is-error {
    color: #c0392b;
}

/* ── Add to Cart block (item_add_to_cart.html override) ────────────── */

.lt-product__cart {
    margin-top: 1.25rem;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}
.lt-product__price {
    margin-bottom: 0.75rem;
}
.lt-product__price-current {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.875rem;
    color: var(--lt-near-black);
}
.lt-product__price-mrp {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    color: var(--lt-soft-gray);
    margin-left: 0.5rem;
}
.lt-product__stock {
    margin-bottom: 1rem;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
}
.lt-product__stock-flag--in {
    color: #2e8b57;
    font-weight: 600;
}
.lt-product__stock-flag--out {
    color: #c0392b;
    font-weight: 600;
}
.lt-product__stock-flag--backorder {
    color: var(--lt-soft-gray);
}

.lt-product__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.lt-product__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border-radius: 0.375rem;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 48px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    line-height: 1.2;
}
.lt-product__cta--primary {
    background-color: var(--lt-teal);
    color: var(--lt-white);
    border-color: var(--lt-teal);
}
.lt-product__cta--primary:hover:not([disabled]),
.lt-product__cta--primary:focus-visible {
    background-color: var(--lt-navy);
    border-color: var(--lt-navy);
    color: var(--lt-white);
    text-decoration: none;
}
.lt-product__cta--primary[disabled] {
    background-color: rgba(15, 61, 62, 0.3);
    border-color: rgba(15, 61, 62, 0.3);
    cursor: not-allowed;
}
.lt-product__cta--secondary {
    background-color: var(--lt-white);
    color: var(--lt-near-black);
    border-color: rgba(26, 26, 26, 0.18);
}
.lt-product__cta--secondary:hover,
.lt-product__cta--secondary:focus-visible {
    border-color: var(--lt-near-black);
    background-color: var(--lt-warm-tint);
    color: var(--lt-near-black);
    text-decoration: none;
}
.lt-product__cta.hidden { display: none; }

.lt-product__inquiry-cross {
    margin: 0.75rem 0 0;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    color: var(--lt-soft-gray);
    line-height: 1.45;
}
.lt-product__inquiry-cross a {
    color: var(--lt-near-black);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ====================================================================
   Listing pages — /shop-items/<group>, /all-products
   Webshop's product_ui/list.js (compiled bundle, line 101) bakes in
   "Item Group | Item Code : <slug>" jargon. We can't override the JS
   without forking the bundle — hide the jargon line via CSS instead.
   2026-04-30 build.
   ==================================================================== */

/* Kill the "Arches | Item Code : basketball-arch" jargon line in cards */
.product-list .product-code,
.item-card-group-section .product-code,
#product-listing .product-code {
    display: none !important;
}

/* Body class set by webshop sets background-color to gray; preserve LT ground */
body.product-page {
    background-color: var(--lt-near-white);
}

/* Page title typography (the h2 above the product grid) */
.item-group-content h2,
.page-content-wrapper h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
}

/* ====================================================================
   /shop-by-category — LT-themed override
   2026-04-30 build.
   ==================================================================== */

.lt-by-cat__hero {
    background-color: var(--lt-near-white);
    padding: 4rem 1.25rem 3rem;
}
.lt-by-cat__hero-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}
.lt-by-cat__eyebrow {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lt-soft-gray);
    margin: 0 0 0.75rem;
}
.lt-by-cat__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.5rem;
    color: var(--lt-near-black);
    margin: 0 0 1.25rem;
    line-height: 1.1;
    max-width: 22ch;
}
@media (min-width: 992px) {
    .lt-by-cat__title { font-size: 3.5rem; }
    .lt-by-cat__hero { padding: 5rem 2rem 4rem; }
}
.lt-by-cat__lede {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.05rem;
    color: var(--lt-soft-gray);
    margin: 0;
    max-width: 60ch;
    line-height: 1.55;
}
.lt-by-cat__lede a {
    color: var(--lt-near-black);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
/* ====================================================================
   Cart count badge
   Rules moved here from the inline <style> block in navbar.html
   (Build Brief hard constraint §5: no inline <style> in templates).
   Populated and cleared by lt-guest-cart.js paintBadges() on every
   cart change. Hidden when count = 0 via absence of .is-populated.
   2026-04-30 chrome rebuild.
   ==================================================================== */

.lt-header__util-link--cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--lt-near-black);
    text-decoration: none;
    border-radius: 0.25rem;
}

.lt-header__util-link--cart:hover,
.lt-header__util-link--cart:focus-visible {
    color: var(--lt-teal);
    text-decoration: none;
}

.lt-header__util-link--cart:focus-visible {
    outline: 2px solid var(--lt-teal);
    outline-offset: 3px;
}

.lt-cart-count {
    display: none;
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #c0392b;
    color: #ffffff;
    border-radius: 9px;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

.lt-cart-count.is-populated {
    display: inline-block;
}

/* Mobile variant — sits inline next to "Cart" text in the drawer list item */
.lt-cart-count--mobile {
    position: static;
    margin-left: 0.5rem;
    background-color: var(--lt-teal);
    vertical-align: middle;
}

/* ====================================================================
   Footer — Newsletter strip
   Hetzner-faithful: "Stay in the loop" heading, subhead, email input
   + Join button, error/success feedback states.
   Builder JS owns the submit handler and frappe.call wiring.
   2026-04-30 chrome rebuild.
   ==================================================================== */

.lt-footer-newsletter {
    background-color: var(--lt-near-white);
    padding: 2.5rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

@media (min-width: 768px) {
    .lt-footer-newsletter {
        padding: 3rem 1.5rem;
    }
}

.lt-footer-newsletter__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--lt-near-black);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .lt-footer-newsletter__heading {
        font-size: 1.875rem;
    }
}

.lt-footer-newsletter__subhead {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    color: var(--lt-soft-gray);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.lt-footer-newsletter__form {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 480px;
    margin: 0 auto;
}

.lt-footer-newsletter__input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(26, 26, 26, 0.18);
    border-radius: 0.375rem;
    background-color: var(--lt-white);
    color: var(--lt-near-black);
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    min-height: 44px;
}

.lt-footer-newsletter__input:focus-visible {
    outline: 2px solid var(--lt-brass);
    outline-offset: 1px;
    border-color: var(--lt-brass);
}

.lt-footer-newsletter__input::placeholder {
    color: #999;
}

.lt-footer-newsletter__button {
    padding: 0.75rem 1.5rem;
    background-color: var(--lt-navy);
    color: var(--lt-white);
    border: 1px solid var(--lt-navy);
    border-radius: 0.375rem;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lt-footer-newsletter__button:hover,
.lt-footer-newsletter__button:focus-visible {
    background-color: var(--lt-ink);
    border-color: var(--lt-ink);
    color: var(--lt-white);
    outline: none;
}

.lt-footer-newsletter__button:focus-visible {
    outline: 2px solid var(--lt-brass);
    outline-offset: 2px;
}

.lt-footer-newsletter__button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Feedback states — shown by lt-newsletter.js after submit attempt.
   Loud-failure rule: error must be user-visible with phone fallback. */
.lt-footer-newsletter__error,
.lt-footer-newsletter__success {
    margin-top: 0.75rem;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    line-height: 1.45;
}

.lt-footer-newsletter__error {
    color: #c0392b;
    background-color: #fdf0ef;
    border: 1px solid rgba(192, 57, 43, 0.25);
    border-radius: 0.375rem;
    padding: 0.625rem 0.875rem;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.lt-footer-newsletter__success {
    color: #2e7d32;
    background-color: #f0faf0;
    border: 1px solid rgba(46, 125, 50, 0.25);
    border-radius: 0.375rem;
    padding: 0.625rem 0.875rem;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Hidden utility — JS toggles these by removing the hidden attribute */
.lt-footer-newsletter__error[hidden],
.lt-footer-newsletter__success[hidden] {
    display: none;
}

/* .lt-footer__bar rules live above in the BEM footer section (~line 808).
   The global prefers-reduced-motion block at lines 198-207 already covers
   all transition suppression site-wide. No redundant blocks needed here. */

/* ====================================================================
   Category / Item Group listing page — /shop-items/<group>
   Template override: templates/generators/item_group.html
   Mobile-first. 1-col → 2-col (600px) → sidebar+3-col (992px).
   BEM root: .lt-shop
   2026-04-30 build.
   ==================================================================== */

/* ── Page hero ─────────────────────────────────────────────────────── */
.lt-shop__hero {
    background-color: var(--lt-near-white);
    min-height: var(--lt-hero-standard-height);
    height: var(--lt-hero-standard-height);
    max-height: var(--lt-hero-standard-height);
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(26, 26, 26, 0.06);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.lt-shop__hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding-block: var(--lt-hero-padding-y);
}

.lt-shop__eyebrow {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lt-soft-gray);
    margin: 0 0 0.5rem;
}

.lt-shop__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: min(2rem, var(--lt-hero-title-max));
    color: var(--lt-near-black);
    margin: 0;
    line-height: 1.15;
}

@media (min-width: 992px) {
    .lt-shop__hero {
        padding-inline: 2rem;
    }
    .lt-shop__title {
        font-size: var(--lt-hero-title-max);
    }
}

/* ── Main layout wrapper ───────────────────────────────────────────── */
.lt-shop__layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    display: block;
}

@media (min-width: 992px) {
    .lt-shop__layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 2.5rem;
        padding: 2.5rem 2rem 4rem;
        align-items: start;
    }
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.lt-shop__sidebar {
    display: none;
}

@media (min-width: 992px) {
    .lt-shop__sidebar {
        display: block;
        position: sticky;
        top: 1.5rem;
    }
}

.lt-shop__sidebar-heading {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lt-soft-gray);
    margin: 0 0 0.75rem;
}

.lt-shop__sidebar-list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}

.lt-shop__sidebar-item {
    margin-bottom: 0.125rem;
}

.lt-shop__sidebar-link {
    display: block;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    color: var(--lt-soft-gray);
    text-decoration: none;
    padding: 0.5rem 0.625rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.3;
}

.lt-shop__sidebar-link:hover,
.lt-shop__sidebar-link:focus-visible {
    background-color: var(--lt-warm-tint);
    color: var(--lt-near-black);
    text-decoration: none;
    outline: none;
}

.lt-shop__sidebar-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--lt-near-black);
}

.lt-shop__sidebar-link.is-active {
    background-color: var(--lt-warm-tint);
    color: var(--lt-near-black);
    font-weight: 600;
}

.lt-shop__filters-heading {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lt-soft-gray);
    margin: 0 0 0.75rem;
}

.lt-shop__clear-link {
    display: inline-block;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8125rem;
    color: var(--lt-soft-gray);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    margin-top: 0.75rem;
}

.lt-shop__clear-link:hover,
.lt-shop__clear-link:focus-visible {
    color: var(--lt-near-black);
}

/* Desktop filters live in sidebar */
.lt-shop__filters--desktop {
    display: none;
}

@media (min-width: 992px) {
    .lt-shop__filters--desktop {
        display: block;
        border-top: 1px solid rgba(26, 26, 26, 0.08);
        padding-top: 1.25rem;
    }
}

/* Mobile filter panel */
.lt-shop__filters--mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 360px;
    background-color: var(--lt-white);
    box-shadow: -4px 0 20px rgba(26, 26, 26, 0.12);
    z-index: 1020;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .lt-shop__filters--mobile {
        display: none;
    }
}

.lt-shop__filters-mobile-inner {
    padding: 1.25rem;
}

.lt-shop__filters-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.lt-shop__filter-close {
    background: none;
    border: 1px solid rgba(26, 26, 26, 0.12);
    border-radius: 0.375rem;
    padding: 0.4rem;
    min-width: 40px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--lt-near-black);
}

.lt-shop__filter-close:hover,
.lt-shop__filter-close:focus-visible {
    border-color: var(--lt-near-black);
}

.lt-shop__filter-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1010;
}

body.lt-filter-open {
    overflow: hidden;
}

/* ── Main content area ─────────────────────────────────────────────── */
.lt-shop__main {
    min-width: 0;
}

/* ── Toolbar ───────────────────────────────────────────────────────── */
.lt-shop__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lt-shop__toolbar-count {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    color: var(--lt-soft-gray);
    margin: 0;
}

.lt-shop__toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lt-shop__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid rgba(26, 26, 26, 0.18);
    border-radius: 0.375rem;
    padding: 0.55rem 0.875rem;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--lt-near-black);
    cursor: pointer;
    min-height: 44px;
}

.lt-shop__filter-toggle:hover,
.lt-shop__filter-toggle:focus-visible {
    border-color: var(--lt-near-black);
    outline: none;
}

@media (min-width: 992px) {
    .lt-shop__filter-toggle {
        display: none;
    }
}

.lt-shop__sort-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lt-shop__sort-label {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    color: var(--lt-soft-gray);
    white-space: nowrap;
}

.lt-shop__sort-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid rgba(26, 26, 26, 0.18);
    border-radius: 0.375rem;
    background-color: var(--lt-white);
    color: var(--lt-near-black);
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 10px;
    cursor: pointer;
    min-height: 40px;
}

.lt-shop__sort-select:focus-visible {
    outline: 2px solid var(--lt-teal);
    outline-offset: 2px;
    border-color: var(--lt-near-black);
}

/* ── Product grid ──────────────────────────────────────────────────── */

/* Hide webshop's injected toolbar (.toolbar div: search box + view togglers).
   We render our own sort/filter toolbar above #product-listing.
   The div is appended into #product-listing by ProductView.prepare_toolbar(). */
#product-listing .toolbar {
    display: none;
}

/* Hide the list-view area — we force grid view via localStorage before
   all-products/index.js runs. Webshop's set_view_state() adds .hidden to
   #products-list-area when view_type is "Grid View", but belt-and-suspenders. */
#products-list-area {
    display: none;
}

/* #product-listing wraps both areas — keep it as a plain block. */
#product-listing.lt-shop__grid {
    display: block;
}

/* #products-grid-area is webshop's actual card container.
   It gets class="row products-list mt-minus-1" from Bootstrap.
   Override Bootstrap's .row flex behaviour with CSS grid.
   Mobile-first: 1 col → 2 col (480px+) → 3 col (992px+). */
#products-grid-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 768px) {
    #products-grid-area {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    #products-grid-area {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Each card cell — webshop wraps each card in .item-card.col-sm-4.
   Override Bootstrap's col padding/flex behaviour so it fills the grid cell. */
#products-grid-area .item-card {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: none;
}

.lt-shop__loading {
    grid-column: 1 / -1;
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    color: var(--lt-soft-gray);
    text-align: center;
    padding: 3rem 0;
}

/* ── Webshop card override ─────────────────────────────────────────── */
/* Actual webshop card structure (verified from live DOM 2026-04-30):
   .item-card.col-sm-4
     .card.text-left
       .card-img-container
         a > img.card-img
       .card-body.card-body-flex
         div > a > .product-title
         .product-category
         .product-price
         a > .btn.btn-sm.btn-explore-variants   ← "Explore" button
*/

/* The card itself — .card (no product-card class in actual DOM) */
#products-grid-area .card {
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--lt-white);
    box-shadow: 0 1px 4px rgba(26, 26, 26, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#products-grid-area .card:hover {
    box-shadow: 0 4px 16px rgba(26, 26, 26, 0.10);
    transform: translateY(-2px);
}

/* Image container — square aspect ratio */
#products-grid-area .card-img-container {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--lt-warm-tint);
    flex-shrink: 0;
    display: block;
}

#products-grid-area .card-img-container a {
    display: block;
    width: 100%;
    height: 100%;
}

#products-grid-area .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

#products-grid-area .card:hover .card-img {
    transform: scale(1.03);
}

/* Card body */
#products-grid-area .card-body {
    padding: 0.875rem 0.875rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

/* Webshop wraps the title in an extra div with inline margin — neutralise */
#products-grid-area .card-body > div:first-child {
    margin-top: 0;
    display: block;
}

#products-grid-area .product-title {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--lt-near-black);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}

#products-grid-area a:hover .product-title {
    text-decoration: none;
    color: var(--lt-near-black);
}

/* Category label — de-emphasise */
#products-grid-area .product-category {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    color: var(--lt-soft-gray);
    margin: 0.125rem 0 0;
}

#products-grid-area .product-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.125rem;
    color: var(--lt-near-black);
    margin: 0.375rem 0 0;
}

/* Hide Webshop's duplicate Explore link/button from LT category cards.
   Hide the wrapping anchor too so axe does not see an empty focusable link. */
#products-grid-area .card-body > a:has(.btn-explore-variants),
#products-grid-area .card-body > a:has(.btn-explore),
#products-grid-area .btn-explore-variants,
#products-grid-area .btn-explore {
    display: none;
}

/* De-link the card body's wrapping anchor — text decoration off */
#products-grid-area .card-body a {
    text-decoration: none;
    color: inherit;
}

#products-grid-area .card-body a:hover {
    text-decoration: none;
    color: inherit;
}

/* ── Pagination ────────────────────────────────────────────────────── */
.lt-shop__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.lt-shop__page-btn {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lt-near-black);
    background: none;
    border: 1px solid rgba(26, 26, 26, 0.18);
    border-radius: 0.375rem;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    min-height: 40px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lt-shop__page-btn:hover:not([disabled]),
.lt-shop__page-btn:focus-visible:not([disabled]) {
    border-color: var(--lt-near-black);
    background-color: var(--lt-warm-tint);
    outline: none;
}

.lt-shop__page-btn[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* ── Webshop filter widget — neutralise default Bootstrap margin ───── */
.lt-shop__sidebar .filters-section,
.lt-shop__filters--mobile .filters-section {
    margin: 0;
    padding: 0;
}

.lt-shop__sidebar .filter-label,
.lt-shop__filters--mobile .filter-label {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--lt-near-black);
    margin-bottom: 0.5rem;
    text-transform: none;
    letter-spacing: 0;
}

.lt-shop__sidebar .filter-options input[type="checkbox"],
.lt-shop__filters--mobile .filter-options input[type="checkbox"] {
    accent-color: var(--lt-teal);
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #products-grid-area .card.product-card,
    #products-grid-area .product-image img {
        transition: none;
    }
}

/* ── Card refinement to match Hetzner spec ─────────────────────────────
   GL feedback 2026-04-30: cards looked tacky. Hetzner cards have NO border,
   NO shadow, NO hover transforms — just clean image + name + description +
   price. Strip the chrome and add the description text. JS patch in
   templates/generators/item_group.html replaces .product-category with
   .lt-card-desc carrying the item's brand description. */

#products-grid-area .card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    transition: none;
}

#products-grid-area .card:hover {
    box-shadow: none;
    transform: none;
}

#products-grid-area .card-img-container {
    background-color: transparent;
    border-radius: 0.25rem;
}

#products-grid-area .card:hover .card-img {
    transform: none;
}

#products-grid-area .card-body {
    padding: 0.875rem 0 0.5rem;
}

/* Defensive — if the JS patch fails, hide the raw category sub-tag */
#products-grid-area .product-category {
    display: none;
}

/* Description line — Hetzner's muted small text under the title */
#products-grid-area .lt-card-desc {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lt-soft-gray, #6c757d);
    margin: 0.375rem 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#products-grid-area .product-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0.25rem 0 0;
}

#products-grid-area .product-price {
    font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lt-near-black);
    margin: 0.25rem 0 0;
}

/* ── Container, spacing, and overflow fixes (GL feedback 2026-04-30) ──
   Issues being fixed:
   1. Cards too small: 1200px page max + 220px sidebar + gaps left only
      876px for the main grid → 276px cards. Push max-width wider, trim
      sidebar, add grid gap so cards breathe.
   2. Join button (newsletter) compressed to 48px wide — Bootstrap's .btn
      padding wins over the lt-footer-newsletter__button rule due to
      specificity. Higher-specificity selector and explicit min-width fix.
   3. Pagination Next button alignment — center the pagination and give
      it the same horizontal rhythm as the grid above. */

/* Open up the shop layout — bigger cards, more breathing room */
@media (min-width: 992px) {
    .lt-shop__layout {
        max-width: 1500px;
        padding: 2.5rem 2.5rem 4rem;
        grid-template-columns: 200px 1fr;
        gap: 3rem;
    }
}

/* More space between cards */
#product-listing.lt-shop__grid {
    gap: 2rem 1.75rem;
}

/* Pagination — centered like Hetzner, with gap between buttons, contained */
.lt-shop__pagination {
    justify-content: center;
    gap: 1rem;
    max-width: 100%;
    flex-wrap: wrap;
}

.lt-shop__page-btn {
    padding: 0.625rem 1.5rem;
    min-height: 44px;
    border-radius: 0.375rem;
}

/* Newsletter form — beat Bootstrap's .btn cascade for the Join button.
   Higher specificity (parent class) and min-width guarantee. */
.lt-footer-newsletter .lt-footer-newsletter__button,
.lt-footer-newsletter button.lt-footer-newsletter__button {
    padding: 0.75rem 1.75rem;
    min-width: 96px;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.375rem;
}

/* And give the form a bit more breathing room between input + button */
.lt-footer-newsletter__form {
    gap: 0.75rem;
    max-width: 520px;
}

/* Hero on shop pages — match the layout's wider container */
@media (min-width: 992px) {
    .lt-shop__hero-inner {
        max-width: 1500px;
        padding: 0 2.5rem;
    }
}

/* ── Newsletter banner real fix (GL feedback round 2) ──────────────────
   1. Heading + subhead were rendering text-align: LEFT despite the
      .text-center bootstrap class on the container. Force center with
      higher specificity.
   2. The form contains a wrapping <div class="lt-footer-newsletter__input-group">
      around the input + button. That wrapper had no CSS, so it shrank to
      content and the input + button stacked vertically. Make it a horizontal
      flex container so they sit side by side with proper spacing. */

.lt-footer-newsletter .lt-footer-newsletter__heading,
.lt-footer-newsletter .lt-footer-newsletter__subhead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.lt-footer-newsletter .lt-footer-newsletter__subhead {
    max-width: 60ch;
}

.lt-footer-newsletter .lt-footer-newsletter__form {
    display: block;
    max-width: 520px;
    margin: 0 auto;
}

.lt-footer-newsletter .lt-footer-newsletter__input-group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.lt-footer-newsletter .lt-footer-newsletter__input-group .lt-footer-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.lt-footer-newsletter .lt-footer-newsletter__input-group .lt-footer-newsletter__button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .lt-footer-newsletter .lt-footer-newsletter__input-group {
        flex-direction: column;
    }

    .lt-footer-newsletter .lt-footer-newsletter__input-group .lt-footer-newsletter__input,
    .lt-footer-newsletter .lt-footer-newsletter__input-group .lt-footer-newsletter__button {
        width: 100%;
    }
}

/* Webshop breadcrumb contrast fix (a11y audit 2026-04-30) */
.breadcrumb span[itemprop="name"],
.breadcrumb a[itemprop="item"] {
  color: var(--lt-near-black);
}

/* ── Layout fit hardening (GL fit pass 2026-05-01) ────────────────
   Frappe's default page container is intentionally neutralized above so LT
   pages can own full-bleed sections. Webshop breadcrumbs and generated product
   controls do not own that spacing, so they need explicit fit rules here. */

.page-content-wrapper .breadcrumb,
.page_content .breadcrumb,
.web-page-content .breadcrumb {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 1rem auto 1.25rem;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .page-content-wrapper .breadcrumb,
  .page_content .breadcrumb,
  .web-page-content .breadcrumb {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.product-container,
.product-container .row,
.product-container [class*="col-"],
.lt-product__details,
.lt-product__configure,
.lt-product__cart,
.lt-product__actions,
.lt-product__brand-description,
.lt-product__details-section {
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 575px) {
  .product-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .product-container .row {
    margin-left: 0;
    margin-right: 0;
  }

  .product-container [class*="col-"],
  .lt-product__details {
    padding-left: 0;
    padding-right: 0;
  }

  .lt-product__title {
    font-size: 1.75rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .lt-product__brand-description {
    font-size: 1rem;
    line-height: 1.6;
  }

  .lt-product__details-body {
    font-size: 0.95rem;
  }
}

.lt-product__configure .lt-product__cart {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.lt-product__configure .lt-product__price {
  margin-bottom: 0.875rem;
}

.lt-product__configure .lt-product__price-current {
  display: block;
  max-width: 100%;
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lt-soft-gray);
  overflow-wrap: anywhere;
}

.lt-product__actions {
  width: 100%;
}

.lt-product__cta {
  max-width: 100%;
  text-align: center;
  white-space: normal;
}

@media (max-width: 575px) {
  .lt-product__cta {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.lt-product__chips {
  max-width: 100%;
}

.lt-product__chip-label {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.lt-shop__main > .lt-shop__pagination {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  gap: 0.75rem;
}

#lt-pagination.lt-shop__pagination {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
}

#lt-pagination .btn-prev,
#lt-pagination .btn-next {
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

#lt-pagination .lt-shop__page-btn[disabled] {
  display: none !important;
}

.product-paging-area {
  display: none !important;
  margin: 0 !important;
}

@supports selector(:has(*)) {
  .lt-shop__pagination:has(.btn-prev[disabled]):has(.btn-next[disabled]) {
    display: none;
  }
}

/* ============================================================
   2026-05-03 Civic Celebration site-wide overhaul

   Goal: Civic Celebration structure and colors, with the more premium
   Locally Twisted typography/icon polish. This section intentionally
   overrides earlier launch-slice styling while keeping the existing
   Frappe/Webshop route behavior intact.
   ============================================================ */

:root {
  --lt-ink: #0A0A0B;
  --lt-near-black: #0A0A0B;
  --lt-navy: #0E2240;
  --lt-slate: #0E2240;
  --lt-teal: #0E2240;
  --lt-berry: #B31B34;
  --lt-crimson: #B31B34;
  --lt-warm-white: #FAF7F2;
  --lt-near-white: #FAF7F2;
  --lt-sandstone: #D9C7B3;
  --lt-stone: #E7E5E1;
  --lt-brass: #B89A5B;
  --lt-soft-gray: #4E5662;
  --lt-font-brand: 'Cinzel', Georgia, serif;
  --lt-font-heading: 'Cormorant Garamond', Georgia, serif;
  --lt-font-body: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body {
  background: var(--lt-warm-white);
}

body,
.web-page-content,
.website-content,
p,
li,
input,
textarea,
select,
button {
  font-family: var(--lt-font-body);
}

h1,
h2,
h3,
.h1,
.h2,
.h3,
.lt-page-title,
.lt-section-title {
  font-family: var(--lt-font-heading);
  font-weight: 700;
  letter-spacing: 0;
}

.btn-primary,
.lt-button,
.lt-primary-action,
.lt-shop__card-add,
.lt-product__cta,
.lt-footer-newsletter__button {
  background: var(--lt-navy);
  border-color: var(--lt-navy);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.lt-button:hover,
.lt-button:focus-visible,
.lt-primary-action:hover,
.lt-primary-action:focus-visible,
.lt-shop__card-add:hover,
.lt-shop__card-add:focus-visible,
.lt-product__cta:hover,
.lt-product__cta:focus-visible,
.lt-footer-newsletter__button:hover,
.lt-footer-newsletter__button:focus-visible {
  background: var(--lt-ink);
  border-color: var(--lt-ink);
  color: #fff;
  outline: 2px solid var(--lt-brass);
  outline-offset: 2px;
}

/* Two-level civic header */
.lt-header {
  background: var(--lt-warm-white);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(10, 10, 11, 0.06);
  position: relative;
  z-index: 100;
}

.lt-header__desktop-shell {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  grid-template-rows: minmax(72px, auto) minmax(60px, auto);
  align-items: stretch;
  min-height: 132px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-bottom: 2px solid var(--lt-navy);
}

.lt-header__logo-rail {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 0.5rem 1rem 0.5rem 0;
  text-decoration: none;
  color: var(--lt-ink);
  text-align: center;
}

.lt-header__logo-rail-img {
  display: block;
  width: auto;
  height: clamp(98px, 8.2vw, 118px);
  max-width: 100%;
  object-fit: contain;
}

.lt-utility-bar {
  grid-column: 2;
  grid-row: 1;
  display: block;
  align-self: stretch;
  background: var(--lt-warm-white);
  border-bottom: 1px solid rgba(14, 34, 64, 0.18);
}

.lt-header__desktop-shell > .lt-utility-bar .lt-utility-bar__inner {
  width: 100%;
  max-width: none;
  min-height: 72px;
  margin: 0;
  padding: 0 0 0 1.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
}

.lt-header__desktop-shell .lt-utility-bar__tagline,
.lt-header__desktop-shell .lt-utility-bar__sign-in,
.lt-header__desktop-shell .lt-utility-bar__cta {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.lt-header__desktop-shell .lt-utility-bar__tagline {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--lt-ink);
  max-width: 27rem;
}

.lt-header__desktop-shell .lt-utility-bar__right {
  gap: 1.25rem;
}

.lt-header__desktop-shell .lt-utility-bar__sign-in {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lt-ink);
}

.lt-header__desktop-shell .lt-utility-bar__cta,
.lt-header__desktop-shell .lt-utility-bar__cta.btn {
  min-height: 44px;
  padding: 0.65rem 1rem;
  border-radius: 0;
  background-color: var(--lt-crimson);
  border-color: var(--lt-crimson);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}

.lt-header__nav {
  grid-column: 2;
  grid-row: 2;
  background: var(--lt-warm-white);
  border-bottom: 0;
  align-self: stretch;
}

.lt-header__nav-row {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.35rem 0 0.35rem 1.25rem;
}

.lt-header__brand {
  display: inline-flex;
  align-items: center;
  color: var(--lt-ink);
  text-decoration: none;
  min-width: 0;
}

.lt-header__brand img,
.lt-header__brand .lt-logo {
  max-height: 42px;
  width: auto;
}

.lt-header__brand-wordmark {
  font-family: var(--lt-font-brand);
  font-size: 1.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.lt-header__brand-wordmark--rail {
  display: block;
  font-size: clamp(1.75rem, 2.1vw, 2.35rem);
  letter-spacing: 0.06em;
}

.lt-header__brand-wordmark--mobile {
  font-size: clamp(1.05rem, 5.5vw, 1.45rem);
  letter-spacing: 0.06em;
}

.lt-header__brand-subline {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--lt-font-body);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--lt-crimson);
}

.lt-header__mobile-nav-link--cta {
  background: var(--lt-crimson);
  color: #fff;
  font-weight: 900;
}

.lt-header__mobile-nav-link--cta:hover,
.lt-header__mobile-nav-link--cta:focus-visible {
  background: var(--lt-navy);
  color: #fff;
}

.lt-icon-mask {
  --lt-icon-url: none;
  display: inline-block;
  width: var(--lt-icon-size, 3rem);
  height: var(--lt-icon-size, 3rem);
  background-color: currentColor;
  -webkit-mask: var(--lt-icon-url) center / contain no-repeat;
  mask: var(--lt-icon-url) center / contain no-repeat;
}

/* Authority-first editorial page system used by approved public service pages. */
.lt-authority-page {
  background: var(--lt-warm-white);
  color: var(--lt-ink);
  font-family: var(--lt-font-body);
}

.lt-authority-page .lt-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.lt-authority-hero {
  background:
    linear-gradient(105deg, rgba(10, 10, 11, 0.92) 0%, rgba(14, 34, 64, 0.86) 52%, rgba(14, 34, 64, 0.34) 100%),
    var(--lt-navy);
  color: var(--lt-warm-white);
  min-height: var(--lt-hero-standard-height);
  height: var(--lt-hero-standard-height);
  max-height: var(--lt-hero-standard-height);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.lt-authority-hero__inner,
.lt-authority-section__inner,
.lt-authority-proof__inner,
.lt-authority-cta__inner {
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
}

.lt-authority-hero__content {
  max-width: 860px;
  padding-block: var(--lt-hero-padding-y);
}

.lt-authority-eyebrow {
  margin: 0 0 0.45rem;
  font-family: var(--lt-font-body);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: #6f511a;
}

.lt-authority-hero .lt-authority-eyebrow,
.lt-authority-section--dark .lt-authority-eyebrow {
  color: var(--lt-brass);
}

.lt-authority-hero h1,
.lt-authority-section h2,
.lt-authority-cta h2 {
  font-family: var(--lt-font-heading);
  font-weight: 700;
  letter-spacing: 0;
}

.lt-authority-hero h1 {
  max-width: 24ch;
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: var(--lt-hero-title-max);
  line-height: 1.02;
}

.lt-authority-hero__lede {
  max-width: 760px;
  margin: 0;
  color: rgba(250, 247, 242, 0.88);
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  line-height: 1.35;
}

.lt-authority-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.lt-authority-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--lt-crimson);
  background: var(--lt-crimson);
  color: #fff;
  font-family: var(--lt-font-body);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .lt-authority-hero__lede {
    display: none;
  }

  .lt-authority-button {
    flex: 1 1 calc(50% - 0.35rem);
    padding-inline: 0.5rem;
  }
}

.lt-authority-button:hover,
.lt-authority-button:focus-visible {
  background: var(--lt-ink);
  border-color: var(--lt-brass);
  color: #fff;
  text-decoration: none;
  outline: 2px solid var(--lt-brass);
  outline-offset: 2px;
}

.lt-authority-button--secondary {
  background: transparent;
  border-color: rgba(250, 247, 242, 0.72);
  color: var(--lt-warm-white);
}

.lt-authority-proof {
  background: var(--lt-ink);
  border-top: 1px solid rgba(184, 154, 91, 0.34);
  border-bottom: 1px solid rgba(184, 154, 91, 0.34);
  color: var(--lt-warm-white);
  padding: 1.5rem 1rem;
}

.lt-authority-proof__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(184, 154, 91, 0.32);
}

.lt-authority-proof__item {
  min-height: 112px;
  padding: 1rem;
  background: var(--lt-ink);
}

.lt-authority-proof__label {
  margin: 0 0 0.35rem;
  color: var(--lt-brass);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.lt-authority-proof__text {
  margin: 0;
  color: rgba(250, 247, 242, 0.82);
  line-height: 1.5;
}

.lt-authority-section {
  padding: clamp(3rem, 6vw, 5rem) 1rem;
}

.lt-authority-section--dark {
  background: var(--lt-navy);
  color: var(--lt-warm-white);
}

.lt-authority-section--dark h2,
.lt-authority-section--dark h3 {
  color: #fff;
}

.lt-authority-section--dark p,
.lt-authority-section--dark li {
  color: rgba(250, 247, 242, 0.82);
}

.lt-authority-section h2 {
  max-width: 760px;
  margin: 0 0 0.9rem;
  color: var(--lt-ink);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
}

.lt-authority-section.lt-authority-section--dark h2,
.lt-authority-section.lt-authority-section--dark h3 {
  color: #fff;
}

.lt-authority-section__lede {
  max-width: 720px;
  margin: 0 0 2rem;
  color: var(--lt-soft-gray);
  font-size: 1.05rem;
  line-height: 1.65;
}

.lt-authority-section--dark .lt-authority-section__lede {
  color: rgba(250, 247, 242, 0.82);
}

.lt-authority-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.lt-authority-card {
  min-width: 0;
  padding: 1.35rem;
  background: #fff;
  border: 1px solid rgba(14, 34, 64, 0.14);
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(10, 10, 11, 0.06);
}

.lt-authority-section--dark .lt-authority-card {
  background: rgba(250, 247, 242, 0.07);
  border-color: rgba(184, 154, 91, 0.28);
  box-shadow: none;
}

.lt-authority-card__icon {
  color: var(--lt-brass);
  --lt-icon-size: 3.2rem;
  margin-bottom: 1rem;
}

.lt-authority-card h3 {
  margin: 0 0 0.55rem;
  font-family: var(--lt-font-heading);
  font-size: 1.55rem;
  line-height: 1.15;
}

.lt-authority-section--dark .lt-authority-card h3 {
  color: #fff;
}

.lt-authority-card p {
  margin: 0;
  color: var(--lt-soft-gray);
  line-height: 1.6;
}

.lt-authority-section--dark .lt-authority-card p {
  color: rgba(250, 247, 242, 0.82);
}

.lt-authority-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.lt-authority-photo {
  display: block;
  min-height: 270px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--lt-stone);
  box-shadow: 0 16px 34px rgba(10, 10, 11, 0.12);
}

.lt-authority-photo img {
  width: 100%;
  height: 100%;
  min-height: 270px;
  object-fit: cover;
  display: block;
}

.lt-authority-steps {
  display: grid;
  gap: 1rem;
  counter-reset: lt-step;
}

.lt-authority-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(14, 34, 64, 0.14);
  border-radius: 4px;
}

.lt-authority-step::before {
  counter-increment: lt-step;
  content: counter(lt-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--lt-navy);
  color: var(--lt-brass);
  font-family: var(--lt-font-body);
  font-size: 0.85rem;
  font-weight: 900;
}

.lt-authority-step h3 {
  margin: 0 0 0.35rem;
  font-family: var(--lt-font-heading);
  font-size: 1.45rem;
  line-height: 1.15;
}

.lt-authority-step p {
  margin: 0;
  line-height: 1.6;
}

.lt-authority-cta {
  padding: clamp(3rem, 6vw, 4.5rem) 1rem;
  background: var(--lt-navy);
  color: var(--lt-warm-white);
  text-align: center;
}

.lt-authority-cta h2 {
  margin: 0 auto 0.8rem;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
}

.lt-authority-cta p {
  max-width: 650px;
  margin: 0 auto;
  color: rgba(250, 247, 242, 0.82);
  line-height: 1.6;
}

.lt-authority-cta .lt-authority-actions {
  justify-content: center;
}

@media (max-width: 575.98px) {
  .lt-authority-step {
    grid-template-columns: 1fr;
  }
}

.lt-header__mobile-brand {
  flex: 0 0 auto;
  max-width: calc(100% - 112px);
  overflow: visible;
}

.lt-header__mobile-actions {
  margin-left: auto;
  margin-right: 0;
}

.lt-header__nav-list {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: clamp(0.75rem, 1.55vw, 1.5rem);
  min-width: 0;
}

.lt-header__nav-link {
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lt-ink);
  min-height: 48px;
  padding: 0.75rem 0.2rem;
  line-height: 1.25;
  white-space: nowrap;
}

.lt-header__nav-link:hover,
.lt-header__nav-link:focus-visible {
  color: var(--lt-crimson);
}

.lt-header__search-btn {
  color: var(--lt-ink);
  min-width: 48px;
  min-height: 48px;
}

.lt-header__util-link--cart {
  min-width: 48px;
  min-height: 48px;
  justify-content: center;
}

.lt-header__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.lt-header__action-link,
.lt-header__action-cart,
.lt-header__action-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  font-family: var(--lt-font-body);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
}

.lt-header__action-link {
  color: var(--lt-ink);
}

.lt-header__action-cart {
  color: var(--lt-ink);
  position: relative;
}

.lt-header__action-cta {
  background: var(--lt-crimson);
  border: 1px solid var(--lt-crimson);
  color: #fff;
  padding: 0.55rem 1rem;
}

.lt-header__action-cta:hover,
.lt-header__action-cta:focus-visible {
  background: var(--lt-navy);
  border-color: var(--lt-navy);
  color: #fff;
}

.lt-header__mobile {
  background: var(--lt-warm-white);
  border-bottom: 2px solid var(--lt-navy);
}

.lt-header__mobile-row {
  min-height: 76px;
}

.lt-header__mobile-brand img,
.lt-header__mobile-brand .lt-logo,
.lt-header__mobile-logo {
  max-height: 52px;
  width: auto;
}

.lt-header__mobile-strip {
  display: none;
}

.lt-header__mobile-nav-collapse {
  background: var(--lt-warm-white);
}

.lt-header__mobile-nav-link,
.lt-header__mobile-nav-sublink {
  font-family: var(--lt-font-body);
  color: var(--lt-ink);
}

.lt-header__mobile-caret {
  transition: transform 0.18s ease;
}

/* Page-scoped CSS from earlier slices may still name old fonts. These
   route-family overrides keep the visible typography unified without
   changing route behavior or form contracts. */
.lt-contact h1,
.lt-contact h2,
.lt-contact h3,
.lt-contact__intro h1,
.lt-contact__form-wrap > h2,
.lt-book h1,
.lt-book h2,
.lt-book h3,
.lt-btfp__intro-title,
.lt-btfp__service-card h2,
.lt-btfp__form-wrap h2,
.lt-btfp__expect-card h3,
.lt-btfp__service-title,
.lt-portfolio h1,
.lt-portfolio h2,
.lt-portfolio h3,
.lt-portfolio-hero__title,
.lt-portfolio-card__title,
.lt-portfolio-empty__heading,
.lt-portfolio-modal__title,
.lt-faq h1,
.lt-faq h2,
.lt-policy h1,
.lt-policy h2,
.lt-accessibility h1,
.lt-accessibility h2,
.lt-thanks__title,
.lt-thanks__order-id,
.lt-cart__title,
.lt-checkout__title,
.lt-checkout__order-heading {
  font-family: var(--lt-font-heading) !important;
  font-weight: 700;
}

.lt-contact,
.lt-contact *,
.lt-book,
.lt-book *,
.lt-btfp,
.lt-btfp *,
.lt-portfolio,
.lt-portfolio *,
.lt-faq,
.lt-faq *,
.lt-policy,
.lt-policy *,
.lt-accessibility,
.lt-accessibility *,
.lt-thanks,
.lt-thanks *,
.lt-cart,
.lt-cart *,
.lt-checkout,
.lt-checkout * {
  font-family: var(--lt-font-body);
}

/* Footer: dark civic authority with brass details. */
.lt-footer {
  background: var(--lt-navy);
  color: var(--lt-warm-white);
}

.lt-footer-newsletter {
  background: var(--lt-warm-white);
  border-top: 1px solid rgba(14, 34, 64, 0.14);
}

.lt-footer-newsletter__heading,
.lt-footer__brand-name {
  font-family: var(--lt-font-heading);
  font-weight: 700;
}

.lt-footer__brand-name {
  color: #fff;
  font-size: 2rem;
}

.lt-footer__col-title {
  color: var(--lt-brass);
}

.lt-footer__bar {
  background: var(--lt-warm-white);
}

/* Shared page surfaces */
.lt-page-hero,
.lt-policy-hero,
.lt-faq-hero,
.lt-contact__hero,
.lt-shop__hero {
  background: linear-gradient(135deg, var(--lt-warm-white) 0%, #fff 62%, rgba(217, 199, 179, 0.34) 100%);
  border-bottom: 1px solid rgba(14, 34, 64, 0.14);
}

.lt-page-eyebrow,
.lt-shop__hero-eyebrow,
.lt-contact__eyebrow,
.lt-btfp__eyebrow,
.lt-portfolio__eyebrow {
  font-family: var(--lt-font-body);
  color: var(--lt-crimson);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Cards and forms should feel like working event documents, not party tiles. */
.card,
.lt-card,
.lt-contact__card,
.lt-book__card,
.lt-location-card,
.lt-policy-card,
.lt-faq-card,
.lt-shop__card,
.cart-container,
.product-container {
  border: 1px solid rgba(14, 34, 64, 0.14);
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(10, 10, 11, 0.06);
}

/* Shop and product visual system */
#products-grid-area .card,
.lt-shop__card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

#products-grid-area .card-img-container,
.lt-shop__card-image {
  background: rgba(217, 199, 179, 0.28);
}

#products-grid-area .product-title,
.lt-shop__card-name,
.lt-product__title {
  font-family: var(--lt-font-heading);
  font-weight: 700;
  color: var(--lt-ink);
}

#products-grid-area .product-price,
.lt-shop__card-price,
.lt-product__price-current {
  color: var(--lt-navy);
  font-family: var(--lt-font-body);
  font-weight: 900;
}

.lt-shop__chip {
  border-radius: 0;
  border-color: rgba(14, 34, 64, 0.28);
  color: var(--lt-ink);
}

.lt-shop__chip[aria-pressed="true"] {
  background: var(--lt-navy);
  border-color: var(--lt-navy);
  color: #fff;
}

.lt-shop__cta,
.lt-cta {
  background: var(--lt-navy);
  color: var(--lt-warm-white);
}

.lt-shop__cta h2,
.lt-cta__heading {
  color: #fff;
}

.lt-shop__cta p,
.lt-cta__body {
  color: rgba(250, 247, 242, 0.82);
}

@media (max-width: 1199px) {
  .lt-header__nav-row {
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) auto;
    gap: 0.8rem;
  }

  .lt-header__action-link {
    display: none;
  }
}

/* Cookie and tracking notice */
.lt-cookie-consent {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1040;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  border: 1px solid rgba(14, 34, 64, 0.18);
  border-radius: 6px;
  box-shadow: 0 20px 48px rgba(10, 10, 11, 0.18);
}

.lt-cookie-consent__copy {
  margin: 0;
  color: var(--lt-ink);
  font-family: var(--lt-font-body);
  font-size: 0.95rem;
  line-height: 1.45;
}

.lt-cookie-consent__link {
  color: var(--lt-berry);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.lt-cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.lt-cookie-consent__button {
  min-height: 42px;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--lt-navy);
  border-radius: 4px;
  font-family: var(--lt-font-body);
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.lt-cookie-consent__button--primary {
  background: var(--lt-navy);
  color: #fff;
}

.lt-cookie-consent__button--secondary {
  background: transparent;
  color: var(--lt-navy);
}

.lt-cookie-consent__button:focus-visible,
.lt-cookie-consent__link:focus-visible {
  outline: 3px solid var(--lt-brass);
  outline-offset: 3px;
}

.lt-cookie-consent--inline {
  position: relative;
  left: 50%;
  right: 50%;
  bottom: auto;
  width: 100vw;
  max-width: none;
  margin: 0 -50vw;
  grid-template-columns: minmax(0, 720px) auto;
  justify-content: center;
  padding: 0.9rem clamp(1rem, 4vw, 2rem);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: 0 12px 24px rgba(10, 10, 11, 0.08);
}

@media (max-width: 640px) {
  .lt-cookie-consent {
    grid-template-columns: 1fr;
  }

  .lt-cookie-consent--inline {
    justify-content: stretch;
  }

  .lt-cookie-consent__actions {
    justify-content: stretch;
  }

  .lt-cookie-consent__button {
    flex: 1 1 140px;
  }
}