/* Niko Autumn Offer — mega-menu campaign banner.
   Injected into the existing [nl_newlook_header_menu] output via do_shortcode_tag,
   without editing the menu snippet. Namespaced .nlnaoPromo / .nlnaoMPromo only.
   Uses the snippet's own tokens (--nl-padX, --nl-ease) so spacing and easing match.

   This is a sales banner rather than a quiet card: deep chocolate ground, the
   official Niko logo reversed out, a stated offer and a clear CTA. The existing
   sage system is left alone and still owns the footer strip directly below. */

.nlnaoPromo{
  --choc:#573A2B; --choc-d:#3E2920; --cream:#F6F1EC; --sand:#E7C9A9;
  display:grid;
  grid-template-columns:210px minmax(0,1fr) auto;
  align-items:stretch;
  gap:0;
  margin:0 var(--nl-padX,32px) 18px;
  background:var(--choc-d);
  text-decoration:none;
  color:#fff;
  flex-shrink:0;
  overflow:hidden;
  transition:background .22s var(--nl-ease,ease);
}
.nlnaoPromo:hover{ background:#33211A; }
.nlnaoPromo:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }

.nlnaoPromo .nlnaoPromo__img{
  /* Explicit height: with height:100% in an auto-sized grid row the image falls back
     to its own portrait aspect ratio (210 x 1087/768 = 297px) and clips the mega-menu
     navigation panels above. A fixed height pins the whole banner instead. */
  display:block; width:210px; height:180px;
  object-fit:cover; object-position:center 38%; background:#2A1B15; flex:none;
}
.nlnaoPromo__body{
  /* Height is driven from here. The mega-menu canvas above has a fixed height, so a
     taller banner clips the navigation panels: keep the total around 180px. */
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:20px 28px; min-width:0;
}
.nlnaoPromo .nlnaoPromo__logo{ display:block; width:152px; height:auto; margin:0 0 2px; }
.nlnaoPromo__kicker{
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--sand);
}
.nlnaoPromo__title{
  font-size:20px; font-weight:300; line-height:1.25; letter-spacing:-.01em; color:#fff;
}
.nlnaoPromo__title em{ font-style:normal; color:var(--sand); }
.nlnaoPromo__desc{
  font-size:13px; line-height:1.55; color:rgba(255,255,255,.72);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nlnaoPromo__aside{
  display:flex; align-items:center; padding:20px 28px 20px 0; flex:none;
}
.nlnaoPromo__cta{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:14px 26px; background:#fff; color:var(--choc-d);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:background .22s var(--nl-ease,ease), color .22s var(--nl-ease,ease);
}
.nlnaoPromo:hover .nlnaoPromo__cta{ background:var(--sand); color:var(--choc-d); }

@media (max-width:1180px){
  .nlnaoPromo{ grid-template-columns:160px minmax(0,1fr) auto; }
  .nlnaoPromo .nlnaoPromo__img{ width:160px; height:166px; }
  .nlnaoPromo__title{ font-size:19px; }
  .nlnaoPromo__body{ padding:18px 22px; }
  .nlnaoPromo__aside{ padding:18px 22px 18px 0; }
}
/* The mega-menu switches to its mobile drill-down at 980px (menu snippet, line ~1507). */
@media (max-width:980px){ .nlnaoPromo{ display:none; } }

/* ── Mobile drill-down card, above the showroom CTA ── */
.nlnaoMPromo{
  --choc:#573A2B; --choc-d:#3E2920; --sand:#E7C9A9;
  display:flex; align-items:stretch; gap:0;
  /* The mobile drill-down view is a flex COLUMN, so without flex:none this card is
     shrunk by the browser to a 29px sliver when the list above fills the view. */
  flex:none;
  margin:10px 20px 0;
  background:var(--choc-d);
  text-decoration:none; color:#fff; overflow:hidden;
}
.nlnaoMPromo:active{ background:#33211A; }
.nlnaoMPromo .nlnaoMPromo__img{
  display:block; width:96px; height:132px; flex:none;
  object-fit:cover; object-position:center 38%; background:#2A1B15;
}
.nlnaoMPromo__text{ display:flex; flex-direction:column; gap:5px; min-width:0; padding:14px 16px; }
.nlnaoMPromo .nlnaoMPromo__logo{ display:block; width:120px; height:auto; margin-bottom:2px; }
.nlnaoMPromo__text strong{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sand);
}
.nlnaoMPromo__line{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.82); }
.nlnaoMPromo__line b{ color:#fff; font-weight:600; }
.nlnaoMPromo__text em{
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; margin-top:3px;
}
@media (min-width:981px){ .nlnaoMPromo{ display:none; } }