section.ngr{
  --ngr-bg:#0e0d0b; --ngr-ink:#f3eee6; --ngr-mute:#a59d90; --ngr-line:rgba(255,255,255,.14); --ngr-acc:#c49a5a;
  --ngr-w:clamp(210px,22vw,280px);
  display:block!important; position:relative; width:100%; box-sizing:border-box;
  background:var(--ngr-bg); color:var(--ngr-ink); padding:clamp(56px,8vw,110px) 0; overflow:hidden;
  opacity:1!important; visibility:visible!important;
}
section.ngr *,section.ngr *::before,section.ngr *::after{ box-sizing:border-box; }
section.ngr .ngr__wrap{ max-width:1320px; margin:0 auto; padding:0 24px; }
section.ngr .ngr__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 36px; }
section.ngr .ngr__kicker{ display:inline-block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ngr-acc); margin:0 0 12px; }
section.ngr .ngr__title{ font-size:clamp(28px,3.6vw,46px); line-height:1.1; margin:0 0 12px; color:var(--ngr-ink); }
section.ngr .ngr__sub{ max-width:560px; margin:0; color:var(--ngr-mute); font-size:16px; line-height:1.6; }
section.ngr .ngr__nav{ display:flex; gap:10px; flex-shrink:0; }

/* hard reset — WoodMart styles every <button> */
section.ngr button.ngr__arrow,section.ngr button.ngr__lb-arrow,section.ngr button.ngr__lb-x{
  all:unset; box-sizing:border-box; width:48px; height:48px; min-height:0; border-radius:50%;
  border:1px solid var(--ngr-line); color:var(--ngr-ink); display:grid; place-items:center; cursor:pointer; transition:.25s;
}
section.ngr button.ngr__arrow:hover:not(:disabled),section.ngr button.ngr__lb-arrow:hover{ background:var(--ngr-acc); border-color:var(--ngr-acc); color:#111; }
section.ngr button.ngr__arrow:disabled{ opacity:.3; cursor:default; }
section.ngr svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
section.ngr .ngr__play svg{ fill:currentColor; stroke:none; width:16px; height:16px; }
section.ngr[dir="rtl"] .ngr__arrow svg,section.ngr[dir="rtl"] .ngr__lb-arrow svg{ transform:scaleX(-1); }

section.ngr .ngr__track{
  display:flex; flex-wrap:nowrap; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; padding:8px 2px; overscroll-behavior-x:contain;
}
section.ngr .ngr__track::-webkit-scrollbar{ display:none; }
section.ngr .ngr__card{
  position:relative; display:block; flex:0 0 var(--ngr-w); width:var(--ngr-w); aspect-ratio:9/16; height:auto;
  border-radius:18px; overflow:hidden; scroll-snap-align:start; border:1px solid var(--ngr-line);
  background:linear-gradient(160deg,#2a241c,#14120f); cursor:pointer; color:#fff; transition:transform .35s,border-color .35s;
}
@supports not (aspect-ratio:1){ section.ngr .ngr__card{ height:calc(var(--ngr-w)*16/9); } }
section.ngr .ngr__card:hover,section.ngr .ngr__card:focus-visible{ transform:translateY(-6px); border-color:var(--ngr-acc); outline:none; }
section.ngr .ngr__vid{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none; object-fit:cover; display:block; margin:0; }
section.ngr .ngr__shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 100%); pointer-events:none; }
section.ngr .ngr__play{ position:absolute; top:14px; inset-inline-end:14px; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.45); display:grid; place-items:center; transition:.3s; }
section.ngr .ngr__card:hover .ngr__play{ background:var(--ngr-acc); color:#111; }
section.ngr .ngr__meta{ position:absolute; inset-inline:16px; bottom:16px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
section.ngr .ngr__tag{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ngr-acc); }
section.ngr .ngr__cap{ font-size:17px; font-weight:600; line-height:1.3; color:#fff; }

section.ngr .ngr__foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; }
section.ngr .ngr__dots{ display:flex; gap:6px; flex:1; max-width:320px; }
section.ngr .ngr__dots i{ flex:1; height:2px; background:var(--ngr-line); border-radius:2px; transition:.3s; }
section.ngr .ngr__dots i.on{ background:var(--ngr-acc); }
section.ngr .ngr__cta{ color:var(--ngr-ink); text-decoration:none; border-bottom:1px solid var(--ngr-acc); padding-bottom:3px; font-size:15px; }
section.ngr .ngr__cta:hover{ color:var(--ngr-acc); }

section.ngr .ngr__lb{ position:fixed; inset:0; z-index:999999; background:rgba(8,7,6,.94); display:none; align-items:center; justify-content:center; gap:20px; padding:20px; }
section.ngr .ngr__lb.is-open{ display:flex; }
section.ngr .ngr__lb-fig{ position:relative; height:min(86vh,860px); aspect-ratio:9/16; max-width:calc(100vw - 40px); }
section.ngr .ngr__lb-vid{ width:100%; height:100%; object-fit:cover; border-radius:16px; background:#000; display:block; }
section.ngr .ngr__lb-cap{ position:absolute; inset-inline:0; bottom:-34px; text-align:center; color:var(--ngr-ink); font-size:15px; }
section.ngr button.ngr__lb-x{ position:absolute; top:18px; inset-inline-end:22px; width:44px; height:44px; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:28px; line-height:1; }
section.ngr button.ngr__lb-arrow{ color:#fff; border-color:rgba(255,255,255,.25); }
html.ngr-lock,html.ngr-lock body{ overflow:hidden; }

@media (max-width:767px){
  section.ngr{ --ngr-w:62vw; }
  section.ngr .ngr__head{ flex-direction:column; align-items:flex-start; }
  section.ngr .ngr__nav{ display:none; }
  section.ngr .ngr__track{ margin:0 -24px; padding-inline:24px; scroll-padding-inline:24px; }
  section.ngr .ngr__lb{ padding:0; }
  section.ngr button.ngr__lb-arrow{ position:absolute; bottom:22px; }
  section.ngr button.ngr__lb-arrow[data-dir="-1"]{ inset-inline-start:22px; }
  section.ngr button.ngr__lb-arrow[data-dir="1"]{ inset-inline-end:22px; }
  section.ngr .ngr__lb-fig{ height:100vh; max-width:100vw; }
  section.ngr .ngr__lb-vid{ border-radius:0; }
  section.ngr .ngr__lb-cap{ bottom:90px; }
}
