/*
 * Soulbrew UI polish
 *
 * This is the final visual layer for the static site. It keeps the existing
 * page-specific selectors and data hooks intact while providing one coherent
 * set of surfaces, controls, typography and responsive rules for storefront
 * and operations UI.
 */

:root {
  --ui-espresso: var(--sb-cafe-espresso);
  --ui-espresso-deep: var(--sb-cafe-blush-deep);
  --ui-cream: var(--sb-cafe-cream);
  --ui-stone: var(--sb-cafe-latte-100);
  --ui-line: var(--hairline);
  --ui-line-strong: var(--hairline-strong);
  --ui-ink: var(--sb-cafe-espresso);
  --ui-muted: var(--sb-cafe-espresso-soft);
  --ui-faint: #7a736a;
  --ui-peach: var(--sb-cafe-latte-200);
  --ui-peach-soft: var(--sb-cafe-latte-100);
  --ui-sage: var(--sb-status-success);
  --ui-sage-soft: var(--sb-status-success-tint);
  --ui-danger: var(--sb-status-danger);
  --ui-warning: var(--sb-status-warning);
  --ui-success: var(--sb-status-success);
  --ui-radius-sm: 8px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-shadow-card: 0 8px 26px rgba(44, 32, 24, .055);
  --ui-shadow-float: 0 20px 60px rgba(44, 32, 24, .16);
}

/* ============================ Storefront ============================ */

body.lp {
  --paper: var(--ui-cream);
  --paper-2: var(--ui-stone);
  --ink: var(--ui-ink);
  --ink-soft: var(--ui-muted);
  --ink-faint: var(--ui-faint);
  --green: var(--ui-espresso);
  --green-deep: var(--ui-espresso-deep);
  --cream: var(--ui-cream);
  --cream-dim: var(--sb-cafe-latte-100);
  --moss: var(--sb-cafe-blush-deep);
  --clay: var(--sb-cafe-blush-deep);
  background: var(--ui-cream) !important;
  color: var(--ui-ink) !important;
  font-size: 16px;
  line-height: 1.55;
}

body.lp h1,
body.lp h2,
body.lp h3,
body.lp h4,
body.lp p,
body.lp a,
body.lp button,
body.lp input,
body.lp select,
body.lp textarea { letter-spacing: normal; }

body.lp h1,
body.lp h2,
body.lp h3,
body.lp h4 { font-weight: 650 !important; line-height: 1.08 !important; }

body.lp .wrap { max-width: 1280px; padding-inline: clamp(20px, 5vw, 68px); }
body.lp .ey { font-size: 11px; font-weight: 700; letter-spacing: .13em; color: var(--moss); }
body.lp .ey--cream { color: var(--sb-cafe-latte-100); }

/* Navigation is always readable against the espresso chrome. */
body.lp .lp-nav,
body.lp .lp-nav.is-scrolled,
body.lp .lp-nav--solid { background: rgba(44, 32, 24, .97) !important; color: var(--sb-cafe-cream) !important; }
body.lp .lp-nav__row { min-height: 70px; padding-block: 12px; }
body.lp .lp-nav__left { gap: 28px; font-size: 13px; font-weight: 600; }
body.lp .lp-nav__left a { color: var(--sb-cafe-cream) !important; opacity: .72; }
body.lp .lp-nav__left a:hover,
body.lp .lp-nav__left a[aria-current="page"] { opacity: 1; }
body.lp .lp-nav__brand img { width: 136px !important; height: 36px !important; filter: brightness(0) invert(1) !important; }
body.lp .lp-ico { width: 44px; height: 44px; color: var(--sb-cafe-cream) !important; border-radius: 12px; }
body.lp .lp-ico:hover { background: rgba(255, 255, 255, .1); }
body.lp .cart-count { background: var(--ui-peach); color: var(--ui-espresso); }
body.lp .lp-menu { background: var(--ui-espresso-deep) !important; }
body.lp .lp-menu a { min-height: 50px; color: var(--sb-cafe-cream) !important; font-size: 17px; font-weight: 600; }

/* Shared control language. */
body.lp .pill,
body.lp .btn {
  min-height: 48px;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}
body.lp .pill--peach { background: var(--ui-peach) !important; color: var(--ui-espresso) !important; border: 1px solid var(--ui-peach); }
body.lp .pill--peach:hover { background: var(--sb-cafe-latte-300) !important; transform: translateY(-2px); }
body.lp .pill--dark,
body.lp .btn-primary { background: var(--ui-espresso) !important; border: 1px solid var(--ui-espresso) !important; color: #fff !important; box-shadow: 0 7px 16px rgba(44, 32, 24, .14); }
body.lp .pill--dark:hover,
body.lp .btn-primary:hover:not(:disabled) { background: var(--ui-espresso-deep) !important; border-color: var(--ui-espresso-deep) !important; transform: translateY(-1px); }
body.lp .btn-secondary { background: transparent; color: var(--ui-espresso); border: 1px solid var(--ui-line-strong); }
body.lp .btn-secondary:hover:not(:disabled) { background: var(--ui-espresso); color: #fff; border-color: var(--ui-espresso); }
body.lp .btn-ghost { color: var(--ui-muted); border: 1px solid transparent; }
body.lp .btn-ghost:hover:not(:disabled) { color: var(--ui-ink); background: rgba(44, 32, 24, .06); }
body.lp .btn:disabled { opacity: .48; box-shadow: none; }
body.lp .pill:focus-visible,
body.lp .btn:focus-visible,
body.lp .lp-ico:focus-visible,
body.lp .filter-pill:focus-visible,
body.lp .segmented button:focus-visible { outline: 3px solid rgba(233, 164, 134, .75); outline-offset: 3px; }

/* Homepage: a quieter split hero and stronger rhythm between sections. */
body.lp .hero {
  min-height: min(760px, 100svh) !important;
  padding-top: 132px !important;
  padding-bottom: 64px !important;
  background: linear-gradient(112deg, #fff 0%, #fff 55%, var(--sb-cafe-latte-50) 55%, var(--sb-cafe-latte-50) 100%) !important;
}
body.lp .hero__big { max-width: 10ch !important; font-size: clamp(58px, 7vw, 104px) !important; line-height: .92 !important; color: var(--ui-ink) !important; }
body.lp .hero__big em { color: var(--clay) !important; }
body.lp .hero__eyebrow { color: var(--moss) !important; font-size: 12px; font-weight: 700; }
body.lp .hero__eyebrow span { background: var(--ui-peach) !important; }
body.lp .hero__sub { max-width: 46ch; color: var(--ui-muted) !important; font-size: 17px; }
body.lp .hero__proof { border-color: var(--ui-line) !important; color: var(--ui-muted) !important; }
body.lp .hero__proof b { color: var(--ui-ink) !important; }
body.lp .hero__visual { min-height: 500px !important; }
body.lp .hero__drink { width: min(39vw, 530px) !important; filter: drop-shadow(0 28px 26px rgba(44, 32, 24, .15)) !important; }
body.lp .hero__halo { width: min(36vw, 500px) !important; background: var(--sb-cafe-latte-200) !important; box-shadow: none !important; }
body.lp .hero__note { background: rgba(255, 253, 248, .94) !important; border-color: var(--ui-line) !important; color: var(--ui-ink) !important; box-shadow: var(--ui-shadow-card); }
body.lp .hero__note span,
body.lp .hero__note small { color: var(--ui-muted) !important; }

body.lp .order-ribbon { background: var(--ui-espresso) !important; color: var(--sb-cafe-cream) !important; padding-block: 30px; }
body.lp .order-ribbon__intro span { font-size: 17px; }
body.lp .order-ribbon__intro b { color: var(--sb-cafe-latte-100); }
body.lp .order-ribbon__actions a { min-height: 76px; border-color: rgba(248, 242, 233, .24) !important; background: rgba(255, 255, 255, .04) !important; color: var(--sb-cafe-cream) !important; }
body.lp .order-ribbon__actions a:hover { background: rgba(255, 255, 255, .1) !important; }
body.lp .order-ribbon__icon { background: var(--ui-peach) !important; color: var(--ui-espresso) !important; }

body.lp .selection,
body.lp .places { background: var(--ui-cream) !important; }
body.lp .selection { padding-block: clamp(76px, 9vw, 124px); }
body.lp .section-title { font-size: clamp(40px, 5vw, 68px) !important; color: var(--ui-ink) !important; }
body.lp .section-heading > p { max-width: 48ch; color: var(--ui-muted) !important; font-size: 15px; }
body.lp .sel-grid { gap: 22px; }
body.lp .dcard__im { border-radius: var(--ui-radius-md) !important; background: #eee8de !important; }
body.lp .dcard__add { width: 44px; height: 44px; border-radius: 12px !important; background: var(--ui-espresso) !important; color: #fff !important; }
body.lp .dcard__add:hover { background: var(--ui-peach) !important; color: var(--ui-espresso) !important; }
body.lp .dcard__badge { background: #fff !important; color: var(--ui-espresso) !important; }
body.lp .dcard__no { margin-top: 16px; color: var(--moss) !important; font-size: 11px; font-weight: 700; }
body.lp .dcard__nm { color: var(--ui-ink) !important; font-size: 16px; font-weight: 700; }
body.lp .dcard__fe { color: var(--ui-muted) !important; }
body.lp .dcard__pr { color: var(--ui-ink) !important; font-size: 14px; }

body.lp .loyalty { background: var(--sb-cafe-latte-100) !important; }
body.lp .loyalty__art { background: var(--sb-cafe-latte-200) !important; }
body.lp .loyalty__copy { color: var(--ui-ink) !important; }
body.lp .loyalty__copy h2,
body.lp .loyalty__copy li { color: var(--ui-ink) !important; }
body.lp .loyalty__copy > p:not(.ey) { color: var(--ui-muted) !important; }
body.lp .loyalty__points { background: rgba(44, 32, 24, .92) !important; }
body.lp .delivery { background: var(--ui-stone) !important; }
body.lp .delivery__visual { background: var(--ui-espresso) !important; border-radius: var(--ui-radius-lg) !important; }
body.lp .delivery__visual::before { background: var(--ui-peach) !important; }
body.lp .delivery__copy h2 { color: var(--ui-ink) !important; }
body.lp .delivery__copy > p:not(.ey),
body.lp .delivery__buttons > a:not(.pill) { color: var(--ui-muted) !important; }
body.lp .finale { background: var(--ui-espresso) !important; }
body.lp .finale__ticker { background: var(--ui-peach) !important; color: var(--ui-espresso) !important; }

/* Mood finder remains distinctive, but shares the same visual vocabulary. */
body.lp .mood { background: var(--ui-espresso) !important; }
body.lp .mood__panel { border-radius: var(--ui-radius-lg) !important; background: linear-gradient(145deg, #3a2a20, #241a14) !important; box-shadow: var(--ui-shadow-float) !important; }
body.lp .mood__prompt { border-radius: var(--ui-radius-md) !important; }
body.lp .mood__prompt-foot button { background: var(--ui-peach) !important; color: var(--ui-espresso) !important; border-radius: 12px !important; }

/* Inner pages. */
body.lp .menu-hero,
body.lp .outlets-hero,
body.lp .account-hero,
body.lp .checkout-hero { background: var(--ui-espresso) !important; padding-top: clamp(122px, 15vw, 168px); padding-bottom: clamp(52px, 7vw, 84px); }
body.lp .menu-hero__big,
body.lp .outlets-hero__big,
body.lp .account-hero__big,
body.lp .checkout-hero__big { color: var(--sb-cafe-cream) !important; font-size: clamp(44px, 6vw, 76px); }
body.lp .menu-hero__sub,
body.lp .outlets-hero__sub,
body.lp .account-hero__sub,
body.lp .checkout-hero__sub { color: var(--sb-cafe-latte-100) !important; font-size: 16px; }
body.lp .menu-body,
body.lp .outlets-list,
body.lp .account-body,
body.lp .checkout-body { background: var(--ui-stone) !important; }
body.lp .menu-body,
body.lp .outlets-list,
body.lp .account-body,
body.lp .checkout-body { padding-block: clamp(52px, 7vw, 96px); }

/* Product cards, content cards, checkout cards and account surfaces. */
body.lp .drink-card,
body.lp .checkout-card,
body.lp .account-card,
body.lp .auth-card,
body.lp .track-card { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-md) !important; box-shadow: var(--ui-shadow-card); }
body.lp .drink-card:hover { border-color: var(--ui-line-strong) !important; box-shadow: 0 13px 30px rgba(44, 32, 24, .09); }
body.lp .drink-card__media { border-radius: var(--ui-radius-md) !important; }
body.lp .drink-card__name { color: var(--ui-ink) !important; font-size: 16px; }
body.lp .drink-card__tag { background: var(--ui-peach-soft) !important; color: var(--ui-espresso) !important; }
body.lp .drink-card .add-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--ui-espresso); border-color: var(--ui-espresso); color: #fff; }
body.lp .drink-card .add-btn:hover { background: var(--ui-peach); border-color: var(--ui-peach); color: var(--ui-espresso); }
body.lp .filter-row { gap: 10px; }
body.lp .filter-pill { min-height: 44px; padding-inline: 18px; border-radius: 10px; border-color: var(--ui-line-strong); color: var(--ui-muted); font-size: 14px; font-weight: 650; }
body.lp .filter-pill[aria-pressed="true"] { background: var(--ui-espresso); border-color: var(--ui-espresso); color: #fff; }

body.lp .checkout-card,
body.lp .account-body .auth-card { padding: clamp(22px, 3vw, 32px); background: rgba(255, 255, 255, .88) !important; }
body.lp .checkout-card h2 { margin-bottom: 20px; color: var(--ui-ink); font-size: 20px; }
body.lp .checkout-card h2::before { width: 7px; height: 7px; background: var(--ui-peach) !important; box-shadow: 0 0 0 4px rgba(233, 164, 134, .18); }
body.lp .field label { color: var(--ui-muted); font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; }
body.lp .field input,
body.lp .field select,
body.lp .field textarea,
body.lp .promo-row input { min-height: 50px; border: 1px solid var(--ui-line-strong) !important; border-radius: 10px; background: #fff !important; color: var(--ui-ink); font-size: 16px; }
body.lp .field textarea { min-height: 112px; }
body.lp .field input:focus,
body.lp .field select:focus,
body.lp .field textarea:focus,
body.lp .promo-row input:focus { outline: none; border-color: var(--ui-moss, var(--moss)) !important; box-shadow: 0 0 0 4px rgba(110, 82, 54, .11); }
body.lp .field input::placeholder,
body.lp .field textarea::placeholder,
body.lp .promo-row input::placeholder { color: #8c8175; opacity: 1; }
body.lp .outlet-radio { min-height: 76px; border-radius: 12px; border-color: var(--ui-line); background: #fff !important; }
body.lp .outlet-radio:has(input:checked) { border-color: var(--ui-moss, var(--moss)); box-shadow: 0 0 0 4px rgba(110, 82, 54, .1); }
body.lp .segmented { gap: 8px; }
body.lp .segmented button { min-height: 48px; border-radius: 10px; border-color: var(--ui-line-strong); font-size: 14px; font-weight: 700; }
body.lp .segmented button[aria-pressed="true"] { background: var(--ui-espresso); border-color: var(--ui-espresso); color: #fff; }
body.lp .order-summary .checkout-card { background: #ece3d7 !important; }
body.lp .order-summary { box-shadow: 0 12px 32px rgba(44, 32, 24, .08); }
body.lp .cart-drawer { border-left: 1px solid var(--ui-line); box-shadow: -24px 0 70px rgba(44, 32, 24, .18); }
body.lp .cart-drawer__head { padding: 22px 24px; }
body.lp .cart-drawer__head h3 { font-size: 19px; font-weight: 700; letter-spacing: normal; text-transform: none; }
body.lp .cart-drawer__foot { padding: 22px 24px; }
body.lp .cart-drawer .btn-primary { min-height: 50px; letter-spacing: normal; text-transform: none; }
body.lp .qty-stepper { min-height: 36px; border-color: var(--ui-line-strong); }
body.lp .qty-stepper button { min-width: 34px; min-height: 34px; }

body.lp .outlet { border-color: var(--ui-line); }
body.lp .outlet__media { border-radius: var(--ui-radius-md); }
body.lp .outlet__body h2 { color: var(--ui-ink); font-size: clamp(26px, 3.4vw, 40px); }
body.lp .outlet__address { color: var(--ui-muted); font-size: 16px; }
body.lp .hours-table th { color: var(--ui-muted); font-size: 12px; }
body.lp .hours-table td { color: var(--ui-ink); font-size: 14px; }
body.lp .outlet__tel { color: var(--moss); font-size: 13px; }

/* Footer and announcement. */
body.lp .announce { background: var(--ui-espresso-deep) !important; font-size: 14px; }
body.lp .lp-foot { background: var(--ui-espresso-deep) !important; padding-block: clamp(56px, 8vw, 92px) 32px; }
body.lp .lp-foot__brand img { width: 154px; height: auto; filter: brightness(0) invert(1); }
body.lp .lp-foot__tag { font-size: 15px; color: var(--sb-cafe-latte-100); }
body.lp .lp-foot__cols h4 { color: var(--sb-cafe-latte-200); font-size: 12px; }
body.lp .lp-foot__cols a { min-height: 38px; display: flex; align-items: center; color: var(--sb-cafe-cream); font-size: 15px; }
body.lp .lp-foot__bottom { color: var(--sb-text-faint); font-size: 12px; }

@media (max-width: 900px) {
  body.lp .hero { grid-template-columns: 1fr !important; min-height: auto !important; background: linear-gradient(#fff 0 58%, var(--sb-cafe-latte-50) 58% 100%) !important; }
  body.lp .hero__visual { min-height: 390px !important; }
  body.lp .hero__drink { width: min(72vw, 460px) !important; }
  body.lp .hero__halo { width: min(68vw, 430px) !important; }
  body.lp .loyalty,
  body.lp .delivery__grid { grid-template-columns: 1fr !important; }
  body.lp .loyalty__art { min-height: 430px; }
  body.lp .delivery__visual { min-height: 430px; }
  body.lp .checkout-grid { gap: 18px; }
}

@media (max-width: 640px) {
  body.lp .lp-nav__row { min-height: 62px; padding-block: 9px; }
  body.lp .lp-nav__brand img { width: 118px !important; height: 31px !important; }
  body.lp .lp .lp-ico { width: 42px; height: 42px; min-width: 42px; }
  body.lp .hero { padding: 112px 20px 30px !important; }
  body.lp .hero__big { font-size: clamp(49px, 14vw, 70px) !important; }
  body.lp .hero__sub { font-size: 16px; }
  body.lp .hero__visual { min-height: 340px !important; }
  body.lp .order-ribbon { padding: 24px 20px; }
  body.lp .order-ribbon__actions { grid-template-columns: 1fr; }
  body.lp .selection { padding-block: 64px 76px; }
  body.lp .section-heading { display: block; margin-bottom: 32px; }
  body.lp .section-heading > p { margin-top: 14px; }
  body.lp .sel-grid { gap: 30px 14px; }
  body.lp .dcard__nm { font-size: 14px; }
  body.lp .menu-hero,
  body.lp .outlets-hero,
  body.lp .account-hero,
  body.lp .checkout-hero { padding-top: 112px; }
  body.lp .menu-hero__big,
  body.lp .outlets-hero__big,
  body.lp .account-hero__big,
  body.lp .checkout-hero__big { font-size: 46px; }
  body.lp .checkout-card,
  body.lp .account-body .auth-card { padding: 20px 17px; }
  body.lp .account-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  body.lp .account-dashboard-card--points { grid-column: 1 / -1; }
  body.lp .track-layout { grid-template-columns: 1fr; }
  body.lp .lp-foot__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 390px) {
  body.lp .lp-foot__cols { grid-template-columns: 1fr; }
  body.lp .hero__proof { gap: 14px; }
  body.lp .filter-pill { padding-inline: 15px; }
}

/* ============================ Admin ============================ */

body.admin-body {
  --paper: #fff;
  --paper-raised: #fff;
  --paper-sunken: #e9eeea;
  --ink: #1f2a25;
  --ink-soft: #56635c;
  --ink-faint: #87928b;
  --hairline: rgba(31, 42, 37, .11);
  --hairline-strong: rgba(31, 42, 37, .2);
  --accent: #6f5138;
  --accent-deep: #4e3627;
  --accent-tint: #f1e7dc;
  --success: var(--ui-success);
  --success-tint: var(--ui-sage-soft);
  --warn: var(--ui-warning);
  --warn-tint: #fff0df;
  --danger: var(--ui-danger);
  --danger-tint: #f8e6e3;
  --side-bg: #2d2119;
  --side-bg-2: #211710;
  --side-ink: #f6efe6;
  --side-ink-soft: rgba(246, 239, 230, .7);
  --side-ink-faint: rgba(246, 239, 230, .4);
  --side-active: rgba(255, 255, 255, .105);
  --side-accent: var(--ui-peach);
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-size: 16px;
}

body.admin-body h1,
body.admin-body h2,
body.admin-body h3,
body.admin-body h4 { font-weight: 700 !important; line-height: 1.15 !important; }
body.admin-body .admin-app { grid-template-columns: 256px 1fr; }
body.admin-body .admin-side { background: linear-gradient(160deg, var(--side-bg), var(--side-bg-2)); border-right: 1px solid rgba(255, 255, 255, .08); }
body.admin-body .admin-side__brand { height: 72px; padding-inline: 22px; }
body.admin-body .admin-side__brand img { height: 25px; }
body.admin-body .admin-side__tag { color: var(--side-accent); border-color: rgba(233, 164, 134, .35); }
body.admin-body .admin-nav { padding: 20px 14px 24px; }
body.admin-body .admin-nav__group { margin-bottom: 18px; }
body.admin-body .admin-nav__label { padding-inline: 12px; margin-bottom: 6px; color: var(--side-ink-faint); font-size: 11px; letter-spacing: .08em; }
body.admin-body .admin-nav__item { min-height: 44px; padding: 10px 12px; border-radius: 10px; color: var(--side-ink-soft); font-size: 14px; font-weight: 650; }
body.admin-body .admin-nav__item:hover { background: rgba(255, 255, 255, .07); color: var(--side-ink); }
body.admin-body .admin-nav__item.is-active { background: var(--side-active); color: #fff; box-shadow: inset 3px 0 0 var(--side-accent); }
body.admin-body .admin-nav__item.is-active::before { display: none; }
body.admin-body .admin-nav__item.is-active svg { color: var(--side-accent); }
body.admin-body .admin-nav__group + .admin-nav__group { padding-top: 16px; border-top-color: rgba(255, 255, 255, .09); }
body.admin-body .admin-side__foot { padding: 14px 16px; }
body.admin-body .admin-side__avatar { background: rgba(233, 164, 134, .18); color: var(--ui-peach); }
body.admin-body .admin-side__email { font-size: 13px; }

body.admin-body .admin-main { background: radial-gradient(circle at 100% 0, rgba(128, 155, 136, .1), transparent 30rem), var(--paper); }
body.admin-body .admin-topbar { min-height: 72px; padding-inline: clamp(18px, 3vw, 38px); background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--hairline); box-shadow: 0 5px 22px rgba(31, 42, 37, .035); }
body.admin-body .admin-topbar__title h1 { font-size: 20px; }
body.admin-body .admin-topbar__eyebrow { color: var(--ui-espresso) !important; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body.admin-body .admin-topbar__title p { color: var(--ink-soft); font-size: 13px; }
body.admin-body .admin-topbar__date { font-size: 13px; }
body.admin-body .admin-jump { min-height: 40px; border-radius: 10px; background: var(--paper); font-size: 13px; }
body.admin-body .admin-jump kbd { font-size: 10px; }
body.admin-body .admin-topbar__link,
body.admin-body .admin-burger { min-width: 42px; min-height: 42px; border-radius: 10px; }
body.admin-body .store-toggle { min-height: 40px; border-radius: 10px; font-size: 13px; }
body.admin-body .admin-content { max-width: 1440px; padding: 34px clamp(18px, 3vw, 42px) 96px; }
body.admin-body .admin-content > * { animation: admin-enter .24s ease both; }
body.admin-body .admin-content .admin-lead { max-width: 72ch; color: var(--ink-soft); font-size: 15px; }

body.admin-body .admin-card,
body.admin-body .stat-tile,
body.admin-body .product-row,
body.admin-body .avail-row,
body.admin-body .og-card,
body.admin-body .cms-card,
body.admin-body .store-status,
body.admin-body .editor-card,
body.admin-body .editor-foot { border: 1px solid var(--hairline) !important; border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-card); }
body.admin-body .admin-card { padding: 24px; background: var(--paper-raised); }
body.admin-body .admin-card h3,
body.admin-body .admin-section__head h3 { color: var(--ink); font-size: 17px; }
body.admin-body .admin-card__head,
body.admin-body .admin-section__head { gap: 18px; }
body.admin-body .field-hint,
body.admin-body .admin-muted { color: var(--ink-soft); font-size: 13px; }

body.admin-body .kpi { min-height: 142px; padding: 22px; border: 1px solid var(--hairline); border-radius: var(--ui-radius-md); background: var(--paper-raised); box-shadow: var(--ui-shadow-card); }
body.admin-body .kpi:hover { border-color: rgba(111, 81, 56, .35); box-shadow: 0 12px 28px rgba(31, 42, 37, .08); transform: translateY(-2px); }
body.admin-body .kpi__label { color: var(--ink-soft); font-size: 12px; letter-spacing: .06em; }
body.admin-body .kpi__value { color: var(--ink); font-size: 2.25rem; font-weight: 750; }
body.admin-body .kpi__sub { color: var(--ink-soft); font-size: 13px; }
body.admin-body .quick-action { min-height: 44px; border-radius: 10px; font-size: 14px; }
body.admin-body .quick-action:hover { border-color: var(--accent); background: var(--accent-tint); }
body.admin-body .queue-row { min-height: 62px; border-radius: 10px; background: var(--paper-raised); }
body.admin-body .queue-row:hover { background: var(--accent-tint); }

body.admin-body .admin-tablewrap { border: 1px solid var(--hairline); border-radius: var(--ui-radius-md); background: var(--paper-raised); box-shadow: var(--ui-shadow-card); }
body.admin-body .admin-table { font-size: 14px; }
body.admin-body .admin-table th { padding: 14px 16px; background: var(--paper-sunken); color: var(--ink-soft); font-size: 11px; letter-spacing: .07em; }
body.admin-body .admin-table td { padding: 15px 16px; color: var(--ink); }
body.admin-body .admin-table--rows tbody tr:hover { background: var(--sb-cafe-latte-50); box-shadow: inset 3px 0 0 var(--sb-cafe-latte-200); }
body.admin-body .admin-table select,
body.admin-body .admin-table input[type="number"] { min-height: 40px; border-radius: 9px; }
body.admin-body .filter-pills { gap: 8px; }
body.admin-body .filter-pill { min-height: 38px; padding: 8px 14px; border-radius: 9px; font-size: 13px; }
body.admin-body .filter-pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
body.admin-body .status-pill { min-height: 28px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 750; }

body.admin-body .btn { min-height: 42px; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 700; }
body.admin-body .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff; }
body.admin-body .btn-primary:hover:not(:disabled) { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; }
body.admin-body .btn-secondary { border-color: var(--hairline-strong); color: var(--accent-deep); }
body.admin-body .btn-secondary:hover:not(:disabled) { background: var(--accent-tint); border-color: var(--accent); }
body.admin-body .btn-ghost:hover:not(:disabled) { background: var(--paper-sunken); }
body.admin-body .icon-btn { min-width: 40px; min-height: 40px; border-radius: 10px; }
body.admin-body .icon-btn:hover { background: var(--paper-sunken); }

body.admin-body .field { gap: 7px; }
body.admin-body .field label,
body.admin-body .editor-drawer .field label,
body.admin-body .promo-form label { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
body.admin-body .field input,
body.admin-body .field select,
body.admin-body .field textarea,
body.admin-body .promo-form input,
body.admin-body .promo-form select,
body.admin-body .admin-inline-search,
body.admin-body .admin-search input,
body.admin-body .editor-drawer input,
body.admin-body .editor-drawer select,
body.admin-body .editor-drawer textarea { min-height: 44px; border-radius: 9px; border: 1px solid var(--hairline-strong); background: #fff; color: var(--ink); font-size: 15px; }
body.admin-body .field textarea,
body.admin-body .editor-drawer textarea { min-height: 104px; }
body.admin-body .field input:focus,
body.admin-body .field select:focus,
body.admin-body .field textarea:focus,
body.admin-body .promo-form input:focus,
body.admin-body .promo-form select:focus,
body.admin-body .admin-inline-search:focus,
body.admin-body .editor-drawer input:focus,
body.admin-body .editor-drawer select:focus,
body.admin-body .editor-drawer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(111, 81, 56, .12); }
body.admin-body input::placeholder,
body.admin-body textarea::placeholder { color: var(--ink-faint); opacity: 1; }

body.admin-body .editor-overlay,
body.admin-body .admin-command { background: rgba(25, 19, 14, .56); backdrop-filter: blur(6px); }
body.admin-body .editor-drawer { width: min(620px, 100%); box-shadow: -24px 0 70px rgba(25, 19, 14, .22); }
body.admin-body .editor-head { min-height: 72px; padding: 16px 24px; background: rgba(255, 255, 255, .94); border-bottom-color: var(--hairline); }
body.admin-body .editor-head h2 { font-size: 20px; }
body.admin-body .editor-body { padding: 24px; }
body.admin-body .editor-card { padding: 20px; background: var(--paper-raised); }
body.admin-body .editor-foot { padding: 16px 24px; background: var(--paper-raised); }
body.admin-body .cms-card { background: var(--paper-raised); }
body.admin-body .cms-card__head { min-height: 72px; padding: 16px 20px; }
body.admin-body .cms-card__icon { border-radius: 10px; background: var(--accent-tint); color: var(--accent); }
body.admin-body .cms-card__title strong { font-size: 16px; }
body.admin-body .cms-card__title small { color: var(--ink-soft); font-size: 13px; }
body.admin-body .cms-card__body { padding: 20px; }

body.admin-body .kds-board { gap: 18px; }
body.admin-body .kds-lane { border-radius: var(--ui-radius-md); background: var(--paper-sunken); }
body.admin-body .kds-ticket { border-radius: 10px; padding: 16px; box-shadow: 0 4px 14px rgba(31, 42, 37, .07); }
body.admin-body .kds-ticket__no { font-size: 18px; }
body.admin-body .kds-ticket__items li { font-size: 15px; }
body.admin-body .kds-bump,
body.admin-body .kds-recall { min-height: 40px; border-radius: 9px; }

body.admin-body .admin-auth__sub { font-size: 14px; line-height: 1.6; }
body.admin-body [data-admin-root] > .auth-card { width: min(440px, calc(100vw - 32px)); margin-inline: auto; padding: 32px; border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-float); }
body.admin-body [data-admin-root] > .auth-card .btn { min-height: 50px; }

@media (max-width: 900px) {
  body.admin-body .admin-app { grid-template-columns: 1fr; }
  body.admin-body .admin-side { width: min(300px, 88vw); box-shadow: 20px 0 60px rgba(25, 19, 14, .18); }
  body.admin-body .admin-topbar { min-height: 68px; }
  body.admin-body .admin-topbar__date { display: none; }
  body.admin-body .admin-content { padding-inline: 18px; }
  body.admin-body .admin-grid-2,
  body.admin-body .loyalty-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body.admin-body .admin-topbar { padding-inline: 12px; }
  body.admin-body .admin-topbar__eyebrow,
  body.admin-body .admin-topbar__title p { display: none; }
  body.admin-body .admin-topbar__title h1 { font-size: 18px; }
  body.admin-body .admin-topbar__actions { gap: 5px; }
  body.admin-body .admin-jump { padding-inline: 10px; }
  body.admin-body .admin-jump span { display: none; }
  body.admin-body .store-toggle { max-width: 44px; overflow: hidden; white-space: nowrap; padding-inline: 10px; }
  body.admin-body .admin-content { padding: 22px 12px 72px; }
  body.admin-body .admin-card { padding: 18px; }
  body.admin-body .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.admin-body .kpi { min-height: 124px; padding: 16px; }
  body.admin-body .kpi__value { font-size: 1.8rem; }
  body.admin-body .kpi__sub { font-size: 12px; }
  body.admin-body .dash-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  body.admin-body .quick-action { justify-content: flex-start; padding-inline: 12px; }
  body.admin-body .admin-tablewrap { margin-inline: -2px; }
  body.admin-body .editor-body { padding: 18px; }
  body.admin-body .editor-head { padding-inline: 18px; }
  body.admin-body .editor-foot { padding-inline: 18px; }
  body.admin-body .email-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body.lp *, body.lp *::before, body.lp *::after,
  body.admin-body *, body.admin-body *::before, body.admin-body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================ Palette + control refinement ============================
   This final layer is intentionally small and semantic. Older page styles are
   still useful for layout, but all interactive elements should now resolve to
   the same Soulbrew palette and state language. */

:root {
  --ui-peach-strong: var(--sb-cafe-blush-deep);
  --ui-sage-ink: var(--sb-status-success);
  --ui-focus-ring: rgba(66, 58, 50, .28);
  --ui-disabled: #aaa197;
}

body.lp,
body.admin-body {
  --accent: var(--ui-espresso);
  --accent-deep: var(--ui-espresso-deep);
  --accent-tint: var(--ui-peach-soft);
  --focus: var(--ui-peach-strong);
  --success: var(--ui-sage-ink);
  --success-tint: var(--ui-sage-soft);
  --hairline: var(--ui-line);
  --hairline-strong: var(--ui-line-strong);
}

/* Shared type and focus behavior. */
body.lp,
body.admin-body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.lp :focus-visible,
body.admin-body :focus-visible {
  outline: 3px solid var(--ui-focus-ring) !important;
  outline-offset: 3px;
}

/* Storefront control family. */
body.lp .pill,
body.lp .btn,
body.lp .filter-pill,
body.lp .segmented button,
body.lp .lp-ico,
body.lp .icon-btn,
body.lp .add-btn,
body.lp .dcard__add,
body.lp .qty-stepper button,
body.lp .order-context-choice,
body.lp .order-context-outlet {
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

body.lp .pill--peach,
body.lp .mood__prompt-foot button {
  background: var(--ui-peach) !important;
  border-color: var(--ui-peach) !important;
  color: var(--ui-espresso) !important;
  box-shadow: 0 8px 18px rgba(44, 32, 24, .11);
}
body.lp .pill--peach:hover,
body.lp .mood__prompt-foot button:hover { background: var(--sb-cafe-latte-300) !important; border-color: var(--sb-cafe-latte-300) !important; }
body.lp .pill--dark,
body.lp .btn-primary,
body.lp .filter-pill[aria-pressed="true"],
body.lp .segmented button[aria-pressed="true"] {
  background: var(--ui-espresso) !important;
  border-color: var(--ui-espresso) !important;
  color: #fff !important;
}
body.lp .pill--dark:hover,
body.lp .btn-primary:hover:not(:disabled),
body.lp .filter-pill[aria-pressed="true"]:hover,
body.lp .segmented button[aria-pressed="true"]:hover { background: var(--ui-espresso-deep) !important; border-color: var(--ui-espresso-deep) !important; }
body.lp .btn-secondary,
body.lp .filter-pill,
body.lp .segmented button {
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-espresso) !important;
  background: transparent;
}
body.lp .btn-secondary:hover:not(:disabled),
body.lp .filter-pill:hover,
body.lp .segmented button:hover:not([aria-pressed="true"]) {
  border-color: var(--ui-peach-strong) !important;
  background: var(--ui-peach-soft) !important;
  color: var(--ui-espresso) !important;
}
body.lp .btn-ghost { color: var(--ui-muted) !important; }
body.lp .btn-ghost:hover:not(:disabled) { background: var(--ui-peach-soft) !important; color: var(--ui-espresso) !important; }
body.lp .btn:disabled,
body.lp .pill:disabled { color: var(--ui-disabled) !important; background: var(--ui-stone) !important; border-color: var(--ui-line) !important; }

/* Icon buttons get a consistent hit area, border and quiet hover state. */
body.lp .lp-ico,
body.lp .icon-btn {
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
}
body.lp .lp-ico:hover,
body.lp .icon-btn:hover { border-color: rgba(233, 164, 134, .42); background: rgba(233, 164, 134, .16) !important; color: var(--ui-espresso) !important; }
body.lp .lp-ico svg,
body.lp .icon-btn svg { width: 19px; height: 19px; }
body.lp .cart-count { background: var(--ui-peach) !important; color: var(--ui-espresso) !important; }
body.lp .order-ribbon__icon svg { width: 20px; height: 20px; }
body.lp .order-ribbon__actions a > i { color: var(--ui-peach); font-size: 20px; line-height: 1; }
body.lp .checkout-inline-actions .btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
body.lp .add-btn,
body.lp .dcard__add { border: 1px solid var(--ui-espresso) !important; background: var(--ui-espresso) !important; color: #fff !important; }
body.lp .add-btn:hover,
body.lp .dcard__add:hover { border-color: var(--ui-peach) !important; background: var(--ui-peach) !important; color: var(--ui-espresso) !important; }
body.lp .qty-stepper { border-color: var(--ui-line-strong) !important; background: var(--ui-paper, #fff) !important; }
body.lp .qty-stepper button:hover { background: var(--ui-peach-soft) !important; color: var(--ui-espresso) !important; }

/* Inputs and selectable choices use the same readable contrast as buttons. */
body.lp .field input,
body.lp .field select,
body.lp .field textarea,
body.lp .promo-row input {
  border-color: var(--ui-line-strong) !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
}
body.lp .field input:focus,
body.lp .field select:focus,
body.lp .field textarea:focus,
body.lp .promo-row input:focus {
  border-color: var(--ui-peach-strong) !important;
  box-shadow: 0 0 0 4px var(--ui-focus-ring) !important;
}
body.lp .outlet-radio:has(input:checked),
body.lp .order-context-outlet:has(input:checked),
body.lp .order-context-choice[aria-pressed="true"] {
  border-color: var(--ui-peach-strong) !important;
  box-shadow: 0 0 0 4px rgba(201, 120, 93, .14) !important;
}
body.lp .outlet-radio input,
body.lp .order-context-outlet input { accent-color: var(--ui-peach-strong); }

/* Mood finder: keep the dark canvas, but bring all accents back to the palette. */
body.lp .mood { background: var(--ui-espresso-deep) !important; }
body.lp .mood__panel { background: linear-gradient(145deg, #3a2a20, var(--ui-espresso-deep)) !important; border-color: rgba(233, 164, 134, .22) !important; }
body.lp .mood__ai i,
body.lp .mood__match i { background: var(--ui-peach) !important; }
body.lp .mood__orb { border-color: rgba(233, 164, 134, .34); box-shadow: 0 0 0 24px rgba(233, 164, 134, .05), 0 0 0 48px rgba(233, 164, 134, .025); }
body.lp .mood__choices button:hover,
body.lp .mood__choices button[aria-pressed="true"] { border-color: var(--ui-peach) !important; background: var(--ui-peach) !important; color: var(--ui-espresso) !important; }
body.lp .mood__sparks button:hover { border-color: var(--ui-peach) !important; color: var(--ui-peach) !important; }
body.lp .mood__prompt:focus-within { border-color: var(--ui-peach) !important; }

/* Admin uses the same palette; semantic hues are reserved for status states. */
body.admin-body {
  --paper: #fff;
  --paper-raised: var(--sb-cafe-cream);
  --paper-sunken: var(--sb-cafe-latte-100);
  --ink: var(--ui-ink);
  --ink-soft: var(--ui-muted);
  --ink-faint: var(--ui-faint);
  --side-bg: var(--ui-espresso);
  --side-bg-2: var(--ui-espresso-deep);
  --side-ink: var(--sb-cafe-cream);
  --side-ink-soft: rgba(255, 247, 237, .74);
  --side-ink-faint: rgba(255, 247, 237, .48);
  --side-active: color-mix(in srgb, var(--sb-cafe-cream) 16%, transparent);
  --side-accent: var(--sb-cafe-latte-200);
}
body.admin-body .admin-side { background: linear-gradient(160deg, var(--ui-espresso), var(--ui-espresso-deep)) !important; }
body.admin-body .admin-nav__item { color: var(--side-ink-soft); }
body.admin-body .admin-nav__item svg,
body.admin-body .admin-nav__item:nth-child(n) svg { color: currentColor !important; }
body.admin-body .admin-nav__item:hover { background: rgba(233, 164, 134, .10) !important; color: var(--side-ink) !important; }
body.admin-body .admin-nav__item.is-active { background: var(--side-active) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--ui-peach) !important; }
body.admin-body .admin-nav__item.is-active svg { color: var(--ui-peach) !important; }
body.admin-body .admin-nav__group + .admin-nav__group { border-top-color: rgba(255, 255, 255, .12); }
body.admin-body .admin-topbar,
body.admin-body .admin-topbar__link,
body.admin-body .admin-jump,
body.admin-body .store-toggle { border-color: var(--ui-line-strong) !important; }
body.admin-body .admin-topbar__link:hover,
body.admin-body .admin-jump:hover,
body.admin-body .store-toggle:hover { border-color: var(--ui-peach-strong) !important; background: var(--ui-peach-soft) !important; color: var(--ui-espresso) !important; }
body.admin-body .btn-primary,
body.admin-body [data-admin-root] .btn-primary { background: var(--ui-espresso) !important; border-color: var(--ui-espresso) !important; color: #fff !important; }
body.admin-body .btn-primary:hover:not(:disabled),
body.admin-body [data-admin-root] .btn-primary:hover:not(:disabled) { background: var(--ui-espresso-deep) !important; border-color: var(--ui-espresso-deep) !important; }
body.admin-body .pos-charge,
body.admin-body .pos-charge:disabled { background: var(--ui-espresso) !important; border-color: var(--ui-espresso) !important; color: #fff !important; }
body.admin-body .filter-pill.is-active { background: var(--ui-espresso) !important; border-color: var(--ui-espresso) !important; color: #fff !important; }
body.admin-body .filter-pill:hover,
body.admin-body .quick-action:hover,
body.admin-body .schedule-day:hover { border-color: var(--ui-peach-strong) !important; background: var(--ui-peach-soft) !important; }
body.admin-body .status-pill.ok,
body.admin-body .kds-badge--pick { background: var(--ui-sage-soft) !important; color: var(--ui-sage-ink) !important; border-color: color-mix(in srgb, var(--sb-status-success) 20%, transparent) !important; }
body.admin-body .status-pill.warn,
body.admin-body .kds-badge--sched { background: var(--ui-peach-soft) !important; color: #8b4d3c !important; border-color: rgba(201, 120, 93, .2) !important; }
body.admin-body .admin-content .btn-ghost,
body.admin-body .admin-content .icon-btn { background: rgba(255, 255, 255, .8) !important; }
body.admin-body .admin-content .btn-ghost:hover:not(:disabled),
body.admin-body .admin-content .icon-btn:hover { border-color: var(--ui-peach-strong) !important; background: var(--ui-peach-soft) !important; color: var(--ui-espresso) !important; }
body.admin-body .admin-switch span { background: #d9d0c5 !important; }
body.admin-body .admin-switch input:checked + span { background: var(--ui-sage-ink) !important; }
body.admin-body .admin-switch input:focus-visible + span { box-shadow: 0 0 0 4px var(--ui-focus-ring) !important; }
body.admin-body .field input,
body.admin-body .field select,
body.admin-body .field textarea,
body.admin-body .admin-search input,
body.admin-body .admin-inline-search,
body.admin-body .editor-drawer input,
body.admin-body .editor-drawer select,
body.admin-body .editor-drawer textarea { border-color: var(--ui-line-strong) !important; background: #fff !important; color: var(--ui-ink) !important; }
body.admin-body .field input:focus,
body.admin-body .field select:focus,
body.admin-body .field textarea:focus,
body.admin-body .admin-search input:focus,
body.admin-body .admin-inline-search:focus,
body.admin-body .editor-drawer input:focus,
body.admin-body .editor-drawer select:focus,
body.admin-body .editor-drawer textarea:focus { border-color: var(--ui-peach-strong) !important; box-shadow: 0 0 0 4px var(--ui-focus-ring) !important; }

@media (max-width: 640px) {
  body.lp .pill, body.lp .btn { min-height: 46px; }
  body.lp .filter-pill, body.lp .segmented button { min-height: 44px; }
  body.admin-body .admin-content .btn,
  body.admin-body .admin-content .icon-btn { min-height: 42px; }
}

/* ============================ Requested UI corrections ============================
   Keep the established Soulbrew palette, but give the most-used surfaces a
   clearer silhouette and make every control settle on the same baseline. */

/* The hero artwork should sit in the visual centre of its panel, rather than
   floating toward the top of the split layout. */
body.lp .hero__visual { transform: translateY(26px); }
body.lp .hero__drink { transform: translateY(34px) !important; }

/* Outlet detail: turn the loose split layout into a proper destination card. */
body.lp .outlets-list [data-outlet-list] { display: grid; gap: 28px; }
body.lp .outlet {
  grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(44, 32, 24, .12) !important;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(44, 32, 24, .07);
}
body.lp .outlet:first-child { border-top: 1px solid rgba(44, 32, 24, .12); }
body.lp .outlet__media {
  min-height: 455px;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background:
    radial-gradient(95% 80% at 50% 28%, rgba(255, 255, 255, .38), transparent 62%),
    linear-gradient(155deg, #ead8ca 0%, #efe7d9 52%, #e5dcc8 100%);
}
body.lp .outlet__media img:not(.outlet__photo) { width: 48%; max-width: 250px; }
body.lp .outlet__body { padding: clamp(32px, 4vw, 60px); }
body.lp .outlet__idx { font-size: 11px; letter-spacing: .16em; }
body.lp .outlet__body h2 { margin-top: 14px; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -.03em; text-transform: none; }
body.lp .outlet__address { max-width: 42ch; line-height: 1.65; }
body.lp .hours-table { margin-top: 28px; }
body.lp .hours-table th,
body.lp .hours-table td { padding-block: 8px; font-size: 14px; }
body.lp .outlet__actions { margin-top: 32px; }

/* Menu cards: the card owns the padding, so the add action never hugs the
   viewport/card edge. */
body.lp .menu-body .drink-card {
  padding: 12px 12px 18px;
  border: 1px solid rgba(44, 32, 24, .12) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(44, 32, 24, .055);
}
body.lp .menu-body .drink-card:hover {
  border-color: rgba(44, 32, 24, .22) !important;
  box-shadow: 0 16px 32px rgba(44, 32, 24, .09);
  transform: translateY(-3px);
}
body.lp .menu-body .drink-card__media { border-radius: 16px !important; }
body.lp .menu-body .drink-card__body { padding: 18px 8px 0; }
body.lp .menu-body .drink-card__foot { width: 100%; padding: 16px 4px 0; justify-content: space-between; }
body.lp .menu-body .drink-card .add-btn { width: 44px; height: 44px; flex: 0 0 44px; }

/* Admin controls: explicit dimensions prevent the switch track from inheriting
   the minimum height of a button row. */
body.admin-body .admin-switch {
  width: 46px !important;
  height: 24px !important;
  min-height: 24px !important;
  flex: 0 0 46px;
  vertical-align: middle;
}
body.admin-body .admin-switch span { height: 24px; border-radius: 999px; background: #d7d9d4; }
body.admin-body .admin-switch span::before { width: 18px; height: 18px; left: 3px; top: 3px; box-shadow: 0 2px 5px rgba(31, 42, 37, .18); }
body.admin-body .admin-switch input:checked + span { background: var(--accent); }
body.admin-body .admin-switch input:checked + span::before { transform: translateX(22px); }
body.admin-body .admin-switch--lg { width: 56px !important; height: 30px !important; min-height: 30px !important; flex-basis: 56px; }
body.admin-body .admin-switch--lg span { height: 30px; }
body.admin-body .admin-switch--lg span::before { width: 24px; height: 24px; left: 3px; top: 3px; }
body.admin-body .admin-switch--lg input:checked + span::before { transform: translateX(26px); }

body.admin-body .admin-toolbar,
body.admin-body .admin-toolbar--orders,
body.admin-body .admin-toolbar--customers { align-items: center; }
body.admin-body .filter-pills,
body.admin-body .order-view-pills,
body.admin-body .table-actions { display: flex; align-items: center; gap: 8px; }
body.admin-body .admin-section__head { align-items: center; }
body.admin-body .admin-section__head > .btn,
body.admin-body .admin-card__head > .btn { flex: 0 0 auto; }
body.admin-body .admin-toolbar .admin-search { min-height: 44px; }
body.admin-body .admin-toolbar .filter-pill { min-height: 42px; }
body.admin-body .admin-toolbar > [data-orders-export] { min-height: 42px; padding-inline: 18px; }
body.admin-body .admin-table td:last-child { white-space: nowrap; }
body.admin-body .admin-table td:last-child > .btn,
body.admin-body .admin-table td:last-child > .icon-btn { vertical-align: middle; }
body.admin-body .admin-table td:last-child > .btn + .icon-btn { margin-left: 6px; }
body.admin-body .admin-content .btn-ghost,
body.admin-body .admin-content .btn-danger-ghost {
  border-radius: 10px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, .72);
  color: var(--ink-soft);
}
body.admin-body .admin-content .btn-ghost:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
body.admin-body .admin-content .btn-danger-ghost {
  border-color: rgba(180, 79, 71, .25);
  background: var(--danger-tint);
  color: var(--danger);
}
body.admin-body .admin-content .btn-danger-ghost:hover:not(:disabled) { border-color: var(--danger); background: #f5d9d5; color: #8d332d; }
body.admin-body .admin-content .icon-btn {
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink-faint);
}
body.admin-body .admin-content .icon-btn:hover { border-color: rgba(180, 79, 71, .35); background: var(--danger-tint); color: var(--danger); }
body.admin-body .product-row > .btn { min-width: 86px; }
body.admin-body .product-row > .admin-switch { margin-inline: 4px 6px; }

@media (max-width: 900px) {
  body.lp .hero__visual { transform: translateY(14px); }
  body.lp .hero__drink { transform: translateY(22px) !important; }
  body.lp .outlet { grid-template-columns: 1fr; }
  body.lp .outlet__media { min-height: 340px; }
}
@media (max-width: 760px) {
  body.admin-body .admin-section__head { align-items: flex-start; }
  body.admin-body .admin-toolbar--orders,
  body.admin-body .admin-toolbar--customers { align-items: stretch; }
  body.admin-body .admin-toolbar .order-view-pills,
  body.admin-body .admin-toolbar--orders > [data-orders-export] { margin-left: 0 !important; }
}
@media (max-width: 640px) {
  body.lp .hero__visual { transform: translateY(8px); }
  body.lp .hero__drink { transform: translateY(16px) !important; }
  body.lp .outlet { border-radius: 20px; }
  body.lp .outlet__media { min-height: 290px; }
  body.lp .outlet__body { padding: 28px 24px 32px; }
  body.lp .menu-body .drink-card { padding: 9px 9px 14px; border-radius: 18px !important; }
  body.lp .menu-body .drink-card__body { padding: 14px 4px 0; }
  body.lp .menu-body .drink-card__foot { padding: 13px 2px 0; }
  body.lp .menu-body .drink-card .add-btn { width: 40px; height: 40px; flex-basis: 40px; }
}

/* Product editor correction: the drawer is a working surface in its own
   right-hand canvas. Keep its fields independent from the compact list rules
   used elsewhere in the admin. */
body.admin-body .editor-drawer {
  width: min(1120px, 100%) !important;
  background: #f7f8f5;
}
body.admin-body .editor-head {
  min-height: 78px;
  padding: 18px 30px;
  background: #fff;
}
body.admin-body .editor-head h2 { font-size: 22px; letter-spacing: -.025em; }
body.admin-body .editor-body {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
  gap: 28px;
  padding: 28px 30px 34px;
}
body.admin-body .editor-fields { gap: 20px; }
body.admin-body .editor-card { padding: 22px; border-radius: 18px; background: #fff; }
body.admin-body .editor-preview {
  top: 28px;
  padding-left: 28px;
  border-left: 1px solid var(--hairline);
}
body.admin-body .editor-preview__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
body.admin-body .editor-preview .drink-card { border-radius: 20px !important; background: #fff !important; overflow: hidden; }
body.admin-body .editor-preview .drink-card__media { min-height: 330px; border-radius: 0 !important; }
body.admin-body .editor-preview .drink-card__body { padding: 22px; }
body.admin-body .editor-preview .drink-card__foot { margin-top: 22px; }
body.admin-body .editor-avail { min-height: 64px; padding: 14px 18px; border-radius: 14px; background: #fff; }

body.admin-body .conditional-callout {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fbf7f0;
  border-color: rgba(111, 81, 56, .2);
}
body.admin-body .opt-group { border-radius: 16px; background: #fff; }
body.admin-body .opt-group.is-on > .opt-check { padding: 16px 18px; background: #f5f7f4; }
body.admin-body .opt-check > span { min-width: 0; }
body.admin-body .opt-check > span strong { font-size: 16px; }
body.admin-body .opt-check > span small { font-size: 13px; }
body.admin-body .opt-condition {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 18px;
  font-size: 14px;
}
body.admin-body .opt-condition select { min-width: 0; width: 100%; min-height: 42px; }
body.admin-body .opt-choices { padding: 16px 18px 18px; gap: 10px; }
body.admin-body .opt-choice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 92px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.admin-body .opt-choice-hide { min-width: 0; overflow: hidden; }
body.admin-body .opt-choice-hide span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin-body .opt-choice-price { width: 108px; justify-content: flex-end; white-space: nowrap; }
body.admin-body .opt-choice-price input { width: 74px !important; min-width: 0; flex: 0 0 74px; }
body.admin-body .opt-choice-default { width: 92px; justify-content: flex-start; }
body.admin-body .editor-foot {
  min-height: 82px;
  padding: 16px 30px;
  background: #fff;
  box-shadow: 0 -10px 24px rgba(31, 42, 37, .06);
}
body.admin-body .editor-foot__right { align-items: center; gap: 10px; }
body.admin-body .editor-drawer .btn { min-height: 46px; padding-inline: 18px; border-radius: 12px; }
body.admin-body .editor-drawer .btn-ghost,
body.admin-body .editor-drawer .btn-danger-ghost {
  border: 1px solid var(--hairline-strong);
  background: #fff;
}
body.admin-body .editor-drawer .btn-ghost { color: var(--ink-soft); }
body.admin-body .editor-drawer .btn-ghost:hover:not(:disabled) { background: var(--paper-sunken); color: var(--ink); }
body.admin-body .editor-drawer .btn-danger-ghost {
  border-color: rgba(180, 79, 71, .25);
  background: var(--danger-tint);
  color: var(--danger);
}
body.admin-body .editor-drawer .btn-danger-ghost:hover:not(:disabled) { border-color: var(--danger); background: #f5d9d5; }

@media (max-width: 900px) {
  body.admin-body .editor-drawer { width: 100% !important; }
  body.admin-body .editor-body { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important; gap: 20px; padding-inline: 22px; }
  body.admin-body .editor-preview { padding-left: 20px; }
  body.admin-body .opt-choice-row { grid-template-columns: minmax(0, 1fr) 104px 86px; gap: 8px; }
  body.admin-body .opt-choice-price { width: 104px; }
  body.admin-body .opt-choice-default { width: 86px; }
}
@media (max-width: 760px) {
  body.admin-body .editor-body { grid-template-columns: 1fr !important; }
  body.admin-body .editor-preview { position: static; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--hairline); }
  body.admin-body .editor-foot { padding-inline: 20px; }
}
@media (max-width: 520px) {
  body.admin-body .editor-head { padding-inline: 20px; }
  body.admin-body .editor-body { padding: 20px 16px 26px; }
  body.admin-body .editor-card { padding: 18px; }
  body.admin-body .opt-choice-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  body.admin-body .opt-choice-hide { grid-row: 1 / span 2; }
  body.admin-body .opt-choice-price,
  body.admin-body .opt-choice-default { grid-column: 2; width: auto; justify-content: flex-end; }
  body.admin-body .editor-foot { min-height: 78px; padding-inline: 16px; }
  body.admin-body .editor-foot .btn-danger-ghost { padding-inline: 12px; }
  body.admin-body .editor-foot__right .btn { padding-inline: 14px; }
}

/* Admin edit/delete actions: keep the hierarchy obvious and the hit areas
   stable across tables, cards, drawers, and the CMS repeaters. */
body.admin-body .admin-content [data-edit-id],
body.admin-body .admin-content [data-edit-outlet],
body.admin-body .admin-content [data-edit-staff],
body.admin-body .admin-content [data-promo-edit],
body.admin-body .admin-content [data-blackout-edit],
body.admin-body .admin-content [data-duplicate-id],
body.admin-body .admin-content [data-promo-duplicate] {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(111, 81, 56, .22);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.admin-body .admin-content [data-edit-id]:hover,
body.admin-body .admin-content [data-edit-outlet]:hover,
body.admin-body .admin-content [data-edit-staff]:hover,
body.admin-body .admin-content [data-promo-edit]:hover,
body.admin-body .admin-content [data-blackout-edit]:hover,
body.admin-body .admin-content [data-duplicate-id]:hover,
body.admin-body .admin-content [data-promo-duplicate]:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-deep);
  box-shadow: 0 4px 12px rgba(111, 81, 56, .10);
  transform: translateY(-1px);
}
body.admin-body .admin-content [data-edit-id]:focus-visible,
body.admin-body .admin-content [data-edit-outlet]:focus-visible,
body.admin-body .admin-content [data-edit-staff]:focus-visible,
body.admin-body .admin-content [data-promo-edit]:focus-visible,
body.admin-body .admin-content [data-blackout-edit]:focus-visible,
body.admin-body .admin-content [data-duplicate-id]:focus-visible,
body.admin-body .admin-content [data-promo-duplicate]:focus-visible,
body.admin-body .admin-content [data-cat-del]:focus-visible,
body.admin-body .admin-content [data-og-del]:focus-visible,
body.admin-body .admin-content [data-choice-del]:focus-visible,
body.admin-body .admin-content [data-delete-outlet]:focus-visible,
body.admin-body .admin-content [data-remove-staff]:focus-visible,
body.admin-body .admin-content [data-promo-del]:focus-visible,
body.admin-body .admin-content [data-blackout-delete]:focus-visible,
body.admin-body .editor-drawer [data-delete]:focus-visible {
  outline: 3px solid rgba(111, 81, 56, .20);
  outline-offset: 2px;
}

body.admin-body .admin-content [data-cat-del],
body.admin-body .admin-content [data-og-del],
body.admin-body .admin-content [data-choice-del],
body.admin-body .admin-content [data-delete-outlet],
body.admin-body .admin-content [data-remove-staff],
body.admin-body .admin-content [data-promo-del],
body.admin-body .admin-content [data-blackout-delete],
body.admin-body .admin-content [data-repeat-del],
body.admin-body .admin-content [data-chip-del] {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(180, 79, 71, .20);
  border-radius: 10px;
  background: #fff8f6;
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.admin-body .admin-content [data-cat-del]:hover,
body.admin-body .admin-content [data-og-del]:hover,
body.admin-body .admin-content [data-choice-del]:hover,
body.admin-body .admin-content [data-delete-outlet]:hover,
body.admin-body .admin-content [data-remove-staff]:hover,
body.admin-body .admin-content [data-promo-del]:hover,
body.admin-body .admin-content [data-blackout-delete]:hover,
body.admin-body .admin-content [data-repeat-del]:hover,
body.admin-body .admin-content [data-chip-del]:hover {
  border-color: rgba(180, 79, 71, .42);
  background: #fbe7e3;
  color: #963b34;
  box-shadow: 0 4px 12px rgba(180, 79, 71, .12);
  transform: translateY(-1px);
}
body.admin-body .admin-content [data-cat-del] svg,
body.admin-body .admin-content [data-og-del] svg,
body.admin-body .admin-content [data-choice-del] svg,
body.admin-body .admin-content [data-delete-outlet] svg,
body.admin-body .admin-content [data-remove-staff] svg,
body.admin-body .admin-content [data-promo-del] svg,
body.admin-body .admin-content [data-blackout-delete] svg,
body.admin-body .admin-content [data-repeat-del] svg,
body.admin-body .admin-content [data-chip-del] svg { width: 17px; height: 17px; }

/* The remaining legacy × labels use the same compact trash silhouette. */
body.admin-body .admin-content [data-remove-staff],
body.admin-body .admin-content [data-blackout-delete] { font-size: 0; position: relative; }
body.admin-body .admin-content [data-remove-staff]::before,
body.admin-body .admin-content [data-blackout-delete]::before {
  content: "";
  width: 12px;
  height: 13px;
  border: 1.6px solid currentColor;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}
body.admin-body .admin-content [data-remove-staff]::after,
body.admin-body .admin-content [data-blackout-delete]::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 5px;
  top: 11px;
  border-top: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
}

body.admin-body .table-actions { gap: 10px; flex-wrap: nowrap; }
body.admin-body .admin-table td:last-child .table-actions { justify-content: flex-end; }
body.admin-body .product-row__actions { flex-shrink: 0; }
body.admin-body .product-row__actions .btn { min-width: 0; }
body.admin-body .admin-table td:last-child:has([data-edit-staff]) { text-align: right; }
body.admin-body .editor-drawer [data-delete] {
  min-width: 142px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(180, 79, 71, .25);
  border-radius: 12px;
  background: var(--danger-tint);
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .01em;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.admin-body .editor-drawer [data-delete]:hover:not(:disabled) { border-color: var(--danger); background: #f5d9d5; color: #8d332d; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(180, 79, 71, .12); }

@media (max-width: 640px) {
  body.admin-body .product-row { flex-wrap: wrap; }
  body.admin-body .product-row__actions { margin-left: auto; }
  body.admin-body .product-row__actions .btn { min-height: 36px; padding-inline: 11px; }
  body.admin-body .admin-table td:last-child .table-actions { justify-content: flex-start; }
}

/* Shared order-context modal. Outlet selection is a decision only when the
   customer needs it; the single-outlet case stays quiet and preselected. */
.lp .menu-order-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(34px, 5vw, 56px);
  padding: 18px 20px;
  border: 1px solid rgba(242,236,211,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
}
.lp .menu-order-context [data-menu-order-context-status] { display: block; margin-top: 7px; color: var(--cream); font-size: 15px; font-weight: 400; }
.lp .menu-order-context__button,
.lp .order-context-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 500 11px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.lp .menu-order-context__button { color: var(--cream); background: transparent; white-space: nowrap; }
.lp .menu-order-context__button:hover { color: var(--green-deep); background: var(--cream); border-color: var(--cream); transform: translateY(-1px); }
.lp .checkout-context-card { padding: 22px 24px; }
.lp .checkout-context-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.lp .checkout-context-card__head h2 { margin: 8px 0 0; }
.lp .checkout-context-card__step { color:var(--clay); font: 500 12px/1 var(--font-body); letter-spacing:.14em; }
.lp .order-context-trigger { width:100%; color:var(--ink); background:var(--paper); border-color:rgba(38,34,26,.18); text-align:left; text-transform:none; letter-spacing:.02em; font-size:14px; font-weight:400; }
.lp .order-context-trigger:hover { border-color:var(--green); background:color-mix(in srgb, var(--green) 5%, var(--paper)); transform: translateY(-1px); }
.lp .order-context-trigger__action { color:var(--green); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.lp .order-context-summary__empty { color:var(--ink-soft); }
.lp .order-context-trigger > span:first-child { min-width:0; }
.lp .order-context-trigger [data-checkout-order-context-summary] { display:flex; align-items:center; min-height:22px; }
.lp .order-context-trigger [data-checkout-order-context-summary] > span { display:flex; flex-direction:column; gap:3px; }
.lp .order-context-trigger [data-checkout-order-context-summary] strong { font-weight:500; }
.lp .order-context-trigger [data-checkout-order-context-summary] small { color:var(--ink-soft); font-size:12px; }
.lp .order-context-summary__action { color:var(--green); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }

.order-context-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  background: rgba(27, 25, 21, .62);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.order-context-overlay.is-open { opacity:1; pointer-events:auto; }
.order-context-modal {
  width:min(520px, 100%);
  max-height:min(720px, calc(100vh - 48px));
  overflow:auto;
  border:1px solid rgba(38,34,26,.14);
  border-radius:20px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 26px 80px rgba(27,25,21,.28);
  transform:translateY(10px) scale(.985);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.order-context-overlay.is-open .order-context-modal { transform:none; }
.order-context-modal__head,
.order-context-modal__foot { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.order-context-modal__head { padding:24px 26px 20px; border-bottom:1px solid rgba(38,34,26,.12); }
.order-context-modal__head h2 { margin-top:8px; font:500 clamp(24px, 4vw, 32px)/1.05 var(--font-body); letter-spacing:-.03em; }
.order-context-modal__head .eyebrow { color:var(--clay); }
.order-context-modal__close { width:38px; height:38px; flex:0 0 38px; border-radius:50%; color:var(--ink-soft); font-size:26px; line-height:1; transition:background .16s ease, color .16s ease; }
.order-context-modal__close:hover { background:rgba(38,34,26,.08); color:var(--ink); }
.order-context-modal__body { display:flex; flex-direction:column; gap:24px; padding:24px 26px; }
.order-context-fieldset { min-width:0; padding:0; border:0; }
.order-context-fieldset legend { margin-bottom:11px; color:var(--ink-soft); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.order-context-outlets { display:flex; flex-direction:column; gap:9px; }
.order-context-outlet,
.order-context-choice {
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  padding:14px 15px;
  border:1px solid rgba(38,34,26,.16);
  border-radius:12px;
  background:rgba(255,255,255,.58);
  color:var(--ink);
  text-align:left;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.order-context-outlet { cursor:pointer; }
.order-context-outlet:hover,
.order-context-outlet:has(input:checked),
.order-context-choice:hover:not(:disabled),
.order-context-choice[aria-pressed="true"] { border-color:var(--green); background:color-mix(in srgb, var(--green) 7%, white); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent); }
.order-context-outlet input { width:16px; height:16px; flex:0 0 16px; accent-color:var(--green); }
.order-context-outlet span,
.order-context-choice span:last-child { min-width:0; display:flex; flex-direction:column; gap:4px; }
.order-context-outlet strong,
.order-context-choice strong { font-size:14px; font-weight:500; }
.order-context-outlet small,
.order-context-choice small { overflow:hidden; color:var(--ink-soft); font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.order-context-single { display:flex; flex-direction:column; gap:6px; padding:15px 16px; border-radius:12px; background:rgba(111,81,56,.08); }
.order-context-single__label { color:var(--ink-soft); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.order-context-single strong { font-size:17px; font-weight:500; }
.order-context-single small { color:var(--ink-soft); font-size:12px; }
.order-context-fulfillment { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.order-context-choice { cursor:pointer; }
.order-context-choice:disabled { cursor:not-allowed; opacity:.42; }
.order-context-choice__icon { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border-radius:50%; background:rgba(111,81,56,.10); color:var(--green); font-size:17px; }
.order-context-modal__status { margin-top:-10px; color:var(--clay); font-size:13px; }
.order-context-modal__foot { padding:16px 26px 22px; border-top:1px solid rgba(38,34,26,.12); }
.order-context-modal__foot .btn { min-height:44px; border-radius:999px; padding-inline:20px; }
.order-context-modal__foot .btn-ghost { border:1px solid rgba(38,34,26,.18); background:transparent; color:var(--ink-soft); }
.order-context-modal__foot .btn-primary { background:var(--green); color:var(--cream); }

@media (max-width: 600px) {
  .lp .menu-order-context { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:34px; padding:16px; }
  .lp .menu-order-context__button { width:100%; }
  .order-context-overlay { align-items:flex-end; padding:12px; }
  .order-context-modal { max-height:calc(100vh - 24px); border-radius:18px 18px 12px 12px; }
  .order-context-modal__head { padding:20px 20px 17px; }
  .order-context-modal__body { gap:20px; padding:20px; }
  .order-context-modal__foot { padding:14px 20px 18px; }
  .order-context-fulfillment { grid-template-columns:1fr; }
  .order-context-choice { padding:13px; }
}

/* ============================ Final storefront system ============================
   Keep every public route on the canonical neutral cocoa vocabulary.
   These tokens intentionally sit last so older page-specific experiments cannot
   change the control language or reintroduce green/blue accents. */
:root {
  --ui-espresso: var(--sb-cafe-espresso);
  --ui-espresso-deep: var(--sb-cafe-blush-deep);
  --ui-cream: var(--sb-cafe-cream);
  --ui-stone: var(--sb-cafe-latte-100);
  --ui-latte: var(--sb-cafe-latte-100);
  --ui-cappuccino: var(--sb-cafe-latte-300);
  --ui-line: var(--hairline);
  --ui-line-strong: var(--hairline-strong);
  --ui-ink: var(--sb-cafe-espresso);
  --ui-muted: var(--sb-cafe-espresso-soft);
  --ui-faint: #80695a;
  --ui-peach: var(--sb-cafe-latte-200);
  --ui-peach-soft: var(--sb-cafe-latte-100);
  --ui-sage: var(--sb-status-success);
  --ui-sage-soft: var(--sb-status-success-tint);
  --ui-danger: var(--sb-status-danger);
  --ui-warning: var(--sb-status-warning);
  --ui-success: var(--sb-status-success);
  --ui-peach-strong: var(--sb-cafe-blush-deep);
  --ui-sage-ink: var(--sb-status-success);
  --ui-focus-ring: rgba(90, 45, 27, .30);
}

body.lp,
body.admin-body {
  --accent: var(--ui-espresso);
  --accent-deep: var(--ui-espresso-deep);
  --accent-tint: var(--ui-peach-soft);
  --moss: var(--ui-cappuccino);
  --clay: var(--ui-peach-strong);
  --green: var(--ui-espresso);
  --green-deep: var(--ui-espresso-deep);
  --cream: var(--ui-cream);
  --cream-dim: var(--sb-cafe-latte-100);
}

body.lp .pill,
body.lp .btn,
body.lp .filter-pill,
body.lp .segmented button,
body.lp .icon-btn,
body.lp .lp-ico,
body.lp .add-btn,
body.lp .dcard__add,
body.admin-body .btn,
body.admin-body .filter-pill,
body.admin-body .icon-btn {
  border-radius: 10px;
  font-weight: 700;
}

body.lp .pill--peach,
body.lp .mood__prompt-foot button {
  background: var(--ui-peach) !important;
  border-color: var(--ui-peach) !important;
  color: var(--ui-espresso) !important;
}
body.lp .pill--peach:hover,
body.lp .mood__prompt-foot button:hover {
  background: var(--sb-cafe-latte-300) !important;
  border-color: var(--sb-cafe-latte-300) !important;
  color: #fffaf4 !important;
}
body.lp .pill--dark,
body.lp .btn-primary,
body.lp .filter-pill[aria-pressed="true"],
body.lp .segmented button[aria-pressed="true"],
body.admin-body .btn-primary,
body.admin-body .filter-pill.is-active {
  background: var(--ui-espresso) !important;
  border-color: var(--ui-espresso) !important;
  color: #fffaf4 !important;
}
body.lp .pill--dark:hover,
body.lp .btn-primary:hover:not(:disabled),
body.lp .filter-pill[aria-pressed="true"]:hover,
body.lp .segmented button[aria-pressed="true"]:hover,
body.admin-body .btn-primary:hover:not(:disabled),
body.admin-body .filter-pill.is-active:hover {
  background: var(--ui-espresso-deep) !important;
  border-color: var(--ui-espresso-deep) !important;
  color: #fffaf4 !important;
}
body.lp .btn-secondary,
body.lp .filter-pill,
body.lp .segmented button,
body.admin-body .btn-secondary,
body.admin-body .filter-pill {
  color: var(--ui-espresso) !important;
  border-color: var(--ui-line-strong) !important;
  background: transparent;
}
body.lp .btn-secondary:hover:not(:disabled),
body.lp .filter-pill:hover,
body.lp .segmented button:hover:not([aria-pressed="true"]),
body.admin-body .btn-secondary:hover:not(:disabled),
body.admin-body .filter-pill:hover {
  color: var(--ui-espresso) !important;
  border-color: var(--ui-peach-strong) !important;
  background: var(--ui-peach-soft) !important;
}
body.lp .lp-ico:hover,
body.lp .icon-btn:hover,
body.admin-body .icon-btn:hover {
  color: var(--ui-espresso) !important;
  border-color: var(--ui-peach-strong) !important;
  background: var(--ui-peach-soft) !important;
}

/* Menu follows the featured-drinks shelf: no outer cards, just image, label,
   price, and a small add action anchored to the image. */
body.lp .menu-body .drink-card {
  align-items: stretch;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ui-ink) !important;
  text-align: left;
}
body.lp .menu-body .drink-card:hover {
  transform: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.lp .menu-body .drink-card__media {
  position: relative;
  aspect-ratio: 1 / 1.18;
  border-radius: 18px !important;
  background: var(--ui-latte) !important;
  box-shadow: none !important;
}
body.lp .menu-body .drink-card:nth-child(3n + 2) .drink-card__media { background: var(--ui-peach-soft) !important; }
body.lp .menu-body .drink-card:nth-child(3n + 3) .drink-card__media { background: #d7b59c !important; }
body.lp .menu-body .drink-card__media img { width: 78%; filter: drop-shadow(0 24px 24px rgba(74, 48, 35, .15)); }
body.lp .menu-body .drink-card__body { align-items: flex-start; padding: 18px 0 0 !important; text-align: left; }
body.lp .menu-body .drink-card__tagline { color: var(--ui-peach-strong) !important; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
body.lp .menu-body .drink-card__name { margin-top: 8px; color: var(--ui-ink) !important; font-size: 15px; font-weight: 700; letter-spacing: 0 !important; line-height: 1.3; text-transform: none; }
body.lp .menu-body .drink-card__meta { justify-content: flex-start; gap: 6px; margin-top: 8px; }
body.lp .menu-body .drink-card__tag { border-color: var(--ui-line-strong) !important; background: transparent !important; color: var(--ui-espresso) !important; font-size: 9px; letter-spacing: .08em; }
body.lp .menu-body .drink-card__foot { justify-content: flex-start; width: 100%; margin-top: 12px; padding: 0 !important; }
body.lp .menu-body .drink-card__price { color: var(--ui-ink) !important; font-size: 12px; font-weight: 700; letter-spacing: 0; }
body.lp .menu-body .drink-card .add-btn {
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ui-espresso) !important;
  color: #fffaf4 !important;
}
body.lp .menu-body .drink-card:hover .add-btn { background: var(--ui-peach) !important; color: var(--ui-espresso) !important; transform: rotate(90deg); }

/* A predictable breakpoint keeps the mobile drawer and hamburger out of the
   desktop navigation at every route. */
@media (min-width: 761px) {
  body.lp .nav-toggle,
  body.lp .mobile-menu { display: none !important; }
}

/* Closed checkout dates are actual disabled choices, not only an empty time
   select after the customer clicks into a closed day. */
.schedule-date-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.schedule-date-choice {
  min-height: 76px;
  padding: 9px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ui-espresso);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.schedule-date-choice span,
.schedule-date-choice small { color: var(--ui-muted); font-size: 11px; }
.schedule-date-choice strong { color: var(--ui-ink); font-size: 20px; line-height: 1; }
.schedule-date-choice:hover:not(:disabled),
.schedule-date-choice[aria-selected="true"] { border-color: var(--ui-peach-strong); background: var(--ui-peach-soft); color: var(--ui-espresso); transform: translateY(-1px); }
.schedule-date-choice[aria-selected="true"] strong,
.schedule-date-choice[aria-selected="true"] span,
.schedule-date-choice[aria-selected="true"] small { color: var(--ui-espresso); }
.schedule-date-choice.is-closed,
.schedule-date-choice:disabled { border-color: rgba(74, 48, 35, .10); background: #e3dbd3; color: #a69a90; cursor: not-allowed; opacity: 1; }
.schedule-date-choice.is-closed strong,
.schedule-date-choice.is-closed span,
.schedule-date-choice.is-closed small { color: #a69a90; }
.schedule-date-status { margin-top: 8px; color: var(--ui-muted); }
@media (max-width: 540px) {
  .schedule-date-picker { gap: 6px; }
  .schedule-date-choice { min-height: 70px; padding-inline: 4px; }
}

/* ============================ Cross-page UI fixes ============================
   These rules intentionally live last: the public pages share several older
   page-specific styles, so the final layer is the single source of truth for
   contrast, control sizing, and responsive behaviour. */

/* Dark surfaces must keep every nested label readable, not just the link. */
body.lp .order-ribbon__actions a,
body.lp .order-ribbon__actions a b,
body.lp .order-ribbon__actions a small,
body.lp .order-ribbon__actions a > span:not(.order-ribbon__icon) {
  color: #fff8ef !important;
}
body.lp .order-ribbon__actions a small { opacity: .76 !important; }
body.lp .account-hero .ey,
body.lp .account-hero__big,
body.lp .account-hero__sub,
body.lp .checkout-hero .ey,
body.lp .checkout-hero__big,
body.lp .checkout-hero__sub,
body.lp .menu-hero .ey,
body.lp .outlets-hero .ey { color: #fff8ef !important; }
body.lp .account-hero__sub,
body.lp .checkout-hero__sub { color: #ead8c9 !important; }

/* Account points card: white type stays legible over the green gradient. */
body.lp .account-dashboard-card--points,
body.lp .account-dashboard-card--points span,
body.lp .account-dashboard-card--points strong,
body.lp .account-dashboard-card--points small,
body.lp .account-dashboard-card--points a { color: #fff8ef !important; }
body.lp .account-dashboard-card--points small,
body.lp .account-dashboard-card--points span { opacity: .9; }
body.lp .account-dashboard-card--points a { opacity: 1; text-decoration-color: rgba(255,248,239,.5); }

/* Payment and timing choices are separate equal controls, never one oversized
   legacy pill with a stray outer border. */
body.lp .checkout-card .segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.lp .checkout-card .segmented button {
  min-width: 0;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--ui-espresso) !important;
  white-space: normal;
  text-align: center;
}
body.lp .checkout-card .segmented button[aria-pressed="true"] {
  background: var(--ui-espresso) !important;
  border-color: var(--ui-espresso) !important;
  color: #fff8ef !important;
}

/* Store summaries breathe on wide screens and wrap safely on narrow ones. */
body.lp .order-context-trigger {
  gap: 24px;
  min-height: 74px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 16px;
}
body.lp .order-context-trigger [data-checkout-order-context-summary] {
  flex: 1 1 auto;
  min-width: 0;
}
body.lp .order-context-trigger [data-checkout-order-context-summary] strong { font-size: 16px; }
body.lp .order-context-trigger [data-checkout-order-context-summary] small { font-size: 14px; }
body.lp .order-context-summary__action,
body.lp .order-context-trigger__action { flex: 0 0 auto; }

/* Keep the checkout summary and its single action separate. The summary is
   allowed to shrink, while the action remains visible at the end of the row. */
body.lp .order-context-trigger > [data-checkout-order-context-summary] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}
body.lp .order-context-trigger > [data-checkout-order-context-summary] > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
body.lp .order-context-trigger > [data-checkout-order-context-summary] strong,
body.lp .order-context-trigger > [data-checkout-order-context-summary] small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The nav is dark on every storefront page, including the landing page's
   hover state. Match the hover color at the same cascade strength as the
   palette lock so account and cart icons never disappear. */
html body.lp .lp-nav__right .lp-ico:hover {
  color: var(--ui-espresso) !important;
}

/* Filters sit on the dark menu hero, so their default state must use the
   light hero ink instead of the body control color. */
body.lp .menu-hero .filter-pill {
  border-color: rgba(248, 242, 233, .42) !important;
  background: transparent !important;
  color: var(--sb-cafe-cream) !important;
  opacity: .92;
}
body.lp .menu-hero .filter-pill:hover {
  border-color: var(--ui-peach) !important;
  background: rgba(233, 164, 134, .16) !important;
  color: #fff !important;
  opacity: 1;
}
body.lp .menu-hero .filter-pill[aria-pressed="true"] {
  border-color: var(--ui-peach) !important;
  background: var(--ui-peach) !important;
  color: var(--ui-espresso) !important;
  opacity: 1;
}

/* Payment methods are equal, readable choices rather than a joined tab strip. */
body.lp .checkout-payment-card .segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}
body.lp .checkout-payment-card .segmented button {
  min-width: 0;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--ui-espresso) !important;
  text-align: center;
  white-space: normal;
}
body.lp .checkout-payment-card .segmented button[aria-pressed="true"] {
  border-color: var(--ui-espresso) !important;
  background: var(--ui-espresso) !important;
  color: #fff8ef !important;
}
@media (max-width: 640px) {
  body.lp .checkout-payment-card .segmented { grid-template-columns: 1fr; }
  body.lp .checkout-payment-card .segmented button { min-height: 52px; }
}

/* Keep the cart summary anchored to the drawer instead of letting the item
   area push it below the viewport when a saved cart is restored. */
body.lp .cart-drawer__items { min-height: 0; }
body.lp .cart-drawer__foot { flex: 0 0 auto; }
body.lp .cart-drawer__head h3 { font-family: var(--font-body) !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.03em !important; text-transform: none !important; }

/* Visitors can explore all drinks before choosing a store. Adding an item
   still opens the order-context picker so checkout remains outlet-scoped. */
body.lp .menu-context-hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
  padding: 14px 18px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  color: var(--ui-muted);
  font-size: 14px;
}
body.lp .menu-context-hint strong { color: var(--ui-ink); }

/* Optional account creation is part of checkout, while guest checkout remains
   the default and never requires a password. */
body.lp .checkout-account-card__intro { margin: -8px 0 16px; color: var(--ui-muted); font-size: 14px; line-height: 1.55; }
body.lp .checkout-account-toggle { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
body.lp .checkout-account-toggle input { width:18px; height:18px; flex:0 0 18px; margin-top:2px; accent-color:var(--ui-peach-strong); }
body.lp .checkout-account-toggle span { display:flex; flex-direction:column; gap:4px; }
body.lp .checkout-account-toggle strong { color:var(--ui-ink); font-size:15px; }
body.lp .checkout-account-toggle small { color:var(--ui-muted); font-size:13px; }
body.lp .checkout-account-fields { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:18px; }
body.lp .checkout-account-status { grid-column:1 / -1; min-height:1.3em; margin:0; color:var(--ui-muted); font-size:13px; }

@media (max-width: 640px) {
  body.lp .checkout-card .segmented { grid-template-columns:1fr; }
  body.lp .checkout-card .segmented button { min-height:52px; }
  body.lp .order-context-trigger { min-height:66px; padding:13px 18px; gap:14px; }
  body.lp .order-context-trigger [data-checkout-order-context-summary] strong { font-size:15px; }
  body.lp .order-context-trigger [data-checkout-order-context-summary] small { font-size:13px; }
  body.lp .menu-context-hint { align-items:flex-start; flex-direction:column; gap:4px; margin-bottom:26px; }
  body.lp .checkout-account-fields { grid-template-columns:1fr; }
  body.lp .checkout-account-status { grid-column:auto; }
}

/* ============================ Final account / checkout pass ============================ */

/* Payment labels stay centered even when older button styles set a text
   alignment or flex direction at a higher specificity. */
body.lp .checkout-payment-card .segmented button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-indent: 0 !important;
  width: 100% !important;
}

body.lp .schedule-date-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--ui-line-strong);
  border-radius: 12px;
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.45;
  background: rgba(255,255,255,.5);
}

/* The account overview is a member dashboard: the points balance is the
   primary surface, with a warm espresso/peach treatment that belongs to the
   Soulbrew palette. */
body.lp .account-page { max-width: 1240px; }
body.lp .account-body {
  background: linear-gradient(180deg, #f4f0e9 0%, #eee7de 100%) !important;
}
body.lp .account-dashboard-grid {
  grid-template-columns: minmax(320px, 1.35fr) repeat(3, minmax(150px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
body.lp .account-dashboard-card {
  min-width: 0;
  min-height: 174px;
  padding: 24px;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 28px rgba(44,32,24,.06);
}
body.lp .account-dashboard-card--points {
  min-height: 224px;
  padding: 30px;
  background: linear-gradient(135deg, var(--ui-espresso-deep) 0%, #654735 100%) !important;
  box-shadow: 0 18px 34px rgba(44,32,24,.18);
}
body.lp .account-points-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
}
body.lp .account-points-card__rule {
  color: var(--ui-peach-soft) !important;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.35;
  text-align: right;
}
body.lp .account-points-card strong {
  display: block;
  margin: 26px 0 8px;
  font-size: clamp(42px, 5vw, 64px);
  line-height: .98;
  letter-spacing: -.055em;
}
body.lp .account-points-card small {
  display: block;
  font-size: 15px;
  line-height: 1.45;
}
body.lp .account-points-card__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,248,239,.7);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
}
body.lp .account-points-card__link span { transition: transform .2s ease; }
body.lp .account-points-card__link:hover span { transform: translateX(3px); }
body.lp .account-metric { gap: 10px; }
body.lp .account-metric span { color: var(--ui-muted); font-size: 14px; }
body.lp .account-metric strong { margin-top: auto; font-size: clamp(26px, 3vw, 38px); }
body.lp .account-metric small { font-size: 14px; line-height: 1.45; }
body.lp .account-rewards,
body.lp .account-history,
body.lp .account-settings {
  margin-top: 18px;
  padding: 30px;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 28px rgba(44,32,24,.05);
}
body.lp .account-section-head {
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 24px;
}
body.lp .account-section-head h2 { margin-top: 4px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.04em; }
body.lp .account-section-head .account-section-intro { max-width: 58ch; margin-top: 8px; font-size: 16px; line-height: 1.55; }
body.lp .account-section-head > .btn { flex: 0 0 auto; min-height: 44px; padding-inline: 20px; }
body.lp .account-settings__head { margin-bottom: 24px; }
body.lp .account-settings__head h2 { margin-top: 4px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.04em; }
body.lp .account-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
body.lp .account-settings__grid > .account-form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
  padding: 26px;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
}
body.lp .account-form__head h3 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
body.lp .account-form__intro,
body.lp .account-form__hint {
  margin: 7px 0 0;
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.5;
}
/* These short explanations are required context, rather than decoration.
   Keep them in normal flow even if a legacy account rule is introduced. */
body.lp .account-form__intro { display: block !important; }
body.lp .account-form__hint { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--ui-stone); }
body.lp .account-form__hint strong { display: block; margin-top: 4px; color: var(--ui-ink); overflow-wrap: anywhere; }
body.lp .account-form__fields { display: grid; gap: 18px; }
body.lp .account-form .field { display: flex; gap: 8px; }
body.lp .account-form .field label { color: var(--ui-muted); font-size: 14px; letter-spacing: .08em; line-height: 1.3; }
body.lp .account-form .field input { width: 100%; min-height: 52px; padding: 13px 15px; font-size: 16px; }
body.lp .account-form__actions { margin-top: auto; padding-top: 2px; }
body.lp .account-form__actions .btn { min-height: 46px; padding-inline: 20px; }
body.lp .account-form .auth-status { min-height: 1.45em; margin: 0; font-size: 14px; line-height: 1.45; }
body.lp .account-address-card { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--ui-line); }
body.lp .account-address-card p { margin:6px 0; line-height:1.5; }
body.lp .account-address-card small { color:var(--ui-muted); }
body.lp .account-address-card .table-actions { flex:0 0 auto; }

@media (max-width: 1050px) {
  body.lp .account-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lp .account-dashboard-card--points { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body.lp .account-dashboard-grid,
  body.lp .account-settings__grid { grid-template-columns: 1fr; }
  body.lp .account-dashboard-card--points { grid-column: auto; min-height: 210px; padding: 24px; }
  body.lp .account-dashboard-card { min-height: 150px; padding: 20px; }
  body.lp .account-rewards,
  body.lp .account-history,
  body.lp .account-settings { padding: 22px 18px; }
  body.lp .account-settings__grid > .account-form { padding: 22px 18px; }
  body.lp .account-points-card__top { flex-direction: column; gap: 8px; }
  body.lp .account-points-card__rule { text-align: left; }
}

/* Admin forms and actions: one stable rhythm across every admin tab. */
body.admin-body .admin-content .btn,
body.admin-body .admin-content .icon-btn,
body.admin-body .editor-drawer .btn,
body.admin-body .editor-drawer .icon-btn {
  box-sizing: border-box;
  line-height: 1.2;
  vertical-align: middle;
}
body.admin-body .admin-content .btn,
body.admin-body .editor-drawer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}
body.admin-body .admin-content .btn-sm,
body.admin-body .editor-drawer .btn-sm { padding-block: 10px; }
body.admin-body .admin-content .icon-btn,
body.admin-body .editor-drawer .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.admin-body .admin-content .icon-btn svg,
body.admin-body .editor-drawer .icon-btn svg { display: block; }

/* Promo and access forms use four comfortable columns on wide screens,
   avoiding narrow controls and uneven label baselines. */
body.admin-body .promo-form { gap: 26px; }
body.admin-body .promo-form__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
  align-items: start;
}
body.admin-body .promo-form .field { min-width: 0; gap: 8px; }
body.admin-body .promo-form label {
  min-height: 20px;
  font-size: 14px;
  line-height: 1.35;
}
body.admin-body .promo-form input,
body.admin-body .promo-form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.3;
}
body.admin-body .promo-form select[multiple] {
  min-height: 132px;
  padding: 7px;
}
body.admin-body .promo-form select[multiple] option { padding: 7px 8px; border-radius: 6px; }
body.admin-body .promo-form .field-hint { margin-top: 2px; font-size: 13px; line-height: 1.45; }
body.admin-body .promo-form .admin-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-sunken);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.35;
}
body.admin-body .promo-form .admin-check input { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; accent-color: var(--accent); }
body.admin-body .promo-form > .btn[type="submit"] { min-width: 164px; }

/* Destructive actions share one icon, one size, and one visual treatment.
   This also makes the outlet delete control match the rest of the console. */
body.admin-body .admin-content [data-cat-del] svg,
body.admin-body .admin-content [data-og-del] svg,
body.admin-body .admin-content [data-choice-del] svg,
body.admin-body .admin-content [data-delete-outlet] svg,
body.admin-body .admin-content [data-remove-staff] svg,
body.admin-body .admin-content [data-promo-del] svg,
body.admin-body .admin-content [data-blackout-delete] svg,
body.admin-body .admin-content [data-repeat-del] svg,
body.admin-body .admin-content [data-chip-del] svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}
body.admin-body .admin-content [data-delete-outlet],
body.admin-body .admin-content [data-promo-del],
body.admin-body .admin-content [data-remove-staff],
body.admin-body .admin-content [data-blackout-delete] {
  font-size: 0;
}
body.admin-body .admin-content [data-delete-outlet]::before,
body.admin-body .admin-content [data-promo-del]::before,
body.admin-body .admin-content [data-remove-staff]::before,
body.admin-body .admin-content [data-blackout-delete]::before,
body.admin-body .admin-content [data-delete-outlet]::after,
body.admin-body .admin-content [data-promo-del]::after,
body.admin-body .admin-content [data-remove-staff]::after,
body.admin-body .admin-content [data-blackout-delete]::after { display: none; }

@media (max-width: 900px) {
  body.admin-body .promo-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.admin-body .promo-form__grid { grid-template-columns: 1fr; gap: 18px; }
  body.admin-body .promo-form .field--wide { grid-column: auto; }
  body.admin-body .promo-form > .btn[type="submit"] { width: 100%; }
}