/* ============================================================
   NENA BRAND CSS — v1.0
   ------------------------------------------------------------
   Куда вставлять:
     Salient → Theme Options → Advanced → Custom CSS
   ИЛИ:
     через child theme (см. nena-fonts.php)

   Содержит:
     1. Шрифты Google Fonts
     2. CSS-переменные (токены брендбука)
     3. Глобальные overrides для Salient (хедер/футер/типографика/кнопки)
     4. Утилитарные .nena-* классы для Raw HTML блоков
   ============================================================ */


/* === 1. FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Inter:wght@400;500;600&display=swap');


/* === 2. BRAND TOKENS === */
:root {
  --nena-red:       #FA3434;
  --nena-red-dark:  #D62929;
  --nena-black:     #0B0B0B;
  --nena-white:     #FFFFFF;
  --nena-kraft:     #D2B48C;
  --nena-ink:       #0B0B0B;
  --nena-muted:     rgba(255,255,255,0.7);

  --nena-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --nena-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --nena-radius-lg:  20px;
  --nena-radius-xl:  24px;
}


/* === 3. SALIENT GLOBAL OVERRIDES === */

/* Body — базовый шрифт Inter */
body, body.home {
  font-family: var(--nena-font-body) !important;
  color: var(--nena-ink);
}

/* Все заголовки — Montserrat Black, UPPERCASE, negative tracking */
body h1, body h2, body h3, body h4, body h5, body h6,
body .nectar-button span,
body .section-title h1, body .section-title h2 {
  font-family: var(--nena-font-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 0.95 !important;
}

/* Salient header nav — Montserrat 700, uppercase, wide tracking */
#header-outer .sf-menu > li > a,
#header-outer #top nav > ul > li > a {
  font-family: var(--nena-font-display) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  font-size: 12px !important;
}

/* Salient buttons — pill, bold */
body .nectar-button,
body a.nectar-button,
body .nectar-button.regular {
  border-radius: 999px !important;
  font-family: var(--nena-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  padding: 14px 28px !important;
}

/* Accent color для Salient — red */
body .nectar-button.accent-color,
body .nectar-button[data-color-override="false"] {
  background: var(--nena-red) !important;
  color: var(--nena-white) !important;
}

/* Footer */
#footer-outer {
  background: var(--nena-black) !important;
  color: var(--nena-white) !important;
}
#footer-outer a { color: var(--nena-white) !important; opacity: 0.8; }
#footer-outer a:hover { opacity: 1; color: var(--nena-red) !important; }


/* === 4. NENA RAW HTML COMPONENT LIBRARY === */
/* Все классы ниже — для использования в Salient Raw HTML элементах.
   Каждая страница должна быть обёрнута в <div class="nena-page">...</div>  */

.nena-page, .nena-page * { box-sizing: border-box; }
.nena-page { font-family: var(--nena-font-body); }

/* Reset Salient containers внутри nena-page чтобы дать нам full-width */
.nena-page img { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.nena-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}
@media (min-width: 768px) {
  .nena-container { padding: 0 40px; }
}

.nena-section {
  padding: 80px 0;
  position: relative;
}
@media (min-width: 768px) {
  .nena-section { padding: 120px 0; }
}

.nena-section--tight { padding: 56px 0; }

/* Full-bleed breakout (если сидит внутри Salient .container) */
.nena-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---------- Backgrounds ---------- */
.nena-bg-red   { background: var(--nena-red);   color: var(--nena-white); }
.nena-bg-black { background: var(--nena-black); color: var(--nena-white); }
.nena-bg-white { background: var(--nena-white); color: var(--nena-black); }
.nena-bg-kraft { background: var(--nena-kraft); color: var(--nena-black); }

/* --- Light-theme adjustments (when section background is white/kraft) --- */
.nena-bg-white .nena-product,
.nena-bg-kraft .nena-product {
  background: #fafafa;
  border-color: rgba(0,0,0,0.1);
}
.nena-bg-white .nena-product__media,
.nena-bg-kraft .nena-product__media {
  background: var(--nena-kraft);          /* kraft media = packaging vibe */
}
.nena-bg-white .nena-product__desc,
.nena-bg-kraft .nena-product__desc {
  color: rgba(0,0,0,0.7);
  opacity: 1;
}
.nena-bg-white .nena-product__cta,
.nena-bg-kraft .nena-product__cta {
  color: rgba(0,0,0,0.85);
}
.nena-bg-white .nena-filter,
.nena-bg-kraft .nena-filter {
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.8);
}
.nena-bg-white .nena-filter--active,
.nena-bg-kraft .nena-filter--active {
  color: var(--nena-white);
}
.nena-bg-white .nena-loc {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--nena-black);
}
.nena-bg-white .nena-loc:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
.nena-bg-white .nena-loc:hover,
.nena-bg-white .nena-loc:hover .nena-loc__name,
.nena-bg-white .nena-loc:hover .nena-loc__area,
.nena-bg-white .nena-loc:hover .nena-loc__foot,
.nena-bg-white .nena-loc:hover .nena-loc__arrow {
  color: #fff !important;
}
.nena-bg-white .nena-loc:hover .nena-pill {
  background: #fff;
  color: var(--nena-red);
}
.nena-bg-white .nena-loc--soon { background: transparent; }
.nena-bg-white .nena-step {
  border-left-color: var(--nena-red);
}
.nena-bg-white .nena-step__body p { opacity: 0.7; }
.nena-bg-white .nena-format__list li { opacity: 0.85; }
.nena-bg-white .nena-eyebrow { opacity: 0.55; }

/* Red grain texture */
.nena-grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- Typography utilities ---------- */
.nena-eyebrow {
  font-family: var(--nena-font-display);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: 16px;
  display: block;
}

.nena-h1 {
  font-family: var(--nena-font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.025em;
  font-size: clamp(48px, 10vw, 140px);
  margin: 0;
  color: inherit;
}

.nena-h2 {
  font-family: var(--nena-font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 6vw, 84px);
  margin: 0 0 24px;
  color: inherit;
}

.nena-h3 {
  font-family: var(--nena-font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(22px, 2.5vw, 36px);
  margin: 0 0 12px;
  color: inherit;
}

.nena-p {
  font-family: var(--nena-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: inherit;
  margin: 0 0 16px;
}

.nena-p--lead {
  font-size: 19px;
  opacity: 0.9;
}

.nena-p--small {
  font-size: 14px;
  opacity: 0.75;
}

.nena-red-text    { color: var(--nena-red); }
.nena-white-text  { color: var(--nena-white); }

/* ---------- Logo badge ---------- */
.nena-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--nena-red);
  color: var(--nena-white);
  font-family: var(--nena-font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  flex-shrink: 0;
}
.nena-logo--white { background: var(--nena-white); color: var(--nena-red); }
.nena-logo--black { background: var(--nena-black); color: var(--nena-white); }
.nena-logo--sm    { width: 44px; height: 44px; font-size: 10px; }
.nena-logo--lg    { width: 80px; height: 80px; font-size: 16px; }

/* ---------- Buttons ---------- */
.nena-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}
.nena-btn svg { width: 14px; height: 14px; }

.nena-btn--red    { background: var(--nena-red);   color: var(--nena-white); }
.nena-btn--red:hover { background: var(--nena-black); color: var(--nena-white); }

.nena-btn--white  { background: var(--nena-white); color: var(--nena-red); }
.nena-btn--white:hover { background: var(--nena-black); color: var(--nena-white); }

.nena-btn--black  { background: var(--nena-black); color: var(--nena-white); }
.nena-btn--black:hover { background: var(--nena-red); color: var(--nena-white); }

.nena-btn--outline {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.nena-btn--outline:hover {
  background: var(--nena-white);
  color: var(--nena-red);
  border-color: var(--nena-white);
}

/* ---------- Pills ---------- */
.nena-pill {
  display: inline-block;
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--nena-black);
  color: var(--nena-white);
}
.nena-pill--white   { background: var(--nena-white); color: var(--nena-red); }
.nena-pill--red     { background: var(--nena-red);   color: var(--nena-white); }
.nena-pill--outline { background: transparent; border: 1px solid currentColor; }

/* ---------- Grids ---------- */
.nena-grid { display: grid; gap: 20px; }
.nena-grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.nena-grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.nena-grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---------- Hero ---------- */
.nena-hero {
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .nena-hero { padding: 160px 0 100px; }
}

/* Hero photo fills the card */
.nena-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Scale h1 to 8fr column width — ceiling keeps "& SHAWARMA" on one line to 1440px */
.nena-hero .nena-h1 {
  font-size: clamp(40px, 6.5vw, 96px);
}

.nena-hero__num {
  position: absolute;
  top: 80px;
  right: 30px;
  font-family: var(--nena-font-display);
  font-weight: 900;
  color: rgba(255,255,255,0.12);
  font-size: clamp(80px, 12vw, 180px);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* Trust row */
.nena-trust {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 24px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
}
@media (min-width: 768px) {
  .nena-trust { grid-template-columns: repeat(4, 1fr); }
}
.nena-trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
}
.nena-trust__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
}

/* ---------- Product card (меню) ---------- */
.nena-product {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--nena-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}
.nena-product:hover {
  border-color: var(--nena-red);
  transform: translateY(-2px);
}
.nena-bg-white .nena-product {
  background: #fafafa;
  border-color: rgba(0,0,0,0.08);
}
.nena-product__media {
  aspect-ratio: 4/3;
  background: var(--nena-red);
  position: relative;
  overflow: hidden;
}
.nena-product__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.nena-product__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.nena-product__num {
  position: absolute;
  bottom: 0;
  right: 16px;
  font-family: var(--nena-font-display);
  font-weight: 900;
  color: rgba(255,255,255,0.2);
  font-size: 84px;
  line-height: 1;
  user-select: none;
}
.nena-product__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nena-font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
}
.nena-product__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nena-product__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.nena-product__name {
  font-family: var(--nena-font-display);
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -0.01em;
}
.nena-product__price {
  font-family: var(--nena-font-display);
  font-weight: 900;
  color: var(--nena-red);
  font-size: 15px;
  white-space: nowrap;
}
.nena-product__desc {
  font-family: var(--nena-font-body);
  font-size: 14px;
  opacity: 0.75;
  line-height: 1.5;
  flex: 1;
  margin: 0;
}
.nena-product__cta {
  margin-top: 16px;
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.nena-product__cta:hover { color: var(--nena-red); }

/* ---------- Location card ---------- */
.nena-loc {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--nena-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  text-decoration: none;
  color: #fff;
  transition: all 0.25s ease;
  background: transparent;
}
.nena-loc:hover {
  background: #000;
  border-color: #000;
  transform: translateY(-2px);
}
.nena-loc:hover,
.nena-loc:hover .nena-loc__name,
.nena-loc:hover .nena-loc__area,
.nena-loc:hover .nena-loc__foot,
.nena-loc:hover .nena-loc__arrow {
  color: #fff !important;
}
.nena-loc:hover .nena-pill {
  background: #fff;
  color: #FA3434;
}
.nena-loc--soon {
  opacity: 0.75;
  background: transparent;
}
.nena-loc--soon:hover { background: transparent; border-color: rgba(255,255,255,0.4); transform: none; }
.nena-loc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: auto;
}
.nena-loc__area {
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  opacity: 0.75;
  margin: 0 0 6px;
}
.nena-loc__name {
  font-family: var(--nena-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1;
  margin: 0;
}
.nena-loc__foot {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: var(--nena-font-body);
  font-size: 13px;
  opacity: 0.85;
}
.nena-loc__arrow {
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
}

/* ---------- Format card (франшиза) ---------- */
.nena-format {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--nena-radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.nena-format__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.nena-format__title {
  font-family: var(--nena-font-display);
  font-weight: 900;
  font-size: 36px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.nena-format__price {
  font-family: var(--nena-font-display);
  font-weight: 900;
  color: var(--nena-red);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.nena-format__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nena-format__stat-k {
  font-family: var(--nena-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.6;
  margin: 0 0 4px;
}
.nena-format__stat-v {
  font-family: var(--nena-font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
}
.nena-format__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nena-format__list li {
  font-family: var(--nena-font-body);
  font-size: 14px;
  opacity: 0.85;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
}
.nena-format__list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--nena-red);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

/* ---------- Step card (Launch) ---------- */
.nena-step {
  border-left: 3px solid var(--nena-red);
  padding: 4px 0 4px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.nena-step__num {
  font-family: var(--nena-font-display);
  font-weight: 900;
  color: var(--nena-red);
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
}
.nena-step__body h4 {
  font-family: var(--nena-font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.nena-step__body p {
  font-family: var(--nena-font-body);
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
  line-height: 1.5;
}

/* ---------- Filter tabs (меню) ---------- */
.nena-menu-content {
  transition: opacity 0.18s ease;
}
.nena-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 32px;
}
.nena-filter {
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: inherit;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
}
.nena-filter:hover { border-color: var(--nena-red); color: var(--nena-red); }
.nena-filter--active,
.nena-filter--active:hover {
  background: var(--nena-red);
  border-color: var(--nena-red);
  color: var(--nena-white);
}
.nena-bg-white .nena-filter { border-color: rgba(0,0,0,0.15); }
.nena-bg-white .nena-filter:hover { border-color: var(--nena-red); }

/* ---------- Marquee ---------- */
.nena-marquee {
  background: var(--nena-black);
  color: var(--nena-white);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  padding: 18px 0;
}
.nena-marquee__track {
  display: flex;
  white-space: nowrap;
  animation: nena-scroll 35s linear infinite;
  will-change: transform;
}
.nena-marquee__item {
  font-family: var(--nena-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 32px;
  letter-spacing: -0.01em;
}
.nena-marquee__dot { color: var(--nena-red); }

@keyframes nena-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Number divider ---------- */
.nena-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* ---------- Forms (WhatsApp-only, no backend) ---------- */
.nena-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nena-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .nena-form__row--2 { grid-template-columns: 1fr 1fr; }
  .nena-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.nena-form label {
  font-family: var(--nena-font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.55;
  display: block;
  margin-bottom: 6px;
}
.nena-form input,
.nena-form select,
.nena-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  font-family: var(--nena-font-body);
  font-size: 15px;
  background: #fff;
  color: var(--nena-black);
  outline: none;
  transition: border-color 0.15s;
}
.nena-form input:focus,
.nena-form select:focus,
.nena-form textarea:focus {
  border-color: var(--nena-red);
}
.nena-form textarea { resize: vertical; min-height: 96px; }

/* Dark context */
.nena-bg-black .nena-form input,
.nena-bg-black .nena-form select,
.nena-bg-black .nena-form textarea,
.nena-bg-red .nena-form input,
.nena-bg-red .nena-form select,
.nena-bg-red .nena-form textarea {
  background: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.25);
  color: var(--nena-white);
}
.nena-bg-black .nena-form input::placeholder,
.nena-bg-red .nena-form input::placeholder { color: rgba(255,255,255,0.45); }


/* ---------- Misc utilities ---------- */
.nena-mt-0  { margin-top: 0; }
.nena-mt-2  { margin-top: 16px; }
.nena-mt-4  { margin-top: 32px; }
.nena-mt-6  { margin-top: 48px; }
.nena-mt-8  { margin-top: 64px; }

.nena-flex { display: flex; }
.nena-flex-wrap { flex-wrap: wrap; }
.nena-gap-2 { gap: 12px; }
.nena-gap-3 { gap: 16px; }
.nena-gap-4 { gap: 24px; }
.nena-items-center { align-items: center; }

.nena-text-center { text-align: center; }

.nena-max-w-lg { max-width: 720px; }
.nena-max-w-md { max-width: 560px; }
.nena-max-w-sm { max-width: 420px; }

/* 2-col split */
.nena-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .nena-split { grid-template-columns: 5fr 7fr; gap: 64px; }
  .nena-split--reverse { grid-template-columns: 7fr 5fr; }
  .nena-split--5-7 { grid-template-columns: 5fr 7fr; }
  .nena-split--7-5 { grid-template-columns: 7fr 5fr; }
  .nena-split--8-4 { grid-template-columns: 8fr 4fr; }
}

/* Image placeholder */
.nena-ph {
  background: rgba(0,0,0,0.08);
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: var(--nena-radius-lg);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nena-font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(0,0,0,0.4);
  text-align: center;
  padding: 16px;
}
.nena-bg-black .nena-ph, .nena-bg-red .nena-ph {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
}


/* ============================================================
   HEADER
   ============================================================ */
.nena-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nena-white);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}
.nena-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
  .nena-header__inner { padding: 16px 40px; }
}

.nena-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  margin-right: auto;
}
.nena-header__logo .nena-logo {
  width: 48px; height: 48px;
  font-size: 11px;
}
.nena-header__tagline {
  font-family: var(--nena-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: var(--nena-black);
  display: none;
}
@media (min-width: 900px) {
  .nena-header__tagline { display: inline; }
}

.nena-header__nav {
  display: none;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .nena-header__nav { display: flex; }
}
.nena-header__nav a {
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: var(--nena-black);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color 0.15s;
}
.nena-header__nav a:hover { color: var(--nena-red); }
.nena-header__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--nena-red);
  transition: right 0.2s;
}
.nena-header__nav a:hover::after { right: 0; }

.nena-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nena-header__cta {
  display: none !important;
  padding: 10px 20px !important;
  font-size: 11px !important;
}
@media (min-width: 640px) {
  .nena-header__cta { display: inline-flex !important; }
}

.nena-header__cart {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  color: var(--nena-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.15s;
  position: relative;
}
.nena-header__cart:hover {
  background: var(--nena-red);
  border-color: var(--nena-red);
  color: var(--nena-white);
}
.nena-header__cart svg { width: 18px; height: 18px; }

.nena-header__burger {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  color: var(--nena-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}
.nena-header__burger:hover {
  background: var(--nena-black);
  color: var(--nena-white);
  border-color: var(--nena-black);
}
.nena-header__burger svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .nena-header__burger { display: none; }
}


/* ============================================================
   MOBILE OFF-CANVAS MENU
   ============================================================ */
.nena-mobile {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.nena-mobile.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nena-mobile__inner {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(90vw, 420px);
  background: var(--nena-red);
  color: var(--nena-white);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
}
.nena-mobile.is-open .nena-mobile__inner {
  transform: translateX(0);
}
.nena-mobile__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--nena-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  padding: 0;
}
.nena-mobile__close:hover {
  background: var(--nena-white);
  color: var(--nena-red);
}
.nena-mobile__close svg { width: 18px; height: 18px; }

.nena-mobile__logo {
  align-self: flex-start;
  background: var(--nena-white);
  color: var(--nena-red);
}

.nena-mobile__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}
.nena-mobile__nav a {
  font-family: var(--nena-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 8vw, 40px);
  color: var(--nena-white);
  text-decoration: none;
  padding: 8px 0;
  line-height: 1;
  transition: opacity 0.15s;
}
.nena-mobile__nav a:hover { opacity: 0.7; }

.nena-mobile__footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nena-mobile__socials {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.nena-mobile__socials a {
  font-family: var(--nena-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: var(--nena-white);
  text-decoration: none;
  opacity: 0.85;
}
.nena-mobile__socials a:hover { opacity: 1; }


/* ============================================================
   FOOTER
   ============================================================ */
.nena-footer {
  background: var(--nena-black);
  color: var(--nena-white);
}
.nena-footer__top { padding: 80px 0; }
.nena-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 640px) {
  .nena-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 900px) {
  .nena-footer__grid { grid-template-columns: 2fr 1.2fr 1fr 1.2fr 1.2fr; gap: 48px; }
}

.nena-footer__brand .nena-logo {
  width: 56px;
  height: 56px;
  font-size: 12px;
  margin-bottom: 20px;
}
.nena-footer__statement {
  font-family: var(--nena-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 16px;
}
.nena-footer__muted {
  font-family: var(--nena-font-body);
  font-size: 14px;
  opacity: 0.6;
  margin: 0;
  line-height: 1.5;
}

.nena-footer__col-title {
  font-family: var(--nena-font-display);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.45;
  margin: 0 0 20px 0;
}
.nena-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nena-footer__list li {
  padding: 0;
  margin: 0 0 8px 0;
}
.nena-footer__list li::before {
  content: none;
}
.nena-footer__list a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  opacity: 0.7;
  font-size: 14px;
  line-height: 1.4;
  transition: opacity 0.2s;
}
.nena-footer__list a:hover {
  opacity: 1;
}

.nena-footer__hours {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nena-footer__hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nena-footer__hours li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.nena-footer__hours-day {
  font-family: var(--nena-font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.6;
}
.nena-footer__hours-time {
  font-family: var(--nena-font-body);
  font-size: 13px;
  opacity: 0.9;
}

.nena-footer__order-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nena-footer__order-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--nena-font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 800;
  transition: all 0.2s;
  border: 1.5px solid transparent;
  width: fit-content;
  max-width: 100%;
}
.nena-footer__order-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.nena-footer__order-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nena-footer__order-icon svg { flex-shrink: 0; }
.nena-footer__order-text { line-height: 1; }
.nena-footer__order-btn--whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.nena-footer__order-btn--whatsapp:hover {
  background: #1ebe59;
  border-color: #1ebe59;
}
.nena-footer__order-btn--gofood {
  background: #E53935;
  color: #fff;
  border-color: #E53935;
}
.nena-footer__order-btn--gofood:hover {
  background: #c62828;
  border-color: #c62828;
}
.nena-footer__order-btn--grabfood {
  background: #00B14F;
  color: #fff;
  border-color: #00B14F;
}
.nena-footer__order-btn--grabfood:hover {
  background: #009844;
  border-color: #009844;
}
.nena-footer__order-badge {
  background: #0a0a0a;
  color: #fff;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-left: 2px;
}
@media (max-width: 640px) {
  .nena-footer__order-btn {
    width: 100%;
    justify-content: center;
  }
}

.nena-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
}
.nena-footer__bottom .nena-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--nena-font-body);
  font-size: 12px;
  opacity: 0.5;
  text-align: center;
}
@media (min-width: 640px) {
  .nena-footer__bottom .nena-container {
    flex-direction: row;
    text-align: left;
  }
}
.nena-footer__slogan {
  font-family: var(--nena-font-display);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 700;
  margin: 0;
}


/* Salient header used as primary header */


/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */
@media (max-width: 640px) {
  .nena-section { padding: 64px 0; }
  .nena-hero    { padding: 80px 0 56px; }
  .nena-hero__num {
    top: 56px; right: 16px;
    font-size: 80px;
  }

  .nena-h1 { font-size: clamp(40px, 13vw, 72px); }
  .nena-h2 { font-size: clamp(32px, 10vw, 56px); }

  .nena-btn { padding: 12px 22px; min-height: 44px; }

  .nena-grid-2,
  .nena-grid-3,
  .nena-grid-4 { grid-template-columns: 1fr !important; }

  .nena-format { padding: 24px; }
  .nena-format__title { font-size: 28px; }

  .nena-hero .nena-split,
  .nena-hero .nena-split--7-5,
  .nena-hero .nena-split--5-7,
  .nena-hero .nena-split--8-4 {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .nena-form__row--2,
  .nena-form__row--3 { grid-template-columns: 1fr !important; }

  .nena-marquee__item { font-size: 20px; margin: 0 20px; gap: 20px; }

  .nena-loc__name { font-size: 24px; }
  .nena-product__num { font-size: 64px; }
}

@media (max-width: 360px) {
  .nena-header__inner { padding: 12px 14px; gap: 10px; }
  .nena-header__actions { gap: 6px; }
  .nena-header__cart,
  .nena-header__burger { width: 40px; height: 40px; }
  .nena-container { padding: 0 16px; }
}


/* ============================================================
   Reduce-motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nena-marquee__track { animation: none; }
  .nena-mobile__inner  { transition: none; }
  *                    { transition-duration: 0.01ms !important; }
}

.nena-hero__num { display: none; }


/* ============================================================
   Franchise (6445): убрать фоновый цвет Salient page wrapper
   ============================================================ */
body.page-id-6445 #ajax-content-wrap,
body.page-id-6445 .container-wrap,
body.page-id-6445 #page-header-bg,
body.page-id-6445 .page-header-no-bg {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.page-id-6445 #page-header-bg {
    display: none !important;
}

/* ============================================================
   Franchise (6445): full-width content, no sidebar gap
   ============================================================ */
body.page-id-6445 #post-area,
body.page-id-6445 .col.span_9.main-content,
body.page-id-6445 main#post-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 100% !important;
}

body.page-id-6445 #sidebar,
body.page-id-6445 .container-wrap aside.col.span_3,
body.page-id-6445 .container-wrap #sidebar {
    display: none !important;
}

body.page-id-6445 .container-wrap .row {
    display: block !important;
    margin: 0 !important;
}

body.page-id-6445 .container-wrap .container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* ============================================================
   HEADER "MENU" RED PILL v18 (2026-04-23)
   Top nav has a single item linking to /menu/. Salient renders
   it inside #header-outer … ul.buttons. Turn it into a brand CTA.
   ============================================================ */

#header-outer #top nav > ul.buttons li a[href$="/menu/"],
#header-outer #top nav > ul.buttons li a[href="https://nena.cafe/menu/"],
body #header-outer nav > ul.buttons > li > a[href$="/menu/"],
body #header-outer nav > ul.buttons > li > a[href*="/menu/"],
body #header-outer .buttons a[href$="/menu/"],
body #slide-out-widget-area .buttons a[href$="/menu/"] {
    background: #FA3434 !important;
    color: #fff !important;
    border: 2px solid #FA3434 !important;
    border-radius: 999px !important;
    padding: 10px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s !important;
    box-shadow: 0 4px 12px rgba(250,52,52,0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    min-height: 0 !important;
    height: auto !important;
}

#header-outer #top nav > ul.buttons li a[href$="/menu/"]:hover,
body #header-outer nav > ul.buttons > li > a[href$="/menu/"]:hover {
    background: #e22929 !important;
    border-color: #e22929 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(250,52,52,0.35) !important;
}

/* Kill Salient's sub-indicator arrow + pseudo effects on this pill */
#header-outer nav > ul.buttons > li > a[href$="/menu/"] .sf-sub-indicator,
#header-outer nav > ul.buttons > li > a[href$="/menu/"]::before,
#header-outer nav > ul.buttons > li > a[href$="/menu/"]::after {
    display: none !important;
}
/* The hover background-slider Salient injects — hide */
#header-outer nav > ul.buttons > li > a[href$="/menu/"] .menu-title-text {
    color: inherit !important;
}

/* ============================================================
   MOBILE HEADER LAYOUT — cart • MENU • burger, no overlap
   ============================================================ */
@media (max-width: 1000px) {
    /* Compact MENU pill on mobile */
    #header-outer nav > ul.buttons > li > a[href$="/menu/"],
    body #header-outer nav li a[href$="/menu/"] {
        padding: 8px 18px !important;
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }

    /* Ensure right-side widgets don't overlap — cart icon, MENU li, burger */
    #header-outer #nena-cart-icon-portal {
        margin-right: 6px !important;
        flex-shrink: 0 !important;
    }
    #header-outer .slide_out_area_toggle,
    #header-outer .off-canvas-menu-trigger,
    #header-outer .slide-out-widget-area-toggle {
        margin-left: 6px !important;
        flex-shrink: 0 !important;
    }
    #header-outer nav > ul.buttons {
        flex-shrink: 0 !important;
    }
    #header-outer nav > ul.buttons > li {
        margin: 0 !important;
    }
}

/* ============================================================
   HEADER MENU PILL v18b — correct selectors for real DOM
   Target: #header-outer #menu-salient-architect-top-menu li a[href$="/menu/"]
   Also strip Salient's menu-item-btn-style-* ::before/::after bg animations.
   ============================================================ */
#header-outer #menu-salient-architect-top-menu > li > a[href$="/menu/"],
#header-outer #menu-item-6064 > a,
#header-outer a[href="https://nena.cafe/menu/"],
body.logged-in #header-outer #menu-item-6064 > a {
    background: #FA3434 !important;
    background-color: #FA3434 !important;
    color: #fff !important;
    border: 2px solid #FA3434 !important;
    border-radius: 999px !important;
    padding: 10px 26px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(250,52,52,0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#header-outer #menu-salient-architect-top-menu > li > a[href$="/menu/"]:hover,
#header-outer #menu-item-6064 > a:hover {
    background: #e22929 !important;
    background-color: #e22929 !important;
    border-color: #e22929 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(250,52,52,0.35) !important;
    color: #fff !important;
}

/* Kill Salient's animated border+gradient pseudo-elements */
#header-outer #menu-item-6064 > a::before,
#header-outer #menu-item-6064 > a::after,
#header-outer #menu-salient-architect-top-menu > li.menu-item-btn-style-button-border-white-animated_extra-color-gradient > a::before,
#header-outer #menu-salient-architect-top-menu > li.menu-item-btn-style-button-border-white-animated_extra-color-gradient > a::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
    border: none !important;
}

/* Li container — no extra styling */
#header-outer #menu-item-6064 {
    background: transparent !important;
}

/* Mobile: smaller pill */
@media (max-width: 1000px) {
    #header-outer #menu-salient-architect-top-menu > li > a[href$="/menu/"],
    #header-outer #menu-item-6064 > a {
        padding: 8px 18px !important;
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
}

/* ============================================================
   HEADER MENU PILL v18c — universal selector (Salient renders
   the menu twice: desktop <nav> + mobile .mobile-header)
   ============================================================ */
#header-outer nav ul.sf-menu li a[href$="/menu/"],
#header-outer nav ul.sf-menu li a[href="https://nena.cafe/menu/"],
#header-outer .mobile-header ul li a[href$="/menu/"],
#header-outer #menu-item-6064 > a,
body #header-outer nav a[href$="/menu/"]:not([href*="#"]),
body #header-outer nav a[href="https://nena.cafe/menu/"] {
    background: #FA3434 !important;
    background-color: #FA3434 !important;
    color: #fff !important;
    border: 2px solid #FA3434 !important;
    border-radius: 999px !important;
    padding: 10px 26px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(250,52,52,0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#header-outer nav ul.sf-menu li a[href$="/menu/"]:hover,
#header-outer nav a[href="https://nena.cafe/menu/"]:hover,
#header-outer #menu-item-6064 > a:hover {
    background: #e22929 !important;
    background-color: #e22929 !important;
    border-color: #e22929 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(250,52,52,0.35) !important;
    color: #fff !important;
}

/* Kill Salient's menu-title-text underline / hover bg */
#header-outer nav ul.sf-menu li a[href$="/menu/"] .menu-title-text,
#header-outer #menu-item-6064 > a .menu-title-text {
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Salient menu-bottom-border / hover-line — kill on this pill */
#header-outer nav ul.sf-menu li a[href$="/menu/"]::before,
#header-outer nav ul.sf-menu li a[href$="/menu/"]::after,
#header-outer #menu-item-6064 > a::before,
#header-outer #menu-item-6064 > a::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

@media (max-width: 1000px) {
    #header-outer nav ul.sf-menu li a[href$="/menu/"],
    #header-outer #menu-item-6064 > a,
    body #header-outer nav a[href$="/menu/"]:not([href*="#"]) {
        padding: 8px 18px !important;
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
}

/* v18d inner text override — .menu-title-text has own color/weight rules */
#header-outer nav ul.sf-menu li a[href$="/menu/"] span,
#header-outer nav ul.sf-menu li a[href$="/menu/"] .menu-title-text,
#header-outer nav ul.sf-menu li a[href$="/menu/"] .menu-title-text-wrap,
#header-outer #menu-item-6064 > a span,
#header-outer #menu-item-6064 > a .menu-title-text,
body #header-outer nav a[href$="/menu/"] span,
body #header-outer nav a[href="https://nena.cafe/menu/"] span {
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
}
@media (max-width: 1000px) {
    #header-outer nav ul.sf-menu li a[href$="/menu/"] span,
    #header-outer #menu-item-6064 > a span {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
}

/* v18e-final: beat Salient's (0,8,5) menu-dynamic.css color rule */
html body #header-outer[data-has-menu] header#top nav ul.sf-menu li a[href$="/menu/"],
html body #header-outer[data-has-menu] header#top nav ul.sf-menu li a[href$="/menu/"] span,
html body #header-outer[data-has-menu] header#top nav ul.sf-menu li a[href$="/menu/"] .menu-title-text,
html body #header-outer[data-has-menu] nav ul.sf-menu li.menu-item-6064 > a > .menu-title-text,
html body #header-outer:not(.transparent) li.menu-item-6064 > a > .menu-title-text,
html body #header-outer #menu-item-6064 > a .menu-title-text,
html body #header-outer #menu-item-6064 > a span {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
    background: transparent !important;
    background-color: transparent !important;
}
@media (max-width: 1000px) {
    html body #header-outer[data-has-menu] header#top nav ul.sf-menu li a[href$="/menu/"] span,
    html body #header-outer #menu-item-6064 > a span {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
}

/* v18f NUCLEAR — targets Salient's exact chain including class .menu-item-6064
   which exists on BOTH desktop and mobile wrappers. Beats (0,10,5) specificity. */
html body #header-outer[data-has-menu] header#top nav ul.sf-menu li.menu-item-6064 > a,
html body #header-outer[data-has-menu][data-format] header#top nav ul.sf-menu li.menu-item.menu-item-6064 > a,
html body.post-type-archive-product #header-outer[data-has-menu] header#top nav ul.sf-menu li.menu-item-6064 > a,
html body #header-outer[data-has-menu] .mobile-header ul.sf-menu li.menu-item-6064 > a,
html body #header-outer #menu-item-6064 > a {
    background: #FA3434 !important;
    background-color: #FA3434 !important;
    color: #ffffff !important;
    border: 2px solid #FA3434 !important;
    border-radius: 999px !important;
    padding: 10px 26px !important;
    box-shadow: 0 4px 12px rgba(250,52,52,0.25) !important;
    text-decoration: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
}

html body #header-outer[data-has-menu] header#top nav ul.sf-menu li.menu-item-6064 > a > .menu-title-text,
html body #header-outer[data-has-menu][data-format] header#top nav ul.sf-menu li.menu-item.menu-item-6064 > a > .menu-title-text,
html body #header-outer[data-has-menu] .mobile-header ul.sf-menu li.menu-item-6064 > a > .menu-title-text,
html body #header-outer #menu-item-6064 > a > .menu-title-text,
html body #header-outer[data-has-menu] header#top nav ul.sf-menu li.menu-item-6064 > a > span {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

html body #header-outer[data-has-menu] header#top nav ul.sf-menu li.menu-item-6064 > a:hover,
html body #header-outer #menu-item-6064 > a:hover {
    background: #e22929 !important;
    background-color: #e22929 !important;
    border-color: #e22929 !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

html body #header-outer nav ul.sf-menu li.menu-item-6064 > a::before,
html body #header-outer nav ul.sf-menu li.menu-item-6064 > a::after,
html body #header-outer #menu-item-6064 > a::before,
html body #header-outer #menu-item-6064 > a::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
    border: none !important;
}

@media (max-width: 1000px) {
    html body #header-outer[data-has-menu] header#top nav ul.sf-menu li.menu-item-6064 > a,
    html body #header-outer #menu-item-6064 > a {
        padding: 8px 18px !important;
    }
    html body #header-outer[data-has-menu] header#top nav ul.sf-menu li.menu-item-6064 > a > .menu-title-text,
    html body #header-outer #menu-item-6064 > a > .menu-title-text {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
}

/* v18g mobile: explicit positioning so cart/pill/burger don't overlap.
   Salient mounts mobile header items in separate parent flex-containers. */
@media (max-width: 1000px) {
    /* Burger stays at the far right (Salient default). Don't touch. */

    /* Cart icon — position absolute, right of pill, left of burger */
    #header-outer #nena-cart-icon-portal {
        position: absolute !important;
        top: 50% !important;
        right: 72px !important;   /* burger ~50px + gap */
        transform: translateY(-50%) !important;
        z-index: 11 !important;
        margin: 0 !important;
    }
    #header-outer #nena-cart-icon-portal .nena-cart-icon {
        width: 36px !important;
        height: 36px !important;
    }

    /* MENU pill — pushed left of cart */
    html body #header-outer .mobile-header #menu-salient-architect-top-menu {
        padding-right: 124px !important;  /* make room for cart (36+8) + burger (50+4 gap) + own gap */
    }
    html body #header-outer #menu-item-6064 > a {
        padding: 7px 14px !important;
    }
    html body #header-outer #menu-item-6064 > a > .menu-title-text {
        font-size: 10.5px !important;
        letter-spacing: 0.06em !important;
    }
}

/* ============================================================
   HEADER LAYOUT v19 (2026-04-23)  — unified [logo][MENU] ... [cart][burger]
   Reset previous absolute positioning (v18g) and apply flex ordering.
   ============================================================ */

/* ── Reset v18g absolute positioning on cart portal ── */
#header-outer #nena-cart-icon-portal {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
}

/* ── DESKTOP ≥1001px ── */
@media (min-width: 1001px) {
    #header-outer #top .container > .row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    #header-outer .col.span_3 {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
        order: 1 !important;
        margin: 0 !important;
    }
    #header-outer .col.span_9.col_last {
        flex: 1 1 auto !important;
        width: auto !important;
        float: none !important;
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Unfold NAV so its UL children become flex items of .span_9 */
    #header-outer .col.span_9.col_last > nav {
        display: contents !important;
    }
    /* Hide the invisible mobile-header wrapper (Salient keeps it in DOM) */
    #header-outer .col.span_9.col_last > .nectar-mobile-only.mobile-header,
    #header-outer .col.span_9.col_last > .slide-out-widget-area-toggle.mobile-icon {
        display: none !important;
    }
    /* Order: MENU pill (1) — margin-right:auto pushes cart+burger to the edge */
    #header-outer .col.span_9.col_last > nav > ul.sf-menu,
    #header-outer .col.span_9.col_last ul.sf-menu:not(.buttons) {
        order: 1 !important;
        margin: 0 !important;
        margin-right: auto !important;
    }
    #header-outer .col.span_9.col_last > #nena-cart-icon-portal {
        order: 2 !important;
        margin: 0 !important;
    }
    #header-outer .col.span_9.col_last > nav > ul.buttons.sf-menu {
        order: 3 !important;
        margin: 0 !important;
    }
}

/* ── MOBILE ≤1000px ── */
@media (max-width: 1000px) {
    #header-outer #top .container > .row,
    #header-outer #top .container .row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 0 16px !important;
        width: 100% !important;
    }
    #header-outer .col.span_3 {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #header-outer #logo {
        display: inline-flex !important;
        align-items: center !important;
        max-width: 52px !important;
    }
    #header-outer #logo img {
        max-width: 48px !important;
        height: auto !important;
    }
    #header-outer .col.span_9.col_last {
        flex: 1 1 auto !important;
        width: auto !important;
        float: none !important;
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    /* Unfold the visible mobile-header wrapper: pill UL becomes a flex item of .span_9 */
    #header-outer .col.span_9.col_last > .nectar-mobile-only.mobile-header,
    #header-outer .col.span_9.col_last > .nectar-mobile-only.mobile-header > .inner {
        display: contents !important;
    }
    /* Hide the desktop NAV (Salient ships both) */
    #header-outer .col.span_9.col_last > nav {
        display: none !important;
    }
    /* Order on mobile: MENU pill (1) → auto-margin pushes cart+burger right */
    #header-outer .col.span_9.col_last ul#menu-salient-architect-top-menu,
    #header-outer .col.span_9.col_last .mobile-header ul.sf-menu {
        order: 1 !important;
        margin: 0 !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        list-style: none !important;
    }
    #header-outer .col.span_9.col_last > #nena-cart-icon-portal {
        order: 2 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    #header-outer .col.span_9.col_last > .slide-out-widget-area-toggle,
    #header-outer .col.span_9.col_last > .slide-out-widget-area-toggle.mobile-icon {
        order: 3 !important;
        margin: 0 !important;
        position: static !important;
        flex-shrink: 0 !important;
    }
    /* Compact pill on mobile */
    html body #header-outer[data-has-menu] .mobile-header ul.sf-menu li.menu-item-6064 > a,
    html body #header-outer #menu-item-6064 > a {
        padding: 8px 18px !important;
    }
    html body #header-outer[data-has-menu] .mobile-header ul.sf-menu li.menu-item-6064 > a > .menu-title-text,
    html body #header-outer #menu-item-6064 > a > .menu-title-text {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
    /* Reset the v18g pill-shift paddings */
    html body #header-outer .mobile-header #menu-salient-architect-top-menu {
        padding: 0 !important;
    }
}

/* ── XS ≤380px ── */
@media (max-width: 380px) {
    #header-outer #logo { max-width: 44px !important; }
    #header-outer #logo img { max-width: 40px !important; }
    html body #header-outer #menu-item-6064 > a {
        padding: 7px 14px !important;
    }
    html body #header-outer #menu-item-6064 > a > .menu-title-text {
        font-size: 10px !important;
        letter-spacing: 0.06em !important;
    }
    #header-outer #top .container > .row { gap: 8px !important; padding: 0 12px !important; }
}

/* ── Visual harmony for cart/burger sizes ── */
#header-outer #nena-cart-icon-portal .nena-cart-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
}
@media (max-width: 1000px) {
    #header-outer #nena-cart-icon-portal .nena-cart-icon {
        width: 36px !important;
        height: 36px !important;
    }
}

/* v19b — enforce margin-right:auto on the pill UL so flex pushes cart+burger right */
@media (max-width: 1000px) {
    html body #header-outer[data-has-menu] .col.span_9.col_last .mobile-header ul.sf-menu,
    html body #header-outer[data-has-menu] .col.span_9.col_last ul#menu-salient-architect-top-menu,
    html body #header-outer .col.span_9.col_last .mobile-header > .inner > ul {
        margin: 0 auto 0 0 !important;
        margin-right: auto !important;
    }
}
@media (min-width: 1001px) {
    html body #header-outer[data-has-menu] .col.span_9.col_last nav > ul.sf-menu:not(.buttons) {
        margin: 0 auto 0 0 !important;
        margin-right: auto !important;
    }
}

/* v19c — ditch display:contents, use flex-grow on wrapper so pill sticks next to logo */

@media (min-width: 1001px) {
    /* Desktop: keep nav as flex spacer taking all free space */
    html body #header-outer .col.span_9.col_last > nav {
        display: flex !important;
        align-items: center !important;
        flex-grow: 1 !important;
        order: 1 !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    html body #header-outer .col.span_9.col_last > nav > ul.sf-menu:not(.buttons) {
        order: 1 !important;
        margin: 0 !important;
    }
    html body #header-outer .col.span_9.col_last > nav > ul.buttons {
        order: 99 !important;
        margin-left: auto !important;
    }
    html body #header-outer .col.span_9.col_last > #nena-cart-icon-portal {
        order: 3 !important;
        margin-left: auto !important;
        margin-right: 12px !important;
    }
    /* But cart is OUTSIDE nav in DOM so nav can't reach it; we want:
       span_9 children: nav (flex-grow 1 → fills free space from after logo to right edge),
       cart-portal (flex:0), NAV contains pill which goes LEFT inside nav.
       But cart needs to be right of nav and left of burger — burger is INSIDE nav (ul.buttons).
       So: span_9 = [nav], inside nav = [pill, ul.buttons(burger)].
       cart-portal is between nav and… actually in DOM cart comes BEFORE nav.
       Let's instead: span_9 flex, cart-portal (order 2), nav grows (order 1), nav's pill left, burger right via margin-left auto. */
}

@media (max-width: 1000px) {
    /* Mobile: .mobile-header wraps pill — make it grow, strip display:contents */
    html body #header-outer .col.span_9.col_last > .nectar-mobile-only.mobile-header {
        display: flex !important;
        align-items: center !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    html body #header-outer .col.span_9.col_last > .nectar-mobile-only.mobile-header > .inner {
        display: flex !important;
        align-items: center !important;
        flex-grow: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body #header-outer .col.span_9.col_last .mobile-header ul.sf-menu {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    html body #header-outer .col.span_9.col_last > #nena-cart-icon-portal {
        order: 2 !important;
        flex-shrink: 0 !important;
        margin: 0 8px 0 0 !important;
    }
    html body #header-outer .col.span_9.col_last > .slide-out-widget-area-toggle {
        order: 3 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
}

/* v19f — correct desktop order inside nav:
   nav children now [ul.sf-menu (pill), #nena-cart-icon-portal, ul.buttons (burger)]
   Flex order 1, 2, 3. Pill gets margin-right:auto to push cart+burger right. */
@media (min-width: 1001px) {
    html body #header-outer .col.span_9.col_last > nav {
        display: flex !important;
        align-items: center !important;
        flex-grow: 1 !important;
        order: 1 !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    html body #header-outer .col.span_9.col_last > nav > ul.sf-menu:not(.buttons) {
        order: 1 !important;
        margin: 0 auto 0 0 !important;
        margin-right: auto !important;
        flex-grow: 0 !important;
    }
    html body #header-outer .col.span_9.col_last > nav > #nena-cart-icon-portal {
        order: 2 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    html body #header-outer .col.span_9.col_last > nav > ul.buttons.sf-menu {
        order: 3 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }
    /* Make sure nothing else interferes with our cart placement */
    html body #header-outer .col.span_9.col_last > #nena-cart-icon-portal {
        display: none !important;  /* Any leftover portal mounted at span_9 level — hide */
    }
}

/* ============================================================
   HEADER LAYOUT v20 (2026-04-23) — move MENU pill to the RIGHT group
   [logo] .................... [MENU pill][cart][burger]
   Unified across desktop and mobile.
   ============================================================ */

/* Remove the "push pill to logo" spacer — everything clumps right now */
@media (min-width: 1001px) {
    html body #header-outer .col.span_9.col_last {
        justify-content: flex-end !important;
    }
    /* nav takes only its own content width, not the full free space */
    html body #header-outer .col.span_9.col_last > nav {
        flex-grow: 0 !important;
        margin-left: auto !important;
    }
    /* Drop margin-right: auto on the pill — it was pushing cart+burger right */
    html body #header-outer .col.span_9.col_last > nav > ul.sf-menu:not(.buttons) {
        margin: 0 !important;
    }
    /* Ensure proper gap between right-group items */
    html body #header-outer .col.span_9.col_last > nav {
        gap: 10px !important;
    }
}

@media (max-width: 1000px) {
    html body #header-outer .col.span_9.col_last {
        justify-content: flex-end !important;
    }
    html body #header-outer .col.span_9.col_last > .nectar-mobile-only.mobile-header {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    html body #header-outer .col.span_9.col_last .mobile-header ul.sf-menu,
    html body #header-outer .col.span_9.col_last ul#menu-salient-architect-top-menu {
        margin: 0 !important;
    }
}

/* ================================================================
   TRANSPARENT HEADER on /menu/ (shop + product_cat archives)
   body.nena-transparent-header is set via nena-menu.php body_class.
   #header-outer is position:fixed — only bg + spacer need overriding.
   ================================================================ */

/* 1. Remove the 90px header spacer so content starts at absolute top */
body.nena-transparent-header #header-space {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* 2. Make the fixed header transparent */
body.nena-transparent-header #header-outer {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* On scroll Salient may add inline background via JS — fade in dark overlay */
body.nena-transparent-header.nena-header-scrolled #header-outer {
    background: rgba(15, 8, 5, 0.82) !important;
    transition: background 0.3s ease !important;
}

/* 3. Hero needs padding-top to clear the fixed header (height ~90px + breathing room) */
body.nena-transparent-header .nena-hero {
    padding-top: 128px !important;
}

@media (max-width: 900px) {
    body.nena-transparent-header .nena-hero {
        padding-top: 80px !important;
    }
}

/* 4. MENU nav pill: inverted on red — white bg, red text */
body.nena-transparent-header #header-outer nav a[href$="/menu/"],
body.nena-transparent-header #header-outer nav a[href="/menu/"] {
    background: #ffffff !important;
    color: #FA3434 !important;
    border-radius: 4px !important;
}

body.nena-transparent-header #header-outer nav a[href$="/menu/"]:hover,
body.nena-transparent-header #header-outer nav a[href="/menu/"]:hover {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #FA3434 !important;
}

/* Other nav links white on red */
body.nena-transparent-header #header-outer .sf-menu > li > a {
    color: #ffffff !important;
}

body.nena-transparent-header #header-outer .sf-menu > li > a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 5. Cart icon: white border + white icon, count: white bg red text */
body.nena-transparent-header #nena-cart-icon {
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
}

body.nena-transparent-header #nena-cart-icon svg path,
body.nena-transparent-header #nena-cart-icon svg circle,
body.nena-transparent-header #nena-cart-icon svg rect,
body.nena-transparent-header #nena-cart-icon svg line {
    stroke: #ffffff !important;
}

body.nena-transparent-header #nena-cart-icon .nena-cart-icon__count {
    background: #ffffff !important;
    color: #FA3434 !important;
}

/* 6. Burger (slide_out_area_toggle) lines white */
body.nena-transparent-header .slide_out_area_toggle .lines-button > span,
body.nena-transparent-header .slide_out_area_toggle .lines-button::before,
body.nena-transparent-header .slide_out_area_toggle .lines-button::after {
    background-color: #ffffff !important;
}

/* 7. When slideshow is disabled — mirrors split-mode layout exactly */
body.post-type-archive-product .nena-hero--no-slideshow,
body.nena-menu-archive .nena-hero--no-slideshow {
    padding: 80px 40px 60px !important;
}

.nena-hero.nena-hero--no-slideshow .nena-hero__inner {
    display: flex !important;
    align-items: center !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

.nena-hero.nena-hero--no-slideshow .nena-hero__content {
    flex: 1 1 60% !important;
    min-width: 0 !important;
}

@media (max-width: 900px) {
    body.post-type-archive-product .nena-hero--no-slideshow,
    body.nena-menu-archive .nena-hero--no-slideshow {
        padding: 60px 24px 48px !important;
    }
    .nena-hero.nena-hero--no-slideshow .nena-hero__inner {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .nena-hero.nena-hero--no-slideshow .nena-hero__content {
        flex: 1 1 auto !important;
    }
}

/* ========================================================
   HERO VIDEO BACKGROUND
   ======================================================== */

.nena-hero {
    position: relative;
    overflow: hidden;
}

.nena-hero__video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.nena-hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
}

.nena-hero__video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(250, 52, 52, 0.40);
    z-index: 1;
}

.nena-hero.nena-hero--has-video .nena-hero__inner,
.nena-hero.nena-hero--has-video .nena-hero__content,
.nena-hero.nena-hero--has-video .nena-hero__slideshow {
    position: relative;
    z-index: 2;
}

.nena-hero.nena-hero--has-video.nena-grain::after {
    z-index: 1 !important;
}

@media (max-width: 768px) {
    .nena-hero.nena-hero--has-video .nena-hero__video-bg {
        background-image: var(--hero-poster, none);
        background-size: cover;
        background-position: center center;
    }
}

/* loc cards on red bg / coming-soon — force white text */
.nena-bg-red .nena-loc__name,
.nena-loc--soon .nena-loc__name {
    color: #ffffff !important;
}

.nena-bg-red .nena-loc__area,
.nena-loc--soon .nena-loc__area {
    color: rgba(255,255,255,0.65) !important;
}

/* ============================================================
   HERO BACKGROUND — per-page video / image / solid
   ============================================================ */

.nena-hero {
    position: relative;
    overflow: hidden;
}

.nena-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Image bg — CSS vars switch desktop/mobile */
.nena-hero__bg--image {
    background-image: var(--hero-bg-desktop);
    background-size: cover;
    background-position: center center;
}

@media (max-width: 768px) {
    .nena-hero__bg--image {
        background-image: var(--hero-bg-mobile);
    }
}

/* Video bg */
.nena-hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
}

.nena-hero__video--desktop { display: block; }

@media (max-width: 768px) {
    .nena-hero__video--desktop { display: none; }
}

.nena-hero__video--mobile { display: none; }

@media (max-width: 768px) {
    .nena-hero__video--mobile { display: block; }

    /* poster fallback when no mobile video element is in DOM */
    .nena-hero__bg--video:not(:has(.nena-hero__video--mobile)) {
        background-image: var(--hero-poster, none);
        background-size: cover;
        background-position: center center;
    }
}

/* Red overlay */
.nena-hero__overlay {
    position: absolute;
    inset: 0;
    background: #FA3434;
    z-index: 1;
    pointer-events: none;
}

/* Content above background */
.nena-hero .nena-hero__inner,
.nena-hero .nena-container,
.nena-hero .nena-hero__content,
.nena-hero .nena-hero__num,
.nena-hero .nena-hero__slideshow {
    position: relative;
    z-index: 2;
}

/* Full-viewport height when video */
.nena-hero.nena-hero--has-video {
    min-height: 100vh;
}

@media (max-width: 900px) {
    .nena-hero.nena-hero--has-video {
        min-height: 600px;
    }
}

/* Tall image hero */
.nena-hero.nena-hero--has-image {
    min-height: 80vh;
}


/* ============================================================
   ABOUT PAGE COMPONENTS
   ============================================================ */

/* Section --alt: off-white background separates adjacent white sections */
.nena-section--alt {
    background: #FAFAF8 !important;
}

/* Gap override for 2-col story/work sections */
.nena-about-gap {
    gap: 60px !important;
}

/* Story + work image */
.nena-about-image-wrap {
    min-height: 280px;
    display: flex;
    align-items: center;
}
.nena-about-image {
    border-radius: 24px;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Prose: story text paragraphs */
.nena-prose p {
    font-size: 16px;
    line-height: 1.75;
    opacity: .75;
    margin: 0 0 16px;
}
.nena-prose p:last-child { margin-bottom: 0; }

/* ── Pillar card (What Makes Us Different) ── */
.nena-pillar {
    padding: 24px 16px;
}
.nena-pillar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--nena-red);
}
.nena-pillar__icon svg {
    width: 48px;
    height: 48px;
}
.nena-pillar__title {
    font-family: var(--nena-font-display);
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}
.nena-pillar__bullets p {
    margin: 6px 0;
    font-size: 14px;
    opacity: .7;
    line-height: 1.5;
}

/* ── Checklist (How We Work) ── */
.nena-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nena-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: 16px;
    line-height: 1.5;
}
.nena-checklist li:last-child { border-bottom: none; }
.nena-checklist__bullet {
    color: var(--nena-red);
    font-size: 10px;
    margin-top: 5px;
    flex-shrink: 0;
}

/* ── Stat (Our Numbers) ── */
.nena-stat {
    text-align: center;
    padding: 16px;
}
.nena-stat__value {
    font-family: var(--nena-font-display);
    font-weight: 900;
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 1;
    color: var(--nena-red);
}
.nena-stat__label {
    font-family: var(--nena-font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 12px;
    opacity: .6;
}

/* ── Build with NENA card ── */
.nena-build {
    background: #FAFAF8;
    border-radius: 24px;
    padding: 40px 48px;
}
.nena-build__head {
    margin-bottom: 36px;
}
.nena-build__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.nena-build__pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    flex: 1;
    min-width: 280px;
}
.nena-build__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.nena-build__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--nena-red);
}
.nena-build__icon svg {
    width: 38px;
    height: 38px;
}
.nena-build__pillar p {
    font-family: var(--nena-font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    opacity: .8;
}
.nena-build__cta {
    flex-shrink: 0;
}

/* ── Button variants used on About page ── */
.nena-btn--outline-dark {
    background: transparent;
    color: var(--nena-black);
    border: 2px solid var(--nena-black);
}
.nena-btn--outline-dark:hover {
    background: var(--nena-black);
    color: var(--nena-white);
}

/* ── Mobile: About page overrides ── */
@media (max-width: 900px) {

    /* 2-col grid keeps 2 columns on mobile for About sections */
    .nena-about-page .nena-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* 2-col story/work: stack on mobile */
    .nena-about-page .nena-about-gap {
        gap: 32px !important;
    }

    .nena-build {
        padding: 28px 24px;
    }
    .nena-build__body {
        flex-direction: column;
        align-items: stretch;
    }
    .nena-build__pillars {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .nena-build__cta {
        align-self: flex-start;
    }
}

/* ========================================================
   LOCATION CARD — 3 ORDER CHANNELS (2026-04-26)
   ======================================================== */

.nena-loc__cta {
    margin-top: auto;
    padding-top: 16px;
}

/* === Row 1: Primary (WhatsApp + Directions) === */
.nena-loc__cta-row--primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.nena-loc__cta-row--single {
    grid-template-columns: 1fr;
}

/* WhatsApp button — красная пилюля с бейджем -20% */
.nena-loc-btn--whatsapp {
    background: #FA3434;
    color: #fff;
    border: 0;
    padding: 12px 14px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    transition: background 0.15s ease, transform 0.15s ease;
    line-height: 1;
}
.nena-loc-btn--whatsapp:hover {
    background: #E62929;
    transform: translateY(-1px);
    color: #fff;
}
.nena-loc-btn--whatsapp .nena-loc-btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* -20% бейдж в правом верхнем углу */
.nena-loc-btn__badge {
    position: absolute;
    top: -6px;
    right: -4px;
    background: #fff;
    color: #FA3434;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
    padding: 3px 7px;
    border-radius: 999px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    border: 1.5px solid #FA3434;
    z-index: 2;
    pointer-events: none;
}

/* Directions button — outline чёрная */
.nena-loc-btn--directions {
    background: transparent;
    color: #111;
    border: 1.5px solid #111;
    padding: 10.5px 14px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
}
.nena-loc-btn--directions:hover {
    background: #111;
    color: #fff;
    transform: translateY(-1px);
}

/* === Hint между рядами === */
.nena-loc__cta-hint {
    margin: 14px 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(0,0,0,0.4);
    text-align: center;
}

/* === Row 2: Apps (Grab + GoJek) === */
.nena-loc__cta-row--apps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.nena-loc-btn--app {
    background: #F5F5F5;
    color: #111;
    border: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease;
    line-height: 1;
}
.nena-loc-btn--app:hover {
    background: #EAEAEA;
}

/* Иконка-марка приложения */
.nena-loc-btn__app-mark {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    flex-shrink: 0;
}
.nena-loc-btn__app-mark--grab {
    background: #00B14F;
    border-radius: 4px;
}
.nena-loc-btn__app-mark--gojek {
    background: #00AA13;
    border-radius: 50%;
    font-size: 8px;
}

/* === Mobile === */
@media (max-width: 480px) {
    .nena-loc__cta-row--primary,
    .nena-loc__cta-row--apps {
        gap: 6px;
    }
    .nena-loc-btn--whatsapp,
    .nena-loc-btn--directions {
        padding: 11px 10px;
        font-size: 10.5px;
    }
    .nena-loc-btn__badge {
        font-size: 9px;
        padding: 2px 6px;
        top: -5px;
        right: -3px;
    }
    .nena-loc-btn--app {
        padding: 9px 10px;
        font-size: 10.5px;
    }
}

/* ========================================================
   FRANCHISE — Two cards side by side (Formats / Models)
   ======================================================== */

.nena-grid.nena-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

@media (max-width: 768px) {
    .nena-grid.nena-grid-2 {
        grid-template-columns: 1fr !important;
        max-width: 480px;
        gap: 20px;
    }
}