/* =========================================================
   NEWGOLD · Салон в Универмаге Кострома
   ========================================================= */
:root {
  --bg: #f6f2ed;
  --bg-card: #fdfbf7;
  --bg-tint: #faf4ee;
  --bg-deep: #1a1613;

  --ink: #1a1613;
  --ink-2: #3a342e;
  --ink-3: #6b6259;
  --ink-4: #9a9187;
  --ink-5: #c7beb2;

  --rule: #e4ddd1;
  --rule-soft: #efe9dd;
  --rule-strong: #d6ccbd;

  --accent: oklch(0.58 0.11 25);
  --accent-2: oklch(0.52 0.12 25);
  --accent-tint: oklch(0.97 0.012 30);

  --gold: oklch(0.84 0.09 45);
  --gold-2: oklch(0.86 0.1 45);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --t: 0.24s cubic-bezier(.2,.7,.2,1);

  --shadow-soft: 0 10px 28px -12px rgba(60, 40, 18, 0.30), 0 4px 10px -6px rgba(60, 40, 18, 0.18);
  --shadow-card: 0 22px 48px -18px rgba(60, 40, 18, 0.40), 0 8px 18px -8px rgba(60, 40, 18, 0.24);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; color: inherit; background: none; border: none; }

.page { max-width: 1320px; margin: 0 auto; padding: 28px 28px 8px; }

.prose p { font-family: var(--serif); font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.prose p + p { margin-top: 12px; }

.ic {
  width: 22px; height: 22px; stroke: var(--ink); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

/* section head */
.sh-num { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.sh-num .copy { display: flex; flex-direction: column; gap: 6px; }
.sh-num .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-4); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.sh-num .lbl::before { content: ''; width: 18px; height: 1px; background: var(--ink-5); }
.sh-num h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05; letter-spacing: -0.012em; color: var(--ink);
}
.sh-num h2 em { font-style: italic; color: var(--accent-2); font-weight: 400; }

/* media placeholder */
.media-ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, var(--rule-soft) 0 12px, transparent 12px 24px),
    var(--bg-tint);
  display: flex; align-items: center; justify-content: center;
}
.media-ph.dark {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px),
    var(--bg-deep);
}
.media-cap {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: #fff; background: rgba(26,22,19,0.66); backdrop-filter: blur(6px);
  padding: 8px 12px; border-radius: var(--r-sm); text-transform: uppercase;
}
.media-badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
  background: rgba(26,22,19,0.72); color: #fff; backdrop-filter: blur(4px);
}

/* advantages */
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.adv {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--t), transform var(--t);
}
.adv::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.adv:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.adv .ic-w {
  width: 42px; height: 42px; background: var(--accent-tint);
  border: 1px solid var(--rule); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.adv .ic-w .ic { width: 22px; height: 22px; stroke: var(--accent-2); }
.adv h4 {
  font-family: var(--serif); font-weight: 500; font-size: 19px;
  color: var(--ink); letter-spacing: -0.008em; line-height: 1.15;
}
.adv h4 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.adv p { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink-3); line-height: 1.4; }

/* contact info list */
.info-list { list-style: none; display: flex; flex-direction: column; }
.info-row {
  display: grid; grid-template-columns: 40px 130px 1fr; gap: 14px; align-items: center;
  padding: 15px 0; border-bottom: 1px dashed var(--rule);
}
.info-row:last-child { border-bottom: none; }
.info-row .ic-w {
  width: 38px; height: 38px; background: var(--bg-card);
  border: 1px solid var(--rule); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.info-row .ic-w .ic { width: 19px; height: 19px; stroke: var(--accent-2); }
.info-row .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  color: var(--ink-4); text-transform: uppercase;
}
.info-row .v {
  font-family: var(--serif); font-weight: 500; font-size: 18px;
  color: var(--ink); letter-spacing: -0.005em; line-height: 1.3;
}
.info-row .v a:hover { color: var(--accent); }

/* map embed */
.map-col { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.map-embed {
  position: relative; flex: 1 1 auto; min-height: 320px;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--rule); box-shadow: var(--shadow-card);
}
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.map-route {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bg-deep); background: var(--gold); padding: 12px 20px; border-radius: 999px;
  transition: background var(--t);
}
.map-route:hover { background: var(--gold-2); }

/* CTA */
.cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; border-radius: 999px; transition: background var(--t);
}
.cta-btn:hover { background: var(--accent-2); }
.cta-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.cta-btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.cta-strip {
  margin-top: 44px; padding: 28px 32px;
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--r-md); display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.cta-strip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.cta-strip .lead {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 2vw, 24px); color: var(--ink);
  line-height: 1.3; letter-spacing: -0.005em; text-wrap: balance;
}
.cta-strip .lead em { color: var(--accent-2); }
.cta-strip .meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-4); text-transform: uppercase; margin-top: 6px;
}
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   HERO (Dark hero · split)
   ========================================================= */
.vb { background: var(--bg); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); }
.vb_hero {
  background: var(--bg-deep); color: #fdfbf7; position: relative;
  display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: center;
  padding: 52px 48px;
}
.vb_hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 4;
}
.vb_hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 80% at 12% 10%, oklch(0.5 0.08 50 / 0.2), transparent 60%);
}
.vb_hero .c { position: relative; z-index: 2; }
.vb_hero .badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  color: var(--gold); margin-bottom: 20px;
}
.vb_hero .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.7 0.12 45); }
.vb_hero h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05; letter-spacing: -0.015em; color: #fdfbf7; margin-bottom: 16px;
}
.vb_hero h1 em { font-style: italic; color: var(--gold-2); font-weight: 400; }
.vb_hero .sub {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  color: rgba(255,255,255,0.74); line-height: 1.5; max-width: 520px; margin-bottom: 24px;
}
.vb_hero .frame {
  position: relative; z-index: 2; aspect-ratio: 3 / 4; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.16); overflow: hidden;
}
.vb_chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.vb_chips span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12); padding: 7px 12px; border-radius: 999px;
}
.vb_actions { display: flex; gap: 10px; flex-wrap: wrap; }
.vb_actions .b-main {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px;
  background: var(--gold); color: var(--bg-deep);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; transition: background var(--t);
}
.vb_actions .b-main:hover { background: var(--gold-2); }
.vb_actions .b-ghost {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px;
  background: transparent; color: #fdfbf7; border: 1px solid rgba(255,255,255,0.2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; transition: border-color var(--t);
}
.vb_actions .b-ghost:hover { border-color: var(--gold); }

/* =========================================================
   BODY (Magazine layout)
   ========================================================= */
.ve { background: transparent; padding: 48px 32px 0; border-radius: var(--r-md); }
.ve_inner { max-width: 1040px; margin: 0 auto; }
.ve_split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: 44px 0; border-bottom: 1px solid var(--rule); }
.ve_split > * { min-width: 0; }
.ve_sec { padding: 44px 0 0; }
.ve_sec:first-child { padding-top: 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }

/* responsive */
@media (max-width: 880px) {
  .vb_hero { grid-template-columns: 1fr; gap: 26px; padding: 32px 22px; }
  .ve { padding: 28px 20px 40px; }
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .info-row { grid-template-columns: 38px 1fr; }
  .info-row .k { grid-column: 2; }
  .info-row .v { grid-column: 2; }
  .ve_split { grid-template-columns: 1fr; gap: 22px; }
  .contact-grid { grid-template-columns: 1fr; }
  .map-embed { min-height: 260px; }
  .cta-strip { grid-template-columns: 1fr; padding: 24px 20px; }
}
@media (max-width: 560px) {
  .page { padding: 18px 8px 8px; }
  .ve { padding: 28px 0 40px; }
  .vb_hero h1 { font-size: 34px; }
  .adv-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Блоки «Фото» и «Видео» — стили заскоуплены под .ngb
   ========================================================= */
.ngb {
  --bg-card:#fdfbf7; --bg-deep:#1a1613;
  --ink:#1a1613; --ink-2:#3a342e; --ink-3:#6b6259; --ink-4:#9a9187; --ink-5:#c7beb2;
  --rule:#e4ddd1; --rule-strong:#d6ccbd;
  --accent:oklch(0.58 0.11 25); --accent-2:oklch(0.52 0.12 25); --accent-tint:oklch(0.97 0.012 30);
  --gold:oklch(0.84 0.09 45); --gold-2:oklch(0.86 0.1 45);
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-md:10px; --t:0.24s cubic-bezier(.2,.7,.2,1);
  --shadow-card:0 18px 36px -28px rgba(60,40,18,0.30);
  --shadow-lift:0 22px 48px -18px rgba(60,40,18,0.40), 0 8px 18px -8px rgba(60,40,18,0.24);
  font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-2);
  background:transparent; -webkit-font-smoothing:antialiased;
}
.ngb, .ngb *, .ngb *::before, .ngb *::after { box-sizing:border-box; margin:0; padding:0; }
:where(.ngb) a { color:inherit; text-decoration:none; }
.ngb em { font-style:italic; }
.ngb img, .ngb svg { display:block; max-width:100%; }
:where(.ngb) button { cursor:pointer; font-family:inherit; color:inherit; background:none; border:none; }

/* ---- МЕДИА — видео салона (overlay caption) ---- */
.ngb-media-tag {
  position:absolute; z-index:3; font-family:var(--mono); font-size:9.5px;
  letter-spacing:0.14em; text-transform:uppercase; padding:6px 11px; border-radius:999px;
}
.ngb-media-tag.ngb-light { background:rgba(26,22,19,0.72); color:#fff; backdrop-filter:blur(4px); }
.ngb-media-tag.ngb-mtag-live { display:inline-flex; align-items:center; gap:7px; }
.ngb-media-tag.ngb-mtag-live .ngb-dot { width:6px; height:6px; border-radius:50%; background:oklch(0.72 0.16 25); animation:ngb-pulse 1.5s ease-in-out infinite; }
@keyframes ngb-pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

.ngb-play-btn {
  width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,0.28); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.35);
  transition:transform var(--t), background var(--t);
}
.ngb-play-btn:hover { transform:scale(1.06); background:rgba(255,255,255,0.42); }
.ngb-play-btn::after {
  content:''; width:0; height:0; margin-left:4px;
  border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--gold);
}

.ngb-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ngb-v2 .ngb-card {
  position:relative; border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:3 / 4; border:1px solid var(--rule);
  box-shadow:var(--shadow-lift);
}
.ngb-v2 .ngb-frame { position:absolute; inset:0; }
.ngb-v2 .ngb-scrim {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(26,22,19,0.82) 0%, rgba(26,22,19,0.15) 45%, transparent 70%);
}
.ngb-v2 .ngb-media-tag { top:16px; left:16px; }
.ngb-v2 .ngb-center-play { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; }
.ngb-v2 .ngb-cap {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:24px 26px; color:#fdfbf7; transition:opacity var(--t);
}
.ngb-v2 .ngb-scrim, .ngb-v2 .ngb-media-tag { transition:opacity var(--t); }
.ngb-vid-el { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--bg-deep); z-index:1; display:block; }
.ngb-vid-card .ngb-center-play { cursor:pointer; }
.ngb-vid-card.ngb-playing .ngb-scrim,
.ngb-vid-card.ngb-playing .ngb-media-tag,
.ngb-vid-card.ngb-playing .ngb-center-play,
.ngb-vid-card.ngb-playing .ngb-cap { opacity:0; pointer-events:none; }
.ngb-v2 .ngb-cap .ngb-lbl {
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.18em;
  color:var(--gold); text-transform:uppercase; margin-bottom:8px;
}
.ngb-v2 .ngb-cap h3 {
  font-family:var(--serif); font-weight:500; font-size:28px;
  color:#fdfbf7; letter-spacing:-0.01em; line-height:1.05;
}
.ngb-v2 .ngb-cap h3 em { font-style:italic; color:var(--gold-2); font-weight:400; }
.ngb-v2 .ngb-cap p {
  font-family:var(--serif); font-style:italic; font-size:14.5px;
  color:rgba(255,255,255,0.72); line-height:1.4; margin-top:6px;
}

/* ---- СЛАЙДЕР «ФОТО САЛОНА» ---- */
.ngb-fab-stage { position:relative; display:flex; justify-content:center; }
.ngb-fab {
  position:relative; width:100%; aspect-ratio:3 / 4;
  border-radius:var(--r-md); overflow:hidden; background:#000; cursor:zoom-in;
  box-shadow:var(--shadow-lift);
}
.ngb-fab-track { display:flex; height:100%; transition:transform 0.45s cubic-bezier(.2,.7,.2,1); }
.ngb-fab-slide { position:relative; min-width:100%; height:100%; }
.ngb-fab-slide img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; background:var(--bg-deep); opacity:0; transition:opacity 0.5s ease; }
.ngb-fab-slide:not(.ngb-is-loading) img { opacity:1; }
.ngb-fab-shimmer {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, #1a1613 0%, #1a1613 28%, #322619 46%, #463524 50%, #322619 54%, #1a1613 72%, #1a1613 100%);
  background-size:220% 100%; animation:ngb-fab-shim 1.5s linear infinite; transition:opacity 0.5s ease;
}
.ngb-fab-slide:not(.ngb-is-loading) .ngb-fab-shimmer { opacity:0; }
@keyframes ngb-fab-shim { 0% { background-position:130% 0; } 100% { background-position:-130% 0; } }
.ngb-fab-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(26,22,19,0.82) 0%, rgba(26,22,19,0.12) 42%, transparent 65%);
  transition:opacity var(--t);
}
.ngb-fab-badge {
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; padding:6px 11px; border-radius:999px;
  background:rgba(26,22,19,0.72); color:#fff; backdrop-filter:blur(4px);
  font-variant-numeric:tabular-nums; transition:opacity var(--t);
}
.ngb-fab-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 24px; color:#fdfbf7; pointer-events:none; transition:opacity var(--t); }
.ngb-fab-cap .ngb-lbl {
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.18em;
  color:var(--gold); text-transform:uppercase; margin-bottom:8px;
}
.ngb-fab-cap h3 { font-family:var(--serif); font-weight:500; font-size:28px; color:#fdfbf7; letter-spacing:-0.01em; line-height:1.05; }
.ngb-fab-cap h3 em { font-style:italic; color:var(--gold-2); font-weight:400; }
.ngb-fab-cap p {
  font-family:var(--serif); font-style:italic; font-size:14.5px;
  color:rgba(255,255,255,0.72); line-height:1.4; margin-top:6px;
}
.ngb-fab-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.28); border:1px solid rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:30px; line-height:0; color:#fff;
  padding-bottom:3px;
  opacity:0;
  transition:opacity var(--t), background var(--t);
}
.ngb-fab-arrow.ngb-prev { left:12px; }
.ngb-fab-arrow.ngb-next { right:12px; }
.ngb-fab:hover .ngb-fab-arrow { opacity:1; }
.ngb-fab-arrow:hover { background:rgba(255,255,255,0.42); }
@media (hover: none) { .ngb-fab-arrow { display:none; } }
.ngb-fab:not(.ngb-is-first) .ngb-fab-cap, .ngb-fab:not(.ngb-is-first) .ngb-fab-scrim { opacity:0; }
.ngb-fab-altcap {
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:48px 24px 18px;
  font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.4;
  color:var(--gold); text-shadow:0 1px 8px rgba(0,0,0,0.55);
  background:linear-gradient(to top, rgba(26,22,19,0.96) 0%, rgba(26,22,19,0.72) 40%, rgba(26,22,19,0.2) 75%, transparent 100%);
  opacity:0; pointer-events:none; transition:opacity var(--t);
}
.ngb-fab:not(.ngb-is-first) .ngb-fab-altcap { opacity:1; }

/* лайтбокс */
.ngb-fab-lb {
  position:fixed; inset:0; z-index:2147483647; display:none;
  align-items:center; justify-content:center;
  background:rgba(12,9,7,0.94); backdrop-filter:blur(6px); cursor:zoom-out;
}
.ngb-fab-lb.ngb-open { display:flex; }
.ngb-fab-lb-bg {
  position:absolute; inset:0; width:100%; height:100%;
  fill:var(--gold-2); opacity:0.08; pointer-events:none; z-index:0;
}
.ngb-fab-lb-stage { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:16px; width:100%; padding:0 14px; }
.ngb-fab-lb-center {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:min(calc(100vw - 160px), calc(78vh * 3 / 4));
}
.ngb-fab-lb-imgwrap { display:flex; align-items:center; justify-content:center; width:100%; cursor:default; }
.ngb-fab-lb img { width:100%; max-height:78vh; object-fit:contain; border-radius:8px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.7); opacity:0; transition:opacity 0.4s ease; cursor:default; }
.ngb-fab-lb img.ngb-loaded { opacity:1; }
.ngb-fab-lb-shimmer { position:static; inset:auto; display:none; aspect-ratio:3 / 4; width:100%; border-radius:8px; }
.ngb-fab-lb.ngb-is-loading .ngb-fab-lb-shimmer { display:block; }
.ngb-fab-lb.ngb-is-loading .ngb-lb-img { display:none; }
.ngb-fab-lb-close, .ngb-fab-lb-arrow {
  position:absolute; border-radius:50%; color:#fff; line-height:0;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; transition:background var(--t); cursor:pointer;
}
.ngb-fab-lb-close:hover, .ngb-fab-lb-arrow:hover { background:rgba(255,255,255,0.2); }
.ngb-fab-lb-close { top:20px; right:24px; width:44px; height:44px; font-size:26px; }
.ngb-fab-lb-arrow { position:static; transform:none; flex-shrink:0; width:52px; height:52px; font-family:var(--serif); font-size:34px; padding-bottom:4px; }
.ngb-fab-lb-counter {
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
  color:rgba(255,255,255,0.75); text-transform:uppercase; font-variant-numeric:tabular-nums; cursor:default;
}
.ngb-fab-lb-cap {
  width:100%; text-align:center; font-family:var(--serif); font-style:italic;
  font-size:18px; line-height:1.4; color:var(--gold); cursor:default;
  min-height:2.8em; display:flex; align-items:center; justify-content:center;
}
@media (max-width: 560px) {
  .ngb-fab-lb-arrow { width:40px; height:40px; font-size:26px; }
  .ngb-fab-lb-stage { gap:8px; padding:0 8px; }
  .ngb-fab-lb-center { width:min(calc(100vw - 110px), calc(78vh * 3 / 4)); }
  .ngb-fab-lb-cap { font-size:16px; }
}
@media (hover: none) and (max-width: 599.98px) {
  .ngb-fab-lb-arrow { display:none; }
  .ngb-fab-lb-stage { gap:0; padding:0 12px; }
  .ngb-fab-lb-center { width:min(calc(100vw - 24px), calc(78vh * 3 / 4)); }
}