/* ===== Root ===== */
:root{
  --bg:#ffffff; --fg:#111;
  --gray-300:#cfcfcf;
  --radius:8px; --tr:.2s ease;
  --font-main:"Inter","Manrope",sans-serif;
  --hdr-top:88px; --hdr-nav:44px;
}

/* ===== Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; height:100%;}
body{font:16px/1.6 var(--font-main);background:var(--bg);color:var(--fg);display:flex; flex-direction:column; }
a{color:inherit;text-decoration:none;transition:color var(--tr)}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{width:92%;max-width:1180px;margin:auto}

/* ===== Header (десктоп) ===== */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--hdr-top);
  background:var(--bg);border-bottom:1px solid var(--gray-300);z-index:100;
}
.top-flex{display:flex;align-items:center;justify-content:space-between;height:100%}

/* Поиск (десктоп) */
.search-top{
  display:flex;flex:0 1 360px;max-width:42%;
  border:1px solid var(--gray-300);border-radius:var(--radius);overflow:hidden;
}
.search-top input{flex:1;padding:.65rem 1rem;border:0;font:inherit}
.search-top button{width:54px;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--fg)}

/* Лупа‑триггер скрыта на десктопе */
.search-toggle-btn{display:none}

/* Логотип */
.logo{position:absolute;left:50%;transform:translateX(-50%)}
.logo img{height:64px}

/* Бургер (скрыт до мобилки) */
.nav-toggle{display:none;border:0;background:none;font-size:1.6rem;cursor:pointer;color:var(--fg)}

/* ===== Navigation ===== */
.main-nav{
  position:fixed;top:var(--hdr-top);left:0;right:0;height:var(--hdr-nav);
  background:#000;z-index:90;display:flex;justify-content:center;transition:transform var(--tr);
}
.main-nav .container{width:100%;display:flex;justify-content:center}
.main-nav ul{display:flex;align-items:center;gap:2rem;list-style:none;height:100%}
.main-nav a{color:#fff;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04rem}
.main-nav a:hover{text-decoration:underline}

/* drawer закрыт по умолчанию на мобилке */
@media(max-width:768px){
  .main-nav{top:var(--hdr-top);left:0;width:260px;height:calc(100vh - var(--hdr-top));
            transform:translateX(-100%);border-right:1px solid var(--gray-300);}
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:1.2rem;padding:1.6rem 1.2rem;}
  body.menu-open{overflow:hidden;}
}

/* =========================================================
   МОБИЛЬНЫЙ РЕЖИМ ≤ 768px  — хедер + лупа
   ========================================================= */
@media(max-width:768px){

  /* layout: | лупа | logo | бургер | */
  .top-flex{display:grid;grid-template-columns:44px 1fr auto;align-items:center;column-gap:.6rem}

  /* лупа‑триггер */
  .search-toggle-btn{
      display:flex;width:44px;height:44px;border:0;background:transparent;
      align-items:center;justify-content:center;font-size:1.25rem;color:var(--fg);cursor:pointer;
  }

  /* прячем десктопный поиск */
  .search-top{display:none}

  /* логотип плющим чуть меньше */
  .logo{position:static;transform:none;justify-self:center}
  .logo img{height:48px}

  /* бургер показываем */
  .nav-toggle{display:block}
}

/* ===== Поп‑ап поиска с блюром ===== */
.search-overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);background:rgba(255,255,255,.4);
  z-index:120;transition:opacity var(--tr);
}
body.search-open .search-overlay{display:flex;opacity:1;}

.search-popup{
  display:flex;width:90%;max-width:340px;
  border:1px solid var(--gray-300);border-radius:var(--radius);background:var(--bg);
}
.search-popup input{flex:1;padding:.65rem 1rem;border:0;font:inherit}
.search-popup button{width:54px;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--fg)}

/* XS‑фиксы */
@media(max-width:480px){
  .container{width:94%}
  .logo img{height:40px}
  .search-popup input{padding:.55rem .8rem;font-size:.9rem}
}

/* ===== Footer / прочее ===== */
.site-body{padding-top:100px;background:#efefef; flex:1 0 auto;}
.site-footer{
  border-top:1px solid var(--gray-300);padding:1rem 0;text-align:center;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto;
}
.album-item{position:relative;border:1px solid var(--gray);border-radius:var(--radius);overflow:hidden}
.album-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.album-item input[type="checkbox"]{transform:scale(1.2);margin-right:.25rem;cursor:pointer}