/* =========================================================================
   SOULBREW — MENU · "Considered"
   Green hero band → paper body of drink cards, item modal, and filters, all in
   the shared Considered language (considered.css). Overrides the neutral
   component styles (components.css) within the `.lp` scope.
   ========================================================================= */

/* ============================= MENU HERO ============================= */
.menu-hero {
  background:radial-gradient(120% 130% at 50% 0%, #5A4230 0%, var(--green) 45%, var(--green-deep) 100%);
  color:var(--cream);
  /* clear the fixed nav (~80px) + breathing room */
  padding-top:clamp(120px, 16vh, 168px);
  padding-bottom:clamp(40px, 6vw, 64px);
}
.menu-hero__big {
  font-size:clamp(34px, 6.5vw, 72px); text-transform:uppercase; letter-spacing:0.05em;
  line-height:1.0; margin-top:14px; color:var(--cream); font-weight:300;
}
.menu-hero__sub {
  color:var(--cream-dim); font-size:15px; font-weight:300; letter-spacing:0.03em;
  max-width:46ch; margin-top:20px;
}

/* ---- filter pills (over the green band) ---- */
.lp .filter-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(28px, 4vw, 40px); }
.lp .filter-pill {
  padding:11px 22px; border-radius:100px;
  border:1px solid rgba(242,236,211,.34); background:transparent;
  color:var(--cream); opacity:.86;
  font-size:11.5px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.lp .filter-pill:hover { opacity:1; border-color:var(--cream); }
.lp .filter-pill[aria-pressed="true"] {
  background:var(--cream); border-color:var(--cream); color:var(--green-deep); opacity:1;
}

/* ============================= MENU BODY ============================= */
.menu-body { background:var(--paper); color:var(--ink); padding-block:clamp(56px, 9vw, 104px); }

.menu-section { margin-top:clamp(56px, 8vw, 88px); }
.menu-section:first-child { margin-top:0; }
.lp .menu-section__title {
  font-size:clamp(20px, 3vw, 30px); text-transform:uppercase; letter-spacing:0.14em;
  font-weight:400; color:var(--ink);
  padding-bottom:18px; margin-bottom:clamp(28px, 4vw, 44px);
  border-bottom:1px solid rgba(38,34,26,.16);
}

.menu-body .drink-grid { grid-template-columns:repeat(2, 1fr); gap:clamp(20px, 3vw, 40px) clamp(16px, 2.4vw, 32px); }
@media (min-width:700px)  { .menu-body .drink-grid { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1080px) { .menu-body .drink-grid { grid-template-columns:repeat(4, 1fr); } }

.menu-loading { display:flex; justify-content:center; padding:clamp(48px, 8vw, 96px) 0; }

/* ============================= DRINK CARD (Considered) ============================= */
.lp .menu-body button.drink-card,
.lp .drink-card {
  text-align:center; width:100%;
  background:transparent; border:0; border-radius:0; overflow:visible;
  display:flex; flex-direction:column;
  transition:transform var(--dur-fast) var(--ease);
}
.lp .drink-card:hover { transform:none; box-shadow:none; }

.lp .drink-card__media {
  aspect-ratio:3/4; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 12%, color-mix(in srgb, var(--dc, #cbb) 24%, transparent), transparent 68%),
    linear-gradient(180deg, var(--paper-2), #E4DAC4);
}
.lp .drink-card__media img { width:66%; height:auto; transition:transform .6s var(--ease); }
.lp .drink-card:hover .drink-card__media img { transform:translateY(-8px) scale(1.04); }

.lp .drink-card__badge {
  position:absolute; top:12px; left:12px;
  background:rgba(242,236,211,.9); border:0; color:var(--green-deep);
  padding:5px 11px; border-radius:100px;
  font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
}

.lp .drink-card__body { padding:18px 4px 0; gap:0; align-items:center; }
.lp .drink-card__tagline {
  font-family:"Poppins", system-ui, sans-serif; font-style:normal;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--clay);
}
.lp .drink-card__name {
  font-size:16px; letter-spacing:0.08em; text-transform:uppercase; font-weight:400;
  color:var(--ink); margin-top:8px;
}
.lp .drink-card__meta { justify-content:center; gap:6px; margin-top:9px; }
.lp .drink-card__tag {
  background:transparent; color:var(--moss);
  border:1px solid rgba(110,82,54,.4);
  font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500;
  padding:3px 9px; border-radius:100px;
}
.lp .drink-card__foot {
  margin-top:14px; padding-top:0; gap:14px;
  justify-content:center; align-items:center;
}
.lp .drink-card__price { font-weight:400; font-size:14px; letter-spacing:0.1em; color:var(--ink); }
.lp .drink-card .add-btn {
  width:34px; height:34px; border:1px solid rgba(38,34,26,.3); color:var(--ink);
  font-size:18px; font-weight:300;
}
.lp .drink-card .add-btn:hover { background:var(--green); border-color:var(--green); color:var(--cream); }
.lp .drink-card.is-unavailable { opacity:.5; }
.lp .drink-card.is-unavailable .drink-card__media img { filter:grayscale(.6); }

/* ============================= ITEM MODAL (Considered) ============================= */
.lp .item-modal { background:var(--paper); color:var(--ink); }
.lp .item-modal__media {
  background:
    radial-gradient(90% 120% at 50% 20%, color-mix(in srgb, var(--dc, #cbb) 26%, transparent), transparent 70%),
    linear-gradient(180deg, var(--paper-2), #E4DAC4);
}
.lp .item-modal__close { background:rgba(242,236,211,.92); border:0; color:var(--green-deep); }
.lp .item-modal__body h2 {
  font-size:clamp(24px, 4vw, 34px); text-transform:uppercase; letter-spacing:0.06em;
  font-weight:400; color:var(--ink); margin-top:4px;
}
.lp .item-modal__body .drink-card__tagline { text-align:left; }
.lp .item-modal__body p { color:var(--ink-soft) !important; font-weight:300; }
.lp .option-group__label { text-transform:uppercase; letter-spacing:0.12em; font-size:12px; font-weight:500; }
.lp .option-group__label small { text-transform:none; letter-spacing:0; color:var(--ink-soft); }
.lp .option-chip {
  border:1px solid rgba(38,34,26,.28); color:var(--ink);
  border-radius:100px; padding:9px 18px;
  font-size:12px; letter-spacing:0.04em;
}
.lp .option-chip[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:var(--cream); }
.lp .option-chip .delta { color:var(--ink-soft); }
.lp .option-chip[aria-pressed="true"] .delta { color:var(--cream); opacity:.8; }
.lp .item-modal__footer { background:var(--paper); border-top:1px solid rgba(38,34,26,.12); }
.lp .item-modal__footer .qty-stepper { border-color:rgba(38,34,26,.28); }
.lp .item-modal__footer .btn-primary {
  background:var(--green); color:var(--cream);
  border-radius:100px; text-transform:uppercase; letter-spacing:0.14em; font-weight:500; font-size:12px;
}
.lp .item-modal__footer .btn-primary:hover:not(:disabled) { background:var(--green-deep); }
.lp .item-modal__footer .btn-primary:disabled { background:var(--paper-2); color:var(--ink-soft); }
.lp .item-modal__blocked { font-family:"Poppins", system-ui, sans-serif; font-style:normal; color:var(--ink-soft); }

/* ============================= PAUSE BANNER ============================= */
.lp .pause-banner {
  background:var(--paper-2); border:1px solid rgba(38,34,26,.14); border-left:3px solid var(--clay);
  border-radius:8px; color:var(--ink-soft);
  margin-bottom:clamp(28px, 4vw, 44px);
}