/* main.css — cleaned 2025-08-11T10:58:18.775257Z */
/* NEUROBLASTER / main.css (optimized)
   - Navbar: sticky + shrinking
   - Sections: home, goods, info, contacts
   - Overlay: centered modal w/ scrollable content (desktop) + full-height sheet (mobile)
   - Removed duplicate/unscoped .modal rules; all modal styles are now namespaced to #overlay
*/

/* ---- Navbar ---- */
.navbar-wrap{ position:sticky; top:0; z-index:1000; }
.navbar{
  position:relative;
  height:var(--nav-h);
  display:flex; align-items:center;
  background: rgba(13,15,26,0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: height .25s ease, padding .25s ease, box-shadow .25s ease;
}
.navbar.shrink{ height:var(--nav-h-shrink); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand-zone{ position:relative; display:flex; align-items:center; gap:16px }
.brand-logo{
  position:absolute; left:-24px; top:10px;
  width:160px; height:auto;
  transform-origin:left top;
  transition: transform .25s ease, top .25s ease;
  filter: drop-shadow(0 8px 18px rgba(92, 85, 192, 0.25));
}
.navbar.shrink .brand-logo{ transform: scale(.78); top:4px; }
.brand-name{
  margin-left:148px; /* accommodates overlapped logo width */
  font-weight:900; letter-spacing:.08em; font-size:20px;
  color:var(--text); opacity:.96;
}
@media (max-width:860px){ .brand-name{ display:none } }

.nav-links{ display:flex; gap:18px; align-items:center }
.nav-links a{ color:var(--text-dim); padding:10px 12px; border-radius:10px; transition: background .2s ease, color .2s ease; }
.nav-links a:hover{ background:#1a1e2f; color:var(--text) }
.nav-cta{ display:none } .nav-toggle{ display:none }
@media (max-width:860px){ .nav-links{ display:none } .nav-toggle{ display:inline-flex } .nav-cta{ display:inline-flex } }
.mobile-menu{ display:none; position:absolute; top:100%; left:0; right:0; background:#0e1020; border-bottom:1px solid rgba(255,255,255,0.06) }
.mobile-menu.open{ display:block }
.mobile-menu a{ display:block; padding:14px 22px; border-top:1px solid rgba(255,255,255,0.06); color:var(--text-dim) }
.mobile-menu a:hover{ background:#121532; color:var(--text) }

/* ---- Sections ---- */
#home .home-wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center }
@media (max-width:980px){ #home .home-wrap{ grid-template-columns:1fr } }

.home-text .excerpt{ color:var(--text-dim); max-width:56ch }
.home-text .more{ display:inline-block; margin-top:8px }
.home-image{ border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.06) }

/* ---- Goods ---- */
.product-card .body{ padding:16px 16px 18px }
.product-card .title{ font-weight:800; letter-spacing:.02em }
.product-card .price{ color:#cde5ff; font-weight:800; font-size:18px }
.product-card img{ aspect-ratio:4/3; object-fit:cover }
.card-actions{ display:flex; gap:10px; justify-content:space-between; margin-top:12px }

/* Swiper overrides */
.swiper{ width:100% } .swiper-slide{ height:auto }
.swiper-button-prev, .swiper-button-next{ color:#A7B4FF }
.swiper-pagination-bullet-active{ background:var(--accent) }

/* ---- Info ---- */
.post-card img{ aspect-ratio:3/2; object-fit:cover }
.post-card .body{ padding:16px }
.post-card .meta{ color:var(--muted); font-size:14px }

/* ---- Contacts ---- */
.contacts{ display:grid; grid-template-columns:1fr 1.1fr; gap:28px; align-items:center }
@media (max-width:980px){ .contacts{ grid-template-columns:1fr } }
.contacts .block{ background:#0f1222; border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); padding:18px }

/* ---- Overlay (modal) ----
   All modal styles are scoped to #overlay to avoid collisions.
   Desktop: centered; Mobile: full-height sheet.
*/
#overlay .modal-backdrop{
  position:fixed; inset:0;
  background:rgba(8,10,20,0.72); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:1100;
}
#overlay .modal-backdrop.open{ opacity:1; pointer-events:auto; }

#overlay .modal{
  position:fixed;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(920px,94vw);
  max-height:min(90vh, 100svh - 32px);
  background:#0f1222;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:1201;
}
#overlay .modal.open{ opacity:1; pointer-events:auto; }

#overlay .modal header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background:var(--panel, #111826);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
#overlay .modal .content{
  padding:16px 20px;
  overflow:auto; -webkit-overflow-scrolling:touch;
}
#overlay .modal .close{
  background:transparent; color:var(--text);
  border:1px solid rgba(255,255,255,0.12); border-radius:10px;
}

/* Product gallery inside modal */
#overlay .modal .gallery{ display:grid; grid-template-columns:1fr 140px; gap:14px }
#overlay .modal .gallery .thumbs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:8px }
#overlay .modal .gallery .thumbs img{ border:1px solid rgba(255,255,255,0.06); border-radius:12px; cursor:pointer }
@media (max-width:820px){ #overlay .modal .gallery{ grid-template-columns:1fr } }

/* ---- Badges & helpers ---- */
.price-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:rgba(96,165,250,0.14);
  border:1px solid rgba(96,165,250,0.25);
  color:#DBEAFE; font-weight:700;
}
.hr{ height:1px; width:100%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.14), rgba(255,255,255,0)); margin:16px 0 }

/* ---- Mobile sheet behavior ---- */
@media (max-width:640px){
  #overlay .modal{
    left:0; top:0; transform:none;
    width:100vw; height:100svh; max-height:100svh; border-radius:0;
  }
  #overlay .modal .content{ padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
}