/* Asharaf's — per-tenant theme stylesheet (CMS2-6.14)
   DB-backed via cms-bundles/asharafs/stylesheets/theme.css.yml. Loaded after
   boot.css and contains every brand-specific rule: --lm-* tokens, branded
   typography (.lm-serif/.lm-mono/.lm-italic/.lm-eyebrow), the .lm-btn-*
   button system, .lm-card/.lm-chip/.lm-promo-card variants, nav chrome,
   marquee/shimmer/fade animations, and inputs/labels that key off the
   saffron palette.
*/

:root {
  /* Core palette — warm modern minimal */
  --lm-bg: #0B0B0C;
  --lm-bg-1: #111113;
  --lm-bg-2: #17171A;
  --lm-surface: #1C1C20;
  --lm-surface-hi: #242428;
  --lm-line: rgba(255,255,255,0.08);
  --lm-line-strong: rgba(255,255,255,0.14);

  --lm-ink: #F7F5F0;
  --lm-ink-dim: rgba(247,245,240,0.72);
  --lm-ink-faint: rgba(247,245,240,0.45);

  /* Signature accents */
  --lm-saffron: #E89547;
  --lm-saffron-soft: #F4B87A;
  --lm-ember: #C44536;
  --lm-gold: #D9B26A;
  --lm-leaf: #7FA07A;
  --lm-cream: #F4EEE2;

  --lm-paper: #F7F4ED;
  --lm-paper-ink: #141414;

  --lm-radius: 14px;
  --lm-radius-sm: 10px;
  --lm-radius-lg: 22px;

  --lm-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --lm-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --lm-mono: 'Geist Mono', ui-monospace, monospace;

  --lm-shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --lm-shadow: 0 20px 60px rgba(0,0,0,0.4);
  --lm-shadow-lg: 0 40px 120px rgba(0,0,0,0.55);
}

.lm-serif { font-family: var(--lm-serif); font-weight: 400; letter-spacing: -0.01em; }
.lm-mono  { font-family: var(--lm-mono); }
.lm-italic { font-family: var(--lm-serif); font-style: italic; }

.lm-eyebrow {
  font-family: var(--lm-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lm-ink-dim);
}

/* Buttons */
.lm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--lm-sans);
  font-size: 14px; font-weight: 500;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.lm-btn-primary { background: var(--lm-ink); color: var(--lm-bg); }
.lm-btn-primary:hover { background: var(--lm-saffron); color: var(--lm-bg); }
.lm-btn-saffron { background: var(--lm-saffron); color: #18120A; box-shadow: var(--lm-shadow-sm); }
.lm-btn-saffron:hover { background: var(--lm-saffron-soft); transform: translateY(-1px); }
.lm-btn-ghost { background: transparent; color: var(--lm-ink); border-color: var(--lm-line-strong); }
.lm-btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--lm-ink-dim); }
.lm-btn-dark { background: var(--lm-paper-ink); color: var(--lm-cream); }
.lm-btn-sm { padding: 9px 16px; font-size: 13px; }
.lm-btn-lg { padding: 16px 28px; font-size: 15px; }

/* Cards */
.lm-card {
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-radius);
}
.lm-card-hover { transition: all .3s ease; }
.lm-card-hover:hover { border-color: var(--lm-line-strong); transform: translateY(-2px); }

/* Inputs */
.lm-input, .lm-select, .lm-textarea {
  width: 100%;
  background: var(--lm-bg-1);
  border: 1px solid var(--lm-line);
  color: var(--lm-ink);
  font-family: var(--lm-sans);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--lm-radius-sm);
  outline: none;
  transition: border-color .15s;
}
.lm-input:focus, .lm-select:focus, .lm-textarea:focus { border-color: var(--lm-saffron); }
.lm-input::placeholder { color: var(--lm-ink-faint); }

.lm-label {
  display: block;
  font-family: var(--lm-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lm-ink-faint);
  margin-bottom: 6px;
}

/* Chips */
.lm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--lm-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--lm-line);
  color: var(--lm-ink-dim);
}
.lm-chip-accent { background: rgba(232,149,71,0.12); border-color: rgba(232,149,71,0.35); color: var(--lm-saffron); }
.lm-chip-leaf   { background: rgba(127,160,122,0.12); border-color: rgba(127,160,122,0.35); color: var(--lm-leaf); }
.lm-chip-ember  { background: rgba(196,69,54,0.14); border-color: rgba(196,69,54,0.4); color: #E87060; }

/* Scrollbar */
.lm-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.lm-scroll::-webkit-scrollbar-track { background: transparent; }
.lm-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
.lm-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* Divider */
.lm-divider { height: 1px; background: var(--lm-line); border: none; margin: 0; }

/* Marquee */
@keyframes lm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lm-marquee {
  display: flex; gap: 40px;
  animation: lm-marquee 40s linear infinite;
  white-space: nowrap;
  width: max-content;
}

/* Fade in */
@keyframes lm-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.lm-fade-up { animation: lm-fade-up .6s ease both; }

/* Shimmer text */
.lm-shimmer {
  background: linear-gradient(90deg, var(--lm-ink) 0%, var(--lm-saffron) 50%, var(--lm-ink) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lm-shim 6s linear infinite;
}
@keyframes lm-shim { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* Tag number */
.lm-num { font-family: var(--lm-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--lm-ink-faint); }

/* Sticky nav blur backdrop */
.lm-nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(11,11,12,0.25);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.lm-nav.lm-nav-scrolled {
  background: rgba(11,11,12,0.75);
  border-bottom-color: var(--lm-line);
}

/* Tab pill nav */
.lm-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 999px; border: 1px solid var(--lm-line); }
.lm-tab  {
  background: transparent; color: var(--lm-ink-dim);
  border: none; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  font-family: var(--lm-sans); font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: all .2s;
}
.lm-tab:hover { color: var(--lm-ink); }
.lm-tab.active { background: var(--lm-ink); color: var(--lm-bg); }

/* Promo carousel card. The carousel in script.js (renderCard) and the
   promotion-card.yml partial share the .lm-promo-card class but only the
   partial ships its own <style>; rules that must apply to the live carousel
   live here. min-height gives a hero-strip baseline; height grows to fit
   content. Previously enforced aspect-ratio:3/1 on desktop, but at 760px
   width that caps height at ~253px and a Combo card (validity + 72px
   headline + name + description + includes + CTA + 28/36 padding ≈ 300px)
   overflows; combined with the card's overflow:hidden the CTA gets clipped. */
.lm-promo-card { min-height: 240px; }
@media (min-width: 768px) {
  .lm-promo-card { min-height: 260px; }
}