/* Styles trimmed per request */ 
:root{--bg:#fffaf3;--paper:#fff7ed;--ink:#1f2937;--muted:#6b7280;--brand:#d32f2f;--accent:#fbbf24;--card:#fff;--ring:rgba(211,47,47,.25);--shadow:0 10px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:radial-gradient(1200px 800px at 70% -10%,#fef3c7,transparent),var(--bg);line-height:1.6}
img{max-width:100%;display:block}.container{width:min(1140px,92vw);margin:0 auto}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid #f1f5f9}
.header__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.nav__toggle{display:none;background:none;border:0;padding:10px;border-radius:10px;cursor:pointer}.nav__bar{display:block;width:24px;height:2px;background:#111;margin:5px 0;border-radius:2px}
.nav__menu{display:flex;list-style:none;gap:20px;margin:0;padding:0}.nav__menu a{color:#374151;text-decoration:none;font-weight:600}.nav__menu a:hover{color:var(--brand)}
.logo__img{max-height:48px;height:auto;width:auto;display:block}
.btn{display:inline-block;border:2px solid var(--brand);background:linear-gradient(180deg,#ffe08a,#f59e0b);color:#111;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);transition:transform .15s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);filter:saturate(1.05)}.btn--ghost{background:#fff;border-color:#f59e0b;color:#7c2d12}
.hero{position:relative;padding:clamp(36px,4vw+32px,88px) 0}.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(28px,3.6vw,48px);line-height:1.15;margin:0 0 8px}.brand{color:#d32f2f}
.hero-tagline{margin-bottom:.5rem; font-size:1.1rem;margin-top:.75rem;color:#5a4635;max-width:720px}.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.hero__trust{display:flex;gap:18px;padding:0;margin:18px 0 0;list-style:'✓  ';color:var(--muted)}
.section{padding:clamp(40px,6vw,96px) 0}.section h2{font-size:clamp(24px,3vw,36px);margin:0 0 8px}.section__lead{color:var(--muted);max-width:800px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--card);border:1px solid #f3f4f6;border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.card--soft{background:linear-gradient(180deg,#fff,var(--paper))}.cards{display:grid;gap:20px}.cards--3{grid-template-columns:repeat(3,1fr)}
.product h3{margin:10px 0 6px}.pilllist{display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:12px 0 0;list-style:none}
.pilllist li{background:#fff7ed;border:1px dashed #f59e0b;border-radius:999px;padding:6px 10px;font-size:14px}
.form{display:grid;gap:12px}.form label{display:grid;gap:6px;font-weight:600}
.form input,.form textarea{padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;outline:none;transition:box-shadow .15s ease,border-color .15s ease;font-size:16px}
.form input:focus,.form textarea:focus{box-shadow:0 0 0 5px var(--ring);border-color:#f59e0b}.form__policy{display:flex;gap:8px;align-items:center;font-size:14px;color:#4b5563}
.contacts{display:grid;gap:6px;padding:0;margin:12px 0}.contacts a{text-decoration:none;color:#374151}.contacts a:hover{color:#7c2d12;text-decoration:underline}
.footer{background:#111827;color:#e5e7eb;padding:26px 0}.footer__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:12px}.footer__nav{display:flex;gap:16px;flex-wrap:wrap}.footer__nav a{color:#e5e7eb;text-decoration:none}.footer__nav a:hover{color:#fbbf24}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}.cards--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards--3{grid-template-columns:1fr}.nav__toggle{display:inline-block}.nav__menu{position:absolute;right:0;top:56px;background:#fff;border:1px solid #eee;border-radius:16px;padding:10px;gap:0;display:none;min-width:220px;box-shadow:var(--shadow)}.nav__menu.open{display:grid}.nav__menu li{padding:6px 8px}}


/* ===== Product grid cards (photo-based) ===== */
.section--cream{ background:linear-gradient(180deg,#fff8e6,#fffaf3); border-top:1px solid #fde68a; border-bottom:1px solid #fde68a }
.section__title-center{ text-align:center; margin-bottom:18px; color:#7c2d12 }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.product-card{ background:#fff; border:1px solid #f3f4f6; border-radius:20px; box-shadow:var(--shadow); overflow:hidden; transition:transform .15s ease, box-shadow .2s ease }
.product-card:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.08) }
.product-card__media{ width:100%; aspect-ratio:1/1; background:#fafafa; overflow:hidden }
.product-card__media img{ width:100%; height:100%; object-fit:cover; display:block }
.product-card__body{ padding:16px 18px }
.product-card__body h3{ margin:2px 0 6px }
.product-card__body p{ margin:0; color:var(--muted) }

@media (max-width: 980px){
  .product-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 560px){
  .product-grid{ grid-template-columns:1fr }
}


/* --- Hero H1 sizing & layout override --- */
.hero h1{
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.3 !important;
  max-width: 900px;
  margin: 0 auto 16px;
  text-align: center;
}


/* --- Hero H1 align left --- */
.hero h1{
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.3 !important;
  max-width: 900px;
  margin: 0 0 16px 0 !important;
  text-align: left !important;
}


/* Ensure mobile dropdown is above content and clickable */
@media (max-width: 560px){
  .nav__menu{
    position:absolute;
    right:0; top:56px;
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:10px;
    gap:0;
    display:none;
    min-width:220px;
    box-shadow: var(--shadow);
    z-index: 1000;
  }
  .nav__menu.open{ display:grid }
}


/* --- Highlight cards --- */
.section--highlight {
  background: #fafafa;
  padding: 60px 0;
}
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.highlight-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.2s;
}
.highlight-card:hover {
  transform: translateY(-4px);
}
.highlight-card .icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.highlight-card.sale {
  border: 2px solid #f4c542;
}
.highlight-card.quality {
  border: 2px solid #4CAF50;
}

/* --- v1.1 hero block adjustments --- */
.hero__image img { max-width: 85%; height: auto; }
.hero__title, .hero__lead { line-height: 1.3; }
.hero__actions { margin-top: 12px; }

/* --- v1.1.1 HERO HOTFIX --- */
/* Стабилизация расположения баннера справа и предотвращение «съезда» */
.hero__image {
  position: static !important;
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  max-width: 40vw !important;
}
.hero__image img {
  width: clamp(260px, 32vw, 420px) !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Компактнее текст в первом экране */
.hero__title, .hero__lead {
  line-height: 1.3 !important;
}

/* Кнопки ближе к тексту */
.hero__actions { margin-top: 12px !important; }

/* Безопасность: не вылезать за экран по высоте */
.hero, .section-hero { overflow: hidden !important; }

/* Респонсивные корректировки */
@media (max-width: 1024px) {
  .hero__image { max-width: 36vw !important; }
}
@media (max-width: 768px) {
  .hero__image { max-width: 100% !important; justify-content: center !important; }
  .hero__image img { width: min(65vw, 380px) !important; }
}
/* --- end HOTFIX --- */

/* --- v1.2 HERO: desktop-only banner + mobile/tablet layout fix --- */
/* По просьбе заказчика: скрыть баннер на планшетах и телефонах, оставить на ноутбуках/ПК */
@media (max-width: 1024px) {
  /* Скрываем правый баннер */
  .hero__image { display: none !important; }

  /* Принудительно делаем одноколоночную структуру без «дырок» от второго столбца */
  .hero, .section-hero, .hero__container, .hero .container {
    display: block !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  /* Текст и кнопки — компактнее и ближе друг к другу */
  .hero__title, .hero__lead { line-height: 1.3 !important; }
  .hero__actions { margin-top: 12px !important; }

  /* Безопасный отступ блока сверху/снизу */
  .hero, .section-hero { padding-top: 20px !important; padding-bottom: 24px !important; }
}

/* Для очень узких экранов — чуть мягче размеры заголовка, если в стилях есть фиксированные */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(22px, 7vw, 28px) !important; }
  .hero__lead  { font-size: clamp(14px, 4.2vw, 16px) !important; }
}
/* --- end v1.2 patch --- */

/* --- v1.3 HERO banner fix --- */
/* Баннер показываем только на ноутбуках и ПК, скрываем < 1280px */
@media (max-width: 1279px) {
  .hero__image { display: none !important; }
}
/* --- end v1.3 --- */

/* --- v1.4 HERO force hide banner --- */
@media screen and (max-width: 1279px) {
  .hero__image,
  .hero__image * {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
}
/* --- end v1.4 --- */

/* --- v1.5 HERO banner resize --- */
.hero__image img {
  max-width: 70% !important;  /* уменьшаем баннер пропорционально */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important; /* держим справа */
}
/* --- end v1.5 --- */


/* --- v1.6 HERO: tighter headings + closer actions + smaller banner --- */
.hero__title, .hero h1 { line-height: 1.18 !important; margin-bottom: 10px !important; }
.hero__lead, .hero p.lead { line-height: 1.32 !important; margin-bottom: 14px !important; }
.hero__actions { margin-top: 10px !important; }
.hero__image img { max-width: 65% !important; height: auto !important; object-fit: contain !important; margin-left: auto !important; display: block !important; }
/* --- end v1.6 --- */



/* --- v1.10 Product price styling --- */
.product-price {
  margin-top: 10px;
  font-size: 1.1em;
  color: #222;
}
.product-price span {
  background: linear-gradient(90deg, #ffcc00, #ff8800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* --- end v1.10 --- */


/* --- v1.11 Product price bottom styling --- */
.product-price {
  margin-top: 15px;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}
.product-price span {
  color: #e63946;
  padding: 6px 14px;
  border: 2px solid #e63946;
  border-radius: 8px;
  background: #fff7f7;
  box-shadow: 0 2px 6px rgba(230,57,70,0.25);
}
/* --- end v1.11 --- */


/* --- v1.12 Product price FIX --- */
.product-price {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.2em;
}
.product-price__label {
  color: #1f2937;
}
.product-price__badge {
  padding: 8px 16px;
  border: 2px solid #e63946;
  border-radius: 10px;
  background: #fff7f7;
  color: #e63946 !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  box-shadow: 0 2px 6px rgba(230,57,70,0.18);
}
/* --- end v1.12 --- */


/* --- v1.13 Product price rubles --- */
.product-price {
  margin-top: 16px;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}
.product-price__label {
  margin-right: 6px;
  color: #1f2937;
}
.product-price__badge {
  padding: 6px 14px;
  border: 2px solid #e63946;
  border-radius: 8px;
  background: #fff7f7;
  color: #e63946 !important;
  box-shadow: 0 2px 6px rgba(230,57,70,0.18);
}
/* --- end v1.13 --- */


/* --- v1.14 Product price per kg --- */
.product-price {
  margin-top: 16px;
  text-align: center;
}
.product-price__badge {
  display: inline-block;
  padding: 10px 18px;
  font-size: 1.15em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ff7b00, #ff3c00);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
/* --- end v1.14 --- */


/* --- v1.15 Price badge --- */
.product-badge.price {
  background: linear-gradient(90deg, #ff7b00, #ff3c00);
  color: #fff !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 14px;
  display: inline-block;
  margin-top: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* --- end v1.15 --- */


/* --- v1.16 Price row under cards --- */
.product-price-row{
  margin: 12px 0 0 0;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
}
.product-price-row span{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: #fff7f0;
  border: 2px solid #ff7b00;
  color: #d43d00;
  box-shadow: 0 2px 6px rgba(255,123,0,0.2);
}
/* --- end v1.16 --- */


/* --- v1.17 Price row fixed --- */
.product-price-row {
  margin: 10px 0 0 0;
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
}
.product-price-row span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff7f0;
  border: 2px solid #ff7b00;
  color: #d43d00;
  box-shadow: 0 2px 6px rgba(255,123,0,0.2);
}
/* --- end v1.17 --- */


/* --- v1.18 Price inside card footer --- */
.product-badge.price, .product-price, .product-price-row { display: none !important; }
.product-price-footer{
  margin-top: 14px;
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
}
.product-price-footer span{
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  background:#fff7f0;
  border:2px solid #ff7b00;
  color:#d43d00;
  box-shadow:0 2px 6px rgba(255,123,0,0.2);
}
/* --- end v1.18 --- */

.pilllist .price-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; padding:10px 14px; border-radius:999px;
  background: linear-gradient(135deg, #ffe8a3, #f1c453);
  color:#1b1b1b; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.pilllist .price-badge:hover{ transform: translateY(-1px); }


/* Force border for delivery card */
.highlight-card.delivery{
  border: 2px solid #f1c453;
  border-radius: 16px;
  padding: 24px;
  background:#fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  text-align:center;
}

/* Delivery card icon appearance (outline truck on mint square) */
.highlight-card.delivery .icon{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:12px;
  background:#EAF8EF; /* light mint */
  color:#2bb673;      /* sets stroke via currentColor */
  margin: 0 auto 12px;
}
.highlight-card.delivery .icon img{ width:40px; height:40px; display:block }