:root{
  --bg:#0c0c0c;--fg:#f2f2f2;--muted:#a7a7a7;--line:#1c1c1c;--brand:#ffffff;
  --max:1280px;--r:18px;--pad:24px;
  --z-header: 60;
  --z-overlay: 900;
  --z-panel: 910;
  --z-fab: 920;
  --z-lightbox: 2000;
}

* {box-sizing:border-box}
html,body {height:100%}
body {margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a {color:inherit;text-decoration:none}
img {display:block;max-width:100%;height:auto;object-fit:contain}
.wrap {max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Header */
.site-header {
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(12,12,12,.65);
  backdrop-filter:saturate(135%) blur(8px);
  border-bottom:1px solid var(--line);
}
.navbar {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px}
.brand {justify-self:start;display:flex;align-items:center;gap:10px}
.brand img {width:34px;height:34px;border-radius:10px;border:1px solid #1e1e1e;background:#0f0f0f}

/* central nav (desktop) */
.nav {justify-self:center;display:flex;gap:18px;flex-wrap:wrap}
.nav a {padding:8px 10px;border-radius:10px}
.nav a:hover {background:#151515}

/* right actions (desktop) */
.actions {justify-self=end;display:flex;gap:10px;align-items:center}
.btn {border:1px solid #2a2a2a;border-radius:12px;padding:10px 14px;font-weight:700}
.btn.primary {background:#fff;color:#111}
.cart-btn {display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:10px}
.cart-btn img {width:24px;height:24px}
.cart-btn:hover {background:#151515}

/* burger hidden by default (desktop) */
.hamburger {
  display:none;
  cursor:pointer;background:none;border:1px solid #2a2a2a;color:var(--fg);
  font-size:20px;border-radius:12px;padding:8px 12px;
}

/* Sections */
section {border-bottom:1px solid var(--line)}
.hero {min-height:86vh;display:grid;place-items:center;background:radial-gradient(1200px 680px at 70% -10%,#202020,transparent 60%),linear-gradient(180deg,#0f0f0f 0,#0c0c0c 100%)}
.hero .content {text-align:center}
.hero h1 {font-size:clamp(38px,6.5vw,82px);line-height:1.02;margin:0 0 12px;letter-spacing:-.02em}
.hero p {color:var(--muted);margin:0 auto;max-width:58ch}
.hero .actions {margin-top:18px;display:flex;gap:12px;justify-content:center}

h2.section-title {font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#d9d9d9;margin:0 0 14px}
.lead {color:var(--muted)}
.card {border:1px solid var(--line);border-radius:var(--r);background:#0f0f0f}
.pad {padding:16px}

/* Tiles */
.tiles.stacked {display:flex;flex-direction:column;gap:14px;padding:18px 0}
.tile {position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0f0f0f;min-height:320px;display:grid;align-content:end}
.tile .bg {position:absolute;inset:0;opacity:.18;background-image:linear-gradient(45deg,rgba(255,255,255,.45) 0 2px,transparent 2px 8px),linear-gradient(-45deg,rgba(255,255,255,.45) 0 2px,transparent 2px 8px);background-size:10px 10px}
.tile .copy {position:relative;padding:22px;text-align:center}
.tile h3 {font-size:clamp(22px,3.6vw,36px);margin:0 0 6px}
.tile p {color:var(--muted);margin:0}
.tile .row {margin-top:12px;display:flex;gap:10px;justify-content:center}
.tile .img-placeholder {margin-bottom:10px}

/* Generic grids */
.grid {display:grid;gap:12px}
.grid.two {grid-template-columns:1fr 1fr}
@media (max-width:860px){.grid.two {grid-template-columns:1fr}}

.list {margin:0;padding:0;list-style:none}
.list li {border-top:1px solid var(--line);padding:12px 0;display:flex;gap:10px;justify-content:space-between;align-items:center}
.list li .img-placeholder {float:left;margin-right:10px}

.footer {color:#9a9a9a;padding:36px 0}
.footer .grid {grid-template-columns:1fr 1fr 1fr}
@media (max-width:860px){.footer .grid {grid-template-columns:1fr}}

.muted {color:var(--muted)}
.center {text-align:center}
.spacer {height:16px}

/* Cart table */
#cart-table th, #cart-table td {padding:8px;border:1px solid var(--line);text-align:left}
#cart-table th {background:#151515}
#cart-table input {width:50px;text-align:center}

/* ========================= */
/*  OVERLAY MENU (Variant A) */
/* ========================= */
.menu-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  z-index:var(--z-overlay);
}
.menu-panel{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  max-width:100%;
  background:#0f0f0f;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 24px;
  transform:translateY(-8px);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:var(--z-panel);
}
.menu-panel .menu-head{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px;
}
.menu-close{
  background:none; border:1px solid #2a2a2a; color:var(--fg);
  border-radius:12px; padding:8px 12px; font-size:14px; cursor:pointer;
}
.menu-links{ display:flex; flex-direction:column; gap:8px; }
.menu-links a{
  display:block; padding:14px 10px; border-radius:12px;
  border:1px solid #1d1d1d; background:#111;
}
.menu-links a:active, .menu-links a:focus{ outline:none; border-color:#2e2e2e }

body.menu-open { overflow:hidden }
body.menu-open .menu-overlay{ opacity:1; pointer-events:auto }
body.menu-open .menu-panel{ opacity:1; pointer-events:auto; transform:translateY(0) }

/* ========================= */
/*   Mobile-only adjustments */
/* ========================= */
@media (max-width:860px){
  .hamburger{ display:block; justify-self:center }
  .nav{ display:none !important }
  .actions .btn{ display:none }
  .actions .cart-btn{ display:none }
  .cart-fab{ display:flex }
}

/* FAB cart hidden on desktop */
.cart-fab{
  position:fixed; top:12px; right:12px;
  z-index:var(--z-fab);
  display:none;
  align-items:center; gap:8px;
  border:1px solid #2a2a2a; background:#121212; color:var(--fg);
  border-radius:14px; padding:8px 12px; line-height:1; text-decoration:none;
}
.cart-fab img{ width:22px; height:22px }

/* ========================= */
/*   Social icons (footer)   */
/* ========================= */
.social {
  display:flex;
  gap:12px;
  margin-top:12px;
}
.social-link {
  display:inline-flex;
  width:32px; height:32px;
  border-radius:10px;
  align-items:center; justify-content:center;
  border:1px solid #2a2a2a;
  background:#111;
  transition:transform .15s ease, opacity .15s ease, border-color .15s ease;
}
.social-link:hover,
.social-link:focus-visible {
  transform:translateY(-1px);
  opacity:.9;
  border-color:#3a3a3a;
  outline:none;
}
.social-link img{ width:20px; height:20px }

/* ========================= */
/*        Lightbox           */
/* ========================= */
.lightbox-overlay{
  position:fixed; inset:0; z-index:var(--z-lightbox);
  background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.lightbox-overlay.open{ display:flex }
.lightbox-img{
  max-width:min(1200px, 96vw);
  max-height:90vh;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  border-radius:12px;
}

/* ===== Lightbox ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;             /* включаем классом .open */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  padding: 2rem;
}
.lightbox-overlay.open { display: flex; }

.lightbox-viewport {
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img,
.lightbox-clone {
  max-width: 95vw;
  max-height: 90vh;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  border-radius: 10px;
  background: #111;
  border: 1px solid #333;
}

/* клонированный плейсхолдер */
.lightbox-clone .lightbox-cloned {
  display: block;
  padding: 2rem;
  min-width: 320px;
  min-height: 200px;
  text-align: center;
  line-height: normal !important; /* на случай, если в исходнике был line-height */
}