/* ==========================================================================
   Snob Milano - nuova grafica 2026
   Caricato DOPO bootstrap.min.css e custom.css: sovrascrive senza toccarli.
   Palette: testo #141414, accento #8a7a52 / #c9b47a, scuro #0d0d0d,
   fondo card bianco con bordo #e2ded5. Jost (titoli/etichette) + Lato (testo).
   ========================================================================== */

:root {
    --ng-ink: #141414;
    --ng-gold: #8a7a52;
    --ng-gold-light: #c9b47a;
    --ng-dark: #0d0d0d;
    --ng-card: #ffffff;
    --ng-card-border: #e6e2d9;
    --ng-line: #e2ded5;
    --ng-muted: #555;
    --ng-jost: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    --ng-lato: 'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

html, body { height: auto; }

body.ng {
    margin: 0;
    padding-top: 0;               /* la vecchia navbar fissa chiedeva 115px */
    background: #fff;
    color: var(--ng-ink);
    font-family: var(--ng-lato);
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
body.ng > main, body.ng > .ng-main { flex: 1 0 auto; }

.ng a { color: inherit; text-decoration: none; }
.ng a:hover, .ng a:focus { color: var(--ng-gold); text-decoration: none; }
.ng img { max-width: 100%; }
/* custom.css imposta :focus bianco (invisibile su fondo bianco): focus visibile */
.ng a:focus-visible, .ng button:focus-visible, .ng input:focus-visible {
    outline: 2px solid var(--ng-gold);
    outline-offset: 2px;
}
.ng .overlay a:focus-visible { outline-color: var(--ng-gold-light); }

.ng h1, .ng h2, .ng h3, .ng h4, .ng h5 {
    font-family: var(--ng-jost);
    color: var(--ng-ink);
}

/* ---------- utility condivise ---------- */
.ng-wrap { max-width: 1360px; margin: 0 auto; box-sizing: border-box; }
.ng-page { padding: 56px 32px 96px; box-sizing: border-box; }
.ng-page > .ng-wrap { display: flex; flex-direction: column; gap: 40px; }

.ng-eyebrow {
    font-family: var(--ng-jost);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ng-gold);
}
.ng-h1 {
    margin: 0;
    font-family: var(--ng-jost);
    font-weight: 300;
    font-size: 40px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ng-ink);
    line-height: 1.15;
}
.ng-h1 .ng-code { font-weight: 400; color: var(--ng-gold); }
.ng-h2 {
    margin: 0;
    font-family: var(--ng-jost);
    font-weight: 300;
    font-size: 40px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ng-ink);
}
.ng-lead {
    margin: 0;
    font-family: var(--ng-lato);
    font-weight: 300;
    font-size: 15px;
    color: var(--ng-muted);
    max-width: 60ch;
}
.ng-note {
    margin: 0;
    font-family: var(--ng-jost);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #777;
    text-align: center;
}

.ng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 30px;
    font-family: var(--ng-jost);
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    border: 1px solid var(--ng-ink);
    background: transparent;
    color: var(--ng-ink);
    border-radius: 0;
    cursor: pointer;
    transition: background .3s, color .3s, border-color .3s;
}
.ng .ng-btn:hover, .ng .ng-btn:focus { background: var(--ng-ink); color: #fff; }
.ng .ng-btn-solid { background: #fff; color: var(--ng-dark); border-color: #fff; }
.ng .ng-btn-solid:hover, .ng .ng-btn-solid:focus { background: transparent; color: #fff; }
.ng .ng-btn-light { color: #fff; border-color: #fff; }
.ng .ng-btn-light:hover, .ng .ng-btn-light:focus { background: #fff; color: var(--ng-dark); }
.ng .ng-btn-ink { background: var(--ng-ink); color: #fff; }
.ng .ng-btn-ink:hover, .ng .ng-btn-ink:focus { background: transparent; color: var(--ng-ink); }

.ng-link-arrow {
    font-family: var(--ng-jost);
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ng-ink);
}
.ng-link-arrow svg { transition: transform .4s ease; }
.ng-link-arrow:hover svg { transform: translateX(-4px); }

.ng-tag, .ng-pill {
    font-family: var(--ng-jost);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    border: 1px solid #d6d1c6;
    padding: 7px 12px;
    color: #444;
}

.ng-zeiss { display: inline-flex; align-items: center; cursor: pointer; }
.ng-zeiss img { height: 44px; width: auto; display: block; }

/* ---------- barra superiore ---------- */
/* margine laterale sul contenitore esterno, come tutte le altre sezioni: cosi' il logo
   resta allineato ai titoli anche sopra i 1360px di larghezza */
.ng-top { background: #fff; border-bottom: 1px solid var(--ng-line); padding: 0 32px; box-sizing: border-box; }
.ng-top .ng-wrap {
    padding: 18px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
}
.ng-brand { display: flex; flex-direction: column; gap: 2px; }
.ng-brand img { height: 34px; width: auto; display: block; margin-left: -2px; } /* il PNG ha ~8px di trasparente a sinistra */
.ng-brand span {
    font-family: var(--ng-lato);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--ng-muted);
}
.ng-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.ng-burger span { display: block; height: 1px; background: var(--ng-ink); transition: background .3s; }
.ng-burger:hover span, .ng-burger:focus span { background: var(--ng-gold); }

/* ---------- menu a tutto schermo (#myNav, aperto da openNav()) ---------- */
.ng .overlay {
    background: rgba(13, 13, 13, .96);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    z-index: 20000;
}
.ng .overlay-content {
    position: static;
    top: auto;
    margin: 0;
    padding: 72px 24px 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
}
.ng .overlay a,
.ng .overlay .nav-link {
    display: block;
    font-family: var(--ng-jost);
    font-weight: 300;
    font-size: 22px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #f1ede4;
    padding: 4px 8px;
    line-height: 1.3;
}
.ng .overlay a:hover, .ng .overlay a:focus, .ng .overlay a.active { color: var(--ng-gold-light); }
.ng .overlay .shop { color: #f1ede4 !important; }
.ng .overlay .shop:hover { color: var(--ng-gold-light) !important; }
.ng .overlay .closebtn {
    position: absolute;
    top: 22px;
    right: 28px;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ng-jost);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    letter-spacing: 0;
}

/* switch lingua dentro il menu (form set_language reale) */
.ng-lang { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.ng-lang .bandiere { float: none; padding: 0; font-size: 11px; }
.ng-lang form { margin: 0; }
.ng .overlay .ng-lang a,
.ng .overlay .bandiere a {
    display: inline-block;
    font-family: var(--ng-jost);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .2em;
    padding: 6px 8px;
    color: #8d887c;
    border-bottom: 1px solid transparent;
}
.ng .overlay .ng-lang a.on { color: #fff; border-bottom-color: #fff; }

/* ---------- footer ---------- */
.ng-foot {
    background: var(--ng-dark);
    color: #9a958a;
    padding: 56px 32px 36px;
    box-sizing: border-box;
    margin-top: auto;
}
.ng-foot .ng-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 40px;
    align-items: flex-start;
}
.ng-foot-brand { display: flex; flex-direction: column; gap: 14px; }
.ng-foot-brand img { height: 30px; width: auto; display: block; align-self: flex-start; margin-left: -2px; }
.ng-foot-brand span { font-family: var(--ng-lato); font-size: 12px; letter-spacing: .06em; }
.ng-social { display: flex; gap: 18px; align-items: center; }
.ng-social a {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #2c2c2c;
    color: #9a958a;
    transition: color .3s, border-color .3s;
}
.ng .ng-foot a:hover, .ng .ng-foot a:focus { color: #fff; }
.ng-social a:hover { border-color: #555; }
.ng-legal { display: flex; flex-direction: column; gap: 6px; font-family: var(--ng-lato); font-size: 12px; line-height: 1.6; }
.ng .ng-legal .ng-obdo { color: #2ab2a7; }

/* ---------- home: hero ---------- */
.ng-hero { display: flex; flex-wrap: wrap; background: var(--ng-dark); color: #fff; }
.ng-hero-video {
    flex: 0 0 33.333%;
    min-height: clamp(600px, calc(100vh - 88px), 900px); /* alto quasi quanto la finestra e largo un terzo della pagina: il video (9:16) resta ancorato in alto e si taglia solo sotto */
    position: relative; overflow: hidden;
}
.ng-hero-video video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 0; display: block; /* ancorato in alto: se non ci sta, si taglia sotto */
}
.ng-hero-video::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(13,13,13,0) 70%, rgba(13,13,13,.55) 100%);
    pointer-events: none;
}
.ng-hero-text {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    padding: 96px 8%;
    box-sizing: border-box;
}
.ng-hero-text .ng-eyebrow { color: var(--ng-gold-light); }
.ng-hero-logo { width: 420px; max-width: 80%; height: auto; display: block; }
.ng-hero-claim {
    margin: 0;
    font-family: var(--ng-jost);
    font-weight: 300;
    font-size: 30px;
    letter-spacing: .08em;
    line-height: 1.3;
    color: #f1ede4;
    max-width: 24ch;
}
.ng-hero-par {
    margin: 0;
    font-family: var(--ng-lato);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: #b9b4a8;
    max-width: 52ch;
}
.ng-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.ng-scroll-hint { display: inline-flex; margin-top: 12px; padding: 6px 12px; color: #9a958a; }
.ng .ng-scroll-hint:hover, .ng .ng-scroll-hint:focus { color: #fff; }
.ng-scroll-hint svg { display: block; animation: ng-scroll-bounce 1.8s ease-in-out infinite; }
@keyframes ng-scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .ng-scroll-hint svg { animation: none; } }

/* ---------- home: collezioni ---------- */
.ng-collections { padding: 88px 32px 40px; box-sizing: border-box; scroll-margin-top: 16px; }
.ng-collections .ng-wrap { display: flex; flex-direction: column; gap: 28px; }
.ng-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ng-tile { position: relative; display: block; overflow: hidden; background: #111; color: #fff; aspect-ratio: 1 / 1; min-height: 320px; }
.ng-tile-wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; min-height: 360px; }
.ng-tile img {
    position: absolute; top: 0; left: 0;
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}
.ng .ng-tile:hover, .ng .ng-tile:focus { color: #fff; }
.ng-tile:hover img, .ng-tile:focus img { transform: scale(1.04); }
.ng-tile-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); }
.ng-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 36px; display: flex; flex-direction: column; gap: 8px; }
.ng-tile-cap .ng-eyebrow { color: #fff; opacity: .75; }
.ng-tile-title { font-family: var(--ng-jost); font-weight: 400; font-size: 28px; letter-spacing: .16em; text-transform: uppercase; margin: 0; line-height: 1.15; color: #fff !important; }
.ng-tile-more { font-family: var(--ng-jost); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.ng-tile-more svg { transition: transform .4s ease; }
.ng-tile:hover .ng-tile-more svg { transform: translateX(6px); }
.ng-tile-badge {
    position: absolute; top: 22px; left: 22px;
    font-family: var(--ng-jost); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--ng-dark); background: #e8dcb6; padding: 7px 12px;
}

/* ---------- home: sicurezza e sport (SNOB Milano Lab) ---------- */
.ng-feature { padding: 40px 32px 24px; box-sizing: border-box; }
.ng-feature .ng-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 72px; }
.ng-feature-media {
    flex: 0 0 300px; max-width: 300px; min-width: 0;
    display: block; overflow: hidden; aspect-ratio: 1 / 1;
    background: #fff; border: 1px solid var(--ng-card-border);
}
.ng-feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.ng-feature-media:hover img { transform: scale(1.04); }
.ng-feature-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ng-feature h2 { margin: 0; font-family: var(--ng-jost); font-weight: 300; font-size: 32px; letter-spacing: .1em; text-transform: uppercase; color: var(--ng-ink); }
.ng-feature p { margin: 0; font-family: var(--ng-lato); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--ng-muted); max-width: 54ch; }
.ng-feature .ng-btn { margin-top: 12px; }

/* ---------- home: banda rivenditori ---------- */
.ng-band { padding: 48px 32px 96px; box-sizing: border-box; }
.ng-band .ng-wrap {
    border-top: 1px solid var(--ng-ink);
    border-bottom: 1px solid var(--ng-ink);
    padding: 44px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
}
.ng-band-text { display: flex; flex-direction: column; gap: 8px; }
.ng-band h2 { margin: 0; font-family: var(--ng-jost); font-weight: 300; font-size: 32px; letter-spacing: .1em; text-transform: uppercase; color: var(--ng-ink); }
.ng-band p { margin: 0; font-family: var(--ng-lato); font-size: 15px; color: var(--ng-muted); max-width: 56ch; }

.ng-alert { margin: 0; border-radius: 0; font-family: var(--ng-lato); }

/* ---------- testata pagine interne ---------- */
.ng-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 40px;
    border-bottom: 1px solid var(--ng-ink);
    padding-bottom: 26px;
}
.ng-head-text { display: flex; flex-direction: column; gap: 10px; }
.ng-head-side { display: flex; align-items: center; gap: 18px; }
.ng-head-media img { display: block; max-width: 100%; height: auto; }

.ng-crumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ng-crumb a { font-family: var(--ng-jost); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #777; }
.ng .ng-crumb a:hover { color: var(--ng-ink); }
.ng-crumb .ng-sep { color: #aaa; }

/* ---------- griglie di card (sezione, modello, correlati) ---------- */
.ng-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.ng-card { display: flex; flex-direction: column; gap: 12px; color: var(--ng-ink); }
.ng .ng-card:hover, .ng .ng-card:focus { color: var(--ng-ink); }
.ng-ph {
    background: var(--ng-card);
    border: 1px solid var(--ng-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ng-card .ng-ph { aspect-ratio: 4 / 3; }
.ng-ph img { width: 92%; height: auto; display: block; }
.ng-card img { transition: transform .7s ease; }
.ng-card:hover img, .ng-card:focus img { transform: scale(1.05); }
.ng-ph-empty { font-family: var(--ng-jost); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #999; padding: 12px; text-align: center; }
.ng-card-name { font-family: var(--ng-jost); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.ng-card-code { font-family: var(--ng-jost); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.ng-card-desc { font-family: var(--ng-lato); font-size: 13px; color: #666; line-height: 1.5; }
.ng-center { display: flex; justify-content: center; }

/* ---------- scheda prodotto ---------- */
.ng-product { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.ng-gallery { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ng-gallery-main { aspect-ratio: 3 / 2; }
.ng-gallery-main img { width: 94%; }
.ng-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ng-thumb { border: 1px solid var(--ng-card-border); background: #fff; padding: 6px; cursor: pointer; border-radius: 0; }
.ng-thumb.on { border-color: var(--ng-ink); }
.ng-thumb:focus { outline: 1px solid var(--ng-gold); outline-offset: 2px; }
.ng-thumb img { width: 100%; height: auto; display: block; }
.ng-info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.ng-info-head { display: flex; flex-direction: column; gap: 10px; }
.ng-code-line { margin: 0; font-family: var(--ng-jost); font-size: 16px; letter-spacing: .18em; text-transform: uppercase; color: #444; }
.ng-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ng-buy { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ng-buy .ng-zeiss img { height: 40px; }
.ng-spec-box { border-top: 1px solid var(--ng-ink); padding-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.ng-spec-box h2 { margin: 0; font-family: var(--ng-jost); font-weight: 400; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--ng-ink); }
.ng-spec { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 18px; font-size: 14px; line-height: 1.5; margin: 0; }
.ng-spec dt { margin: 0; font-family: var(--ng-jost); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #777; padding-top: 2px; }
.ng-spec dd { margin: 0; color: var(--ng-ink); }
.ng-prevnext { display: flex; justify-content: space-between; gap: 16px; }
.ng-related { border-top: 1px solid var(--ng-line); padding-top: 40px; display: flex; flex-direction: column; gap: 26px; }
.ng-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.ng-related-head h2 { margin: 0; font-family: var(--ng-jost); font-weight: 300; font-size: 24px; letter-spacing: .16em; text-transform: uppercase; color: var(--ng-ink); }
.ng-related-head a { font-family: var(--ng-jost); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }

/* modale lenti ZEISS (Bootstrap) in linea col nuovo stile */
.ng .modal-content { border-radius: 0; border: 0; }
.ng .modal-header { border-bottom: 1px solid var(--ng-line); }

/* ---------- rivenditori ---------- */
.ng-riv-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ng-riv-search { position: relative; flex: 1 1 320px; display: flex; margin: 0; min-width: 0; }
.ng-riv-search .ng-riv-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #777; display: inline-flex; pointer-events: none; }
.ng #myInput {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px 0 44px;
    border: 1px solid var(--ng-ink);
    border-radius: 0;
    background: #fff;
    font-family: var(--ng-lato);
    font-size: 14px;
    color: var(--ng-ink);
    box-sizing: border-box;
}
.ng #myInput::placeholder { color: #888; }
.ng-riv-msg { margin: 0; color: var(--ng-muted); font-size: 14px; }
.ng-riv-msg:empty { display: none; }
.ng-riv-results { gap: 40px; align-items: stretch; flex-wrap: wrap; }
.ng-riv-list { flex: 1 1 360px; min-width: 0; max-height: 640px; overflow-y: auto; }
.ng-riv-results #map {
    flex: 999 1 560px;
    min-width: 0;
    min-height: 520px;
    margin: 0;
    border: 1px solid #d6d1c6;
    border-radius: 0;
    z-index: 0;
}
/* La tabella resta (la ricerca JS filtra le sue righe) ma si legge come elenco */
.ng #myTable, .ng #myTable tbody { display: block; width: 100%; }
.ng #myTable thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.ng #myTable tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ng-line);
}
.ng #myTable td { padding: 0; border: 0; font-family: var(--ng-lato); font-size: 14px; color: var(--ng-muted); line-height: 1.5; }
.ng #myTable td:nth-child(1) { flex: 0 0 100%; order: 1; font-family: var(--ng-jost); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ng-ink); margin-bottom: 4px; }
.ng #myTable td:nth-child(2) { order: 2; }
.ng #myTable td:nth-child(2):not(:empty)::after { content: " \00b7"; }
.ng #myTable td:nth-child(5) { order: 3; }
.ng #myTable td:nth-child(3) { order: 4; }
.ng #myTable td:nth-child(4) { order: 5; }
.ng #myTable td:nth-child(4):not(:empty)::before { content: "("; }
.ng #myTable td:nth-child(4):not(:empty)::after { content: ")"; }
.ng #myTable td:nth-child(6) { flex: 0 0 100%; order: 6; margin-top: 4px; }
.ng #myTable td:nth-child(6) a {
    font-family: var(--ng-jost); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ng-gold); display: inline-flex; align-items: center; gap: 8px;
}
.ng #myTable td:nth-child(6) a:hover { color: var(--ng-ink); }

/* ---------- burger nascosto quando il menu e' aperto ---------- */
.ng.ng-menu-open .ng-burger { visibility: hidden; }

/* ---------- testo introduttivo sotto i titoli ---------- */
.ng-lead { margin: 0; font-family: var(--ng-lato); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--ng-muted); max-width: 60ch; }
.ng-link-arrow { font-family: var(--ng-jost); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ng-ink); display: inline-flex; align-items: center; gap: 10px; }
.ng-link-arrow svg { transition: transform .4s ease; }
.ng-link-arrow:hover svg { transform: translateX(6px); }

/* ---------- contatti ---------- */
.ng-contact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; align-items: flex-start; }
.ng-contact-cards { flex: 1 1 420px; max-width: 640px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.ng-contact-card { background: var(--ng-card); border: 1px solid var(--ng-card-border); padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.ng-contact-addr { margin: 0; font-style: normal; font-family: var(--ng-lato); font-size: 15px; line-height: 1.9; color: var(--ng-ink); }
.ng-contact-side { flex: 0 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.ng-contact-block { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--ng-line); }
.ng-contact-block p { margin: 0; font-family: var(--ng-lato); font-size: 14px; line-height: 1.6; color: var(--ng-muted); }
.ng-contact-links { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }

/* ---------- indice catalogo: tessere senza quella larga ---------- */
.ng-tiles-index .ng-tile { aspect-ratio: 4 / 3; min-height: 280px; }

/* tessera con la didascalia in alto (immagine Snobtooth con scritta gia' stampata in basso) */
.ng-tile-captop .ng-tile-shade { background: linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.7) 100%); }
.ng-tile-captop .ng-tile-cap { top: 0; bottom: auto; padding-top: 76px; }
.ng-tile-captop .ng-tile-badge { top: 26px; }

/* ---------- home: social feed ---------- */
.ng-socialfeed { padding: 0 32px 96px; box-sizing: border-box; }
.ng-socialfeed .ng-wrap { display: flex; flex-direction: column; gap: 28px; }
.ng-socialfeed-head { display: flex; flex-direction: column; gap: 10px; }
.ng-socialfeed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ng-socialfeed-box { background: var(--ng-card); border: 1px solid var(--ng-card-border); display: flex; flex-direction: column; min-width: 0; }
.ng-socialfeed-title { display: inline-flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--ng-card-border); font-family: var(--ng-jost); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ng-ink); }
.ng-socialfeed-embed { padding: 16px; min-height: 120px; display: flex; justify-content: center; overflow: hidden; }
.ng-socialfeed-foot { padding: 4px 22px 20px; }
.ng-socialfeed-embed > div { width: 100%; }
.ng-socialfeed-embed .fb-page, .ng-socialfeed-embed .fb-page span, .ng-socialfeed-embed .fb-page iframe { width: 100% !important; max-width: 500px; }

/* ---------- finestra Zeiss ---------- */
.ng .ng-modal .modal-content { border: 0; border-radius: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.ng .ng-modal .modal-body { padding: 56px 32px 32px; display: flex; flex-direction: column; gap: 18px; }
.ng .ng-modal .modal-body img { width: 100%; height: auto; }
.ng .ng-modal-close { position: absolute; top: 10px; right: 14px; width: 44px; height: 44px; margin: 0; padding: 0; opacity: 1; font-family: var(--ng-jost); font-size: 32px; font-weight: 300; line-height: 1; color: var(--ng-ink); text-shadow: none; }
.ng .ng-modal-close:hover, .ng .ng-modal-close:focus { color: var(--ng-gold); opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .ng-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* sotto i 1024px il video torna a tutta larghezza sopra il testo */
    .ng-hero-video { flex: 1 1 100%; min-height: 480px; }
}
@media (max-width: 860px) {
    .ng-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .ng-h1, .ng-h2 { font-size: 30px; }
    .ng-hero-video { min-height: 420px; }
    .ng-hero-text { padding: 56px 24px; }
    .ng-feature .ng-wrap { gap: 28px 40px; }
}
@media (max-width: 720px) {
    .ng-top { padding: 0 16px; }
    .ng-top .ng-wrap { padding: 14px 0; }
    .ng-page { padding: 36px 16px 64px; }
    .ng-collections { padding: 56px 16px 32px; }
    .ng-band { padding: 32px 16px 64px; }
    .ng-feature { padding: 24px 16px 16px; }
    .ng-feature-media { flex: 0 0 240px; max-width: 240px; }
    .ng-feature h2 { font-size: 24px; }
    .ng #myTable tr { padding: 18px 16px; }
    .ng-socialfeed { padding: 0 16px 64px; }
    .ng-socialfeed-grid { grid-template-columns: minmax(0, 1fr); }
    .ng-contact-card { padding: 22px 20px; }
    .ng .ng-modal .modal-body { padding: 52px 16px 20px; }
    .ng-foot { padding: 44px 16px 32px; }
    .ng-tiles { grid-template-columns: minmax(0, 1fr); }
    .ng-tile, .ng-tile-wide { aspect-ratio: 4 / 5; min-height: 0; }
    .ng-tile-wide { aspect-ratio: 4 / 3; }
    .ng-tile-cap { padding: 22px 20px; }
    .ng-tile-captop .ng-tile-cap { padding-top: 66px; }
    .ng-tile-title { font-size: 22px; }
    .ng-hero-claim { font-size: 24px; }
    .ng-h1, .ng-h2 { font-size: 26px; letter-spacing: .1em; }
    .ng-band h2 { font-size: 24px; }
    .ng-spec { grid-template-columns: 110px minmax(0, 1fr); }
    .ng .overlay a, .ng .overlay .nav-link { font-size: 18px; letter-spacing: .2em; }
    .ng-riv-results #map { min-height: 420px; }
}
@media (max-width: 420px) {
    .ng-grid { grid-template-columns: minmax(0, 1fr); }
    .ng-hero-video { min-height: 360px; }
}