/* ============================================================
   ВОДОВОЗ · Кинешма — стили сайта
   Правится редко. Цены и тексты живут в data.js
   ============================================================ */

/* ---------- Токены ---------- */
:root{
  /* Фирменные цвета: глубокая вода + волжский песок */
  --brand:      #0E6E86;
  --brand-dk:   #0A5567;
  --brand-lt:   #E9F3F6;
  --deep:       #0A5567;   /* фон верхней полосы и подвала */
  --sand:       #E4D8BE;
  --sand-dk:    #A8792B;
  --ok:         #1B7A4B;
  --warn:       #B8431F;

  /* Нейтральные с лёгким уклоном в синий */
  --bg:         #F5F8F9;
  --surface:    #FFFFFF;
  --surface-2:  #EDF3F5;
  --ink:        #10202A;
  --ink-2:      #2C4450;
  --muted:      #5E7480;
  --line:       #DCE7EB;

  --shadow-sm:  0 1px 2px rgba(16,32,42,.06);
  --shadow:     0 1px 3px rgba(16,32,42,.07), 0 10px 26px -12px rgba(16,32,42,.18);
  --shadow-lg:  0 2px 6px rgba(16,32,42,.08), 0 24px 56px -20px rgba(16,32,42,.28);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --head: "Literata", Georgia, "Times New Roman", serif;
  --body: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gut:  clamp(16px, 4vw, 36px);
}

/* Тёмная тема. Значения перечислены дважды намеренно:
   первый блок ловит системную настройку, второй — ручной выбор. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:      #58C0DE;
    --brand-dk:   #8BD6ED;
    --brand-lt:   #103039;
    --deep:       #0B2029;
    --sand:       #C9B584;
    --sand-dk:    #D8A94A;
    --ok:         #4FBE86;
    --warn:       #E88A64;

    --bg:         #0A1418;
    --surface:    #101E25;
    --surface-2:  #16272F;
    --ink:        #E7F0F3;
    --ink-2:      #BBD0D8;
    --muted:      #90A8B1;
    --line:       #1E313A;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow:     0 1px 3px rgba(0,0,0,.45), 0 10px 26px -12px rgba(0,0,0,.7);
    --shadow-lg:  0 2px 6px rgba(0,0,0,.5), 0 24px 56px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --brand:      #58C0DE;
  --brand-dk:   #8BD6ED;
  --brand-lt:   #103039;
  --deep:       #0B2029;
  --sand:       #C9B584;
  --sand-dk:    #D8A94A;
  --ok:         #4FBE86;
  --warn:       #E88A64;

  --bg:         #0A1418;
  --surface:    #101E25;
  --surface-2:  #16272F;
  --ink:        #E7F0F3;
  --ink-2:      #BBD0D8;
  --muted:      #90A8B1;
  --line:       #1E313A;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow:     0 1px 3px rgba(0,0,0,.45), 0 10px 26px -12px rgba(0,0,0,.7);
  --shadow-lg:  0 2px 6px rgba(0,0,0,.5), 0 24px 56px -20px rgba(0,0,0,.8);
}

/* ---------- Сброс ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-family:var(--head); font-weight:700; letter-spacing:-.018em; line-height:1.15; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0}

:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:3px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- Раскладка ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.section{padding-block:clamp(44px, 6vw, 76px)}
.section--tint{background:var(--surface-2)}

.section__head{display:flex; flex-direction:column; gap:8px; margin-bottom:clamp(22px,3vw,32px)}
.section__head h2{font-size:clamp(24px, 3.4vw, 34px)}
.section__head p{color:var(--muted); max-width:60ch}

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); font-family:var(--body);
}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--r-sm);
  padding:13px 24px; font-weight:600; font-size:15px; line-height:1.2;
  text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-dk)}
.btn--ghost{background:transparent; color:var(--brand); border-color:var(--line)}
.btn--ghost:hover{background:var(--brand-lt); border-color:var(--brand)}
.btn--sand{background:var(--sand); color:#3A2E12}
.btn--sand:hover{background:#D8C9A6}
.btn--sm{padding:9px 16px; font-size:14px}
.btn--block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Шапка ---------- */
.topbar{
  background:var(--deep); color:#EAF4F7; font-size:13.5px;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px; flex-wrap:wrap}
.topbar a{color:#fff}

.header{
  position:sticky; top:0; z-index:40;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.header .wrap{
  display:flex; align-items:center; gap:clamp(14px,3vw,34px);
  padding-block:12px;
}
.logo{display:flex; align-items:center; gap:10px; flex:none; text-decoration:none; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo__mark{width:36px; height:36px; flex:none}
.logo__text{display:flex; flex-direction:column; line-height:1.1}
.logo__name{font-family:var(--head); font-weight:700; font-size:19px; color:var(--brand); letter-spacing:-.01em}
.logo__city{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

.nav{display:flex; gap:22px; font-size:15px; margin-inline-end:auto}
.nav a{color:var(--ink-2); text-decoration:none}
.nav a:hover{color:var(--brand)}

.header__phone{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; flex:none}
.header__phone a{
  font-family:var(--head); font-weight:700; font-size:19px; color:var(--ink);
  text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.header__phone .header__phone2{font-size:15px; font-weight:600; color:var(--brand); font-family:var(--body)}
.header__phone span{font-size:11.5px; color:var(--muted)}
.footer__phone + .footer__phone{font-size:18px; margin-top:2px}

.burger{display:none; background:none; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px}

/* корзина-кнопка */
.cart-btn{position:relative; flex:none}
.cart-btn__count{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px;
  background:var(--sand-dk); color:#fff; border-radius:999px;
  font-size:11.5px; font-weight:700; display:none;
  align-items:center; justify-content:center; padding:0 5px;
  font-variant-numeric:tabular-nums;
}
.cart-btn.is-filled .cart-btn__count{display:flex}

/* ---------- Первый экран ---------- */
.hero{background:var(--surface); border-bottom:1px solid var(--line)}
.hero .wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px);
  align-items:center; padding-block:clamp(32px,5vw,56px);
}
.hero h1{font-size:clamp(28px, 4.4vw, 44px); margin-bottom:14px}
.hero__sub{color:var(--muted); font-size:clamp(16px,1.9vw,18.5px); max-width:46ch; margin-bottom:26px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero__facts{
  display:flex; gap:0; margin-top:30px; border-top:1px solid var(--line); padding-top:20px; flex-wrap:wrap;
}
.hero__facts div{padding-inline:20px; border-left:1px solid var(--line)}
.hero__facts div:first-child{padding-inline-start:0; border-left:0}
.hero__facts b{display:block; font-family:var(--head); font-size:22px; color:var(--brand); font-variant-numeric:tabular-nums}
.hero__facts span{font-size:13px; color:var(--muted)}

.hero__art{position:relative; display:flex; align-items:center; justify-content:center; min-height:260px}
.hero__disc{
  position:absolute; width:min(300px,72%); aspect-ratio:1; border-radius:50%;
  background:var(--sand); opacity:.6;
}
.hero__art svg{position:relative; width:min(190px,48%)}

/* плашка акции */
.promo-strip{
  background:var(--sand); color:#3A2E12;
  border-bottom:1px solid #D3C5A0;
}
.promo-strip .wrap{
  display:flex; align-items:center; gap:14px; padding-block:11px; flex-wrap:wrap;
  font-size:15px;
}
.promo-strip b{font-family:var(--head); font-size:16.5px}
.promo-strip .btn{margin-inline-start:auto}

/* ---------- Каталог ---------- */
.cat-nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.cat-nav button{
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:8px 18px; font-size:14.5px; font-weight:500; color:var(--ink-2);
}
.cat-nav button:hover{border-color:var(--brand); color:var(--brand)}
.cat-nav button[aria-selected="true"]{background:var(--brand); border-color:var(--brand); color:#fff}

.cat-group{margin-bottom:clamp(30px,4vw,46px)}
.cat-group__head{display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.cat-group__head h3{font-size:clamp(19px,2.4vw,24px)}
.cat-group__head span{font-size:14px; color:var(--muted)}

.products{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  list-style:none;
}

.product{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; display:flex; flex-direction:column; gap:12px; position:relative;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.product:hover{border-color:#BCD4DC; box-shadow:var(--shadow-sm)}
.product__hit{
  position:absolute; top:12px; right:12px;
  background:var(--sand); color:#3A2E12; border-radius:var(--r-sm);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px;
}
.product__art{
  height:180px; border-radius:var(--r-sm);
  background:
    radial-gradient(120% 80% at 50% 8%, var(--surface) 0%, var(--brand-lt) 78%);
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.product__art svg{height:100%; width:auto}
.product__name{font-family:var(--body); font-weight:600; font-size:15.5px; line-height:1.35; letter-spacing:0}
.product__note{font-size:13px; color:var(--muted); line-height:1.4}
.product__rent{
  font-size:13px; color:var(--brand); background:var(--brand-lt);
  border-radius:var(--r-sm); padding:6px 10px; align-self:flex-start;
}
.product__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto}
.product__price{font-family:var(--head); font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.product__price small{font-size:13px; font-weight:400; color:var(--muted); letter-spacing:0; font-family:var(--body)}
.product__old{
  display:block; font-size:13.5px; color:var(--muted); text-decoration:line-through;
  font-variant-numeric:tabular-nums; font-family:var(--body); font-weight:400;
}

/* состояние «в корзине» */
.product.is-added{border-color:var(--brand)}
.qty{display:flex; align-items:center; border:1px solid var(--brand); border-radius:var(--r-sm); overflow:hidden}
.qty button{
  background:var(--brand-lt); border:0; color:var(--brand);
  width:34px; height:36px; font-size:19px; font-weight:600; line-height:1;
}
.qty button:hover{background:var(--brand); color:#fff}
.qty span{
  min-width:34px; text-align:center; font-weight:600; font-size:15px;
  font-variant-numeric:tabular-nums;
}

/* ---------- Доводы ---------- */
.benefits{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); list-style:none;
}
.benefits li{background:var(--surface); padding:20px 22px}
.benefits b{display:block; font-family:var(--head); font-size:17px; margin-bottom:5px; color:var(--brand)}
.benefits p{font-size:14.5px; color:var(--muted); line-height:1.5}

/* ---------- Шаги ---------- */
.steps{
  display:grid; gap:clamp(16px,3vw,28px); list-style:none;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); counter-reset:step;
}
.steps li{position:relative; padding-top:44px}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:0; left:0;
  width:34px; height:34px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-family:var(--head); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.steps b{display:block; font-family:var(--head); font-size:18px; margin-bottom:6px}
.steps p{color:var(--muted); font-size:15px}

/* ---------- Доставка ---------- */
.info-grid{
  display:grid; gap:clamp(16px,3vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
}
.info-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px;
}
.info-card h3{font-size:19px; margin-bottom:12px; color:var(--brand)}
.info-card ul{list-style:none; display:flex; flex-direction:column; gap:9px}
.info-card li{position:relative; padding-left:22px; font-size:15px; line-height:1.5}
.info-card li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:50%; background:var(--sand); border:2px solid var(--brand);
}
.info-card dl{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:15px; margin:0}
.info-card dt{color:var(--muted)}
.info-card dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- Фотополоса ---------- */
.band{position:relative; overflow:hidden; background:var(--deep)}
.band img{
  width:100%; height:clamp(200px, 30vw, 340px); object-fit:cover;
  object-position:center 45%; display:block; opacity:.72;
}
.band__text{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:var(--gut);
  /* Затемнение под текстом — иначе цифра теряется на светлых бликах. */
  background:linear-gradient(90deg, rgba(10,85,103,.72), rgba(10,85,103,.35) 45%, rgba(10,85,103,.72));
}
.band__big{
  font-family:var(--head); font-weight:700; color:#fff; margin:0;
  font-size:clamp(38px, 7vw, 66px); line-height:1; letter-spacing:-.03em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.band__small{
  margin:0; color:#DCEEF4; font-size:clamp(14px,1.8vw,17px);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* ---------- FAQ ---------- */
.faq{max-width:78ch; display:flex; flex-direction:column; gap:0}
.faq details{border-bottom:1px solid var(--line)}
.faq details[open]{padding-bottom:16px}
.faq summary{
  list-style:none; cursor:pointer; padding:16px 34px 16px 0; position:relative;
  font-family:var(--head); font-weight:600; font-size:17.5px; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:24px;
  width:10px; height:10px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); top:27px}
.faq p{color:var(--muted); font-size:15.5px; line-height:1.6; max-width:66ch}

/* ---------- Форма заказа ---------- */
.order{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,34px); box-shadow:var(--shadow);
}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field label{font-size:14px; font-weight:600; color:var(--ink-2)}
.field input,.field textarea,.field select{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
  padding:12px 14px; font-size:16px; width:100%;
}
.field input:focus,.field textarea:focus{background:var(--surface)}
.field textarea{resize:vertical; min-height:88px}
.field small{font-size:12.5px; color:var(--muted)}
.field.is-error input{border-color:var(--warn); background:#FDF2EE}
.field__err{font-size:13px; color:var(--warn); display:none}
.field.is-error .field__err{display:block}

.form-note{font-size:13px; color:var(--muted); line-height:1.5; margin-top:12px}
.form-ok{
  display:none; background:var(--brand-lt); border:1px solid var(--brand);
  border-radius:var(--r); padding:18px 20px; font-size:15.5px; line-height:1.55;
}
.form-ok b{font-family:var(--head); display:block; margin-bottom:5px; font-size:18px; color:var(--brand)}

/* ---------- Итог корзины ---------- */
.summary{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.summary li{display:flex; align-items:baseline; gap:12px; font-size:15px}
.summary__name{flex:1}
.summary__qty{color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.summary__sum{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.summary__empty{color:var(--muted); font-size:15px}
.total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  border-top:1px solid var(--line); padding-top:14px; margin-bottom:18px;
}
.total span{font-size:15px; color:var(--muted)}
.total b{font-family:var(--head); font-size:27px; font-variant-numeric:tabular-nums}
.total__free{color:var(--ok); font-size:13.5px; font-weight:600}

/* ---------- Подвал ---------- */
.footer{background:var(--deep); color:#D6E9EF; padding-block:clamp(34px,5vw,52px) 26px; font-size:15px}
.footer a{color:#fff}
.footer__grid{
  display:grid; gap:clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); margin-bottom:28px;
}
.footer h4{font-family:var(--head); font-size:17px; color:#fff; margin-bottom:11px}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:7px}
.footer__phone{
  font-family:var(--head); font-size:22px; color:#fff; text-decoration:none;
  font-variant-numeric:tabular-nums; display:block; margin-bottom:4px;
}
.footer__legal{
  border-top:1px solid rgba(255,255,255,.18); padding-top:18px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:#A8CBD6;
}

/* ---------- Мелочи ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- Адаптив ---------- */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero__art{order:-1; min-height:200px}
  .nav{display:none}
  .burger{display:block}
  .nav.is-open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 16px; box-shadow:var(--shadow);
  }
  .nav.is-open a{padding:11px 0; border-bottom:1px solid var(--line)}
  .header .wrap{position:relative; flex-wrap:wrap}
}
@media (max-width: 560px){
  body{font-size:16px}
  .header__phone a{font-size:16.5px}
  .hero__facts div{padding-inline:14px}
  .promo-strip .btn{margin-inline-start:0; width:100%}
}