/* styles.css — минималистичный редакционный стиль, сетки и типографика */
:root{
  --bg:#FFF9F1;
  --text:#222;
  --muted:#6b6b6b;
  --accent:#e0b24a;
  --container:1100px;
  --gutter:24px;
  --brand-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --header-gap:1rem;
  font-size:16px;
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch}

body{
  background:#FFF9F1;
  color:#222;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  margin:0;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

img,picture,video,iframe,svg{
  max-width:100%;
  height:auto;
  display:block;
}

h1,h2,h3,h4,h5,h6{
  font-size:1.125rem;
  line-height:1.2;
  margin:0 0 .5rem 0;
}

button,input,textarea,select{font:inherit}
button,.btn{
  min-height:48px;
  min-width:48px;
  padding:.6rem 1rem;
  touch-action:manipulation;
}

p,li{
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}

/* =========================
   HEADER (MOBILE GRID)
========================= */

.site-header{
  border-bottom:1px solid rgba(0,0,0,.06);
  margin-bottom:1rem;
  min-height:48px; /* уменьшено с 64px до ~48px (≈ -25%) */
  /* background был DEBUG — удалён */
}

.header-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:27px 0; /* уменьшено с 36px до ~27px (≈ -25%) */
}

.brand{justify-self:start}

.brand a{
  font-weight:700;
  font-size:1.125rem;
  color:#222;
  text-decoration:none;
}

/* NAV */
.nav{justify-self:end}

.nav-list{
  display:none;
  list-style:none;
  padding:0;
  margin:0;
}

.nav-list li{padding:8px 0}

.nav-list a{
  text-decoration:none;
  color:#222;
  font-size:1rem;
}

.nav-list.is-open{
  display:block;
  grid-column:1 / -1;
  margin-top:12px;
}

/* BURGER */
.burger{
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  padding:8px;
  width:44px;
  height:44px;
  cursor:pointer;
}

.burger:focus{
  outline:none; /* Убираем видимую рамку вокруг бургер-кнопки при фокусе */
  outline-offset:0; /* сброс смещения */
  box-shadow:none; /* убираем возможные теневые эффекты браузера */
}

.burger-box{
  position:relative;
  width:24px;
  height:16px;
}

.burger-inner,
.burger-inner::before,
.burger-inner::after{
  display:block;
  background:#222;
  height:2px;
  border-radius:2px;
  width:100%;
}

.burger-inner{position:relative}

.burger-inner::before,
.burger-inner::after{
  content:'';
  position:absolute;
  left:0;
}

.burger-inner::before{top:-6px}
.burger-inner::after{top:6px}

/* Убираем фокусные рамки и tap-highlight для интерактивных элементов в моб. меню
   Пользователь просил полностью убрать видимые рамки при взаимодействии. */
.burger,
.burger:focus,
.nav-list a,
.nav-list a:focus,
.nav-list.is-open a,
.nav-list.is-open a:focus,
button,
button:focus,
.btn,
.btn:focus,
.btn-buy,
.btn-buy:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent; /* убирает синюю подсветку на iOS/Android */
}

/* Дополнительные правила для надёжного отключения фокуса/подсветки на мобильных браузерах */
.nav-list a:active,
.nav-list a:focus-visible,
.nav-list.is-open a:active,
.nav-list.is-open a:focus-visible,
.burger:active,
.burger:focus-visible,
button:active,
button:focus-visible,
a,
a:active,
a:focus,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important; /* iOS/Android */
  -webkit-appearance: none !important; /* Safari/Chrome */
  appearance: none !important;
  outline-color: transparent !important;
}

/* Убираем внутреннюю рамку фокуса в Firefox для кнопок */
button::-moz-focus-inner{border:0;padding:0}

/* =========================
   LAYOUT
========================= */

.main-grid{
  display:grid;
  grid-template-columns:1fr;
  padding:24px 0;
}

.hero{
  /* mobile-first: stacked layout */
  display:flex;
  flex-direction:column; /* текст сверху, изображение снизу на мобильных */
  gap:16px;               /* вертикальный ритм между колонками */
  align-items:stretch;    /* дочерние блоки растягиваются до единой высоты */
}

/* Текстовый и графический блоки имеют одинаковые верхние/нижние отступы
   — это гарантирует одинаковую визуальную высоту и равный вертикальный ритм */
.hero > .hero-content,
.hero > .hero-image{
  flex:1 1 0; /* убрал лишний '%' */
  box-sizing:border-box;
  padding-block:24px; /* top/bottom padding — мобильная точка */
  display:flex;
  flex-direction:column;
  justify-content:flex-start; /* контент начинается от верхней границы блока после padding */
}

/* Сама фотография должна заполнять доступную площадь блока, сохраняя обрезку */
.hero .hero-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Отступ между hero и следующим разделом — важная пауза в вертикальном ритме */
.recommended{
  margin-top:48px; /* мобильное значение по умолчанию */
}

.headline{
  font-size:1.5rem;
  line-height:1.05;
  margin:0 0 12px;
  font-weight:700;
}

.lede{
  max-width:60ch;
  color:#6b6b6b;
  margin:0;
}

.products-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

/* Product card */
.product-card{
  display:flex;
  flex-direction:column;
  padding:12px;
}

.product-body{
  display:flex;
  flex-direction:column;
  flex:1;
}

.product-title{
  font-size:1rem;
  margin:0 0 6px;
  font-weight:700;
}

.product-desc{
  margin:0 0 12px;
  color:#6b6b6b;
  font-size:.875rem;
}

.product-meta{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:auto;
}

.product-price{
  flex:1;
  font-weight:600;
}

.btn-buy{
  background:none;
  border:0;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

.btn-buy:hover{text-decoration:underline}

/* =========================
   FOOTER
========================= */

.site-footer{
  border-top:1px solid rgba(0,0,0,.06);
  padding:20px 0;
  color:#6b6b6b;
  font-size:.875rem;
}

/* Мобильная версия: картинка сразу после текста */
.hero-image--mobile{
  display:block;
  width:100%;
  height:220px;
  margin-top:40px;
  padding:0;
}

/* Десктопная версия: картинка как отдельный блок */
.hero-image--desktop{
  display:none !important;
}

@media (min-width:481px){
  /* Скрыть мобильную картинку на больших экранах */
  .hero-image--mobile{
    display:none !important;
  }

  /* Показать десктопную картинку */
  .hero-image--desktop{
    display:flex !important;
    flex-direction:column;
    padding-block:32px;
    justify-content:center;
  }

  .hero > .hero-image--desktop{
    flex:1 1 0;
    box-sizing:border-box;
  }
}

@media (max-width:640px){

  .container{padding:0 12px}

  .brand a{font-size:18px}

  .nav a,
  .btn-buy,
  .btn-primary{
    padding:10px 12px;
  }

  /* Сделаем чуть меньшую минимальную высоту на мобильных, чтобы не забивать экран */
  .site-header{min-height:42px} /* уменьшено с 56px до ~42px (≈ -25%) */

  /* Контейнер для абсолютного позиционирования мобильного меню */
  .header-grid{position:relative}

  /* Мобильное всплывающее меню справа под бургером */
  .nav-list.is-open{
    display:block; /* по-прежнему показываем */
    position:absolute; /* выносим поверх потока */
    top:calc(100% + 8px); /* чуть под шапкой */
    right:12px; /* прижать к правому краю (под бургером) */
    left:auto; /* отменяем растягивание слева */
    min-width:160px; /* минимальная ширина меню */
    background:#ffffff; /* контрастный фон для читаемости */
    border-radius:8px;
    padding:8px 10px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    z-index:60; /* выше других элементов */
  }

  /* Пунктам меню дать компактный вертикальный вид внутри всплывашки */
  .nav-list.is-open li{padding:6px 0}

  /* Ссылка внутри всплывающего меню — растянуть и выровнять по левому краю внутри контейнера */
  .nav-list.is-open a{display:block;padding:6px 10px;text-align:left}

   /* Мобильный вариант: изображение под текстом, фиксированная высота, сохраняем ритм */
   /* (управляется .hero-image--mobile выше) */

   /* Центрируем текст в hero на мобильных для единого стильного ритма */
   .hero > .hero-content{
     align-items:center;
     text-align:center;
     /* уменьшенные внутренние отступы, чтобы можно было точно задать соотношение интервалов */
     padding-block:12px;
   }

   /* Новое правило: заставляем hero занимать минимум 100vh на мобильных,
      чтобы секция «Рекомендуем» всегда начиналась со второго экрана */
   .hero{min-height:100vh; gap:12px}


   /* Явно задаём отступ между заголовком и лидом — отправная точка для соотношения */
   .headline{font-size:22px; margin-bottom:12px}
   .lede{max-width:50ch; line-height:1.2}

   .products-grid{gap:14px}
   .product-photo{height:140px}
   .product-title{font-size:16px}
   .product-desc{font-size:13px}

   .site-footer{padding:16px 0;font-size:13px}

   /* Перемещаем бургер вправо в мобильном виде на всех страницах */
   .header-grid .burger{
     grid-column: 3; /* занять правую колонку сетки */
     justify-self: end; /* прижать к правому краю */
   }

   /* Мобильный ритм: более выраженная пауза до следующего раздела */
   .recommended{margin-top:48px}

   /* Новое правило: заставляем .mobile-break переходить на новую строку на мобильных */
   .mobile-break{
     display:block;
     margin-top:2px; /* уменьшённый отступ для компактности */
   }

 }

/* =========================
   TABLET +
========================= */

@media (min-width:481px){

  .header-grid{
    display:flex;
    justify-content:space-between;
    padding:27px 0; /* согласовано с уменьшением для всех точек */
  }

  .nav-list{
    display:flex;
    gap:16px;
    align-items:center;
  }

  .burger{display:none}

  .products-grid{grid-template-columns:repeat(2,1fr)}

  /* Десктоп/планшет: две колонки в hero, равная высота, gap вместо margin */
  .hero{
    flex-direction:row;
    gap:24px;
    align-items:stretch; /* гарантирует, что .hero-content и .hero-image будут одной высоты */
  }

  .hero > .hero-content,
  .hero > .hero-image--desktop{
    padding-block:32px; /* увеличиваем внутренние отступы для более воздушной композиции */
    justify-content:center; /* визуально центрируем контент по вертикали */
  }

  .headline{font-size:2rem}
  .container{max-width:720px;padding:0 16px}

  /* На больших экранах — более заметная пауза перед секцией Рекомендуем */
  .recommended{margin-top:64px}
}

/* =========================
   DESKTOP
========================= */

@media (min-width:769px){
  .container{max-width:1100px}
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .headline{font-size:2.5rem}

  /* Desktop: увеличить шапку примерно на 15% */
  .site-header{min-height:55px}
  .header-grid{padding:31px 0}

  /* ещё более просторный вертикальный ритм на десктопах */
  .hero > .hero-content,
  .hero > .hero-image--desktop{
    padding-block:40px;
  }

  .recommended{margin-top:64px}

  /* Выравниваем цену и кнопку в карточке продукта по центру по вертикали на десктопах */
  .page--catalog .product-meta{
    align-items:center;
  }

  /* Ensure the hero image container clips the scaled image to avoid overflow */
  .page--home .hero .hero-image--desktop{overflow:hidden}

  /* Scale the hero photo up by 10% on desktop only */
  .page--home .hero .hero-photo{
    transform:scale(1.1);
    transform-origin:center center;
  }

  /* ABOUT PAGE - DESKTOP */
  .page--about .article{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:center; /* выравниваем текст и картинку по вертикали */
  }

  .page--about .article-image{
    margin:0;
    display:flex;
    justify-content:center;
  }

  .page--about .site-footer{
    margin-top:72px; /* больше пауза после изображения на ПК */
  }
}

/* =========================
   DESKTOP ONLY
========================= */

/* =========================
   ABOUT PAGE - MOBILE
========================= */

/* Увеличиваем изображение на 15% для смартфонов на странице "о нас" */
@media (max-width:480px){
  .page--about .article-photo{
    transform:scale(1.15);
    transform-origin:center center;
  }

  .page--about .article-image{
    overflow:hidden;
  }
}

/* =========================
   CART PAGE - MOBILE
========================= */

/* Мобильная версия формы оформления заказа */
@media (max-width:640px){
  /* Отступ между "Итого" и "Оформление заказа" */
  .checkout-form{
    margin-top:24px;
  }

  /* Вертикальное расположение полей формы */
  .form-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .form-field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .field-label{
    display:block;
  }

  .form-field input,
  .form-field textarea{
    width:100%;
  }
}

/* =========================
   CART PAGE - DESKTOP
========================= */

/* Десктопная версия формы оформления заказа */
@media (min-width:641px){
  /* Отступ между "Итого" и "Оформление заказа" для ПК */
  .checkout-form{
    margin-top:64px;
  }

  /* Вертикальное расположение полей формы на ПК */
  .form-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .form-field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .field-label{
    display:block;
  }

  .form-field input,
  .form-field textarea{
    width:100%;
  }

  .page--cart .form-actions{
    margin-top:16px; /* небольшая пауза между адресом и кнопкой на ПК */
  }
}