/* Pizzeria Mario Napoletano: concept site in the manner of Da Pietro 1955 (Memesi).
   Palette shifted from slate/brown to basil/terracotta; structure, spacing and motion follow the reference. */
:root {
  --primary: #64765E;   /* reference slate #84929E -> basil sage */
  --secondary: #8A5A45; /* reference brown #7B6C62 -> terracotta brown */
  --accent: #36433A;    /* reference #4B4D64 -> deep green */
  --light: #F4F0EA;     /* reference #F3F0ED */
  --white: #FFFFFF;
  --pad: 50px;
  --gap: 100px;
  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --logo: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --script: 'Sacramento', 'Brush Script MT', cursive;
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--light); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--light); color: var(--primary);
  font: 400 18px/24px var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.background-dark :focus-visible, .site-header :focus-visible { outline-color: currentColor; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 5000; background: var(--accent); color: var(--light); padding: 10px 16px; font-size: 14px; }
.skip-link:focus { top: 16px; }

/* ---------- page transition (Elementor fade-out, 500ms, primary colour) ---------- */
.page-transition { display: none; }
.js .page-transition { display: block; position: fixed; inset: 0; z-index: 4000; background: var(--primary); pointer-events: none; }

/* ---------- shared type ---------- */
.subtitle { font-size: 18px; line-height: 20px; font-weight: 600; text-transform: uppercase; }
.text-button { font-size: 18px; line-height: 20px; font-weight: 600; text-transform: uppercase; }
.text-button u, .text-button a u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.text-button a, .text-button .link-btn { font-weight: 600; text-transform: uppercase; }
.text-button a:hover u, .text-button .link-btn:hover u { text-decoration-color: transparent; }
.text-button u { transition: text-decoration-color .3s ease-in-out; }
.link-btn { font: inherit; text-transform: inherit; }
.theme-primary { color: var(--primary); }
.brown { color: var(--secondary); }

/* full-width "+ LABEL +" button */
.full-button {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 16px 40px; background: var(--primary); color: var(--light);
  font: 600 16px/16px var(--font); text-transform: uppercase; letter-spacing: 0;
  transition: background-color .3s, color .3s;
}
.full-button::before, .full-button::after { content: "+"; font-weight: 600; }
.full-button:hover, .full-button:focus-visible { background: var(--light); color: var(--primary); }
.full-button--light { background: var(--light); color: var(--secondary); }
.full-button--light:hover, .full-button--light:focus-visible { background: var(--secondary); color: var(--light); }
.full-button--onbrown { background: var(--light); color: var(--secondary); margin-top: 20px; }
.full-button--onbrown:hover, .full-button--onbrown:focus-visible { background: var(--accent); color: var(--light); }

/* captions  /like this/ */
figcaption, .fig-caption {
  position: absolute; left: 25px; bottom: 25px; z-index: 12; max-width: 300px;
  color: var(--light); font-size: 14px; line-height: 16px; font-style: italic; text-align: left;
}
.full-image figcaption { left: 50px; bottom: 50px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 30px var(--pad) 0; color: var(--light); pointer-events: none;
  transition: color .3s ease-in-out;
}
.site-header > * { pointer-events: auto; }
.site-header.is-primary { color: var(--primary); }
.site-header.is-brown { color: var(--secondary); }
.logo { display: inline-flex; flex-direction: column; align-items: center; color: inherit; line-height: 1; transition: color .3s ease-in-out; }
.logo__name { font-family: var(--logo); font-size: 38px; line-height: 34px; letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; }
.logo__sub { margin-top: 9px; font-size: 10.5px; line-height: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; padding-left: .3em; }
.menu-container {
  width: 50vw; display: flex; align-items: center; justify-content: space-between;
  border-bottom: .5px solid currentColor; transition: border-color .3s ease-in-out;
}
.nav { display: flex; justify-content: space-between; flex: 0 0 72%; padding: 0 2.2% 0 2.2%; }
.nav__link { font-size: 16px; line-height: 18px; font-weight: 300; padding: 5px 0; transition: opacity .3s, color .3s; }
.nav__link.is-active { font-weight: 600; }
.nav__link:hover { opacity: .65; }
.nav-reserve { font-size: 16px; line-height: 18px; font-weight: 300; padding: 5px 0; margin-left: auto; transition: opacity .3s; }
.nav-reserve:hover { opacity: .65; }
.lang { display: inline-flex; gap: 10px; margin-left: 12px; }
.lang__btn { font-size: 14px; line-height: 18px; font-weight: 300; padding: 5px 0; }
.lang__btn[aria-pressed="true"] { font-weight: 600; }
.lang__btn:hover { opacity: .65; }
.menu-toggle { display: none; font-style: italic; font-size: 16px; line-height: 18px; padding: 8px 0; }
.header-bg {
  position: fixed; left: 0; right: 0; top: 0; height: 150px; z-index: 899; pointer-events: none;
  opacity: 0; transition: opacity .5s ease-in-out;
  background-image: linear-gradient(180deg, rgba(40,36,32,.42) 0%, rgba(40,36,32,.18) 50%, rgba(40,36,32,0) 100%);
}
.header-bg.bg-dark { opacity: 1; }

/* ---------- intro (fixed overlay, desktop) ---------- */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: var(--light); text-align: center;
}
.intro__text { width: 80%; max-width: 912px; margin: 0 0 80px; font-size: 28px; line-height: 34px; color: var(--primary); }
.intro__arrow { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); color: var(--primary); padding: 8px; }
.js .intro__arrow { opacity: 0; }

/* text reveal (word stagger) */
.text-reveal .w { display: inline-block; will-change: transform, opacity; }
.js .text-reveal:not(.is-split) { opacity: 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: var(--vh); }
.full-image { position: relative; overflow: hidden; }
.full-image img { width: 100%; height: 100vh; height: var(--vh); object-fit: cover; object-position: center; }
.hero .full-image img { object-position: center 22%; }
.full-image::before, .image-reveal::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 33%; z-index: 10; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%); mix-blend-mode: multiply;
}
.js .full-image::before, .js .image-reveal::before { opacity: 0; transition: opacity .9s ease-in-out .8s; }
.js .full-image.revealed::before, .js .image-reveal.revealed::before { opacity: 1; }
.hero__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: var(--pad);
}
.hero__statement { display: none; }
.hero-mobile-cta { display: none; }

/* ---------- statement ---------- */
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: var(--pad); }
.statement__text { margin: 50px 0; font-size: 32px; line-height: 36px; color: var(--primary); }

/* ---------- 3 columns: text + two portraits ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: var(--pad) var(--pad) 100px; align-items: start; }
.text-col { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.text-col p:not(.subtitle) { max-width: 380px; }
.image-reveal { position: relative; overflow: hidden; width: 100%; }
.image-reveal img { width: 100%; height: 80vh; object-fit: cover; object-position: center; }
.ir--bottom img { object-position: center bottom; }
.ir--mural img { object-position: 62% center; }
.js .image-reveal img { transform: scale(1.02); clip-path: inset(10% 10% 10% 10%); transition: clip-path 1.2s ease-out, transform 1.2s ease-out; }
.js .image-reveal.visible img { transform: scale(1); clip-path: inset(0 0 0 0); }

/* ---------- split: two 120vh images ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.full-image.tall img { height: 120vh; }

/* ---------- menu teaser (white) ---------- */
.flavours { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 100px var(--pad); background: var(--white); }
.flavours__left { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 25px; }
.flavours__copy { width: 60%; display: flex; flex-direction: column; gap: 25px; }
.flavours .full-button { align-self: stretch; }
.video-reveal { position: relative; overflow: hidden; width: 100%; aspect-ratio: 9 / 16; }
.vreel { position: absolute; inset: 0; }
.vreel__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vreel__frame + .vreel__frame { opacity: 0; }
.js .vreel { transform: scale(1.02); clip-path: inset(5% 5% 5% 5%); transition: clip-path 1.5s ease-out, transform 1.5s ease-out; }
.js .video-reveal.visible .vreel { transform: scale(1); clip-path: inset(0 0 0 0); }
.video-reveal::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 5; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); mix-blend-mode: multiply;
}
.vreel__cap { opacity: 0; transition: opacity .8s ease; }
.vreel__cap.is-on { opacity: 1; }

/* ---------- gallery (reference: Restaurant & Cocktail bar page) ---------- */
.gallery__intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 100px var(--pad) 50px; }
.gallery__lead img { height: 90vh; }
.gallery__text { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 25px; }
.gallery__statement { font-size: 32px; line-height: 36px; color: var(--primary); }
.gallery__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 50px var(--pad) 100px; }

/* ---------- story + reviews ---------- */
.story { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 100px var(--pad); color: var(--secondary); }
.story__main { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.story__side { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.story__title { font-size: 32px; line-height: 36px; max-width: 850px; }
.reviews { padding-top: 25px; border-top: .5px solid currentColor; }
.review--big p { font-size: 32px; line-height: 36px; max-width: 850px; }
.review__by { margin-top: 18px; font-size: 14px; line-height: 16px; font-style: italic; }
.review p { font-style: normal; }
.stars { letter-spacing: .12em; margin-right: 4px; }

/* ---------- footer ---------- */
.site-footer { background: var(--light); color: var(--secondary); padding: 0 var(--pad) 50px; }
.footer__top { display: flex; flex-direction: column; align-items: center; gap: 25px; }
.footer__mark { margin-top: 100px; position: relative; width: 270px; text-align: center; }
.footer__drawing { display: block; width: 270px; height: auto; }
.footer__script { font-family: var(--script); font-size: 34px; line-height: 1; margin-top: -10px; }
.footer__tagline { text-align: center; font-style: italic; font-size: 18px; line-height: 19px; max-width: 1300px; }
.footer__info {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 25px;
  border-top: .5px solid currentColor; border-bottom: .5px solid currentColor; padding: 25px 0; text-align: center;
}
.footer__h { font-size: 18px; line-height: 24px; text-transform: uppercase; margin-bottom: 14px; }
.footer__col p + p { margin-top: 4px; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 2px; }
.footer__muted { font-size: 15px; }
.text-button--small { margin-top: 10px !important; font-size: 16px; }
.footer__bar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 10px 0;
  border-bottom: .5px solid currentColor; font-size: 14px; line-height: 16px; text-transform: uppercase;
}
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.footer__row--end { justify-content: flex-end; }
.footer__row a, .footer__row .link-btn { font-size: 14px; line-height: 16px; text-transform: uppercase; }
.footer__row a:hover, .footer__row .link-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.lang--footer { margin: 0; gap: 10px; }
.lang--footer .lang__btn { font-size: 14px; line-height: 16px; padding: 0; }
.footer__legal { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-top: 15px; font-size: 14px; line-height: 16px; }
.footer__credit { text-align: right; }
.footer__credit a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- popups ---------- */
.popup { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; }
.popup[hidden] { display: none; }
.popup__overlay { position: absolute; inset: 0; background: rgba(54, 67, 58, .58); }
.popup--menu { align-items: flex-end; }
.popup--menu .popup__panel {
  position: relative; width: 100vw; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--secondary); color: var(--light); box-shadow: 2px 8px 23px 3px rgba(0,0,0,.2);
  padding: 50px var(--pad) 60px;
}
.popup.is-open .popup__overlay { animation: popFade .6s ease both; }
.popup--menu.is-open .popup__panel { animation: slideInUp 1.2s ease both; }
.popup--menu.is-closing .popup__panel { animation: slideOutDown .7s ease-in both; }
.popup.is-closing .popup__overlay { animation: popFade .7s ease reverse both; }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes slideOutDown { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 100%, 0); } }
@keyframes slideInDown { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes slideOutUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } }
@keyframes popFade { from { opacity: 0; } to { opacity: 1; } }
.popup__close { position: absolute; top: 50px; right: var(--pad); font-style: italic; font-weight: 600; font-size: 16px; line-height: 18px; color: inherit; z-index: 2; }
.popup__close:hover { text-decoration: underline; text-underline-offset: 3px; }
.menu-sheet__head { display: grid; grid-template-columns: 1fr 2fr; align-items: end; padding-bottom: 25px; margin-bottom: 50px; border-bottom: .5px solid rgba(244,240,234,.6); }
.menu-sheet__title { font-size: 32px; line-height: 36px; }
.menu-sheet__note { font-size: 14px; line-height: 16px; font-style: italic; }
.menu-group { display: grid; grid-template-columns: 1fr 2fr; align-items: start; margin-bottom: 70px; }
.menu-group__title { font-size: 18px; line-height: 20px; font-weight: 600; text-transform: uppercase; }
.menu-subgroup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 30px; }
.dish__name { font-size: 18px; line-height: 22px; font-weight: 500; }
.dish__new { display: inline-block; margin-left: 8px; padding: 2px 6px 1px; border: .5px solid currentColor; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px; }
.dish__note, .dish__price { margin-top: 5px; font-size: 14px; line-height: 16px; }
.dish__note { opacity: .85; }
.dish__price { font-weight: 600; }

.popup--nav { align-items: flex-start; }
.popup--nav .popup__panel {
  position: relative; width: 100vw; background: var(--light); color: var(--primary);
  border: .5px solid var(--primary); box-shadow: 2px 8px 23px 3px rgba(0,0,0,.2); padding: 30px;
}
.popup--nav.is-open .popup__panel { animation: slideInDown .6s ease both; }
.popup--nav.is-closing .popup__panel { animation: slideOutUp .5s ease-in both; }
.popup__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.popup--nav .popup__close { position: static; padding: 8px 0; }
.logo--dark { color: var(--primary); }
.mnav { display: flex; flex-direction: column; gap: 15px; }
.mnav a { font-size: 16px; line-height: 18px; padding: 5px 0; }
.mnav__rule { border: 0; border-top: 1px solid var(--primary); margin: 25px 0; }
.mnav__reserve { font-style: italic; font-weight: 600; font-size: 16px; }
.lang--mobile { margin: 0; gap: 14px; }
.lang--mobile .lang__btn { font-size: 16px; }

/* ---------- concept toast ---------- */
.toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 1500; max-width: 360px;
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 18px;
  background: var(--accent); color: var(--light); font-size: 14px; line-height: 19px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease;
}
.toast.is-on { opacity: 1; transform: none; }
.toast[hidden] { display: none; }
.toast__close { font-size: 20px; line-height: 18px; padding: 0 2px; opacity: .8; }
.toast__close:hover { opacity: 1; }

/* ---------- fade-in (Elementor "fadeIn", animated-slow = 2s) ---------- */
.js .fade-in { opacity: 0; }
.js .fade-in.is-in { opacity: 1; transition: opacity 2s ease; }

/* ================= responsive ================= */
@media (max-width: 1366px) {
  :root { --gap: 50px; }
  .grid3 .image-reveal img, .gallery__row .image-reveal img { height: 70vh; }
  .flavours__copy { width: 80%; }
}
@media (max-width: 1200px) {
  :root { --pad: 30px; --gap: 30px; }
  .statement__text, .gallery__statement, .story__title, .review--big p { font-size: 28px; line-height: 32px; }
  .statement__text { margin: 20px 0; }
  .grid3 { padding: 30px 30px 50px; }
  .grid3 .image-reveal img, .gallery__row .image-reveal img { height: 60vh; }
  .flavours { padding: 50px 30px; }
  .flavours__copy { width: 100%; }
  .gallery__intro { padding: 50px 30px 30px; }
  .gallery__lead img { height: 100vh; }
  .gallery__row { padding: 30px 30px 50px; }
  .story { grid-template-columns: repeat(2, 1fr); padding: 50px 30px; }
  .story__main { grid-column: span 1; }
  .full-image figcaption { left: 30px; bottom: 30px; }
  figcaption, .fig-caption { left: 30px; bottom: 30px; }
  .menu-container { width: 60%; }
}
/* tablet + mobile: reference swaps to the compact header and drops the intro overlay */
@media (max-width: 1024px) {
  .statement__text, .gallery__statement, .story__title, .review--big p { font-size: 24px; line-height: 28px; }
  .menu-container { display: none; }
  .menu-toggle { display: block; }
  .site-header { padding: 30px var(--pad) 0; align-items: center; }
  .logo__name { font-size: 30px; line-height: 27px; }
  .logo__sub { font-size: 9px; margin-top: 7px; }
  .header-bg { height: 130px; background-image: none; }
  .header-bg.bg-white { opacity: 1; background-image: linear-gradient(180deg, rgba(244,240,234,1) 0%, rgba(244,240,234,.96) 30%, rgba(244,240,234,.82) 55%, rgba(244,240,234,.3) 80%, rgba(244,240,234,0) 100%); }
  .header-bg.bg-dark { opacity: 1; background-image: linear-gradient(180deg, rgba(50,47,45,.98) 0%, rgba(54,54,54,0) 80%); }
  .js .intro { display: none; }
  .hero__statement {
    display: block; position: absolute; top: 0; left: 0; z-index: 11; width: 80%; margin: 150px 10% 0;
    font-size: 28px; line-height: 34px; color: var(--light); text-align: center; text-shadow: 0 1px 18px rgba(0,0,0,.35);
  }
  .footer__info { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .footer__bar { grid-template-columns: 1fr; gap: 6px; justify-items: center; }
  .footer__row, .footer__row--end { justify-content: center; }
  .menu-sheet__head, .menu-group { grid-template-columns: 1fr; gap: 20px; }
  .menu-group__title { margin-bottom: 4px; }
}
@media (max-width: 767px) {
  body { font-size: 17px; line-height: 23px; }
  .hero__statement { width: 85%; margin: 120px 0 0 30px; font-size: 24px; line-height: 28px; text-align: left; }
  .hero__bar { display: none; }
  .hero-mobile-cta { display: block; }
  .hero .full-image img { object-position: center; }
  .full-image figcaption { max-width: 240px; }
  .statement, .grid3, .split, .flavours, .gallery__intro, .gallery__row, .story { grid-template-columns: 1fr; }
  .statement { padding: 30px; gap: 0; }
  .statement > div { display: none; }
  .grid3 { gap: 30px; }
  .grid3 .text-col { order: 99; }
  .grid3 .image-reveal img, .gallery__row .image-reveal img { height: 70vh; }
  .full-image.tall img { height: 100vh; height: var(--vh); }
  .flavours { gap: 40px; }
  .flavours__left { gap: 30px; }
  .gallery__lead img { height: 75vh; }
  .story { gap: 30px; }
  .reviews { margin-top: 10px; }
  .footer__info { grid-template-columns: 1fr; }
  .footer__legal { grid-template-columns: 1fr; text-align: center; }
  .footer__credit { text-align: center; }
  .footer__mark { margin-top: 70px; }
  .menu-subgroup { grid-template-columns: 1fr; gap: 24px; }
  .popup--menu .popup__panel { padding: 30px 24px 40px; max-height: 94vh; }
  .popup__close { top: 30px; right: 24px; }
  .menu-sheet__head { padding-right: 60px; margin-bottom: 36px; }
  .menu-group { margin-bottom: 48px; }
  .toast { right: 16px; left: 16px; bottom: 16px; max-width: none; }
  .full-button { padding: 16px 24px; }
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .page-transition { display: none; }
  .js .fade-in, .js .intro__arrow, .js .text-reveal:not(.is-split) { opacity: 1; }
  .js .image-reveal img, .js .vreel { clip-path: none; transform: none; transition: none; }
  .js .full-image::before, .js .image-reveal::before { opacity: 1; transition: none; }
  .popup.is-open .popup__panel, .popup.is-open .popup__overlay, .popup.is-closing .popup__panel, .popup.is-closing .popup__overlay { animation: none; }
  .toast { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}
.popup--menu :focus-visible { outline-color: var(--light); }