/* ================================================================
   Ventoro Mega Nav — vmn.css  v1.2
   Black / White brand  ·  font-weight 400 throughout
   Background: black  ·  Text: white
   Fully responsive: desktop mega-panel → tablet 2-col → mobile drawer
   ================================================================ */

/* ── Custom Properties ─────────────────────────────────────────── */
:root {
  --vmn-bg:         #ffffff;
  --vmn-bg2:        #ffffff;
  --vmn-bg3:        #ebebeb;
  --vmn-bg4:        #dedede;
  --vmn-text:       #000000;
  --vmn-muted:      #888888;
  --vmn-border:     #000;
  --vmn-border2:    rgba(0,0,0,.20);
  --vmn-cta-bg:     #000000;
  --vmn-cta-text:   #ffffff;
  --vmn-nav-h:      65px;
  --vmn-panel-max:  1360px;
  --vmn-ease:       cubic-bezier(.25,.46,.45,.94);
  --vmn-weave:
    repeating-linear-gradient( 45deg,rgba(0,0,0,.022) 0,rgba(0,0,0,.022) 1px,transparent 1px,transparent 9px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.022) 0,rgba(0,0,0,.022) 1px,transparent 1px,transparent 9px);
}

/* ── Reset (scoped to .vmn-nav) ────────────────────────────────── */
.vmn-nav *,
.vmn-nav *::before,
.vmn-nav *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*.vmn-nav {min-width:1000px; }*/
.vmn-nav a { text-decoration: none; }

/* prevent body scroll when mobile drawer open */
body.vmn-no-scroll { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   NAV BAR
══════════════════════════════════════════════════════════════════ */
.vmn-nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  font-weight: 600;
  transition: all 0.3s ease-in-out 0s;
  width: 66.7%;
}

#ventoro_header_bottom_logo{
  width:25%;
}

.vmn-bar {
  /*display: flex;
  align-items: center;*/
  height: var(--vmn-nav-h);
  padding: 0 28px;
  gap: 0;
  max-width: var(--vmn-panel-max);
  margin: 0 auto;
  transition: all 0.3s ease-in-out 0s;
}

/* ── Logo ──────────────────────────────────────────────────────── */
.vmn-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 36px;
  font-size: 14px;
  /*letter-spacing: .07em;
  text-transform: uppercase;*/
  color: var(--vmn-text);
}
.vmn-logo-img {
  max-height: 34px;
  width: auto;
  display: block;
}

/* ── Brand pills ───────────────────────────────────────────────── */
.vmn-brands {
  display: flex;
  align-items: stretch;
  list-style: none;
  height: 100%;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.vmn-brands::-webkit-scrollbar { display: none; }

.vmn-brand-pill {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--vmn-ease), border-color .18s var(--vmn-ease);
  user-select: none;
  flex-shrink: 0;
}
.vmn-brand-pill:hover,
.vmn-brand-pill.is-active {
  color: var(--vmn-text);
  border-bottom-color: var(--vmn-text);
}
.vmn-brand-pill:focus-visible {
  outline: 2px solid var(--vmn-text);
  outline-offset: -2px;
}

/* ── Bar right ─────────────────────────────────────────────────── */
.vmn-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 16px;
}

.vmn-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--vmn-muted);
  cursor: pointer;
  padding: 6px;
  transition: color .18s;
  flex-shrink: 0;
}
.vmn-icon-btn:hover { color: var(--vmn-text); }

.vmn-cart-btn {
  display: none;
  align-items: center;
  gap: 4px;
  background: var(--vmn-cta-bg);
  color: var(--vmn-cta-text);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
  white-space: nowrap;
  transition: opacity .18s;
  flex-shrink: 0;
}

.vmn-search-btn {
  display: none;
}
.vmn-cart-btn:hover { opacity: .82; }

/* ── Hamburger ─────────────────────────────────────────────────── */
.vmn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 6px;
  flex-shrink: 0;
  margin-left: 10px;
}
.vmn-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--vmn-bg);
  transition: transform .25s var(--vmn-ease), opacity .2s;
}
.vmn-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vmn-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.vmn-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════
   MEGA PANEL
══════════════════════════════════════════════════════════════════ */
.vmn-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--vmn-bg);
  border-top: 1px solid var(--vmn-text);
  border-bottom: 1px solid var(--vmn-text);
  border-left: 1px solid var(--vmn-text);
  border-right: 1px solid var(--vmn-text);
  box-shadow: 0 12px 48px rgba(0,0,0,.10);
  /* cap height so it never escapes the viewport */
  border-radius: 4px;
  max-height: calc(100vh - var(--vmn-nav-h) - 8px);
  overflow: hidden;
  /* closed state */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s var(--vmn-ease), transform .22s var(--vmn-ease);
  pointer-events: none;

}
.vmn-panel[hidden] { display: block !important; } /* keep in DOM for transition */
.vmn-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.vmn-panel-inner {
  display: grid;
  grid-template-columns: 220px 1fr 280px;  /* series | generations | featured */
  /* fill available height up to the panel cap, never force a minimum */
  height: calc(100vh - var(--vmn-nav-h) - 8px);
  max-height: 520px;   /* comfortable cap on tall screens */
  max-width: var(--vmn-panel-max);
  margin: 0 auto;
}

/* ── Series column ─────────────────────────────────────────────── */
.vmn-series-col {
  border-right: 1px solid var(--vmn-border);
  padding: 16px 0;
  background: var(--vmn-bg2);
  overflow-y: auto;
  min-height: 0;
}

.vmn-panel-loading {
  padding: 20px;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--vmn-muted);
  text-transform: uppercase;
}

.vmn-series-item,
.vmn-series-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--vmn-text);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .14s var(--vmn-ease), border-color .14s;
  user-select: none;
}
.vmn-series-item:hover,
.vmn-series-all:hover {
  background: var(--vmn-text);
  color: var(--vmn-bg);
  border-left-color: var(--vmn-text);
}
.vmn-series-item.is-active {
  background: var(--vmn-text);
  color: var(--vmn-bg);
  border-left: none ;
}


/* when an active item exists, other items use different hover */
.vmn-series-item.is-not-active:hover {
  background-color: var(--vmn-border2);
  border-left: none;
  color: var(--vmn-text);
}

.vmn-series-item:focus-visible,
.vmn-series-all:focus-visible { outline: 2px solid var(--vmn-text); outline-offset: -2px; }

/* dot */
.vmn-series-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--vmn-border2);
  flex-shrink: 0;
  transition: background .14s;
}
.vmn-series-item:hover    .vmn-series-dot,
.vmn-series-item.is-active .vmn-series-dot { background: var(--vmn-bg); }

.vmn-series-item.is-not-active:hover .vmn-series-dot { background: var(--vmn-text); }

/* name — grows to fill */
.vmn-series-name { flex: 1; }

/* count badge */
.vmn-series-count {
  font-size: 9px;
  color: var(--vmn-muted);
  flex-shrink: 0;
}

/* forward arrow — visible when collapsed */
.vmn-series-arrow {
  font-size: 16px;
  color: var(--vmn-text);
  flex-shrink: 0;
  line-height: 1;
  transition: color .14s;
}
.vmn-series-item:hover .vmn-series-arrow { color: var(--vmn-text); }

/* locked state — other items dimmed and non-interactive */
.vmn-series-col.vmn-series-locked .vmn-series-item:not(.is-active) {
  opacity: .35;
  pointer-events: none;
  cursor: default;
}

/* ── Generations grid ──────────────────────────────────────────── */
.vmn-gen-col {
  padding: 20px 22px;
  overflow-y: auto;
  min-height: 0;
  /* scrollable block container — inner grid handles the item layout */
}

.vmn-gen-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  align-content: start;
}

.vmn-gen-item {
  display: block;
  padding: 10px 12px;
  background: var(--vmn-bg2);
  border: 1px solid var(--vmn-text);
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--vmn-text);
  transition: background .14s var(--vmn-ease), border-color .14s;
}
.vmn-gen-item:hover {
  background: var(--vmn-text);
  color: var(--vmn-bg);
  border-color: var(--vmn-border2);
}
.vmn-gen-item:focus-visible { outline: 2px solid var(--vmn-text); outline-offset: -2px; }

.vmn-gen-years {
  display: block;
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--vmn-muted);
  margin-top: 3px;
}

.vmn-series-item:hover .vmn-gen-years{color: var(--vmn-bg) !important;}


.vmn-gen-all {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--vmn-text);
  border-radius: 4px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--vmn-text);
  transition: color .14s, border-color .14s;
}
.vmn-gen-all:hover {
  background: var(--vmn-text);
  color: var(--vmn-bg);
  border-color: var(--vmn-text);
}

/* ── Featured product column ───────────────────────────────────── */
.vmn-featured-col {
  border-left: 1px solid var(--vmn-border);
  padding: 0px 20px 20px 20px;
  background: var(--vmn-bg2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.vmn-featured-label {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--vmn-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* the inner div is what jQuery fades in/out */
#vmn-featured-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vmn-featured-link {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vmn-border);
  border-radius: 6px;
  overflow: hidden;
  color: var(--vmn-text);
  transition: border-color .18s;
  flex: 1;
}
.vmn-featured-link:hover { border-color: var(--vmn-border2); }

.vmn-featured-img-wrap {
  width: 100%;
  height: clamp(90px, 18vh, 140px);
  overflow: hidden;
  position: relative;
  background: var(--vmn-bg4);
}
.vmn-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--vmn-ease);
}
.vmn-featured-link:hover .vmn-featured-img { transform: scale(1.04); }

.vmn-featured-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vmn-muted);
}

.vmn-featured-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vmn-featured-badge {
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--vmn-cta-bg);
  color: var(--vmn-cta-text);
  display: inline-block;
  padding-top: 0px;
  padding-left: 7px;
  padding-bottom: 0px;
  padding-right: 7px;
  align-self: flex-start;
  font-weight: normal !important;
  border-radius: 4px;
}

.vmn-featured-name {
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--vmn-text);
  line-height: 1.25;
}

.vmn-featured-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.vmn-featured-price {
  font-size: 18px;
  letter-spacing: .03em;
  color: var(--vmn-text);
}
.vmn-featured-price-sale {
  font-size: 18px;
  letter-spacing: .03em;
  color: var(--vmn-text);
}
.vmn-featured-price-old {
  font-size: 18px;
  color: var(--vmn-muted);
  text-decoration: line-through;
}

/* CTA button below the card */
.vmn-featured-cta {
  display: block;
  margin-top: 10px;
  background: var(--vmn-cta-bg);
  color: var(--vmn-cta-text);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px 14px;
  text-align: center;
  transition: opacity .18s;
  flex-shrink: 0;
  border-radius: 4px;
}
.vmn-featured-cta:hover { opacity: .85; color:#fff; }

.vmn-featured-empty {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--vmn-muted);
  text-transform: uppercase;
  padding: 20px 0;
}

/* ── Stagger animation ─────────────────────────────────────────── */
@keyframes vmn-in {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
.vmn-series-item, .vmn-gen-item, .vmn-gen-all, .vmn-series-all {
  animation: vmn-in .2s var(--vmn-ease) both;
}
.vmn-stagger-1 { animation-delay:.02s }
.vmn-stagger-2 { animation-delay:.05s }
.vmn-stagger-3 { animation-delay:.08s }
.vmn-stagger-4 { animation-delay:.11s }
.vmn-stagger-5 { animation-delay:.14s }
.vmn-stagger-6 { animation-delay:.17s }
.vmn-stagger-7 { animation-delay:.20s }
.vmn-stagger-8 { animation-delay:.23s }

/* ══════════════════════════════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════════════════════════════ */
.vmn-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s var(--vmn-ease);
  pointer-events: none;
}
.vmn-search-overlay[hidden] { display: none; }
.vmn-search-overlay.is-open { opacity: 1; pointer-events: auto; }

.vmn-search-inner {
  width: min(580px, 90vw);
  position: relative;
}

.vmn-search-inner form,
.vmn-search-inner .search-form {
  display: flex;
}
.vmn-search-inner input[type="search"],
.vmn-search-inner input[type="text"] {
  flex: 1;
  background: var(--vmn-bg2);
  border: 1px solid var(--vmn-border2);
  border-right: none;
  padding: 14px 18px;
  font-size: 16px;
  color: var(--vmn-text);
  outline: none;
  border-radius: 0;
}
.vmn-search-inner input[type="submit"],
.vmn-search-inner button[type="submit"] {
  background: var(--vmn-cta-bg);
  color: var(--vmn-cta-text);
  border: none;
  padding: 14px 22px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}
.vmn-search-close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: var(--vmn-muted);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .18s;
}
.vmn-search-close:hover { color: var(--vmn-text); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE DRAWER  —  3-panel slide system
   Panel 0: brand list  |  Panel 1: series  |  Panel 2: gens + featured
   JS controls .is-current / .is-prev on each panel.
   Panels slide left/right via translateX; overflow is clipped by the
   viewport wrapper so only one panel is ever visible.
══════════════════════════════════════════════════════════════════ */

/* ── Outer drawer shell ────────────────────────────────────────── */
.vmn-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 9300;
  background: var(--vmn-bg);
  display: flex;
  flex-direction: column;
  /* slide in from right */
  transform: translateX(100%);
  transition: transform .3s var(--vmn-ease);
}
.vmn-mobile-drawer[hidden] { display: flex !important; } /* keep for transition */
.vmn-mobile-drawer.is-open { transform: translateX(0); }

/* ── Sticky header ─────────────────────────────────────────────── */
.vmn-mob-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--vmn-border);
  background: var(--vmn-bg);
  position: relative;
}

.vmn-mob-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--vmn-muted);
  cursor: pointer;
  padding: 6px 4px;
  transition: color .15s;
  flex-shrink: 0;
}
.vmn-mob-back[hidden] { display: none !important; }
.vmn-mob-back:hover { color: var(--vmn-text); }

.vmn-mob-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vmn-text);
}

.vmn-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--vmn-muted);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: color .15s;
}
.vmn-mobile-close:hover { color: var(--vmn-text); }

/* ── Viewport clips panels — only 1 panel visible at a time ─────  */
.vmn-mob-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;   /* critical — clips the off-screen panels */
}

/* ── Individual panel ──────────────────────────────────────────── */
.vmn-mob-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--vmn-bg);
  /* default: hidden to the right */
  transform: translateX(100%);
  transition: transform .28s var(--vmn-ease);
  visibility: hidden;       /* keep hidden from AT when off-screen */
}
.vmn-mob-panel.is-current {
  transform: translateX(0);
  visibility: visible;
}
.vmn-mob-panel.is-prev {
  transform: translateX(-30%);  /* slide slightly left — depth cue */
  visibility: hidden;
}

/* ── Panel 0: brand list ───────────────────────────────────────── */
.vmn-mob-list {
  list-style: none;
  padding-left:0px;
}
.vmn-mob-list > li {
  border-bottom: 1px solid var(--vmn-border);
}

/* each item: a button (drill in) + a small "all" link */
.vmn-mob-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  color: var(--vmn-text);
  cursor: pointer;
  text-align: left;
  transition: background .14s;
}
.vmn-mob-item:hover,
.vmn-mob-item:active { background: var(--vmn-bg2); }

.vmn-mob-item--brand .vmn-mob-item-label {
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vmn-mob-item--series .vmn-mob-item-label {
  font-size: 15px;
  letter-spacing: .04em;
}
.vmn-mob-item--all {
  display: block;
  padding: 12px 20px 16px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vmn-muted);
  transition: color .14s;
}
.vmn-mob-item--all:hover { color: var(--vmn-text); }

.vmn-mob-chevron {
  flex-shrink: 0;
  color: var(--vmn-muted);
}

/* small "all products →" link shown below the drill-in button */
.vmn-mob-item-link {
  display: block;
  padding: 0 20px 12px 20px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vmn-muted);
  transition: color .14s;
}
.vmn-mob-item-link:hover { color: var(--vmn-text); }

/* search inside drawer panel 0 */
.vmn-mob-search-row {
  display:none;
  padding: 14px 16px;
  border-bottom: 1px solid var(--vmn-border);
}
.vmn-mob-search-row form,
.vmn-mob-search-row .search-form { display: flex; }
.vmn-mob-search-row input[type="search"],
.vmn-mob-search-row input[type="text"] {
  flex: 1;
  background: var(--vmn-bg2);
  border: 1px solid var(--vmn-border2);
  border-right: none;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--vmn-text);
  outline: none;
  border-radius: 0;
}
.vmn-mob-search-row input[type="submit"],
.vmn-mob-search-row button[type="submit"] {
  background: var(--vmn-cta-bg);
  color: var(--vmn-cta-text);
  border: none;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* drawer footer — cart button */
.vmn-mob-footer {
  padding: 16px 16px 20px;
  /*border-top: 1px solid var(--vmn-border);*/
}
.vmn-mob-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--vmn-cta-bg);
  color: var(--vmn-cta-text);
  padding: 13px 20px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: opacity .18s;
}
.vmn-mob-cart:hover { opacity: .85; }

/* ── Panel 2: generation grid ──────────────────────────────────── */
.vmn-mob-gen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 16px;
}

.vmn-mob-gen-item {
  display: block;
  padding: 12px 14px;
  background: var(--vmn-bg2);
  border: 1px solid var(--vmn-border);
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--vmn-text);
  transition: background .14s, border-color .14s;
}
.vmn-mob-gen-item:hover,
.vmn-mob-gen-item:active {
  background: var(--vmn-bg3);
  border-color: var(--vmn-border2);
}

.vmn-mob-gen-years {
  display: block;
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--vmn-muted);
  margin-top: 3px;
}

.vmn-mob-gen-all {
  grid-column: 1 / -1;   /* full width */
  display: block;
  padding: 11px 14px;
  border: 1px dashed var(--vmn-border2);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vmn-muted);
  transition: color .14s, border-color .14s;
}
.vmn-mob-gen-all:hover { color: var(--vmn-text); border-color: var(--vmn-text); }

/* ── Panel 2: featured product ─────────────────────────────────── */
.vmn-mob-featured {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vmn-mob-feat-card {
  display: flex;
  flex-direction: row;    /* horizontal on mobile — image left, info right */
  border: 1px solid var(--vmn-border);
  border-radius: 2px;
  overflow: hidden;
  color: var(--vmn-text);
  background: var(--vmn-bg2);
  margin-bottom: 10px;
  transition: border-color .18s;
}
.vmn-mob-feat-card:hover { border-color: var(--vmn-border2); }

.vmn-mob-feat-img-wrap {
  width: 100px;
  flex-shrink: 0;
  background: var(--vmn-bg4);
  overflow: hidden;
  position: relative;
}
.vmn-mob-feat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--vmn-ease);
}
.vmn-mob-feat-card:hover .vmn-mob-feat-img { transform: scale(1.05); }
.vmn-mob-feat-img-ph {
  width: 100%;
  height: 100%;
  min-height: 90px;
  background: var(--vmn-bg4);
}

/* reuse desktop .vmn-featured-body, .vmn-featured-badge etc. */

/* ── Panel 0: extra WP menu sections ──────────────────────────── */
.vmn-mob-extra-section {
  /*border-top: 1px solid var(--vmn-border);*/
}

/* collapsible header button */
.vmn-mob-extra-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  background: none;
  border: none;
  color: var(--vmn-text);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .14s;
}
.vmn-mob-extra-toggle:hover { background: var(--vmn-bg2); }
.vmn-mob-extra-toggle[aria-expanded="true"] { background: var(--vmn-bg2); }

.vmn-mob-extra-chevron {
  flex-shrink: 0;
  color: var(--vmn-muted);
  transition: transform .22s var(--vmn-ease);
}
.vmn-mob-extra-toggle[aria-expanded="true"] .vmn-mob-extra-chevron {
  transform: rotate(180deg);
}

/* collapsible body */
.vmn-mob-extra-body[hidden] { display: none; }
.vmn-mob-extra-body { overflow: hidden; }

/* menu items inside — works with default WP nav_menu output */
.vmn-mob-extra-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vmn-mob-extra-list li {
  border-top: 1px solid var(--vmn-border);
}
.vmn-mob-extra-list li a {
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--vmn-text);
  transition: background .12s, color .12s;
}
.vmn-mob-extra-list li a:hover {
  background: var(--vmn-bg2);
}
/* sub-menu items — depth 2 */
.vmn-mob-extra-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vmn-mob-extra-list .sub-menu li a {
  padding-left: 36px;
  font-size: 12px;
  color: var(--vmn-muted);
}
.vmn-mob-extra-list .sub-menu li a:hover { color: var(--vmn-text); }
/* depth 3 */
.vmn-mob-extra-list .sub-menu .sub-menu li a {
  padding-left: 52px;
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════════════ */

/* ── 1200px: hide featured column ─────────────────────────────── */
@media (max-width: 1200px) {
  .vmn-panel-inner { grid-template-columns: 200px 1fr; }
  .vmn-featured-col { display: none; }
  /*.vmn-hamburger { display: flex; }*/
}

/* ── 1024px: tighten gen grid ─────────────────────────────────── */
@media (max-width: 1024px) {
  .vmn-gen-col { padding: 16px; }

  .vmn-bar { padding: 0 20px; }
}

/* ── 900px: switch to hamburger ───────────────────────────────── */
@media (max-width: 900px) {
  .vmn-brands    { display: none; }
  .vmn-panel     { display: none !important; }
  .vmn-bar       { padding: 0 16px; }
}

/* ── 480px: single-column gen grid ───────────────────────────── */
@media (max-width: 480px) {
  .vmn-mob-gen-grid { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; }
  .vmn-mob-feat-img-wrap { width: 80px; }
}