:root{
  --bg:#fbf7f1;
  --panel:#fffefc;
  --wood:#b77744;      /* дерев'яний теплий */
  --wood-dark:#8b5a34;
  --green:#6b8e3f;     /* природний акцент */
  --muted:#6b6b6b;
  --container:1200px;
  --radius:12px;
  --shadow: 0 8px 24px rgba(27,27,27,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#222;
  background:linear-gradient(180deg,var(--bg) 0%, #f3efe9 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.wrap{max-width:var(--container);margin:0 auto;padding:1rem}

/* TOPBAR */
.topbar{
  background:linear-gradient(180deg, rgba(183,119,68,0.08), rgba(255,255,255,0));
  border-bottom:1px solid rgba(139,90,52,0.06);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo h1{margin:0;font-family:"Playfair Display",serif;font-weight:700;color:var(--wood-dark);font-size:1.3rem}
.logo .sub{margin:0;color:var(--muted);font-size:0.9rem}

.contact{display:flex;align-items:center;gap:0.5rem}
.phone{color:var(--wood-dark);text-decoration:none;background:linear-gradient(180deg, rgba(183,119,68,0.10), rgba(183,119,68,0.04));padding:8px 12px;border-radius:10px;font-weight:700;border:1px solid rgba(139,90,52,0.06)}
.menu-btn{background:transparent;border:1px solid rgba(139,90,52,0.06);color:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer}

/* NAV */
.nav{display:block;background:transparent;margin-top:8px}
.nav ul{display:flex;gap:1rem;padding:0;margin:0;list-style:none}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{background:linear-gradient(180deg, rgba(183,119,68,0.06), rgba(183,119,68,0.03));color:var(--wood-dark)}

/* HERO */
.hero{
  position:relative;
  padding:3.2rem 0;
  border-radius:12px;
  margin:1rem 0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.4), rgba(243,239,233,0.6)), url('images/hero.jpg') center/cover no-repeat;
  box-shadow:var(--shadow);
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.35))}
.hero-inner{position:relative;z-index:2;max-width:900px}
.hero h2{margin:0;font-family:"Playfair Display",serif;font-size:2rem;color:var(--wood-dark)}
.hero p{color:var(--muted);margin:0.6rem 0 1rem}
.cta{display:inline-block;background:linear-gradient(180deg,var(--wood),var(--wood-dark));color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(139,90,52,0.12)}

/* MAIN SECTIONS */
.section{padding:2rem 0}
.section.alt{background:linear-gradient(180deg, rgba(240,236,227,0.6), transparent);border-top:1px solid rgba(139,90,52,0.03)}
.section h3{margin:0 0 0.7rem;color:var(--wood-dark);font-family:"Playfair Display",serif}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--panel);padding:16px;border-radius:12px;border:1px solid rgba(139,90,52,0.06);box-shadow:var(--shadow)}
.card span{font-size:1.6rem;display:block}
.card h4{margin:8px 0 6px;color:var(--wood-dark)}
.card p{margin:0;color:var(--muted);font-size:0.95rem}

/* GALLERY PREVIEWS: 3 крупні прев'ю */
.previews{display:flex;gap:12px;margin-top:1rem}
.preview{flex:1;border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(139,90,52,0.04);box-shadow:var(--shadow);cursor:pointer;position:relative}
.preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.preview:hover img{transform:scale(1.03)}
/* висота прев'ю — трохи вища для акценту */
.preview.one{height:360px}
.preview.two{height:360px}
.preview.three{height:360px}

/* MORE GRID (скрита зона з 20 фото) */
.more-area{margin-top:14px}
.btn-wood{display:inline-block;background:linear-gradient(180deg,var(--wood),var(--wood-dark));color:#fff;padding:10px 14px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.more-grid{margin-top:12px;overflow:hidden;max-height:0;transition:max-height .45s ease;padding:0}
.more-grid.expanded{max-height:1800px;padding:12px 0}
.more-grid .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.thumb{background:#fff;border-radius:10px;overflow:hidden;border:1px solid rgba(139,90,52,0.04);box-shadow:var(--shadow);padding-bottom:66%;position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;transition:transform .25s}
.thumb img:hover{transform:scale(1.04)}

/* MAP */
.map{margin-top:1rem;background:transparent;padding:10px;border-radius:10px}
.map iframe{width:100%;height:300px;border:0;border-radius:8px}

/* CONTACT */
.big-phone{font-size:1.2rem;margin-top:0.5rem}
.big-phone a{text-decoration:none;color:var(--wood-dark);background:transparent;padding:6px 8px;border-radius:8px}

/* FOOTER */
.footer{padding:1rem 0;border-top:1px solid rgba(139,90,52,0.03);text-align:center;color:var(--muted)}

/* LIGHTBOX */
.lightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,0.6);z-index:1300;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.lightbox[aria-hidden="false"]{opacity:1;pointer-events:auto}
.lb-content{max-width:92%;max-height:86%;display:flex;flex-direction:column;align-items:center;gap:8px}
.lb-content img{max-width:100%;max-height:78vh;border-radius:10px;object-fit:contain;box-shadow:0 18px 60px rgba(20,20,20,0.35)}
.lb-caption{color:#fff;background:rgba(0,0,0,0.35);padding:6px 10px;border-radius:999px;font-weight:600}
.lb-close{position:fixed;top:18px;right:18px;background:var(--wood);color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;z-index:1350}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.85);border:0;color:var(--wood-dark);width:44px;height:44px;border-radius:8px;cursor:pointer;z-index:1350;font-size:20px}
.lb-prev{left:18px}
.lb-next{right:18px}

/* responsive */
@media (max-width:900px){
  .previews{flex-direction:column}
  .preview.one,.preview.two,.preview.three{height:260px}
  .nav ul{flex-direction:column}
  .hero h2{font-size:1.4rem}
  .lb-nav{width:38px;height:38px}
}

/* ===== Вставте цей блок в кінець styles.css або замініть існуючі правила для header ===== */

/* Загальні правила для header: гнучкий контейнер, дозволяє переносити елементи */
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;            /* дозволяє елементам переноситись на новий ряд */
  position: relative;
  overflow: visible;         /* захист від обрізання */
}

/* Лого */
.header-wrap .logo {
  flex: 0 1 auto;
  min-width: 160px;
}

/* Навігація (за замовчуванням — горизонтально і центровано) */
.header-wrap .nav {
  order: 1;
  flex: 1 1 480px;
  min-width: 220px;
  display: block;
}
.header-wrap .nav ul {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
}

/* Блок контактів праворуч */
.header-wrap .contact {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 140px;
  justify-content: flex-end;
}

/* Кнопка меню прихована на широких екранах */
.menu-btn {
  display: none;
}

/* ----------------- Планшет (триколонна сітка) -----------------
   Ширина вибрана як орієнтир; при потребі підкорегуйте max-width */
@media (max-width: 1024px) {
  /* Робимо header трьохколонним: логотип | вертикальна навігація | контакти */
  .header-wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
  }

  /* Логотип ліворуч */
  .header-wrap .logo { justify-self: start; }

  /* Навігація — по центру, вертикальна */
  .header-wrap .nav {
    order: 1;
    flex: none;
    min-width: 220px;
    justify-self: center;
  }
  .header-wrap .nav ul {
    display: flex;
    flex-direction: column;   /* вертикальний список пунктів */
    gap: 10px;
    align-items: center;
  }
  .header-wrap .nav a {
    padding: 6px 10px;
    display: block;
  }

  /* Контакти — праворуч */
  .header-wrap .contact { justify-self: end; }

  /* Меню-кнопка залишається прихованою (меню видно вертикально) */
  .menu-btn { display: none; }
}

/* ----------------- Телефон / дуже вузькі екрани ----------------- */
@media (max-width: 600px) {
  /* На телефонах зробимо вертикальну структуру:
     логотип (повна ширина)
     навігація — схована по замовчуванню, показується по кнопці
     контакти — на правому боці першого рядка (через absolute) або під навігацією */
  .header-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .header-wrap .logo {
    order: 0;
    width: 100%;
  }

  /* Навігація схована за замовчуванням, показується коли додається клас .open до .nav */
  .header-wrap .nav {
    order: 2;
    width: 100%;
  }
  .header-wrap .nav ul {
    display: none; /* приховуємо вертикальну навігацію по замовчуванню */
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
  }
  .header-wrap .nav.open ul,
  .header-wrap .nav.open { /* коли .nav має клас .open — показуємо пункти */
    display: block;
  }
  .header-wrap .nav.open ul {
    display: flex;
  }

  /* Контакти: розташунок праворуч в одному рядку з логотипом */
  .header-wrap .contact {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }

  /* Покажемо кнопку меню на телефоні */
  .menu-btn {
    display: inline-block;
    margin-left: 8px;
  }

  /* Дрібні покращення стилю для мобільних */
  .nav a {
    padding: 8px 12px;
    width: 100%;
    text-align: left;
  }
}

/* Додаткове: якщо JS додає .open до #mainNav, забезпечити видимість */
#mainNav.open ul {
  display: flex !important;
  flex-direction: column;
}

/* Забезпечуємо, щоб нічого не обрізалося у header (особливо телефон) */
.topbar, .header-wrap, .nav, .contact, .logo {
  overflow: visible;
}

/* ===== Кінець блоку ===== */