/* ПК «Натуральные напитки» — базовые стили сайта.
   Вся раскладка страниц задана инлайн-стилями в HTML (перенесено из макета 1:1).
   Здесь только сброс, шрифты, ссылки и плейсхолдеры под фото. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#ffffff;
  color:#3f5057;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* адаптив: см. css/responsive.css */
}
a{color:#3f5057;text-decoration:none;transition:color 120ms cubic-bezier(.4,0,.2,1)}
a:hover{color:#2b383d}
button{font-family:inherit}

/* ---- Плейсхолдер под фотографию (в макете были пустые фото-окна) ----
   Замените блок .photo-slot на <img src="../assets/images/..." alt="..."> */
.photo-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:100%;height:100%;min-height:120px;
  padding:20px;box-sizing:border-box;
  background:#f5f7f8;border:1px solid #dde4e6;border-radius:3px;
}
.photo-slot::before{
  content:"";
  width:36px;height:36px;flex:none;
  border-radius:50%;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8a91' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  border:1px solid #dde4e6;
}
.photo-slot span{
  font:500 11px/1.5 'Roboto',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:#7b8a91;text-align:center;
  max-width:240px;
}
.photo-slot span::after{
  content:"Готовится";
  display:block;margin-top:5px;
  font:400 10px/1.4 'Inter',sans-serif;
  letter-spacing:.02em;text-transform:none;color:#9aa8ae;
}

/* ---- Подтверждение перехода к блоку заявки (#cta / #contact) ----
   Клик по «Связаться с нами» и т.п. — якорный переход, не отправка формы;
   вспышка по контуру подтверждает, что переход состоялся и куда именно. */
#cta,#contact{scroll-margin-top:96px}
#cta:target,#contact:target{animation:cta-arrive 1.6s cubic-bezier(.4,0,.2,1)}
@keyframes cta-arrive{
  0%{box-shadow:inset 0 0 0 3px #157a43}
  100%{box-shadow:inset 0 0 0 0 rgba(21,122,67,0)}
}