:root {
  --bg: #ececec;
  --section: #f7f7f7;
  --section-alt: #efefef;
  --text: #2a2a2a;
  --muted: #666;
  --accent: #d77724;
  --accent-dark: #ba6116;
  --nav: rgba(31, 29, 29, 0.84);
  --white: #fff;
  --card: #ffffff;
  --shadow: 0 16px 40px rgba(0,0,0,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f4f4f4,#e7e7e7);color:var(--text);font-family:Inter,system-ui,sans-serif}
a{text-decoration:none;color:inherit}
.ad-bar{background:linear-gradient(90deg,#cb6c1c,#dc8437,#c76c1d);color:#fff;text-align:center;padding:12px 16px;font-weight:700;letter-spacing:.2px;box-shadow:0 8px 20px rgba(183,94,18,.18)}
.site-shell{max-width:1000px;margin:0 auto 30px; background: transparent;}
.hero{position:relative; min-height:320px; background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden;}
.hero-overlay{position:absolute; inset:0; background:rgba(0,0,0,.05);}
.hero-content{position:relative; z-index:2; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:24px 16px;}
.hero h1{margin:0; font-size:36px; color:#ffffff; text-shadow:  0 3px 12px rgba(0,0,0,0.7), 0 0 8px rgba(230,160,60,0.35);}
.hero p{margin:0 0 18px; font-size:16px; color:#ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 0 6px rgba(230,160,60,0.35);}
.hero-btn{display:inline-block; margin-top: 180px; background:linear-gradient(180deg,#e6802f,#d86f19); color:#fff; padding:14px 28px; border-radius:14px; font-size:16px; font-weight:700; text-decoration:none;}
.hero-btn:hover {transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.2);}
.main-nav{display:flex; justify-content:space-around; align-items:center; gap:10px; background:rgba(31,29,29,.92); padding:14px 10px; overflow-x:auto; white-space:nowrap;}
.main-nav a{color:#fff; text-decoration:none; font-size:15px; flex:0 0 auto;}
.section{background:var(--section);padding:30px 12px 54px;box-shadow:var(--shadow)}
.section.alt{background:var(--section-alt)}
.section:last-child{border-radius:0 0 18px 18px}
.section h2{font-size:2rem;text-align:center;margin:0;font-weight:800}
.section-divider{width:320px;max-width:100%;margin:18px auto 26px;height:1px;background:#d8d8d8;position:relative}
.section-divider::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-4px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.services-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.service-item{text-align:center;}
.service-item .icon{font-size:2.5rem; display:block; margin-bottom:14px;}
.service-item .label{font-size:16px; line-height:1.4; text-align:center; word-break:break-word;}
.prices-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px;}
.price-card{background:var(--card);border-radius:10px;padding:24px 16px;box-shadow:0 8px 20px rgba(0,0,0,.06);text-align:center;border:1px solid #e8e8e8}
.price-title{font-size:1rem;margin-bottom:10px}
.price-value{font-size:1.05rem;color:var(--accent-dark)}
.price-value strong{font-size:2rem}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery-card{margin:0;position:relative}
.gallery-grid img{width:100%; height:300px !important; object-fit:contain;}
.gallery-card figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.65));color:#fff;padding:20px 10px 10px;border-radius:0 0 8px 8px;font-size:.9rem}
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.review-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.stars{color:var(--accent);letter-spacing:3px;margin-bottom:12px}
.contact-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:24px;align-items:start}
.contact-details{padding:8px 8px 0}
.contact-details p{display:flex;gap:10px;align-items:flex-start;font-size:1rem;margin:18px 0}
.instagram-btn,.nav-btn{display:inline-block;margin-top:18px;color:#fff;padding:16px 22px;border-radius:10px;font-weight:700;box-shadow:0 10px 24px rgba(122,70,26,.22)}
.instagram-btn{background:linear-gradient(90deg,#c66a1c,#8f4e1d)}
.nav-btn{background:linear-gradient(90deg,#e6802f,#c96211);margin-left:0}
.live-map iframe{width:100%;min-height:320px;border:0;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,.08);background:#eee}

.admin-body{background:linear-gradient(180deg,#f5f5f5,#ebebeb)}
.admin-shell{max-width:1100px;margin:30px auto;padding:0 16px 30px}
.login-card,.admin-panel{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:28px}
.login-card{max-width:460px;margin:70px auto}
label{display:block;font-weight:600;margin:14px 0 8px}
input,textarea{width:100%;margin-top:8px;border:1px solid #d7d7d7;border-radius:10px;padding:12px 14px;font:inherit;background:#fff}
textarea{resize:vertical;min-height:140px}
.primary-btn,.secondary-btn{border:0;border-radius:10px;padding:14px 18px;font-weight:700;font:inherit;cursor:pointer}
.primary-btn{background:linear-gradient(180deg,#e6802f,#d86f19);color:#fff;box-shadow:0 8px 18px rgba(104,48,7,.22)}
.secondary-btn{background:#f4f4f4;color:#333;border:1px solid #ddd}
.small-note{color:#666;font-size:.92rem}
.message{margin:0 0 16px;color:#1f6d33;font-weight:600}
.message.error{color:#a12f2f}
.hidden{display:none}
.admin-topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}
.admin-actions{display:flex;gap:10px}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.editor-card{background:#fafafa;border:1px solid #ececec;border-radius:14px;padding:18px}
.editor-card.wide{grid-column:span 2}
.save-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}
.upload-row{display:flex;gap:10px;align-items:center;margin-top:12px}
.upload-row.wrap{flex-wrap:wrap}

@media (max-width: 768px){
  html,body{overflow-x:hidden;}

  .site-shell{
    margin:0 auto 30px;
    max-width:100%;
  }

  .hero{
    min-height:260px;
    border-radius:0;
    background-position:center top;
  }

  .hero-content{
    min-height:260px;
    padding:20px 14px;
  }

  .hero p{
    font-size:15px;
    margin:0 0 14px;
  }

  .section{
    padding:24px 10px 40px;
  }

  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .gallery-grid img{
    width:100%;
    height:190px;
    object-fit:cover;
    border-radius:14px;
  }
}

@media (max-width:768px){
  .services-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
}

.service-item{
  text-align:center;
  padding:16px 10px;
}

service-item{
  transition: all 0.3s ease;
  cursor:pointer;
}

/* эффект при наведении (ПК) */
.service-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* эффект при нажатии (мобильные) */
.service-item:active{
  transform: scale(0.97);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* чуть анимируем иконку */
.service-item .icon{
  transition: transform 0.3s ease;
}

.service-item:hover .icon{
  transform: scale(1.1);
}

@media (min-width: 769px){

  .gallery-grid{
    grid-template-columns:repeat(2,0.85fr);
    justify-content:center;
    gap:20px;
  }

  .gallery-card{
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,0.10);
    transition:transform 0.35s ease, box-shadow 0.35s ease;
  }

  .gallery-card:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 18px 40px rgba(0,0,0,0.16);
  }

  .gallery-grid img{
    width:100%;
    height:500px !important;
    object-fit:cover;
    border-radius:18px;
  }
}

.gallery-card img{
  transform:scale(0.95);
  transition:transform 0.3s ease;
}

.contact-section{
  padding:20px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:stretch;
}

/* Левая карточка */
.contact-details{
  background:#ffffff;
  border-radius:24px;
  padding:24px;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

/* Строки контактов */
.contact-details p{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin:0 0 20px;
  font-size:1.08rem;
  line-height:1.5;
}

/* Иконки слева */
.contact-details p span:first-child{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#d97706,#f59e0b);
  color:#fff;
  font-size:1.2rem;
  box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

/* Кнопки */
.instagram-btn,
.nav-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:70px;
  margin-top:14px;
  padding:18px 22px;
  border-radius:20px;
  color:#fff;
  text-decoration:none;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:0.3px;
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
  transition:all .3s ease;
}

.instagram-btn{
  background:linear-gradient(135deg,#b45309,#f59e0b);
}

.nav-btn{
  background:linear-gradient(135deg,#ea580c,#fb923c);
}

/* Hover эффект */
.instagram-btn:hover,
.nav-btn:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 18px 40px rgba(0,0,0,0.18);
}

/* Карта */
.live-map,
.map-card{
  background:#ffffff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.live-map iframe{
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
  display:block;
}

/* ===== МОБИЛКА ===== */

@media (max-width:768px){

  .contact-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .contact-details{
    padding:20px;
    border-radius:20px;
  }

  .contact-details p{
    font-size:1rem;
    margin-bottom:16px;
  }

  .contact-details p span:first-child{
    width:36px;
    height:36px;
    font-size:1rem;
  }

  .instagram-btn,
  .nav-btn{
    min-height:64px;
    font-size:1rem;
    border-radius:16px;
  }

  .live-map iframe{
    min-height:320px;
  }
@media (min-width: 1024px) {

  .gallery-grid {
    aspect-ratio: 4 / 5 !important;
  }

  .gallery-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

}