/* =========================================================================
   SOULBREW — "Considered" SHARED CHROME
   The immersive, warm-minimalist design system (nkora-referenced): deep matcha
   green + cream, letter-spaced uppercase Poppins, pill buttons, film grain.
   Loaded by every page that opts into the language via `body.lp`. Page-specific
   sections live in each page's own stylesheet (landing.css, menu.css, …).
   ========================================================================= */

body.lp {
  /* Primary brand color. Named --green for historical reasons but now holds
     espresso brown (the matcha-green scheme was retired at the user's request). */
  --green:#3A2A1E;
  --green-deep:#2A1E14;
  --green-dark:#221812;
  --moss:#6E5236;   /* mid mocha — eyebrows, secondary accents, ethos band */
  --cream:#F2ECD3;
  --cream-dim:#CFC8AC;
  --paper:#F4EEE1;
  --paper-2:#EDE6D4;
  --ink:#26221A;
  --ink-soft:#6E6650;
  --clay:#C4894F;

  font-family:"Poppins", system-ui, sans-serif;
  background:var(--green-dark);
  color:var(--cream);
  letter-spacing:0.01em;
}

body.lp h1, body.lp h2, body.lp h3, body.lp h4 {
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:300;
  letter-spacing:0.04em;
}

.lp .wrap { max-width:1200px; margin-inline:auto; padding-inline:clamp(22px, 5vw, 56px); }

/* ---- shared bits ---- */
.lp .u { text-transform:uppercase; letter-spacing:0.16em; }
.lp .ey {
  font-size:12px; letter-spacing:0.26em; text-transform:uppercase; font-weight:500;
  color:var(--moss);
}
.lp .ey--cream { color:var(--cream-dim); }
.lp .section-title {
  font-size:clamp(30px, 5vw, 62px); text-transform:uppercase; letter-spacing:0.06em;
  line-height:1.02; margin-top:14px; color:var(--ink);
}

.lp .pill {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--cream); color:var(--ink);
  border-radius:100px; padding:15px 32px;
  font-size:12.5px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  transition:transform var(--dur-fast, .18s) ease, background .25s ease, color .25s ease;
}
.lp .pill:hover { background:#fff; transform:translateY(-2px); }
.lp .pill--dark { background:var(--green); color:var(--cream); }
.lp .pill--dark:hover { background:var(--green-deep); }
.lp .pill--line { background:transparent; color:var(--cream); border:1px solid rgba(242,236,211,.5); }
.lp .pill--line:hover { background:rgba(242,236,211,.12); }
.lp .pill--lg { padding:18px 42px; font-size:13px; }

/* reveal (fade-up) */
.lp .reveal { opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease, cubic-bezier(.22,1,.36,1)), transform .9s var(--ease, cubic-bezier(.22,1,.36,1)); }
.lp .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .lp .reveal { opacity:1; transform:none; } }

/* film grain */
.lp .grain {
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .lp .grain { display:none; } }

.lp .skip-link { background:var(--cream); color:var(--ink); }

/* ============================= ANNOUNCEMENT ============================= */
.lp .announce { position:relative; z-index:120; background:var(--green-deep); color:var(--cream); font-size:13px; }
.lp .announce__row { display:flex; align-items:center; justify-content:center; gap:12px; padding-block:9px; position:relative; }
.lp .announce__row a { text-decoration:underline; text-underline-offset:2px; font-weight:500; white-space:nowrap; }
.lp .announce__close { position:absolute; right:0; display:inline-flex; color:rgba(242,236,211,.75); }
.lp .announce__close svg { width:15px; height:15px; }

/* ============================= NAV ============================= */
.lp-nav {
  position:fixed; top:0; left:0; right:0; z-index:110;
  background:transparent; border:0;
  transition:background .45s ease, padding .35s ease, backdrop-filter .35s ease;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.lp-nav.is-scrolled {
  background:rgba(42,30,20,0.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
/* Solid variant for pages without a hero behind the nav (menu, outlets, …) */
.lp-nav--solid { background:var(--green-deep); }
.lp-nav--solid.is-scrolled { background:rgba(42,30,20,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.lp-nav__row {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  max-width:1280px; margin-inline:auto;
  padding:20px clamp(22px,5vw,56px);
  color:var(--cream);
}
.lp-nav__left { display:flex; gap:26px; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; }
.lp-nav__left a { color:var(--cream); opacity:.82; transition:opacity .2s ease; }
.lp-nav__left a:hover, .lp-nav__left a[aria-current="page"] { opacity:1; }
.lp-nav__brand { justify-self:center; text-align:center; display:inline-flex; align-items:center; }
.lp-nav__brand img { display:block; height:34px; width:auto; }
.lp-nav__brand span {
  display:inline-block; font-size:19px; letter-spacing:0.3em; text-transform:uppercase; font-weight:400;
  color:var(--cream); padding-top:6px; border-top:1px solid var(--cream);
}
@media (max-width:640px){ .lp-nav__brand img { height:28px; } }
.lp-nav__right { justify-self:end; display:flex; align-items:center; gap:8px; }
.lp-ico {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--cream);
  transition:background .2s ease;
}
.lp-ico:hover { background:rgba(242,236,211,.14); }
.lp-ico svg { width:20px; height:20px; }
.lp-nav .nav-toggle { display:none; }
.lp .cart-count {
  position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 3px;
  border-radius:50%; background:var(--cream); color:var(--green-deep);
  font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center;
  transform:scale(0); transition:transform .18s ease;
}
.lp .cart-count.is-visible { transform:scale(1); }

.lp-menu {
  display:none; padding:8px clamp(22px,5vw,56px) 22px;
  background:rgba(42,30,20,0.96); backdrop-filter:blur(12px);
}
.lp-menu.is-open { display:block; }
.lp-menu a { display:block; padding:12px 0; color:var(--cream); font-size:18px; letter-spacing:0.08em; text-transform:uppercase; font-weight:300; border-bottom:1px solid rgba(242,236,211,.12); }

@media (max-width:760px) {
  .lp-nav__left { display:none; }
  .lp-nav__row { grid-template-columns:auto 1fr auto; }
  .lp-nav__brand { justify-self:start; }
  .lp-nav .nav-toggle { display:inline-flex; }
}

/* ============================= FOOTER ============================= */
.lp-foot { background:var(--green-dark); color:var(--cream); padding-block:clamp(56px, 8vw, 88px) 40px; }
.lp-foot__top { display:flex; flex-direction:column; gap:14px; padding-bottom:44px; border-bottom:1px solid rgba(242,236,211,.14); }
.lp-foot__brand { display:inline-block; font-size:26px; letter-spacing:0.28em; text-transform:uppercase; font-weight:400; color:var(--cream); }
.lp-foot__brand img { display:block; height:64px; width:auto; }
.lp-foot__tag { color:rgba(242,236,211,.66); max-width:40ch; font-size:14px; font-weight:300; }
.lp-foot__cols { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; padding-block:44px; }
@media (max-width:640px) { .lp-foot__cols { grid-template-columns:1fr; gap:28px; } }
.lp-foot__cols h4 { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(242,236,211,.5); font-weight:500; margin-bottom:14px; }
.lp-foot__cols a { display:block; color:rgba(242,236,211,.82); font-size:14px; padding-block:5px; font-weight:300; letter-spacing:0.03em; transition:color .2s ease; }
.lp-foot__cols a:hover { color:var(--cream); }
.lp-foot__bottom { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-top:32px; border-top:1px solid rgba(242,236,211,.14); font-size:12px; letter-spacing:0.06em; color:rgba(242,236,211,.5); text-transform:uppercase; }

/* ============================= CART DRAWER (themed) ============================= */
/* Keeps the shared drawer markup but restyles it into the Considered palette. */
.lp .cart-drawer, .lp .cart-drawer__foot { background:var(--paper); color:var(--ink); }
.lp .cart-drawer__head { border-bottom:1px solid rgba(38,34,26,.12); }
.lp .cart-drawer__head h3 { text-transform:uppercase; letter-spacing:0.16em; font-size:16px; font-weight:400; }
.lp .cart-drawer__foot { border-top:1px solid rgba(38,34,26,.12); }
.lp .cart-line { border-bottom:1px solid rgba(38,34,26,.1); }
.lp .cart-line img { background:var(--paper-2); }
.lp .cart-summary-row { color:var(--ink-soft); }
.lp .cart-summary-row.total { color:var(--ink); border-top:1px solid rgba(38,34,26,.12); }
.lp .nudge-bar { background:var(--paper-2); color:var(--moss); }
.lp .cart-drawer .btn-primary { background:var(--green); color:var(--cream); border-radius:100px; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; font-size:12px; }
.lp .cart-drawer .btn-primary:hover:not(:disabled) { background:var(--green-deep); }
.lp .cart-drawer .qty-stepper { border-color:rgba(38,34,26,.25); }
.lp .cart-empty { color:var(--ink-soft); }
.lp .icon-btn:hover { background:rgba(38,34,26,.08); }